@zohodesk/docs-builder/Readme.md

docs-builder is used to build your own docs

# 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 ⏳
```bash
npm install @zohodesk/react-cli -g
```
```bash
npm install @zohodesk/client_build_tool -g
```
```bash
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***

```jsx
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***
```jsx
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:**

```jsx
import  '@zohodesk/docs-builder/loaders/propHook.js';
```
2. **Import the library into your project:**

```jsx
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)*
```jsx
const  Decorators  =  Components._provider;
```
4. **Render the Docs Component**
```jsx
ReactDOM.render(
	<Decorators>
		<Docs  docsConfig={docsConfig}  Components={Components}/>
	</Decorators>,
	document.getElementById('root')
);
```
5. **Starting the Docs**
```bash
npm run start
```
Hurray Happy Coding!  😎

## Version History 📝

**1.0.8** *(07.10.25)*

- reset code removed & added margin 0 to body

**1.0.7** *(18.08.25)*

- reset code removed

**1.0.6** *(24.07.25)*

- Added peer dependencies and moved certain UI packages accordingly

**1.0.5** *(23.07.25)*

- input[type='checkbox'] selector has been replaced with a checkbox-specific class name to prevent unwanted CSS inheritance and overrides.


**1.0.4** *(25.06.25)*

- Docs MarkDown Parse Issue Fixed

**1.0.3** *(24.04.25)*

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


**1.0.2** *(19.06.24)*

- DocsBuilder implemented with new Code editor


**1.0.1** *(21.03.24)*

- Version Updated in ui


**1.0.0** *(21.03.24)*

- Docs-Builder Implemented