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

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

@@ -0,0 +1,56 @@
+import { Col, Row } from 'antd';
+import classNames from 'classnames';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+import makeStyle from '../../utils/makeStyle';
+
+const useStyle = makeStyle('GridDemo', (token) => ({
+  '.previewer-grid-demo': {
+    [`${token.rootCls}-row`]: {
+      marginBottom: 16,
+    },
+    [`${token.rootCls}-row > div:not(.gutter-row)`]: {
+      padding: '16px 0',
+      background: '#0092ff',
+      color: '#fff',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+
+      '&:nth-child(2n + 1)': {
+        background: 'rgba(0,146,255,.75)',
+      },
+    },
+  },
+}));
+
+const Demo = () => {
+  const [, hashId] = useStyle();
+
+  return (
+    <div className={classNames('previewer-grid-demo', hashId)}>
+      <Row>
+        <Col span={24}>col</Col>
+      </Row>
+      <Row>
+        <Col span={12}>col-12</Col> <Col span={12}>col-12</Col>
+      </Row>
+      <Row>
+        <Col span={8}>col-8</Col> <Col span={8}>col-8</Col>
+        <Col span={8}>col-8</Col>
+      </Row>
+      <Row>
+        <Col span={6}>col-6</Col> <Col span={6}>col-6</Col>
+        <Col span={6}>col-6</Col>
+        <Col span={6}>col-6</Col>
+      </Row>
+    </div>
+  );
+};
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  key: 'default',
+};
+
+export default componentDemo;

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

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

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

@@ -0,0 +1,18 @@
+import { HomeOutlined, LoadingOutlined, SettingFilled, SmileOutlined, SyncOutlined } from '@ant-design/icons';
+import { Space } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <Space>
+    <HomeOutlined /> <SettingFilled /> <SmileOutlined /> <SyncOutlined spin />
+    <SmileOutlined rotate={180} /> <LoadingOutlined />
+  </Space>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  key: 'default',
+};
+
+export default componentDemo;

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

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

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

@@ -0,0 +1,16 @@
+import { Image } from 'antd';
+import React from 'react';
+
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => {
+  return <Image width={200} height={200} src="error" placeholder />;
+};
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorBgContainerDisabled'],
+  key: 'disabled',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,16 @@
+import { Image } from 'antd';
+import React from 'react';
+
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => {
+  return <Image width={200} src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />;
+};
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorBgMask'],
+  key: 'default',
+};
+
+export default componentDemo;

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

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

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

