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

package/src/client/antd-token-previewer/previewer.tsx

@@ -1,327 +0,0 @@
-import { Button, Layout, theme as antdTheme, message } from 'antd';
-import classNames from 'classnames';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { FilterMode } from './FilterPanel';
-import FilterPanel from './FilterPanel';
-import type { ThemeSelectProps } from './ThemeSelect';
-import ThemeSelect from './ThemeSelect';
-import ComponentPanel from './component-panel';
-import { Arrow, CompactTheme, DarkTheme } from './icons';
-import type { MutableTheme, PreviewerProps } from './interface';
-import type { TokenPanelRef } from './token-panel';
-import TokenPanel from './token-panel';
-import type { TokenType } from './utils/classifyToken';
-import makeStyle from './utils/makeStyle';
-
-const { darkAlgorithm } = antdTheme;
-
-const { Header, Sider, Content } = Layout;
-const SIDER_WIDTH = 340;
-
-const useStyle = makeStyle('layout', (token) => ({
-  [`.previewer-layout${token.rootCls}-layout`]: {
-    [`${token.rootCls}-layout-header`]: {
-      backgroundColor: 'white !important',
-      display: 'flex',
-      alignItems: 'center',
-      borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
-      paddingInline: `${token.paddingLG}px !important`,
-    },
-
-    [`${token.rootCls}-layout-sider`]: {
-      padding: 0,
-      borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
-      transition: `all ${token.motionDurationSlow}`,
-      overflow: 'visible !important',
-
-      [`${token.rootCls}-btn${token.rootCls}-btn-circle.previewer-sider-collapse-btn`]: {
-        position: 'absolute',
-        transform: 'translateX(50%)',
-        border: 'none',
-        boxShadow: '0 2px 8px -2px rgba(0,0,0,0.05), 0 1px 4px -1px rgba(25,15,15,0.07), 0 0 1px 0 rgba(0,0,0,0.08)',
-        marginTop: token.margin,
-        insetInlineEnd: 0,
-        color: 'rgba(0,0,0,0.25)',
-
-        '&:hover': {
-          color: 'rgba(0,0,0,0.45)',
-          boxShadow: '0 2px 8px -2px rgba(0,0,0,0.18), 0 1px 4px -1px rgba(25,15,15,0.18), 0 0 1px 0 rgba(0,0,0,0.18)',
-        },
-
-        '.previewer-sider-collapse-btn-icon': {
-          fontSize: 16,
-          marginTop: 4,
-          transition: 'transform 0.3s',
-        },
-
-        '&-collapsed': {
-          borderRadius: { _skip_check_: true, value: '0 100px 100px 0' },
-          transform: 'translateX(90%)',
-          '.previewer-sider-collapse-btn-icon': {
-            transform: 'rotate(180deg)',
-          },
-        },
-      },
-
-      '.previewer-sider-handler': {
-        position: 'absolute',
-        insetInlineEnd: 0,
-        height: '100%',
-        width: 8,
-        transform: 'translateX(50%)',
-        cursor: 'ew-resize',
-        opacity: 0,
-        backgroundColor: 'transparent',
-      },
-    },
-  },
-}));
-
-const Previewer: React.FC<PreviewerProps> = ({ onSave, showTheme, theme, onThemeChange }) => {
-  const [wrapSSR, hashId] = useStyle();
-  const [selectedTokens, setSelectedTokens] = useState<string[]>([]);
-  const [siderVisible, setSiderVisible] = useState<boolean>(true);
-  const [siderWidth, setSiderWidth] = useState<number>(SIDER_WIDTH);
-  const [filterMode, setFilterMode] = useState<FilterMode>('filter');
-  const [filterTypes, setFilterTypes] = useState<TokenType[]>([]);
-
-  const tokenPanelRef = useRef<TokenPanelRef>(null);
-  const dragRef = useRef(false);
-  const siderRef = useRef<HTMLDivElement>(null);
-
-  const defaultThemes = useMemo<ThemeSelectProps['themes']>(
-    () => [
-      {
-        name: '默认主题',
-        key: 'default',
-        config: {},
-        fixed: true,
-      },
-      {
-        name: '暗色主题',
-        key: 'dark',
-        config: {
-          algorithm: darkAlgorithm,
-        },
-        icon: <DarkTheme style={{ fontSize: 16 }} />,
-        closable: true,
-      },
-      {
-        name: '紧凑主题',
-        key: 'compact',
-        config: {},
-        icon: <CompactTheme style={{ fontSize: 16 }} />,
-        closable: true,
-      },
-    ],
-    [],
-  );
-
-  const [themes, setThemes] = useState<ThemeSelectProps['themes']>(
-    theme
-      ? [
-          {
-            ...theme,
-            fixed: true,
-          },
-        ]
-      : defaultThemes,
-  );
-
-  const [shownThemes, setShownThemes] = useState<string[]>(showTheme && !theme ? ['default', 'dark'] : [themes[0].key]);
-  const [enabledThemes, setEnabledThemes] = useState<string[]>(
-    showTheme && !theme ? ['default', 'dark'] : [themes[0].key],
-  );
-
-  useEffect(() => {
-    setThemes(
-      theme
-        ? [
-            {
-              ...theme,
-              fixed: true,
-            },
-          ]
-        : defaultThemes,
-    );
-    setShownThemes((prev) => (theme ? [theme.key] : prev));
-    setEnabledThemes((prev) => (theme ? [theme.key] : prev));
-  }, [defaultThemes, theme]);
-
-  useEffect(() => {
-    const handleMouseUp = () => {
-      dragRef.current = false;
-      document.body.style.cursor = '';
-      if (siderRef.current) {
-        siderRef.current.style.transition = 'all 0.3s';
-      }
-    };
-    const handleMouseMove = (e: MouseEvent) => {
-      if (dragRef.current) {
-        e.preventDefault();
-        setSiderWidth(e.clientX > SIDER_WIDTH ? e.clientX : SIDER_WIDTH);
-      }
-    };
-
-    window.addEventListener('mouseup', handleMouseUp);
-    window.addEventListener('mousemove', handleMouseMove);
-
-    return () => {
-      window.removeEventListener('mouseup', handleMouseUp);
-      window.removeEventListener('mousemove', handleMouseMove);
-    };
-  }, []);
-
-  const handleTokenClick = useCallback((tokenName: string) => {
-    tokenPanelRef.current?.scrollToToken(tokenName);
-  }, []);
-
-  const mutableThemes = useMemo(
-    () =>
-      enabledThemes.map<MutableTheme>((item) => {
-        const themeEntity = themes.find((themeItem) => themeItem.key === item)!;
-        return {
-          name: themeEntity.name,
-          key: themeEntity.key,
-          config: themeEntity.config,
-          onThemeChange: (newTheme) => {
-            if (themeEntity.key === theme?.key) {
-              onThemeChange?.(newTheme);
-            } else {
-              setThemes((prev) =>
-                prev.map((themeItem) =>
-                  themeItem.key === themeEntity.key
-                    ? {
-                        ...themeItem,
-                        config: newTheme,
-                      }
-                    : themeItem,
-                ),
-              );
-            }
-          },
-        };
-      }),
-    [enabledThemes, onThemeChange, theme?.key, themes],
-  );
-
-  const componentPanel = useMemo(
-    () => (
-      <ComponentPanel
-        filterMode={filterMode}
-        selectedTokens={selectedTokens}
-        themes={mutableThemes}
-        onTokenClick={handleTokenClick}
-        style={{ flex: 1, height: 0, marginTop: 12 }}
-      />
-    ),
-    [filterMode, handleTokenClick, mutableThemes, selectedTokens],
-  );
-
-  return wrapSSR(
-    <Layout className={classNames('previewer-layout', hashId)}>
-      <Header className="previewer-header">
-        <span style={{ fontSize: 16, fontWeight: 'bold', marginRight: 16 }}>主题预览器</span>
-        {showTheme && (
-          <div>
-            <ThemeSelect
-              showAddTheme
-              enabledThemes={enabledThemes}
-              shownThemes={shownThemes}
-              themes={themes}
-              onEnabledThemeChange={(value) => {
-                if (value.length > 2) {
-                  message.warning({
-                    content: '最多同时展示两个主题',
-                  });
-                  return;
-                }
-                setEnabledThemes(value);
-              }}
-              onShownThemeChange={(value, selectTheme, { type }) => {
-                if (type === 'select' && enabledThemes.length < 2) {
-                  setEnabledThemes((prev) => [...prev, selectTheme]);
-                }
-                setShownThemes(value);
-              }}
-            />
-          </div>
-        )}
-        <Button type="primary" style={{ marginLeft: 'auto' }} onClick={() => onSave?.(themes[0].config)}>
-          保存
-        </Button>
-      </Header>
-      <Layout
-        style={{
-          height: 'calc(100vh - 64px)',
-        }}
-      >
-        <Sider
-          style={{
-            backgroundColor: 'white',
-            height: '100%',
-            overflow: 'auto',
-            flex: `0 0 ${siderWidth}px`,
-            willChange: 'auto',
-          }}
-          width={siderVisible ? siderWidth : 0}
-          ref={siderRef}
-        >
-          <div
-            className="previewer-sider-handler"
-            onMouseDown={() => {
-              dragRef.current = true;
-              document.body.style.cursor = 'ew-resize';
-              if (siderRef.current) {
-                siderRef.current.style.transition = 'none';
-              }
-            }}
-          />
-          <Button
-            onClick={() => setSiderVisible((prev) => !prev)}
-            className={classNames(
-              'previewer-sider-collapse-btn',
-              !siderVisible && 'previewer-sider-collapse-btn-collapsed',
-            )}
-            size="small"
-            icon={<Arrow rotate={siderVisible ? 0 : 180} className="previewer-sider-collapse-btn-icon" />}
-            shape="circle"
-          />
-          <TokenPanel
-            ref={tokenPanelRef}
-            filterTypes={filterTypes}
-            onFilterTypesChange={(types) => setFilterTypes(types)}
-            themes={mutableThemes}
-            selectedTokens={selectedTokens}
-            enableTokenSelect
-            onTokenSelect={(tokenName) =>
-              setSelectedTokens((prev) =>
-                prev.includes(tokenName) ? prev.filter((item) => item !== tokenName) : [...prev, tokenName],
-              )
-            }
-          />
-        </Sider>
-        <Content
-          style={{
-            padding: '16px 20px 28px 24px',
-            height: '100%',
-            overflow: 'hidden',
-            display: 'flex',
-            flexDirection: 'column',
-          }}
-        >
-          <FilterPanel
-            selectedTokens={selectedTokens}
-            onSelectedTokensChange={(tokens) => setSelectedTokens(tokens)}
-            filterMode={filterMode}
-            onFilterModeChange={(mode) => setFilterMode(mode)}
-            onTokenClick={handleTokenClick}
-          />
-          {componentPanel}
-        </Content>
-      </Layout>
-    </Layout>,
-  );
-};
-
-export default Previewer;

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

