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

package/src/client/antd-token-previewer/token-panel-pro/AliasPanel.tsx

@@ -0,0 +1,231 @@
+import { CaretRightOutlined, QuestionCircleOutlined, RightOutlined, ShrinkOutlined } from '@ant-design/icons';
+import { Button, Collapse, Empty, Tooltip } from 'antd';
+import type { MutableTheme } from 'antd-token-previewer';
+import classNames from 'classnames';
+import useMergedState from 'rc-util/es/hooks/useMergedState';
+import type { FC } from 'react';
+import React, { useMemo } from 'react';
+import { Pick } from '../icons';
+import type { AliasToken, SelectedToken } from '../interface';
+import { mapRelatedAlias, seedRelatedAlias } from '../meta/TokenRelation';
+import makeStyle from '../utils/makeStyle';
+import { getRelatedComponents } from '../utils/statistic';
+import TokenDetail from './TokenDetail';
+
+const { Panel } = Collapse;
+
+const useStyle = makeStyle('TokenPanelProAlias', (token) => ({
+  '.token-panel-pro-color-alias': {
+    display: 'flex',
+    flexDirection: 'column',
+    marginTop: 45,
+    borderTop: `1px solid ${token.colorSplit}`,
+
+    '.token-panel-pro-color-alias-title': {
+      display: 'flex',
+      alignItems: 'center',
+      padding: '0 16px',
+      flex: '0 0 60px',
+
+      '&-text': {
+        fontSize: token.fontSizeLG,
+        fontWeight: token.fontWeightStrong,
+      },
+    },
+
+    '.token-panel-pro-color-alias-description': {
+      color: token.colorTextTertiary,
+      fontSize: token.fontSizeSM,
+      lineHeight: token.lineHeightSM,
+      padding: '0 16px 12px',
+    },
+
+    [`.token-panel-pro-alias-collapse${token.rootCls}-collapse`]: {
+      [`> ${token.rootCls}-collapse-item > ${token.rootCls}-collapse-content > ${token.rootCls}-collapse-content-box`]:
+        {
+          paddingBlock: '0',
+        },
+
+      [`> ${token.rootCls}-collapse-item`]: {
+        [`> ${token.rootCls}-collapse-header`]: {
+          alignItems: 'center',
+          padding: '8px 16px',
+          [`> ${token.rootCls}-collapse-header-text`]: {
+            flex: 1,
+
+            '.token-panel-pro-token-collapse-map-collapse-count': {
+              color: token.colorTextSecondary,
+              display: 'inline-block',
+              fontSize: 12,
+              lineHeight: '16px',
+              padding: '0 6px',
+              backgroundColor: token.colorFillAlter,
+              borderRadius: 999,
+            },
+          },
+
+          '.token-panel-pro-token-picked': {
+            color: token.colorPrimary,
+          },
+        },
+      },
+    },
+
+    '.token-panel-pro-color-alias-expand': {
+      height: '100%',
+      width: 20,
+      transform: 'translateX(-50%)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+
+      '&:hover': {
+        '.token-panel-pro-color-alias-expand-handler': {
+          opacity: 1,
+        },
+      },
+
+      '.token-panel-pro-color-alias-expand-handler': {
+        height: 100,
+        width: 16,
+        borderRadius: 999,
+        border: `1px solid ${token.colorSplit}`,
+        backgroundColor: '#fff',
+        margin: 'auto',
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        opacity: 0,
+        transition: 'box-shadow 0.2s',
+
+        '&:hover': {
+          boxShadow: token.boxShadow,
+        },
+      },
+    },
+  },
+}));
+
+export type AliasPanelProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  theme: MutableTheme;
+  activeSeeds?: string[];
+  selectedTokens?: SelectedToken;
+  onTokenSelect?: (token: string, type: keyof SelectedToken) => void;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  description?: string;
+};
+
+const AliasPanel: FC<AliasPanelProps> = ({
+  className,
+  activeSeeds,
+  theme,
+  style,
+  selectedTokens,
+  onTokenSelect,
+  open: customOpen,
+  onOpenChange,
+  description,
+}) => {
+  const [wrapSSR, hashId] = useStyle();
+  const [open, setOpen] = useMergedState(customOpen ?? true, {
+    value: customOpen,
+    onChange: onOpenChange,
+  });
+
+  const shownAlias = useMemo(
+    () =>
+      selectedTokens?.map?.length
+        ? Array.from(
+            new Set(
+              selectedTokens?.map.reduce<string[]>((result, map) => {
+                return result.concat(...((mapRelatedAlias as any)[map] ?? []));
+              }, []),
+            ),
+          )
+        : activeSeeds?.reduce<(keyof AliasToken)[]>(
+            (result, item) => result.concat((seedRelatedAlias as any)[item] ?? []),
+            [],
+          ),
+    [selectedTokens, activeSeeds],
+  );
+
+  return wrapSSR(
+    <div className={classNames(className, 'token-panel-pro-color-alias', hashId)} style={style}>
+      {open ? (
+        <>
+          <div className="token-panel-pro-color-alias-title">
+            <span className="token-panel-pro-color-alias-title-text">Alias Token</span>
+            <Tooltip
+              placement="topLeft"
+              arrowPointAtCenter
+              title="别名变量（Alias Token）是 Map Token 的别名。Alias Token 用于批量控制某些共性组件的样式。"
+            >
+              <QuestionCircleOutlined style={{ fontSize: 14, marginLeft: 4 }} />
+            </Tooltip>
+            <Button
+              type="text"
+              icon={<ShrinkOutlined />}
+              style={{ marginLeft: 'auto' }}
+              onClick={() => setOpen(false)}
+            />
+          </div>
+          {description && <div className="token-panel-pro-color-alias-description">{description}</div>}
+          <div style={{ flex: 1, overflow: 'auto' }}>
+            <Collapse
+              className="token-panel-pro-alias-collapse"
+              ghost
+              expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} style={{ fontSize: 12 }} />}
+            >
+              {shownAlias?.map((aliasToken) => (
+                <Panel
+                  header={
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                      <span style={{ marginRight: 8 }}>{aliasToken}</span>
+                      <span className="token-panel-pro-token-collapse-map-collapse-count">
+                        {getRelatedComponents(aliasToken).length}
+                      </span>
+                      <div
+                        style={{ padding: 4, marginLeft: 'auto' }}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onTokenSelect?.(aliasToken, 'alias');
+                        }}
+                      >
+                        <Pick
+                          className={classNames('token-panel-pro-token-pick', {
+                            'token-panel-pro-token-picked': selectedTokens?.alias?.includes(aliasToken),
+                          })}
+                        />
+                      </div>
+                    </div>
+                  }
+                  key={aliasToken}
+                >
+                  <TokenDetail
+                    style={{ paddingBottom: 10 }}
+                    themes={[theme]}
+                    path={['token']}
+                    tokenName={aliasToken as keyof AliasToken}
+                  />
+                </Panel>
+              ))}
+            </Collapse>
+            {!shownAlias?.length && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无相关 Alias Token" />}
+          </div>
+        </>
+      ) : (
+        <div className="token-panel-pro-color-alias-expand">
+          <div className="token-panel-pro-color-alias-expand-handler" onClick={() => setOpen(true)}>
+            <RightOutlined style={{ fontSize: 12 }} />
+          </div>
+        </div>
+      )}
+    </div>,
+  );
+};
+
+export default AliasPanel;

