@nocobase/plugin-theme-editor 0.11.1-alpha.1

package/src/client/antd-token-previewer/component-demos/cascader/cascader.tsx

@@ -0,0 +1,16 @@
+import { Cascader } from 'antd';
+import React from 'react';
+
+import type { ComponentDemo } from '../../interface';
+import options from './data';
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalCascader } = Cascader;
+
+const Demo = (props: any) => <InternalCascader options={options} {...props} open placeholder="Please select" />;
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorBgContainer', 'colorPrimary'],
+  key: 'default',
+};
+
+export default componentDemo;

package/src/client/antd-token-previewer/component-demos/cascader/data.ts

@@ -0,0 +1,26 @@
+const options = [
+  {
+    value: 'zhejiang',
+    label: 'Zhejiang',
+    children: [
+      {
+        value: 'hangzhou',
+        label: 'Hangzhou',
+        children: [{ value: 'xihu', label: 'West Lake' }],
+      },
+    ],
+  },
+  {
+    value: 'jiangsu',
+    label: 'Jiangsu',
+    children: [
+      {
+        value: 'nanjing',
+        label: 'Nanjing',
+        children: [{ value: 'zhonghuamen', label: 'Zhong Hua Men' }],
+      },
+    ],
+  },
+];
+
+export default options;

package/src/client/antd-token-previewer/component-demos/cascader/disable.tsx

@@ -0,0 +1,17 @@
+import { Cascader } from 'antd';
+import React from 'react';
+
+import type { ComponentDemo } from '../../interface';
+import options from './data';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalCascader } = Cascader;
+
+const Demo = () => <InternalCascader options={options} open disabled placeholder="Please select" />;
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorBgContainerDisabled'],
+  key: 'disabled',
+};
+
+export default componentDemo;

package/src/client/antd-token-previewer/component-demos/cascader/highlight.tsx

@@ -0,0 +1,19 @@
+import { Cascader as _Cascader } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+import options from './data';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: Cascader } = _Cascader;
+
+const Demo = () => {
+  return <Cascader options={options} placeholder="Please select" searchValue={'jiang'} showSearch />;
+};
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorHighlight'],
+  key: 'highlight',
+};
+
+export default componentDemo;

package/src/client/antd-token-previewer/component-demos/cascader/index.ts

@@ -0,0 +1,9 @@
+import Default from './cascader';
+import disable from './disable';
+import HighLight from './highlight';
+
+import type { ComponentDemo } from '../../interface';
+
+const previewerDemo: ComponentDemo[] = [Default, HighLight, disable];
+
+export default previewerDemo;

package/src/client/antd-token-previewer/component-demos/checkbox/checkbox.tsx

@@ -0,0 +1,20 @@
+import { Checkbox, Space } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = (props: any) => (
+  <Space>
+    <Checkbox {...props}>Checkbox</Checkbox>
+    <Checkbox {...props} checked>
+      选中态
+    </Checkbox>
+  </Space>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorPrimary', 'colorText', 'colorBgContainer'],
+  key: 'default',
+};
+
+export default componentDemo;

package/src/client/antd-token-previewer/component-demos/checkbox/disabled.tsx

@@ -0,0 +1,13 @@
+import { Checkbox } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => <Checkbox disabled>Checkbox</Checkbox>;
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorTextDisabled', 'colorBgContainerDisabled'],
+  key: 'disabled',
+};
+
+export default componentDemo;

package/src/client/antd-token-previewer/component-demos/checkbox/index.ts

@@ -0,0 +1,8 @@
+import Default from './checkbox';
+import disabled from './disabled';
+
+import type { ComponentDemo } from '../../interface';
+
+const previewerDemo: ComponentDemo[] = [Default, disabled];
+
+export default previewerDemo;

package/src/client/antd-token-previewer/component-demos/collapse/collapse.tsx

