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

package/lib/client/locale/en-US.d.ts

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

package/lib/client/locale/en-US.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 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'
+};
+var _default = locale;
+exports.default = _default;

package/lib/client/locale/index.d.ts

@@ -0,0 +1,2 @@
+export declare const NAMESPACE = "theme-editor";
+export declare function useTranslation(): import("react-i18next").UseTranslationResponse<("theme-editor" | "client")[], undefined>;

package/lib/client/locale/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NAMESPACE = void 0;
+exports.useTranslation = useTranslation;
+function _reactI18next() {
+  const data = require("react-i18next");
+  _reactI18next = function _reactI18next() {
+    return data;
+  };
+  return data;
+}
+const NAMESPACE = 'theme-editor';
+exports.NAMESPACE = NAMESPACE;
+function useTranslation() {
+  return (0, _reactI18next().useTranslation)([NAMESPACE, 'client'], {
+    nsMode: 'fallback'
+  });
+}

package/lib/client/locale/zh-CN.d.ts

@@ -0,0 +1,36 @@
+declare const locale: {
+    'Theme editor': string;
+    Themes: string;
+    'Dark theme': string;
+    Optional: string;
+    'Non-optional': string;
+    Current: string;
+    Default: string;
+    'Delete theme': string;
+    'Deletion is unrecoverable. Confirm deletion?': string;
+    'Deleted successfully': string;
+    'Updated successfully': string;
+    'User selectable': string;
+    'Default theme': string;
+    'Add new theme': string;
+    'Edit based on current theme': string;
+    'Create a brand new theme': string;
+    'Default theme of antd': string;
+    Dark: string;
+    Compact: string;
+    'Compact dark': string;
+    'Theme Editor': string;
+    Save: string;
+    Close: string;
+    Edit: string;
+    Export: string;
+    'edit Theme Config': string;
+    'The theme of the JSON format is incorrect': string;
+    'Edited successfully': string;
+    'Saved successfully': string;
+    'Initializing Editor...': string;
+    'Save theme': string;
+    'Please set a name for this theme': string;
+    'Please input the theme name': string;
+};
+export default locale;

package/lib/client/locale/zh-CN.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const locale = {
+  'Theme editor': '主题编辑器',
+  Themes: '主题',
+  'Dark theme': '暗黑主题',
+  Optional: '可选',
+  'Non-optional': '不可选',
+  Current: '当前主题',
+  Default: '默认',
+  'Delete theme': '删除主题',
+  'Deletion is unrecoverable. Confirm deletion?': '删除后不可恢复，确认删除？',
+  'Deleted successfully': '删除成功',
+  'Updated successfully': '更新成功',
+  'User selectable': '可被用户选择',
+  'Default theme': '默认主题',
+  'Add new theme': '添加新主题',
+  'Edit based on current theme': '基于当前主题进行编辑',
+  'Create a brand new theme': '创建一个全新的主题',
+  // 内置主题的名字
+  'Default theme of antd': 'antd 默认主题',
+  Dark: '暗黑',
+  Compact: '紧凑',
+  'Compact dark': '紧凑暗黑',
+  // 主题编辑器
+  'Theme Editor': '主题编辑器',
+  Save: '保存',
+  Close: '关闭',
+  Edit: '编辑',
+  Export: '导出',
+  'edit Theme Config': '编辑主题配置',
+  'The theme of the JSON format is incorrect': '主题 JSON 格式错误',
+  'Edited successfully': '编辑成功',
+  'Saved successfully': '保存成功',
+  'Initializing Editor...': '正在初始化编辑器...',
+  'Save theme': '保存主题',
+  'Please set a name for this theme': '请为该主题设置一个名字',
+  'Please input the theme name': '请输入主题名字'
+};
+var _default = locale;
+exports.default = _default;

package/lib/client/utils/changeAlgorithmFromFunctionToString.d.ts

@@ -0,0 +1 @@
+export declare function changeAlgorithmFromFunctionToString(themeConfig: any): any;

