@nocobase/plugin-theme-editor 0.11.1-alpha.4 → 0.12.0-alpha.1

package/src/client/antd-token-previewer/utils/classifyToken.ts

@@ -1,85 +0,0 @@
-import type { GlobalToken } from 'antd/es/theme/interface';
-import type { TokenValue } from '../interface';
-
-function defineTokenType<T extends string>(types: T[]) {
-  return types;
-}
-
-export const TOKEN_SORTS = defineTokenType([
-  'seed',
-  'colorCommon',
-  'colorText',
-  'colorBg',
-  'colorFill',
-  'colorSplit',
-  'font',
-  'radius',
-  'space',
-  'screen',
-  'line',
-  'motion',
-  'control',
-  'others',
-]);
-
-export type TokenType = (typeof TOKEN_SORTS)[number];
-
-export function getTypeOfToken(tokenName: string): TokenType {
-  if (tokenName.startsWith('color')) {
-    if (
-      tokenName.startsWith('colorLink') ||
-      tokenName.startsWith('colorText') ||
-      tokenName.startsWith('colorIcon') ||
-      tokenName.startsWith('colorPlaceholder') ||
-      tokenName.startsWith('colorIcon')
-    ) {
-      return 'colorText';
-    }
-    if (tokenName.startsWith('colorBg') || tokenName.startsWith('colorPopupBg')) {
-      return 'colorBg';
-    }
-    if (tokenName.startsWith('colorBorder') || tokenName.startsWith('colorSplit')) {
-      return 'colorSplit';
-    }
-    if (tokenName.startsWith('colorFill')) {
-      return 'colorFill';
-    }
-    return 'colorCommon';
-  }
-  if (tokenName.startsWith('font')) {
-    return 'font';
-  }
-  if (tokenName.startsWith('screen')) {
-    return 'screen';
-  }
-  if (tokenName.startsWith('line')) {
-    return 'line';
-  }
-  if (tokenName.startsWith('motion')) {
-    return 'motion';
-  }
-  if (tokenName.startsWith('borderRadius')) {
-    return 'radius';
-  }
-  if (tokenName.startsWith('control')) {
-    return 'control';
-  }
-  if (tokenName.startsWith('margin') || tokenName.startsWith('padding')) {
-    return 'space';
-  }
-  return 'others';
-}
-
-export const classifyToken = (token: Record<string, TokenValue>): Record<string, string[]> => {
-  const groupedToken: Record<string, string[]> = {};
-  Object.keys(token || {})
-    .sort((a, b) => a.localeCompare(b))
-    .forEach((key) => {
-      const type = getTypeOfToken(key as keyof GlobalToken);
-      if (!groupedToken[type]) {
-        groupedToken[type] = [];
-      }
-      groupedToken[type].push(key);
-    });
-  return groupedToken;
-};

package/src/client/antd-token-previewer/utils/deepUpdateObj.ts

@@ -1,22 +0,0 @@
-const deepUpdateObj = (obj: any, path: string[], value: any): any => {
-  if (path.length === 0) {
-    return obj;
-  }
-  if (path.length === 1) {
-    if (value === null || value === undefined) {
-      const newObj = { ...obj };
-      delete newObj[path[0]];
-      return newObj;
-    }
-    return {
-      ...obj,
-      [path[0]]: value,
-    };
-  }
-  return {
-    ...obj,
-    [path[0]]: deepUpdateObj(obj[path[0]] ?? {}, path.slice(1), value),
-  };
-};
-
-export default deepUpdateObj;

package/src/client/antd-token-previewer/utils/getColorBgImg.ts

@@ -1,7 +0,0 @@
-const getColorBgImg = (dark?: boolean) => {
-  return dark
-    ? 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=)'
-    : 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==)';
-};
-
-export default getColorBgImg;

package/src/client/antd-token-previewer/utils/getDesignToken.ts

@@ -1,19 +0,0 @@
-import type { ThemeConfig } from 'antd/es/config-provider/context';
-import type { GlobalToken, MapToken } from 'antd/es/theme/interface';
-import defaultMap from 'antd/es/theme/themes/default';
-import seed from 'antd/es/theme/themes/seed';
-import formatToken from 'antd/es/theme/util/alias';
-
-export default function getDesignToken(config: ThemeConfig = {}): GlobalToken {
-  const seedToken = { ...seed, ...config.token };
-  const mapFn = config.algorithm ?? defaultMap;
-  const mapToken = Array.isArray(mapFn)
-    ? mapFn.reduce<MapToken>((result, fn) => fn(seedToken, result), undefined as any)
-    : mapFn(seedToken);
-  const mergedMapToken = {
-    ...mapToken,
-    ...config.components,
-    override: config.token ?? {},
-  };
-  return formatToken(mergedMapToken);
-}

