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

package/src/client/antd-token-previewer/icons/ShapeLine.js

@@ -1,59 +0,0 @@
-import * as React from 'react';
-
-function ShapeLine(props) {
-  return /*#__PURE__*/ React.createElement(
-    'svg',
-    Object.assign(
-      {
-        width: '1em',
-        height: '1em',
-        viewBox: '0 0 16 17',
-        xmlns: 'http://www.w3.org/2000/svg',
-        xmlnsXlink: 'http://www.w3.org/1999/xlink',
-      },
-      props,
-      {
-        style: Object.assign(
-          {
-            verticalAlign: '-0.125em',
-          },
-          props.style,
-        ),
-        className: ['nanqu-token-panel-icon', props.className].filter(Boolean).join(' '),
-      },
-    ),
-    /*#__PURE__*/ React.createElement(
-      'g',
-      {
-        id: 'ShapeLine-\u9875\u9762-1',
-        stroke: 'none',
-        strokeWidth: 1,
-        fill: 'none',
-        fillRule: 'evenodd',
-      },
-      /*#__PURE__*/ React.createElement(
-        'g',
-        {
-          id: 'ShapeLine-shape-line',
-          transform: 'translate(0.000000, 0.923169)',
-          fill: 'currentColor',
-          fillRule: 'nonzero',
-        },
-        /*#__PURE__*/ React.createElement('rect', {
-          id: 'ShapeLine-\u77E9\u5F62',
-          opacity: 0,
-          x: 0,
-          y: 0,
-          width: 16,
-          height: 15.9807923,
-        }),
-        /*#__PURE__*/ React.createElement('path', {
-          d: 'M5.22,13.3173269 C4.90928357,14.1946577 4.03334945,14.7416208 3.10760502,14.6363783 C2.18186059,14.5311359 1.45139881,13.801551 1.34602985,12.8769179 C1.24066088,11.9522848 1.78828141,11.0774022 2.66666667,10.7670588 L2.66666667,5.21373349 C1.78828141,4.90339007 1.24066088,4.02850749 1.34602985,3.1038744 C1.45139881,2.1792413 2.18186059,1.44965643 3.10760502,1.34441396 C4.03334945,1.23917149 4.90928357,1.78613461 5.22,2.66346539 L10.78,2.66346539 C11.0907164,1.78613461 11.9666505,1.23917149 12.892395,1.34441396 C13.8181394,1.44965643 14.5486012,2.1792413 14.6539702,3.1038744 C14.7593391,4.02850749 14.2117186,4.90339007 13.3333333,5.21373349 L13.3333333,10.7670588 C14.2117186,11.0774022 14.7593391,11.9522848 14.6539702,12.8769179 C14.5486012,13.801551 13.8181394,14.5311359 12.892395,14.6363783 C11.9666505,14.7416208 11.0907164,14.1946577 10.78,13.3173269 L5.22,13.3173269 Z M5.22,11.9855942 L10.78,11.9855942 C10.9819939,11.4165133 11.430235,10.9688103 12,10.7670588 L12,5.21373349 C11.430235,5.01198206 10.9819939,4.56427905 10.78,3.99519808 L5.22,3.99519808 C5.01800608,4.56427905 4.56976496,5.01198206 4,5.21373349 L4,10.7670588 C4.56976496,10.9688103 5.01800608,11.4165133 5.22,11.9855942 Z M3.33333333,3.99519809 C3.5715347,3.9952345 3.79165744,3.86832906 3.91076865,3.66229434 C4.02987987,3.45625961 4.02987987,3.20240385 3.91076865,2.99636913 C3.79165744,2.79033441 3.5715347,2.66342897 3.33333333,2.66346538 C2.96518335,2.66352168 2.66676872,2.96162371 2.66676872,3.32933173 C2.66676872,3.69703976 2.96518335,3.99514178 3.33333333,3.99519809 L3.33333333,3.99519809 Z M12.6666667,3.99519809 C12.904868,3.9952345 13.1249908,3.86832906 13.244102,3.66229434 C13.3632132,3.45625961 13.3632132,3.20240385 13.244102,2.99636913 C13.1249908,2.79033441 12.904868,2.66342897 12.6666667,2.66346538 C12.2985167,2.66352168 12.0001021,2.96162371 12.0001021,3.32933173 C12.0001021,3.69703976 12.2985167,3.99514178 12.6666667,3.99519809 L12.6666667,3.99519809 Z M12.6666667,13.3173269 C12.904868,13.3173633 13.1249908,13.1904579 13.244102,12.9844232 C13.3632132,12.7783885 13.3632132,12.5245327 13.244102,12.318498 C13.1249908,12.1124633 12.904868,11.9855578 12.6666667,11.9855942 C12.2985167,11.9856505 12.0001021,12.2837526 12.0001021,12.6514606 C12.0001021,13.0191686 12.2985167,13.3172706 12.6666667,13.3173269 L12.6666667,13.3173269 Z M3.33333333,13.3173269 C3.5715347,13.3173633 3.79165744,13.1904579 3.91076865,12.9844232 C4.02987987,12.7783885 4.02987987,12.5245327 3.91076865,12.318498 C3.79165744,12.1124633 3.5715347,11.9855578 3.33333333,11.9855942 C2.96518335,11.9856505 2.66676872,12.2837526 2.66676872,12.6514606 C2.66676872,13.0191686 2.96518335,13.3172706 3.33333333,13.3173269 L3.33333333,13.3173269 Z',
-          id: 'ShapeLine-\u5F62\u72B6',
-        }),
-      ),
-    ),
-  );
-}
-
-export default ShapeLine;

