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

package/src/client/antd-token-previewer/token-panel-pro/TokenDetail.tsx

@@ -1,113 +0,0 @@
-import { Tooltip } from 'antd';
-import type { MutableTheme } from 'antd-token-previewer';
-import classNames from 'classnames';
-import type { FC } from 'react';
-import React, { useMemo } from 'react';
-import TokenInput from '../TokenInput';
-import type { TokenValue } from '../interface';
-import { useLocale } from '../locale';
-import { mapRelatedAlias } from '../meta/TokenRelation';
-import deepUpdateObj from '../utils/deepUpdateObj';
-import getDesignToken from '../utils/getDesignToken';
-import getValueByPath from '../utils/getValueByPath';
-import makeStyle from '../utils/makeStyle';
-import { getRelatedComponents } from '../utils/statistic';
-import tokenMeta from './token-meta.json';
-
-const useStyle = makeStyle('TokenDetail', (token) => ({
-  '.token-panel-token-detail': {
-    '.token-panel-pro-token-collapse-map-collapse-token-description': {
-      color: token.colorTextPlaceholder,
-      marginBottom: 8,
-      fontSize: 12,
-    },
-
-    '.token-panel-pro-token-collapse-map-collapse-token-usage-tag-container': {
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      color: token.colorTextSecondary,
-    },
-
-    '.token-panel-pro-token-collapse-map-collapse-token-usage-tag': {
-      display: 'inline-block',
-      marginInlineEnd: 8,
-      borderRadius: 4,
-      height: 20,
-      padding: '0 8px',
-      fontSize: 12,
-      lineHeight: '20px',
-      backgroundColor: 'rgba(0,0,0,0.015)',
-    },
-
-    '.token-panel-pro-token-collapse-map-collapse-token-inputs': {
-      padding: '8px 10px',
-      backgroundColor: 'rgba(0,0,0,0.02)',
-      marginTop: 12,
-      '> *:not(:last-child)': {
-        marginBottom: 8,
-      },
-    },
-  },
-}));
-
-export type TokenDetailProps = {
-  themes: MutableTheme[];
-  path: string[];
-  tokenName: string;
-  className?: string;
-  style?: React.CSSProperties;
-};
-
-const TokenDetail: FC<TokenDetailProps> = ({ themes, path, tokenName, className, style }) => {
-  const [wrapSSR, hashId] = useStyle();
-  const tokenPath = [...path, tokenName];
-  const locale = useLocale();
-
-  const handleTokenChange = (theme: MutableTheme) => (value: TokenValue) => {
-    theme.onThemeChange?.(deepUpdateObj(theme.config, [...path, tokenName], value), [...path, tokenName]);
-  };
-
-  const relatedComponents = useMemo(() => {
-    return getRelatedComponents([tokenName, ...((mapRelatedAlias as any)[tokenName] ?? [])]);
-  }, [tokenName]);
-
-  return wrapSSR(
-    <div className={classNames(className, hashId, 'token-panel-token-detail')} style={style}>
-      <div className="token-panel-pro-token-collapse-map-collapse-token-description">
-        {(tokenMeta as any)[tokenName]?.[locale._lang === 'zh-CN' ? 'desc' : 'descEn']}
-      </div>
-      {relatedComponents.length > 0 && (
-        <Tooltip title={getRelatedComponents(tokenName).join(', ')} placement="topLeft">
-          <div className="token-panel-pro-token-collapse-map-collapse-token-usage-tag-container">
-            {relatedComponents.map((item) => (
-              <span key={item} className="token-panel-pro-token-collapse-map-collapse-token-usage-tag">
-                {item}
-              </span>
-            ))}
-          </div>
-        </Tooltip>
-      )}
-      <div className="token-panel-pro-token-collapse-map-collapse-token-inputs">
-        {themes.map((themeItem) => {
-          return (
-            <div key={themeItem.key}>
-              <TokenInput
-                hideTheme={themes.length === 1}
-                theme={themeItem}
-                canReset={themeItem.getCanReset?.(tokenPath)}
-                onReset={() => themeItem.onReset?.(tokenPath)}
-                onChange={handleTokenChange(themeItem)}
-                value={
-                  getValueByPath(themeItem.config, tokenPath) ?? (getDesignToken(themeItem.config) as any)[tokenName]
-                }
-              />
-            </div>
-          );
-        })}
-      </div>
-    </div>,
-  );
-};
-
-export default TokenDetail;

package/src/client/antd-token-previewer/token-panel-pro/TokenPreview.tsx

