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

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

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

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

@@ -0,0 +1,20 @@
+import { Timeline } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <Timeline>
+    <Timeline.Item color={'green'}>Create a services site 2015-09-01</Timeline.Item>
+    <Timeline.Item color={'green'}>Solve initial network problems 2015-09-01</Timeline.Item>
+    <Timeline.Item color={'green'}>Technical testing 2015-09-01</Timeline.Item>
+    <Timeline.Item color={'green'}>Network problems being solved 2015-09-01</Timeline.Item>
+  </Timeline>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorSuccess'],
+  key: 'success',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,20 @@
+import { Timeline } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <Timeline>
+    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
+    <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
+    <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
+    {/*<Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>*/}
+  </Timeline>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorPrimary', 'colorText', 'colorSplit', 'colorBgContainer'],
+  key: 'default',
+};
+
+export default componentDemo;

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

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

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

@@ -0,0 +1,17 @@
+import { Tooltip } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <div>
+    <Tooltip._InternalPanelDoNotUseOrYouWillBeFired title="prompt text" />
+    <span>Tooltip will show on mouse enter.</span>
+  </div>
+);
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorBgSpotlight', 'colorTextLightSolid'],
+  key: 'default',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,39 @@
+import { Transfer } from 'antd';
+import React, { useState } from 'react';
+
+import type { ComponentDemo } from '../../interface';
+
+import mockData from './data';
+
+const initialTargetKeys = mockData.filter((item) => +item.key > 10).map((item) => item.key);
+
+const Demo = () => {
+  const [targetKeys, setTargetKeys] = useState(initialTargetKeys);
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+  const onScroll = () => {};
+  return (
+    <Transfer
+      dataSource={mockData}
+      titles={['Source', 'Target']}
+      targetKeys={targetKeys}
+      status={'error'}
+      selectedKeys={selectedKeys}
+      onChange={(nextTargetKeys) => {
+        setTargetKeys(nextTargetKeys);
+      }}
+      onSelectChange={(sourceSelectedKeys, targetSelectedKeys) => {
+        setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
+      }}
+      onScroll={onScroll}
+      render={(item) => item.title}
+    />
+  );
+};
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorError'],
+  key: 'danger',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,9 @@
+const mockData: any[] = [];
+for (let i = 0; i < 20; i++) {
+  mockData.push({
+    key: i.toString(),
+    title: `content${i + 1}`,
+    description: `description of content${i + 1}`,
+  });
+}
+export default mockData;

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

@@ -0,0 +1,46 @@
+import { Transfer } from 'antd';
+import React, { useState } from 'react';
+
+import type { ComponentDemo } from '../../interface';
+
+const mockData: any[] = [];
+for (let i = 0; i < 20; i++) {
+  mockData.push({
+    key: i.toString(),
+    title: `content${i + 1}`,
+    description: `description of content${i + 1}`,
+  });
+}
+
+const initialTargetKeys = mockData.filter((item) => +item.key > 10).map((item) => item.key);
+
+const Demo = () => {
+  const [targetKeys, setTargetKeys] = useState(initialTargetKeys);
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+  const onScroll = () => {};
+  return (
+    <Transfer
+      dataSource={mockData}
+      titles={['Source', 'Target']}
+      targetKeys={targetKeys}
+      disabled
+      selectedKeys={selectedKeys}
+      onChange={(nextTargetKeys) => {
+        setTargetKeys(nextTargetKeys);
+      }}
+      onSelectChange={(sourceSelectedKeys, targetSelectedKeys) => {
+        setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
+      }}
+      onScroll={onScroll}
+      render={(item) => item.title}
+    />
+  );
+};
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorBgContainerDisabled'],
+  key: 'disabled',
+};
+
+export default componentDemo;

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

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

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

