@fle-ui/next 3.0.0-alpha.2 → 3.0.0

package/es/theme/util/statistic.js

@@ -0,0 +1,80 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+var enableStatistic = process.env.NODE_ENV !== 'production' || typeof CSSINJS_STATISTIC !== 'undefined';
+var recording = true;
+/**
+ * This function will do as `Object.assign` in production. But will use Object.defineProperty:get to
+ * pass all value access in development. To support statistic field usage with alias token.
+ */
+
+export function merge() {
+  for (var _len = arguments.length, objs = new Array(_len), _key = 0; _key < _len; _key++) {
+    objs[_key] = arguments[_key];
+  }
+  /* istanbul ignore next */
+
+
+  if (!enableStatistic) {
+    return _extends.apply(void 0, [{}].concat(objs));
+  }
+
+  recording = false;
+  var ret = {};
+  objs.forEach(function (obj) {
+    var keys = Object.keys(obj);
+    keys.forEach(function (key) {
+      Object.defineProperty(ret, key, {
+        configurable: true,
+        enumerable: true,
+        get: function get() {
+          return obj[key];
+        }
+      });
+    });
+  });
+  recording = true;
+  return ret;
+}
+/** @private Internal Usage. Not use in your production. */
+
+export var statistic = {};
+/** @private Internal Usage. Not use in your production. */
+// eslint-disable-next-line camelcase
+
+export var _statistic_build_ = {};
+/* istanbul ignore next */
+
+function noop() {}
+/** Statistic token usage case. Should use `merge` function if you do not want spread record. */
+
+
+export default function statisticToken(token) {
+  var tokenKeys;
+  var proxy = token;
+  var flush = noop;
+
+  if (enableStatistic) {
+    tokenKeys = new Set();
+    proxy = new Proxy(token, {
+      get: function get(obj, prop) {
+        if (recording) {
+          tokenKeys.add(prop);
+        }
+
+        return obj[prop];
+      }
+    });
+
+    flush = function flush(componentName, componentToken) {
+      statistic[componentName] = {
+        global: Array.from(tokenKeys),
+        component: componentToken
+      };
+    };
+  }
+
+  return {
+    token: proxy,
+    keys: tokenKeys,
+    flush: flush
+  };
+}

package/lib/theme/index.d.ts

@@ -0,0 +1,21 @@
+import defaultAlgorithm from './themes/default';
+/** Get current context Design Token. Will be different if you are using nest theme config. */
+declare function useToken(): {
+    theme: import("@ant-design/cssinjs").Theme<import("./internal").SeedToken, import("./interface").MapToken>;
+    token: import("./interface").GlobalToken;
+    hashId: string;
+};
+declare const _default: {
+    /** @private Test Usage. Do not use in production. */
+    defaultConfig: {
+        token: import("./internal").SeedToken;
+        hashed: boolean;
+    };
+    /** Default seedToken */
+    defaultSeed: import("./internal").SeedToken;
+    useToken: typeof useToken;
+    defaultAlgorithm: typeof defaultAlgorithm;
+    darkAlgorithm: import("@ant-design/cssinjs").DerivativeFunc<import("./internal").SeedToken, import("./interface").MapToken>;
+    compactAlgorithm: import("@ant-design/cssinjs").DerivativeFunc<import("./internal").SeedToken, import("./interface").MapToken>;
+};
+export default _default;

package/lib/theme/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _internal = require("./internal");
+
+var _default2 = _interopRequireDefault(require("./themes/default"));
+
+var _dark = _interopRequireDefault(require("./themes/dark"));
+
+var _compact = _interopRequireDefault(require("./themes/compact"));
+/* eslint-disable import/prefer-default-export */
+// ZombieJ: We export as object to user but array in internal.
+// This is used to minimize the bundle size for antd package but safe to refactor as object also.
+// Please do not export internal `useToken` directly to avoid something export unexpected.
+
+/** Get current context Design Token. Will be different if you are using nest theme config. */
+
+
+function useToken() {
+  var _useInternalToken = (0, _internal.useToken)(),
+      _useInternalToken2 = (0, _slicedToArray2["default"])(_useInternalToken, 3),
+      theme = _useInternalToken2[0],
+      token = _useInternalToken2[1],
+      hashId = _useInternalToken2[2];
+
+  return {
+    theme: theme,
+    token: token,
+    hashId: hashId
+  };
+}
+
+var _default = {
+  /** @private Test Usage. Do not use in production. */
+  defaultConfig: _internal.defaultConfig,
+
+  /** Default seedToken */
+  defaultSeed: _internal.defaultConfig.token,
+  useToken: useToken,
+  defaultAlgorithm: _default2["default"],
+  darkAlgorithm: _dark["default"],
+  compactAlgorithm: _compact["default"]
+};
+exports["default"] = _default;