@@ -0,0 +1,28 @@
+import { Collapse } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const { Panel } = Collapse;
+const text = `  A dog is a type of domesticated animal.  Known for its loyalty and faithfulness,  it can be found as a welcome guest in many households across the world.`;
+
+const Demo = () => (
+  <Collapse defaultActiveKey={['1']}>
+    <Panel header="This is panel header 1" key="1">
+      <p>{text}</p>
+    </Panel>
+    <Panel header="This is panel header 2" key="2">
+      <p>{text}</p>
+    </Panel>
+    <Panel header="This is panel header 3" key="3">
+      <p>{text}</p>
+    </Panel>
+  </Collapse>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorTextSecondary', 'colorText', 'colorFillAlter', 'colorBgContainer'],
+  key: 'default',
+};
+
+export default componentDemo;

package/src/client/antd-token-previewer/component-demos/collapse/index.ts

@@ -0,0 +1,7 @@
+import Default from './collapse';
+
+import type { ComponentDemo } from '../../interface';
+
+const previewerDemo: ComponentDemo[] = [Default];
+
+export default previewerDemo;

package/src/client/antd-token-previewer/component-demos/datePicker/danger.tsx

@@ -0,0 +1,13 @@
+import { DatePicker } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => <DatePicker status={'error'} />;
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorError', 'colorErrorBorder', 'colorErrorHover', 'colorErrorOutline'],
+  key: 'danger',
+};
+
+export default componentDemo;

package/src/client/antd-token-previewer/component-demos/datePicker/date-picker.tsx

@@ -0,0 +1,27 @@
+import { DatePicker, Space } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <Space direction="vertical">
+    <DatePicker._InternalPanelDoNotUseOrYouWillBeFired picker="week" />
+    <DatePicker._InternalPanelDoNotUseOrYouWillBeFired picker="month" />
+    <DatePicker._InternalPanelDoNotUseOrYouWillBeFired picker="quarter" />
+    <DatePicker._InternalPanelDoNotUseOrYouWillBeFired picker="year" />
+  </Space>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: [
+    'colorPrimary',
+    'colorPrimaryBorder',
+    'colorPrimaryHover',
+    'controlOutline',
+    'colorBgElevated',
+    'colorBgContainer',
+  ],
+  key: 'default',
+};
+
+export default componentDemo;

package/src/client/antd-token-previewer/component-demos/datePicker/disabled.tsx

@@ -0,0 +1,21 @@
+import { DatePicker, Space } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <Space direction="vertical">
+    <DatePicker disabled />
+    <DatePicker disabled picker="week" />
+    <DatePicker disabled picker="month" />
+    <DatePicker disabled picker="quarter" />
+    <DatePicker disabled picker="year" />
+  </Space>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorBgContainerDisabled', 'colorTextDisabled'],
+  key: 'disabled',
+};
+
+export default componentDemo;

package/src/client/antd-token-previewer/component-demos/datePicker/icon.tsx

@@ -0,0 +1,13 @@
+import { DatePicker } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => <DatePicker._InternalPanelDoNotUseOrYouWillBeFired />;
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorIcon', 'colorIconHover'],
+  key: 'icon',
+};
+
+export default componentDemo;

package/src/client/antd-token-previewer/component-demos/datePicker/index.ts

@@ -0,0 +1,11 @@
+import danger from './danger';
+import Default from './date-picker';
+import disabled from './disabled';
+import icon from './icon';
+import warning from './warning';
+
+import type { ComponentDemo } from '../../interface';
+
+const previewerDemo: ComponentDemo[] = [Default, danger, warning, icon, disabled];
+
+export default previewerDemo;

package/src/client/antd-token-previewer/component-demos/datePicker/warning.tsx

@@ -0,0 +1,13 @@
+import { DatePicker } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => <DatePicker status={'warning'} />;
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorWarning', 'colorWarningBorder', 'colorWarningHover', 'colorWarningOutline'],
+  key: 'warning',
+};
+
+export default componentDemo;

package/src/client/antd-token-previewer/component-demos/descriptions/descriptions.tsx

@@ -0,0 +1,20 @@
+import { Descriptions } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <Descriptions title="User Info" bordered>
+    <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+    <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
+    <Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
+    <Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item>
+  </Descriptions>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorSplit', 'colorText', 'colorFillAlter'],
+  key: 'default',
+};
+
+export default componentDemo;

package/src/client/antd-token-previewer/component-demos/descriptions/index.ts