package/src/client/antd-token-previewer/icons/TokenPanel.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-
-declare const res: React.FC<React.SVGProps<SVGSVGElement>>;
-export default res;

package/src/client/antd-token-previewer/icons/TokenPanel.js

@@ -1,87 +0,0 @@
-import * as React from 'react';
-
-function TokenPanel(props) {
-  return /*#__PURE__*/ React.createElement(
-    'svg',
-    Object.assign(
-      {
-        width: '1em',
-        height: '1em',
-        viewBox: '0 0 20 19',
-        xmlns: 'http://www.w3.org/2000/svg',
-        xmlnsXlink: 'http://www.w3.org/1999/xlink',
-      },
-      props,
-      {
-        style: Object.assign(
-          {
-            verticalAlign: '-0.125em',
-          },
-          props.style,
-        ),
-        className: ['nanqu-token-panel-icon', props.className].filter(Boolean).join(' '),
-      },
-    ),
-    /*#__PURE__*/ React.createElement(
-      'g',
-      {
-        id: 'TokenPanel-\u9875\u9762-1',
-        stroke: 'none',
-        strokeWidth: 1,
-        fill: 'none',
-        fillRule: 'evenodd',
-        fillOpacity: 0.85,
-      },
-      /*#__PURE__*/ React.createElement(
-        'g',
-        {
-          id: 'TokenPanel-\u4E3B\u9898\u7F16\u8F91\u5668---\u591A\u4E3B\u9898',
-          transform: 'translate(-14.000000, -70.000000)',
-          fill: 'currentColor',
-        },
-        /*#__PURE__*/ React.createElement(
-          'g',
-          {
-            id: 'TokenPanel-\u7F16\u7EC4-3',
-            transform: 'translate(10.000000, 66.000000)',
-          },
-          /*#__PURE__*/ React.createElement(
-            'g',
-            {
-              id: 'TokenPanel-\u7F16\u7EC4-20',
-              transform: 'translate(4.000000, 4.000000)',
-            },
-            /*#__PURE__*/ React.createElement('rect', {
-              id: 'TokenPanel-\u77E9\u5F62',
-              opacity: 0.600000024,
-              x: 1,
-              y: 12,
-              width: 7,
-              height: 7,
-              rx: 0.434782594,
-            }),
-            /*#__PURE__*/ React.createElement('path', {
-              d: 'M12.3540059,0 L19.5652174,0 C19.8053412,8.08981097e-16 20,0.194658804 20,0.434782609 L20,7.6459941 C20,7.88611791 19.8053412,8.08077671 19.5652174,8.08077671 C19.4499059,8.08077671 19.3393172,8.03496939 19.2577797,7.95343183 L12.0465682,0.74222034 C11.876775,0.572427169 11.876775,0.297138048 12.0465682,0.127344878 C12.1281057,0.0458073219 12.2386944,-6.44951433e-16 12.3540059,0 Z',
-              id: 'TokenPanel-\u77E9\u5F62',
-              opacity: 0.400000006,
-            }),
-            /*#__PURE__*/ React.createElement('circle', {
-              id: 'TokenPanel-\u692D\u5706\u5F62',
-              cx: 4.34782609,
-              cy: 4.34782609,
-              r: 4.34782609,
-            }),
-            /*#__PURE__*/ React.createElement('circle', {
-              id: 'TokenPanel-\u692D\u5706\u5F62',
-              cx: 15.5,
-              cy: 15.5,
-              r: 3.5,
-            }),
-          ),
-        ),
-      ),
-    ),
-  );
-}
-
-export default TokenPanel;