@@ -0,0 +1,37 @@
+import { Transfer } from 'antd';
+import React, { useState } from 'react';
+
+import type { ComponentDemo } from '../../interface';
+import mockData from './data';
+
+const initialTargetKeys = mockData.filter((item) => +item.key > 10).map((item) => item.key);
+
+const Demo = () => {
+  const [targetKeys, setTargetKeys] = useState(initialTargetKeys);
+  const [selectedKeys, setSelectedKeys] = useState<string[]>(['1', '2']);
+  const onScroll = () => {};
+  return (
+    <Transfer
+      dataSource={mockData}
+      titles={['Source', 'Target']}
+      targetKeys={targetKeys}
+      selectedKeys={selectedKeys}
+      onChange={(nextTargetKeys) => {
+        setTargetKeys(nextTargetKeys);
+      }}
+      onSelectChange={(sourceSelectedKeys, targetSelectedKeys) => {
+        setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
+      }}
+      onScroll={onScroll}
+      render={(item) => item.title}
+    />
+  );
+};
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['controlItemBgActiveHover', 'controlItemBgActive', 'colorBgContainer'],
+  key: 'default',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,46 @@
+import { Transfer } from 'antd';
+import React, { useState } from 'react';
+
+import type { ComponentDemo } from '../../interface';
+
+const mockData: any[] = [];
+for (let i = 0; i < 20; i++) {
+  mockData.push({
+    key: i.toString(),
+    title: `content${i + 1}`,
+    description: `description of content${i + 1}`,
+  });
+}
+
+const initialTargetKeys = mockData.filter((item) => +item.key > 10).map((item) => item.key);
+
+const Demo = () => {
+  const [targetKeys, setTargetKeys] = useState(initialTargetKeys);
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+  const onScroll = () => {};
+  return (
+    <Transfer
+      dataSource={mockData}
+      titles={['Source', 'Target']}
+      targetKeys={targetKeys}
+      status={'warning'}
+      selectedKeys={selectedKeys}
+      onChange={(nextTargetKeys) => {
+        setTargetKeys(nextTargetKeys);
+      }}
+      onSelectChange={(sourceSelectedKeys, targetSelectedKeys) => {
+        setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
+      }}
+      onScroll={onScroll}
+      render={(item) => item.title}
+    />
+  );
+};
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorWarning'],
+  key: 'warning',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,51 @@
+import { Tree } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const treeData = [
+  {
+    title: 'parent 1',
+    key: '0-0',
+    children: [
+      {
+        title: 'parent 1-0',
+        key: '0-0-0',
+        disabled: true,
+        children: [
+          { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
+          { title: 'leaf', key: '0-0-0-1' },
+        ],
+      },
+      {
+        title: 'parent 1-1',
+        key: '0-0-1',
+        children: [
+          {
+            title: <span style={{ color: '#1890ff' }}>sss</span>,
+            key: '0-0-1-0',
+          },
+        ],
+      },
+    ],
+  },
+];
+const Demo = () => {
+  return (
+    <Tree
+      disabled
+      checkable
+      defaultExpandedKeys={['0-0-0', '0-0-1']}
+      defaultSelectedKeys={['0-0-0', '0-0-1']}
+      defaultCheckedKeys={['0-0-0', '0-0-1']}
+      treeData={treeData}
+    />
+  );
+};
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorTextDisabled', 'colorBgContainerDisabled'],
+  key: 'disabled',
+};
+
+export default componentDemo;

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

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

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

@@ -0,0 +1,50 @@
+import { Tree } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const treeData = [
+  {
+    title: 'parent 1',
+    key: '0-0',
+    children: [
+      {
+        title: 'parent 1-0',
+        key: '0-0-0',
+        disabled: true,
+        children: [
+          { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
+          { title: 'leaf', key: '0-0-0-1' },
+        ],
+      },
+      {
+        title: 'parent 1-1',
+        key: '0-0-1',
+        children: [
+          {
+            title: <span style={{ color: '#1890ff' }}>sss</span>,
+            key: '0-0-1-0',
+          },
+        ],
+      },
+    ],
+  },
+];
+const Demo = () => {
+  return (
+    <Tree
+      checkable
+      defaultExpandedKeys={['0-0-0', '0-0-1']}
+      defaultSelectedKeys={['0-0-0', '0-0-1']}
+      defaultCheckedKeys={['0-0-0', '0-0-1']}
+      treeData={treeData}
+    />
+  );
+};
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorPrimary', 'controlOutline', 'colorBgContainer'],
+  key: 'default',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,43 @@
+import { TreeSelect as _TreeSelect } from 'antd';
+import React, { useState } from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const { TreeNode, _InternalPanelDoNotUseOrYouWillBeFired: TreeSelect } = _TreeSelect;
+
+const Demo = () => {
+  const [value, setValue] = useState(undefined);
+  const onChange = () => {
+    setValue(value);
+  };
+  return (
+    <TreeSelect
+      disabled
+      showSearch
+      style={{ width: '100%' }}
+      value={value}
+      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+      placeholder="Please select"
+      allowClear
+      treeDefaultExpandAll
+      onChange={onChange}
+    >
+      <TreeNode value="parent 1" title="parent 1">
+        <TreeNode value="parent 1-0" title="parent 1-0">
+          <TreeNode value="leaf1" title="leaf1" />
+          <TreeNode value="leaf2" title="leaf2" />
+        </TreeNode>
+        <TreeNode value="parent 1-1" title="parent 1-1">
+          <TreeNode value="leaf3" title={'leaf3'} />
+        </TreeNode>
+      </TreeNode>
+    </TreeSelect>
+  );
+};
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorTextDisabled', 'colorBgContainerDisabled'],
+  key: 'disabled',
+};
+
+export default componentDemo;

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

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

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