package/src/client/antd-token-previewer/utils/getValueByPath.ts

@@ -1,11 +0,0 @@
-export default function getValueByPath(obj: any, path: string[]): any {
-  if (!obj) {
-    return undefined;
-  }
-  return path.reduce((prev, key) => {
-    if (prev) {
-      return prev[key];
-    }
-    return undefined;
-  }, obj);
-}

package/src/client/antd-token-previewer/utils/isColor.ts

@@ -1,3 +0,0 @@
-export default function isColor(str: string) {
-  return str.startsWith('rgb') || str.startsWith('#');
-}

package/src/client/antd-token-previewer/utils/makeStyle.tsx

@@ -1,28 +0,0 @@
-import type { CSSInterpolation } from '@ant-design/cssinjs';
-import { useStyleRegister } from '@ant-design/cssinjs';
-import { ConfigProvider, theme as antdTheme } from 'antd';
-import type { GlobalToken } from 'antd/es/theme/interface';
-import type React from 'react';
-import { useContext } from 'react';
-
-const { ConfigContext } = ConfigProvider;
-
-const makeStyle =
-  (
-    path: string,
-    styleFn: (token: GlobalToken & { rootCls: string }) => CSSInterpolation,
-  ): (() => [(node: React.ReactNode) => React.ReactElement, string]) =>
-  () => {
-    const { theme, token, hashId } = antdTheme.useToken();
-    const { getPrefixCls } = useContext(ConfigContext);
-    const rootCls = getPrefixCls();
-
-    return [
-      useStyleRegister({ theme: theme as any, hashId, token, path: [path] }, () =>
-        styleFn({ ...token, rootCls: `.${rootCls}` }),
-      ) as (node: React.ReactNode) => React.ReactElement,
-      hashId,
-    ];
-  };
-
-export default makeStyle;

package/src/client/antd-token-previewer/utils/statistic.ts

@@ -1,29 +0,0 @@
-import tokenStatistic from 'antd/es/version/token.json';
-
-const tokenRelatedComponents: {
-  [key in string]?: string[];
-} = {};
-
-const getRelatedComponentsSingle = (token: string): string[] => {
-  if (!tokenRelatedComponents[token]) {
-    tokenRelatedComponents[token] = Object.entries(tokenStatistic)
-      .filter(([, tokens]) => {
-        return (tokens.global as string[]).includes(token);
-      })
-      .map(([component]) => component);
-  }
-  return tokenRelatedComponents[token] ?? [];
-};
-
-export const getRelatedComponents = (token: string | string[]): string[] => {
-  const mergedTokens = Array.isArray(token) ? token : [token];
-  return Array.from(
-    new Set(
-      mergedTokens.reduce<string[]>((result, item) => {
-        return result.concat(getRelatedComponentsSingle(item));
-      }, []),
-    ),
-  );
-};
-
-export const getComponentToken = (component: string) => (tokenStatistic as any)[component];

package/src/client/components/InitializeTheme.tsx