package/src/client/antd-token-previewer/icons/index.d.ts

@@ -1,12 +0,0 @@
-export { default as Arrow } from './Arrow.js';
-export { default as Brush } from './Brush.js';
-export { default as CompactTheme } from './Compact.js';
-export { default as Control } from './Control.js';
-export { default as DarkTheme } from './Dark.js';
-export { default as Light } from './Light.js';
-export { default as Margin } from './Margin.js';
-export { default as Motion } from './Motion.js';
-export { default as Pick } from './Pick.js';
-export { default as SearchDropdown } from './SearchDropdown.js';
-export { default as ShapeLine } from './ShapeLine.js';
-export { default as TokenPanelIcon } from './TokenPanel.js';

package/src/client/antd-token-previewer/icons/index.js

@@ -1,12 +0,0 @@
-export { default as Arrow } from './Arrow.js';
-export { default as Brush } from './Brush.js';
-export { default as CompactTheme } from './Compact.js';
-export { default as Control } from './Control.js';
-export { default as DarkTheme } from './Dark.js';
-export { default as Light } from './Light.js';
-export { default as Margin } from './Margin.js';
-export { default as Motion } from './Motion.js';
-export { default as Pick } from './Pick.js';
-export { default as SearchDropdown } from './SearchDropdown.js';
-export { default as ShapeLine } from './ShapeLine.js';
-export { default as TokenPanelIcon } from './TokenPanel.js';

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

@@ -1,12 +0,0 @@
-export { default as PreviewDemo } from './PreviewDemo';
-export type { PreviewDemoProps } from './PreviewDemo';
-export { default as ThemeEditor } from './ThemeEditor';
-export type { ThemeEditorProps, ThemeEditorRef } from './ThemeEditor';
-export type { MutableTheme, PreviewerProps, Theme } from './interface';
-export * from './locale';
-export * from './meta';
-export * from './overviews';
-export { default as Previewer } from './previewer';
-export { default as TokenPanel } from './token-panel';
-export type { TokenPanelRef, TokenPreviewProps } from './token-panel';
-export { default as getDesignToken } from './utils/getDesignToken';

package/src/client/antd-token-previewer/interface.ts

@@ -1,37 +0,0 @@
-import type { ThemeConfig } from 'antd/es/config-provider/context';
-import type { ReactElement } from 'react';
-
-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;
-  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/src/client/antd-token-previewer/locale/context.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-import type { Locale } from './interface';
-import zhCN from './zh-CN';
-
-export const LocaleContext = React.createContext<Locale>(zhCN);
-
-export const useLocale = () => React.useContext(LocaleContext);

package/src/client/antd-token-previewer/locale/en-US.ts

@@ -1,20 +0,0 @@
-import type { Locale } from './interface';
-
-const locale: Locale = {
-  _lang: 'en-US',
-  followPrimary: 'Follow Brand Color',
-  reset: 'Reset',
-  next: 'Next',
-  groupView: 'Group View',
-  fill: 'Fill',
-  border: 'Border',
-  background: 'Background',
-  text: 'Text',
-  demo: {
-    overview: 'Overview',
-    components: 'Components',
-    relatedTokens: 'Related Tokens',
-  },
-};
-
-export default locale;

package/src/client/antd-token-previewer/locale/fr-FR.ts

