@lark-apaas/client-toolkit 0.1.0-alpha.1

package/lib/components/index.d.ts

@@ -0,0 +1,8 @@
+export * from './SidebarNav';
+export * from './User';
+export * from './SidebarNav';
+export * from './User';
+export * from './theme';
+export * from './AppContainer';
+export * from './ErrorRender';
+export * from './NotFoundRender';

package/lib/components/index.js

@@ -0,0 +1,6 @@
+export * from "./SidebarNav/index.js";
+export * from "./User/index.js";
+export * from "./theme/index.js";
+export * from "./AppContainer/index.js";
+export * from "./ErrorRender/index.js";
+export * from "./NotFoundRender/index.js";

package/lib/components/theme/ThemeProvider.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type ReactNode } from 'react';
+import type { ITheme } from '../../types';
+import { IThemeTokenMeta } from './util';
+export interface IBaseThemeProviderProps {
+    defaultTheme?: ITheme;
+    themeMeta?: Partial<IThemeTokenMeta>;
+}
+interface ThemeProviderProps extends IBaseThemeProviderProps {
+    children: ReactNode;
+    /** 是否启用系统主题自动切换 */
+    enableSystemTheme?: boolean;
+}
+type ThemeProviderState = {
+    theme: ITheme;
+    setTheme: (theme: ITheme) => void;
+};
+export declare const ThemeProviderContext: React.Context<ThemeProviderState>;
+export declare function ThemeProvider({ children, defaultTheme, themeMeta, enableSystemTheme, ...props }: ThemeProviderProps): React.JSX.Element;
+export {};

package/lib/components/theme/ThemeProvider.js

@@ -0,0 +1,75 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useEffect, useMemo, useState } from "react";
+import { ConfigProvider } from "antd";
+import { generateDarkTheme, generateLightTheme } from "./util.js";
+import { findValueByPixel, themeMetaOptions } from "./constants.js";
+const initialState = {
+    theme: 'system',
+    setTheme: ()=>null
+};
+const ThemeProviderContext = /*#__PURE__*/ createContext(initialState);
+const themeKey = 'miao-ui-theme';
+function ThemeProvider({ children, defaultTheme = 'light', themeMeta = {}, enableSystemTheme = false, ...props }) {
+    const [theme, setTheme] = useState(()=>localStorage.getItem(themeKey) || defaultTheme);
+    useEffect(()=>{
+        const root = window.document.documentElement;
+        root.classList.remove('light', 'dark');
+        root.classList.add(theme);
+    }, [
+        theme,
+        enableSystemTheme
+    ]);
+    useEffect(()=>{
+        const root = window.document.documentElement;
+        if (void 0 !== themeMeta.spacing) {
+            const { rem } = findValueByPixel(themeMetaOptions.themeSpaces, themeMeta.spacing) || {
+                rem: '0.25'
+            };
+            root.style.setProperty('--spacing', `${rem}rem`);
+        }
+        if (void 0 !== themeMeta.borderRadius) {
+            const { rem } = findValueByPixel(themeMetaOptions.themeRadius, themeMeta.borderRadius) || {
+                rem: '0.625'
+            };
+            root.style.setProperty('--radius', `${rem}rem`);
+        }
+    }, [
+        themeMeta
+    ]);
+    const value = {
+        theme,
+        setTheme: (theme)=>{
+            localStorage.setItem(themeKey, theme);
+            setTheme(theme);
+        }
+    };
+    const antdTheme = useMemo(()=>{
+        const res = findValueByPixel(themeMetaOptions.themeSpaces, themeMeta.spacing) || {
+            pixel: '36',
+            rem: '0.25',
+            size: {
+                sizeUnit: '4',
+                sizeStep: '4'
+            }
+        };
+        const transformThemeMeta = {
+            colorPrimary: themeMeta.colorPrimary,
+            borderRadius: Number(themeMeta.borderRadius),
+            sizeUnit: Number(res.size.sizeUnit),
+            sizeStep: Number(res.size.sizeStep)
+        };
+        return 'dark' === theme ? generateDarkTheme(transformThemeMeta) : generateLightTheme(transformThemeMeta);
+    }, [
+        theme,
+        themeMeta
+    ]);
+    return /*#__PURE__*/ jsx(ThemeProviderContext.Provider, {
+        ...props,
+        value: value,
+        children: /*#__PURE__*/ jsx(ConfigProvider, {
+            theme: antdTheme,
+            children: children
+        })
+    });
+}
+export { ThemeProvider, ThemeProviderContext };

package/lib/components/theme/constants.d.ts

@@ -0,0 +1,48 @@
+export interface IThemeMeta {
+    themeColors: {
+        title: string;
+        options: {
+            value: string;
+            color: string;
+        }[];
+    };
+    themeRadius: {
+        title: string;
+        options: {
+            value: {
+                pixel: string;
+                rem: string;
+            };
+            iconUrl: string;
+            size: string;
+        }[];
+    };
+    themeSpaces: {
+        title: string;
+        options: {
+            value: {
+                pixel: string;
+                rem: string;
+                size: {
+                    sizeUnit: string;
+                    sizeStep: string;
+                };
+            };
+            iconUrl: string;
+            size: string;
+        }[];
+    };
+}
+export declare const themeMetaOptions: Omit<IThemeMeta, 'colorPrimary' | 'borderRadius' | 'spacing'>;
+export declare const themeTailwindRadius: {};
+type ThemeColorTokenMap = {
+    light: Record<string, string>;
+    dark: Record<string, string>;
+};
+export declare const themeColorTokenMap: ThemeColorTokenMap;
+export declare function getKeyByColor(colorValue: string, theme: keyof ThemeColorTokenMap): string;
+export declare function findValueByPixel(themeSpaces: typeof themeMetaOptions.themeSpaces | typeof themeMetaOptions.themeRadius, pixelValue?: string | number): {
+    pixel: string;
+    rem: string;
+};
+export {};