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

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

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

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