@particle-network/ui-native 0.0.12 → 0.0.14

package/dist/hooks/index.d.ts

@@ -1,5 +1,7 @@
 export * from './useColors';
+export * from './useComponentConfig';
 export * from './useKeyboard';
+export * from './useMs';
 export * from './useRadius';
 export * from './useSpacing';
 export * from './useTheme';

package/dist/hooks/index.js

@@ -1,5 +1,7 @@
 export * from "./useColors.js";
+export * from "./useComponentConfig.js";
 export * from "./useKeyboard.js";
+export * from "./useMs.js";
 export * from "./useRadius.js";
 export * from "./useSpacing.js";
 export * from "./useTheme.js";

package/dist/hooks/useComponentConfig.d.ts

@@ -0,0 +1 @@
+export declare function useComponentConfig(): import("..").ComponentConfig;

package/dist/hooks/useComponentConfig.js

@@ -0,0 +1,7 @@
+import { useThemeContext } from "../provider/ThemeContext.js";
+import { defaultComponentConfig } from "../config/config.default.js";
+function useComponentConfig() {
+    const { componentConfig } = useThemeContext();
+    return componentConfig || defaultComponentConfig;
+}
+export { useComponentConfig };

package/dist/hooks/useMs.d.ts

@@ -0,0 +1,3 @@
+export declare function useMs(): {
+    ms: (value: number) => number;
+};

package/dist/hooks/useMs.js

@@ -0,0 +1,10 @@
+import { moderateScale } from "react-native-size-matters";
+import { useTheme } from "./useTheme.js";
+function useMs() {
+    const { msFactor } = useTheme();
+    const ms = (value)=>'number' == typeof msFactor ? moderateScale(value, msFactor) : moderateScale(value);
+    return {
+        ms
+    };
+}
+export { useMs };

package/dist/index.d.ts

@@ -3,3 +3,5 @@ export * from './provider';
 export * from './hooks';
 export * from './theme';
 export type * from './types';
+export * from './config';
+export * from './utils';

package/dist/index.js

@@ -2,3 +2,5 @@ export * from "./components/index.js";
 export * from "./provider/index.js";
 export * from "./hooks/index.js";
 export * from "./theme/index.js";
+export * from "./config/index.js";
+export * from "./utils/index.js";

package/dist/provider/ThemeContext.d.ts

@@ -1,3 +1,3 @@
-import type { ThemeContextValue } from '../types/theme';
+import type { ThemeContextValue } from '../types';
 export declare const ThemeContextProvider: import("react").Provider<ThemeContextValue | undefined>;
 export declare function useThemeContext(): ThemeContextValue;

package/dist/provider/ThemeContext.js

@@ -1,4 +1,5 @@
 import { createContext, useContext } from "react";
+import { builtinComponentConfig } from "../config/index.js";
 import { createTheme } from "../theme/index.js";
 const ThemeContext = /*#__PURE__*/ createContext(void 0);
 const ThemeContextProvider = ThemeContext.Provider;
@@ -7,8 +8,10 @@ function useThemeContext() {
     if (!context) return {
         theme: createTheme('light'),
         config: {
-            theme: 'light'
-        }
+            theme: 'light',
+            componentConfig: builtinComponentConfig["default"]
+        },
+        componentConfig: builtinComponentConfig["default"]
     };
     return context;
 }

package/dist/provider/ThemeProvider.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import type { DynamicColors } from '@particle-network/ui-shared';
-import type { ThemeMode } from '../types';
+import type { ComponentConfig, ThemeMode } from '../types';
 export interface ThemeProviderProps {
     children: React.ReactNode;
     theme?: ThemeMode;
     dynamicColors?: DynamicColors;
+    msFactor?: number;
+    componentConfig?: ComponentConfig;
     onThemeChange?: (theme: ThemeMode) => void;
 }
-export declare function ThemeProvider({ children, theme, dynamicColors, onThemeChange }: ThemeProviderProps): React.JSX.Element;
+export declare function ThemeProvider({ children, theme, dynamicColors, msFactor, componentConfig, onThemeChange, }: ThemeProviderProps): React.JSX.Element;

package/dist/provider/ThemeProvider.js

@@ -1,26 +1,38 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { createTheme } from "../theme/index.js";
+import { builtinComponentConfig } from "../config/index.js";
 import { ThemeContextProvider } from "./ThemeContext.js";
