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

package/src/client/components/ThemeListProvider.tsx

@@ -1,60 +0,0 @@
-import { ReturnTypeOfUseRequest, useRequest } from '@nocobase/client';
-import { error } from '@nocobase/utils/client';
-import React, { createContext, useMemo } from 'react';
-import { ThemeItem } from '../../types';
-import { changeAlgorithmFromStringToFunction } from '../utils/changeAlgorithmFromStringToFunction';
-
-interface TData extends Pick<ReturnTypeOfUseRequest, 'data' | 'error' | 'run' | 'refresh' | 'loading'> {
-  data?: ThemeItem[];
-}
-
-const ThemeListContext = createContext<TData>(null);
-
-export const useThemeListContext = () => {
-  return React.useContext(ThemeListContext);
-};
-
-export const ThemeListProvider = ({ children }) => {
-  const {
-    data,
-    error: err,
-    run,
-    refresh,
-    loading,
-  } = useRequest(
-    {
-      url: 'themeConfig:list',
-      params: {
-        sort: 'id',
-        paginate: false,
-      },
-    },
-    {
-      manual: true,
-    },
-  );
-
-  const items = useMemo(() => {
-    return ((data as any)?.data as ThemeItem[])?.map((item) => changeAlgorithmFromStringToFunction(item));
-  }, [data]);
-
-  if (err) {
-    error(err);
-  }
-
-  return (
-    <ThemeListContext.Provider
-      value={{
-        data: items,
-        error: err,
-        run,
-        refresh,
-        loading,
-      }}
-    >
-      {children}
-    </ThemeListContext.Provider>
-  );
-};
-
-ThemeListProvider.displayName = 'ThemeListProvider';

package/src/client/components/ToEditTheme.tsx

@@ -1,69 +0,0 @@
-import { PlusOutlined } from '@ant-design/icons';
-import { compatOldTheme, defaultTheme, useGlobalTheme, useToken } from '@nocobase/client';
-import { App, Button, Space } from 'antd';
-import React, { useCallback } from 'react';
-import { useTranslation } from '../locale';
-import { useThemeEditorContext } from './ThemeEditorProvider';
-
-const ToEditTheme = () => {
-  const { theme, setTheme, setCurrentSettingTheme } = useGlobalTheme();
-  const { token } = useToken();
-  const { setOpen } = useThemeEditorContext();
-  const { t } = useTranslation();
-  const { modal } = App.useApp();
-
-  const handleClick = useCallback(() => {
-    const m = modal.confirm({
-      title: t('Add new theme'),
-      closable: true,
-      maskClosable: true,
-      width: 'fit-content',
-      footer: (
-        <Space style={{ float: 'right', marginTop: token.margin, justifyContent: 'flex-end' }} wrap>
-          <Button
-            onClick={() => {
-              setCurrentSettingTheme(theme);
-              setTheme(compatOldTheme(theme));
-              setOpen(true);
-              m.destroy();
-            }}
-          >
-            {t('Edit based on current theme')}
-          </Button>
-          <Button
-            type={'primary'}
-            onClick={() => {
-              setCurrentSettingTheme(theme);
-              setTheme(compatOldTheme(defaultTheme));
-              setOpen(true);
-              m.destroy();
-            }}
-          >
-            {t('Create a brand new theme')}
-          </Button>
-        </Space>
-      ),
-    });
-  }, [modal, setCurrentSettingTheme, setOpen, setTheme, t, theme, token.margin]);
-
-  return (
-    <Button
-      type={'dashed'}
-      style={{
-        width: 240,
-        height: 240,
-        borderRadius: token.borderRadiusLG,
-        borderColor: 'var(--colorSettings)',
-        color: 'var(--colorSettings)',
-      }}
-      icon={<PlusOutlined />}
-      onClick={handleClick}
-    >
-      {t('Add new theme')}
-    </Button>
-  );
-};
-
-ToEditTheme.displayName = 'ToEditTheme';
-
-export default ToEditTheme;

package/src/client/components/theme-editor/index.tsx