@@ -0,0 +1,125 @@
+import Alert from './alert';
+import Anchor from './anchor';
+import AutoComplete from './autoComplete';
+import Avatar from './avatar';
+import Badge from './badge';
+import Breadcrumb from './breadcrumb';
+import Button from './button';
+import Calendar from './calendar';
+import Card from './card';
+import Carousel from './carousel';
+import Cascader from './cascader';
+import Checkbox from './checkbox';
+import Collapse from './collapse';
+import DatePicker from './datePicker';
+import Descriptions from './descriptions';
+import Divider from './divider';
+import Drawer from './drawer';
+import Dropdown from './dropdown';
+import Empty from './empty';
+import Form from './form';
+import Grid from './grid';
+import Icon from './icon';
+import Image from './image';
+import Input from './input';
+import InputNumber from './inputNumber';
+import List from './list';
+import Mentions from './mentions';
+import Menu from './menu';
+import Message from './message';
+import Modal from './modal';
+import Notification from './notification';
+import Pagination from './pagination';
+import Popconfirm from './popconfirm';
+import Popover from './popover';
+import Progress from './progress';
+import Radio from './radio';
+import Rate from './rate';
+import Result from './result';
+import Segmented from './segmented';
+import Select from './select';
+import Skeleton from './skeleton';
+import Slider from './slider';
+import Space from './space';
+import Spin from './spin';
+import Statistic from './statistic';
+import Steps from './steps';
+import Switch from './switch';
+import Table from './table';
+import Tabs from './tabs';
+import Tag from './tag';
+import TimePicker from './timePicker';
+import Timeline from './timeline';
+import Tooltip from './tooltip';
+import Transfer from './transfer';
+import Tree from './tree';
+import TreeSelect from './treeSelect';
+import Typography from './typography';
+import Upload from './upload';
+
+import type { ComponentDemo } from '../interface';
+
+export type PreviewerDemos = Record<string, ComponentDemo[]>;
+
+const ComponentDemos: PreviewerDemos = {
+  Alert,
+  Anchor,
+  AutoComplete,
+  Avatar,
+  Badge,
+  Breadcrumb,
+  Button,
+  Calendar,
+  Card,
+  Carousel,
+  Cascader,
+  Checkbox,
+  Collapse,
+  DatePicker,
+  Descriptions,
+  Dropdown,
+  Empty,
+  Form,
+  Grid,
+  Icon,
+  Image,
+  InputNumber,
+  Input,
+  List,
+  Mentions,
+  Modal,
+  Notification,
+  Pagination,
+  Popconfirm,
+  Popover,
+  Radio,
+  Rate,
+  Select,
+  Skeleton,
+  Slider,
+  Spin,
+  Statistic,
+  Switch,
+  Table,
+  Tabs,
+  Tag,
+  TimePicker,
+  Timeline,
+  Tooltip,
+  Transfer,
+  TreeSelect,
+  Tree,
+  Typography,
+  Upload,
+  Divider,
+  Space,
+  Menu,
+  Steps,
+  Segmented,
+  Drawer,
+  Message,
+  Result,
+  Progress,
+};
+
+export default ComponentDemos;

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

@@ -0,0 +1,13 @@
+import { Input } from 'antd';
+import React from 'react';
+
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => <Input placeholder="Basic usage" value={'右侧的图标就是 colorIcon'} allowClear />;
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorIcon', 'colorIconHover'],
+  key: 'clearIcon',
+};
+export default componentDemo;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,25 @@
+import { CheckCircleFilled } from '@ant-design/icons';
+import { Input, theme } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+function onChange() {}
+
+const Demo = () => {
+  const { token } = theme.useToken();
+  return (
+    <Input
+      defaultValue={"I'm the content"}
+      suffix={<CheckCircleFilled style={{ color: token.colorSuccess }} />}
+      onChange={onChange}
+    />
+  );
+};
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorSuccess'],
+  key: 'warning',
+};
+
+export default componentDemo;

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

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

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

@@ -0,0 +1,13 @@
+import { Input } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => <Input addonBefore="http://" addonAfter=".com" defaultValue="mysite" />;
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorFillAlter'],
+  key: 'withAddon',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,15 @@
+import { InputNumber } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+function onChange() {}
+
+const Demo = () => <InputNumber status={'error'} min={1} max={10} defaultValue={3} onChange={onChange} />;
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorErrorBorder', 'colorErrorOutline', 'colorErrorHover', 'colorError'],
+  key: 'danger',
+};
+
+export default componentDemo;

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { InputNumber } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+function onChange() {}
+const Demo = () => <InputNumber min={1} max={10} defaultValue={3} onChange={onChange} />;
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorPrimaryBorder', 'controlOutline', 'colorPrimaryHover', 'colorPrimary', 'colorBgContainer'],
+  key: 'default',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,15 @@
+import { InputNumber } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+function onChange() {}
+
+const Demo = () => <InputNumber status={'warning'} min={1} max={10} defaultValue={3} onChange={onChange} />;
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorWarning', 'colorWarningBorder', 'colorWarningOutline', 'colorWarningHover'],
+  key: 'warning',
+};
+
+export default componentDemo;

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

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

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

