Skip to content

Commit

Permalink
Feat props generator (#34)
Browse files Browse the repository at this point in the history
* fix: codeblock expand

* chore: init script

* feat: generate props

* feat: generate props with table

* chore: use  asset/source instead raw-loader

* feat: props table gen

* feat: props table style

---------

Co-authored-by: 1360151219 <[email protected]>
  • Loading branch information
1360151219 and 1360151219 authored Aug 3, 2023
1 parent 894e0a4 commit c4b79f8
Show file tree
Hide file tree
Showing 23 changed files with 418 additions and 105 deletions.
10 changes: 8 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
"private": true,
"scripts": {
"preinstall": "npx only-allow pnpm",
"start": "cd packages/demo && npm run start"
"start": "npm run build:props && cd packages/demo && npm run start",
"build:props": "node ./scripts/build_props.mjs"
},
"workspaces": [
"packages/*"
Expand All @@ -12,7 +13,12 @@
"@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",
Expand Down
24 changes: 24 additions & 0 deletions packages/demo/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
2 changes: 1 addition & 1 deletion packages/demo/loaders/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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))) {
Expand Down
4 changes: 4 additions & 0 deletions packages/demo/src/components/Button/index.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import Props from './props.mdx';

# Button

<div className="title">普通样式</div>
Expand Down Expand Up @@ -46,3 +48,5 @@
<CodeBlock line={'5-1009'}>
<Loading />
</CodeBlock>

<Props />
4 changes: 4 additions & 0 deletions packages/demo/src/components/Button/props.mdx
Original file line number Diff line number Diff line change
@@ -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}/>
Expand Down
3 changes: 3 additions & 0 deletions packages/demo/src/components/Card/index.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import Actions from './svg/index.tsx';
import More from './svg/tab.tsx';
import Props from './props.mdx';

# Card

Expand Down Expand Up @@ -105,3 +106,5 @@ import More from './svg/tab.tsx';
<CodeBlock line={'5-7'}>
<Loading />
</CodeBlock>

<Props />
4 changes: 4 additions & 0 deletions packages/demo/src/components/Card/props.mdx
Original file line number Diff line number Diff line change
@@ -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}/>
Expand Down
4 changes: 4 additions & 0 deletions packages/demo/src/components/Draggable/index.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import Props from './props.mdx';

# Draggable 拖拽

一个轻量级,高性能的用于 React 的可扩展拖放组件。
Expand Down Expand Up @@ -71,3 +73,5 @@
<CodeBlock style={{ flexWrap: 'nowrap' }}>
<MultipleContainer />
</CodeBlock>

<Props />
4 changes: 4 additions & 0 deletions packages/demo/src/components/Draggable/props.mdx
Original file line number Diff line number Diff line change
@@ -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}/>
Expand Down
18 changes: 11 additions & 7 deletions packages/demo/src/components/Icon/index.mdx
Original file line number Diff line number Diff line change
@@ -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>
<CodeBlock line={'5-7'}>
<CDN/>
</CodeBlock>
<CDN />
</CodeBlock>

<Props />
4 changes: 4 additions & 0 deletions packages/demo/src/components/Icon/props.mdx
Original file line number Diff line number Diff line change
@@ -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}/>
Expand Down
12 changes: 8 additions & 4 deletions packages/demo/src/components/Input/index.mdx
Original file line number Diff line number Diff line change
@@ -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 />
4 changes: 4 additions & 0 deletions packages/demo/src/components/Input/props.mdx
Original file line number Diff line number Diff line change
@@ -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}/>
Expand Down
8 changes: 6 additions & 2 deletions packages/demo/src/components/Popover/index.mdx
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import Props from './props.mdx';

# Popover

<div className="title">基本用法</div>
<CodeBlock line={'5-7'}>
<Base/>
<Base />
</CodeBlock>
<div className="title">设置触发popover的条件</div>
<CodeBlock line={'5-7'}>
<Trigger/>
<Trigger />
</CodeBlock>

<Props />
4 changes: 4 additions & 0 deletions packages/demo/src/components/Popover/props.mdx
Original file line number Diff line number Diff line change
@@ -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.ReactElement","version":"1.0.0","description":"触发popover的内容","default":"undefined"},{"key":"content","value":": string | React.ReactNode","optional":true,"version":"1.0.0","description":"popover的内容","default":"undefined"},{"key":"placement","value":": PlaceType","optional":true,"version":"1.0.0","description":"设置popover的位置","default":"undefined"},{"key":"popoverClass","value":": string","optional":true,"version":"1.0.0","description":"为popover添加类名","default":"undefined"},{"key":"disabled","value":": boolean","optional":true,"version":"1.0.0","description":"popover是否可用","default":"false"},{"key":"arrowShow","value":": boolean","optional":true,"version":"1.0.0","description":"是否显示箭头","default":"true"},{"key":"triggerType","value":": 'hover' | 'click'","optional":true,"version":"1.0.0","description":"触发popover的方式","default":"'hover'"}]
## API 列表
<Table name='popover' params={params}/>
Expand Down
16 changes: 10 additions & 6 deletions packages/demo/src/components/Skeleton/index.mdx
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
import Props from './props.mdx';

# skeleton