@@ -1,80 +0,0 @@
-import { defaultTheme, useAPIClient, useCurrentUserContext, useGlobalTheme, useSystemSettings } from '@nocobase/client';
-import { error } from '@nocobase/utils/client';
-import { Spin } from 'antd';
-import React, { useEffect, useRef } from 'react';
-import { changeAlgorithmFromFunctionToString } from '../utils/changeAlgorithmFromFunctionToString';
-import { changeAlgorithmFromStringToFunction } from '../utils/changeAlgorithmFromStringToFunction';
-import { useThemeListContext } from './ThemeListProvider';
-
-const CurrentThemeIdContext = React.createContext<number>(null);
-
-export const useCurrentThemeId = () => {
-  return React.useContext(CurrentThemeIdContext);
-};
-
-/**
- * 用于在页面加载时初始化主题
- */
-const InitializeTheme: React.FC = ({ children }) => {
-  const systemSettings = useSystemSettings();
-  const currentUser = useCurrentUserContext();
-  const { setTheme } = useGlobalTheme();
-  const { run, data, loading } = useThemeListContext();
-  const themeId = useRef<number>(null);
-  const api = useAPIClient();
-
-  useEffect(() => {
-    const storageTheme = api.auth.getOption('theme');
-    if (storageTheme) {
-      try {
-        setTheme(changeAlgorithmFromStringToFunction(JSON.parse(storageTheme)).config);
-      } catch (err) {
-        error(err);
-      }
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!data) {
-      return run();
-    }
-
-    themeId.current =
-      // 这里不要使用 `===` 操作符
-      currentUser?.data?.data?.systemSettings?.themeId == null
-        ? systemSettings?.data?.data?.options?.themeId
-        : currentUser?.data?.data?.systemSettings?.themeId;
-
-    // 这里不要使用 `!==` 操作符
-    if (themeId.current != null) {
-      const theme = data?.find((item) => item.id === themeId.current);
-      if (theme) {
-        setTheme(theme.config);
-        api.auth.setOption(
-          'theme',
-          JSON.stringify(Object.assign({ ...theme }, { config: changeAlgorithmFromFunctionToString(theme.config) })),
-        );
-      }
-    } else {
-      setTheme(defaultTheme);
-      api.auth.setOption('theme', null);
-    }
-  }, [
-    api.auth,
-    currentUser?.data?.data?.systemSettings?.themeId,
-    data,
-    run,
-    setTheme,
-    systemSettings?.data?.data?.options?.themeId,
-  ]);
-
-  if (loading && !data) {
-    return <Spin />;
-  }
-
-  return <CurrentThemeIdContext.Provider value={themeId.current}>{children}</CurrentThemeIdContext.Provider>;
-};
-
-InitializeTheme.displayName = 'InitializeTheme';
-
-export default InitializeTheme;

package/src/client/components/ThemeCard.tsx

