@qn-pandora/pandora-app-component

@qn-pandora/pandora-app-component

Pandora 业务组件封装

Install

yarn install

Components

npm run storybook

启动storybook完成之后，访问相应的端口查看组件

Write Stories

在相应的component文件夹下建立stories文件夹，并在文件夹下建立如下文件

xxx.code.tsx

一个 demo 组件文件，内部包含 组件注释 & DEMO源代码

/**
 * title: 经典卡片
 * description: 包含标题
 */

import * as React from 'react'
import { Card } from '@qn-pandora/pandora-component'

export default function() {
  return <Card title="card title">content</Card>
}

注释部分 为上图的顶部注释，支持 title & description 用于显示 DEMO源代码 为上图的其他部分，要求必须 export default 相应的 Demo React 组件

doc.stories.mdx

文档入口，起到 关联 & 注册 DEMO 的作用

import { Meta, Story } from '@storybook/addon-docs/blocks';
import Card from '../index';
import Basic from './basic.code'
import WithTabs from './withTabs.code'

<Meta title="Card" component={Card} />

# Card

## Demo

<Story name="basic">
  <Basic />
</Story>

<Story name="withTabs">
  <WithTabs />
</Story>

## API

| 字段 | 说明           | 类型   | 默认值 | 版本 |
|------|----------------|--------|--------|------|
| name | 当前字段的说明 | string | -      | -    |

Meta 标签表示注册当前的 stories，title 为当前的 stories 的标题，内部包含 / 表示子目录 Story 组件表示注册一个 story，传递当前的 story 名字用于在侧边显示