💄 style: update SyntaxHighlighter and form

src/Form/demos/Data.tsx

@@ -0,0 +1,103 @@
+import { Form, type FormProps } from '@lobehub/ui';
+import { Button, InputNumber, Segmented, Select, Switch } from 'antd';
+import { Palette, PanelLeftClose } from 'lucide-react';
+
+const setting = {
+ i18n: 'en',
+ liteAnimation: false,
+ sidebarExpand: true,
+ sidebarFixedMode: 'float',
+ sidebarWidth: 300,
+};
+
+const items: FormProps['items'] = [
+ {
+ children: [
+ {
+ children: (
+ <Select
+ options={[
+ {
+ label: 'English',
+ value: 'en',
+ },
+ {
+ label: '简体中文',
+ value: 'zh_CN',
+ },
+ ]}
+ />
+ ),
+ desc: 'Editor language',
+ label: 'Language',
+ name: 'i18n',
+ },
+ {
+ children: <Switch />,
+ desc: 'Reduce the blur effect and background flow color, which can improve smoothness and save CPU usage',
+ label: 'Reduce Animation',
+ name: 'liteAnimation',
+ valuePropName: 'checked',
+ },
+ ],
+ icon: Palette,
+ title: 'Theme Settings',
+ },
+ {
+ children: [
+ {
+ children: <Switch />,
+ desc: 'Whether to expand the sidebar by default when starting',
+ label: 'Default Expand',
+ name: 'sidebarExpand',
+ valuePropName: 'checked',
+ },
+ {
+ children: (
+ <Segmented
+ options={[
+ {
+ label: 'Fixed',
+ value: 'fixed',
+ },
+ {
+ label: 'Float',
+ value: 'float',
+ },
+ ]}
+ />
+ ),
+ desc: 'Fixed as grid mode for constant display, auto-expand when the mouse moves to the side in floating mode',
+ label: 'Display Mode',
+ name: 'sidebarFixedMode',
+ },
+ {
+ children: <InputNumber />,
+ desc: 'Default width of the sidebar when starting',
+ label: 'Default Width',
+ name: 'sidebarWidth',
+ },
+ ],
+ icon: PanelLeftClose,
+ title: 'Quick Setting Sidebar',
+ },
+];
+
+export default () => {
+ return (
+ <Form
+ footer={
+ <>
+ <Button htmlType="button">Reset</Button>
+ <Button htmlType="submit" type="primary">
+ Submit
+ </Button>
+ </>
+ }
+ initialValues={setting}
+ items={items}
+ onFinish={console.table}
+ style={{ width: 500 }}
+ />
+ );
+};

src/Form/demos/index.tsx

