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

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

@@ -0,0 +1,24 @@
+import { Alert, Space } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <Space direction={'vertical'}>
+    <Alert message="Warning" type="warning" showIcon closable />
+    <Alert
+      message="Warning"
+      description="This is a warning notice about copywriting."
+      type="warning"
+      showIcon
+      closable
+    />
+  </Space>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorWarning', 'colorWarningBorder', 'colorWarningBg'],
+  key: 'warning',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,27 @@
+import { Anchor } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const { Link } = Anchor;
+const Demo = () => {
+  return (
+    <div style={{ padding: 12 }}>
+      <Anchor>
+        <Link href="#" title="Basic demo" />
+        <Link href="#components-anchor-demo-static" title="Static demo" />
+        <Link href="#API" title="API">
+          <Link href="#Anchor-Props" title="Anchor Props" />
+          <Link href="#Link-Props" title="Link Props" />
+        </Link>
+      </Anchor>
+    </div>
+  );
+};
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorPrimary', 'colorSplit', 'colorBgContainer'],
+  key: 'anchor',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,29 @@
+import { Anchor, theme } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const { Link } = Anchor;
+const Demo = () => {
+  const { token } = theme.useToken();
+
+  return (
+    <div style={{ background: token.colorBorderSecondary, padding: 12 }}>
+      <Anchor>
+        <Link href="#components-anchor-demo-basic" title="Basic demo" />
+        <Link href="#components-anchor-demo-static" title="Static demo" />
+        <Link href="#API" title="API">
+          <Link href="#Anchor-Props" title="Anchor Props" />
+          <Link href="#Link-Props" title="Link Props" />
+        </Link>
+      </Anchor>
+    </div>
+  );
+};
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorSplit'],
+  key: 'anchorInLayout',
+};
+
+export default componentDemo;

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

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

package/src/client/antd-token-previewer/component-demos/autoComplete/auto-complete.tsx

@@ -0,0 +1,52 @@
+import { AutoComplete } from 'antd';
+import React, { useState } from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const mockVal = (str: string, repeat = 1) => ({
+  value: str.repeat(repeat),
+});
+const Complete: React.FC = () => {
+  const [value, setValue] = useState('');
+  const [options, setOptions] = useState<{ value: string }[]>([]);
+  const onSearch = (searchText: string) => {
+    setOptions(!searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)]);
+  };
+  const onSelect = (data: string) => {
+    // eslint-disable-next-line no-console
+    console.log('onSelect', data);
+  };
+  const onChange = (data: string) => {
+    setValue(data);
+  };
+  return (
+    <>
+      {' '}
+      <AutoComplete
+        options={options}
+        style={{ width: 200 }}
+        onSelect={onSelect}
+        onSearch={onSearch}
+        placeholder="input here"
+      />{' '}
+      <br /> <br />{' '}
+      <AutoComplete
+        value={value}
+        options={options}
+        style={{ width: 200 }}
+        onSelect={onSelect}
+        onSearch={onSearch}
+        onChange={onChange}
+        placeholder="control mode"
+      />{' '}
+    </>
+  );
+};
+const Demo = () => <Complete />;
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: [],
+  key: 'autoComplete',
+};
+
+export default componentDemo;

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

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

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

@@ -0,0 +1,20 @@
+import { UserOutlined } from '@ant-design/icons';
+import { Avatar, Space } from 'antd';
+import React from 'react';
+
+export default () => (
+  <Space direction="vertical">
+    <Space>
+      <Avatar size={64} icon={<UserOutlined />} />
+      <Avatar size="large" icon={<UserOutlined />} />
+      <Avatar icon={<UserOutlined />} />
+      <Avatar size="small" icon={<UserOutlined />} />
+    </Space>
+    <Space>
+      <Avatar shape="square" size={64} icon={<UserOutlined />} />
+      <Avatar shape="square" size="large" icon={<UserOutlined />} />
+      <Avatar shape="square" icon={<UserOutlined />} />
+      <Avatar shape="square" size="small" icon={<UserOutlined />} />
+    </Space>
+  </Space>
+);

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

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import Default from './avatar';
+// import Progress from './progress';
+
+import type { ComponentDemo } from '../../interface';
+
+const previewerDemo: ComponentDemo[] = [
+  {
+    demo: <Default />,
+    key: 'default',
+  },
+];
+
+export default previewerDemo;

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

