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

package/lib/client/antd-token-previewer/token-panel-pro/AliasPanel.js

@@ -0,0 +1,262 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _icons() {
+  const data = require("@ant-design/icons");
+  _icons = function _icons() {
+    return data;
+  };
+  return data;
+}
+function _antd() {
+  const data = require("antd");
+  _antd = function _antd() {
+    return data;
+  };
+  return data;
+}
+function _classnames() {
+  const data = _interopRequireDefault(require("classnames"));
+  _classnames = function _classnames() {
+    return data;
+  };
+  return data;
+}
+function _useMergedState3() {
+  const data = _interopRequireDefault(require("rc-util/es/hooks/useMergedState"));
+  _useMergedState3 = function _useMergedState3() {
+    return data;
+  };
+  return data;
+}
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function _react() {
+    return data;
+  };
+  return data;
+}
+var _icons2 = require("../icons");
+var _TokenRelation = require("../meta/TokenRelation");
+var _makeStyle = _interopRequireDefault(require("../utils/makeStyle"));
+var _statistic = require("../utils/statistic");
+var _TokenDetail = _interopRequireDefault(require("./TokenDetail"));
+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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+const Panel = _antd().Collapse.Panel;
+const useStyle = (0, _makeStyle.default)('TokenPanelProAlias', token => ({
+  '.token-panel-pro-color-alias': {
+    display: 'flex',
+    flexDirection: 'column',
+    marginTop: 45,
+    borderTop: `1px solid ${token.colorSplit}`,
+    '.token-panel-pro-color-alias-title': {
+      display: 'flex',
+      alignItems: 'center',
+      padding: '0 16px',
+      flex: '0 0 60px',
+      '&-text': {
+        fontSize: token.fontSizeLG,
+        fontWeight: token.fontWeightStrong
+      }
+    },
+    '.token-panel-pro-color-alias-description': {
+      color: token.colorTextTertiary,
+      fontSize: token.fontSizeSM,
+      lineHeight: token.lineHeightSM,
+      padding: '0 16px 12px'
+    },
+    [`.token-panel-pro-alias-collapse${token.rootCls}-collapse`]: {
+      [`> ${token.rootCls}-collapse-item > ${token.rootCls}-collapse-content > ${token.rootCls}-collapse-content-box`]: {
+        paddingBlock: '0'
+      },
+      [`> ${token.rootCls}-collapse-item`]: {
+        [`> ${token.rootCls}-collapse-header`]: {
+          alignItems: 'center',
+          padding: '8px 16px',
+          [`> ${token.rootCls}-collapse-header-text`]: {
+            flex: 1,
+            '.token-panel-pro-token-collapse-map-collapse-count': {
+              color: token.colorTextSecondary,
+              display: 'inline-block',
+              fontSize: 12,
+              lineHeight: '16px',
+              padding: '0 6px',
+              backgroundColor: token.colorFillAlter,
+              borderRadius: 999
+            }
+          },
+          '.token-panel-pro-token-picked': {
+            color: token.colorPrimary
+          }
+        }
+      }
+    },
+    '.token-panel-pro-color-alias-expand': {
+      height: '100%',
+      width: 20,
+      transform: 'translateX(-50%)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      '&:hover': {
+        '.token-panel-pro-color-alias-expand-handler': {
+          opacity: 1
+        }
+      },
+      '.token-panel-pro-color-alias-expand-handler': {
+        height: 100,
+        width: 16,
+        borderRadius: 999,
+        border: `1px solid ${token.colorSplit}`,
+        backgroundColor: '#fff',
+        margin: 'auto',
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        opacity: 0,
+        transition: 'box-shadow 0.2s',
+        '&:hover': {
+          boxShadow: token.boxShadow
+        }
+      }
+    }
+  }
+}));
+const AliasPanel = ({
+  className,
+  activeSeeds,
+  theme,
+  style,
+  selectedTokens,
+  onTokenSelect,
+  open: customOpen,
+  onOpenChange,
+  description
+}) => {
+  const _useStyle = useStyle(),
+    _useStyle2 = _slicedToArray(_useStyle, 2),
+    wrapSSR = _useStyle2[0],
+    hashId = _useStyle2[1];
+  const _useMergedState = (0, _useMergedState3().default)(customOpen !== null && customOpen !== void 0 ? customOpen : true, {
+      value: customOpen,
+      onChange: onOpenChange
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    open = _useMergedState2[0],
+    setOpen = _useMergedState2[1];
+  const shownAlias = (0, _react().useMemo)(() => {
+    var _selectedTokens$map;
+    return selectedTokens !== null && selectedTokens !== void 0 && (_selectedTokens$map = selectedTokens.map) !== null && _selectedTokens$map !== void 0 && _selectedTokens$map.length ? Array.from(new Set(selectedTokens === null || selectedTokens === void 0 ? void 0 : selectedTokens.map.reduce((result, map) => {
+      var _mapRelatedAlias$map;
+      return result.concat(...((_mapRelatedAlias$map = _TokenRelation.mapRelatedAlias[map]) !== null && _mapRelatedAlias$map !== void 0 ? _mapRelatedAlias$map : []));
+    }, []))) : activeSeeds === null || activeSeeds === void 0 ? void 0 : activeSeeds.reduce((result, item) => {
+      var _seedRelatedAlias$ite;
+      return result.concat((_seedRelatedAlias$ite = _TokenRelation.seedRelatedAlias[item]) !== null && _seedRelatedAlias$ite !== void 0 ? _seedRelatedAlias$ite : []);
+    }, []);
+  }, [selectedTokens, activeSeeds]);
+  return wrapSSR(_react().default.createElement("div", {
+    className: (0, _classnames().default)(className, 'token-panel-pro-color-alias', hashId),
+    style: style
+  }, open ? _react().default.createElement(_react().default.Fragment, null, _react().default.createElement("div", {
+    className: "token-panel-pro-color-alias-title"
+  }, _react().default.createElement("span", {
+    className: "token-panel-pro-color-alias-title-text"
+  }, "Alias Token"), _react().default.createElement(_antd().Tooltip, {
+    placement: "topLeft",
+    arrowPointAtCenter: true,
+    title: "\u522B\u540D\u53D8\u91CF\uFF08Alias Token\uFF09\u662F Map Token \u7684\u522B\u540D\u3002Alias Token \u7528\u4E8E\u6279\u91CF\u63A7\u5236\u67D0\u4E9B\u5171\u6027\u7EC4\u4EF6\u7684\u6837\u5F0F\u3002"
+  }, _react().default.createElement(_icons().QuestionCircleOutlined, {
+    style: {
+      fontSize: 14,
+      marginLeft: 4
+    }
+  })), _react().default.createElement(_antd().Button, {
+    type: "text",
+    icon: _react().default.createElement(_icons().ShrinkOutlined, null),
+    style: {
+      marginLeft: 'auto'
+    },
+    onClick: () => setOpen(false)
+  })), description && _react().default.createElement("div", {
+    className: "token-panel-pro-color-alias-description"
+  }, description), _react().default.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'auto'
+    }
+  }, _react().default.createElement(_antd().Collapse, {
+    className: "token-panel-pro-alias-collapse",
+    ghost: true,
+    expandIcon: ({
+      isActive
+    }) => _react().default.createElement(_icons().CaretRightOutlined, {
+      rotate: isActive ? 90 : 0,
+      style: {
+        fontSize: 12
+      }
+    })
+  }, shownAlias === null || shownAlias === void 0 ? void 0 : shownAlias.map(aliasToken => {
+    var _selectedTokens$alias;
+    return _react().default.createElement(Panel, {
+      header: _react().default.createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center'
+        }
+      }, _react().default.createElement("span", {
+        style: {
+          marginRight: 8
+        }
+      }, aliasToken), _react().default.createElement("span", {
+        className: "token-panel-pro-token-collapse-map-collapse-count"
+      }, (0, _statistic.getRelatedComponents)(aliasToken).length), _react().default.createElement("div", {
+        style: {
+          padding: 4,
+          marginLeft: 'auto'
+        },
+        onClick: e => {
+          e.stopPropagation();
+          onTokenSelect === null || onTokenSelect === void 0 ? void 0 : onTokenSelect(aliasToken, 'alias');
+        }
+      }, _react().default.createElement(_icons2.Pick, {
+        className: (0, _classnames().default)('token-panel-pro-token-pick', {
+          'token-panel-pro-token-picked': selectedTokens === null || selectedTokens === void 0 ? void 0 : (_selectedTokens$alias = selectedTokens.alias) === null || _selectedTokens$alias === void 0 ? void 0 : _selectedTokens$alias.includes(aliasToken)
+        })
+      }))),
+      key: aliasToken
+    }, _react().default.createElement(_TokenDetail.default, {
+      style: {
+        paddingBottom: 10
+      },
+      themes: [theme],
+      path: ['token'],
+      tokenName: aliasToken
+    }));
+  })), !(shownAlias !== null && shownAlias !== void 0 && shownAlias.length) && _react().default.createElement(_antd().Empty, {
+    image: _antd().Empty.PRESENTED_IMAGE_SIMPLE,
+    description: "\u6682\u65E0\u76F8\u5173 Alias Token"
+  }))) : _react().default.createElement("div", {
+    className: "token-panel-pro-color-alias-expand"
+  }, _react().default.createElement("div", {
+    className: "token-panel-pro-color-alias-expand-handler",
+    onClick: () => setOpen(true)
+  }, _react().default.createElement(_icons().RightOutlined, {
+    style: {
+      fontSize: 12
+    }
+  })))));
+};
+var _default = AliasPanel;
+exports.default = _default;

