startupjs docs

MDX Documentation generator

TODO:

• currently only the Sandbox is usable, still need to update the docs app fully to use the new Expo project and new 'startupjs-ui' components in it.

Prerequisites

You must be using @startupjs/app for routing.

You can create a new application with the routing system using the routing template: npx startupjs init myapp -t routing

Installation

yarn add @startupjs/docs

Requirements

react: 16.9 - 17
react-native: >= 0.61.4 < 0.64.0
startupjs: >= 0.33.0

Usage

1. Create the docs/ folder in your project root.

2. Create docs/index.js file with the following content:

import docs from '@startupjs-ui/docs'
export default docs({
  typography: {
    type: 'mdx',
    // different titles for mdx documentation in English and Russian
    title: {
      en: 'Typography',
      ru: 'Типографика'
    },
    // different components to display for English and Russian documentation
    component: {
      en: require('../components/typography/Typography.en.mdx').default,
      ru: require('../components/typography/Typography.ru.mdx').default
    }
  },
  cssGuide: {
    type: 'mdx',
    // the same title for both English and Russian mdx documentation
    title: 'Typography',
    // the same component to display for English and Russian documentation
    component: require('../components/typography/Typography.en.mdx').default
  },
  // docs in collapse
  // items have the same api as mdx docs
  components: {
    type: 'collapse',
    title: {
      en: 'Components',
      ru: 'Компоненты'
    },
    items: {
      Button: {
        type: 'mdx',
        title: {
          en: 'Button',
          ru: 'Кнопка'
        }
        component: {
          en: require('../components/Button/Button.en.mdx').default,
          ru: require('../components/Button/Button.ru.mdx').default
        }
      },
      Card: {
        type: 'mdx',
        title: 'Card',
        component: require('../components/Card/Card.en.mdx').default
      }
    }
  }
})

3. Add client-side docs app to your Root/App.js file:

   import docs from '../docs'
   // ...
   <App
     apps={{ main, docs }}
     // ...
   />

License

MIT