@@ -1,206 +0,0 @@
-import type { ThemeConfig } from 'antd/es/config-provider/context';
-import type { FC } from 'react';
-import React from 'react';
-import getColorBgImg from '../utils/getColorBgImg';
-import getDesignToken from '../utils/getDesignToken';
-
-export type TokenPreviewProps = {
-  theme: ThemeConfig;
-  tokenName: string;
-  type?: string;
-};
-
-const TokenPreview: FC<TokenPreviewProps> = ({ theme, tokenName, type }) => {
-  if (type === 'Color') {
-    return (
-      <div
-        style={{
-          background: `${getColorBgImg(false)} 0% 0% / 28px`,
-          width: '100%',
-          height: '100%',
-          position: 'relative',
-        }}
-      >
-        <div
-          style={{
-            height: '100%',
-            width: '100%',
-            backgroundColor: (getDesignToken(theme) as any)[tokenName],
-            transition: 'background-color 0.2s',
-          }}
-        />
-      </div>
-    );
-  }
-  if (type === 'FontSize') {
-    return (
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          position: 'relative',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          overflow: 'hidden',
-          background: `${getColorBgImg(false)} 0% 0% / 28px`,
-          fontSize: (getDesignToken(theme) as any)[tokenName],
-          fontWeight: 700,
-        }}
-      >
-        <span>Aa</span>
-      </div>
-    );
-  }
-  if (type === 'LineHeight') {
-    return (
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          position: 'relative',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          fontWeight: 700,
-          overflow: 'hidden',
-          background: `${getColorBgImg(false)} 0% 0% / 28px`,
-        }}
-      >
-        <span
-          style={{
-            fontSize: (getDesignToken(theme) as any)[tokenName.replace('lineHeight', 'fontSize')],
-            lineHeight: (getDesignToken(theme) as any)[tokenName],
-            background: '#fff2f0',
-            paddingInline: 8,
-          }}
-        >
-          Aa
-        </span>
-      </div>
-    );
-  }
-  if (type === 'Margin') {
-    const margin = (getDesignToken(theme) as any)[tokenName];
-    return (
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          position: 'relative',
-          overflow: 'hidden',
-          background: `${getColorBgImg(false)} 0% 0% / 28px`,
-        }}
-      >
-        <div
-          style={{
-            width: '100%',
-            height: '100%',
-            overflow: 'hidden',
-            background: '#fff1b8',
-            transform: 'translate(10%, 10%) scale(0.8)',
-          }}
-        >
-          <div
-            style={{
-              marginLeft: margin,
-              marginTop: margin,
-              width: `calc(100% - ${margin}px)`,
-              height: `calc(100% - ${margin}px)`,
-              background: '#bae0ff',
-            }}
-          />
-        </div>
-      </div>
-    );
-  }
-  if (type === 'Padding') {
-    const padding = (getDesignToken(theme) as any)[tokenName];
-    return (
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          position: 'relative',
-          overflow: 'hidden',
-          background: `${getColorBgImg(false)} 0% 0% / 28px`,
-        }}
-      >
-        <div
-          style={{
-            width: '100%',
-            height: '100%',
-            overflow: 'hidden',
-            background: '#d9f7be',
-            transform: 'translate(10%, 10%) scale(0.8)',
-            paddingLeft: padding,
-            paddingTop: padding,
-          }}
-        >
-          <div
-            style={{
-              width: `100%`,
-              height: `100%`,
-              background: '#bae0ff',
-            }}
-          />
-        </div>
-      </div>
-    );
-  }
-  if (type === 'BorderRadius') {
-    return (
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          position: 'relative',
-          overflow: 'hidden',
-          background: `${getColorBgImg(false)} 0% 0% / 28px`,
-        }}
-      >
-        <div
-          style={{
-            width: '100%',
-            height: '100%',
-            overflow: 'hidden',
-            transform: 'translate(30%, 30%)',
-            border: '2px solid rgba(0,0,0,0.45)',
-            background: '#fff',
-            borderRadius: (getDesignToken(theme) as any)[tokenName],
-          }}
-        />
-      </div>
-    );
-  }
-  if (type === 'BoxShadow') {
-    return (
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          position: 'relative',
-          overflow: 'hidden',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          background: `${getColorBgImg(false)} 0% 0% / 28px`,
-        }}
-      >
-        <div
-          style={{
-            width: '60%',
-            height: '50%',
-            borderRadius: 6,
-            background: '#fff',
-            border: '1px solid #d9d9d9',
-            boxShadow: (getDesignToken(theme) as any)[tokenName],
-          }}
-        />
-      </div>
-    );
-  }
-  return null;
-};
-
-export default TokenPreview;

package/src/client/antd-token-previewer/token-panel-pro/calcCustomToken.ts