@@ -0,0 +1,7 @@
+import Default from './descriptions';
+
+import type { ComponentDemo } from '../../interface';
+
+const previewerDemo: ComponentDemo[] = [Default];
+
+export default previewerDemo;

package/src/client/antd-token-previewer/component-demos/divider/divider.tsx

@@ -0,0 +1,40 @@
+import { Divider } from 'antd';
+import React from 'react';
+
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt
+      a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider plain>Text</Divider>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt
+      a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider orientation="left" plain>
+      Left Text
+    </Divider>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt
+      a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider orientation="right" plain>
+      Right Text
+    </Divider>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt
+      a te dicta? Refert tamen, quo modo.
+    </p>
+  </>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorSplit', 'colorText'],
+  key: 'divider',
+};
+
+export default componentDemo;

package/src/client/antd-token-previewer/component-demos/divider/index.ts

@@ -0,0 +1,7 @@
+import Default from './divider';
+
+import type { ComponentDemo } from '../../interface';
+
+const previewerDemo: ComponentDemo[] = [Default];
+
+export default previewerDemo;

package/src/client/antd-token-previewer/component-demos/drawer/drawer.tsx

@@ -0,0 +1,36 @@
+import { Button, Drawer } from 'antd';
+import React, { useState } from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo: React.FC = () => {
+  const [visible, setVisible] = useState(false);
+
+  const showDrawer = () => {
+    setVisible(true);
+  };
+
+  const onClose = () => {
+    setVisible(false);
+  };
+
+  return (
+    <>
+      <Button type="primary" onClick={showDrawer}>
+        Open
+      </Button>
+      <Drawer title="Basic Drawer" placement="right" onClose={onClose} open={visible}>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </Drawer>
+    </>
+  );
+};
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorBgMask', 'colorBgElevated'],
+  key: 'default',
+};
+
+export default componentDemo;

package/src/client/antd-token-previewer/component-demos/drawer/index.ts

@@ -0,0 +1,7 @@
+import Default from './drawer';
+
+import type { ComponentDemo } from '../../interface';
+
+const previewerDemo: ComponentDemo[] = [Default];
+
+export default previewerDemo;

package/src/client/antd-token-previewer/component-demos/dropdown/dropdown.tsx

@@ -0,0 +1,24 @@
+import { DownOutlined } from '@ant-design/icons';
+import { Dropdown } from 'antd';
+import React from 'react';
+
+import menu from './menu';
+
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <div>
+    <a className="ant-dropdown-link" onClick={(e) => e.preventDefault()}>
+      Hover me <DownOutlined />
+    </a>
+    <Dropdown._InternalPanelDoNotUseOrYouWillBeFired overlay={menu} />
+  </div>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorPrimary', 'colorError', 'colorErrorHover', 'colorBgElevated'],
+  key: 'default',
+};
+
+export default componentDemo;

package/src/client/antd-token-previewer/component-demos/dropdown/dropdownError.tsx

@@ -0,0 +1,42 @@
+import { DownOutlined } from '@ant-design/icons';
+import { Dropdown, Typography } from 'antd';
+import React from 'react';
+
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <div>
+    <Typography.Text type={'danger'} onClick={(e) => e.preventDefault()}>
+      Hover me <DownOutlined />
+    </Typography.Text>
+    <Dropdown._InternalPanelDoNotUseOrYouWillBeFired
+      menu={{
+        items: [
+          {
+            label: 'item 1',
+            key: '1',
+          },
+          {
+            label: 'a danger item',
+            danger: true,
+            key: '3',
+          },
+          {
+            label: 'danger disabled item',
+            danger: true,
+            disabled: true,
+            key: '2',
+          },
+        ],
+      }}
+    />
+  </div>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorError', 'colorErrorHover', 'colorBgElevated'],
+  key: 'default',
+};
+
+export default componentDemo;

package/src/client/antd-token-previewer/component-demos/dropdown/index.ts

@@ -0,0 +1,7 @@
+import Default from './dropdown';
+
+import type { ComponentDemo } from '../../interface';
+
+const previewerDemo: ComponentDemo[] = [Default];
+
+export default previewerDemo;

