@bernierllc/docs-suite

Complete documentation system combining docs-generator, design-system-manager with Next.js, React components, and interactive features.

Installation

npm install @bernierllc/docs-suite

Usage

Basic Usage

import { DocsSuite, createDocsSuite, DocsViewer, ComponentPlayground, SiteBuilder } from '@bernierllc/docs-suite';

// Create a docs suite instance
const docsSuite = createDocsSuite({
  docsGenerator: {
    markdownRenderer: 'markdown-it',
    codeHighlighting: true
  },
  designSystem: {
    tokensPath: './tokens.json',
    componentsPath: './components'
  },
  build: {
    outputDir: './dist',
    basePath: '/docs'
  }
});

// Generate a complete documentation site
const siteConfig = {
  id: 'my-docs',
  name: 'My Documentation',
  description: 'Complete documentation for your project',
  pages: [
    {
      id: 'getting-started',
      title: 'Getting Started',
      slug: 'getting-started',
      content: '# Getting Started\n\nWelcome to our documentation.',
      published: true,
      createdAt: new Date(),
      updatedAt: new Date()
    }
  ],
  components: [],
  theme: { primary: '#007bff' },
  navigation: { type: 'sidebar' },
  metadata: {},
  createdAt: new Date(),
  updatedAt: new Date()
};

const result = await docsSuite.generateSite(siteConfig);
console.log('Site generated:', result.success);

Using React Components

import React from 'react';
import { DocsViewer, ComponentPlayground, SiteBuilder } from '@bernierllc/docs-suite';

// Documentation viewer component
const MyDocsPage = () => {
  return (
    <DocsViewer
      siteId="my-docs"
      pageId="getting-started"
      theme={{ primary: '#007bff' }}
      onPageChange={(pageId) => console.log('Page changed:', pageId)}
      onSearch={(query) => console.log('Search:', query)}
    />
  );
};

// Component playground
const MyPlayground = () => {
  const component = {
    id: 'button',
    name: 'Button',
    description: 'A reusable button component',
    category: 'ui',
    props: [
      { name: 'variant', type: 'string', defaultValue: 'primary' },
      { name: 'size', type: 'string', defaultValue: 'medium' },
      { name: 'disabled', type: 'boolean', defaultValue: false }
    ],
    examples: [
      {
        name: 'Primary Button',
        code: '<Button variant="primary">Click me</Button>',
        props: { variant: 'primary' }
      }
    ],
    code: 'export const Button = ({ variant, size, disabled, children }) => { /* ... */ };',
    metadata: {},
    createdAt: new Date(),
    updatedAt: new Date()
  };

  return (
    <ComponentPlayground
      component={component}
      onCodeChange={(code) => console.log('Code changed:', code)}
      onPropsChange={(props) => console.log('Props changed:', props)}
    />
  );
};

// Site builder interface
const MySiteBuilder = () => {
  return (
    <SiteBuilder 
      siteId="my-docs"
      onSiteUpdate={(site) => console.log('Site updated:', site)}
      onPageAdd={(page) => console.log('Page added:', page)}
      onComponentAdd={(component) => console.log('Component added:', component)}
    />
  );
};

API Reference

DocsSuite Class

The main orchestration class that combines documentation services.

Constructor

constructor(config?: DocsSuiteConfig)

Core Methods

// Site generation
generateSite(config: SiteConfig): Promise<BuildResult>
buildPage(page: PageConfig): Promise<BuiltPage>
buildComponent(component: ComponentConfig): Promise<BuiltComponent>

// Site management
createSite(site: SiteConfig): Promise<SiteResult>
updateSite(siteId: string, updates: Partial<SiteConfig>): Promise<SiteResult>
deleteSite(siteId: string): Promise<DeleteResult>
getSite(siteId: string): Promise<SiteConfig>
listSites(options?: ListOptions): Promise<SiteList>

// Content management
addPage(siteId: string, page: PageConfig): Promise<PageResult>
updatePage(pageId: string, updates: Partial<PageConfig>): Promise<PageResult>
deletePage(pageId: string): Promise<DeleteResult>
getPage(pageId: string): Promise<PageConfig>

// Component management
addComponent(component: ComponentConfig): Promise<ComponentResult>
updateComponent(componentId: string, updates: Partial<ComponentConfig>): Promise<ComponentResult>
deleteComponent(componentId: string): Promise<DeleteResult>
getComponent(componentId: string): Promise<ComponentConfig>

// Build and deployment
buildSite(siteId: string, options?: BuildOptions): Promise<BuildResult>
deploySite(siteId: string, options?: DeployOptions): Promise<DeployResult>
previewSite(siteId: string): Promise<PreviewResult>

// Search and navigation
searchContent(query: string, options?: SearchOptions): Promise<SearchResult>
generateNavigation(siteId: string): Promise<NavigationResult>

React Components

DocsViewer

Interactive documentation viewer with navigation, search, and theming.

interface DocsViewerProps {
  siteId: string;
  pageId?: string;
  theme?: ThemeConfig;
  onPageChange?: (pageId: string) => void;
  onSearch?: (query: string) => void;
}

ComponentPlayground

Interactive component testing and documentation interface.

