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

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

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

@@ -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={'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

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

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

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

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

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

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

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

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

@@ -0,0 +1,191 @@
+import { ConfigProvider, Tooltip } from 'antd';
+import classNames from 'classnames';
+import type { FC } from 'react';
+import React from 'react';
+import ComponentDemos from '../component-demos';
+import type { ComponentDemo, MutableTheme, TokenName } from '../interface';
+import { useLocale } from '../locale';
+import makeStyle from '../utils/makeStyle';
+import ComponentCard, { getComponentDemoId } from './ComponentCard';
+
+const useStyle = makeStyle('ComponentDemoGroup', (token) => ({
+  '.previewer-component-demo-group': {
+    display: 'flex',
+    width: '100%',
+    overflow: 'hidden',
+
+    '&:first-child': {
+      '.previewer-component-demo-group-item': {
+        paddingTop: token.padding,
+      },
+    },
+
+    '&:last-child': {
+      '.previewer-component-demo-group-item': {
+        paddingBottom: token.padding,
+      },
+    },
+  },
+}));
+
+const useDemoStyle = makeStyle('ComponentDemoBlock', (token) => ({
+  '.previewer-component-demo-group-item': {
+    flex: '1 1 50%',
+    paddingInline: token.padding,
+    paddingBlock: token.padding / 2,
+    width: 0,
+    backgroundColor: token.colorBgLayout,
+
+    '.previewer-component-demo-group-item-relative-token': {
+      color: token.colorTextSecondary,
+      paddingBottom: 8,
+
+      '&:not(:first-child)': {
+        marginTop: 12,
+      },
+    },
+  },
+}));
+
+type ComponentDemoBlockProps = {
+  component: string;
+  onTokenClick?: (token: TokenName) => void;
+  size?: 'small' | 'middle' | 'large';
+  disabled?: boolean;
+  demos?: (ComponentDemo & { active?: boolean })[];
+  theme: MutableTheme;
+  componentDrawer?: boolean;
+};
+
+const ComponentDemoBlock: FC<ComponentDemoBlockProps> = ({
+  component,
+  onTokenClick,
+  size = 'middle',
+  disabled = false,
+  demos = [],
+  theme,
+  componentDrawer,
+}) => {
+  const [, hashId] = useDemoStyle();
+  const locale = useLocale();
+
+  return (
+    <div className={classNames('previewer-component-demo-group-item', hashId)}>
+      <ComponentCard
+        title={component}
+        component={component}
+        onTokenClick={onTokenClick}
+        drawer={componentDrawer}
+        theme={theme}
+      >
+        <ConfigProvider componentSize={size} componentDisabled={disabled}>
+          {demos.some((item) => item.active)
+            ? demos.map((demo) => (
+                <div key={demo.key} style={{ display: demo.active ? '' : 'none' }}>
+                  {demo.tokens && (
+                    <div className="previewer-component-demo-group-item-relative-token">
+                      <Tooltip title={demo.tokens.join(', ')}>
+                        <span>
+                          {locale.demo.relatedTokens}: {demo.tokens.slice(0, 2).join(', ')}
+                          {demo.tokens.length > 2 ? '...' : ''}
+                        </span>
+                      </Tooltip>
+                    </div>
+                  )}
+                  {demo.demo}
+                </div>
+              ))
+            : demos[0]?.demo}
+        </ConfigProvider>
+      </ComponentCard>
+    </div>
+  );
+};
+
+type ComponentDemoGroupProps = {
+  themes: MutableTheme[];
+  components: Record<string, string[]>;
+  activeComponents?: string[];
+  size?: 'small' | 'middle' | 'large';
+  disabled?: boolean;
+  selectedTokens?: string[];
+  onTokenClick?: (token: TokenName) => void;
+  componentDrawer?: boolean;
+  hideTokens?: boolean;
+};
+
+const ComponentDemoGroup: FC<ComponentDemoGroupProps> = ({
+  themes,
+  components,
+  size,
+  disabled,
+  activeComponents,
+  selectedTokens,
+  onTokenClick,
+  componentDrawer,
+  hideTokens,
+}) => {
+  const [wrapSSR, hashId] = useStyle();
+
+  return wrapSSR(
+    <>
+      {Object.entries(components)
+        .reduce<string[]>((result, [, group]) => result.concat(group), [])
+        .map((item) => {
+          const componentDemos = ComponentDemos[item];
+          if (!componentDemos) {
+            return null;
+          }
+          const demos: ComponentDemo[] = componentDemos.map((demo, index) => {
+            return {
+              ...demo,
+              tokens: hideTokens ? undefined : demo.tokens,
+              active:
+                ((!selectedTokens || selectedTokens.length === 0) && index === 0) ||
+                selectedTokens?.some((token) => demo.tokens?.includes(token as any)),
+            };
+          });
+
+          return (
+            <div
+              className={classNames('previewer-component-demo-group', hashId)}
+              key={item}
+              id={getComponentDemoId(item)}
+              style={{
+                display:
+                  !activeComponents || activeComponents.length === 0 || activeComponents.includes(item) ? '' : 'none',
+              }}
+            >
+              {themes.length > 1 ? (
+                themes.map((theme) => (
+                  <ConfigProvider key={theme.key} theme={theme.config}>
+                    <ComponentDemoBlock
+                      component={item}
+                      onTokenClick={onTokenClick}
+                      demos={demos}
+                      disabled={disabled}
+                      size={size}
+                      theme={theme}
+                      componentDrawer={componentDrawer}
+                    />
+                  </ConfigProvider>
+                ))
+              ) : (
+                <ComponentDemoBlock
+                  component={item}
+                  onTokenClick={onTokenClick}
+                  demos={demos}
+                  disabled={disabled}
+                  size={size}
+                  theme={themes[0]}
+                  componentDrawer={componentDrawer}
+                />
+              )}
+            </div>
+          );
+        })}
+    </>,
+  );
+};
+
+export default ComponentDemoGroup;