@@ -1,170 +0,0 @@
-import { css, cx } from '@emotion/css';
-import { createStyles, useAPIClient, useGlobalTheme } from '@nocobase/client';
-import { error } from '@nocobase/utils/client';
-import { Button, ConfigProvider, Input, Space, message } from 'antd';
-import antdEnUs from 'antd/locale/en_US';
-import antdZhCN from 'antd/locale/zh_CN';
-import React, { useEffect } from 'react';
-import { ThemeConfig } from '../../../types';
-import { ThemeEditor, enUS, zhCN } from '../../antd-token-previewer';
-import { useUpdateThemeSettings } from '../../hooks/useUpdateThemeSettings';
-import { useTranslation } from '../../locale';
-import { changeAlgorithmFromFunctionToString } from '../../utils/changeAlgorithmFromFunctionToString';
-import { useThemeEditorContext } from '../ThemeEditorProvider';
-import { useThemeListContext } from '../ThemeListProvider';
-
-const useStyle = createStyles(({ token }) => ({
-  editor: css({
-    '& > div:nth-child(2)': {
-      display: 'none',
-    },
-  }),
-  header: css({
-    width: '100%',
-    height: 56,
-    padding: '0 16px',
-    borderBottom: '1px solid #F0F0F0',
-    backgroundColor: '#fff',
-
-    '> .ant-space-item:first-child': {
-      flex: 1,
-    },
-  }),
-
-  errorPlaceholder: css({
-    '&::placeholder': {
-      color: token.colorErrorText,
-    },
-  }),
-}));
-
-const CustomTheme = ({ onThemeChange }: { onThemeChange?: (theme: ThemeConfig) => void }) => {
-  const { styles } = useStyle();
-  const {
-    theme: globalTheme,
-    setTheme: setGlobalTheme,
-    getCurrentSettingTheme,
-    setCurrentEditingTheme,
-    getCurrentEditingTheme,
-  } = useGlobalTheme();
-  const [theme, setTheme] = React.useState<ThemeConfig>(globalTheme);
-  const { setOpen } = useThemeEditorContext();
-  const { t, i18n } = useTranslation();
-  const { refresh } = useThemeListContext();
-  const api = useAPIClient();
-  const [themeName, setThemeName] = React.useState<string>(globalTheme.name);
-  const [loading, setLoading] = React.useState(false);
-  const { updateUserThemeSettings } = useUpdateThemeSettings();
-  const [themeNameStatus, setThemeNameStatus] = React.useState<'' | 'error' | 'warning'>();
-
-  useEffect(() => {
-    setTheme(globalTheme);
-  }, [globalTheme]);
-
-  const lang = i18n.language;
-
-  const handleSave = async () => {
-    if (!themeName) {
-      setThemeNameStatus('error');
-      return;
-    }
-
-    setLoading(true);
-
-    // 编辑主题
-    if (getCurrentEditingTheme()) {
-      const editingItem = getCurrentEditingTheme();
-      editingItem.config = changeAlgorithmFromFunctionToString(theme) as any;
-      editingItem.config.name = themeName;
-      try {
-        await api.request({
-          url: `themeConfig:update/${editingItem.id}`,
-          method: 'POST',
-          data: editingItem,
-        });
-        refresh?.();
-        message.success(t('Saved successfully'));
-      } catch (err) {
-        error(err);
-      }
-      setLoading(false);
-      setOpen(false);
-      setCurrentEditingTheme(null);
-      setTheme(getCurrentSettingTheme());
-      return;
-    }
-
-    // 新增主题
-    try {
-      const data = await api.request({
-        url: 'themeConfig:create',
-        method: 'POST',
-        data: {
-          config: {
-            ...changeAlgorithmFromFunctionToString(theme),
-            name: themeName,
-          },
-          optional: true,
-          isBuiltIn: false,
-        },
-      });
-      await updateUserThemeSettings(data.data.data.id);
-      refresh?.();
-      message.success(t('Saved successfully'));
-    } catch (err) {
-      error(err);
-    }
-    setLoading(false);
-    setOpen(false);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-    setGlobalTheme(getCurrentSettingTheme());
-    setCurrentEditingTheme(null);
-  };
-
-  const handleThemeNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (!e.target.value) {
-      setThemeNameStatus('error');
-    } else {
-      setThemeNameStatus('');
-    }
-    setThemeName(e.target.value);
-  };
-
-  return (
-    <>
-      <ConfigProvider theme={{ inherit: false }} locale={lang === 'zh-CN' ? antdZhCN : antdEnUs}>
-        <Space className={styles.header}>
-          <Input
-            className={cx({ [styles.errorPlaceholder]: themeNameStatus === 'error' })}
-            status={themeNameStatus}
-            placeholder={t('Please set a name for this theme')}
-            value={themeName}
-            onChange={handleThemeNameChange}
-            onPressEnter={handleSave}
-          />
-          <Button type="default" onClick={handleClose}>
-            {t('Close')}
-          </Button>
-          <Button loading={loading} type="primary" onClick={handleSave}>
-            {t('Save')}
-          </Button>
-        </Space>
-        <ThemeEditor
-          className={styles.editor}
-          theme={{ name: 'Custom Theme', key: 'test', config: theme }}
-          style={{ height: 'calc(100vh - 56px)', width: 540 }}
-          onThemeChange={(newTheme) => {
-            setTheme(newTheme.config);
-            onThemeChange?.(newTheme.config);
-          }}
-          locale={lang === 'zh-CN' ? zhCN : enUS}
-        />
-      </ConfigProvider>
-    </>
-  );
-};
-
-export default CustomTheme;

