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

package/src/client/antd-token-previewer/TokenInput.tsx

@@ -1,225 +0,0 @@
-import { Button, Dropdown, Input, InputNumber } from 'antd';
-import classNames from 'classnames';
-import type { FC } from 'react';
-import React, { useEffect, useRef, useState } from 'react';
-import { useDebouncyFn } from 'use-debouncy';
-import ColorPanel from './ColorPanel';
-import ColorPreview from './ColorPreview';
-import type { MutableTheme } from './interface';
-import { useLocale } from './locale';
-import isColor from './utils/isColor';
-import makeStyle from './utils/makeStyle';
-
-const useStyle = makeStyle('TokenInput', (token) => ({
-  '.previewer-token-input': {
-    [`${token.rootCls}-input-group-addon, ${token.rootCls}-input-number-group-addon`]: {
-      border: '0 !important',
-      color: `rgba(0, 0, 0, 0.25) !important`,
-      fontSize: `${token.fontSizeSM}px !important`,
-      padding: '0 !important',
-      backgroundColor: 'transparent !important',
-
-      '&:first-child': {
-        paddingInlineStart: 0,
-      },
-
-      '&:last-child': {
-        paddingInlineEnd: 0,
-      },
-    },
-
-    [`${token.rootCls}-input-group-wrapper, ${token.rootCls}-input-number-group-wrapper`]: {
-      padding: 0,
-      height: 24,
-      width: '100%',
-
-      input: {
-        fontSize: token.fontSizeSM,
-        lineHeight: token.lineHeightSM,
-        padding: `2px ${token.paddingXS}px`,
-        height: 24,
-      },
-    },
-
-    [`${token.rootCls}-input-group-wrapper ${token.rootCls}-input, ${token.rootCls}-input-number-group-wrapper ${token.rootCls}-input-number`]:
-      {
-        background: 'white',
-        borderRadius: `${token.borderRadiusLG}px !important`,
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
-      },
-
-    '&&-light': {
-      [`${token.rootCls}-input-group-addon, ${token.rootCls}-input-number-group-addon`]: {
-        backgroundColor: token.colorBgContainer,
-      },
-
-      [`${token.rootCls}-input-group-wrapper ${token.rootCls}-input,
-        ${token.rootCls}-input-number-group-wrapper ${token.rootCls}-input-number-input`]: {
-        background: token.colorFillAlter,
-      },
-    },
-
-    '&&-readonly': {
-      input: {
-        cursor: 'text',
-        color: token.colorText,
-      },
-    },
-  },
-}));
-
-type TokenInputProps = {
-  theme?: MutableTheme;
-  value?: string | number;
-  onChange?: (value: string | number) => void;
-  light?: boolean;
-  readonly?: boolean;
-  onReset?: () => void;
-  canReset?: boolean;
-  hideTheme?: boolean;
-};
-
-const TokenInput: FC<TokenInputProps> = ({
-  value,
-  theme,
-  onChange,
-  light,
-  readonly,
-  onReset,
-  canReset: customCanReset,
-  hideTheme,
-}) => {
-  const valueRef = useRef<number | string>(value || '');
-  const [tokenValue, setTokenValue] = useState<string | number>(value || '');
-  const canReset = customCanReset ?? valueRef.current !== tokenValue;
-  const locale = useLocale();
-
-  const [wrapSSR, hashId] = useStyle();
-
-  useEffect(() => {
-    if (value !== undefined) {
-      setTokenValue(value);
-    }
-  }, [value]);
-
-  const debouncedOnChange = useDebouncyFn((newValue: number | string) => {
-    onChange?.(newValue);
-  }, 500);
-
-  const handleTokenChange = (newValue: number | string) => {
-    if (!readonly) {
-      setTokenValue(newValue);
-      debouncedOnChange(newValue);
-    }
-  };
-
-  const handleReset = () => {
-    if (onReset) {
-      onReset();
-    } else {
-      handleTokenChange(valueRef.current);
-    }
-  };
-
-  const addonAfter = !readonly && (
-    <span
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        minWidth: hideTheme ? '' : 80,
-      }}
-    >
-      {canReset || hideTheme ? (
-        <Button
-          style={{
-            fontSize: 12,
-          }}
-          onClick={handleReset}
-          type="link"
-          size="small"
-          disabled={!canReset}
-        >
-          {locale.reset}
-        </Button>
-      ) : (
-        <span style={{ padding: '0 8px' }}>{theme?.name}</span>
-      )}
-    </span>
-  );
-
-  let inputNode;
-  if (typeof valueRef.current === 'string' && isColor(valueRef.current)) {
-    inputNode = (
-      <Input
-        bordered={false}
-        addonAfter={addonAfter}
-        value={String(tokenValue)}
-        disabled={readonly}
-        addonBefore={
-          <Dropdown
-            trigger={['click']}
-            overlay={
-              <ColorPanel
-                alpha
-                color={String(tokenValue)}
-                onChange={(v: string) => {
-                  handleTokenChange(v);
-                }}
-              />
-            }
-          >
-            <ColorPreview
-              color={String(tokenValue)}
-              dark={theme?.key === 'dark'}
-              style={{
-                cursor: 'pointer',
-                marginInlineEnd: 8,
-                verticalAlign: 'top',
-              }}
-            />
-          </Dropdown>
-        }
-        onChange={(e) => {
-          handleTokenChange(e.target.value);
-        }}
-      />
-    );
-  } else if (typeof valueRef.current === 'number') {
-    inputNode = (
-      <InputNumber
-        addonAfter={addonAfter}
-        bordered={false}
-        value={tokenValue}
-        disabled={readonly}
-        onChange={(newValue) => {
-          handleTokenChange(Number(newValue));
-        }}
-      />
-    );
-  } else {
-    inputNode = (
-      <Input
-        addonAfter={addonAfter}
-        bordered={false}
-        value={String(tokenValue)}
-        disabled={readonly}
-        onChange={(e) => {
-          handleTokenChange(typeof value === 'number' ? Number(e.target.value) : e.target.value);
-        }}
-      />
-    );
-  }
-  return wrapSSR(
-    <div
-      className={classNames('previewer-token-input', hashId, {
-        'previewer-token-input-light': light,
-        'previewer-token-input-readonly': readonly,
-      })}
-    >
-      {inputNode}
-    </div>,
-  );
-};
-
-export default TokenInput;

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