@@ -1,330 +0,0 @@
-import { DeleteOutlined, EditOutlined, EllipsisOutlined } from '@ant-design/icons';
-import {
-  compatOldTheme,
-  useAPIClient,
-  useCurrentUserContext,
-  useGlobalTheme,
-  useSystemSettings,
-  useToken,
-} from '@nocobase/client';
-import { error } from '@nocobase/utils/client';
-import { App, Card, ConfigProvider, Dropdown, Space, Switch, Tag, message } from 'antd';
-import React, { useCallback, useMemo } from 'react';
-import { ThemeConfig, ThemeItem } from '../../types';
-import { Primary } from '../antd-token-previewer';
-import { useUpdateThemeSettings } from '../hooks/useUpdateThemeSettings';
-import { useTranslation } from '../locale';
-import { useCurrentThemeId } from './InitializeTheme';
-import { useThemeEditorContext } from './ThemeEditorProvider';
-
-enum HandleTypes {
-  delete = 'delete',
-  optional = 'optional',
-}
-
-interface Props {
-  item: ThemeItem;
-  style?: React.CSSProperties;
-  onChange?: (params: { type: HandleTypes; item: ThemeItem }) => void;
-}
-
-const Overview = ({ theme }: { theme: ThemeConfig }) => {
-  const { token } = useToken();
-
-  return (
-    <ConfigProvider theme={{ ...theme, inherit: false }}>
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          pointerEvents: 'none',
-          width: '100%',
-          height: 129,
-          borderRadius: token.borderRadiusLG,
-          overflow: 'hidden',
-        }}
-      >
-        <Space
-          style={{
-            transform: 'scale(0.7) translate(0, 0)',
-            transformOrigin: '0 0',
-          }}
-          size={0}
-          align="start"
-        >
-          <Primary />
-        </Space>
-      </div>
-    </ConfigProvider>
-  );
-};
-
-const ThemeCard = (props: Props) => {
-  const {
-    theme: currentTheme,
-    setTheme,
-    setCurrentSettingTheme,
-    setCurrentEditingTheme,
-    getCurrentEditingTheme,
-  } = useGlobalTheme();
-  const { setOpen } = useThemeEditorContext();
-  const currentUser = useCurrentUserContext();
-  const systemSettings = useSystemSettings();
-  const { item, style = {}, onChange } = props;
-  const api = useAPIClient();
-  const { updateUserThemeSettings, updateSystemThemeSettings } = useUpdateThemeSettings();
-  const { modal } = App.useApp();
-  const [loading, setLoading] = React.useState(false);
-  const currentThemeId = useCurrentThemeId();
-  const { t } = useTranslation();
-  const { token } = useToken();
-
-  const isDefault = item.id === systemSettings?.data?.data?.options?.themeId;
-
-  const handleDelete = useCallback(() => {
-    if (isDefault) {
-      return;
-    }
-
-    modal.confirm({
-      title: t('Delete theme'),
-      content: t('Deletion is unrecoverable. Confirm deletion?'),
-      onOk: async () => {
-        await api.request({
-          url: `themeConfig:destroy/${item.id}`,
-        });
-
-        if (item.id === currentUser?.data?.data?.systemSettings?.themeId) {
-          updateUserThemeSettings(null);
-        }
-        if (item.id === systemSettings?.data?.data?.options?.themeId) {
-          updateSystemThemeSettings(null);
-        }
-        message.success(t('Deleted successfully'));
-        onChange?.({ type: HandleTypes.delete, item });
-      },
-    });
-  }, [
-    api,
-    currentUser?.data?.data?.systemSettings?.themeId,
-    isDefault,
-    item,
-    modal,
-    onChange,
-    systemSettings?.data?.data?.options?.themeId,
-    t,
-    updateSystemThemeSettings,
-    updateUserThemeSettings,
-  ]);
-  const handleSwitchOptional = useCallback(
-    async (checked: boolean) => {
-      setLoading(true);
-      try {
-        if (!checked) {
-          await Promise.all([
-            api.request({
-              url: `themeConfig:update/${item.id}`,
-              method: 'post',
-              data: {
-                optional: checked,
-              },
-            }),
-            // 如果用户把当前设置的主题设置为不可选，那么就需要把当前设置的主题设置为默认主题
-            item.id === currentThemeId && updateUserThemeSettings(null),
-            // 系统默认主题应该始终是可选的，所以当用户设置为不可选时，应该也同时把系统默认主题设置为空
-            item.id === systemSettings?.data?.data?.options?.themeId && updateSystemThemeSettings(null),
-          ]);
-        } else {
-          await api.request({
-            url: `themeConfig:update/${item.id}`,
-            method: 'post',
-            data: {
-              optional: checked,
-            },
-          });
-        }
-      } catch (err) {
-        error(err);
-      }
-      setLoading(false);
-      message.success(t('Updated successfully'));
-      onChange?.({ type: HandleTypes.optional, item });
-    },
-    [
-      api,
-      currentThemeId,
-      item,
-      onChange,
-      systemSettings?.data?.data?.options?.themeId,
-      t,
-      updateSystemThemeSettings,
-      updateUserThemeSettings,
-    ],
-  );
-  const handleSwitchDefault = useCallback(
-    async (checked: boolean) => {
-      setLoading(true);
-      try {
-        if (checked) {
-          await Promise.all([
-            updateSystemThemeSettings(item.id),
-            // 用户在设置该主题为默认主题时，肯定也希望该主题可被用户选择
-            api.request({
-              url: `themeConfig:update/${item.id}`,
-              method: 'post',
-              data: {
-                optional: true,
-              },
-            }),
-          ]);
-        } else {
-          await updateSystemThemeSettings(null);
-        }
-      } catch (err) {
-        error(err);
-      }
-      setLoading(false);
-      message.success(t('Updated successfully'));
-      onChange?.({ type: HandleTypes.optional, item });
-    },
-    [api, item, onChange, t, updateSystemThemeSettings],
-  );
-
-  const handleEdit = useCallback(() => {
-    setCurrentSettingTheme(currentTheme);
-    setCurrentEditingTheme(item);
-    setTheme(compatOldTheme(item.config));
-    setOpen(true);
-  }, [item, setCurrentEditingTheme, setCurrentSettingTheme, setOpen, setTheme, currentTheme]);
-
-  const menu = useMemo(() => {
-    return {
-      items: [
-        {
-          key: 'optional',
-          label: (
-            <Space
-              style={{ width: '100%', justifyContent: 'space-between' }}
-              align="center"
-              size="middle"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <span>{t('User selectable')}</span>
-              <Switch
-                disabled={isDefault}
-                style={{ transform: 'translateY(-2px)' }}
-                checked={item.optional}
-                size={'small'}
-                loading={loading}
-                onChange={handleSwitchOptional}
-              ></Switch>
-            </Space>
-          ),
-        },
-        {
-          key: 'system',
-          label: (
-            <Space
-              style={{ width: '100%', justifyContent: 'space-between' }}
-              align="center"
-              size="middle"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <span>{t('Default theme')}</span>
-              <Switch
-                disabled={isDefault}
-                style={{ transform: 'translateY(-2px)' }}
-                checked={isDefault}
-                size={'small'}
-                loading={loading}
-                onChange={handleSwitchDefault}
-              />
-            </Space>
-          ),
-        },
-      ],
-    };
-  }, [handleSwitchDefault, handleSwitchOptional, isDefault, item.optional, loading, t]);
-
-  const actions = useMemo(() => {
-    return [
-      <EditOutlined key="edit" onClick={handleEdit} />,
-      <DeleteOutlined
-        key="delete"
-        style={
-          isDefault
-            ? {
-                color: token.colorTextDisabled,
-                cursor: 'not-allowed',
-              }
-            : null
-        }
-        disabled={isDefault}
-        onClick={handleDelete}
-      />,
-      <Dropdown key="ellipsis" menu={menu}>
-        <EllipsisOutlined />
-      </Dropdown>,
-    ];
-  }, [handleDelete, handleEdit, isDefault, menu, token.colorTextDisabled]);
-
-  const extra = useMemo(() => {
-    if (item.id !== systemSettings?.data?.data?.options?.themeId && !item.optional) {
-      return null;
-    }
-    const text =
-      item.id === currentThemeId
-        ? t('Current')
-        : item.id === systemSettings?.data?.data?.options?.themeId
-        ? t('Default')
-        : item.optional
-        ? t('Optional')
-        : t('Non-optional');
-    const color =
-      item.id === currentThemeId
-        ? 'processing'
-        : item.id === systemSettings?.data?.data?.options?.themeId
-        ? 'default'
-        : item.optional
-        ? 'success'
-        : 'error';
-
-    return (
-      <Tag style={{ marginRight: 0 }} color={color}>
-        {text}
-      </Tag>
-    );
-  }, [currentThemeId, item.id, item.optional, systemSettings?.data?.data?.options?.themeId, t]);
-
-  const cardStyle = useMemo(() => {
-    if (getCurrentEditingTheme()?.id === item.id) {
-      return {
-        cursor: 'default',
-        width: 240,
-        height: 240,
-        overflow: 'hidden',
-        outline: '1px solid var(--colorSettings)',
-        ...style,
-      };
-    }
-    return { cursor: 'default', width: 240, height: 240, overflow: 'hidden', ...style };
-  }, [getCurrentEditingTheme, item.id, style]);
-
-  return (
-    <Card
-      hoverable
-      extra={extra}
-      title={t(item.config.name)}
-      size="small"
-      style={cardStyle}
-      headStyle={{ minHeight: 38 }}
-      actions={actions}
-    >
-      <Overview theme={item.config} />
-    </Card>
-  );
-};
-
-ThemeCard.displayName = 'ThemeCard';
-
-export default ThemeCard;