package/lib/client/utils/changeAlgorithmFromFunctionToString.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.changeAlgorithmFromFunctionToString = changeAlgorithmFromFunctionToString;
+function _antd() {
+  const data = require("antd");
+  _antd = function _antd() {
+    return data;
+  };
+  return data;
+}
+function _lodash() {
+  const data = _interopRequireDefault(require("lodash"));
+  _lodash = function _lodash() {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function changeAlgorithmFromFunctionToString(themeConfig) {
+  themeConfig = _lodash().default.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) {
+  if (typeof algorithm === 'string') {
+    return algorithm;
+  }
+  if (algorithm.toString() === _antd().theme.darkAlgorithm.toString()) {
+    return 'darkAlgorithm';
+  }
+  if (algorithm.toString() === _antd().theme.compactAlgorithm.toString()) {
+    return 'compactAlgorithm';
+  }
+  return algorithm.toString();
+}

package/lib/client/utils/changeAlgorithmFromStringToFunction.d.ts

@@ -0,0 +1,6 @@
+import { ThemeItem } from '../../types';
+/**
+ * 把算法函数由字符串转换为函数
+ * 注: 之所以要保存为字符串, 是因为 JSON 无法保存函数
+ */
+export declare function changeAlgorithmFromStringToFunction(themeConfig: ThemeItem): ThemeItem;

package/lib/client/utils/changeAlgorithmFromStringToFunction.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.changeAlgorithmFromStringToFunction = changeAlgorithmFromStringToFunction;
+function _utils() {
+  const data = require("@nocobase/utils");
+  _utils = function _utils() {
+    return data;
+  };
+  return data;
+}
+function _antd() {
+  const data = require("antd");
+  _antd = function _antd() {
+    return data;
+  };
+  return data;
+}
+function _lodash() {
+  const data = _interopRequireDefault(require("lodash"));
+  _lodash = function _lodash() {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * 把算法函数由字符串转换为函数
+ * 注: 之所以要保存为字符串, 是因为 JSON 无法保存函数
+ */
+function changeAlgorithmFromStringToFunction(themeConfig) {
+  themeConfig = _lodash().default.cloneDeep(themeConfig);
+  if ((0, _utils().isString)(themeConfig.config.algorithm)) {
+    themeConfig.config.algorithm = _antd().theme[themeConfig.config.algorithm];
+  }
+  if (Array.isArray(themeConfig.config.algorithm)) {
+    themeConfig.config.algorithm = themeConfig.config.algorithm.map(item => {
+      if ((0, _utils().isString)(item)) {
+        return _antd().theme[item];
+      }
+      return item;
+    });
+  }
+  return themeConfig;
+}

package/lib/index.d.ts

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

package/lib/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _server.default;
+  }
+});
+var _server = _interopRequireDefault(require("./server"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/server/builtinThemes.d.ts

@@ -0,0 +1,7 @@
+import { ThemeItem } from '../types';
+/** antd 默认主题 */
+export declare const antd: Omit<ThemeItem, 'id'>;
+export declare const dark: Omit<ThemeItem, 'id'>;
+export declare const compact: Omit<ThemeItem, 'id'>;
+/** 同时包含 `紧凑` 和 `暗黑` 两种模式 */
+export declare const compactDark: Omit<ThemeItem, 'id'>;

package/lib/server/builtinThemes.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dark = exports.compactDark = exports.compact = exports.antd = void 0;
+/** antd 默认主题 */
+const antd = {
+  config: {
+    name: 'Default theme of antd'
+  },
+  optional: true,
+  isBuiltIn: true
+};
+exports.antd = antd;
+const dark = {
+  config: {
+    name: 'Dark',
+    // @ts-ignore
+    algorithm: 'darkAlgorithm'
+  },
+  optional: true,
+  isBuiltIn: true
+};
+exports.dark = dark;
+const compact = {
+  config: {
+    name: 'Compact',
+    // @ts-ignore
+    algorithm: 'compactAlgorithm'
+  },
+  optional: true,
+  isBuiltIn: true
+};
+/** 同时包含 `紧凑` 和 `暗黑` 两种模式 */
+exports.compact = compact;
+const compactDark = {
+  config: {
+    name: 'Compact dark',
+    // @ts-ignore
+    algorithm: ['compactAlgorithm', 'darkAlgorithm']
+  },
+  optional: true,
+  isBuiltIn: true
+};
+exports.compactDark = compactDark;

package/lib/server/index.d.ts

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

package/lib/server/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.default;
+  }
+});
+var _plugin = _interopRequireDefault(require("./plugin"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/server/plugin.d.ts

@@ -0,0 +1,13 @@
+import { Collection } from '@nocobase/database';
+import { InstallOptions, Plugin } from '@nocobase/server';
+export declare class ThemeEditorPlugin extends Plugin {
+    theme: Collection<any, any>;
+    afterAdd(): void;
+    beforeLoad(): void;
+    load(): Promise<void>;
+    install(options?: InstallOptions): Promise<void>;
+    afterEnable(): Promise<void>;
+    afterDisable(): Promise<void>;
+    remove(): Promise<void>;
+}
+export default ThemeEditorPlugin;

package/lib/server/plugin.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ThemeEditorPlugin = void 0;
+function _server() {
+  const data = require("@nocobase/server");
+  _server = function _server() {
+    return data;
+  };
+  return data;
+}
+var _builtinThemes = require("./builtinThemes");
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+class ThemeEditorPlugin extends _server().Plugin {
+  constructor(...args) {
+    super(...args);
+    this.theme = void 0;
+  }
+  afterAdd() {}
+  beforeLoad() {}
+  load() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      _this.theme = _this.db.collection({
+        name: 'themeConfig',
+        fields: [
+        // 主题配置内容，一个 JSON 字符串
+        {
+          type: 'json',
+          name: 'config'
+        },
+        // 主题是否可选
+        {
+          type: 'boolean',
+          name: 'optional'
+        }, {
+          type: 'boolean',
+          name: 'isBuiltIn'
+        }]
+      });
+    })();
+  }
+  install(options) {
+    var _this2 = this;
+    return _asyncToGenerator(function* () {
+      if ((yield _this2.theme.repository.count()) === 0) {
+        yield _this2.theme.repository.create({
+          values: [_builtinThemes.antd, _builtinThemes.dark, _builtinThemes.compact, _builtinThemes.compactDark]
+        });
+      }
+    })();
+  }
+  afterEnable() {
+    return _asyncToGenerator(function* () {})();
+  }
+  afterDisable() {
+    return _asyncToGenerator(function* () {})();
+  }
+  remove() {
+    return _asyncToGenerator(function* () {})();
+  }
+}
+exports.ThemeEditorPlugin = ThemeEditorPlugin;
+var _default = ThemeEditorPlugin;
+exports.default = _default;

