Feature switch

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}/dist"
+    }
+  ]
+}

package.json

@@ -3,7 +3,9 @@
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "start": "cd packages/demo && npm run start"
+    "start": "npm run build:props && npm run build:catalog && cd packages/demo && npm run start",
+    "build:props": "node ./scripts/build_props.mjs",
+    "build:catalog": "node ./scripts/build_catalog.mjs"
   },
   "workspaces": [
     "packages/*"
@@ -12,10 +14,15 @@
     "@commitlint/cli": "^17.3.0",
     "@commitlint/config-conventional": "^17.3.0",
     "eslint-config-psfe": "1.0.5",
-    "husky": "^8.0.2"
+    "husky": "^8.0.2",
+    "@babel/core": "^7.19.1",
+    "@babel/helper-plugin-utils": "^7.20.2",
+    "@babel/parser": "^7.21.2",
+    "babel-plugin-jsx": "^1.2.0",
+    "es-dirname": "^0.1.0"
   },
   "dependencies": {
     "core-js": "^3.25.1",
     "gsap": "^3.12.2"
   }
-}
+}

packages/demo/index.scss

@@ -22,5 +22,29 @@ html,
   height: 0;
 }
 
+.pivot-props-table {
+  border-collapse: collapse;
+  width: 100%;
+  font-family: Arial, sans-serif;
+  font-size: 18px;
+  th,
+  td {
+    padding: 18px 0;
+    text-align: center;
+  }
+  th {
+    background-color: var(--semi-color-bg-0);
+    font-weight: bold;
+    width: auto;
+    border: 2px solid var(--semi-color-border);
+  }
 
+  td {
+    width: auto;
+    border: 2px solid var(--semi-color-border);
+  }
 
+  tr {
+    background-color: var(--semi-color-bg-0);
+  }
+}

packages/demo/loaders/index.js

