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

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

@@ -1,68 +0,0 @@
-import classNames from 'classnames';
-import type { FC } from 'react';
-import React from 'react';
-import getColorBgImg from './utils/getColorBgImg';
-import makeStyle from './utils/makeStyle';
-
-export type ColorPreviewProps = {
-  color: string;
-  dark?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-};
-
-const useStyle = makeStyle('ColorPreview', () => ({
-  '.previewer-color-preview': {
-    width: 20,
-    height: 20,
-    position: 'relative',
-    borderRadius: '50%',
-    padding: 0,
-    display: 'inline-block',
-
-    '&::before': {
-      content: '""',
-      width: '100%',
-      height: '100%',
-      borderRadius: '50%',
-      top: 0,
-      insetInlineStart: 0,
-      position: 'absolute',
-      zIndex: 2,
-      backgroundColor: 'var(--antd-token-previewer-color-preview)',
-      boxShadow: '0 2px 3px -1px rgba(0,0,0,0.20), inset 0 0 0 1px rgba(0,0,0,0.09)',
-    },
-  },
-}));
-
-const ColorPreview: FC<ColorPreviewProps> = ({ color, style, className, dark, ...restProps }) => {
-  const [warpSSR, hashId] = useStyle();
-
-  return warpSSR(
-    <div
-      {...restProps}
-      className={classNames('previewer-color-preview', className, hashId)}
-      style={{
-        // @ts-ignore
-        ['--antd-token-previewer-color-preview']: color,
-        ...style,
-      }}
-    >
-      <div
-        style={{
-          content: '""',
-          width: 18,
-          height: 18,
-          borderRadius: '50%',
-          top: 1,
-          insetInlineStart: 1,
-          position: 'absolute',
-          zIndex: 1,
-          background: `${getColorBgImg(dark)} 0% 0% / 20px`,
-        }}
-      />
-    </div>,
-  );
-};
-
-export default ColorPreview;

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

@@ -1,124 +0,0 @@
-import { Segmented, Tag } from 'antd';
-import classNames from 'classnames';
-import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import type { CSSProperties, FC } from 'react';
-import React from 'react';
-import makeStyle from './utils/makeStyle';
-
-const useStyle = makeStyle('FilterPanel', (token) => ({
-  '.previewer-filter-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',
-    // borderRadius: 6,
-    // padding: '8px 12px',
-    overflow: 'hidden',
-    display: 'flex',
-    alignItems: 'start',
-
-    '.component-tree-head': {
-      display: 'flex',
-      alignItems: 'center',
-      flex: 'none',
-      marginInlineEnd: 20,
-
-      '.component-tree-filter-type': {
-        color: token.colorTextSecondary,
-        marginInlineEnd: token.marginXS,
-        fontSize: token.fontSizeSM,
-      },
-
-      '.component-tree-filter-segmented': {
-        fontSize: token.fontSizeSM,
-      },
-    },
-
-    '.preview-panel-subtitle': {
-      fontSize: token.fontSizeSM,
-      color: token.colorTextSecondary,
-    },
-
-    [`${token.rootCls}-tag.previewer-token-filter-tag`]: {
-      color: token.colorPrimary,
-      backgroundColor: 'rgba(22,119,255,0.10)',
-      border: 'none',
-      borderRadius: 4,
-
-      '> .anticon': {
-        color: token.colorPrimary,
-      },
-    },
-  },
-}));
-
-export type FilterMode = 'highlight' | 'filter';
-
-export type FilterPanelProps = {
-  filterMode?: FilterMode;
-  onFilterModeChange?: (mode: FilterMode) => void;
-  selectedTokens: string[];
-  onSelectedTokensChange?: (newTokens: string[]) => void;
-  onTokenClick?: (token: string) => void;
-  className?: string;
-  style?: CSSProperties;
-};
-
-const FilterPanel: FC<FilterPanelProps> = ({
-  className,
-  filterMode: customFilterMode,
-  onFilterModeChange,
-  selectedTokens,
-  onSelectedTokensChange,
-  onTokenClick,
-  ...rest
-}) => {
-  const [wrapSSR, hashId] = useStyle();
-
-  const [filterMode, setFilterMode] = useMergedState<FilterMode>(customFilterMode || 'filter');
-
-  if (selectedTokens.length === 0) {
-    return null;
-  }
-
-  return wrapSSR(
-    <div className={classNames('previewer-filter-panel', hashId, className)} {...rest}>
-      {selectedTokens && selectedTokens.length > 0 && (
-        <>
-          <div className="component-tree-head">
-            <div className="component-tree-filter-type">筛选方式：</div>
-            <Segmented
-              className="component-tree-filter-segmented"
-              size="small"
-              value={filterMode}
-              onChange={(value) => {
-                onFilterModeChange?.(value as any);
-                setFilterMode(value as any);
-              }}
-              options={[
-                { label: '过滤', value: 'filter' },
-                { label: '高亮', value: 'highlight' },
-              ]}
-            />
-          </div>
-          <div>
-            <span className="preview-panel-subtitle">已选中：</span>
-            {selectedTokens.map((token) => (
-              <Tag
-                key={token}
-                closable
-                onClose={() => onSelectedTokensChange?.(selectedTokens?.filter((item) => item !== token))}
-                style={{ marginBlock: 2, cursor: 'pointer' }}
-                className="previewer-token-filter-tag"
-                onClick={() => onTokenClick?.(token)}
-              >
-                {token}
-              </Tag>
-            ))}
-          </div>
-        </>
-      )}
-    </div>,
-  );
-};
-
-export default FilterPanel;

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