@@ -12,7 +12,7 @@ const setting = {
 
 export default () => {
  return (
- <Form initialValues={setting} style={{ width: 500 }}>
+ <Form initialValues={setting} onFinish={console.table} style={{ width: 500 }}>
  <FormGroup icon={Palette} title={'Theme Settings'}>
  <FormItem desc={'Editor language'} label={'Language'} name="i18n">
  <Select

src/Form/index.md

@@ -9,6 +9,10 @@ description: High performance Form component with data scope management. Includi
 
 <code src="./demos/index.tsx" center></code>
 
+## DataDrive
+
+<code src="./demos/Data.tsx" center></code>
+
 ## APIs
 
 <API></API>

src/Form/index.tsx

@@ -1,15 +1,38 @@
 import { Form as AntForm, FormProps as AntFormProps } from 'antd';
-import { memo } from 'react';
+import { LucideIcon } from 'lucide-react';
+import { type ReactNode, memo } from 'react';
 
+import FormFooter from './components/FormFooter';
+import FormGroup from './components/FormGroup';
+import FormItem, { FormItemProps } from './components/FormItem';
 import { useStyles } from './style';
 
-export type FormProps = AntFormProps;
+export interface ItemGroup {
+ children: FormItemProps[];
+ icon: LucideIcon;
+ title: string;
+}
 
-const Form = memo<FormProps>(({ className, ...props }) => {
+export interface FormProps extends AntFormProps {
+ children?: ReactNode;
+ footer?: ReactNode;
+ items?: ItemGroup[];
+}
+
+const Form = memo<FormProps>(({ className, footer, items, children, ...props }) => {
  const { cx, styles } = useStyles();
  return (
- // @ts-ignore
- <AntForm className={cx(styles.form, className)} colon={false} layout="horizontal" {...props} />
+ <AntForm className={cx(styles.form, className)} colon={false} layout="horizontal" {...props}>
+ {items?.map((group, groupIndex) => (
+ <FormGroup icon={group.icon} key={groupIndex} title={group.title}>
+ {group.children.map((item, itemIndex) => {
+ return <FormItem divider={itemIndex !== 0} key={itemIndex} {...item} />;
+ })}
+ </FormGroup>
+ ))}
+ {children}
+ {footer && <FormFooter>{footer}</FormFooter>}
+ </AntForm>
  );
 });
 export default Form;

src/Highlighter/SyntaxHighlighter/index.tsx

@@ -2,24 +2,29 @@ import { useThemeMode } from 'antd-style';
 import { Loader2 } from 'lucide-react';
 import { memo, useEffect } from 'react';
 import { Center } from 'react-layout-kit';
+import { HighlighterOptions } from 'shiki-es';
 import { shallow } from 'zustand/shallow';
 
 import Icon from '@/Icon';
 import { useHighlight } from '@/hooks/useHighlight';
 
-import type { HighlighterProps } from '../index';
 import { useStyles } from './style';
 
-export type SyntaxHighlighterProps = Pick<HighlighterProps, 'language' | 'children' | 'theme'>;
+export interface SyntaxHighlighterProps {
+ children: string;
+ language: string;
+ options?: HighlighterOptions;
+ theme?: 'dark' | 'light';
+}
 
-const SyntaxHighlighter = memo<SyntaxHighlighterProps>(({ children, language }) => {
+const SyntaxHighlighter = memo<SyntaxHighlighterProps>(({ children, language, options }) => {
  const { styles } = useStyles();
  const { isDarkMode } = useThemeMode();
  const [codeToHtml, isLoading] = useHighlight((s) => [s.codeToHtml, !s.highlighter], shallow);
 
  useEffect(() => {
- useHighlight.getState().initHighlighter();
- }, []);
+ useHighlight.getState().initHighlighter(options);
+ }, [options]);
 
  return (
  <>

src/ThemeProvider/GlobalStyle.ts

@@ -98,6 +98,27 @@ const GlobalStyle = createGlobalStyle`
  }
  }
  }
+
+ .ant-tooltip-inner {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ min-height: unset;
+ padding: 4px 8px;
+
+ color: ${({ theme }) => theme.colorBgLayout};
+
+ background-color: ${({ theme }) => theme.colorText};
+ border-radius: ${({ theme }) => theme.borderRadiusSM}px;
+ }
+
+ .ant-tooltip-arrow {
+ &::before,
+ &::after {
+ background: ${({ theme }) => theme.colorText};
+ }
+ }
 `;
 
 export default GlobalStyle;

src/ThemeProvider/index.tsx

@@ -33,6 +33,7 @@ export interface ThemeProviderProps {
  * @description Custom extra token
  */
  customToken?: (theme: CustomTokenParams) => { [key: string]: any };
+ enableWebfonts?: boolean;
  /**
  * @description Whether to inline the styles on server-side rendering or not
  */
@@ -53,6 +54,7 @@ const ThemeProvider = memo<ThemeProviderProps>(
  themeMode,
  customStylish = () => ({}),
  customToken = () => ({}),
+ enableWebfonts = true,
  webfonts = [
  'https://npm.elemecdn.com/@lobehub/webfont-mono/css/index.css',
  'https://npm.elemecdn.com/@lobehub/webfont-harmony-sans/css/index.css',
@@ -63,7 +65,9 @@ const ThemeProvider = memo<ThemeProviderProps>(
 
  return (
  <>
- {webfonts && webfonts.map((webfont, index) => <FontLoader key={index} url={webfont} />)}
+ {enableWebfonts &&
+ webfonts?.length > 0 &&
+ webfonts.map((webfont, index) => <FontLoader key={index} url={webfont} />)}
  <StyleProvider speedy={process.env.NODE_ENV === 'production'}>
  <AntdThemeProvider<LobeCustomToken>
  customStylish={(theme) => ({ ...lobeCustomStylish(theme), ...customStylish(theme) })}

src/hooks/useHighlight.ts

@@ -1,4 +1,4 @@
-import { type Highlighter, getHighlighter } from 'shiki-es';
+import { type Highlighter, type HighlighterOptions, getHighlighter } from 'shiki-es';
 import { create } from 'zustand';
 
 import { themeConfig } from '@/Highlighter/theme';
@@ -39,7 +39,7 @@ interface Store {
  * @title Initialize the highlighter object
  * @returns Initialization promise object
  */
- initHighlighter: () => Promise<void>;
+ initHighlighter: (options?: HighlighterOptions) => Promise<void>;
 }
 
 export const useHighlight = create<Store>((set, get) => ({
@@ -59,11 +59,11 @@ export const useHighlight = create<Store>((set, get) => ({
  },
  highlighter: undefined,
 
- initHighlighter: async () => {
+ initHighlighter: async (options) => {
  if (!get().highlighter) {
  const highlighter = await getHighlighter({
- langs: languageMap as any,
- themes: [themeConfig(true), themeConfig(false)],
+ langs: options?.langs || (languageMap as any),
+ themes: options?.themes || [themeConfig(true), themeConfig(false)],
  });
 
  set({ highlighter });