Docusaurus preset component docs 📖

Docusaurus preset for documenting UDS components

Setup

1. Install this preset into a UDS docusaurus docs site

   npm install --save @telus-uds/docusaurus-preset-component-docs

2. Add the preset to the docusaurus.config.js

   module.exports = {
     // ...
   
     presets: ['@telus-uds/docusaurus-preset-component-docs']
   
     // ...
   }

3. Add your theme into the Playground wrapper: Create a file src/theme/Playground/index.js with the following contents:

   /* eslint-disable react/jsx-filename-extension */
   import React from 'react'
   import Playground from '@theme-init/Playground'
   import theme from '@telus-uds/theme-koodo'
   import { BaseProvider } from '@telus-uds/components-base'
   
   const PlaygroundWrapper = (props) => (
     <Playground
       {...props}
       provider={({ children }) => <BaseProvider defaultTheme={theme}>{children}</BaseProvider>}
     />
   )
   
   export default PlaygroundWrapper

4. Re-export the ReactLiveScope to allow access to the base-components. Create a file src/theme/ReactLiveScope/index.js with the following contents:

   import InitReactLiveScope from '@theme-init/ReactLiveScope'
   
   export default InitReactLiveScope

Usage

This preset adds the following to docusaurus, refer to the various readmes for more documentation.

• @telus-uds/docusaurus-theme-component-docs-pages
• @telus-uds/docusaurus-plugin-component-docs
• @telus-uds/docusaurus-plugin-component-docs-pages

Refer to the UDS monorepo README for details.