Yoshino-UI / yoshion-docs

一个用yoshino组件构建的组件库文档

Yoshino-Docs

Based on Yoshino!Auto genearte component docs!

Intro

一个使用yoshino组件组件库构建的文档生成工具

在线示例

Usage

git clone https://github.com/Yoshino-UI/yoshion-docs.git your-rep

cd your-rep

npm i

// 启动开发环境
npm run dev

// 打包
npm run build

Config

docs/pages/routers.tsx

配置路由进行分块打包

export default [
  {
    component: getComponentAsyncLoading(
      () => import(/* webpackChunkName: "yoshino-alert" */ './Alert')
    ),
    path: '/docs/components/alert',
  },
];

在数组里添加组件文档文件，import分块引入对应文件，path对应路由路径。

docs/pages/pageMenu.tsx

export default [
  {
    name: '反馈',
    keyId: 'feedback',
    children: [
      {
        name: 'Alert(提示)',
        keyId: 'alert',
      },
    ]
  }
];

配置左侧菜单列

Example

添加一个新的组件的文档步骤

• 复制pages/components/Alert文件夹到pages/components/下，更名为你的组件名，例如Button
• 修改docs/pages/routers.tsx，添加Button配置

export default [
  {
    component: getComponentAsyncLoading(
      () => import(/* webpackChunkName: "yoshino-alert" */ './Alert')
    ),
    path: '/docs/components/alert',
  },
  {
    component: getComponentAsyncLoading(
      () => import(/* webpackChunkName: "yoshino-buttom" */ './Button')
    ),
    path: '/docs/components/button',
  },
];

• 修改docs/pages/pageMenu.tsx，添加Button配置

export default [
  {
    name: '反馈',
    keyId: 'feedback',
    children: [
      {
        name: 'Alert(提示)',
        keyId: 'alert',
      },
      {
        name: 'Button(按钮)',
        keyId: 'button',
      },
    ]
  }
];

如果不想添加到反馈模块下，可以自己新建一个模块，修改如下

export default [
  {
    name: '反馈',
    keyId: 'feedback',
    children: [
      {
        name: 'Alert(提示)',
        keyId: 'alert',
      },
    ]
  },
  {
    name: '新模块',
    keyId: 'newModule',
    children: [
      {
        name: 'Button(按钮)',
        keyId: 'button',
      },
    ]
  }
];

• 修改docs/pages/components/Button/index.md，为Button组件添加相关描述
• 修改docs/pages/components/Button/api.tsx，为Button组件添加api文档
• 修改docs/pages/components/Button/demo/demo.tsx以及docs/pages/components/Button/demo/demo.md，为Button组件添加组件示例和示例描述
• 如果需要新增示例，复制docs/pages/components/Button/demo/demo.tsx以及docs/pages/components/Button/demo/demo.md并重命名，在docs/pages/components/Button/index.tsx进行引入

import Demo from './demo/demo';
import * as DemoMd from './demo/demo.md';
const DemoCode = require('!raw-loader!./demo/demo');

<CodeBox text={DemoMd} demo={<Demo/>} code={DemoCode}/>