@@ -0,0 +1,29 @@
+import { ClockCircleFilled } from '@ant-design/icons';
+import { Avatar, Badge, Space, theme } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => {
+  const { token } = theme.useToken();
+  return (
+    <Space size="large">
+      <Badge count={5}>
+        <Avatar shape="square" size="large" />
+      </Badge>
+      <Badge count={0} showZero>
+        <Avatar shape="square" size="large" />
+      </Badge>
+      <Badge count={<ClockCircleFilled style={{ color: token.colorError }} />}>
+        <Avatar shape="square" size="large" />
+      </Badge>
+    </Space>
+  );
+};
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorError', 'colorBorderBg', 'colorBgContainer'],
+  key: 'badge',
+};
+
+export default componentDemo;

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

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

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

@@ -0,0 +1,18 @@
+import { Badge, Space } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <Space size="small">
+    <Badge dot status={'processing'} />
+    Process
+  </Space>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorPrimary'],
+  key: 'progress',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,18 @@
+import { Badge, Space } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <Space size="small">
+    <Badge dot status={'success'} />
+    Success
+  </Space>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorSuccess'],
+  key: 'success',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,18 @@
+import { Badge, Space } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <Space size="small">
+    <Badge dot status={'warning'} />
+    Warning
+  </Space>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorWarning'],
+  key: 'warning',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,24 @@
+import { Breadcrumb } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <Breadcrumb>
+    <Breadcrumb.Item>Home</Breadcrumb.Item>
+    <Breadcrumb.Item>
+      <a href="">Application Center</a>
+    </Breadcrumb.Item>
+    <Breadcrumb.Item>
+      <a href="">Application List</a>
+    </Breadcrumb.Item>
+    <Breadcrumb.Item>An Application</Breadcrumb.Item>
+  </Breadcrumb>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorText', 'colorPrimary', 'colorPrimaryActive', 'colorPrimaryHover'],
+  key: 'breadcrumb',
+};
+
+export default componentDemo;

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

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

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

@@ -0,0 +1,28 @@
+import { SearchOutlined } from '@ant-design/icons';
+import { Button, Space, Tooltip } from 'antd';
+import React from 'react';
+
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <Space>
+    <Button type="primary">Primary Button</Button>
+    <Tooltip title="search">
+      <Button type="primary" shape="circle" icon={<SearchOutlined />} />
+    </Tooltip>
+    <Button type="primary" shape="circle">
+      A
+    </Button>
+    <Button type="primary" ghost icon={<SearchOutlined />}>
+      Search
+    </Button>
+  </Space>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorPrimary'],
+  key: 'button-icon',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,29 @@
+import { Button, Space } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <Space>
+    <Button type="primary">Primary Button</Button>
+    <Button>Default Button</Button>
+    <Button type="dashed">Dashed Button</Button> <br />
+    <Button type="text">Text Button</Button>
+    <Button ghost>Ghost Button</Button>
+    <Button type="link">Link Button</Button>
+  </Space>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: [
+    'colorText',
+    'colorPrimary',
+    'colorPrimaryActive',
+    'colorPrimaryHover',
+    'controlOutline',
+    'controlTmpOutline',
+  ],
+  key: 'button',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,31 @@
+import { Button, Space } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <Space>
+    <Button type="primary" danger>
+      primary
+    </Button>
+    <Button type="default" danger>
+      default
+    </Button>
+    <Button type="text" danger>
+      text
+    </Button>
+    {/*<Button ghost danger>*/}
+    {/*  ghost*/}
+    {/*</Button>*/}
+    <Button type="link" danger>
+      link
+    </Button>
+  </Space>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorError', 'colorErrorActive', 'colorErrorHover', 'colorErrorBorder', 'colorErrorOutline'],
+  key: 'danger',
+};
+
+export default componentDemo;

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

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

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