package/lib/client/antd-token-previewer/token-panel-pro/ComponentDemoPro.d.ts

@@ -0,0 +1,13 @@
+import type { MutableTheme } from 'antd-token-previewer';
+import React from 'react';
+export type ComponentDemoProProps = {
+    selectedTokens?: string[];
+    theme: MutableTheme;
+    components: Record<string, string[]>;
+    activeComponents?: string[];
+    style?: React.CSSProperties;
+    componentDrawer?: boolean;
+    showAll?: boolean;
+};
+declare const _default: (props: ComponentDemoProProps) => React.JSX.Element;
+export default _default;

package/lib/client/antd-token-previewer/token-panel-pro/ComponentDemoPro.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _antd() {
+  const data = require("antd");
+  _antd = function _antd() {
+    return data;
+  };
+  return data;
+}
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function _react() {
+    return data;
+  };
+  return data;
+}
+var _ComponentDemoGroup = _interopRequireDefault(require("../component-panel/ComponentDemoGroup"));
+var _locale = require("../locale");
+var _overviews = require("../overviews");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+const ComponentDemoPro = ({
+  selectedTokens,
+  theme,
+  components,
+  activeComponents,
+  componentDrawer,
+  showAll,
+  style
+}) => {
+  const _React$useState = _react().default.useState('overview'),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    mode = _React$useState2[0],
+    setMode = _React$useState2[1];
+  const _antdTheme$useToken = _antd().theme.useToken(),
+    colorBgLayout = _antdTheme$useToken.token.colorBgLayout;
+  const locale = (0, _locale.useLocale)();
+  const overviewDemo = _react().default.useMemo(() => {
+    if (showAll) {
+      return _react().default.createElement(_antd().Space, {
+        direction: "vertical"
+      }, _react().default.createElement(_overviews.Primary, null), _react().default.createElement(_overviews.Success, null), _react().default.createElement(_overviews.Error, null), _react().default.createElement(_overviews.Warning, null));
+    }
+    if (selectedTokens !== null && selectedTokens !== void 0 && selectedTokens.includes('colorError')) {
+      return _react().default.createElement(_overviews.Error, null);
+    }
+    if (selectedTokens !== null && selectedTokens !== void 0 && selectedTokens.includes('colorSuccess')) {
+      return _react().default.createElement(_overviews.Success, null);
+    }
+    if (selectedTokens !== null && selectedTokens !== void 0 && selectedTokens.includes('colorWarning')) {
+      return _react().default.createElement(_overviews.Warning, null);
+    }
+    return _react().default.createElement(_overviews.Primary, null);
+  }, [selectedTokens, showAll]);
+  return _react().default.createElement("div", {
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      background: colorBgLayout,
+      paddingBottom: 24
+    })
+  }, _react().default.createElement("div", {
+    style: {
+      margin: 'auto',
+      maxWidth: 960
+    }
+  }, _react().default.createElement(_antd().Segmented, {
+    options: [{
+      value: 'overview',
+      label: locale.demo.overview
+    }, {
+      value: 'component',
+      label: locale.demo.components
+    }],
+    value: mode,
+    onChange: setMode,
+    style: {
+      margin: '12px 0 0 12px'
+    }
+  }), _react().default.createElement(_antd().ConfigProvider, {
+    theme: {
+      components: {
+        Select: {
+          zIndexPopup: 10
+        },
+        DatePicker: {
+          zIndexPopup: 10
+        },
+        Dropdown: {
+          zIndexPopup: 10
+        },
+        Mentions: {
+          zIndexPopup: 10
+        },
+        Tooltip: {
+          zIndexPopup: 10
+        },
+        Popover: {
+          zIndexPopup: 10
+        },
+        Popconfirm: {
+          zIndexPopup: 10
+        }
+      }
+    }
+  }, mode === 'overview' ? _react().default.createElement("div", {
+    style: {
+      margin: 12,
+      maxWidth: 'fit-content'
+    }
+  }, overviewDemo) : _react().default.createElement(_ComponentDemoGroup.default, {
+    selectedTokens: selectedTokens,
+    themes: [theme],
+    components: components,
+    activeComponents: activeComponents,
+    componentDrawer: componentDrawer,
+    hideTokens: true
+  }))));
+};
+var _default = props => _react().default.createElement(_antd().ConfigProvider, {
+  theme: props.theme.config
+}, _react().default.createElement(ComponentDemoPro, _objectSpread({}, props)));
+exports.default = _default;

