@chargebee/code-samples

@cb-docs/code-samples

A self-contained, reusable React component for generating and displaying API code samples from OpenAPI specifications.

Features

• Self-Contained: Generates code samples on-the-fly from OpenAPI specs
• Multi-Language: Supports 12+ languages (cURL, Node.js, Python, PHP, Ruby, Java, .NET, Go, TypeScript)
• Syntax Highlighting: Powered by Shiki
• Feature-Rich: Carousel, copy button, animations, language switcher
• Module Federation: Consumable across multiple apps via Vite Module Federation
• Themeable: Configurable themes and styling

Installation

pnpm add @cb-docs/code-samples

Usage

import { CodeSamples } from '@cb-docs/code-samples';
import '@cb-docs/code-samples/styles';

function MyPage() {
  return (
    <CodeSamples
      openapi="/path/to/openapi.json"
      resource="customer"
      operation="delete_a_customer"
      apiVersion="v2"
      pcVersion="v2"
      theme="chargebee"
      features={{
        carousel: true,
        copyButton: true,
        animations: true,
      }}
    />
  );
}

Props

Prop	Type	Required	Description
openapi	string | OpenAPISpec	✅	OpenAPI spec URL or object
resource	string	✅	Resource name (e.g., "customer")
operation	string	✅	Operation name (e.g., "delete_a_customer")
apiVersion	"v1" | "v2"	❌	API version (default: "v2")
pcVersion	"v1" | "v2"	❌	Product Catalog version (default: "v2")
siteName	string	❌	Site name placeholder (default: "your-site")
apiKey	string	❌	API key placeholder (default: "test_api_key")
theme	string | ThemeConfig	❌	Theme configuration (default: "default")
highlighter	HighlighterConfig	❌	Shiki highlighter config
features	FeaturesConfig	❌	Feature toggles
onLanguageChange	(lang: string) => void	❌	Language change callback
onCopy	(code: string) => void	❌	Copy callback

Module Federation

This package is configured for Vite Module Federation, allowing it to be consumed by multiple applications without bundling duplication.

Host Configuration (api-docs example)

// vite.config.ts
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    federation({
      name: 'apiDocs',
      remotes: {
        codeSamples: 'http://localhost:5001/assets/remoteEntry.js',
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
      },
    }),
  ],
});

Development

# Install dependencies
pnpm install

# Start dev server (port 5001)
pnpm dev

# Build for production
pnpm build

Downloading OpenAPI Specs Locally

To download the latest OpenAPI specifications locally for development:

./download-oas.sh

⚠️ Note: You must be connected to Twingate to access the CloudFront CDN where the OpenAPI specs are hosted.

This script will download the following files:

• oas/v1/index.json - API V1
• oas/v2-pcv1/index.json - API V2 with Product Catalog V1
• oas/v2-pcv2/index.json - API V2 with Product Catalog V2

The oas/ directory is gitignored, so you'll need to run this script after cloning the repository.

Architecture

• generators/: Language-specific code generators (Go, Node.js, Python, etc.)
• metadata/: OpenAPI metadata extraction
• components/: React UI components
• styles/: CSS themes and animations

License

MIT