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

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

@@ -0,0 +1,113 @@
+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

@@ -0,0 +1,206 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,112 @@
+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;