package/src/client/antd-token-previewer/component-demos/dropdown/menu.tsx

@@ -0,0 +1,26 @@
+import { DownOutlined } from '@ant-design/icons';
+import { Menu } from 'antd';
+import React from 'react';
+
+const menu = (
+  <Menu>
+    <Menu.Item>
+      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
+        1st menu item
+      </a>
+    </Menu.Item>
+    <Menu.Item icon={<DownOutlined />} disabled>
+      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
+        2nd menu item (disabled)
+      </a>
+    </Menu.Item>
+    <Menu.Item disabled>
+      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
+        3rd menu item (disabled)
+      </a>
+    </Menu.Item>
+    <Menu.Item danger>a danger item</Menu.Item>
+  </Menu>
+);
+
+export default menu;

package/src/client/antd-token-previewer/component-demos/empty/empty.tsx

@@ -0,0 +1,13 @@
+import { Empty } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => <Empty />;
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorTextDisabled'],
+  key: 'default',
+};
+
+export default componentDemo;

package/src/client/antd-token-previewer/component-demos/empty/index.ts

@@ -0,0 +1,7 @@
+import Default from './empty';
+
+import type { ComponentDemo } from '../../interface';
+
+const previewerDemo: ComponentDemo[] = [Default];
+
+export default previewerDemo;

package/src/client/antd-token-previewer/component-demos/form/danger.tsx

@@ -0,0 +1,33 @@
+import { Form, Input } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+function onFinish() {}
+
+const Demo = () => (
+  <Form
+    name="basic"
+    labelCol={{ span: 4 }}
+    wrapperCol={{ span: 20 }}
+    initialValues={{ remember: true }}
+    onFinish={onFinish}
+    autoComplete="off"
+  >
+    <Form.Item
+      label="Username"
+      name="username"
+      status={'error'}
+      rules={[{ required: true, message: 'Please input your username!' }]}
+    >
+      <Input />
+    </Form.Item>
+  </Form>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorError', 'colorErrorBorder', 'colorErrorHover'],
+  key: 'danger',
+};
+
+export default componentDemo;

package/src/client/antd-token-previewer/component-demos/form/form.tsx

@@ -0,0 +1,42 @@
+import { Button, Checkbox, Form, Input } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => {
+  const onFinish = () => {};
+  const onFinishFailed = () => {};
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 8 }}
+      wrapperCol={{ span: 16 }}
+      initialValues={{ remember: true }}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+      autoComplete="off"
+    >
+      <Form.Item label="Username" name="username" rules={[{ required: true, message: 'Please input your username!' }]}>
+        <Input />
+      </Form.Item>
+      <Form.Item label="Password" name="password" rules={[{ required: true, message: 'Please input your password!' }]}>
+        <Input.Password />
+      </Form.Item>
+      <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
+        <Checkbox>Remember me</Checkbox>
+      </Form.Item>
+      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+        <Button type="primary" htmlType="submit">
+          Submit
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorError', 'controlOutline', 'colorErrorBorder', 'colorErrorHover'],
+  key: 'default',
+};
+
+export default componentDemo;

package/src/client/antd-token-previewer/component-demos/form/index.tsx

@@ -0,0 +1,10 @@
+import Default from './form';
+
+import danger from './danger';
+import warning from './warning';
+
+import type { ComponentDemo } from '../../interface';
+
+const previewerDemo: ComponentDemo[] = [Default, warning, danger];
+
+export default previewerDemo;

package/src/client/antd-token-previewer/component-demos/form/warning.tsx

@@ -0,0 +1,33 @@
+import { Form, Input } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+function onFinish() {}
+
+const Demo = () => (
+  <Form
+    name="basic"
+    labelCol={{ span: 8 }}
+    wrapperCol={{ span: 16 }}
+    initialValues={{ remember: true }}
+    onFinish={onFinish}
+    autoComplete="off"
+  >
+    <Form.Item
+      label="Username"
+      name="username"
+      status={'warning'}
+      rules={[{ required: true, message: 'Please input your username!' }]}
+    >
+      <Input />
+    </Form.Item>
+  </Form>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorWarning'],
+  key: 'warning',
+};
+
+export default componentDemo;