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

package/src/client/antd-token-previewer/component-panel/ComponentTokenDrawer.tsx

@@ -0,0 +1,190 @@
+import { BuildOutlined, CarOutlined } from '@ant-design/icons';
+import { ConfigProvider, Drawer, Empty, Tag, Tooltip, theme as antdTheme } from 'antd';
+import classNames from 'classnames';
+import type { FC } from 'react';
+import React, { useMemo } from 'react';
+import ComponentDemos from '../component-demos';
+import type { AliasToken, ComponentDemo, MutableTheme, TokenName, TokenValue } from '../interface';
+import { useLocale } from '../locale';
+import TokenCard from '../token-panel/token-card';
+import getDesignToken from '../utils/getDesignToken';
+import makeStyle from '../utils/makeStyle';
+import { getComponentToken } from '../utils/statistic';
+import ComponentCard from './ComponentCard';
+
+const { defaultAlgorithm } = antdTheme;
+
+const useStyle = makeStyle('ComponentTokenDrawer', (token) => ({
+  '.previewer-component-token-drawer': {
+    [`&${token.rootCls}-drawer ${token.rootCls}-drawer-body`]: {
+      padding: '0 !important',
+    },
+
+    '.previewer-component-drawer-subtitle': {
+      fontWeight: token.fontWeightStrong,
+      marginBottom: token.marginSM,
+      marginInlineStart: token.marginXS,
+      color: token.colorText,
+    },
+
+    '.previewer-component-token-drawer-theme': {
+      fontWeight: 'normal',
+      marginInlineStart: 8,
+      borderRadius: 4,
+      backgroundColor: token.colorInfoBg,
+      color: token.colorPrimary,
+      borderColor: token.colorInfoBg,
+    },
+  },
+}));
+
+export type ComponentFullDemosProps = {
+  demos: ComponentDemo[];
+};
+
+const useComponentFullDemosStyle = makeStyle('ComponentFullDemos', (token) => ({
+  '.previewer-component-full-demos': {
+    flex: 1,
+    overflow: 'auto',
+    padding: 24,
+    backgroundColor: token.colorBgLayout,
+    '> *:not(:last-child)': {
+      marginBottom: 12,
+    },
+  },
+}));
+
+const ComponentFullDemos: FC<ComponentFullDemosProps> = ({ demos }) => {
+  const [, hashId] = useComponentFullDemosStyle();
+  const locale = useLocale();
+
+  return (
+    <div className={classNames('previewer-component-full-demos', hashId)} style={{}}>
+      {demos?.map((demo) => (
+        <ComponentCard
+          key={demo.key}
+          title={
+            <Tooltip title={demo.tokens?.join(', ')}>
+              <span>
+                {locale.demo.relatedTokens}: {demo.tokens?.join(', ')}
+                {(demo.tokens?.length || 0) > 2 ? '...' : ''}
+              </span>
+            </Tooltip>
+          }
+        >
+          {demo.demo}
+        </ComponentCard>
+      ))}
+    </div>
+  );
+};
+
+export type ComponentTokenDrawerProps = {
+  visible?: boolean;
+  component?: string;
+  onClose?: () => void;
+  theme: MutableTheme;
+  onTokenClick?: (token: TokenName) => void;
+};
+
+const ComponentTokenDrawer: FC<ComponentTokenDrawerProps> = ({ visible, component = 'Button', onClose, theme }) => {
+  const [, hashId] = useStyle();
+
+  const { component: componentToken, global: aliasTokenNames } = getComponentToken(component) || { global: [] };
+
+  const componentTokenData = useMemo(() => Object.keys(componentToken ?? {}), [componentToken]);
+
+  const aliasTokenData = useMemo(() => {
+    return aliasTokenNames.sort();
+  }, [aliasTokenNames]);
+
+  const handleComponentTokenChange = (token: string, value: TokenValue) => {
+    theme.onThemeChange?.(
+      {
+        ...theme.config,
+        components: {
+          ...theme.config.components,
+          [component]: {
+            ...(theme.config.components as any)?.[component],
+            [token]: value,
+          },
+        },
+      },
+      ['components', component, token],
+    );
+  };
+
+  return (
+    <Drawer
+      open={visible}
+      title={
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <span>{`${component} 组件 Token`}</span>
+          <Tag className="previewer-component-token-drawer-theme">{theme.name}</Tag>
+        </div>
+      }
+      onClose={onClose}
+      width={1200}
+      className={classNames('previewer-component-token-drawer', hashId)}
+    >
+      <div style={{ display: 'flex', height: '100%' }}>
+        <ConfigProvider theme={theme.config}>
+          <ConfigProvider theme={theme.config}>
+            <ComponentFullDemos demos={ComponentDemos[component]} />
+          </ConfigProvider>
+        </ConfigProvider>
+        <div style={{ flex: '0 0 400px', overflow: 'auto', padding: 24 }}>
+          <div className="previewer-component-drawer-subtitle">Related Tokens / 相关 token</div>
+          <TokenCard
+            icon={<BuildOutlined />}
+            hideUsageCount
+            defaultOpen
+            title="Component Token"
+            tokenArr={componentTokenData}
+            tokenPath={['components', component]}
+            themes={[theme]}
+            fallback={() => componentToken}
+            onTokenChange={(_, tokenName, value) => handleComponentTokenChange(tokenName, value)}
+            placeholder={
+              <Empty
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+                description="暂无相关 Component Token"
+                style={{
+                  marginBlock: 0,
+                  paddingBlock: 32,
+                }}
+              />
+            }
+          />
+          <TokenCard
+            icon={<CarOutlined />}
+            hideUsageCount
+            themes={[theme]}
+            defaultOpen
+            title="Alias Token"
+            tokenArr={aliasTokenData}
+            tokenPath={['components', component]}
+            fallback={(themeConfig) => getDesignToken(themeConfig) as AliasToken}
+            onTokenChange={(_, tokenName, value) => handleComponentTokenChange(tokenName, value)}
+            placeholder={
+              <Empty
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+                description="暂无相关 Alias Token"
+                style={{
+                  marginBlock: 0,
+                  paddingBlock: 32,
+                }}
+              />
+            }
+          />
+        </div>
+      </div>
+    </Drawer>
+  );
+};
+
+export default ({ ...props }: ComponentTokenDrawerProps) => (
+  <ConfigProvider theme={{ algorithm: defaultAlgorithm }}>
+    <ComponentTokenDrawer {...props} />
+  </ConfigProvider>
+);