package/src/client/hooks/useThemeSettings.tsx

@@ -1,97 +0,0 @@
-import { useAPIClient, useCurrentUserContext, useSystemSettings } from '@nocobase/client';
-import { error } from '@nocobase/utils/client';
-import { MenuProps, Select } from 'antd';
-import React, { useEffect, useMemo } from 'react';
-import { useCurrentThemeId } from '../components/InitializeTheme';
-import { useThemeListContext } from '../components/ThemeListProvider';
-import { useTranslation } from '../locale';
-import { useUpdateThemeSettings } from './useUpdateThemeSettings';
-
-export const useThemeSettings = () => {
-  return useMemo<MenuProps['items'][0]>(() => {
-    return {
-      key: 'theme',
-      eventKey: 'theme',
-      label: <Label />,
-    };
-  }, []);
-};
-
-function Label() {
-  const { t } = useTranslation();
-  const currentUser = useCurrentUserContext();
-  const systemSettings = useSystemSettings();
-  const { run, error: err, data, refresh } = useThemeListContext();
-  const { updateUserThemeSettings, updateSystemThemeSettings } = useUpdateThemeSettings();
-  const currentThemeId = useCurrentThemeId();
-  const themeId = useCurrentThemeId();
-  const api = useAPIClient();
-
-  const options = useMemo(() => {
-    return data
-      ?.filter((item) => item.optional)
-      .map((item) => {
-        return {
-          label: t(item.config.name),
-          value: item.id,
-        };
-      });
-  }, [data, t]);
-
-  useEffect(() => {
-    if (!data) {
-      run();
-    }
-  }, []);
-
-  useEffect(() => {
-    const init = async () => {
-      // 当 themeId 为空时表示插件是第一次被启用
-      if (themeId == null && data) {
-        const firstTheme = data[0];
-
-        try {
-          // 避免并发请求，在本地存储中容易出问题
-          await updateSystemThemeSettings(firstTheme.id);
-          await updateUserThemeSettings(firstTheme.id);
-        } catch (err) {
-          error(err);
-        }
-      }
-    };
-
-    init();
-  }, [themeId, updateSystemThemeSettings, updateUserThemeSettings, data, api, refresh]);
-
-  if (err) {
-    error(err);
-    return null;
-  }
-
-  if (!systemSettings) {
-    error('Please check if provide `SystemSettingsProvider` in your app.');
-    throw new Error('Please check if provide `SystemSettingsProvider` in your app.');
-  }
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-      }}
-    >
-      {t('Theme')}
-      <Select
-        style={{ minWidth: 100 }}
-        bordered={false}
-        popupMatchSelectWidth={false}
-        value={currentThemeId}
-        options={options}
-        onChange={(value) => {
-          updateUserThemeSettings(value);
-        }}
-      />
-    </div>
-  );
-}

package/src/client/hooks/useUpdateThemeSettings.tsx

@@ -1,69 +0,0 @@
-import { useAPIClient, useCurrentUserContext, useSystemSettings } from '@nocobase/client';
-import { error } from '@nocobase/utils/client';
-import { useCallback } from 'react';
-
-export function useUpdateThemeSettings() {
-  const api = useAPIClient();
-  const currentUser = useCurrentUserContext();
-  const systemSettings = useSystemSettings();
-
-  const updateUserThemeSettings = useCallback(
-    async (themeId: number | null) => {
-      if (themeId === currentUser.data.data.systemSettings?.themeId) {
-        return;
-      }
-      try {
-        await api.resource('users').updateProfile({
-          values: {
-            systemSettings: {
-              ...(currentUser.data.data.systemSettings || {}),
-              themeId,
-            },
-          },
-        });
-        currentUser.mutate({
-          data: {
-            ...currentUser.data.data,
-            systemSettings: {
-              ...(currentUser.data.data.systemSettings || {}),
-              themeId,
-            },
-          },
-        });
-      } catch (err) {
-        error(err);
-      }
-    },
-    [api, currentUser],
-  );
-
-  const updateSystemThemeSettings = useCallback(
-    async (themeId: number | null) => {
-      if (themeId === systemSettings.data.data.options?.themeId) {
-        return;
-      }
-      await api.request({
-        url: 'systemSettings:update/1',
-        method: 'post',
-        data: {
-          options: {
-            ...(systemSettings.data.data.options || {}),
-            themeId,
-          },
-        },
-      });
-      systemSettings.mutate({
-        data: {
-          ...systemSettings.data.data,
-          options: {
-            ...(systemSettings.data.data.options || {}),
-            themeId,
-          },
-        },
-      });
-    },
-    [api, systemSettings],
-  );
-
-  return { updateUserThemeSettings, updateSystemThemeSettings };
-}