@@ -1,101 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import makeStyle from './utils/makeStyle';
-
-const useStyle = makeStyle('IconSwitch', () => {
-  const activeBackground = '#314659';
-  return {
-    '.theme-editor-icon-switch': {
-      display: 'inline-block',
-
-      '.holder': {
-        position: 'relative',
-        display: 'inline-flex',
-        background: '#ebedf0',
-        borderRadius: '100vw',
-        cursor: 'pointer',
-        transition: 'all 0.3s',
-
-        '&::before': {
-          position: 'absolute',
-          top: 0,
-          left: 'calc(100% - 32px)',
-          width: 32,
-          height: 32,
-          background: activeBackground,
-          borderRadius: '100vw',
-          transition: 'all 0.3s',
-          content: '""',
-        },
-
-        '&.leftChecked::before': {
-          left: 0,
-        },
-
-        '&:hover': {
-          boxShadow: '0 0 3px fade(@active-background, 40%)',
-        },
-      },
-
-      '.icon': {
-        position: 'relative',
-        width: 32,
-        height: 32,
-        color: '#a3b1bf',
-        lineHeight: '32px',
-        textAlign: 'center',
-        transition: 'all 0.3s',
-        fontSize: 16,
-
-        '.anticon': {
-          fontSize: 14,
-        },
-
-        '&:first-child': {
-          marginInlineEnd: -4,
-        },
-
-        '&.active': {
-          color: '#fff',
-        },
-      },
-    },
-  };
-});
-
-export interface IconSwitchProps {
-  className?: string;
-  style?: React.CSSProperties;
-  leftChecked?: boolean;
-  leftIcon: React.ReactNode;
-  rightIcon: React.ReactNode;
-  onChange?: (leftChecked: boolean) => void;
-  transparent?: boolean;
-}
-
-export default function IconSwitch({
-  className,
-  style,
-  leftIcon,
-  rightIcon,
-  leftChecked,
-  transparent,
-  onChange,
-  ...props
-}: IconSwitchProps) {
-  const [wrapSSR, hashId] = useStyle();
-
-  return wrapSSR(
-    <div className={classNames('theme-editor-icon-switch', className, hashId)} style={style} {...props}>
-      <div
-        className={classNames('holder', leftChecked && 'leftChecked')}
-        onClick={() => {
-          onChange?.(!leftChecked);
-        }}
-      >
-        <span className={classNames('icon', leftChecked && 'active')}>{leftIcon}</span>
-        <span className={classNames('icon', !leftChecked && 'active')}>{rightIcon}</span>
-      </div>
-    </div>,
-  );
-}

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