@@ -0,0 +1,42 @@
+import { TreeSelect as _TreeSelect } from 'antd';
+import React, { useState } from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const { TreeNode, _InternalPanelDoNotUseOrYouWillBeFired: TreeSelect } = _TreeSelect;
+
+const Demo = () => {
+  const [value, setValue] = useState(undefined);
+  const onChange = () => {
+    setValue(value);
+  };
+  return (
+    <TreeSelect
+      showSearch
+      style={{ width: '100%' }}
+      value={value}
+      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+      placeholder="Please select"
+      allowClear
+      treeDefaultExpandAll
+      onChange={onChange}
+    >
+      <TreeNode value="parent 1" title="parent 1">
+        <TreeNode value="parent 1-0" title="parent 1-0">
+          <TreeNode value="leaf1" title="leaf1" />
+          <TreeNode value="leaf2" title="leaf2" />
+        </TreeNode>
+        <TreeNode value="parent 1-1" title="parent 1-1">
+          <TreeNode value="leaf3" title={'leaf3'} />
+        </TreeNode>
+      </TreeNode>
+    </TreeSelect>
+  );
+};
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorPrimary', 'colorPrimaryActive', 'controlOutline', 'colorBgElevated', 'colorBgContainer'],
+  key: 'default',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,15 @@
+import { Typography } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const { Title } = Typography;
+
+const Demo = () => <Title level={4}>Heading 4</Title>;
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['fontSizeHeading4'],
+  key: 'heading4',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,22 @@
+import { Typography } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const { Title, Text } = Typography;
+
+const Demo = () => (
+  <div>
+    <Title type={'danger'} level={4}>
+      Error Title
+    </Title>
+    <Text type={'danger'}>error Text</Text>
+  </div>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorError', 'colorErrorHover', 'colorErrorActive'],
+  key: 'error',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,11 @@
+import Heading4 from './Heading4';
+import error from './error';
+import success from './success';
+import TypographyDemo from './typography';
+import warning from './warning';
+
+import type { ComponentDemo } from '../../interface';
+
+const previewerDemo: ComponentDemo[] = [TypographyDemo, Heading4, error, warning, success];
+
+export default previewerDemo;

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

@@ -0,0 +1,22 @@
+import { Typography } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const { Title, Text } = Typography;
+
+const Demo = () => (
+  <div>
+    <Title type={'success'} level={4}>
+      Success Title
+    </Title>
+    <Text type={'success'}>success Text</Text>
+  </div>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorSuccess'],
+  key: 'success',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,38 @@
+import { Typography } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const { Title, Paragraph, Text, Link } = Typography;
+const Demo = () => (
+  <Typography>
+    <Title level={4}>《故乡》 </Title>
+    <Paragraph>——鲁迅</Paragraph>
+    <Paragraph>
+      <Text strong>深蓝的天空中挂着一轮金黄的圆月</Text>
+      ，下面是海边的沙地，都种着一望无际的碧绿的西瓜，其间有一个十一二岁的少年，项带银圈，手捏一柄钢叉，
+      <Text mark>向一匹猹尽力的刺去</Text>
+      ，那猹却将身一扭，反从他的胯下逃走了。
+    </Paragraph>
+    <Paragraph>
+      <ul>
+        <li>
+          <Link href="#">狂人日记</Link>
+        </li>
+        <li>
+          <Link href="#">呐喊</Link>
+        </li>
+        <li>
+          <Link href="#">彷徨</Link>
+        </li>
+      </ul>
+    </Paragraph>
+  </Typography>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorSuccess'],
+  key: 'default',
+};
+
+export default componentDemo;