UI Component Of StroyBook

项目预览

  npm install

  npm run start

项目介绍

框架语言基于react，mdx负责自定义组件文档，通过rollup进行打包。

1. Config

   • 初始化项目 npx storybook init
   • 配置.storybook
     • main.js，此文件控制 Storybook 服务行为，因此必须在更改后重新启动进程。
       • stories 组件入口
       • staticDirs 静态资源
       • addons 插件挂载
       • babel 自定义babel
       • framework 框架语言
       • webpackFinal 自定义编译打包
       • features 最新特性，包括一些beta
     • addons，插件相关导入
     • preview，组件/文档预览效果自定义

2. Docs

   • DocsPage
     1. 在安装docs插件后，stories中配置的组件文件会生成一个基础文档，文档内容主要有组件实例、源代码、组件的props、组件所有args，可被重写，具体案例参考Button。

        // page 可直接使用 addon-docs 插件中的 block
        // 也可引入 mdx|jsx|tsx|js 替代默认文档，设置为null时将不显示组件文档
        parameters: {
          docs: {
            page: CustomDocumentationComponent
          }
        }

   • MDX
     1. 基于markdown，集成了markdown和jsx的写法。
     2. 代替DocsPage更加灵活的自定义组件文档，可单独作为的文档，也可将其替代默认的组件文档。
     3. 借助addon-docs/blocks可在文档中插入组件实例。

3. Addons

   • addon-docs

     block-name	description
     Anchor
     ArgsTable	组件参数详解表，可动态的改变组件参数值
     Canvas
     Description
     DocsContext
     DocsPage
     DocsContainer
     DocsStory
     Heading
     Meta
     Preview
     Primary
     Props
     Source
     SourceContainer
     Stories
     Story
     Subheading
     Subtitle
     Title
     Wrapper
     types
     mdx

   • addon-knobs

     knobs-name	description
     text
     boolean
     number
     color
     object
     select
     radios
     array
     date
     button
     files
     optionsKnob
     withKnobs

   • addon-actions

     action-name	description
     action
     actions
     configureActions
     decorateAction
     withActions

4. Test