@zohodesk/docs-builder

Docs-Builder 🛠️

Docs Builder Library is a versatile tool designed to streamline the process of creating documentation pages for your projects. With support for displaying PropTypes, integrated code editors, code views, and more, this library aims to simplify the documentation-building process and enhance the overall developer experience.

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

Hurray Happy Coding! 😎

Version History 📝

1.0.0 (21.03.24)

• Docs-Builder Implemented

1.0.1 (21.03.24)

• Version Updated in ui

1.0.2 (19.06.24)

• DocsBuilder implemented with new Code editor

1.0.3 (24.04.25)

• Docs Builder UI updated
• Live Code Editor import added
• Routing Handled for all subtabs