docs: add some examples

example/.dumirc.ts

@@ -5,6 +5,7 @@ import { homepage, name } from '../package.json';
 import { defineThemeConfig } from '../src/defineThemeConfig';
 
 const isProduction = process.env.NODE_ENV === 'production';
+const isPreview = process.env.PREVIEW === 'true';
 const isWin = process.platform === 'win32';
 
 const themeConfig = defineThemeConfig({
@@ -58,6 +59,8 @@ const themeConfig = defineThemeConfig({
   },
 });
 
+const base = isProduction && !isPreview ? '/dumi-theme-yunti/' : '/';
+
 export default defineConfig({
   alias: {
     '@': path.resolve(__dirname, '../src'),
@@ -69,9 +72,9 @@ export default defineConfig({
   define: {
     'process.env': process.env,
   },
-  base: isProduction ? '/dumi-theme-yunti/' : '/',
-  publicPath: '/dumi-theme-yunti/',
-  outputPath: './dist/dumi-theme-yunti/',
+  base,
+  publicPath: base,
+  outputPath: `./dist${base}`,
   favicons: ['https://avatars.githubusercontent.com/u/148947838?s=64&v=4'],
   locales: [
     { id: 'zh-CN', name: '中文', suffix: '' },

example/package.json

@@ -1,12 +1,16 @@
 {
   "name": "dumi-theme-yunti-example",
   "scripts": {
+    "bp": "PREVIEW=true dumi build && dumi preview",
     "build": "dumi build",
     "build:analyze": "ANALYZE=1 dumi build",
     "build:no-compress": "COMPRESS=none dumi build",
     "dev": "dumi dev",
     "postinstall": "npm run setup",
     "preview": "dumi preview",
     "setup": "dumi setup"
+  },
+  "dependencies": {
+    "@yuntijs/ui": "^1.0.0-beta.54"
   }
 }

example/src/Example/demos/Form.tsx

@@ -0,0 +1,76 @@
+import { Divider, Flex, Form, Highlighter, Input } from '@yuntijs/ui';
+import { VariableIcon } from 'lucide-react';
+import React, { useState } from 'react';
+
+const FormCollapseList = Form.CollapseList;
+interface FieldType {
+  outputs?: {
+    key: string;
+    value: string;
+  }[];
+}
+
+export default () => {
+  const outputs = [
+    {
+      key: 'class',
+      value: 'claas1',
+    },
+    {
+      key: 'namespace',
+      value: 'ns1',
+    },
+  ];
+
+  const [values, setValues] = useState<FieldType>({ outputs });
+
+  return (
+    <Flex gap={6} style={{ width: '100%' }} vertical>
+      <Form onValuesChange={(_, values) => setValues(values)} variant="filled">
+        <FormCollapseList
+          columns={[
+            {
+              dependencies: field => [['outputs', field.name, 'value']],
+              label: '变量名',
+              name: 'key',
+              render: () => <Input maxLength={30} placeholder="输入变量名" showCount />,
+              rules: (_field, index) => [
+                { whitespace: true, required: true, message: '请输入变量名' },
+                ({ getFieldValue }) => ({
+                  validator(_rule, value) {
+                    const vars: FieldType['outputs'] = getFieldValue('outputs');
+                    if (vars?.some((v, vIndex) => vIndex !== index && v.key === value)) {
+                      return Promise.reject(new Error('变量名不能重复'));
+                    }
+                    return Promise.resolve();
+                  },
+                }),
+              ],
+            },
+            {
+              label: '变量值',
+              name: 'value',
+              render: () => <Input placeholder="输入变量值" style={{ width: 360 }} />,
+              rules: [{ required: true, message: '请输入变量值' }],
+            },
+          ]}
+          icon={VariableIcon}
+          initialValue={outputs}
+          name="outputs"
+          title="输出变量"
+          variant="block"
+        />
+      </Form>
+      <Divider
+        content="Form value 值"
+        dashed
+        defaultOpen
+        mode="expanded"
+        orientation="left"
+        orientationMargin={0}
+      >
+        <Highlighter language="json">{JSON.stringify(values, null, 2)}</Highlighter>
+      </Divider>
+    </Flex>
+  );
+};

example/src/Example/demos/ProCard.tsx

@@ -0,0 +1,49 @@
+import { Flex, ProCard, Tag, Typography } from '@yuntijs/ui';
+import React from 'react';
+
+const { Time } = Typography;
+
+const ProCardBorderedDemo = () => {
+  return (
+    <ProCard bordered hoverable={false} style={{ width: 420 }}>
+      <ProCard.Header
+        description="我是描述"
+        icon={{
+          src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        }}
+        title="我是标题"
+      />
+      <ProCard.Content>
+        <ProCard.Descriptions
+          column={2}
+          items={[
+            {
+              key: 'creator',
+              label: '创建者',
+              children: 'Luobo Zhang',
+            },
+            {
+              key: 'tags',
+              contentStyle: {
+                width: '100%',
+              },
+              children: (
+                <Flex gap={4} justify="flex-end">
+                  <Tag color="geekblue">LLM</Tag>
+                  <Tag color="green">Embedding</Tag>
+                </Flex>
+              ),
+            },
+            {
+              key: 'updateTime',
+              label: '更新时间',
+              children: <Time relativeTime={false} time={new Date().toISOString()} />,
+            },
+          ]}
+        />
+      </ProCard.Content>
+    </ProCard>
+  );
+};
+
+export default ProCardBorderedDemo;

example/src/Example/demos/Table.tsx

@@ -1,46 +1,172 @@
-import React from 'react';
+import { Dropdown, Table, TableProps, Tag } from '@yuntijs/ui';
+import React, { useState } from 'react';
+
+interface DataType {
+  key: string;
+  name: string;
+  age: number;
+  tags: string[];
+  description: string;
+}
+
+const data: DataType[] = [
+  {
+    key: '1',
+    name: 'The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution.',
+    age: 32,
+    tags: ['nice', 'developer'],
+    description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
+  },
+  {
+    key: '2',
+    name: 'Jim Green',
+    age: 42,
+    tags: ['loser'],
+    description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
+  },
+  {
+    key: '3',
+    name: 'Not Expandable',
+    age: 29,
+    description: 'This not expandable',
+    tags: ['cool', 'teacher'],
+  },
+  {
+    key: '4',
+    name: 'Joe Black',
+    age: 32,
+    description: 'My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park.',
+    tags: ['cool', 'teacher'],
+  },
+];
+
+type OnChange = NonNullable<TableProps<DataType>['onChange']>;
+type Filters = Parameters<OnChange>[1];
+
+type GetSingle<T> = T extends (infer U)[] ? U : never;
+type Sorts = GetSingle<Parameters<OnChange>[2]>;
 
 export default () => {
+  const [current, setCurrent] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(10);
+  const [total] = useState<number>(data.length);
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+  const [loading] = useState(false);
+
+  const [filters, setFilters] = useState<Filters>({});
+  const [soter, setSorter] = useState<Sorts>({});
+
+  const columns: TableProps<DataType>['columns'] = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      ellipsis: true,
+      render: text => text,
+    },
+    {
+      title: 'Age',
+      dataIndex: 'age',
+      key: 'age',
+      sorter: (a, b) => a.age - b.age,
+      sortOrder: soter.columnKey === 'age' ? soter.order : null,
+    },
+    {
+      title: 'Tags',
+      key: 'tags',
+      dataIndex: 'tags',
+      filters: [
+        { text: 'nice', value: 'nice' },
+        { text: 'cool', value: 'cool' },
+      ],
+      filteredValue: filters.tags || null,
+      onFilter: (value, record) => record.tags.includes(value as string),
+      width: 200,
+      render: (_, { tags }) => (
+        <>
+          {tags.map(tag => {
+            let color = tag.length > 5 ? 'geekblue' : 'green';
+            if (tag === 'loser') {
+              color = 'volcano';
+            }
+            return (
+              <Tag color={color} key={tag}>
+                {tag.toUpperCase()}
+              </Tag>
+            );
+          })}
+        </>
+      ),
+    },
+    {
+      title: 'Action',
+      key: 'action',
+      width: 130,
+      render: (_, record) => (
+        <Dropdown.Button
+          menu={{
+            items: [
+              {
+                key: 'detail',
+                label: '详情',
+              },
+            ],
+            onClick: ({ key }) => {
+              console.warn('click', key, record);
+            },
+          }}
+          onClick={() => {
+            console.warn('删除', record);
+          }}
+          overlayStyle={{
+            width: 100,
+          }}
+        >
+          删除
+        </Dropdown.Button>
+      ),
+    },
+  ];
+
+  const handlePaginationChange = (newCurrent: number, newPageSize: number) => {
+    setCurrent(newCurrent);
+    setPageSize(newPageSize);
+  };
+  const handleTableChange: TableProps<DataType>['onChange'] = (
+    pagination,
+    newFilters,
+    newSoter
+  ) => {
+    setCurrent(pagination.current || 0);
+    setPageSize(pagination.pageSize || 0);
+    setFilters(newFilters);
+    setSorter(newSoter as Sorts);
+  };
+
   return (
-    <table>
-      <tbody>
-        <tr>
-          <td>
-            <div>
-              <span>状态</span>
-              <span>
-                <span>
-                  <span>已发布</span>
-                </span>
-              </span>
-            </div>
-          </td>
-          <td>
-            <div>
-              <span>发布时间</span>
-              <span>
-                <span>2024-07-29 19:44:30</span>
-              </span>
-            </div>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <div>
-              <span>创建者</span>
-              <span>Luobo Zhang</span>
-            </div>
-          </td>
-          <td>
-            <div>
-              <span>更新时间</span>
-              <span>
-                <span>2024-07-29 19:44:30</span>
-              </span>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <Table
+      columns={columns}
+      dataSource={data}
+      expandable={{
+        expandedRowRender: record => <p style={{ margin: 0 }}>{record.description}</p>,
+        rowExpandable: record => record.name !== 'Not Expandable',
+      }}
+      loading={loading}
+      onChange={handleTableChange}
+      pagination={{
+        current,
+        onChange: handlePaginationChange,
+        onShowSizeChange: handlePaginationChange,
+        pageSize,
+        showTotal: newTotal => `共计 ${newTotal} 条`,
+        total,
+      }}
+      rowSelection={{
+        selectedRowKeys,
+        onChange: (newSelectedRowKeys: React.Key[]) => {
+          setSelectedRowKeys(newSelectedRowKeys);
+        },
+      }}
+    />
   );
 };