@bernierllc/docs-suite
Advanced tools
Complete documentation system combining docs-generator, design-system-manager with Next.js, React components, and interactive features
Complete documentation system combining docs-generator, design-system-manager with Next.js, React components, and interactive features.
npm install @bernierllc/docs-suite
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);
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)}
/>
);
};
The main orchestration class that combines documentation services.
constructor(config?: DocsSuiteConfig)
// 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>
Interactive documentation viewer with navigation, search, and theming.
interface DocsViewerProps {
siteId: string;
pageId?: string;
theme?: ThemeConfig;
onPageChange?: (pageId: string) => void;
onSearch?: (query: string) => void;
}
Interactive component testing and documentation interface.
interface ComponentPlaygroundProps {
component: ComponentConfig;
theme?: ThemeConfig;
onCodeChange?: (code: string) => void;
onPropsChange?: (props: Record<string, any>) => void;
}
Complete site building interface with content management.
interface SiteBuilderProps {
siteId: string;
onSiteUpdate?: (site: SiteConfig) => void;
onPageAdd?: (page: PageConfig) => void;
onComponentAdd?: (component: ComponentConfig) => void;
}
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;
};
}
This suite integrates with several @bernierllc packages:
// 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 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);
}
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
}
}
});
# 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
Copyright (c) 2025 Bernier LLC. All rights reserved.
FAQs
Complete documentation system combining docs-generator, design-system-manager with Next.js, React components, and interactive features
The npm package @bernierllc/docs-suite receives a total of 0 weekly downloads. As such, @bernierllc/docs-suite popularity was classified as not popular.
We found that @bernierllc/docs-suite demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.