-function ThemeProvider({ children, theme = 'light', dynamicColors, onThemeChange }) {
+import { createTheme } from "../theme/index.js";
+import { mergeComponentConfig } from "../utils/index.js";
+function ThemeProvider({ children, theme = 'light', dynamicColors, msFactor, componentConfig, onThemeChange }) {
+    const mergedComponentConfig = useMemo(()=>mergeComponentConfig(builtinComponentConfig["default"], componentConfig), [
+        componentConfig
+    ]);
     const config = useMemo(()=>({
             theme,
-            dynamicColors
+            dynamicColors,
+            msFactor,
+            componentConfig: mergedComponentConfig
         }), [
         theme,
-        dynamicColors
+        dynamicColors,
+        msFactor,
+        mergedComponentConfig
     ]);
-    const themeObject = useMemo(()=>createTheme(theme, dynamicColors), [
+    const themeObject = useMemo(()=>createTheme(theme, dynamicColors, msFactor), [
         theme,
-        dynamicColors
+        dynamicColors,
+        msFactor
     ]);
     const contextValue = useMemo(()=>({
             theme: themeObject,
             config,
+            componentConfig: mergedComponentConfig,
             setTheme: onThemeChange
         }), [
         themeObject,
         config,
+        mergedComponentConfig,
         onThemeChange
     ]);
     return /*#__PURE__*/ jsx(ThemeContextProvider, {

package/dist/theme/colors.d.ts

@@ -3,4 +3,4 @@ export declare const DEFAULT_DYNAMIC_COLORS: {
     bullish: string;
     bearish: string;
 };
-export declare function getColors(theme: 'light' | 'dark', dynamicColors?: DynamicColors): ThemeColors;
+export declare function createColors(theme: 'light' | 'dark', dynamicColors?: DynamicColors): ThemeColors;

package/dist/theme/colors.js

@@ -3,7 +3,7 @@ const DEFAULT_DYNAMIC_COLORS = {
     bullish: '#45B167',
     bearish: '#E84A5A'
 };
-function getColors(theme, dynamicColors) {
+function createColors(theme, dynamicColors) {
     const mergedDynamicColors = {
         ...DEFAULT_DYNAMIC_COLORS,
         ...dynamicColors
@@ -14,4 +14,4 @@ function getColors(theme, dynamicColors) {
         bearish: mergedDynamicColors.bearish
     };
 }
-export { DEFAULT_DYNAMIC_COLORS, getColors };
+export { DEFAULT_DYNAMIC_COLORS, createColors };

package/dist/theme/index.d.ts

@@ -1,7 +1,5 @@
-import type { DynamicColors } from '@particle-network/ui-shared';
-import type { Theme, ThemeMode } from '../types';
-export declare function createTheme(theme: ThemeMode, dynamicColors?: DynamicColors): Theme;
 export * from './colors';
 export * from './opacity';
 export * from './radius';
 export * from './spacing';
+export * from './theme';

package/dist/theme/index.js

@@ -1,16 +1,5 @@
-import { getColors } from "./colors.js";
-import { createRadius } from "./radius.js";
-import { createSpacing } from "./spacing.js";
 export * from "./colors.js";
 export * from "./opacity.js";
 export * from "./radius.js";
 export * from "./spacing.js";
-function createTheme(theme, dynamicColors) {
-    return {
-        theme,
-        colors: getColors(theme, dynamicColors),
-        spacing: createSpacing(),
-        radius: createRadius()
-    };
-}
-export { createTheme };
+export * from "./theme.js";

package/dist/theme/radius.d.ts

@@ -1,3 +1,3 @@
 import { type RadiusScale } from '@particle-network/ui-shared';
-export declare function createRadius(): RadiusScale;
+export declare function createRadius(msFactor?: number): RadiusScale;
 export declare const radius: RadiusScale;

package/dist/theme/radius.js

@@ -1,8 +1,8 @@
-import { moderateScale } from "react-native-size-matters";
+import { ms } from "react-native-size-matters";
 import { radiusMap } from "@particle-network/ui-shared";
-function createRadius() {
+function createRadius(msFactor) {
     return Object.entries(radiusMap).reduce((acc, [key, value])=>{
-        acc[key] = 'full' === key ? value : moderateScale(value);
+        acc[key] = 'full' === key ? value : ms(value, msFactor);
         return acc;
     }, {});
 }

package/dist/theme/spacing.d.ts

@@ -1,3 +1,3 @@
 import { type SpacingScale } from '@particle-network/ui-shared';
-export declare function createSpacing(): SpacingScale;
+export declare function createSpacing(msFactor?: number): SpacingScale;
 export declare const spacing: SpacingScale;

package/dist/theme/spacing.js

@@ -1,8 +1,8 @@
 import { ms } from "react-native-size-matters";
 import { spacingMap } from "@particle-network/ui-shared";
-function createSpacing() {
+function createSpacing(msFactor) {
     return Object.entries(spacingMap).reduce((acc, [key, value])=>{
-        acc[key] = ms(value);
+        acc[key] = ms(value, msFactor);
         return acc;
     }, {});
 }

package/dist/theme/theme.d.ts

@@ -0,0 +1,3 @@
+import type { DynamicColors } from '@particle-network/ui-shared';
+import type { Theme, ThemeMode } from '../types';
+export declare function createTheme(theme: ThemeMode, dynamicColors?: DynamicColors, msFactor?: number): Theme;

package/dist/theme/theme.js

@@ -0,0 +1,13 @@
+import { createColors } from "./colors.js";
+import { createRadius } from "./radius.js";
+import { createSpacing } from "./spacing.js";
+function createTheme(theme, dynamicColors, msFactor) {
+    return {
+        theme,
+        colors: createColors(theme, dynamicColors),
+        spacing: createSpacing(msFactor),
+        radius: createRadius(msFactor),
+        msFactor
+    };
+}
+export { createTheme };

package/dist/types/theme.d.ts

@@ -1,17 +1,49 @@
-import type { DynamicColors, RadiusScale, SpacingScale, ThemeColors } from '@particle-network/ui-shared';
+import type { DynamicColors, RadiusScale, SpacingScale, ThemeColors, UXRadius } from '@particle-network/ui-shared';
 export type ThemeMode = 'light' | 'dark';
+export interface CommonComponentConfig {
+    defaultProps?: {
+        radius?: UXRadius | number;
+    };
+    size: {
+        sm: number;
+        md: number;
+        lg: number;
+    };
+    fontSize: {
+        sm: number;
+        md: number;
+        lg: number;
+    };
+    color: Record<string, {
+        background: string;
+        text: string;
+    }>;
+}
+export interface ComponentConfig {
+    button: CommonComponentConfig;
+    input: Omit<CommonComponentConfig, 'color'>;
+    modal: {
+        radius: number;
+    };
+    tabs: Pick<CommonComponentConfig, 'defaultProps' | 'fontSize'>;
+    chip: Pick<CommonComponentConfig, 'defaultProps'>;
+}
 export interface ThemeConfig {
     theme: ThemeMode;
     dynamicColors?: DynamicColors;
+    msFactor?: number;
+    componentConfig: ComponentConfig;
 }
 export interface Theme {
     theme: ThemeMode;
     colors: ThemeColors;
     spacing: SpacingScale;
     radius: RadiusScale;
+    msFactor?: number;
 }
 export interface ThemeContextValue {
     theme: Theme;
     config: ThemeConfig;
+    componentConfig?: ComponentConfig;
     setTheme?: (theme: ThemeMode) => void;
 }

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './mergeConfig';
+export * from './triggerHapticFeedback';

package/dist/utils/index.js

@@ -0,0 +1,2 @@
+export * from "./mergeConfig.js";
+export * from "./triggerHapticFeedback.js";

package/dist/utils/mergeConfig.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentConfig } from '../types';
+/**
+ * 深度合并组件配置
+ * @param defaultConfig 默认配置
+ * @param userConfig 用户配置
+ * @returns 合并后的配置
+ */
+export declare function mergeComponentConfig(defaultConfig: ComponentConfig, userConfig?: ComponentConfig): ComponentConfig;

package/dist/utils/mergeConfig.js

@@ -0,0 +1,6 @@
+import deepmerge from "deepmerge";
+function mergeComponentConfig(defaultConfig, userConfig) {
+    if (!userConfig) return defaultConfig;
+    return deepmerge(defaultConfig, userConfig);
+}
+export { mergeComponentConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-native",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "license": "MIT",
   "main": "./entry.js",
   "react-native": "./dist/index.js",
@@ -21,7 +21,7 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "storybook dev -p 6006",
-    "storybook:build": "storybook build --docs",
+    "storybook:build": "storybook build",
     "storybook:preview": "serve storybook-static",
     "storybook:generate": "sb-rn-get-stories",
     "type-check": "npx tsc --noEmit -p ./tsconfig.json",
@@ -53,6 +53,7 @@
   "dependencies": {
     "@particle-network/ui-shared": "*",
     "ahooks": "^3.9.4",
+    "deepmerge": "^4.3.1",
     "expo-haptics": "^14.1.4",
     "react-native-paper": "^5.14.5",
     "react-native-size-matters": "^0.4.2"
@@ -63,10 +64,10 @@
     "@chromatic-com/storybook": "^4.0.0",
     "@expo/metro-runtime": "~5.0.4",
     "@gorhom/bottom-sheet": "^5.1.2",
+    "@particle-network/eslint-config": "*",
     "@react-native-async-storage/async-storage": "2.1.2",
     "@react-native-community/datetimepicker": "8.4.1",
     "@react-native-community/slider": "4.5.6",
-    "@particle-network/eslint-config": "*",
     "@rsbuild/core": "^1.5.0",
     "@rsbuild/plugin-react": "^1.3.5",
     "@rslib/core": "^0.12.2",