interface ComponentPlaygroundProps {
  component: ComponentConfig;
  theme?: ThemeConfig;
  onCodeChange?: (code: string) => void;
  onPropsChange?: (props: Record<string, any>) => void;
}

SiteBuilder

Complete site building interface with content management.

interface SiteBuilderProps {
  siteId: string;
  onSiteUpdate?: (site: SiteConfig) => void;
  onPageAdd?: (page: PageConfig) => void;
  onComponentAdd?: (component: ComponentConfig) => void;
}

Configuration

DocsSuiteConfig

interface DocsSuiteConfig {
  docsGenerator?: {
    markdownRenderer?: string;
    codeHighlighting?: boolean;
    plugins?: string[];
  };
  designSystem?: {
    tokensPath?: string;
    componentsPath?: string;
    themes?: string[];
  };
  build?: {
    outputDir?: string;
    basePath?: string;
    staticExport?: boolean;
    optimization?: boolean;
  };
  deployment?: {
    provider?: 'vercel' | 'netlify' | 'github-pages';
    domain?: string;
    environment?: 'production' | 'staging' | 'development';
  };
  search?: {
    provider?: 'lunr' | 'algolia';
    indexFields?: string[];
    boostFields?: Record<string, number>;
  };
  ui?: {
    theme?: ThemeConfig;
    components?: ComponentOverrides;
    layout?: LayoutConfig;
  };
}

Features

Complete Documentation System

• Site Generation: Build complete static documentation sites
• Interactive Components: React-based documentation components
• Design System Integration: Seamless integration with design tokens
• Search Functionality: Full-text search across documentation
• Navigation: Intelligent navigation generation

Static Site Generation

• Next.js Integration: Uses Next.js for optimized static site generation
• Image Optimization: Automatic image optimization
• Performance: Built-in performance optimizations
• SEO: Search engine optimization features

Component Playground

• Interactive Testing: Test components with different props
• Live Preview: Real-time component preview
• Code Editor: Built-in code editor for component examples
• Props Controls: Interactive controls for component props

Search and Navigation

• Full-text Search: Search across pages, components, and design tokens
• Faceted Search: Filter results by type, category, etc.
• Smart Navigation: Auto-generated navigation structure
• Breadcrumbs: Dynamic breadcrumb generation

Integration with BernierLLC Packages

This suite integrates with several @bernierllc packages:

• @bernierllc/docs-generator: Core documentation generation
• @bernierllc/design-token-parser: Design token parsing and processing
• @bernierllc/markdown-renderer: Markdown processing and rendering

Examples

Search and Navigation

// Search content across the documentation
const searchResults = await docsSuite.searchContent('button component', {
  type: 'component',
  filters: { category: 'ui' }
});

console.log('Search results:', searchResults.results);

// Generate navigation for a site
const navigation = await docsSuite.generateNavigation('my-docs');
console.log('Navigation structure:', navigation.items);

Build and Deploy

// Build a site
const buildResult = await docsSuite.buildSite('my-docs', {
  optimize: true,
  minify: true,
  generateSitemap: true,
  generateSearchIndex: true
});

if (buildResult.success) {
  // Deploy the built site
  const deployResult = await docsSuite.deploySite('my-docs', {
    environment: 'production',
    domain: 'docs.mycompany.com'
  });
  
  console.log('Deployed to:', deployResult.url);
}

Advanced Theme Configuration

const advancedTheme = {
  primary: '#007bff',
  secondary: '#6c757d',
  accent: '#28a745',
  background: '#ffffff',
  text: '#333333',
  fonts: {
    body: 'Inter, system-ui, sans-serif',
    heading: 'Inter, system-ui, sans-serif',
    code: 'Fira Code, Monaco, Consolas, monospace'
  },
  spacing: {
    small: '0.5rem',
    medium: '1rem',
    large: '2rem'
  },
  borderRadius: '8px',
  shadows: {
    small: '0 1px 3px rgba(0,0,0,0.12)',
    medium: '0 4px 6px rgba(0,0,0,0.07)',
    large: '0 10px 15px rgba(0,0,0,0.1)'
  }
};

const themedSuite = createDocsSuite({
  ui: {
    theme: advancedTheme,
    layout: {
      sidebar: true,
      toc: true,
      breadcrumbs: true,
      footer: true
    }
  }
});

Performance Considerations

• Static Generation: All documentation pages are pre-generated
• Code Splitting: Large documentation sites are automatically split
• Image Optimization: Automatic optimization of images and assets
• Caching: Built-in caching for search results and navigation
• Lazy Loading: Components and content are loaded on demand

Browser Support

• Modern browsers (Chrome 88+, Firefox 78+, Safari 14+, Edge 88+)
• React 18+ required for UI components
• Next.js 14+ required for static site generation

Development

# Install dependencies
npm install

# Run tests
npm test

# Run tests with coverage
npm run test:coverage

# Build the package
npm run build

# Lint code
npm run lint

License

Copyright (c) 2025 Bernier LLC. All rights reserved.

See Also

• @bernierllc/docs-generator - Core documentation generation
• @bernierllc/design-token-parser - Design token parsing
• @bernierllc/markdown-renderer - Markdown processing