package/lib/theme/interface/alias.d.ts

@@ -0,0 +1,133 @@
+import type * as React from 'react';
+import type { MapToken } from './maps';
+export interface AliasToken extends MapToken {
+    colorFillContentHover: string;
+    colorFillAlter: string;
+    colorFillContent: string;
+    colorBgContainerDisabled: string;
+    colorBgTextHover: string;
+    colorBgTextActive: string;
+    colorBorderBg: string;
+    /**
+     * @nameZH 分割线颜色
+     * @desc 用于作为分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致，但是用的是透明色。
+     */
+    colorSplit: string;
+    colorTextPlaceholder: string;
+    colorTextDisabled: string;
+    colorTextHeading: string;
+    colorTextLabel: string;
+    colorTextDescription: string;
+    colorTextLightSolid: string;
+    /** Weak action. Such as `allowClear` or Alert close button */
+    colorIcon: string;
+    /** Weak action hover color. Such as `allowClear` or Alert close button */
+    colorIconHover: string;
+    colorLink: string;
+    colorLinkHover: string;
+    colorLinkActive: string;
+    colorHighlight: string;
+    controlOutline: string;
+    colorWarningOutline: string;
+    colorErrorOutline: string;
+    fontSizeSM: number;
+    fontSize: number;
+    fontSizeLG: number;
+    fontSizeXL: number;
+    /** Operation icon in Select, Cascader, etc. icon fontSize. Normal is same as fontSizeSM */
+    fontSizeIcon: number;
+    /**
+     * @nameZH 一级标题字号
+     * @desc H1 标签所使用的字号
+     * @default 38
+     */
+    fontSizeHeading1: number;
+    /**
+     * @nameZH 二级标题字号
+     * @desc h2 标签所使用的字号
+     * @default 30
+     */
+    fontSizeHeading2: number;
+    /**
+     * @nameZH 三级标题字号
+     * @desc h3 标签使用的字号
+     * @default 24
+     */
+    fontSizeHeading3: number;
+    /**
+     * @nameZH 四级标题字号
+     * @desc h4 标签使用的字号
+     * @default 20
+     */
+    fontSizeHeading4: number;
+    /**
+     * @nameZH 五级标题字号
+     * @desc h5 标签使用的字号
+     * @default 16
+     */
+    fontSizeHeading5: number;
+    /** For heading like h1, h2, h3 or option selected item */
+    fontWeightStrong: number;
+    lineHeight: number;
+    lineHeightLG: number;
+    lineHeightSM: number;
+    lineHeightHeading1: number;
+    lineHeightHeading2: number;
+    lineHeightHeading3: number;
+    lineHeightHeading4: number;
+    lineHeightHeading5: number;
+    controlOutlineWidth: number;
+    controlItemBgHover: string;
+    controlItemBgActive: string;
+    controlItemBgActiveHover: string;
+    controlInteractiveSize: number;
+    controlItemBgActiveDisabled: string;
+    paddingXXS: number;
+    paddingXS: number;
+    paddingSM: number;
+    padding: number;
+    paddingMD: number;
+    paddingLG: number;
+    paddingXL: number;
+    paddingContentHorizontalLG: number;
+    paddingContentHorizontal: number;
+    paddingContentHorizontalSM: number;
+    paddingContentVerticalLG: number;
+    paddingContentVertical: number;
+    paddingContentVerticalSM: number;
+    marginXXS: number;
+    marginXS: number;
+    marginSM: number;
+    margin: number;
+    marginMD: number;
+    marginLG: number;
+    marginXL: number;
+    marginXXL: number;
+    opacityLoading: number;
+    boxShadow: string;
+    boxShadowSecondary: string;
+    linkDecoration: React.CSSProperties['textDecoration'];
+    linkHoverDecoration: React.CSSProperties['textDecoration'];
+    linkFocusDecoration: React.CSSProperties['textDecoration'];
+    controlPaddingHorizontal: number;
+    controlPaddingHorizontalSM: number;
+    screenXS: number;
+    screenXSMin: number;
+    screenXSMax: number;
+    screenSM: number;
+    screenSMMin: number;
+    screenSMMax: number;
+    screenMD: number;
+    screenMDMin: number;
+    screenMDMax: number;
+    screenLG: number;
+    screenLGMin: number;
+    screenLGMax: number;
+    screenXL: number;
+    screenXLMin: number;
+    screenXLMax: number;
+    screenXXL: number;
+    screenXXLMin: number;
+    /** Used for DefaultButton, Switch which has default outline */
+    controlTmpOutline: string;
+}