package/src/client/antd-token-previewer/token-panel-pro/ComponentDemoPro.tsx

@@ -0,0 +1,119 @@
+import { ConfigProvider, Segmented, Space, theme as antdTheme } from 'antd';
+import type { MutableTheme } from 'antd-token-previewer';
+import type { FC } from 'react';
+import React from 'react';
+import ComponentDemoGroup from '../component-panel/ComponentDemoGroup';
+import { useLocale } from '../locale';
+import { Error, Primary, Success, Warning } from '../overviews';
+
+export type ComponentDemoProProps = {
+  selectedTokens?: string[];
+  theme: MutableTheme;
+  components: Record<string, string[]>;
+  activeComponents?: string[];
+  style?: React.CSSProperties;
+  componentDrawer?: boolean;
+  showAll?: boolean;
+};
+
+const ComponentDemoPro: FC<ComponentDemoProProps> = ({
+  selectedTokens,
+  theme,
+  components,
+  activeComponents,
+  componentDrawer,
+  showAll,
+  style,
+}) => {
+  const [mode, setMode] = React.useState<'overview' | 'component'>('overview');
+  const {
+    token: { colorBgLayout },
+  } = antdTheme.useToken();
+  const locale = useLocale();
+
+  const overviewDemo = React.useMemo(() => {
+    if (showAll) {
+      return (
+        <Space direction="vertical">
+          <Primary />
+          <Success />
+          <Error />
+          <Warning />
+        </Space>
+      );
+    }
+    if (selectedTokens?.includes('colorError')) {
+      return <Error />;
+    }
+    if (selectedTokens?.includes('colorSuccess')) {
+      return <Success />;
+    }
+    if (selectedTokens?.includes('colorWarning')) {
+      return <Warning />;
+    }
+    return <Primary />;
+  }, [selectedTokens, showAll]);
+
+  return (
+    <div style={{ ...style, background: colorBgLayout, paddingBottom: 24 }}>
+      <div style={{ margin: 'auto', maxWidth: 960 }}>
+        <Segmented
+          options={[
+            { value: 'overview', label: locale.demo.overview },
+            { value: 'component', label: locale.demo.components },
+          ]}
+          value={mode}
+          onChange={setMode as any}
+          style={{ margin: '12px 0 0 12px' }}
+        />
+
+        <ConfigProvider
+          theme={{
+            components: {
+              Select: {
+                zIndexPopup: 10,
+              },
+              DatePicker: {
+                zIndexPopup: 10,
+              },
+              Dropdown: {
+                zIndexPopup: 10,
+              },
+              Mentions: {
+                zIndexPopup: 10,
+              },
+              Tooltip: {
+                zIndexPopup: 10,
+              },
+              Popover: {
+                zIndexPopup: 10,
+              },
+              Popconfirm: {
+                zIndexPopup: 10,
+              },
+            },
+          }}
+        >
+          {mode === 'overview' ? (
+            <div style={{ margin: 12, maxWidth: 'fit-content' }}>{overviewDemo}</div>
+          ) : (
+            <ComponentDemoGroup
+              selectedTokens={selectedTokens}
+              themes={[theme]}
+              components={components}
+              activeComponents={activeComponents}
+              componentDrawer={componentDrawer}
+              hideTokens
+            />
+          )}
+        </ConfigProvider>
+      </div>
+    </div>
+  );
+};
+
+export default (props: ComponentDemoProProps) => (
+  <ConfigProvider theme={props.theme.config}>
+    <ComponentDemoPro {...props} />
+  </ConfigProvider>
+);

package/src/client/antd-token-previewer/token-panel-pro/InputNumberPlus.tsx

@@ -0,0 +1,21 @@
+import { InputNumber, Slider } from 'antd';
+import type { FC } from 'react';
+import React from 'react';
+
+export type InputNumberPlusProps = {
+  value?: number;
+  onChange?: (value: number | null) => void;
+  min?: number;
+  max?: number;
+};
+
+const InputNumberPlus: FC<InputNumberPlusProps> = ({ value, onChange, min, max }) => {
+  return (
+    <div style={{ display: 'flex', width: 200 }}>
+      <Slider style={{ flex: '0 0 120px', marginRight: 12 }} value={value} min={min} max={max} onChange={onChange} />
+      <InputNumber value={value} min={min} max={max} onChange={onChange} style={{ flex: 1 }} />
+    </div>
+  );
+};
+
+export default InputNumberPlus;