@@ -1,20 +0,0 @@
-import type { Locale } from './interface';
-
-const locale: Locale = {
-  _lang: 'fr-FR',
-  followPrimary: 'Suivre la couleur du branding',
-  reset: 'Réinitialiser',
-  next: 'Suivant',
-  groupView: 'Vue groupe',
-  fill: 'Remplir',
-  border: 'Bordure',
-  background: 'Arrière-plan',
-  text: 'Texte',
-  demo: {
-    overview: 'Aperçu',
-    components: 'Composants',
-    relatedTokens: 'Jetons associés',
-  },
-};
-
-export default locale;

package/src/client/antd-token-previewer/locale/index.ts

@@ -1,4 +0,0 @@
-export { LocaleContext, useLocale } from './context';
-export { default as enUS } from './en-US';
-export type { Locale } from './interface';
-export { default as zhCN } from './zh-CN';

package/src/client/antd-token-previewer/locale/interface.tsx

@@ -1,16 +0,0 @@
-export type Locale = {
-  _lang: string;
-  followPrimary: string;
-  reset: string;
-  next: string;
-  groupView: string;
-  fill: string;
-  background: string;
-  border: string;
-  text: string;
-  demo: {
-    overview: string;
-    components: string;
-    relatedTokens: string;
-  };
-};

package/src/client/antd-token-previewer/locale/zh-CN.ts

@@ -1,20 +0,0 @@
-import type { Locale } from './interface';
-
-const locale: Locale = {
-  _lang: 'zh-CN',
-  followPrimary: '跟随主色',
-  reset: '重置',
-  next: '下一步',
-  groupView: '分组显示',
-  fill: '填充',
-  border: '描边',
-  background: '背景',
-  text: '文本',
-  demo: {
-    overview: '概览',
-    components: '组件',
-    relatedTokens: '关联 Token',
-  },
-};
-
-export default locale;

package/src/client/antd-token-previewer/meta/TokenRelation.ts