package/lib/theme/interface/alias.js

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

package/lib/theme/interface/components.d.ts

@@ -0,0 +1,110 @@
+import type { ComponentToken as AlertComponentToken } from '../../alert/style';
+import type { ComponentToken as AnchorComponentToken } from '../../anchor/style';
+import type { ComponentToken as AvatarComponentToken } from '../../avatar/style';
+import type { ComponentToken as BackTopComponentToken } from '../../back-top/style';
+import type { ComponentToken as ButtonComponentToken } from '../../button/style';
+import type { ComponentToken as FloatButtonComponentToken } from '../../float-button/style';
+import type { ComponentToken as CalendarComponentToken } from '../../calendar/style';
+import type { ComponentToken as CardComponentToken } from '../../card/style';
+import type { ComponentToken as CarouselComponentToken } from '../../carousel/style';
+import type { ComponentToken as CascaderComponentToken } from '../../cascader/style';
+import type { ComponentToken as CheckboxComponentToken } from '../../checkbox/style';
+import type { ComponentToken as CollapseComponentToken } from '../../collapse/style';
+import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style';
+import type { ComponentToken as DividerComponentToken } from '../../divider/style';
+import type { ComponentToken as DropdownComponentToken } from '../../dropdown/style';
+import type { ComponentToken as DrawerComponentToken } from '../../drawer/style';
+import type { ComponentToken as EmptyComponentToken } from '../../empty/style';
+import type { ComponentToken as ImageComponentToken } from '../../image/style';
+import type { ComponentToken as InputNumberComponentToken } from '../../input-number/style';
+import type { ComponentToken as LayoutComponentToken } from '../../layout/style';
+import type { ComponentToken as ListComponentToken } from '../../list/style';
+import type { ComponentToken as MentionsComponentToken } from '../../mentions/style';
+import type { ComponentToken as MenuComponentToken } from '../../menu/style';
+import type { ComponentToken as MessageComponentToken } from '../../message/style';
+import type { ComponentToken as ModalComponentToken } from '../../modal/style';
+import type { ComponentToken as NotificationComponentToken } from '../../notification/style';
+import type { ComponentToken as PopconfirmComponentToken } from '../../popconfirm/style';
+import type { ComponentToken as PopoverComponentToken } from '../../popover/style';
+import type { ComponentToken as ProgressComponentToken } from '../../progress/style';
+import type { ComponentToken as RadioComponentToken } from '../../radio/style';
+import type { ComponentToken as RateComponentToken } from '../../rate/style';
+import type { ComponentToken as ResultComponentToken } from '../../result/style';
+import type { ComponentToken as SegmentedComponentToken } from '../../segmented/style';
+import type { ComponentToken as SelectComponentToken } from '../../select/style';
+import type { ComponentToken as SkeletonComponentToken } from '../../skeleton/style';
+import type { ComponentToken as SliderComponentToken } from '../../slider/style';
+import type { ComponentToken as SpaceComponentToken } from '../../space/style';
+import type { ComponentToken as SpinComponentToken } from '../../spin/style';
+import type { ComponentToken as StepsComponentToken } from '../../steps/style';
+import type { ComponentToken as TableComponentToken } from '../../table/style';
+import type { ComponentToken as TabsComponentToken } from '../../tabs/style';
+import type { ComponentToken as TagComponentToken } from '../../tag/style';
+import type { ComponentToken as TimelineComponentToken } from '../../timeline/style';
+import type { ComponentToken as TooltipComponentToken } from '../../tooltip/style';
+import type { ComponentToken as TransferComponentToken } from '../../transfer/style';
+import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
+import type { ComponentToken as UploadComponentToken } from '../../upload/style';
+import type { ComponentToken as TourComponentToken } from '../../tour/style';
+export interface ComponentTokenMap {
+    Affix?: {};
+    Alert?: AlertComponentToken;
+    Anchor?: AnchorComponentToken;
+    Avatar?: AvatarComponentToken;
+    BackTop?: BackTopComponentToken;
+    Badge?: {};
+    Button?: ButtonComponentToken;
+    Breadcrumb?: {};
+    Card?: CardComponentToken;
+    Carousel?: CarouselComponentToken;
+    Cascader?: CascaderComponentToken;
+    Checkbox?: CheckboxComponentToken;
+    Collapse?: CollapseComponentToken;
+    DatePicker?: DatePickerComponentToken;
+    Descriptions?: {};
+    Divider?: DividerComponentToken;
+    Drawer?: DrawerComponentToken;
+    Dropdown?: DropdownComponentToken;
+    Empty?: EmptyComponentToken;
+    FloatButton?: FloatButtonComponentToken;
+    Form?: {};
+    Grid?: {};
+    Image?: ImageComponentToken;
+    Input?: {};
+    InputNumber?: InputNumberComponentToken;
+    Layout?: LayoutComponentToken;
+    List?: ListComponentToken;
+    Mentions?: MentionsComponentToken;
+    Notification?: NotificationComponentToken;
+    Pagination?: {};
+    Popover?: PopoverComponentToken;
+    Popconfirm?: PopconfirmComponentToken;
+    Rate?: RateComponentToken;
+    Radio?: RadioComponentToken;
+    Result?: ResultComponentToken;
+    Segmented?: SegmentedComponentToken;
+    Select?: SelectComponentToken;
+    Skeleton?: SkeletonComponentToken;
+    Slider?: SliderComponentToken;
+    Spin?: SpinComponentToken;
+    Statistic?: {};
+    Switch?: {};
+    Tag?: TagComponentToken;
+    Tree?: {};
+    TreeSelect?: {};
+    Typography?: TypographyComponentToken;
+    Timeline?: TimelineComponentToken;
+    Transfer?: TransferComponentToken;
+    Tabs?: TabsComponentToken;
+    Calendar?: CalendarComponentToken;
+    Steps?: StepsComponentToken;
+    Menu?: MenuComponentToken;
+    Modal?: ModalComponentToken;
+    Message?: MessageComponentToken;
+    Upload?: UploadComponentToken;
+    Tooltip?: TooltipComponentToken;
+    Table?: TableComponentToken;
+    Space?: SpaceComponentToken;
+    Progress?: ProgressComponentToken;
+    Tour?: TourComponentToken;
+}

package/lib/theme/interface/components.js

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

package/lib/theme/interface/index.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentTokenMap } from './components';
+import type { AliasToken } from './alias';
+export type OverrideToken = {
+    [key in keyof ComponentTokenMap]: Partial<ComponentTokenMap[key]> & Partial<AliasToken>;
+};
+/** Final token which contains the components level override */
+export type GlobalToken = AliasToken & ComponentTokenMap;
+export { PresetColors } from './presetColors';
+export type { PresetColorType, ColorPalettes } from './presetColors';
+export type { SeedToken } from './seeds';
+export type { MapToken, ColorMapToken, ColorNeutralMapToken, CommonMapToken, HeightMapToken, SizeMapToken, FontSizeMapToken, StyleMapToken, } from './maps';
+export type { AliasToken } from './alias';
+export type { ComponentTokenMap } from './components';

package/lib/theme/interface/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PresetColors", {
+  enumerable: true,
+  get: function get() {
+    return _presetColors.PresetColors;
+  }
+});
+
+var _presetColors = require("./presetColors");