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

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

@@ -1,191 +0,0 @@
-import { ConfigProvider, Tooltip } from 'antd';
-import classNames from 'classnames';
-import type { FC } from 'react';
-import React from 'react';
-import ComponentDemos from '../component-demos';
-import type { ComponentDemo, MutableTheme, TokenName } from '../interface';
-import { useLocale } from '../locale';
-import makeStyle from '../utils/makeStyle';
-import ComponentCard, { getComponentDemoId } from './ComponentCard';
-
-const useStyle = makeStyle('ComponentDemoGroup', (token) => ({
-  '.previewer-component-demo-group': {
-    display: 'flex',
-    width: '100%',
-    overflow: 'hidden',
-
-    '&:first-child': {
-      '.previewer-component-demo-group-item': {
-        paddingTop: token.padding,
-      },
-    },
-
-    '&:last-child': {
-      '.previewer-component-demo-group-item': {
-        paddingBottom: token.padding,
-      },
-    },
-  },
-}));
-
-const useDemoStyle = makeStyle('ComponentDemoBlock', (token) => ({
-  '.previewer-component-demo-group-item': {
-    flex: '1 1 50%',
-    paddingInline: token.padding,
-    paddingBlock: token.padding / 2,
-    width: 0,
-    backgroundColor: token.colorBgLayout,
-
-    '.previewer-component-demo-group-item-relative-token': {
-      color: token.colorTextSecondary,
-      paddingBottom: 8,
-
-      '&:not(:first-child)': {
-        marginTop: 12,
-      },
-    },
-  },
-}));
-
-type ComponentDemoBlockProps = {
-  component: string;
-  onTokenClick?: (token: TokenName) => void;
-  size?: 'small' | 'middle' | 'large';
-  disabled?: boolean;
-  demos?: (ComponentDemo & { active?: boolean })[];
-  theme: MutableTheme;
-  componentDrawer?: boolean;
-};
-
-const ComponentDemoBlock: FC<ComponentDemoBlockProps> = ({
-  component,
-  onTokenClick,
-  size = 'middle',
-  disabled = false,
-  demos = [],
-  theme,
-  componentDrawer,
-}) => {
-  const [, hashId] = useDemoStyle();
-  const locale = useLocale();
-
-  return (
-    <div className={classNames('previewer-component-demo-group-item', hashId)}>
-      <ComponentCard
-        title={component}
-        component={component}
-        onTokenClick={onTokenClick}
-        drawer={componentDrawer}
-        theme={theme}
-      >
-        <ConfigProvider componentSize={size} componentDisabled={disabled}>
-          {demos.some((item) => item.active)
-            ? demos.map((demo) => (
-                <div key={demo.key} style={{ display: demo.active ? '' : 'none' }}>
-                  {demo.tokens && (
-                    <div className="previewer-component-demo-group-item-relative-token">
-                      <Tooltip title={demo.tokens.join(', ')}>
-                        <span>
-                          {locale.demo.relatedTokens}: {demo.tokens.slice(0, 2).join(', ')}
-                          {demo.tokens.length > 2 ? '...' : ''}
-                        </span>
-                      </Tooltip>
-                    </div>
-                  )}
-                  {demo.demo}
-                </div>
-              ))
-            : demos[0]?.demo}
-        </ConfigProvider>
-      </ComponentCard>
-    </div>
-  );
-};
-
-type ComponentDemoGroupProps = {
-  themes: MutableTheme[];
-  components: Record<string, string[]>;
-  activeComponents?: string[];
-  size?: 'small' | 'middle' | 'large';
-  disabled?: boolean;
-  selectedTokens?: string[];
-  onTokenClick?: (token: TokenName) => void;
-  componentDrawer?: boolean;
-  hideTokens?: boolean;
-};
-
-const ComponentDemoGroup: FC<ComponentDemoGroupProps> = ({
-  themes,
-  components,
-  size,
-  disabled,
-  activeComponents,
-  selectedTokens,
-  onTokenClick,
-  componentDrawer,
-  hideTokens,
-}) => {
-  const [wrapSSR, hashId] = useStyle();
-
-  return wrapSSR(
-    <>
-      {Object.entries(components)
-        .reduce<string[]>((result, [, group]) => result.concat(group), [])
-        .map((item) => {
-          const componentDemos = ComponentDemos[item];
-          if (!componentDemos) {
-            return null;
-          }
-          const demos: ComponentDemo[] = componentDemos.map((demo, index) => {
-            return {
-              ...demo,
-              tokens: hideTokens ? undefined : demo.tokens,
-              active:
-                ((!selectedTokens || selectedTokens.length === 0) && index === 0) ||
-                selectedTokens?.some((token) => demo.tokens?.includes(token as any)),
-            };
-          });
-
-          return (
-            <div
-              className={classNames('previewer-component-demo-group', hashId)}
-              key={item}
-              id={getComponentDemoId(item)}
-              style={{
-                display:
-                  !activeComponents || activeComponents.length === 0 || activeComponents.includes(item) ? '' : 'none',
-              }}
-            >
-              {themes.length > 1 ? (
-                themes.map((theme) => (
-                  <ConfigProvider key={theme.key} theme={theme.config}>
-                    <ComponentDemoBlock
-                      component={item}
-                      onTokenClick={onTokenClick}
-                      demos={demos}
-                      disabled={disabled}
-                      size={size}
-                      theme={theme}
-                      componentDrawer={componentDrawer}
-                    />
-                  </ConfigProvider>
-                ))
-              ) : (
-                <ComponentDemoBlock
-                  component={item}
-                  onTokenClick={onTokenClick}
-                  demos={demos}
-                  disabled={disabled}
-                  size={size}
-                  theme={themes[0]}
-                  componentDrawer={componentDrawer}
-                />
-              )}
-            </div>
-          );
-        })}
-    </>,
-  );
-};
-
-export default ComponentDemoGroup;

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

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

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