package/src/client/antd-token-previewer/component-panel/ComponentTree.tsx

@@ -0,0 +1,184 @@
+import { SearchOutlined } from '@ant-design/icons';
+import { Badge, Input, Tree } from 'antd';
+import classNames from 'classnames';
+import type { FC } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import type { FilterMode } from '../FilterPanel';
+import makeStyle from '../utils/makeStyle';
+import { getRelatedComponents } from '../utils/statistic';
+
+const { DirectoryTree } = Tree;
+
+const useStyle = makeStyle('ComponentTree', (token) => ({
+  '.component-tree-wrapper': {
+    minWidth: 200,
+    borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+    height: '100%',
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
+    paddingBlock: token.paddingXS,
+
+    '.component-tree-search': {
+      margin: '0 8px 12px',
+      width: 'calc(100% - 16px)',
+      backgroundColor: 'rgba(0, 0, 0, 2%)',
+      borderRadius: token.borderRadiusLG,
+      height: 24,
+      input: {
+        fontSize: 12,
+      },
+      '&:hover': {
+        backgroundColor: 'rgba(0, 0, 0, 4%)',
+      },
+    },
+
+    [`${token.rootCls}-tree.component-tree`]: {
+      fontSize: token.fontSizeSM,
+
+      '.component-tree-item.component-tree-item-highlight': {
+        color: token.colorPrimary,
+      },
+
+      [`${token.rootCls}-tree-node-content-wrapper`]: {
+        transition: `background-color ${token.motionDurationSlow}`,
+        borderRadius: 4,
+      },
+
+      [`${token.rootCls}-tree-treenode-selected ${token.rootCls}-tree-node-content-wrapper`]: {
+        color: token.colorTextLightSolid,
+
+        '.component-tree-item.component-tree-item-highlight': {
+          color: token.colorTextLightSolid,
+        },
+      },
+
+      '.component-tree-item': {
+        transition: `color ${token.motionDurationMid}`,
+        lineHeight: `24px`,
+        height: 24,
+        display: 'inline-block',
+      },
+    },
+  },
+}));
+
+export type ComponentTreeProps = {
+  onSelect?: (component: string) => void;
+  components: Record<string, string[]>;
+  selectedTokens?: string[];
+  filterMode?: FilterMode;
+  activeComponent?: string;
+};
+
+const getTreeItemId = (component: string) => `component-tree-item-${component}`;
+
+const ComponentTree: FC<ComponentTreeProps> = ({
+  onSelect,
+  components,
+  selectedTokens,
+  filterMode = 'filter',
+  activeComponent,
+}) => {
+  const [wrapSSR, hashId] = useStyle();
+  const treeRef = useRef<HTMLDivElement>(null);
+  const [search, setSearch] = useState<string>('');
+
+  const relatedComponents = useMemo(() => {
+    return selectedTokens ? getRelatedComponents(selectedTokens) : [];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedTokens]);
+
+  useEffect(() => {
+    treeRef.current?.querySelector<HTMLElement>(`#${getTreeItemId(activeComponent || '')}`)?.scrollIntoView({
+      block: 'nearest',
+      inline: 'nearest',
+    });
+  }, [activeComponent]);
+
+  const treeData = useMemo(
+    () =>
+      Object.entries(components)
+        .filter(
+          ([, group]) =>
+            (filterMode === 'highlight' ||
+              !relatedComponents.length ||
+              group.some((item) => relatedComponents.includes(item))) &&
+            (!search || group.some((item) => item.toLowerCase().includes(search.toLowerCase()))),
+        )
+        .map(([type, group]) => ({
+          title: type,
+          key: `type-${type}`,
+          children: group
+            .filter(
+              (item) =>
+                (filterMode === 'highlight' || !relatedComponents.length || relatedComponents.includes(item)) &&
+                (!search || item.toLowerCase().includes(search.toLowerCase())),
+            )
+            .map((item) => ({
+              title: (
+                <span
+                  id={getTreeItemId(item)}
+                  className={classNames('component-tree-item', {
+                    'component-tree-item-highlight': filterMode === 'highlight' && relatedComponents.includes(item),
+                  })}
+                >
+                  {item}
+                </span>
+              ),
+              switcherIcon: () => (
+                <Badge
+                  color={
+                    filterMode === 'highlight' && relatedComponents.includes(item)
+                      ? activeComponent === item
+                        ? 'white'
+                        : 'blue'
+                      : 'transparent'
+                  }
+                />
+              ),
+              key: item,
+            })),
+        })),
+    [components, relatedComponents, filterMode, search, activeComponent],
+  );
+
+  useEffect(() => {
+    if (filterMode === 'highlight') {
+      setTimeout(() => {
+        treeRef.current?.getElementsByClassName('component-tree-item-active')[0]?.scrollIntoView({
+          block: 'start',
+          inline: 'nearest',
+          behavior: 'smooth',
+        });
+      }, 100);
+    }
+  }, [selectedTokens, filterMode]);
+
+  return wrapSSR(
+    <div className={classNames('component-tree-wrapper', hashId)}>
+      <Input
+        allowClear
+        placeholder="Type to search"
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        prefix={<SearchOutlined />}
+        bordered={false}
+        className="component-tree-search"
+      />
+      <div ref={treeRef} style={{ overflow: 'auto', flex: 1 }}>
+        <DirectoryTree
+          selectedKeys={[activeComponent ?? '']}
+          showIcon={false}
+          defaultExpandAll
+          treeData={treeData}
+          className="component-tree"
+          onSelect={(node) => onSelect?.(node[0] as string)}
+          expandAction="doubleClick"
+        />
+      </div>
+    </div>,
+  );
+};
+
+export default ComponentTree;

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