@@ -1,26 +0,0 @@
-import type { FC } from 'react';
-import React from 'react';
-import { antdComponents } from './component-panel';
-import type { Theme } from './interface';
-import ComponentDemoPro from './token-panel-pro/ComponentDemoPro';
-
-export type PreviewDemoProps = {
-  theme: Theme;
-  style?: React.CSSProperties;
-};
-
-const PreviewDemo: FC<PreviewDemoProps> = ({ theme, style }) => {
-  return (
-    <div style={{ ...style, overflow: 'auto' }}>
-      <ComponentDemoPro
-        theme={theme}
-        components={antdComponents}
-        componentDrawer={false}
-        showAll
-        style={{ minHeight: '100%' }}
-      />
-    </div>
-  );
-};
-
-export default PreviewDemo;

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

@@ -1,155 +0,0 @@
-import type { DerivativeFunc } from '@ant-design/cssinjs';
-import classNames from 'classnames';
-import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
-import { antdComponents } from './component-panel';
-import useControlledTheme from './hooks/useControlledTheme';
-import type { SelectedToken, Theme } from './interface';
-import type { Locale } from './locale';
-import { LocaleContext, zhCN } from './locale';
-import { mapRelatedAlias, seedRelatedAlias, seedRelatedMap } from './meta/TokenRelation';
-import type { TokenPanelProProps } from './token-panel-pro';
-import TokenPanelPro from './token-panel-pro';
-import ComponentDemoPro from './token-panel-pro/ComponentDemoPro';
-import makeStyle from './utils/makeStyle';
-import { getRelatedComponents } from './utils/statistic';
-
-const useStyle = makeStyle('ThemeEditor', (token) => ({
-  '.antd-theme-editor': {
-    backgroundColor: token.colorBgLayout,
-    display: 'flex',
-  },
-}));
-
-const defaultTheme: Theme = {
-  name: '默认主题',
-  key: 'default',
-  config: {},
-};
-
-export type ThemeEditorRef = {
-  updateRef: () => void;
-};
-
-export type ThemeEditorProps = {
-  /**
-   * @deprecated
-   * @default true
-   */
-  simple?: boolean;
-  theme?: Theme;
-  onThemeChange?: (theme: Theme) => void;
-  className?: string;
-  style?: React.CSSProperties;
-  darkAlgorithm?: DerivativeFunc<any, any>;
-  locale?: Locale;
-};
-
-const ThemeEditor = forwardRef<ThemeEditorRef, ThemeEditorProps>(
-  ({ theme: customTheme, onThemeChange, className, style, darkAlgorithm, locale = zhCN }, ref) => {
-    const [wrapSSR, hashId] = useStyle();
-    const [selectedTokens, setSelectedTokens] = useState<SelectedToken>({
-      seed: ['colorPrimary'],
-    });
-    const [aliasOpen, setAliasOpen] = useState<boolean>(false);
-
-    const { theme, infoFollowPrimary, onInfoFollowPrimaryChange, updateRef } = useControlledTheme({
-      theme: customTheme,
-      defaultTheme,
-      onChange: onThemeChange,
-      darkAlgorithm,
-    });
-
-    useImperativeHandle(ref, () => ({
-      updateRef,
-    }));
-
-    const handleTokenSelect: TokenPanelProProps['onTokenSelect'] = (token, type) => {
-      setSelectedTokens((prev) => {
-        const tokens = typeof token === 'string' ? (token ? [token] : []) : token;
-        if (type === 'seed') {
-          return {
-            seed: tokens,
-          };
-        }
-
-        let newSelectedTokens = { ...prev };
-        tokens.forEach((newToken) => {
-          newSelectedTokens = {
-            ...prev,
-            [type]: prev[type]?.includes(newToken)
-              ? prev[type]?.filter((t) => t !== newToken)
-              : [...(prev[type] ?? []), newToken],
-          };
-        });
-        if (type === 'map') {
-          delete newSelectedTokens.alias;
-        }
-        return newSelectedTokens;
-      });
-    };
-
-    const computedSelectedTokens = useMemo(() => {
-      if (selectedTokens.seed?.length && !selectedTokens.map?.length && !selectedTokens.alias?.length) {
-        return [
-          ...selectedTokens.seed,
-          ...((seedRelatedMap as any)[selectedTokens.seed[0]] ?? []),
-          ...((seedRelatedAlias as any)[selectedTokens.seed[0]] ?? []),
-        ];
-      }
-      if (selectedTokens.map?.length && !selectedTokens.alias?.length) {
-        return [
-          ...selectedTokens.map,
-          ...selectedTokens.map.reduce((result, item) => {
-            return result.concat((mapRelatedAlias as any)[item]);
-          }, []),
-        ];
-      }
-      if (selectedTokens.alias?.length) {
-        return [...selectedTokens.alias];
-      }
-      return [];
-    }, [selectedTokens]);
-
-    const relatedComponents = useMemo(() => {
-      return computedSelectedTokens ? getRelatedComponents(computedSelectedTokens) : [];
-    }, [computedSelectedTokens]);
-
-    return wrapSSR(
-      <LocaleContext.Provider value={locale}>
-        <div className={classNames(hashId, 'antd-theme-editor', className)} style={style}>
-          <div
-            style={{
-              flex: aliasOpen ? '0 0 860px' : `0 0 ${860 - 320}px`,
-              height: '100%',
-              backgroundColor: '#F7F8FA',
-              backgroundImage: 'linear-gradient(180deg, #FFFFFF 0%, rgba(246,247,249,0.00) 100%)',
-              display: 'flex',
-              transition: 'all 0.3s',
-            }}
-          >
-            <TokenPanelPro
-              aliasOpen={aliasOpen}
-              onAliasOpenChange={(open) => setAliasOpen(open)}
-              theme={theme}
-              style={{ flex: 1 }}
-              selectedTokens={selectedTokens}
-              onTokenSelect={handleTokenSelect}
-              infoFollowPrimary={infoFollowPrimary}
-              onInfoFollowPrimaryChange={onInfoFollowPrimaryChange}
-            />
-          </div>
-          <ComponentDemoPro
-            theme={theme}
-            components={antdComponents}
-            activeComponents={relatedComponents}
-            selectedTokens={computedSelectedTokens}
-            style={{ flex: 1, overflow: 'auto', height: '100%' }}
-            componentDrawer
-          />
-        </div>
-      </LocaleContext.Provider>,
-    );
-  },
-);
-
-export default ThemeEditor;

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