@@ -1,188 +0,0 @@
-import type { AliasToken, MapToken, SeedToken } from 'antd/es/theme/interface';
-import defaultMap from 'antd/es/theme/themes/default';
-import seedToken from 'antd/es/theme/themes/seed';
-import formatToken from 'antd/es/theme/util/alias';
-
-export type PureAliasToken = Omit<AliasToken, keyof MapToken>;
-
-type SeedRelatedMap = {
-  [key in keyof SeedToken]?: (keyof MapToken)[];
-};
-
-type SeedRelatedAlias = {
-  [key in keyof SeedToken]?: (keyof PureAliasToken)[];
-};
-
-type MapRelatedAlias = {
-  [key in keyof MapToken]?: (keyof PureAliasToken)[];
-};
-
-// Alias Token 优先级排序，数字小的排在前面，在 map 中的优先级比不在 map 中的优先级高，都不在 map 中的按字母顺序排序
-const tokenOrder: {
-  [key in keyof AliasToken]?: number;
-} = {
-  // example
-  // 0-20 留给 text
-  colorTextHeading: 1,
-  colorTextLabel: 2,
-  colorTextDescription: 3,
-  colorTextDisabled: 4,
-  colorTextPlaceholder: 5,
-  colorIcon: 10,
-  colorIconHover: 11,
-  // 21-40 留给 border
-  colorBorderBg: 21,
-  controlTmpOutline: 22,
-  // 41-60 留给 fill
-  colorFillAlter: 41,
-  colorFillContent: 42,
-  colorFillContentHover: 43,
-
-  // 61-80 留给 bg
-  controlItemBgActive: 61,
-  controlItemBgActiveHover: 62,
-  controlItemBgHover: 63,
-};
-
-export function sortToken<T extends (keyof AliasToken)[]>(arr: T): T {
-  if (!arr) {
-    return arr;
-  }
-  return arr.sort((a, b) => {
-    if (tokenOrder[a] && !tokenOrder[b]) {
-      return -1;
-    }
-    if (!tokenOrder[a] && tokenOrder[b]) {
-      return 1;
-    }
-    if (tokenOrder[a] && tokenOrder[b]) {
-      return tokenOrder[a]! - tokenOrder[b]!;
-    }
-    return a.localeCompare(b);
-  });
-}
-
-export const seedRelatedMap: SeedRelatedMap = {
-  colorPrimary: [
-    'colorPrimaryBg',
-    'colorPrimaryBgHover',
-    'colorPrimaryBorder',
-    'colorPrimaryBorderHover',
-    'colorPrimaryHover',
-    'colorPrimary',
-    'colorPrimaryActive',
-    'colorPrimaryTextHover',
-    'colorPrimaryText',
-    'colorPrimaryTextActive',
-  ],
-  colorError: [
-    'colorErrorBg',
-    'colorErrorBgHover',
-    'colorErrorBorder',
-    'colorErrorBorderHover',
-    'colorErrorHover',
-    'colorError',
-    'colorErrorActive',
-    'colorErrorTextHover',
-    'colorErrorText',
-    'colorErrorTextActive',
-  ],
-  colorWarning: [
-    'colorWarningBg',
-    'colorWarningBgHover',
-    'colorWarningBorder',
-    'colorWarningBorderHover',
-    'colorWarningHover',
-    'colorWarning',
-    'colorWarningActive',
-    'colorWarningTextHover',
-    'colorWarningText',
-    'colorWarningTextActive',
-  ],
-  colorSuccess: [
-    'colorSuccessBg',
-    'colorSuccessBgHover',
-    'colorSuccessBorder',
-    'colorSuccessBorderHover',
-    'colorSuccessHover',
-    'colorSuccess',
-    'colorSuccessActive',
-    'colorSuccessTextHover',
-    'colorSuccessText',
-    'colorSuccessTextActive',
-  ],
-  colorInfo: [
-    'colorInfoBg',
-    'colorInfoBgHover',
-    'colorInfoBorder',
-    'colorInfoBorderHover',
-    'colorInfoHover',
-    'colorInfo',
-    'colorInfoActive',
-    'colorInfoTextHover',
-    'colorInfoText',
-    'colorInfoTextActive',
-  ],
-  colorTextBase: ['colorText', 'colorTextSecondary', 'colorTextTertiary', 'colorTextQuaternary'],
-  colorBgBase: [
-    'colorBgContainer',
-    'colorBgElevated',
-    'colorBgLayout',
-    'colorBgSpotlight',
-    'colorBgMask',
-    'colorBorder',
-    'colorBorderSecondary',
-    'colorFill',
-    'colorFillSecondary',
-    'colorFillTertiary',
-    'colorFillQuaternary',
-  ],
-};
-
-const getMapRelatedAlias = () => {
-  const mapRelatedAlias: any = {};
-  const mapFn = defaultMap;
-  const mapToken = mapFn({ ...seedToken });
-  const aliasToken = formatToken({ ...mapToken, override: {} });
-  Object.keys(mapToken).forEach((mapKey) => {
-    delete (aliasToken as any)[mapKey];
-  });
-
-  Object.keys(mapToken).forEach((mapKey) => {
-    const newAlias = formatToken({
-      ...mapToken,
-      [mapKey]: 'changed',
-      override: {},
-    });
-    Object.keys(aliasToken).forEach((aliasKey) => {
-      if ((aliasToken as any)[aliasKey] !== (newAlias as any)[aliasKey]) {
-        if (!mapRelatedAlias[mapKey]) {
-          mapRelatedAlias[mapKey] = [];
-        }
-        mapRelatedAlias[mapKey].push(aliasKey);
-      }
-    });
-    mapRelatedAlias[mapKey] = sortToken(mapRelatedAlias[mapKey]);
-  });
-
-  return mapRelatedAlias;
-};
-
-export const mapRelatedAlias: MapRelatedAlias = getMapRelatedAlias();
-
-const getSeedRelatedAlias = (): SeedRelatedAlias => {
-  const result: SeedRelatedAlias = {};
-  Object.keys(seedToken).forEach((key) => {
-    const seedKey = key as keyof SeedToken;
-    const arr = mapRelatedAlias[seedKey] || [];
-    seedRelatedMap[seedKey]?.forEach((mapKey) => {
-      arr.push(...(mapRelatedAlias[mapKey] ?? []));
-    });
-    if (arr.length) {
-      (result as any)[key] = sortToken(Array.from(new Set(arr)));
-    }
-  });
-  return result;
-};
-
-export const seedRelatedAlias = getSeedRelatedAlias();