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

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

@@ -0,0 +1,155 @@
+import type { DerivativeFunc } from '@ant-design/cssinjs';
+import classNames from 'classnames';
+import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
+import { antdComponents } from './component-panel';
+import useControlledTheme from './hooks/useControlledTheme';
+import type { SelectedToken, Theme } from './interface';
+import type { Locale } from './locale';
+import { LocaleContext, zhCN } from './locale';
+import { mapRelatedAlias, seedRelatedAlias, seedRelatedMap } from './meta/TokenRelation';
+import type { TokenPanelProProps } from './token-panel-pro';
+import TokenPanelPro from './token-panel-pro';
+import ComponentDemoPro from './token-panel-pro/ComponentDemoPro';
+import makeStyle from './utils/makeStyle';
+import { getRelatedComponents } from './utils/statistic';
+
+const useStyle = makeStyle('ThemeEditor', (token) => ({
+  '.antd-theme-editor': {
+    backgroundColor: token.colorBgLayout,
+    display: 'flex',
+  },
+}));
+
+const defaultTheme: Theme = {
+  name: '默认主题',
+  key: 'default',
+  config: {},
+};
+
+export type ThemeEditorRef = {
+  updateRef: () => void;
+};
+
+export type ThemeEditorProps = {
+  /**
+   * @deprecated
+   * @default true
+   */
+  simple?: boolean;
+  theme?: Theme;
+  onThemeChange?: (theme: Theme) => void;
+  className?: string;
+  style?: React.CSSProperties;
+  darkAlgorithm?: DerivativeFunc<any, any>;
+  locale?: Locale;
+};
+
+const ThemeEditor = forwardRef<ThemeEditorRef, ThemeEditorProps>(
+  ({ theme: customTheme, onThemeChange, className, style, darkAlgorithm, locale = zhCN }, ref) => {
+    const [wrapSSR, hashId] = useStyle();
+    const [selectedTokens, setSelectedTokens] = useState<SelectedToken>({
+      seed: ['colorPrimary'],
+    });
+    const [aliasOpen, setAliasOpen] = useState<boolean>(false);
+
+    const { theme, infoFollowPrimary, onInfoFollowPrimaryChange, updateRef } = useControlledTheme({
+      theme: customTheme,
+      defaultTheme,
+      onChange: onThemeChange,
+      darkAlgorithm,
+    });
+
+    useImperativeHandle(ref, () => ({
+      updateRef,
+    }));
+
+    const handleTokenSelect: TokenPanelProProps['onTokenSelect'] = (token, type) => {
+      setSelectedTokens((prev) => {
+        const tokens = typeof token === 'string' ? (token ? [token] : []) : token;
+        if (type === 'seed') {
+          return {
+            seed: tokens,
+          };
+        }
+
+        let newSelectedTokens = { ...prev };
+        tokens.forEach((newToken) => {
+          newSelectedTokens = {
+            ...prev,
+            [type]: prev[type]?.includes(newToken)
+              ? prev[type]?.filter((t) => t !== newToken)
+              : [...(prev[type] ?? []), newToken],
+          };
+        });
+        if (type === 'map') {
+          delete newSelectedTokens.alias;
+        }
+        return newSelectedTokens;
+      });
+    };
+
+    const computedSelectedTokens = useMemo(() => {
+      if (selectedTokens.seed?.length && !selectedTokens.map?.length && !selectedTokens.alias?.length) {
+        return [
+          ...selectedTokens.seed,
+          ...((seedRelatedMap as any)[selectedTokens.seed[0]] ?? []),
+          ...((seedRelatedAlias as any)[selectedTokens.seed[0]] ?? []),
+        ];
+      }
+      if (selectedTokens.map?.length && !selectedTokens.alias?.length) {
+        return [
+          ...selectedTokens.map,
+          ...selectedTokens.map.reduce((result, item) => {
+            return result.concat((mapRelatedAlias as any)[item]);
+          }, []),
+        ];
+      }
+      if (selectedTokens.alias?.length) {
+        return [...selectedTokens.alias];
+      }
+      return [];
+    }, [selectedTokens]);
+
+    const relatedComponents = useMemo(() => {
+      return computedSelectedTokens ? getRelatedComponents(computedSelectedTokens) : [];
+    }, [computedSelectedTokens]);
+
+    return wrapSSR(
+      <LocaleContext.Provider value={locale}>
+        <div className={classNames(hashId, 'antd-theme-editor', className)} style={style}>
+          <div
+            style={{
+              flex: aliasOpen ? '0 0 860px' : `0 0 ${860 - 320}px`,
+              height: '100%',
+              backgroundColor: '#F7F8FA',
+              backgroundImage: 'linear-gradient(180deg, #FFFFFF 0%, rgba(246,247,249,0.00) 100%)',
+              display: 'flex',
+              transition: 'all 0.3s',
+            }}
+          >
+            <TokenPanelPro
+              aliasOpen={aliasOpen}
+              onAliasOpenChange={(open) => setAliasOpen(open)}
+              theme={theme}
+              style={{ flex: 1 }}
+              selectedTokens={selectedTokens}
+              onTokenSelect={handleTokenSelect}
+              infoFollowPrimary={infoFollowPrimary}
+              onInfoFollowPrimaryChange={onInfoFollowPrimaryChange}
+            />
+          </div>
+          <ComponentDemoPro
+            theme={theme}
+            components={antdComponents}
+            activeComponents={relatedComponents}
+            selectedTokens={computedSelectedTokens}
+            style={{ flex: 1, overflow: 'auto', height: '100%' }}
+            componentDrawer
+          />
+        </div>
+      </LocaleContext.Provider>,
+    );
+  },
+);
+
+export default ThemeEditor;

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

