@zohodesk/docs

DocsTabsViewer

DocsTabsViewer is used to display the docs content in similar ways of ui through out the application.

• Docs configuation

• Mode, theme options from doctool

• Used components passing

• Children supports

• Decorator options

• Used description are markdown supported https://www.markdownguide.org/basic-syntax/

How to use in {component}.docs.js files.

A component having single component type

import DocsTabsViewer from "./DocsTabsViewer";
import docConfig from "./{component}.docConfig.js";
import Component from "./{component}"
export default (props)=>{
    return <DocsTabsViewer docConfig={docConfig} componentType={Component} />
}

A component having multiple component types like Group, Item and List ...

import DocsTabsViewer from "./DocsTabsViewer";
import docConfig from "./{component}.docConfig.js";
import Component,{ListComponent, ItemComponent} from "./{component}"
export default (props)=>{
    return <DocsTabsViewer docConfig={docConfig} components={{Component,ListComponent,ItemComponent}} />
}

{component}.docConfig.js smaple

export default ({mode,theme},components)=>{
    
    return {
        header : {
            title : "Title of the component",
            imgUrl : "Sample design of the component",
            description : "Short text about the component"
        },
        
        tabsList : [ "tabId1", "tabId2","tabId2"],
        
        tabsDetail : {
            
            "tabId1"  : {
                 displayName: "Purpose name of tab below listing components",
                 description: "Short description of tab",
                 componentsList: ["component1", "component2"],
                 componentsDetail : {
                     "component1" : {
                         ...desired props of the component respective to the above tab
                     },
                     "component2" : {
                         ...desired props of the component respective to the above tab
                     }
                 }
            },componentType : components.MyComponent,
            "tabId2"  : {},
            "tabId3"  : {},
        }
    }
}

{component}.docConfig.js how to use multiple componentTypes and overriding the componentType.

export default ({mode,theme},components)=>{
  ....
       tabsDetail : {
            
            "tabId1"  : {
                 componentType : components.MyComponent,
                 displayName: ...,
                 description: ...,
                 componentsList: ...,
                 componentsDetail : ...
            }
            "tabId2"  : {
            }
        }
    ....   
}    

{component}.docConfig.js how to use children as componentTypes.

export default ({mode,theme},components)=>{
  ....
       tabsDetail : {
            
            "tabId1"  : {
                 componentType : components.MyComponent,
                 displayName: ...,
                 description: ...,
                 componentsList: ...,
                 componentsDetail : {
                     
                     "component1" : {
                          ...desired props of the component respective to the above tab,
                         children : [
                            <components.{component}Item><components.{component}Item>,
                            <components.{component}Item><components.{component}Item>,
                            <components.{component}Item><components.{component}Item>
                         ]
                         
                     },
                     "component2" : {
                         
                          children : ()=>{
                                return <components.{component}List>
                                         <components.{component}Item><components.{component}Item>,
                                         <components.{component}Item><components.{component}Item>,
                                         <components.{component}Item><components.{component}Item>
                               </components.{component}List>
                          }
                     },
                     
                 }
            }
            "tabId2"  : {
            }
        }
    ....   
}    

{component}.docConfig.js how to use decorate the a component by using styles and HTML.

import DecoratorComponent from "./docsviewer/DecoratorComponent";
import decoratorStyles from "./docsviewer/Decorator.style.css";
export default ({mode,theme},components)=>{
  ....
       tabsDetail : {
            
            "tabId1"  : {
                 componentType : components.MyComponent,
                 displayName: ...,
                 description: ...,
                 componentsList: ...,

                // eslint-disable-next-line react/display-name
                 $decorator : (list)=>{
                      // apply-to-this tab of components list
                     return  <DecoratorComponent>{list}</DecoratorComponent>
                 },
                 $decoratorListClassName : 'apply-to-this-tab-of-components-list',
                 $decoratorItemClassName : 'apply-all-component-under-this-tab',
                 // eslint-disable-next-line react/display-name
                 $decorateComponentItem : (item)=>{
                     // apply-all-component under this tab
                     return  <DecoratorComponent>{list}</DecoratorComponent>
                 },

                 componentsDetail : {
                     
                     "component1" : {
                          ...desired props of the component respective to the above tab,
                          // eslint-disable-next-line react/display-name
                         $decorator : (component) => {
                              return <DecoratorComponent
                              className={decoratorStyles.displayInlineBlock}>
                              {component}
                              </DecoratorComponent>
                        },
                        $decoratorClassName:'apply-to-this-component'
                         
                     },
                     "component2" : {},
                     
                 }
            }
            "tabId2"  : {
            }
        }
    ....   
}    

Note:- // eslint-disable-next-line react/display-name added for prevent the code check-in fix.