package/lib/client/antd-token-previewer/token-panel-pro/InputNumberPlus.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+export type InputNumberPlusProps = {
+    value?: number;
+    onChange?: (value: number | null) => void;
+    min?: number;
+    max?: number;
+};
+declare const InputNumberPlus: FC<InputNumberPlusProps>;
+export default InputNumberPlus;

package/lib/client/antd-token-previewer/token-panel-pro/InputNumberPlus.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _antd() {
+  const data = require("antd");
+  _antd = function _antd() {
+    return data;
+  };
+  return data;
+}
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function _react() {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const InputNumberPlus = ({
+  value,
+  onChange,
+  min,
+  max
+}) => {
+  return _react().default.createElement("div", {
+    style: {
+      display: 'flex',
+      width: 200
+    }
+  }, _react().default.createElement(_antd().Slider, {
+    style: {
+      flex: '0 0 120px',
+      marginRight: 12
+    },
+    value: value,
+    min: min,
+    max: max,
+    onChange: onChange
+  }), _react().default.createElement(_antd().InputNumber, {
+    value: value,
+    min: min,
+    max: max,
+    onChange: onChange,
+    style: {
+      flex: 1
+    }
+  }));
+};
+var _default = InputNumberPlus;
+exports.default = _default;

package/lib/client/antd-token-previewer/token-panel-pro/TokenContent.d.ts

@@ -0,0 +1,36 @@
+import type { MutableTheme } from 'antd-token-previewer';
+import type { FC } from 'react';
+import type { SelectedToken } from '../interface';
+import type { TokenCategory, TokenGroup } from '../meta/interface';
+export type SeedTokenProps = {
+    theme: MutableTheme;
+    tokenName: string;
+    disabled?: boolean;
+    alpha?: boolean;
+};
+export type MapTokenCollapseContentProps = {
+    mapTokens?: string[];
+    theme: MutableTheme;
+    selectedTokens?: SelectedToken;
+    onTokenSelect?: (token: string | string[], type: keyof SelectedToken) => void;
+    type?: string;
+};
+export type MapTokenCollapseProps = {
+    theme: MutableTheme;
+    group: TokenGroup<string>;
+    selectedTokens?: SelectedToken;
+    onTokenSelect?: (token: string | string[], type: keyof SelectedToken) => void;
+    groupFn?: (token: string) => string;
+};
+export type ColorTokenContentProps = {
+    category: TokenCategory<string>;
+    theme: MutableTheme;
+    selectedTokens?: SelectedToken;
+    onTokenSelect?: (token: string | string[], type: keyof SelectedToken) => void;
+    infoFollowPrimary?: boolean;
+    onInfoFollowPrimaryChange?: (value: boolean) => void;
+    activeGroup: string;
+    onActiveGroupChange: (value: string) => void;
+};
+declare const TokenContent: FC<ColorTokenContentProps>;
+export default TokenContent;