package/lib/types.d.ts

@@ -0,0 +1,43 @@
+import type { ThemeConfig as Config } from '@nocobase/client';
+import type { ReactElement } from 'react';
+export type ThemeConfig = Config & {
+    name?: string;
+};
+export interface ThemeItem {
+    id: number;
+    /** 主题配置内容，一个 JSON 字符串 */
+    config: ThemeConfig;
+    /** 主题是否可选 */
+    optional: boolean;
+    isBuiltIn?: boolean;
+}
+export type Theme = {
+    name: string;
+    key: string;
+    config: ThemeConfig;
+};
+export type AliasToken = Exclude<ThemeConfig['token'], undefined>;
+export type TokenValue = string | number | string[] | number[] | boolean;
+export type TokenName = keyof AliasToken;
+export interface ComponentDemo {
+    tokens?: TokenName[];
+    demo: ReactElement;
+    key: string;
+}
+export interface MutableTheme extends Theme {
+    onThemeChange?: (newTheme: ThemeConfig, path: string[]) => void;
+    onReset?: (path: string[]) => void;
+    onAbort?: (path: string[]) => void;
+    getCanReset?: (path: string[]) => boolean;
+}
+export type PreviewerProps = {
+    onSave?: (themeConfig: ThemeConfig) => void;
+    showTheme?: boolean;
+    theme?: Theme;
+    onThemeChange?: (config: ThemeConfig) => void;
+};
+export type SelectedToken = {
+    seed?: string[];
+    map?: string[];
+    alias?: string[];
+};

package/lib/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@nocobase/plugin-theme-editor",
+  "version": "0.11.1-alpha.1",
+  "main": "lib/server/index.js",
+  "displayName": "Theme editor",
+  "displayName.zh-CN": "主题编辑器",
+  "description": "Allows you to customize UI colors, sizes, etc.",
+  "description.zh-CN": "允许你自定义 UI 的颜色、尺寸等。",
+  "dependencies": {
+    "@emotion/css": "^11.11.2",
+    "@nocobase/client": "0.11.1-alpha.1",
+    "antd": "^5.6.4",
+    "react": "^18.2.0",
+    "tinycolor2": "^1.6.0",
+    "vanilla-jsoneditor": "^0.17.8"
+  },
+  "devDependencies": {
+    "@ctrl/tinycolor": "^3.6.0",
+    "@nocobase/server": "0.11.1-alpha.1",
+    "@nocobase/test": "0.11.1-alpha.1"
+  },
+  "gitHead": "9ed1dba520bc5f3a7cb1255ea8d92ccbefc11bc8"
+}

package/server.d.ts

@@ -0,0 +1,3 @@
+// @ts-nocheck
+export * from './lib/server';
+export { default } from './lib/server';

package/server.js

@@ -0,0 +1,65 @@
+'use strict';
+
+function _getRequireWildcardCache(nodeInterop) {
+  if (typeof WeakMap !== 'function') return null;
+  var cacheBabelInterop = new WeakMap();
+  var cacheNodeInterop = new WeakMap();
+  return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {
+    return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+  })(nodeInterop);
+}
+
+function _interopRequireWildcard(obj, nodeInterop) {
+  if (!nodeInterop && obj && obj.__esModule) {
+    return obj;
+  }
+  if (obj === null || (typeof obj !== 'object' && typeof obj !== 'function')) {
+    return { default: obj };
+  }
+  var cache = _getRequireWildcardCache(nodeInterop);
+  if (cache && cache.has(obj)) {
+    return cache.get(obj);
+  }
+  var newObj = {};
+  var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+  for (var key in obj) {
+    if (key !== 'default' && Object.prototype.hasOwnProperty.call(obj, key)) {
+      var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+      if (desc && (desc.get || desc.set)) {
+        Object.defineProperty(newObj, key, desc);
+      } else {
+        newObj[key] = obj[key];
+      }
+    }
+  }
+  newObj.default = obj;
+  if (cache) {
+    cache.set(obj, newObj);
+  }
+  return newObj;
+}
+
+var _index = _interopRequireWildcard(require('./lib/server'));
+
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+var _exportNames = {};
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _index.default;
+  },
+});
+
+Object.keys(_index).forEach(function (key) {
+  if (key === 'default' || key === '__esModule') return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _index[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index[key];
+    },
+  });
+});