@@ -0,0 +1,33 @@
+import { Button, Space } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <Space>
+    <Button disabled type="primary">
+      Primary
+    </Button>
+    <Button disabled>Default</Button>
+    <Button disabled type="dashed">
+      Dashed
+    </Button>
+    <br />
+    <Button disabled type="text">
+      Text
+    </Button>
+    <Button disabled ghost>
+      Ghost
+    </Button>
+    <Button disabled type="link">
+      Link
+    </Button>
+  </Space>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorTextDisabled', 'colorBgContainerDisabled'],
+  key: 'disabled',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,11 @@
+import Default from './button';
+import ButtonIconDemo from './button-icon';
+import DangerButton from './dangerButton';
+import DefaultButton from './defaultButton';
+import disabled from './disabled';
+
+import type { ComponentDemo } from '../../interface';
+
+const previewerDemo: ComponentDemo[] = [Default, ButtonIconDemo, DangerButton, DefaultButton, disabled];
+
+export default previewerDemo;

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

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

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

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

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

@@ -0,0 +1,8 @@
+import Default from './calendar';
+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/card/card.tsx

@@ -0,0 +1,30 @@
+import { Card, Space } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <Space>
+    <Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
+      <p>Card content</p> <p>Card content</p> <p>Card content</p>
+    </Card>
+    <Card loading size="small" title="Small size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
+      <p>Card content</p> <p>Card content</p> <p>Card content</p>
+    </Card>
+  </Space>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: [
+    'colorText',
+    'colorTextHeading',
+    'colorTextSecondary',
+    'colorBgContainer',
+    'colorBorderSecondary',
+    'colorPrimary',
+    'colorBgContainer',
+  ],
+  key: 'card',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,31 @@
+import { Card } from 'antd';
+import type { CSSProperties } from 'react';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const gridStyle: CSSProperties = {
+  width: '25%',
+  textAlign: 'center',
+};
+
+const Demo = () => (
+  <Card title="Card Title">
+    <Card.Grid style={gridStyle}>Content</Card.Grid>
+    <Card.Grid hoverable={false} style={gridStyle}>
+      Content
+    </Card.Grid>
+    <Card.Grid style={gridStyle}>Content</Card.Grid>
+    <Card.Grid style={gridStyle}>Content</Card.Grid>
+    <Card.Grid style={gridStyle}>Content</Card.Grid>
+    <Card.Grid style={gridStyle}>Content</Card.Grid>
+    <Card.Grid style={gridStyle}>Content</Card.Grid>
+  </Card>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorBorderSecondary'],
+  key: 'cardGrid',
+};
+
+export default componentDemo;

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

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

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

@@ -0,0 +1,19 @@
+import { Card, Space } from 'antd';
+import React from 'react';
+import type { ComponentDemo } from '../../interface';
+
+const Demo = () => (
+  <Space>
+    <Card type="inner" title="Inner Card title">
+      Inner Card content
+    </Card>
+  </Space>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorFillAlter'],
+  key: 'inner',
+};
+
+export default componentDemo;

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

@@ -0,0 +1,37 @@
+import { Carousel } from 'antd';
+import type { CSSProperties } from 'react';
+import React from 'react';
+
+import type { ComponentDemo } from '../../interface';
+
+const contentStyle = {
+  height: '160px',
+  color: '#fff',
+  lineHeight: '160px',
+  textAlign: 'center',
+  background: '#364d79',
+};
+const Demo = () => (
+  <Carousel>
+    <div>
+      <h3 style={contentStyle as CSSProperties}>1</h3>
+    </div>
+    <div>
+      <h3 style={contentStyle as CSSProperties}>2</h3>
+    </div>
+    <div>
+      <h3 style={contentStyle as CSSProperties}>3</h3>
+    </div>
+    <div>
+      <h3 style={contentStyle as CSSProperties}>4</h3>
+    </div>
+  </Carousel>
+);
+
+const componentDemo: ComponentDemo = {
+  demo: <Demo />,
+  tokens: ['colorText', 'colorBgContainer'],
+  key: 'default',
+};
+
+export default componentDemo;

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

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