@zohodesk/docs-builder

Toolkit for building interactive component documentation sites. This package is part of the DOT System (Design Optimization Thinking).

Features

• Integrated Code Editor: Seamlessly integrate code editing capabilities directly into your documentation, allowing users to interact with code examples.
• MD Editor: Easily showcase the code which was written in MD format
• PropTypes Display: Easily showcase PropTypes for your components, providing clear insights into expected props and their types.
• Code View: Present code snippets in a clean and organized format, making it easier for users to understand and implement.
• Customizable Templates: Customize the look and feel of your documentation pages to match your project's branding and style.
• Easy Integration: Simple integration process into your existing projects, minimizing setup time and effort.

Notes

1. Make sure your using any one of the cli react-cli or client_build_tool.
2. So based on the cli which you are using configure the required files.

Installation

npm install @zohodesk/react-cli -g

npm install @zohodesk/client_build_tool -g

npm install @zohodesk/docs-builder

Setup

• Creating a app: Create a app using react-cli or client_build_tool.
• Files Needed: Make sure your app consist of index.js and index.html inside the src folder.
• Docs-Config-File: Create a new file docs.config.js to customise the dashboard page of your docs.
• Cli-Config-File: Create a react-cli.config.js or cbt.config.js and fill the bellow template.

Required Files

1. docs.config.js

import  package_one  from  './images/package_one.png'
import  package_two  from  './images/package_two.svg'
import  package_three  from  './images/package_three.svg'

export  const  docsConfig  = {
	header:  'Your Header',
	description :  'Your description',
	packages : [
		'package_one',
		'package_two',
		'package_three'
	],
	cards : {	
		'package_one': {
			backgroundColor :  '#e7f1fd',
			svgPath :  package_one,
			initialComponentName :  'package_one_componentName'
		},
		'package_two': {
			backgroundColor :  '#f8d7d7',
			svgPath :  package_two,
			initialComponentName :  'package_two_componentName'
		},
		'package_three': {
			backgroundColor :  '#d4eed9',
			svgPath :  package_three,
			initialComponentName :  'package_three_componentName'
		}
	}
}

2. cbt.config.js or react-cli.config.js

const  docsConfig  =  require("@zohodesk/docs-builder/cbt.config")
const { config } =  docsConfig;
exports.config  =  config;

Usage

1. Import the library at the top level of your file, before any React imports:

import  '@zohodesk/docs-builder/loaders/propHook.js';

2. Import the library into your project:

import { Docs } from '@zohodesk/docs-builder';
import * as Components from '../docs/allDocs.js'
import { docsConfig } from  '../docs/docs.config.js';

3. Create a Theme Decorator Wrapper ( only if you have the _provider component in your docs)

const  Decorators  =  Components._provider;

4. Render the Docs Component

ReactDOM.render(
	<Decorators>
		<Docs  docsConfig={docsConfig}  Components={Components}/>
	</Decorators>,
	document.getElementById('root')
);

5. Starting the Docs

npm run start

Style Board snapshots

Configure in docs.config.js:

styleBoard: {
  enable: false,
  baseUrl: 'https://localhost:<port>',
  snapshotsDir: './src/style-board-snapshots',
  excludePatterns: ['Modal', 'Popup', 'PortalLayer'],
  excludeLibraries: []
}

From the consumer docs package (with docs server running):

npm install playwright --save-dev --legacy-peer-deps
npx playwright install chromium
npx dot-docs style-board-snapshot

Then set styleBoard.enable: true and restart docs.

Changelog

See CHANGELOG.md for details on release history and updates.