@@ -0,0 +1,212 @@
+import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button, Dropdown, Menu } from 'antd';
+import classNames from 'classnames';
+import type { FC, ReactNode } from 'react';
+import React, { useMemo } from 'react';
+import type { Theme } from './interface';
+import makeStyle from './utils/makeStyle';
+
+interface ThemeItem extends Theme {
+  icon?: ReactNode;
+  closable?: boolean;
+  fixed?: boolean;
+}
+
+export type ThemeSelectProps = {
+  onEnabledThemeChange: (themes: string[]) => void;
+  onShownThemeChange: (themes: string[], selectTheme: string, info: { type: 'select' | 'deselect' }) => void;
+  enabledThemes: string[];
+  shownThemes: string[];
+  themes: ThemeItem[];
+  showAddTheme?: boolean;
+};
+
+const useStyle = makeStyle('ThemeSelect', (token) => ({
+  '.previewer-theme-select': {
+    padding: `${token.paddingXXS}px ${token.paddingXS}px`,
+    borderRadius: 4,
+    backgroundColor: 'rgba(0, 0, 0, 0.02)',
+    height: token.controlHeight,
+    display: 'flex',
+    alignItems: 'center',
+    overflow: 'hidden',
+
+    [`${token.rootCls}-btn.previewer-theme-select-add-btn`]: {
+      minWidth: 0,
+      width: 16,
+      height: 16,
+      fontSize: 8,
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginInlineStart: token.marginSM,
+      boxShadow: 'none',
+    },
+
+    '.previewer-theme-select-tag': {
+      height: 22,
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      boxSizing: 'border-box',
+      borderRadius: 4,
+      backgroundColor: token.colorBgContainer,
+      border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
+      paddingInline: 10,
+      fontSize: token.fontSizeSM,
+      position: 'relative',
+      cursor: 'pointer',
+      // transition: `all ${token.motionDurationMid}`,
+
+      '&:not(:last-child)': {
+        marginInlineEnd: token.marginXS,
+      },
+
+      '&.previewer-theme-select-tag-active': {
+        border: `${token.lineWidth}px ${token.lineType} ${token['blue-1']}`,
+        backgroundColor: 'rgba(22,119,255,0.10)',
+        color: token.colorPrimary,
+
+        '&::after': {
+          content: '""',
+          borderStartEndRadius: 2,
+          position: 'absolute',
+          insetInlineEnd: 2,
+          top: 2,
+          width: 6,
+          height: 6,
+          background: `linear-gradient(to right top, transparent, transparent 50%, ${token.colorPrimary} 50%, ${token.colorPrimary} 100%)`,
+        },
+      },
+
+      '.previewer-theme-select-tag-close-btn': {
+        position: 'absolute',
+        top: -2,
+        insetInlineEnd: -2,
+        width: 12,
+        height: 12,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: token.colorBgContainer,
+        boxShadow: '0 2px 8px -2px rgba(0,0,0,0.05), 0 1px 4px -1px rgba(25,15,15,0.07), 0 0 1px 0 rgba(0,0,0,0.08)',
+        borderRadius: '50%',
+        opacity: 0,
+        pointerEvents: 'none',
+        zIndex: 2,
+        color: token.colorIcon,
+
+        '> .anticon': {
+          fontSize: 6,
+        },
+      },
+
+      '&:hover': {
+        '.previewer-theme-select-tag-close-btn': {
+          opacity: 1,
+          pointerEvents: 'initial',
+        },
+      },
+    },
+  },
+
+  '.previewer-theme-select-dropdown': {
+    '.previewer-theme-select-dropdown-title': {
+      [`${token.rootCls}-dropdown-menu-item-group-title`]: {
+        fontSize: token.fontSizeSM,
+        paddingBottom: token.padding,
+        paddingTop: 10,
+      },
+    },
+  },
+}));
+
+const ThemeSelect: FC<ThemeSelectProps> = (props) => {
+  const { onEnabledThemeChange, onShownThemeChange, enabledThemes, shownThemes, themes, showAddTheme } = props;
+
+  const [wrapSSR, hashId] = useStyle();
+
+  const dropdownItems = useMemo(
+    () => [
+      {
+        disabled: true,
+        label: '添加主题即可预览',
+        className: 'previewer-theme-select-dropdown-title',
+        type: 'group',
+        key: 'add-theme-to-preview',
+      },
+      ...themes
+        .filter((theme) => !shownThemes.includes(theme.key))
+        .map((theme) => ({
+          icon: theme.icon,
+          value: theme.key,
+          label: theme.name,
+          key: theme.key,
+          onClick: () => {
+            onShownThemeChange([...shownThemes, theme.key], theme.key, {
+              type: 'select',
+            });
+          },
+        })),
+    ],
+    [themes, shownThemes, onShownThemeChange],
+  );
+
+  const shownThemeEntities = useMemo(
+    () => themes.filter((theme) => shownThemes.includes(theme.key)),
+    [themes, shownThemes],
+  );
+
+  return wrapSSR(
+    <div className={classNames('previewer-theme-select', hashId)}>
+      {shownThemeEntities.map((theme) => (
+        <span
+          onClick={() => {
+            if (theme.fixed) {
+              return;
+            }
+            onEnabledThemeChange(
+              enabledThemes.includes(theme.key)
+                ? enabledThemes.filter((item) => item !== theme.key)
+                : [...enabledThemes, theme.key],
+            );
+          }}
+          key={theme.key}
+          className={classNames('previewer-theme-select-tag', {
+            'previewer-theme-select-tag-active': enabledThemes.includes(theme.key),
+          })}
+        >
+          {theme.name}
+          {theme.closable && (
+            <span
+              className="previewer-theme-select-tag-close-btn"
+              onClick={(e) => {
+                e.stopPropagation();
+                onEnabledThemeChange(enabledThemes.filter((item) => item !== theme.key));
+                onShownThemeChange(
+                  shownThemes.filter((item) => item !== theme.key),
+                  theme.key,
+                  { type: 'deselect' },
+                );
+              }}
+            >
+              <CloseOutlined />
+            </span>
+          )}
+        </span>
+      ))}
+      {showAddTheme && (
+        <Dropdown
+          placement="bottomRight"
+          trigger={['click']}
+          overlay={<Menu items={dropdownItems} />}
+          overlayClassName={classNames('previewer-theme-select-dropdown', hashId)}
+        >
+          <Button type="primary" shape="circle" className="previewer-theme-select-add-btn" icon={<PlusOutlined />} />
+        </Dropdown>
+      )}
+    </div>,
+  );
+};
+
+export default ThemeSelect;

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

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

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

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

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

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

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