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

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

@@ -0,0 +1,189 @@
+import {
+  AlignLeftOutlined,
+  BgColorsOutlined,
+  BorderHorizontalOutlined,
+  BulbOutlined,
+  CaretRightOutlined,
+  ControlOutlined,
+  FileUnknownOutlined,
+  FontColorsOutlined,
+  FontSizeOutlined,
+  FormatPainterOutlined,
+  HighlightOutlined,
+  RadiusSettingOutlined,
+  TabletOutlined,
+} from '@ant-design/icons';
+import { Collapse, Space } from 'antd';
+import type { ThemeConfig } from 'antd/es/config-provider/context';
+import classNames from 'classnames';
+import useMergedState from 'rc-util/es/hooks/useMergedState';
+import type { ReactNode } from 'react';
+import React from 'react';
+import { Motion, ShapeLine } from '../../icons';
+import type { MutableTheme, TokenValue } from '../../interface';
+import type { TokenType } from '../../utils/classifyToken';
+import makeStyle from '../../utils/makeStyle';
+import { getRelatedComponents } from '../../utils/statistic';
+import TokenItem from '../token-item';
+
+const { Panel } = Collapse;
+
+interface TokenCardProps {
+  title: string;
+  icon?: ReactNode;
+  tokenArr: string[];
+  tokenPath: string[];
+  keyword?: string;
+  hideUseless?: boolean;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  activeToken?: string;
+  onActiveTokenChange?: (token: string | undefined) => void;
+  onTokenChange?: (theme: MutableTheme, tokenName: string, value: TokenValue) => void;
+  themes: MutableTheme[];
+  selectedTokens?: string[];
+  onTokenSelect?: (token: string) => void;
+  enableTokenSelect?: boolean;
+  hideUsageCount?: boolean;
+  placeholder?: ReactNode;
+  fallback?: (config: ThemeConfig) => Record<string, TokenValue>;
+}
+
+export const IconMap: Record<TokenType, ReactNode> = {
+  seed: <BulbOutlined />,
+  colorText: <FontColorsOutlined />,
+  colorBg: <BgColorsOutlined />,
+  colorSplit: <BorderHorizontalOutlined />,
+  colorFill: <HighlightOutlined />,
+  colorCommon: <FormatPainterOutlined />,
+  space: <ShapeLine />,
+  font: <FontSizeOutlined />,
+  line: <AlignLeftOutlined />,
+  screen: <TabletOutlined />,
+  motion: <Motion />,
+  radius: <RadiusSettingOutlined />,
+  control: <ControlOutlined />,
+  others: <FileUnknownOutlined />,
+};
+export const TextMap: Record<TokenType, string> = {
+  seed: 'Seed Token',
+  colorCommon: 'Common Color 通用颜色',
+  colorText: 'Text Color 文本颜色',
+  colorBg: 'Background Color 背景颜色',
+  colorFill: 'Fill Color 填充颜色',
+  colorSplit: 'Split Color 分割线颜色',
+  space: 'Space 间距',
+  font: 'Font 文本',
+  line: 'Line 线',
+  screen: 'Screen 屏幕',
+  motion: 'Motion 动画',
+  radius: 'Radius 圆角',
+  control: 'Control 控件',
+  others: 'Others 未分类',
+};
+
+const useStyle = makeStyle('TokenCard', (token) => ({
+  '.token-card': {
+    width: '100%',
+    height: 'auto',
+    borderRadius: token.borderRadiusLG,
+    border: `1px solid rgba(0,0,0,0.09)`,
+    marginBottom: token.marginSM,
+
+    [`${token.rootCls}-collapse.token-card-collapse`]: {
+      [`> ${token.rootCls}-collapse-item > ${token.rootCls}-collapse-content > ${token.rootCls}-collapse-content-box`]:
+        {
+          padding: {
+            _skip_check_: true,
+            value: `0 ${token.paddingXS}px 12px !important`,
+          },
+        },
+    },
+  },
+  [`.token-card ${token.rootCls}-input-group >${token.rootCls}-input:not(:first-child):not(:last-child)`]: {
+    background: 'white',
+    borderRadius: token.borderRadiusLG,
+  },
+}));
+
+export default ({
+  title,
+  icon,
+  tokenArr,
+  keyword,
+  hideUseless,
+  defaultOpen,
+  open: customOpen,
+  onOpenChange,
+  activeToken,
+  onActiveTokenChange,
+  onTokenChange,
+  tokenPath,
+  selectedTokens,
+  themes,
+  onTokenSelect,
+  enableTokenSelect,
+  hideUsageCount,
+  fallback,
+  placeholder,
+}: TokenCardProps) => {
+  const [wrapSSR, hashId] = useStyle();
+  const [open, setOpen] = useMergedState(false, {
+    onChange: onOpenChange,
+    defaultValue: defaultOpen,
+    value: customOpen,
+  });
+
+  return wrapSSR(
+    <div className={classNames('token-card', hashId)}>
+      <Collapse
+        ghost
+        expandIcon={({ isActive }) => (
+          <CaretRightOutlined rotate={isActive ? 450 : 360} style={{ fontSize: 12, color: 'rgba(0,0,0,0.45)' }} />
+        )}
+        expandIconPosition="right"
+        className="token-card-collapse"
+        activeKey={open ? '1' : undefined}
+        onChange={(keys) => {
+          // onOpenChange?.(keys.length > 0);
+          setOpen(keys.length > 0);
+        }}
+      >
+        <Panel
+          header={
+            <Space size="small">
+              <span>{title}</span>
+              <span>{icon}</span>
+            </Space>
+          }
+          key="1"
+        >
+          {tokenArr
+            .filter(
+              (tokenName) =>
+                (!keyword || tokenName.toLowerCase().includes(keyword.toLowerCase())) &&
+                (!hideUseless || getRelatedComponents(tokenName).length > 0),
+            )
+            .map((tokenName) => (
+              <TokenItem
+                tokenPath={tokenPath}
+                onActiveChange={(active) => onActiveTokenChange?.(active ? tokenName : undefined)}
+                active={activeToken === tokenName}
+                tokenName={tokenName}
+                key={tokenName}
+                onTokenChange={onTokenChange}
+                themes={themes}
+                selectedTokens={selectedTokens}
+                onTokenSelect={onTokenSelect}
+                enableTokenSelect={enableTokenSelect}
+                hideUsageCount={hideUsageCount}
+                fallback={fallback}
+              />
+            ))}
+          {tokenArr.length === 0 && placeholder}
+        </Panel>
+      </Collapse>
+    </div>,
+  );
+};

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