package/src/client/index.tsx

@@ -1,99 +0,0 @@
-import {
-  Plugin,
-  SettingsCenterProvider,
-  createStyles,
-  useCurrentUserSettingsMenu,
-  useGlobalTheme,
-} from '@nocobase/client';
-import { ConfigProvider } from 'antd';
-import React, { useEffect, useMemo } from 'react';
-import InitializeTheme from './components/InitializeTheme';
-import { ThemeEditorProvider } from './components/ThemeEditorProvider';
-import ThemeList from './components/ThemeList';
-import { ThemeListProvider } from './components/ThemeListProvider';
-import CustomTheme from './components/theme-editor';
-import { useThemeSettings } from './hooks/useThemeSettings';
-import { useTranslation } from './locale';
-
-const useStyles = createStyles(({ css, token }) => {
-  return {
-    editor: css`
-      overflow: hidden;
-      border-left: 1px solid ${token.colorBorderSecondary};
-      animation: 0.1s ease-out 0s 1 slideInFromRight;
-      @keyframes slideInFromRight {
-        0% {
-          transform: translateX(100%);
-        }
-        100% {
-          transform: translateX(0);
-        }
-      }
-    `,
-  };
-});
-
-const CustomThemeProvider = React.memo((props) => {
-  const { addMenuItem } = useCurrentUserSettingsMenu();
-  const themeItem = useThemeSettings();
-  const { t } = useTranslation();
-  const [open, setOpen] = React.useState(false);
-  const { theme, setTheme } = useGlobalTheme();
-  const { styles } = useStyles();
-
-  useEffect(() => {
-    // 在页面右上角中添加一个 Theme 菜单项
-    addMenuItem(themeItem, { before: 'divider_3' });
-  }, [addMenuItem, themeItem]);
-
-  const settings = useMemo(() => {
-    return {
-      'theme-editor': {
-        title: t('Theme editor'),
-        icon: 'BgColorsOutlined',
-        tabs: {
-          themes: {
-            title: t('Themes'),
-            component: ThemeList,
-          },
-        },
-      },
-    };
-  }, []);
-
-  const contentStyle = useMemo(() => {
-    return open ? { transform: 'rotate(0)', flexGrow: 1, width: 0 } : { flexGrow: 1, width: 0 };
-  }, [open]);
-
-  const editor = (
-    <div style={{ display: 'flex', overflow: 'hidden' }}>
-      <div style={contentStyle}>{props.children}</div>
-      {open ? (
-        <div className={styles.editor}>
-          <CustomTheme onThemeChange={setTheme} />
-        </div>
-      ) : null}
-    </div>
-  );
-
-  return (
-    <ConfigProvider theme={theme}>
-      <ThemeListProvider>
-        <InitializeTheme>
-          <ThemeEditorProvider open={open} setOpen={setOpen}>
-            <SettingsCenterProvider settings={settings}>{editor}</SettingsCenterProvider>
-          </ThemeEditorProvider>
-        </InitializeTheme>
-      </ThemeListProvider>
-    </ConfigProvider>
-  );
-});
-CustomThemeProvider.displayName = 'CustomThemeProvider';
-
-export class ThemeEditorPlugin extends Plugin {
-  async load() {
-    this.app.use(CustomThemeProvider);
-  }
-}
-
-export default ThemeEditorPlugin;

package/src/client/locale/index.ts

@@ -1,9 +0,0 @@
-import { useTranslation as useT } from 'react-i18next';
-
-export const NAMESPACE = 'theme-editor';
-
-export function useTranslation() {
-  return useT([NAMESPACE, 'client'], {
-    nsMode: 'fallback',
-  });
-}