package/src/client/components/ThemeEditorProvider.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-const ThemeEditorContext = React.createContext<{
-  open: boolean;
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}>(null);
-
-export const useThemeEditorContext = () => React.useContext(ThemeEditorContext);
-
-export const ThemeEditorProvider = ({ children, open, setOpen }) => {
-  return <ThemeEditorContext.Provider value={{ open, setOpen }}>{children}</ThemeEditorContext.Provider>;
-};
-
-ThemeEditorProvider.displayName = 'ThemeEditorProvider';

package/src/client/components/ThemeList.tsx

@@ -1,40 +0,0 @@
-import { useToken } from '@nocobase/client';
-import { error } from '@nocobase/utils/client';
-import { Space } from 'antd';
-import React, { useCallback, useEffect } from 'react';
-import ThemeCard from './ThemeCard';
-import { useThemeListContext } from './ThemeListProvider';
-import ToEditTheme from './ToEditTheme';
-
-const ThemeList = () => {
-  const { run, error: err, refresh, data } = useThemeListContext();
-  const { token } = useToken();
-
-  useEffect(() => {
-    if (!data) {
-      run();
-    }
-  }, []);
-
-  const handleChange = useCallback(() => {
-    refresh();
-  }, [refresh]);
-
-  if (err) {
-    error(err);
-    return null;
-  }
-
-  return (
-    <Space size={token.sizeLG} wrap>
-      {data?.map((item) => {
-        return <ThemeCard item={item} key={item.id} onChange={handleChange} />;
-      })}
-      <ToEditTheme />
-    </Space>
-  );
-};
-
-ThemeList.displayName = 'ThemeList';
-
-export default ThemeList;