@@ -0,0 +1,316 @@
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import { Breadcrumb, Segmented, Switch } from 'antd';
+import classNames from 'classnames';
+import type { CSSProperties, FC } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import type { FilterMode } from '../FilterPanel';
+import type { Theme, TokenName } from '../interface';
+import makeStyle from '../utils/makeStyle';
+import { getRelatedComponents } from '../utils/statistic';
+import { getComponentDemoId } from './ComponentCard';
+import ComponentDemoGroup from './ComponentDemoGroup';
+import ComponentTree from './ComponentTree';
+
+const BREADCRUMB_HEIGHT = 40;
+
+const useStyle = makeStyle('ComponentPanel', (token) => ({
+  '.component-panel': {
+    boxShadow: '0 2px 4px 0 rgba(0,0,0,0.05), 0 1px 2px 0 rgba(25,15,15,0.07), 0 0 1px 0 rgba(0,0,0,0.08)',
+    backgroundColor: '#fff',
+    display: 'flex',
+    borderRadius: 6,
+    height: '100%',
+    overflow: 'hidden',
+
+    '.component-panel-main': {
+      display: 'flex',
+      flexDirection: 'column',
+      flex: 1,
+      width: 0,
+
+      '.component-panel-head': {
+        padding: `${token.paddingSM}px ${token.paddingSM}px`,
+        flex: 'none',
+        backgroundColor: token.colorBgContainer,
+        display: 'flex',
+        alignItems: 'center',
+        borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorBgContainer}`,
+
+        '> *:not(:first-child)': {
+          marginInlineStart: token.margin,
+        },
+
+        [`${token.rootCls}-segmented-item`]: {
+          minWidth: 52,
+        },
+      },
+
+      '.component-panel-toggle-side-icon': {
+        flex: 'none',
+        cursor: 'pointer',
+        marginInlineEnd: token.marginXS,
+
+        '.anticon': {
+          color: token.colorIcon,
+          transition: `color ${token.motionDurationMid}`,
+
+          '&:hover': {
+            color: token.colorIconHover,
+          },
+        },
+      },
+    },
+
+    '.component-panel-side': {
+      flex: 'none',
+      width: 200,
+      overflow: 'hidden',
+      transition: `transform ${token.motionDurationMid}, width ${token.motionDurationMid}`,
+    },
+
+    '.component-panel-side.component-panel-side-hidden': {
+      width: 0,
+      transform: 'translateX(-200px)',
+    },
+
+    '.component-demos-wrapper': {
+      display: 'flex',
+      flex: 1,
+      height: 0,
+      position: 'relative',
+
+      '.component-demos-breadcrumb-wrapper': {
+        position: 'absolute',
+        top: 0,
+        insetInlineStart: 0,
+        width: '100%',
+        height: BREADCRUMB_HEIGHT,
+        zIndex: 20,
+        backgroundColor: token.colorBgContainer,
+        padding: '8px 16px',
+        transition: 'opacity 0.3s',
+        background: 'rgba(255, 255, 255, .6)',
+        backdropFilter: 'blur(10px)',
+        borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorBgContainer}`,
+      },
+    },
+
+    '.component-demos': {
+      height: '100%',
+      overflow: 'auto',
+      flex: 1,
+    },
+  },
+}));
+
+export const antdComponents = {
+  General: ['Button', 'Icon', 'Typography'],
+  Layout: ['Divider', 'Grid', 'Space'],
+  Navigation: ['Breadcrumb', 'Dropdown', 'Menu', 'Pagination', 'Steps'],
+  'Date Entry': [
+    'AutoComplete',
+    'Cascader',
+    'Checkbox',
+    'DatePicker',
+    'Form',
+    'Input',
+    'InputNumber',
+    'Mentions',
+    'Radio',
+    'Rate',
+    'Select',
+    'Slider',
+    'Switch',
+    'TimePicker',
+    'Transfer',
+    'TreeSelect',
+    'Upload',
+  ],
+  'Data Display': [
+    'Avatar',
+    'Badge',
+    'Calendar',
+    'Card',
+    'Carousel',
+    'Collapse',
+    'Descriptions',
+    'Empty',
+    'Image',
+    'List',
+    'Popover',
+    'Segmented',
+    'Statistic',
+    'Table',
+    'Tabs',
+    'Tag',
+    'Timeline',
+    'Tooltip',
+    'Tree',
+  ],
+  Feedback: [
+    'Alert',
+    'Drawer',
+    'Message',
+    'Modal',
+    'Notification',
+    'Popconfirm',
+    'Progress',
+    'Result',
+    'Skeleton',
+    'Spin',
+  ],
+  Other: ['Anchor'],
+};
+
+export type ComponentPanelProps = {
+  themes: Theme[];
+  selectedTokens?: string[];
+  filterMode?: FilterMode;
+  className?: string;
+  style?: CSSProperties;
+  onTokenClick?: (token: TokenName) => void;
+};
+
+const Index: FC<ComponentPanelProps> = ({ themes, selectedTokens, filterMode, className, onTokenClick, ...rest }) => {
+  const [wrapSSR, hashId] = useStyle();
+  const [showSide, setShowSide] = useState<boolean>(true);
+  const demosRef = useRef<HTMLDivElement>(null);
+  const [componentSize, setComponentSize] = useState<'large' | 'small' | 'middle'>('middle');
+  const [componentDisabled, setComponentDisabled] = useState<boolean>(false);
+  const [activeComponent, setActiveComponent] = useState<string | undefined>();
+  const [showBreadcrumb, setShowBreadcrumb] = useState<boolean>(false);
+
+  const relatedComponents = useMemo(() => {
+    return selectedTokens ? getRelatedComponents(selectedTokens) : [];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedTokens]);
+
+  useEffect(() => {
+    setShowSide(true);
+  }, [selectedTokens]);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (demosRef.current) {
+        setShowBreadcrumb(demosRef.current.scrollTop > 10);
+        for (let i = 0; i < demosRef.current.children.length; i++) {
+          if (
+            demosRef.current.children[i].getBoundingClientRect().top +
+              demosRef.current.children[i].clientHeight -
+              demosRef.current.getBoundingClientRect().top >
+            BREADCRUMB_HEIGHT
+          ) {
+            setActiveComponent(demosRef.current.children[i]?.id.split('-').pop());
+            break;
+          }
+        }
+      }
+    };
+
+    demosRef.current?.addEventListener('scroll', handleScroll);
+    const demosWrapper = demosRef.current;
+    return () => {
+      demosWrapper?.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  const scrollToComponent = (component: string) => {
+    demosRef.current?.scrollTo({
+      top: (demosRef.current?.querySelector<HTMLElement>(`#${getComponentDemoId(component)}`)?.offsetTop || 0) - 38,
+      behavior: 'smooth',
+    });
+  };
+
+  const activeComponentCategory = useMemo(() => {
+    if (!activeComponent) {
+      return undefined;
+    }
+    const key = Object.entries(antdComponents).find(([, value]) => value.includes(activeComponent))?.[0];
+    if (key) {
+      return (antdComponents as any)[key];
+    } else {
+      return undefined;
+    }
+  }, [activeComponent]);
+
+  const demoGroup = useMemo(
+    () => (
+      <ComponentDemoGroup
+        themes={themes}
+        components={antdComponents}
+        size={componentSize}
+        disabled={componentDisabled}
+        activeComponents={filterMode === 'highlight' ? undefined : relatedComponents}
+        selectedTokens={selectedTokens}
+        onTokenClick={onTokenClick}
+      />
+    ),
+    [themes, componentSize, componentDisabled, filterMode, relatedComponents, selectedTokens, onTokenClick],
+  );
+
+  return wrapSSR(
+    <div className={classNames('component-panel', hashId, className)} {...rest}>
+      <div
+        className={classNames('component-panel-side', {
+          'component-panel-side-hidden': !showSide,
+        })}
+      >
+        <ComponentTree
+          activeComponent={activeComponent}
+          filterMode={filterMode}
+          selectedTokens={selectedTokens}
+          components={antdComponents}
+          onSelect={(component) => {
+            if (component.startsWith('type-')) {
+              scrollToComponent((antdComponents as any)[component.split('-')[1]][0]);
+            } else {
+              scrollToComponent(component);
+            }
+          }}
+        />
+      </div>
+      <div className="component-panel-main">
+        <div className="component-panel-head">
+          <div className="component-panel-toggle-side-icon" onClick={() => setShowSide((prev) => !prev)}>
+            {showSide ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />}
+          </div>
+          <div>
+            <span style={{ marginRight: 8 }}>组件尺寸：</span>
+            <Segmented
+              value={componentSize}
+              onChange={(value) => setComponentSize(value as any)}
+              options={[
+                { label: '大', value: 'large' },
+                { label: '中', value: 'middle' },
+                { label: '小', value: 'small' },
+              ]}
+            />
+          </div>
+          <div>
+            <span style={{ marginRight: 8, verticalAlign: 'middle' }}>禁用：</span>
+            <Switch checked={componentDisabled} onChange={(checked) => setComponentDisabled(checked)} />
+          </div>
+        </div>
+        <div className="component-demos-wrapper">
+          {activeComponent && (
+            <div className="component-demos-breadcrumb-wrapper" style={{ opacity: showBreadcrumb ? 1 : 0 }}>
+              <Breadcrumb>
+                <Breadcrumb.Item>
+                  <a onClick={() => activeComponentCategory && scrollToComponent(activeComponentCategory?.[0])}>
+                    {Object.entries(antdComponents).find(([, value]) => value.includes(activeComponent))?.[0]}
+                  </a>
+                </Breadcrumb.Item>
+                <Breadcrumb.Item>{activeComponent}</Breadcrumb.Item>
+              </Breadcrumb>
+            </div>
+          )}
+          <div className="component-demos" ref={demosRef}>
+            {demoGroup}
+          </div>
+        </div>
+      </div>
+    </div>,
+  );
+};
+
+export default Index;