<div className="title">普通样式</div>
<CodeBlock line={'5-7'}>
<Skeleton style={{width:"380px"}}></Skeleton>
<Skeleton style={{ width: '380px' }}></Skeleton>
</CodeBlock>
<div className="title">带标题</div>
<CodeBlock line={'5-7'}>
<Skeleton style={{width:"380px"}} title={true}></Skeleton>
<Skeleton style={{ width: '380px' }} title={true}></Skeleton>
</CodeBlock>
<div className="title">带头像</div>
<CodeBlock line={'5-7'}>
<Skeleton style={{width:"380px"}} avatar={true}></Skeleton>
<Skeleton style={{ width: '380px' }} avatar={true}></Skeleton>
</CodeBlock>
<div className="title">块状</div>
<CodeBlock line={'5-7'}>
<Skeleton style={{width:"380px",height:"90px"}} brick={true}></Skeleton>
<Skeleton style={{ width: '380px', height: '90px' }} brick={true}></Skeleton>
</CodeBlock>
<div className="title">静态</div>
<CodeBlock line={'5-7'}>
<Skeleton style={{width:"380px",'--skeleton-active':'false'}}></Skeleton>
</CodeBlock>
<Skeleton style={{ width: '380px', '--skeleton-active': 'false' }}></Skeleton>
</CodeBlock>

<Props />
4 changes: 4 additions & 0 deletions packages/demo/src/components/Skeleton/props.mdx
Original file line number Diff line number Diff line change
@@ -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":"active","value":": boolean","optional":true,"version":"1.0.0","description":"是否展示动画效果","default":"false"},{"key":"avatar","value":": boolean","optional":true,"version":"1.0.0","description":"头像占位","default":"false"},{"key":"loading","value":": boolean","optional":true,"version":"1.0.0","description":"是否加载","default":"undefined"},{"key":"row","value":": number","optional":true,"version":"1.0.0","description":"自定义条数","default":"4"},{"key":"title","value":": boolean","optional":true,"version":"1.0.0","description":"标题","default":"false"},{"key":"brick","value":": boolean","optional":true,"version":"1.0.0","description":"块状","default":"false"}]
## API 列表
<Table name='skeleton' params={params}/>
Expand Down
38 changes: 38 additions & 0 deletions packages/demo/src/components/table.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from 'react';
interface ITableProps {
params: any[];
name: string;
}
const Table: React.FC<ITableProps> = (props) => {
const { params, name } = props;
return (
<table className="pivot-props-table">
<thead>
<tr>
<th>参数名称</th>
<th>参数类型</th>
<th>是否必选</th>
<th>默认值</th>
<th>备注</th>
<th>版本支持</th>
</tr>
</thead>
<tbody>
{params.map((param) => {
return (
<tr>
<td>{param.key}</td>
<td>{param.value}</td>
<td>{param.optional ? '❌' : '✅'}</td>
<td>{param.default}</td>
<td>{param.description}</td>
<td>{param.version}</td>
</tr>
);
})}
</tbody>
</table>
);
};

export default Table;
10 changes: 1 addition & 9 deletions packages/demo/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,20 +21,12 @@ module.exports = {
},
module: {
rules: [
// {
// test: /.(ts|tsx)$/, // 匹配.ts, tsx文件
// use: 'babel-loader',
// },
{
test: /.(ts|tsx)$/, // 匹配.ts, tsx文件
oneOf: [
{
resourceQuery: /code/, // code后缀,导入为字符串处理
use: [
{
loader: 'raw-loader',
},
],
type: 'asset/source',
},
{
use: 'babel-loader', // 导入为正常ts,tsx文件
Expand Down
27 changes: 27 additions & 0 deletions packages/design-props/components/draggable.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,30 @@ export interface DraggableItemProps extends PivotDesignProps {
*/
left?: number;
}
// test
export interface DraggableProps extends PivotDesignProps {
/**
* @version 1.0.0
* @description 列表子项默认插槽
* @default undefined
*/
children?: React.ReactNode;
/**
* @version 1.0.0
* @description 列表子项索引值
* @default undefined
*/
index?: number;
/**
* @version 1.0.0
* @description 拖动元素相对定位的top偏移值
* @default undefined
*/
top?: number;
/**
* @version 1.0.0
* @description 拖动元素相对定位的left偏移值
* @default undefined
*/
left?: number;
}
3 changes: 3 additions & 0 deletions packages/design/theme/global.scss
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ body .semi-always-light {
--semi-color-info-hover: rgba(var(--semi-blue-6), 1);
--semi-color-link-hover: rgba(var(--semi-blue-6), 1);
--semi-color-primary: rgba(var(--semi-brand-5), 1);
--semi-color-primary-dark: rgba(var(--semi-brand-0), 1);

--semi-color-success: rgba(var(--semi-green-5), 1);
--semi-color-warning: rgba(var(--semi-orange-5), 1);
--semi-color-info-active: rgba(var(--semi-blue-7), 1);
Expand Down Expand Up @@ -123,6 +125,7 @@ body .semi-always-dark {
--semi-color-link-hover: rgba(var(--semi-blue-6), 1);
--semi-color-primary: rgba(var(--semi-brand-5), 1);
--semi-color-success: rgba(var(--semi-green-5), 1);
--semi-color-primary-dark: rgba(var(--semi-brand-0), 1);
--semi-color-warning: rgba(var(--semi-orange-5), 1);
--semi-color-info-active: rgba(var(--semi-blue-7), 1);
--semi-color-link-active: rgba(var(--semi-blue-7), 1);
Expand Down
Loading

0 comments on commit c4b79f8

Please sign in to comment.