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

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

@@ -0,0 +1,21 @@
+import { Progress } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo: React.FC = () => (
+  <>
+    <Progress percent={30} />
+    <Progress percent={50} status="active" />
+    <Progress percent={70} type={'dashboard'} />
+    <Progress percent={80} type={'circle'} />
+    <Progress steps={8} percent={30} />
+  </>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorInfo'],
+  key: 'info',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,22 @@
+import { Progress } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo: React.FC = () => (
+  <>
+    <Progress percent={30} />
+    <Progress percent={50} status="active" />
+    <Progress percent={70} status="exception" />
+    <Progress percent={100} />
+    <Progress percent={50} showInfo={false} />
+    <Progress steps={8} />
+  </>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorFillSecondary', 'colorText', 'colorBgContainer'],
+  key: 'default',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,25 @@
+import { Progress, theme } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo: React.FC = () => {
+  const { token } = theme.useToken();
+  return (
+    <div style={{ padding: 24, background: token.colorBgLayout }}>
+      <Progress percent={30} />
+      <Progress percent={50} status="active" />
+      <Progress percent={70} status="exception" />
+      <Progress percent={100} />
+      <Progress percent={50} showInfo={false} />
+      <Progress steps={8} />
+    </div>
+  );
+};
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorFillSecondary', 'colorText', 'colorBgContainer'],
+  key: 'layout',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,22 @@
+import { Flexbox } from '@arvinxu/layout-kit';
+import { Progress } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo: React.FC = () => (
+  <Flexbox gap={12}>
+    <Flexbox horizontal gap={24}>
+      <Progress percent={70} status="success" type={'dashboard'} />
+      <Progress percent={80} status="success" type={'circle'} />
+    </Flexbox>
+    <Progress percent={50} status="success" />
+  </Flexbox>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorSuccess'],
+  key: 'success',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,27 @@
+import { Radio, Space } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <Space>
+    <Radio.Group defaultValue={'a'} buttonStyle="solid">
+      <Radio.Button value={'a'} checked>
+        Hangzhou
+      </Radio.Button>
+      <Radio.Button value={'b'}>Shanghai</Radio.Button>
+    </Radio.Group>
+
+    <div>
+      <Radio.Button>Apple</Radio.Button>
+      <Radio.Button checked>Orange</Radio.Button>
+    </div>
+  </Space>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorPrimaryActive', 'colorPrimaryHover'],
+  key: 'button',
+};
+
+export default componentDemo;

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { Result } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo: React.FC = () => <Result status={'error'} title="Demo示意" subTitle="status 为 error" />;
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorError'],
+  key: 'danger',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,11 @@
+import danger from './danger';
+import info from './info';
+import Demo from './result';
+import ResultWithDesc from './resultWithDesc';
+import warning from './warning';
+
+import type { ComponentDemo } from '../../interface';
+
+const previewerDemo: ComponentDemo[] = [Demo, info, warning, danger, ResultWithDesc];
+
+export default previewerDemo;

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

@@ -0,0 +1,13 @@
+import { Result } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo: React.FC = () => <Result status={'info'} title="Demo示意" subTitle="status 为info" />;
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorInfo'],
+  key: 'info',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,25 @@
+import { Button, Result } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo: React.FC = () => (
+  <Result
+    status="success"
+    title="Successfully Purchased Cloud Server ECS!"
+    subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
+    extra={[
+      <Button type="primary" key="console">
+        Go Console
+      </Button>,
+      <Button key="buy">Buy Again</Button>,
+    ]}
+  />
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorSuccess'],
+  key: 'result',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,16 @@
+import { Result } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo: React.FC = () => (
+  <Result title="Demo示意" subTitle="背景色为 colorFillAlter">
+    Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait.
+  </Result>
+);
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorFillAlter'],
+  key: 'resultWithDesc',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,20 @@
+import { Result } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo: React.FC = () => (
+  <Result
+    status="success"
+    title="Successfully Purchased Cloud Server ECS!"
+    subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
+    style={{ padding: 24 }}
+  />
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorSuccess'],
+  key: 'result',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,13 @@
+import { Result } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo: React.FC = () => <Result status={'warning'} title="Demo示意" subTitle="status 为warning" />;
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorWarning'],
+  key: 'warning',
+};
+
+export default componentDemo;

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

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

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

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

package/src/client/antd-token-previewer/component-demos/select/_internal.ts

@@ -0,0 +1,3 @@
+import { Select } from 'antd';
+
+export default Select._InternalPanelDoNotUseOrYouWillBeFired;

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

@@ -0,0 +1,33 @@
+import Select from './_internal';
+
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+import options from './data';
+
+const handleChange = (value: any) => {
+  console.log(`selected ${value}`);
+};
+
+const Demo = () => (
+  <Select
+    mode="multiple"
+    allowClear
+    style={{
+      width: '100%',
+    }}
+    status={'error'}
+    options={options}
+    placeholder="Please select"
+    defaultValue={['a10', 'c12']}
+    onChange={handleChange}
+  />
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorError', 'colorErrorOutline', 'colorErrorBorder', 'colorErrorHover'],
+  key: 'danger',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,9 @@
+import type { SelectProps } from 'antd';
+
+const options: SelectProps['options'] = [];
+
+for (let i = 10; i < 36; i++) {
+  options.push({ value: i.toString(36) + i, label: i.toString(36) + i });
+}
+
+export default options;

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

@@ -0,0 +1,28 @@
+import Select from './_internal';
+
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+import options from './data';
+
+const Demo = () => (
+  <Select
+    mode="multiple"
+    allowClear
+    style={{
+      width: '100%',
+    }}
+    disabled
+    options={options}
+    placeholder="Please select"
+    defaultValue={['a10', 'c12']}
+  />
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorBgContainerDisabled', 'colorTextDisabled'],
+  key: 'disabled',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,31 @@
+import Select from './_internal';
+
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+import options from './data';
+
+const handleChange = (value: any) => {
+  console.log(`selected ${value}`);
+};
+
+const Demo = () => (
+  <Select
+    allowClear
+    style={{
+      width: '100%',
+    }}
+    options={options}
+    placeholder="Please select"
+    value={['a10', 'c12']}
+    onChange={handleChange}
+  />
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorIcon', 'colorIconHover'],
+  key: 'icon',
+};
+
+export default componentDemo;

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

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

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

@@ -0,0 +1,35 @@
+import { Select as _Select, Space } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const { Option, _InternalPanelDoNotUseOrYouWillBeFired: Select } = _Select;
+
+function handleChange() {}
+const Demo = () => (
+  <Space align={'start'}>
+    <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
+      <Option value="jack">Jack</Option> <Option value="lucy">Lucy</Option>
+      <Option value="disabled" disabled>
+        Disabled
+      </Option>
+      <Option value="Yiminghe">yiminghe</Option>
+    </Select>
+    <Select defaultValue="lucy" style={{ width: 120 }} disabled>
+      <Option value="lucy">Lucy</Option>
+    </Select>
+    <Select defaultValue="lucy" style={{ width: 120 }} loading>
+      <Option value="lucy">Lucy</Option>
+    </Select>
+    <Select defaultValue="lucy" style={{ width: 120 }} allowClear>
+      <Option value="lucy">Lucy</Option>
+    </Select>
+  </Space>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['controlOutline', 'colorPrimary', 'colorPrimaryHover', 'colorText', 'colorBgElevated', 'colorBgContainer'],
+  key: 'select',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,33 @@
+import Select from './_internal';
+
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+import options from './data';
+
+const handleChange = (value: any) => {
+  console.log(`selected ${value}`);
+};
+
+const Demo = () => (
+  <Select
+    mode="multiple"
+    allowClear
+    style={{
+      width: '100%',
+    }}
+    options={options}
+    listHeight={200}
+    placeholder="Please select"
+    defaultValue={['a10', 'c12', 'e14']}
+    onChange={handleChange}
+  />
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorPrimary', 'colorFillSecondary'],
+  key: 'selectTag',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,33 @@
+import Select from './_internal';
+
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+import options from './data';
+
+const handleChange = (value: any) => {
+  console.log(`selected ${value}`);
+};
+
+const Demo = () => (
+  <Select
+    mode="multiple"
+    allowClear
+    style={{
+      width: '100%',
+    }}
+    status={'warning'}
+    options={options}
+    placeholder="Please select"
+    defaultValue={['a10', 'c12']}
+    onChange={handleChange}
+  />
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorWarningHover', 'colorWarningOutline'],
+  key: 'warning',
+};
+
+export default componentDemo;

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

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

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

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

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

@@ -0,0 +1,8 @@
+import Demo from './slider';
+import SliderInBg from './sliderInBg';
+
+import type { ComponentDemo } from '../../interface';
+
+const previewerDemo: ComponentDemo[] = [Demo, SliderInBg];
+
+export default previewerDemo;

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

@@ -0,0 +1,26 @@
+import { Slider } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <>
+    <Slider defaultValue={30} />
+    <Slider range defaultValue={[20, 50]} />
+  </>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: [
+    'colorFillSecondary',
+    'colorFillContentHover',
+    'colorBgContainer',
+    'colorPrimary',
+    'colorPrimaryHover',
+    'colorPrimaryBorderHover',
+    'colorPrimaryBorder',
+  ],
+  key: 'default',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,29 @@
+import { Slider, theme } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => {
+  const { token } = theme.useToken();
+  return (
+    <div style={{ padding: 12, background: token.colorFillSecondary }}>
+      <Slider defaultValue={30} />
+      <Slider range defaultValue={[20, 50]} />
+    </div>
+  );
+};
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: [
+    'colorFillSecondary',
+    'colorFillContentHover',
+    'colorBgContainer',
+    'colorPrimary',
+    'colorPrimaryHover',
+    'colorPrimaryBorderHover',
+    'colorPrimaryBorder',
+  ],
+  key: 'sliderInBg',
+};
+
+export default componentDemo;

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

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