@@ -0,0 +1,33 @@
+import { Avatar, List } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const data = [
+  { title: 'Ant Design Title 1' },
+  { title: 'Ant Design Title 2' },
+  { title: 'Ant Design Title 3' },
+  { title: 'Ant Design Title 4' },
+];
+const Demo = () => (
+  <List
+    itemLayout="horizontal"
+    dataSource={data}
+    renderItem={(item) => (
+      <List.Item>
+        <List.Item.Meta
+          avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
+          title={<a href="https://ant.design">{item.title}</a>}
+          description="Ant Design, a design language for background applications, is refined by Ant UED Team"
+        />
+      </List.Item>
+    )}
+  />
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: [],
+  key: 'default',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,23 @@
+import { Mentions } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const { Option } = Mentions;
+function onChange() {}
+function onSelect() {}
+
+const Demo = () => (
+  <Mentions style={{ width: '100%' }} onChange={onChange} onSelect={onSelect} status={'error'} defaultValue="@afc163">
+    <Option value="afc163">afc163</Option>
+    <Option value="zombieJ">zombieJ</Option>
+    <Option value="yesmeck">yesmeck</Option>
+  </Mentions>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorError', 'colorErrorOutline', 'colorErrorBorder', 'colorErrorHover'],
+  key: 'danger',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,21 @@
+import { Mentions } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const { Option } = Mentions;
+
+const Demo = () => (
+  <Mentions style={{ width: '100%' }} status={'error'} disabled defaultValue="@afc163">
+    <Option value="afc163">afc163</Option>
+    <Option value="zombieJ">zombieJ</Option>
+    <Option value="yesmeck">yesmeck</Option>
+  </Mentions>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorBgContainerDisabled', 'colorTextDisabled'],
+  key: 'disabled',
+};
+
+export default componentDemo;

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

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

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

@@ -0,0 +1,27 @@
+import { Mentions } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const { Option } = Mentions;
+function onChange() {}
+function onSelect() {}
+const Demo = () => (
+  <Mentions._InternalPanelDoNotUseOrYouWillBeFired
+    style={{ width: '100%' }}
+    onChange={onChange}
+    onSelect={onSelect}
+    defaultValue="@afc163"
+  >
+    <Option value="afc163">afc163</Option>
+    <Option value="zombieJ">zombieJ</Option>
+    <Option value="yesmeck">yesmeck</Option>
+  </Mentions._InternalPanelDoNotUseOrYouWillBeFired>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorBgContainer', 'colorBorder', 'colorPrimary', 'colorPrimaryHover', 'controlOutline'],
+  key: 'default',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,23 @@
+import { Mentions } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const { Option } = Mentions;
+function onChange() {}
+function onSelect() {}
+
+const Demo = () => (
+  <Mentions style={{ width: '100%' }} onChange={onChange} onSelect={onSelect} status={'warning'} defaultValue="@afc163">
+    <Option value="afc163">afc163</Option>
+    <Option value="zombieJ">zombieJ</Option>
+    <Option value="yesmeck">yesmeck</Option>
+  </Mentions>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorWarning', 'colorWarningBorder', 'colorWarningHover', 'colorWarningOutline'],
+  key: 'warning',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,42 @@
+import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
+import React from 'react';
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+const getItem = (
+  label: React.ReactNode,
+  key: React.Key,
+  icon?: React.ReactNode,
+  children?: MenuItem[],
+  type?: 'group',
+): MenuItem =>
+  ({
+    key,
+    icon,
+    children,
+    label,
+    type,
+  } as MenuItem);
+
+const items: MenuProps['items'] = [
+  getItem('Navigation One', 'sub1', <MailOutlined />, [
+    getItem('Item 1', 'g1', null, [getItem('Option 1', '1'), getItem('Option 2', '2')], 'group'),
+    getItem('Item 2', 'g2', null, [getItem('Option 3', '3'), getItem('Option 4', '4')], 'group'),
+  ]),
+
+  getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
+    getItem('Option 5', '5'),
+    getItem('Option 6', '6'),
+    getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]),
+  ]),
+
+  getItem('Navigation Three', 'sub4', <SettingOutlined />, [
+    getItem('Option 9', '9'),
+    getItem('Option 10', '10'),
+    getItem('Option 11', '11'),
+    getItem('Option 12', '12'),
+  ]),
+];
+
+export default items;