@@ -1,18 +0,0 @@
-import { TinyColor } from '@ctrl/tinycolor';
-
-const calcCustomToken = (name: string, value: any) => {
-  if (name === 'colorSettings') {
-    const color = new TinyColor(value);
-    return {
-      colorSettings: value,
-      colorBgSettingsHover: color.setAlpha(0.06).toHex8String(),
-      colorBorderSettingsHover: color.setAlpha(0.3).toHex8String(),
-    };
-  }
-
-  return {
-    [name]: value,
-  };
-};
-
-export default calcCustomToken;

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

@@ -1,112 +0,0 @@
-import { Tabs } from 'antd';
-import type { Theme } from 'antd-token-previewer';
-import classNames from 'classnames';
-import type { FC } from 'react';
-import React, { useEffect, useMemo, useState } from 'react';
-import type { SelectedToken } from '../interface';
-import { useLocale } from '../locale';
-import { tokenCategory } from '../meta';
-import type { TokenGroup } from '../meta/interface';
-import makeStyle from '../utils/makeStyle';
-import AliasPanel from './AliasPanel';
-import TokenContent from './TokenContent';
-
-const useStyle = makeStyle('TokenPanelPro', (token) => ({
-  '.token-panel-pro': {
-    height: '100%',
-    display: 'flex',
-    borderInlineEnd: `1px solid ${token.colorBorderSecondary}`,
-    [`.token-panel-pro-tabs${token.rootCls}-tabs`]: {
-      height: '100%',
-      overflow: 'auto',
-      [`${token.rootCls}-tabs-content`]: {
-        height: '100%',
-        [`${token.rootCls}-tabs-tabpane`]: {
-          height: '100%',
-        },
-      },
-    },
-  },
-}));
-
-export type TokenPanelProProps = {
-  className?: string;
-  style?: React.CSSProperties;
-  theme: Theme;
-  selectedTokens?: SelectedToken;
-  onTokenSelect?: (token: string | string[], type: keyof SelectedToken) => void;
-  infoFollowPrimary?: boolean;
-  onInfoFollowPrimaryChange?: (value: boolean) => void;
-  aliasOpen?: boolean;
-  onAliasOpenChange?: (value: boolean) => void;
-  activeTheme?: string;
-};
-
-const TokenPanelPro: FC<TokenPanelProProps> = ({
-  className,
-  style,
-  theme,
-  selectedTokens,
-  onTokenSelect,
-  infoFollowPrimary,
-  onInfoFollowPrimaryChange,
-  aliasOpen,
-  onAliasOpenChange,
-}) => {
-  const [wrapSSR, hashId] = useStyle();
-  const [activeGroup, setActiveGroup] = useState<string>('brandColor');
-  const locale = useLocale();
-
-  const activeCategory = useMemo(() => {
-    return tokenCategory.reduce<TokenGroup<string> | undefined>((result, category) => {
-      return result ?? category.groups.find((group) => group.key === activeGroup);
-    }, undefined);
-  }, [activeGroup]);
-
-  useEffect(() => {
-    onTokenSelect?.(activeCategory?.seedToken ?? [], 'seed');
-  }, [activeCategory]);
-
-  return wrapSSR(
-    <div className={classNames(hashId, className, 'token-panel-pro')} style={style}>
-      <Tabs
-        defaultActiveKey="color"
-        tabBarGutter={32}
-        tabBarStyle={{ padding: '0 16px', margin: 0 }}
-        style={{ height: '100%', flex: '0 0 540px' }}
-        className="token-panel-pro-tabs"
-        onChange={(key) => {
-          setActiveGroup(tokenCategory.find((category) => category.nameEn === key)?.groups[0].key ?? '');
-        }}
-        items={tokenCategory.map((category) => ({
-          key: category.nameEn,
-          label: locale._lang === 'zh-CN' ? category.name : category.nameEn,
-          children: (
-            <TokenContent
-              category={category}
-              theme={theme}
-              selectedTokens={selectedTokens}
-              onTokenSelect={onTokenSelect}
-              infoFollowPrimary={infoFollowPrimary}
-              onInfoFollowPrimaryChange={onInfoFollowPrimaryChange}
-              activeGroup={activeGroup}
-              onActiveGroupChange={setActiveGroup}
-            />
-          ),
-        }))}
-      />
-      <AliasPanel
-        open={aliasOpen}
-        description={activeCategory?.aliasTokenDescription}
-        onOpenChange={(value) => onAliasOpenChange?.(value)}
-        activeSeeds={activeCategory?.seedToken}
-        theme={theme}
-        style={{ flex: aliasOpen ? '0 0 320px' : 'none', width: 0 }}
-        selectedTokens={selectedTokens}
-        onTokenSelect={onTokenSelect}
-      />
-    </div>,
-  );
-};
-
-export default TokenPanelPro;