@nocobase/plugin-theme-editor 0.11.1-alpha.4 → 0.12.0-alpha.1

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

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

@@ -1,308 +0,0 @@
-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>,
-  );
-};