npm i art-antd-react
# or
yarn add art-antd-react

# 在入口引入以下文件(这是antd的默认主题样式，如果要引入其他主题样式可以在项目中按照 https://ant-design.gitee.io/docs/react/use-with-create-react-app-cn 覆盖即可)
import "art-antd-react/dist/esm/styles/defaultAntdCss.css"

// 这些组件或者 Props API 也可以从 antd 或者 art-antd-react 中导出
// import {
//   Button,
//   Col,
//   Form,
//   InputNumberProps,
//   InputProps,
//   Row,
//   SelectProps,
// } from "antd";

import {
  Button,
  Col,
  Form,
  FormItemConfig,
  FormItemsBuilder,
  InputNumberProps,
  InputProps,
  RenderType,
  Row,
  SelectProps,
} from 'art-antd-react'; // 内部也将 antd 的直接导出组件和props 导出了

const Demo1 = () => {
  const [form] = Form.useForm();

  const mockOptions = [
    {
      label: 'mock1',
      value: 'mock1',
    },
    {
      label: 'mock2',
      value: 'mock2',
    },
    {
      label: 'mock3',
      value: 'mock3',
    },
  ];

  const formItemsConfig: FormItemConfig[] = [
    {
      renderType: RenderType.Input,
      formItemProps: {
        name: 'name',
        label: '姓名',
      },
      formItemChildProps: {
        placeholder: '请输入名字',
      } as InputProps,
    },
    {
      renderType: RenderType.Select,
      formItemProps: {
        name: 'hobby',
        label: '爱好',
      },
      formItemChildProps: {
        placeholder: '请选择',
        options: mockOptions,
      } as SelectProps,
    },
    {
      renderType: RenderType.InputNumber,
      formItemProps: {
        name: 'number',
        label: '年龄',
      },
      formItemChildProps: {
        placeholder: '请输入数字',
        // 类名 style 等都可以直接写成 key-value 的形式
        style: { width: '100%' },
        // 当需要提示或者静态检查时推荐使用 ts 的 as 断言
      } as InputNumberProps,
    },
  ];

  return (
    <Form
      form={form}
      onFinish={(value: Record<string, unknown>) => {
        console.log('demo1 values: ', value);
      }}
    >
      <Row gutter={18}>
        {/* FormItemsBuilder 自带 Col 布局, 因此有时候传递的 colProps/itemProps 不ok时，或许需要加一个 Row 包裹 FormItemsBuilder */}
        <FormItemsBuilder
          colProps={{ span: 6 }}
          formItemsConfig={formItemsConfig}
        />
        <Col span={6}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Col>
      </Row>
    </Form>
  );
};

export default Demo1;

# clone 仓库
git clone git@github.com:oneQorg/art-antd-react.git

# 在 src 下新建 你要贡献的组件名字(yourComponentName)

# 在 src/index 文件下
export * from "./yourComponentName"

# 在 docs/components or docs/hooks 下写清楚怎样使用等说明

# 如果没有 yalc
npm i yalc -g

# 然后在本项目根目录 run
yalc publish

# 新建一个 测试仓库
npx create-react-app art-antd-test-project --template typescript

# 打开测试仓库
yalc add art-antd-react

# 复制的对应的 demo 到 art-antd-test-project 看能否跑起来
# 运行 ok， 正确渲染，那么 🎉🎉🎉
# 需要注意的是，如果出现了 `[eslint] Plugin "react" was conflicted between "package.json » eslint-config-react-app`错误，或许只需要在 demo 的 package.json 保存一下即可

# 构建 pages
pnpm run docs:build

# 部署到 pages
pnpm run docs:deploy