package/src/client/utils/changeAlgorithmFromFunctionToString.tsx

@@ -1,30 +0,0 @@
-import { theme as antdTheme } from 'antd';
-import _ from 'lodash';
-import { ThemeConfig } from '../../types';
-
-export function changeAlgorithmFromFunctionToString(themeConfig: any) {
-  themeConfig = _.cloneDeep(themeConfig);
-
-  if (!themeConfig.algorithm) {
-    return themeConfig;
-  }
-  if (Array.isArray(themeConfig.algorithm)) {
-    themeConfig.algorithm = themeConfig.algorithm.map((algorithm) => parseAlgorithm(algorithm));
-  } else {
-    themeConfig.algorithm = parseAlgorithm(themeConfig.algorithm);
-  }
-  return themeConfig;
-}
-
-function parseAlgorithm(algorithm: ThemeConfig['algorithm']): string {
-  if (typeof algorithm === 'string') {
-    return algorithm;
-  }
-  if (algorithm.toString() === antdTheme.darkAlgorithm.toString()) {
-    return 'darkAlgorithm';
-  }
-  if (algorithm.toString() === antdTheme.compactAlgorithm.toString()) {
-    return 'compactAlgorithm';
-  }
-  return algorithm.toString();
-}

package/src/client/utils/changeAlgorithmFromStringToFunction.tsx

@@ -1,24 +0,0 @@
-import { isString } from '@nocobase/utils';
-import { theme } from 'antd';
-import _ from 'lodash';
-import { ThemeItem } from '../../types';
-
-/**
- * 把算法函数由字符串转换为函数
- * 注: 之所以要保存为字符串, 是因为 JSON 无法保存函数
- */
-export function changeAlgorithmFromStringToFunction(themeConfig: ThemeItem) {
-  themeConfig = _.cloneDeep(themeConfig);
-  if (isString(themeConfig.config.algorithm)) {
-    themeConfig.config.algorithm = theme[themeConfig.config.algorithm];
-  }
-  if (Array.isArray(themeConfig.config.algorithm)) {
-    themeConfig.config.algorithm = themeConfig.config.algorithm.map((item) => {
-      if (isString(item)) {
-        return theme[item];
-      }
-      return item;
-    });
-  }
-  return themeConfig;
-}

package/src/index.ts

@@ -1 +0,0 @@
-export { default } from './server';

package/src/locale/en-US.ts

@@ -1,26 +0,0 @@
-const locale = {
-  Theme: 'Theme',
-  Local: 'Local',
-  'Dark theme': 'Dark theme',
-  Optional: 'Optional',
-  'Non-optional': 'Non-optional',
-  Current: 'Current',
-  Default: 'Default',
-
-  // 主题编辑器
-  'Theme Editor': 'Theme Editor',
-  Save: 'Save',
-  Close: 'Close',
-  Edit: 'Edit',
-  Export: 'Export',
-  'edit Theme Config': 'edit Theme Config',
-  'The theme of the JSON format is incorrect': 'The theme of the JSON format is incorrect',
-  'Edited successfully': 'Edited successfully',
-  'Saved successfully': 'Saved successfully',
-  'Initializing Editor...': 'Initializing Editor...',
-  'Save theme': 'Save theme',
-  'Please set a name for this theme': 'Please set a name for this theme',
-  'Please input the theme name': 'Please input the theme name',
-};
-
-export default locale;

package/src/locale/fr-FR.ts

@@ -1,26 +0,0 @@
-const locale = {
-  Theme: 'Thème',
-  Local: 'Local',
-  'Dark theme': 'Thème sombre',
-  Optional: 'Optionnel',
-  'Non-optional': 'Non-optionnel',
-  Current: 'Actuel',
-  Default: 'Par défaut',
-
-  // 主题编辑器
-  'Theme Editor': 'Éditeur de thème',
-  Save: 'Enregistrer',
-  Close: 'Fermer',
-  Edit: 'Modifier',
-  Export: 'Exporter',
-  'edit Theme Config': 'Modifier la configuration du thème',
-  'The theme of the JSON format is incorrect': 'Le thème au format JSON est incorrect',
-  'Edited successfully': 'Modifié avec succès',
-  'Saved successfully': 'Enregistré avec succès',
-  'Initializing Editor...': "Initialisation de l'éditeur...",
-  'Save theme': 'Enregistrer le thème',
-  'Please set a name for this theme': 'Veuillez définir un nom pour ce thème',
-  'Please input the theme name': 'Veuillez saisir le nom du thème',
-};
-
-export default locale;