@@ -1,212 +0,0 @@
-import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Dropdown, Menu } from 'antd';
-import classNames from 'classnames';
-import type { FC, ReactNode } from 'react';
-import React, { useMemo } from 'react';
-import type { Theme } from './interface';
-import makeStyle from './utils/makeStyle';
-
-interface ThemeItem extends Theme {
-  icon?: ReactNode;
-  closable?: boolean;
-  fixed?: boolean;
-}
-
-export type ThemeSelectProps = {
-  onEnabledThemeChange: (themes: string[]) => void;
-  onShownThemeChange: (themes: string[], selectTheme: string, info: { type: 'select' | 'deselect' }) => void;
-  enabledThemes: string[];
-  shownThemes: string[];
-  themes: ThemeItem[];
-  showAddTheme?: boolean;
-};
-
-const useStyle = makeStyle('ThemeSelect', (token) => ({
-  '.previewer-theme-select': {
-    padding: `${token.paddingXXS}px ${token.paddingXS}px`,
-    borderRadius: 4,
-    backgroundColor: 'rgba(0, 0, 0, 0.02)',
-    height: token.controlHeight,
-    display: 'flex',
-    alignItems: 'center',
-    overflow: 'hidden',
-
-    [`${token.rootCls}-btn.previewer-theme-select-add-btn`]: {
-      minWidth: 0,
-      width: 16,
-      height: 16,
-      fontSize: 8,
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginInlineStart: token.marginSM,
-      boxShadow: 'none',
-    },
-
-    '.previewer-theme-select-tag': {
-      height: 22,
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      boxSizing: 'border-box',
-      borderRadius: 4,
-      backgroundColor: token.colorBgContainer,
-      border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
-      paddingInline: 10,
-      fontSize: token.fontSizeSM,
-      position: 'relative',
-      cursor: 'pointer',
-      // transition: `all ${token.motionDurationMid}`,
-
-      '&:not(:last-child)': {
-        marginInlineEnd: token.marginXS,
-      },
-
-      '&.previewer-theme-select-tag-active': {
-        border: `${token.lineWidth}px ${token.lineType} ${token['blue-1']}`,
-        backgroundColor: 'rgba(22,119,255,0.10)',
-        color: token.colorPrimary,
-
-        '&::after': {
-          content: '""',
-          borderStartEndRadius: 2,
-          position: 'absolute',
-          insetInlineEnd: 2,
-          top: 2,
-          width: 6,
-          height: 6,
-          background: `linear-gradient(to right top, transparent, transparent 50%, ${token.colorPrimary} 50%, ${token.colorPrimary} 100%)`,
-        },
-      },
-
-      '.previewer-theme-select-tag-close-btn': {
-        position: 'absolute',
-        top: -2,
-        insetInlineEnd: -2,
-        width: 12,
-        height: 12,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        background: token.colorBgContainer,
-        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)',
-        borderRadius: '50%',
-        opacity: 0,
-        pointerEvents: 'none',
-        zIndex: 2,
-        color: token.colorIcon,
-
-        '> .anticon': {
-          fontSize: 6,
-        },
-      },
-
-      '&:hover': {
-        '.previewer-theme-select-tag-close-btn': {
-          opacity: 1,
-          pointerEvents: 'initial',
-        },
-      },
-    },
-  },
-
-  '.previewer-theme-select-dropdown': {
-    '.previewer-theme-select-dropdown-title': {
-      [`${token.rootCls}-dropdown-menu-item-group-title`]: {
-        fontSize: token.fontSizeSM,
-        paddingBottom: token.padding,
-        paddingTop: 10,
-      },
-    },
-  },
-}));
-
-const ThemeSelect: FC<ThemeSelectProps> = (props) => {
-  const { onEnabledThemeChange, onShownThemeChange, enabledThemes, shownThemes, themes, showAddTheme } = props;
-
-  const [wrapSSR, hashId] = useStyle();
-
-  const dropdownItems = useMemo(
-    () => [
-      {
-        disabled: true,
-        label: '添加主题即可预览',
-        className: 'previewer-theme-select-dropdown-title',
-        type: 'group',
-        key: 'add-theme-to-preview',
-      },
-      ...themes
-        .filter((theme) => !shownThemes.includes(theme.key))
-        .map((theme) => ({
-          icon: theme.icon,
-          value: theme.key,
-          label: theme.name,
-          key: theme.key,
-          onClick: () => {
-            onShownThemeChange([...shownThemes, theme.key], theme.key, {
-              type: 'select',
-            });
-          },
-        })),
-    ],
-    [themes, shownThemes, onShownThemeChange],
-  );
-
-  const shownThemeEntities = useMemo(
-    () => themes.filter((theme) => shownThemes.includes(theme.key)),
-    [themes, shownThemes],
-  );
-
-  return wrapSSR(
-    <div className={classNames('previewer-theme-select', hashId)}>
-      {shownThemeEntities.map((theme) => (
-        <span
-          onClick={() => {
-            if (theme.fixed) {
-              return;
-            }
-            onEnabledThemeChange(
-              enabledThemes.includes(theme.key)
-                ? enabledThemes.filter((item) => item !== theme.key)
-                : [...enabledThemes, theme.key],
-            );
-          }}
-          key={theme.key}
-          className={classNames('previewer-theme-select-tag', {
-            'previewer-theme-select-tag-active': enabledThemes.includes(theme.key),
-          })}
-        >
-          {theme.name}
-          {theme.closable && (
-            <span
-              className="previewer-theme-select-tag-close-btn"
-              onClick={(e) => {
-                e.stopPropagation();
-                onEnabledThemeChange(enabledThemes.filter((item) => item !== theme.key));
-                onShownThemeChange(
-                  shownThemes.filter((item) => item !== theme.key),
-                  theme.key,
-                  { type: 'deselect' },
-                );
-              }}
-            >
-              <CloseOutlined />
-            </span>
-          )}
-        </span>
-      ))}
-      {showAddTheme && (
-        <Dropdown
-          placement="bottomRight"
-          trigger={['click']}
-          overlay={<Menu items={dropdownItems} />}
-          overlayClassName={classNames('previewer-theme-select-dropdown', hashId)}
-        >
-          <Button type="primary" shape="circle" className="previewer-theme-select-add-btn" icon={<PlusOutlined />} />
-        </Dropdown>
-      )}
-    </div>,
-  );
-};
-
-export default ThemeSelect;