@@ -1,294 +0,0 @@
-import { CheckOutlined } from '@ant-design/icons';
-import { Dropdown, Input, Menu, Switch, theme as antdTheme } from 'antd';
-import classNames from 'classnames';
-import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { SearchDropdown } from '../icons';
-import type { AliasToken, MutableTheme, TokenValue } from '../interface';
-import type { TokenType } from '../utils/classifyToken';
-import { TOKEN_SORTS, classifyToken, getTypeOfToken } from '../utils/classifyToken';
-import getDesignToken from '../utils/getDesignToken';
-import makeStyle from '../utils/makeStyle';
-import TokenCard, { IconMap, TextMap } from './token-card';
-import { getTokenItemId } from './token-item';
-
-const { useToken } = antdTheme;
-
-const useStyle = makeStyle('AliasTokenPreview', (token) => ({
-  '.preview-panel-wrapper': {
-    overflow: 'auto',
-    height: '100%',
-    '.preview-panel': {
-      height: '100%',
-      minWidth: 300,
-      backgroundColor: 'white',
-      display: 'flex',
-      flexDirection: 'column',
-      '.preview-panel-token-wrapper': {
-        position: 'relative',
-        flex: 1,
-        overflow: 'hidden',
-        '&::before, &::after': {
-          position: 'absolute',
-          zIndex: 1,
-          opacity: 0,
-          transition: 'opacity .3s',
-          content: '""',
-          pointerEvents: 'none',
-          insetInlineStart: 0,
-          insetInlineEnd: 0,
-          height: 40,
-        },
-
-        '&::before': {
-          top: 0,
-          boxShadow: 'inset 0 10px 8px -8px #00000014',
-        },
-
-        '&::after': {
-          bottom: 0,
-          boxShadow: 'inset 0 -10px 8px -8px #00000014',
-        },
-
-        '&.preview-panel-token-wrapper-ping-top': {
-          '&::before': {
-            opacity: 1,
-          },
-        },
-      },
-      '.preview-panel-space': {
-        marginBottom: 20,
-        paddingInlineStart: token.paddingXS,
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-
-        '.preview-hide-token': {
-          color: token.colorTextSecondary,
-          fontSize: token.fontSizeSM,
-          lineHeight: token.lineHeightSM,
-          display: 'flex',
-          alignItems: 'center',
-          '>*:first-child': {
-            marginInlineEnd: 2,
-          },
-        },
-      },
-      '.preview-panel-search': {
-        backgroundColor: 'rgba(0, 0, 0, 2%)',
-        borderRadius: token.borderRadiusLG,
-
-        [`${token.rootCls}-input-group-addon`]: {
-          backgroundColor: 'inherit',
-          border: 'none',
-          padding: 0,
-          transition: `background-color ${token.motionDurationSlow}`,
-
-          '&:hover': {
-            backgroundColor: 'rgba(0, 0, 0, 4%)',
-          },
-        },
-
-        input: {
-          fontSize: token.fontSizeSM,
-          paddingInlineStart: 4,
-        },
-
-        '.previewer-token-type-dropdown-icon-active': {
-          color: token.colorPrimary,
-        },
-      },
-    },
-  },
-}));
-
-export interface TokenPreviewProps {
-  themes: MutableTheme[];
-  selectedTokens?: string[];
-  onTokenSelect?: (token: string) => void;
-  filterTypes?: TokenType[];
-  onFilterTypesChange?: (types: TokenType[]) => void;
-  enableTokenSelect?: boolean;
-}
-
-export type TokenPanelRef = {
-  scrollToToken: (token: string) => void;
-};
-
-export default forwardRef<TokenPanelRef, TokenPreviewProps>((props: TokenPreviewProps, ref) => {
-  const { filterTypes, onFilterTypesChange, themes, selectedTokens, onTokenSelect, enableTokenSelect } = props;
-  const [wrapSSR, hashId] = useStyle();
-  const [search, setSearch] = useState<string>('');
-  const [showAll, setShowAll] = useState<boolean>(false);
-  const [showTokenListShadowTop, setShowTokenListShadowTop] = useState<boolean>(false);
-  const cardWrapperRef = useRef<HTMLDivElement>(null);
-  const [activeCards, setActiveCards] = useState<TokenType[]>([]);
-  const [activeToken, setActiveToken] = useState<string | undefined>();
-  const { token } = useToken();
-  const [mergedFilterTypes, setMergedFilterTypes] = useMergedState<TokenType[]>(filterTypes || []);
-
-  // TODO: Split AliasToken and SeedToken
-  const groupedToken = useMemo(() => classifyToken(token as any), [token]);
-
-  useEffect(() => {
-    const handleTokenListScroll = () => {
-      setShowTokenListShadowTop((cardWrapperRef.current?.scrollTop ?? 0) > 0);
-    };
-    cardWrapperRef.current?.addEventListener('scroll', handleTokenListScroll);
-    const wrapper = cardWrapperRef.current;
-    return () => {
-      wrapper?.removeEventListener('scroll', handleTokenListScroll);
-    };
-  }, []);
-
-  useImperativeHandle(ref, () => ({
-    scrollToToken: (tokenName) => {
-      const type = getTypeOfToken(tokenName);
-      if (!activeCards.includes(type)) {
-        setActiveCards((prev) => [...prev, type]);
-      }
-      setActiveToken(tokenName);
-      setTimeout(() => {
-        const node = cardWrapperRef.current?.querySelector<HTMLElement>(`#${getTokenItemId(tokenName)}`);
-        if (!node) {
-          return;
-        }
-        node?.scrollIntoView({
-          block: 'center',
-          inline: 'nearest',
-        });
-      }, 100);
-    },
-  }));
-
-  const handleAliasTokenChange = (theme: MutableTheme, tokenName: string, value: TokenValue) => {
-    theme.onThemeChange?.(
-      {
-        ...theme.config,
-        token: {
-          ...theme.config.token,
-          [tokenName]: value,
-        },
-      },
-      ['token', tokenName],
-    );
-  };
-
-  return wrapSSR(
-    <div className={classNames('preview-panel-wrapper', hashId)}>
-      <div className={classNames('preview-panel')}>
-        <div style={{ padding: 16 }}>
-          <h3 className={classNames('preview-panel-space', hashId)}>
-            <span>Alias Token 预览</span>
-            <span className="preview-hide-token">
-              <span>显示所有</span>
-              <Switch checked={showAll} onChange={(value) => setShowAll(value)} size="small" />
-            </span>
-          </h3>
-          <Input
-            allowClear
-            onChange={(e) => {
-              setSearch(e.target.value);
-            }}
-            bordered={false}
-            addonBefore={
-              <>
-                <Dropdown
-                  overlay={
-                    <Menu
-                      items={[
-                        {
-                          label: '筛选项',
-                          type: 'group',
-                          key: 'title-key',
-                          style: { fontSize: 12 },
-                        },
-                        ...TOKEN_SORTS.map((type) => ({
-                          icon: (
-                            <span>
-                              <CheckOutlined
-                                style={{
-                                  opacity: mergedFilterTypes.includes(type) ? 1 : 0,
-                                  marginInlineEnd: 8,
-                                  fontSize: 12,
-                                }}
-                              />
-                              {IconMap[type]}
-                            </span>
-                          ),
-                          label: TextMap[type],
-                          key: type,
-                          onClick: () => {
-                            const newTypes = mergedFilterTypes.includes(type)
-                              ? mergedFilterTypes.filter((item) => type !== item)
-                              : [...mergedFilterTypes, type];
-                            setMergedFilterTypes(newTypes);
-                            onFilterTypesChange?.(newTypes);
-                          },
-                        })),
-                      ]}
-                    />
-                  }
-                  trigger={['click']}
-                >
-                  <SearchDropdown
-                    style={{
-                      width: 32,
-                      cursor: 'pointer',
-                      fontSize: 18,
-                      paddingTop: 2,
-                      transition: 'color 0.3s',
-                    }}
-                    className={classNames({
-                      'previewer-token-type-dropdown-icon-active': mergedFilterTypes.length > 0,
-                    })}
-                  />
-                </Dropdown>
-              </>
-            }
-            className="preview-panel-search"
-            placeholder="搜索 Token / 色值 / 文本 / 圆角等"
-          />
-        </div>
-        <div
-          className={classNames('preview-panel-token-wrapper', {
-            'preview-panel-token-wrapper-ping-top': showTokenListShadowTop,
-          })}
-        >
-          <div ref={cardWrapperRef} style={{ height: '100%', overflow: 'auto', padding: '0 16px' }}>
-            <div>
-              {TOKEN_SORTS.filter(
-                (type) =>
-                  type !== 'seed' &&
-                  (mergedFilterTypes.includes(type) || mergedFilterTypes.length === 0) &&
-                  (!search || groupedToken[type].some((item) => item.toLowerCase().includes(search.toLowerCase()))),
-              ).map((key) => (
-                <TokenCard
-                  title={TextMap[key]}
-                  icon={IconMap[key]}
-                  key={key}
-                  tokenPath={['token']}
-                  tokenArr={groupedToken[key]}
-                  keyword={search}
-                  hideUseless={!showAll}
-                  open={activeCards.includes(key)}
-                  onOpenChange={(open) =>
-                    setActiveCards((prev) => (open ? [...prev, key] : prev.filter((item) => item !== key)))
-                  }
-                  onTokenChange={handleAliasTokenChange}
-                  activeToken={activeToken}
-                  onActiveTokenChange={(tokenName) => setActiveToken(tokenName)}
-                  themes={themes}
-                  selectedTokens={selectedTokens}
-                  onTokenSelect={onTokenSelect}
-                  enableTokenSelect={enableTokenSelect}
-                  fallback={(config) => getDesignToken(config) as AliasToken}
-                />
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>,
-  );
-});