@@ -1,20 +0,0 @@
-import { Alert, Space } from 'antd';
-import React from 'react';
-import type { ComponentDemo } from '../../interface';
-
-const Demo = () => (
-  <Space direction={'vertical'}>
-    <Alert message="Success Tips" type="success" showIcon />
-    <Alert message="Informational Notes" type="info" showIcon />
-    <Alert message="Warning" type="warning" showIcon closable />
-    <Alert message="Error" type="error" showIcon />
-  </Space>
-);
-
-const componentDemo: ComponentDemo = {
-  demo: <Demo />,
-  tokens: ['colorIconHover', 'colorIcon', 'colorText'],
-  key: 'alert',
-};
-
-export default componentDemo;

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

@@ -1,19 +0,0 @@
-import { Alert, Space } from 'antd';
-import React from 'react';
-import type { ComponentDemo } from '../../interface';
-
-const Demo = () => (
-  <Space direction={'vertical'}>
-    <Alert message="Error" type="error" showIcon />
-
-    <Alert message="Error" description="This is an error message about copywriting." type="error" showIcon />
-  </Space>
-);
-
-const componentDemo: ComponentDemo = {
-  demo: <Demo />,
-  tokens: ['colorErrorBg', 'colorErrorBorder', 'colorError'],
-  key: 'error',
-};
-
-export default componentDemo;

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

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

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

@@ -1,23 +0,0 @@
-import { Alert, Space } from 'antd';
-import React from 'react';
-import type { ComponentDemo } from '../../interface';
-
-const Demo = () => (
-  <Space direction={'vertical'}>
-    <Alert message="Informational Notes" type="info" showIcon />
-    <Alert
-      message="Informational Notes"
-      description="Additional description and information about copywriting."
-      type="info"
-      showIcon
-    />
-  </Space>
-);
-
-const componentDemo: ComponentDemo = {
-  demo: <Demo />,
-  tokens: ['colorInfo', 'colorInfoBorder', 'colorInfoBg'],
-  key: 'info',
-};
-
-export default componentDemo;

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

@@ -1,23 +0,0 @@
-import { Alert, Space } from 'antd';
-import React from 'react';
-import type { ComponentDemo } from '../../interface';
-
-const Demo = () => (
-  <Space direction={'vertical'}>
-    <Alert message="Success Tips" type="success" showIcon />
-    <Alert
-      message="Success Tips"
-      description="Detailed description and advice about successful copywriting."
-      type="success"
-      showIcon
-    />
-  </Space>
-);
-
-const componentDemo: ComponentDemo = {
-  demo: <Demo />,
-  tokens: ['colorSuccess', 'colorSuccessBorder', 'colorSuccessBg'],
-  key: 'success',
-};
-
-export default componentDemo;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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