@nocobase/plugin-theme-editor 0.11.1-alpha.5 → 0.12.0-alpha.2

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

@@ -1,50 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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;

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

@@ -1,99 +0,0 @@
-import { Divider, Typography } from 'antd';
-import React from 'react';
-
-const { Title, Paragraph, Text, Link } = Typography;
-const blockContent = `AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。`;
-export default () => (
-  <Typography>
-    <Title>Introduction</Title>{' '}
-    <Paragraph>
-      {' '}
-      In the process of internal desktop applications development, many different design specs and implementations would
-      be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of
-      development.{' '}
-    </Paragraph>{' '}
-    <Paragraph>
-      {' '}
-      After massive project practice and summaries, Ant Design, a design language for background applications, is
-      refined by Ant UED Team, which aims to{' '}
-      <Text strong>
-        {' '}
-        uniform the user interface specs for internal background projects, lower the unnecessary cost of design
-        differences and implementation and liberate the resources of design and front-end development{' '}
-      </Text>{' '}
-      .{' '}
-    </Paragraph>{' '}
-    <Title level={2}>Guidelines and Resources</Title>{' '}
-    <Paragraph>
-      {' '}
-      We supply a series of design principles, practical patterns and high quality design resources (
-      <Text code>Sketch</Text> and <Text code>Axure</Text>), to help people create their product prototypes beautifully
-      and efficiently.{' '}
-    </Paragraph>{' '}
-    <Paragraph>
-      {' '}
-      <ul>
-        {' '}
-        <li>
-          {' '}
-          <Link href="/docs/spec/proximity">Principles</Link>{' '}
-        </li>{' '}
-        <li>
-          {' '}
-          <Link href="/docs/spec/overview">Patterns</Link>{' '}
-        </li>{' '}
-        <li>
-          {' '}
-          <Link href="/docs/resources">Resource Download</Link>{' '}
-        </li>{' '}
-      </ul>{' '}
-    </Paragraph>{' '}
-    <Paragraph>
-      {' '}
-      Press <Text keyboard>Esc</Text> to exit...{' '}
-    </Paragraph>{' '}
-    <Divider /> <Title>介绍</Title>{' '}
-    <Paragraph>
-      {' '}
-      蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。{' '}
-    </Paragraph>{' '}
-    <Paragraph>
-      {' '}
-      随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系
-      Ant Design。基于<Text mark>『确定』和『自然』</Text>{' '}
-      的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于 <Text strong>更好的用户体验</Text>。{' '}
-    </Paragraph>{' '}
-    <Title level={2}>设计资源</Title>{' '}
-    <Paragraph>
-      {' '}
-      我们提供完善的设计原则、最佳实践和设计资源文件（<Text code>Sketch</Text> 和 <Text code>Axure</Text>
-      ），来帮助业务快速设计出高质量的产品原型。{' '}
-    </Paragraph>{' '}
-    <Paragraph>
-      {' '}
-      <ul>
-        {' '}
-        <li>
-          {' '}
-          <Link href="/docs/spec/proximity-cn">设计原则</Link>{' '}
-        </li>{' '}
-        <li>
-          {' '}
-          <Link href="/docs/spec/overview-cn">设计模式</Link>{' '}
-        </li>{' '}
-        <li>
-          {' '}
-          <Link href="/docs/resources-cn">设计资源</Link>{' '}
-        </li>{' '}
-      </ul>{' '}
-    </Paragraph>{' '}
-    <Paragraph>
-      {' '}
-      <blockquote>{blockContent}</blockquote> <pre>{blockContent}</pre>{' '}
-    </Paragraph>{' '}
-    <Paragraph>
-      {' '}
-      按<Text keyboard>Esc</Text>键退出阅读……{' '}
-    </Paragraph>{' '}
-  </Typography>
-);

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

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

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

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

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

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

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

@@ -1,30 +0,0 @@
-import { PlusOutlined } from '@ant-design/icons';
-import { Upload } from 'antd';
-import React from 'react';
-
-import type { ComponentDemo } from '../../interface';
-
-const Demo = () => (
-  <div>
-    <Upload
-      name="avatar"
-      listType="picture-card"
-      className="avatar-uploader"
-      showUploadList={false}
-      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-    >
-      <div>
-        <PlusOutlined />
-        <div style={{ marginTop: 8 }}>Upload</div>
-      </div>
-    </Upload>
-  </div>
-);
-
-const componentDemo: ComponentDemo = {
-  demo: <Demo />,
-  tokens: ['colorFillAlter'],
-  key: 'avatar',
-};
-
-export default componentDemo;

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