@@ -0,0 +1,308 @@
+import { CaretRightOutlined } from '@ant-design/icons';
+import { Collapse, Space } from 'antd';
+import type { ThemeConfig } from 'antd/es/config-provider/context';
+import classNames from 'classnames';
+import type { CSSProperties } from 'react';
+import React, { useEffect, useMemo } from 'react';
+import ColorPreview from '../../ColorPreview';
+import TokenInput from '../../TokenInput';
+import { Pick } from '../../icons';
+import type { MutableTheme, TokenValue } from '../../interface';
+import getValueByPath from '../../utils/getValueByPath';
+import isColor from '../../utils/isColor';
+import makeStyle from '../../utils/makeStyle';
+import { getRelatedComponents } from '../../utils/statistic';
+
+const { Panel } = Collapse;
+
+interface TokenItemProps {
+  tokenName: string;
+  tokenPath: string[];
+  active?: boolean;
+  onActiveChange?: (active: boolean) => void;
+  onTokenChange?: (theme: MutableTheme, tokenName: string, value: TokenValue) => void;
+  themes: MutableTheme[];
+  selectedTokens?: string[];
+  onTokenSelect?: (token: string) => void;
+  enableTokenSelect?: boolean;
+  hideUsageCount?: boolean;
+  fallback?: (config: ThemeConfig) => Record<string, TokenValue>;
+}
+
+const AdditionInfo = ({
+  info,
+  visible,
+  tokenName,
+  style,
+  dark,
+  ...rest
+}: {
+  info: string | number;
+  visible: boolean;
+  tokenName: string;
+  dark?: boolean;
+  style?: CSSProperties;
+  className?: string;
+}) => {
+  if (typeof info === 'string' && isColor(info)) {
+    return <ColorPreview dark={dark} color={String(info)} style={{ display: visible ? 'block' : 'none', ...style }} />;
+  }
+
+  if (info.toString().length < 6 && String(info) !== '') {
+    return (
+      <div
+        style={{
+          height: 20,
+          overflow: 'hidden',
+          backgroundColor: 'rgba(0,0,0,0.04)',
+          borderRadius: '8px',
+          display: visible ? 'block' : 'none',
+          padding: '0 6px',
+          lineHeight: '20px',
+          ...style,
+        }}
+        {...rest}
+      >
+        {info}
+      </div>
+    );
+  }
+
+  return null;
+};
+
+const ShowUsageButton = ({ selected, toggleSelected }: { selected: boolean; toggleSelected: (v: boolean) => void }) => {
+  return (
+    <Pick
+      style={{
+        color: selected ? '#1890ff' : undefined,
+        cursor: 'pointer',
+        fontSize: 16,
+        transition: 'color 0.3s',
+        marginInlineStart: 12,
+        verticalAlign: 'middle',
+      }}
+      onClick={() => toggleSelected(!selected)}
+    />
+  );
+};
+
+const useStyle = makeStyle('TokenItem', (token) => ({
+  [`${token.rootCls}-collapse.previewer-token-item-collapse`]: {
+    [`.previewer-token-item${token.rootCls}-collapse-item`]: {
+      transition: `background-color ${token.motionDurationSlow}`,
+      borderRadius: { _skip_check_: true, value: `4px !important` },
+
+      [`&:not(${token.rootCls}-collapse-item-active):hover`]: {
+        backgroundColor: '#f5f5f5',
+      },
+
+      [`> ${token.rootCls}-collapse-header`]: {
+        padding: '12px 8px',
+      },
+
+      [`${token.rootCls}-collapse-header-text`]: {
+        flex: 1,
+        width: 0,
+      },
+      [`${token.rootCls}-collapse-content-box`]: {
+        padding: '0 4px',
+      },
+      [`${token.rootCls}-collapse-expand-icon`]: {
+        paddingInlineEnd: `${token.paddingXXS}px !important`,
+      },
+      '.previewer-token-count': {
+        height: 16,
+        fontSize: token.fontSizeSM,
+        lineHeight: '16px',
+        borderRadius: 100,
+        paddingInline: token.paddingXXS * 1.5,
+        color: token.colorTextSecondary,
+        backgroundColor: token.colorFillAlter,
+      },
+
+      '.previewer-token-item-name': {
+        transition: 'color 0.3s',
+      },
+
+      '.previewer-token-item-highlighted.previewer-token-item-name': {
+        color: `${token.colorPrimary} !important`,
+      },
+
+      '&:hover .previewer-token-preview': {
+        '> .previewer-color-preview:not(:last-child)': {
+          transform: 'translateX(-100%)',
+          marginInlineEnd: 4,
+        },
+      },
+
+      '.previewer-token-preview': {
+        display: 'flex',
+        alignItems: 'center',
+        position: 'relative',
+
+        '> .previewer-color-preview': {
+          position: 'absolute',
+          insetInlineEnd: 0,
+          top: 0,
+          bottom: 0,
+          margin: 'auto',
+        },
+
+        '> .previewer-color-preview:not(:last-child)': {
+          transform: 'translateX(-50%)',
+          marginInlineEnd: 0,
+          transition: 'transform 0.3s, margin-right 0.3s',
+        },
+
+        '> *:not(:last-child)': {
+          marginInlineEnd: 4,
+        },
+      },
+    },
+  },
+}));
+
+export const getTokenItemId = (token: string) => `previewer-token-panel-item-${token}`;
+
+export default ({
+  tokenName,
+  active,
+  onActiveChange,
+  onTokenChange,
+  tokenPath,
+  selectedTokens,
+  themes,
+  onTokenSelect,
+  enableTokenSelect,
+  hideUsageCount,
+  fallback,
+}: TokenItemProps) => {
+  const [infoVisible, setInfoVisible] = React.useState(false);
+  const [wrapSSR, hashId] = useStyle();
+
+  useEffect(() => {
+    if (active) {
+      setInfoVisible(true);
+    }
+  }, [active]);
+
+  const handleTokenChange = (theme: MutableTheme, value: TokenValue) => {
+    onTokenChange?.(theme, tokenName, value);
+  };
+
+  const count = useMemo(() => getRelatedComponents(tokenName).length, [tokenName]);
+
+  return wrapSSR(
+    <div onMouseEnter={() => onActiveChange?.(false)}>
+      <Collapse
+        collapsible="header"
+        ghost
+        onChange={(key) => setInfoVisible(key.length > 0)}
+        className={classNames('previewer-token-item-collapse', hashId)}
+        expandIcon={({ isActive }) => (
+          <CaretRightOutlined rotate={isActive ? 90 : 0} style={{ fontSize: 12, cursor: 'pointer' }} />
+        )}
+        activeKey={infoVisible ? tokenName : undefined}
+      >
+        <Panel
+          key={tokenName}
+          className="previewer-token-item"
+          header={
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+              }}
+              id={getTokenItemId(tokenName)}
+            >
+              <span
+                style={{
+                  flex: 1,
+                  width: 0,
+                  display: 'flex',
+                  overflow: 'hidden',
+                  alignItems: 'center',
+                }}
+              >
+                <span
+                  title={tokenName}
+                  className={classNames('previewer-token-item-name', {
+                    'previewer-token-item-highlighted': active,
+                  })}
+                  style={{
+                    marginInlineEnd: '5px',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                  }}
+                >
+                  {tokenName}
+                </span>
+                {!hideUsageCount && <span className="previewer-token-count">{count}</span>}
+              </span>
+              {!infoVisible && (
+                <div
+                  className="previewer-token-preview"
+                  style={{
+                    minWidth: themes.length * 20 + (themes.length - 1) * 4,
+                  }}
+                >
+                  {themes.map(({ config, key }, index) => {
+                    return (
+                      <AdditionInfo
+                        key={key}
+                        dark={key === 'dark'}
+                        tokenName={tokenName}
+                        info={getValueByPath(config, [...tokenPath, tokenName]) ?? fallback?.(config)[tokenName] ?? ''}
+                        visible={!infoVisible}
+                        style={{
+                          zIndex: 10 - index,
+                        }}
+                      />
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          }
+          extra={
+            enableTokenSelect ? (
+              <ShowUsageButton
+                selected={!!selectedTokens?.includes(tokenName)}
+                toggleSelected={() => {
+                  onTokenSelect?.(tokenName);
+                }}
+              />
+            ) : undefined
+          }
+        >
+          <Space
+            direction="vertical"
+            style={{
+              background: '#fafafa',
+              borderRadius: 4,
+              padding: 8,
+              width: '100%',
+            }}
+          >
+            {themes.map((theme) => {
+              return (
+                <div key={theme.key}>
+                  <TokenInput
+                    hideTheme={themes.length === 1}
+                    theme={theme}
+                    onChange={(value) => handleTokenChange(theme, value)}
+                    value={
+                      getValueByPath(theme.config, [...tokenPath, tokenName]) ?? fallback?.(theme.config)[tokenName]
+                    }
+                  />
+                </div>
+              );
+            })}
+          </Space>
+        </Panel>
+      </Collapse>
+    </div>,
+  );
+};