@@ -38,7 +38,7 @@ module.exports = function loader(source) {
   const CodeBlockReg = /<CodeBlock(.*)>([\n\r\s\S]*?)<\/CodeBlock>/g;
   const H1Reg = /# (\w+)/;
   // eslint-disable-next-line prefer-destructuring
-  const component = H1Reg.exec(sourceCode)[1];
+  const component = H1Reg.exec(sourceCode) && H1Reg.exec(sourceCode)[1];
   let m;
   let importComponentsList = '';
   while ((m = CodeBlockReg.exec(newSource))) {

packages/demo/src/components/Button/.catalog.ts

@@ -0,0 +1 @@
+export const list = [{"h2":"普通样式","h3":[]},{"h2":"可禁用样式","h3":[]},{"h2":"按钮尺寸大小","h3":[]},{"h2":"自定义","h3":[]},{"h2":"点击事件","h3":[]},{"h2":"loading加载中和节流、防抖","h3":[]}]

packages/demo/src/components/Button/index.mdx

@@ -1,14 +1,16 @@
+import Props from './props.mdx';
+
 # Button
 
-<div className="title">普通样式</div>
+## 普通样式
 
 <CodeBlock line={'5-7'}>
   <Button type="primary">按钮</Button>
   <Button>按钮</Button>
   <Button type="text">按钮</Button>
 </CodeBlock>
 
-<div className="title">按钮禁用</div>
+## 可禁用样式
 
 <CodeBlock line={'5-7'}>
   <Button type="primary" disabled>
@@ -20,29 +22,36 @@
   </Button>
 </CodeBlock>
 
-<div className="title">按钮尺寸</div>
+## 按钮尺寸大小
+
 <CodeBlock line={'5-7'}>
   <Button size="small">small</Button>
   <Button size="middle">middle</Button>
   <Button size="large">large</Button>
 </CodeBlock>
 
-<div className="title">自定义颜色</div>
+## 自定义 css 颜色（token）
+
+<CodeBlock line={'5-7'}>
+  <Button
+    style={{
+      '--button-background-color': 'rgb(233, 233, 15)',
+    }}
+  >
+    button
+  </Button>
+</CodeBlock>
 
-<Button
-  style={{
-    '--button-background-color': 'rgb(233, 233, 15)'
-  }}
->
-  button
-</Button>
+## 点击事件
 
-<div className="title">自定义点击事件</div>
 <CodeBlock line={'5-7'}>
   <OnClick />
 </CodeBlock>
 
-<div className="title">加载中和节流防抖</div>
+## loading加载中和节流、防抖
+
 <CodeBlock line={'5-1009'}>
   <Loading />
 </CodeBlock>
+
+<Props />

packages/demo/src/components/Button/props.mdx

@@ -0,0 +1,4 @@
+import Table from '../table.tsx'
+export const params = [{"key":"className","value":": string","optional":true,"version":"1.0.0","description":"自定义类名"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式"},{"key":"children","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"按钮默认插槽","default":"undefined"},{"key":"style","value":": React.CSSProperties & ButtonCssTokens","optional":true,"version":"1.0.0","description":"自定义样式","default":"undefined"},{"key":"onClick","value":": React.MouseEventHandler<HTMLButtonElement>","optional":true,"version":"1.0.0","description":"点击事件","default":"undefined"},{"key":"type","value":": 'primary' | 'default' | 'text' | 'link'","optional":true,"version":"1.0.0","description":"按钮类型","default":"'default'"},{"key":"size","value":": 'small' | 'middle' | 'large'","optional":true,"version":"1.0.0","description":"按钮是否禁用","default":"'middle'"},{"key":"disabled","value":": boolean","optional":true,"version":"1.0.0","description":"按钮尺寸","default":"false"},{"key":"loading","value":": boolean","optional":true,"version":"1.0.0","description":"按钮是否正在加载状态","default":"false"},{"key":"debounce","value":": number | {\n  delay: number;\n  immediate: boolean;\n}","optional":true,"version":"1.0.0","description":"按钮是否防抖，可选择是否立即执行","default":"0"},{"key":"delay","value":": number"},{"key":"immediate","value":": boolean"},{"key":"throttle","value":": number | {\n  delay: number;\n  immediate: boolean;\n}","optional":true,"version":"1.0.0","description":"按钮是否节流","default":"false"},{"key":"delay","value":": number"},{"key":"immediate","value":": boolean"}]
+## API 列表
+<Table name='button' params={params}/>

packages/demo/src/components/Card/.catalog.ts

@@ -0,0 +1 @@
+export const list = [{"h2":"默认样式","h3":[]},{"h2":"带头像","h3":[]},{"h2":"栅格","h3":[]},{"h2":"收起与展开长度","h3":[]},{"h2":"自定义背景色和宽度","h3":[]},{"h2":"加载中","h3":[]}]

packages/demo/src/components/Card/index.mdx

@@ -1,17 +1,19 @@
 import Actions from './svg/index.tsx';
 import More from './svg/tab.tsx';
+import Props from './props.mdx';
 
 # Card
 
-<div className="title">默认样式</div>
+## 默认样式
+
 <CodeBlock line={'5-7'}>
   <Card title={<div>测试</div>} time="19:20 2020-09-15" extra={<More />} actions={<Actions></Actions>}>
     <div>
       <p>我好想买Airpods但是没有钱，梁老师可不可以资助我 一点钱钱呢啊？不多不多的 </p>
     </div>
   </Card>
 </CodeBlock>
-<div className="title">带头像</div>
+## 带头像
 <CodeBlock line={'5-7'}>
   <Card
     title={<div>多余文本</div>}
@@ -30,7 +32,8 @@ import More from './svg/tab.tsx';
   </Card>
 </CodeBlock>
 
-<div className="title">栅格</div>
+## 栅格
+
 <CodeBlock line={'5-7'}>
   <Card
     avatar={<img src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" width="35" height="35" />}
@@ -48,7 +51,7 @@ import More from './svg/tab.tsx';
     <div>足球</div>
   </Card>
 </CodeBlock>
-<div className="title">收起与展开长度</div>
+## 收起与展开长度
 <CodeBlock line={'5-7'}>
   <Card
     title={<div>多余文本</div>}
@@ -83,7 +86,7 @@ import More from './svg/tab.tsx';
     梁老师可不可以资助我一点钱钱呢啊？不多不多的，球球了！ 我好想买Airpods但是没有钱，梁老师可
   </Card>
 </CodeBlock>
-<div className="title">自定义背景色和宽度</div>
+## 自定义背景色和宽度
 <CodeBlock line={'5-7'}>
   <Card
     title={<div>多余文本</div>}
@@ -101,7 +104,10 @@ import More from './svg/tab.tsx';
   </Card>
 </CodeBlock>
 
-<div className="title">加载中</div>
+## 加载中
+
 <CodeBlock line={'5-7'}>
   <Loading />
 </CodeBlock>
+
+<Props />

packages/demo/src/components/Card/props.mdx

@@ -0,0 +1,4 @@
+import Table from '../table.tsx'
+export const params = [{"key":"className","value":": string","optional":true,"version":"1.0.0","description":"自定义类名"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式"},{"key":"style","value":": React.CSSProperties & CardCssTokens","optional":true,"version":"1.0.0","description":"自定义样式","default":"undefined"},{"key":"size","value":": 'small' | 'normal'","optional":true,"version":"1.0.0","description":"自定义大小","default":"undefined"},{"key":"loading","value":": boolean","optional":true,"version":"1.0.0","description":"卡片内容是否加载","default":"normal"},{"key":"title","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"卡片标题","default":"undefined"},{"key":"actions","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"卡片底部的操作组","default":"undefined"},{"key":"bordered","value":": boolean","optional":true,"version":"1.0.0","description":"是否有边框","default":"true"},{"key":"extra","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"卡片右上角标签","default":"undefined"},{"key":"time","value":": string","optional":true,"version":"1.0.0","description":"时间标签","default":"undefined"},{"key":"children","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"内容","default":"undefined"},{"key":"cover","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"封面","default":"undefined"},{"key":"boradius","value":": boolean","optional":true,"version":"1.0.0","description":"边框角","default":"true"},{"key":"Grid","value":": boolean","optional":true,"version":"1.0.0","description":"栅格","default":"false"},{"key":"avatar","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"头像","default":"true"}]
+## API 列表
+<Table name='card' params={params}/>

packages/demo/src/components/Draggable/.catalog.ts

@@ -0,0 +1 @@
+export const list = [{"h2":"基本示例","h3":[]},{"h2":"拖拽过程中的元素","h3":[]},{"h2":"设置可拖拽区域","h3":[]},{"h2":"拖放案例","h3":[]},{"h2":"拖拽排序","h3":["垂直方向拖拽","水平方向拖拽","网格拖拽","多容器拖拽（垂直）"]}]

packages/demo/src/components/Draggable/index.mdx

@@ -1,3 +1,5 @@
+import Props from './props.mdx';
+
 # Draggable 拖拽
 
 一个轻量级，高性能的用于 React 的可扩展拖放组件。
@@ -42,7 +44,7 @@
   <Droppable />
 </CodeBlock>
 
-## 🌟 拖拽排序
+## 拖拽排序
 
 拖拽排序（Drag-and-drop sorting）是一种广泛实用的交互设计手法。支持用户进行垂直、水平以及网格布局的拖拽排序。
 
@@ -71,3 +73,5 @@
 <CodeBlock style={{ flexWrap: 'nowrap' }}>
   <MultipleContainer />
 </CodeBlock>
+
+<Props />

packages/demo/src/components/Draggable/props.mdx

@@ -0,0 +1,4 @@
+import Table from '../table.tsx'
+export const params = [{"key":"className","value":": string","optional":true,"version":"1.0.0","description":"自定义类名"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式"},{"key":"children","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"列表子项默认插槽","default":"undefined"},{"key":"index","value":": number","optional":true,"version":"1.0.0","description":"列表子项索引值","default":"undefined"},{"key":"top","value":": number","optional":true,"version":"1.0.0","description":"拖动元素相对定位的top偏移值","default":"undefined"},{"key":"left","value":": number","optional":true,"version":"1.0.0","description":"拖动元素相对定位的left偏移值","default":"undefined"}]
+## API 列表
+<Table name='draggable' params={params}/>

packages/demo/src/components/Icon/.catalog.ts

@@ -0,0 +1 @@
+export const list = [{"h2":"基本用法","h3":[]},{"h2":"主题样式","h3":[]},{"h2":"定义颜色和透明度","h3":[]},{"h2":"尺寸","h3":[]},{"h2":"自定义样式与旋转","h3":[]},{"h2":"CDN引入","h3":[]}]

packages/demo/src/components/Icon/index.mdx

@@ -1,31 +1,35 @@
+import Props from './props.mdx';
+
 # Icon
 
-<div className="title">基本用法</div>
+## 基本用法
 <CodeBlock line={'5-7'}>
-  <IconList/>
+  <IconList />
 </CodeBlock>
 
-<div className="title">主题样式</div>
+## 主题样式
 <CodeBlock line={'5-7'}>
-  <Theme/>
+  <Theme />
 </CodeBlock>
 
-<div className="title">定义颜色和透明度</div>
+## 定义颜色和透明度
 <CodeBlock line={'5-7'}>
-  <Color/>
+  <Color />
 </CodeBlock>
 
-<div className="title">尺寸</div>
+## 尺寸
 <CodeBlock line={'5-7'}>
-  <Size/>
+  <Size />
 </CodeBlock>
 
-<div className="title">自定义样式与旋转</div>
+## 自定义样式与旋转
 <CodeBlock line={'5-7'}>
-  <Style/>
+  <Style />
 </CodeBlock>
 
-<div className="title">CDN引入</div>
+## CDN引入
 <CodeBlock line={'5-7'}>
-  <CDN/>
-</CodeBlock>
+  <CDN />
+</CodeBlock>
+
+<Props />

packages/demo/src/components/Icon/props.mdx

@@ -0,0 +1,4 @@
+import Table from '../table.tsx'
+export const params = [{"key":"className","value":": string","optional":true,"version":"1.0.0","description":"自定义类名"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式","default":"undefined"},{"key":"theme","value":": 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger'","optional":true,"version":"1.0.0","description":"图标类型","default":"'primary'"},{"key":"size","value":": string","optional":true,"version":"1.0.0","description":"图标尺寸","default":"'16'"},{"key":"color","value":": string","optional":true,"version":"1.0.0","description":"图标颜色","default":"'#212529'"},{"key":"icon","value":": string","optional":true,"version":"1.0.0","description":"图标来源","default":"undefined"},{"key":"ossIcon","value":": string","optional":true,"version":"1.0.0","description":"Pivot","default":"undefined"},{"key":"url","value":": string","optional":true,"version":"1.0.0","description":"自定义导入的icon链接","default":"undefined"},{"key":"rotate","value":": boolean","optional":true,"version":"1.0.0","description":"是否旋转","default":"false"}]
+## API 列表
+<Table name='icon' params={params}/>

packages/demo/src/components/Input/.catalog.ts

@@ -0,0 +1 @@
+export const list = [{"h2":"基本用法","h3":[]},{"h2":"输入框尺寸","h3":[]},{"h2":"固定前缀和后缀","h3":[]},{"h2":"密码框","h3":[]}]

packages/demo/src/components/Input/index.mdx

@@ -1,21 +1,25 @@
+import Props from './props.mdx';
+
 # Input
 
-<div className="title">基本用法</div>
+## 基本用法
 <CodeBlock line={'5-7'}>
-  <Base/>
+  <Base />
 </CodeBlock>
 
-<div className="title">输入框尺寸</div>
+## 输入框尺寸
 <CodeBlock line={'5-7'}>
-  <Size/>
+  <Size />
 </CodeBlock>
 
-<div className="title">固定前缀和后缀</div>
+## 固定前缀和后缀
 <CodeBlock line={'5-7'}>
-  <Prepend/>
+  <Prepend />
 </CodeBlock>
 
-<div className="title">密码框</div>
+## 密码框
 <CodeBlock line={'5-7'}>
-  <Password/>
+  <Password />
 </CodeBlock>
+
+<Props />

packages/demo/src/components/Input/props.mdx

@@ -0,0 +1,4 @@
+import Table from '../table.tsx'
+export const params = [{"key":"className","value":": string","optional":true,"version":"1.0.0","description":"自定义类名"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式"},{"key":"disabled","value":": boolean","optional":true,"version":"1.0.0","description":"是否禁用","default":"false"},{"key":"size","value":": InputSize","optional":true,"version":"1.0.0","description":"图标尺寸","default":"'16'"},{"key":"onChange","value":": (e: ChangeEvent<HTMLInputElement>) => void","optional":true,"version":"1.0.0","description":"input内容修改时的回调","default":"undefined"},{"key":"icon","value":": string | React.ReactNode","optional":true,"version":"1.0.0","description":"右侧悬浮图标","default":"undefined"},{"key":"prepend","value":": string","optional":true,"version":"1.0.0","description":"固定前缀","default":"undefined"},{"key":"append","value":": string","optional":true,"version":"1.0.0","description":"固定后缀","default":"undefined"},{"key":"onClick","value":": any","optional":true,"version":"1.0.0","description":"点击输入框的回调","default":"undefined"},{"key":"iconOnClick","value":": any","optional":true,"version":"1.0.0","description":"点击图标的回调","default":"undefined"},{"key":"value","value":": string","optional":true,"version":"1.0.0","description":"输入框的值，单向绑定","default":"undefined"}]
+## API 列表
+<Table name='input' params={params}/>

packages/demo/src/components/Popover/.catalog.ts

@@ -0,0 +1 @@
+export const list = [{"h2":"基本用法","h3":[]},{"h2":"设置触发popover的条件","h3":[]}]

packages/demo/src/components/Popover/demo/Trigger.tsx

@@ -1,11 +1,13 @@
 import { Popover } from 'pivot-design';
 import React from 'react';
 import './index.scss';
+import { prefix } from '../../constant';
+
 
 const App: React.FC = () => {
   return (
     <>
-      <div className="center">
+      <div className={`${prefix}-center`}>
         <Popover placement="top" triggerType="hover" content={<div>prompt text</div>}>
           <div className="tl">hover</div>
         </Popover>