@@ -1,44 +0,0 @@
-import { UploadOutlined } from '@ant-design/icons';
-import { Button, Upload } from 'antd';
-import React from 'react';
-
-import type { ComponentDemo } from '../../interface';
-
-const Demo = () => (
-  <div>
-    <Upload
-      defaultFileList={[
-        {
-          uid: '3',
-          name: 'zzz.png',
-          status: 'error',
-          response: 'Server Error 500',
-          url: 'http://www.baidu.com/zzz.png',
-        },
-      ]}
-    >
-      <Button icon={<UploadOutlined />}>Upload</Button>
-    </Upload>
-    <Upload
-      listType={'picture'}
-      defaultFileList={[
-        {
-          uid: '3',
-          name: 'zzz.png',
-          status: 'error',
-          response: 'Server Error 500',
-        },
-      ]}
-    >
-      <Button icon={<UploadOutlined />}>Upload</Button>
-    </Upload>
-  </div>
-);
-
-const componentDemo: ComponentDemo = {
-  demo: <Demo />,
-  tokens: ['colorError', 'colorErrorBg'],
-  key: 'danger',
-};
-
-export default componentDemo;

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

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

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

@@ -1,32 +0,0 @@
-import { UploadOutlined } from '@ant-design/icons';
-import type { UploadProps } from 'antd';
-import { Button, Upload, message } from 'antd';
-import React from 'react';
-
-import type { ComponentDemo } from '../../interface';
-
-const props: UploadProps = {
-  name: 'file',
-  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
-  headers: { authorization: 'authorization-text' },
-  onChange(info) {
-    if (info.file.status === 'done') {
-      message.success(`${info.file.name} file uploaded successfully`);
-    } else if (info.file.status === 'error') {
-      message.error(`${info.file.name} file upload failed.`);
-    }
-  },
-};
-const Demo = () => (
-  <Upload {...props}>
-    <Button icon={<UploadOutlined />}>Click to Upload</Button>
-  </Upload>
-);
-
-const componentDemo: ComponentDemo = {
-  demo: <Demo />,
-  tokens: ['colorPrimary', 'colorPrimaryHover', 'colorPrimaryActive'],
-  key: 'upload',
-};
-
-export default componentDemo;

package/src/client/antd-token-previewer/component-panel/ComponentCard.tsx

@@ -1,80 +0,0 @@
-import type { CardProps } from 'antd';
-import { Card } from 'antd';
-import classNames from 'classnames';
-import type { FC, PropsWithChildren } from 'react';
-import React, { useState } from 'react';
-import { Control } from '../icons';
-import type { MutableTheme, TokenName } from '../interface';
-import makeStyle from '../utils/makeStyle';
-import ComponentTokenDrawer from './ComponentTokenDrawer';
-
-const useStyle = makeStyle('ComponentCard', (token) => ({
-  [`${token.rootCls}-card.component-card`]: {
-    borderRadius: 6,
-    boxShadow: `0 1px 2px 0 rgba(25,15,15,0.07)`,
-
-    [`${token.rootCls}-card-head`]: {
-      paddingInline: 18,
-
-      [`${token.rootCls}-card-head-title`]: {
-        paddingBlock: token.paddingSM,
-        fontSize: token.fontSize,
-      },
-    },
-
-    [`${token.rootCls}-card-body`]: {
-      padding: 18,
-      overflow: 'auto',
-    },
-
-    '.component-token-control-icon': {
-      color: token.colorIcon,
-      transition: `color ${token.motionDurationMid}`,
-      fontSize: token.fontSizeLG,
-      cursor: 'pointer',
-
-      '&:hover': {
-        color: token.colorIconHover,
-      },
-    },
-  },
-}));
-
-export const getComponentDemoId = (component: string) => `antd-token-previewer-${component}`;
-
-export type ComponentCardProps = PropsWithChildren<{
-  title: CardProps['title'];
-  component?: string;
-  onTokenClick?: (token: TokenName) => void;
-  drawer?: boolean;
-  theme?: MutableTheme;
-}>;
-
-const ComponentCard: FC<ComponentCardProps> = ({ children, component, title, theme, drawer }) => {
-  const [wrapSSR, hashId] = useStyle();
-  const [drawerOpen, setDrawerOpen] = useState(false);
-
-  return wrapSSR(
-    <>
-      <Card
-        className={classNames('component-card', hashId)}
-        title={title}
-        extra={
-          drawer && theme && <Control className="component-token-control-icon" onClick={() => setDrawerOpen(true)} />
-        }
-      >
-        {children}
-      </Card>
-      {drawer && theme && (
-        <ComponentTokenDrawer
-          visible={drawerOpen}
-          theme={theme}
-          component={component}
-          onClose={() => setDrawerOpen(false)}
-        />
-      )}
-    </>,
-  );
-};
-
-export default ComponentCard;