@seakoi/native-ui 1.0.0

package/src/shared/constants/event-emitter-type.ts

@@ -0,0 +1,3 @@
+// Portal 事件常量
+export const NATIVE_UI_PORTAL_ADD_EVENT = 'NATIVE_UI_PORTAL_ADD_EVENT';
+export const NATIVE_UI_PORTAL_REMOVE_EVENT = 'NATIVE_UI_PORTAL_REMOVE_EVENT';

package/src/shared/constants/index.ts

@@ -0,0 +1 @@
+export * from './event-emitter-type';

package/src/shared/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './use-back-top';
+export * from './use-merge-refs';

package/src/shared/hooks/use-back-top.ts

@@ -0,0 +1,106 @@
+import { useRef, useState } from 'react';
+import type {
+  FlatList,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollView,
+  SectionList,
+} from 'react-native';
+
+/**
+ * 所有 RN 可滚动组件的 ref 能力统一抽象
+ */
+type ScrollableRef = ScrollView | FlatList | SectionList;
+
+/**
+ * useBackToTop 配置项
+ */
+export interface UseBackToTopOptions {
+  /**
+   * 滚动到多少距离后显示「返回顶部」
+   * @default 300
+   */
+  threshold?: number;
+}
+
+/**
+ * 返回顶部 Hook
+ *
+ * 支持：
+ * - ScrollView
+ * - FlatList
+ * - SectionList
+ * - VirtualizedList
+ */
+export function useBackToTop(options: UseBackToTopOptions = {}) {
+  const { threshold = 300 } = options;
+
+  const scrollRef = useRef<ScrollableRef>(null);
+  const [visible, setVisible] = useState(false);
+
+  /**
+   * 外部在 onScroll 中透传调用
+   *
+   * <ScrollView onScroll={onScroll} scrollEventThrottle={16} />
+   */
+  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const y = e.nativeEvent.contentOffset.y;
+    setVisible(y >= threshold);
+  };
+
+  /**
+   * 回到顶部
+   *
+   * 自动兼容：
+   * - scrollTo
+   * - scrollToOffset
+   * - scrollToLocation
+   */
+  const scrollToTop = () => {
+    const node = scrollRef.current as ScrollableRef;
+
+    if (!node) return;
+
+    if (isScrollView(node)) {
+      node.scrollTo({ y: 0, animated: true });
+    } else if (isFlatList(node)) {
+      node.scrollToOffset({ offset: 0, animated: true });
+    } else if (isSectionList(node)) {
+      node.scrollToLocation({ sectionIndex: 0, itemIndex: 0, animated: true });
+    }
+  };
+
+  return {
+    /**
+     * 直接挂到 ScrollView / FlatList ref
+     */
+    scrollRef,
+
+    /**
+     * 是否显示返回顶部按钮
+     */
+    visible,
+
+    /**
+     * 透传给 onScroll
+     */
+    onScroll,
+
+    /**
+     * 点击返回顶部
+     */
+    scrollToTop,
+  };
+}
+
+function isScrollView(ref: ScrollableRef): ref is ScrollView {
+  return typeof (ref as ScrollView).scrollTo === 'function';
+}
+
+function isFlatList(ref: ScrollableRef): ref is FlatList<unknown> {
+  return typeof (ref as FlatList<unknown>).scrollToOffset === 'function';
+}
+
+function isSectionList(ref: ScrollableRef): ref is SectionList<unknown> {
+  return typeof (ref as SectionList<unknown>).scrollToLocation === 'function';
+}

package/src/shared/hooks/use-merge-refs.ts

@@ -0,0 +1,17 @@
+import { type Ref, type RefCallback, useCallback } from 'react';
+
+export function useMergeRefs<T>(refs: (Ref<T> | undefined)[]) {
+  return useCallback<RefCallback<T>>(
+    instance => {
+      for (const ref of refs) {
+        if (typeof ref === 'function') {
+          ref(instance);
+        } else if (!!ref && typeof ref === 'object' && 'current' in ref) {
+          // eslint-disable-next-line react-hooks/immutability
+          ref.current = instance;
+        }
+      }
+    },
+    [refs],
+  );
+}

package/src/shared/theme/fonts.ts

@@ -0,0 +1,48 @@
+import type { TextStyle } from 'react-native';
+
+import { tokens } from './tokens';
+import type { TypescaleType } from './types';
+
+export type FontsConfigValue =
+  | Exclude<TextStyle['fontWeight'], undefined>
+  | Pick<TextStyle, 'fontWeight' | 'fontFamily'>;
+
+export type FontsKey = 'regular' | 'medium' | 'semiBold' | 'numeric';
+type CreateFontsConfigValue<T> = { [P in keyof T]: TypescaleType };
+
+export const defaultFontsConfig: Record<FontsKey, FontsConfigValue> = {
+  numeric: { fontWeight: 400, fontFamily: 'TCloudNumber' },
+  regular: { fontWeight: 400, fontFamily: 'Nunito-Regular' },
+  medium: { fontWeight: 500, fontFamily: 'Nunito-Medium' },
+  semiBold: { fontWeight: 600, fontFamily: 'Nunito-SemiBold' },
+};
+
+/**
+ * 创建字体配置
+ * @example
+ * createFontsConfig({ regular: 400, medium: 500, bold: 700 })
+ * createFontsConfig({ regular: { fontFamily: "regular" }, bold: { fontFamily: "bold" } })
+ */
+export const createFontsConfig = <T extends Record<FontsKey, FontsConfigValue>>(
+  fontsConfig: T,
+): CreateFontsConfigValue<T> => {
+  const fontsConfigArray = Object.entries(fontsConfig).map(
+    ([fontWeightVariant, weightOrStyle]) => {
+      let fontStyle = weightOrStyle;
+      if (typeof weightOrStyle !== 'object') {
+        fontStyle = { fontWeight: weightOrStyle };
+      }
+      const typescaleMapFontWeight = Object.fromEntries(
+        Object.entries(tokens.typescale).map(([fontSize, currentFontStyle]) => [
+          fontSize,
+          {
+            ...currentFontStyle,
+            ...(fontStyle as Record<string, TextStyle>),
+          },
+        ]),
+      );
+      return [fontWeightVariant, typescaleMapFontWeight];
+    },
+  );
+  return Object.fromEntries(fontsConfigArray);
+};

package/src/shared/theme/index.ts

@@ -0,0 +1,39 @@
+import deepmerge from 'deepmerge';
+
+import type { DeepPartial } from '../utils/types';
+import {
+  createFontsConfig,
+  defaultFontsConfig,
+  type FontsConfigValue,
+  type FontsKey,
+} from './fonts';
+import { tokens } from './tokens';
+import type { Theme } from './types';
+
+export * from './fonts';
+export * from './tokens';
+export type * from './types';
+
+export type ThemeConfig = DeepPartial<
+  Omit<Theme, 'fonts'> & { fonts: Record<FontsKey, FontsConfigValue> }
+>;
+/**
+ * 创建主题
+ * @param themeConfig 主题配置
+ * @returns 主题
+ */
+export const createTheme = (themeConfig?: ThemeConfig): Theme => {
+  return deepmerge(
+    {
+      shadow: tokens.shadow,
+      palette: tokens.palette,
+      spacing: tokens.spacing,
+      roundness: tokens.roundness,
+      fonts: createFontsConfig(defaultFontsConfig),
+    },
+    {
+      ...themeConfig,
+      mode: themeConfig?.mode ?? 'light',
+    },
+  );
+};

package/src/shared/theme/tokens/index.ts

@@ -0,0 +1,41 @@
+import { palette } from './palette';
+import { shadow } from './shadow';
+
+/** 圆角 */
+const roundness = {
+  sm: 2,
+  md: 4,
+  lg: 8,
+  xl: 12,
+  none: 0,
+  full: 999,
+} as const;
+
+/** 间隙 */
+export const spacing = {
+  none: 0,
+  xxs: 4,
+  xs: 6,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  xxl: 24,
+} as const;
+
+/** 字体大小 */
+const typescale = {
+  size10: { fontSize: 10 },
+  size11: { fontSize: 11 },
+  size12: { fontSize: 12 },
+  size13: { fontSize: 13 },
+  size14: { fontSize: 14 },
+  size15: { fontSize: 15 },
+  size16: { fontSize: 16 },
+  size18: { fontSize: 18 },
+  size20: { fontSize: 20 },
+  size22: { fontSize: 22 },
+  size24: { fontSize: 24 },
+};
+
+export const tokens = { palette, typescale, roundness, shadow, spacing };

package/src/shared/theme/tokens/palette.ts

@@ -0,0 +1,82 @@
+/** 🎨 调色板 */
+export const palette = {
+  white: 'rgba(255, 255, 255, 1)',
+  brand1: 'rgba(241, 248, 255, 1)',
+  brand2: 'rgba(208, 232, 255, 1)',
+  brand3: 'rgba(175, 216, 255, 1)',
+  brand4: 'rgba(142, 200, 255, 1)',
+  brand5: 'rgba(109, 184, 254, 1)',
+  brand6: 'rgba(76, 168, 254, 1)',
+  brand7: 'rgba(43, 152, 254, 1)',
+  brand8: 'rgba(34, 110, 196, 1)',
+  brand9: 'rgba(26, 75, 139, 1)',
+  brand10: 'rgba(17, 40, 81, 1)',
+  error1: 'rgba(255, 243, 243, 1)',
+  error2: 'rgba(254, 216, 216, 1)',
+  error3: 'rgba(254, 190, 190, 1)',
+  error4: 'rgba(253, 163, 163, 1)',
+  error5: 'rgba(252, 137, 136, 1)',
+  error6: 'rgba(252, 111, 110, 1)',
+  error7: 'rgba(251, 84, 83, 1)',
+  error8: 'rgba(194, 65, 74, 1)',
+  error9: 'rgba(138, 48, 54, 1)',
+  error10: 'rgba(81, 30, 33, 1)',
+  warning1: 'rgba(255, 248, 245, 1)',
+  warning2: 'rgba(255, 229, 218, 1)',
+  warning3: 'rgba(255, 210, 192, 1)',
+  warning4: 'rgba(255, 191, 165, 1)',
+  warning5: 'rgba(255, 171, 138, 1)',
+  warning6: 'rgba(255, 152, 112, 1)',
+  warning7: 'rgba(255, 133, 85, 1)',
+  warning8: 'rgba(194, 100, 65, 1)',
+  warning9: 'rgba(134, 68, 46, 1)',
+  warning10: 'rgba(73, 35, 26, 1)',
+  success1: 'rgba(243, 255, 248, 1)',
+  success2: 'rgba(202, 240, 225, 1)',
+  success3: 'rgba(162, 226, 201, 1)',
+  success4: 'rgba(122, 211, 178, 1)',
+  success5: 'rgba(81, 197, 155, 1)',
+  success6: 'rgba(41, 183, 131, 1)',
+  success7: 'rgba(0, 168, 108, 1)',
+  success8: 'rgba(0, 138, 93, 1)',
+  success9: 'rgba(0, 109, 79, 1)',
+  success10: 'rgba(0, 79, 64, 1)',
+  gray1: 'rgba(243, 243, 243, 1)',
+  gray2: 'rgba(238, 238, 238, 1)',
+  gray3: 'rgba(231, 231, 231, 1)',
+  gray4: 'rgba(220, 220, 220, 1)',
+  gray5: 'rgba(197, 197, 197, 1)',
+  gray6: 'rgba(166, 166, 166, 1)',
+  gray7: 'rgba(139, 139, 139, 1)',
+  gray8: 'rgba(119, 119, 119, 1)',
+  gray9: 'rgba(94, 94, 94, 1)',
+  gray10: 'rgba(75, 75, 75, 1)',
+  gray11: 'rgba(56, 56, 56, 1)',
+  gray12: 'rgba(44, 44, 44, 1)',
+  gray13: 'rgba(36, 36, 36, 1)',
+  gray14: 'rgba(24, 24, 24, 1)',
+  fontGray1: 'rgba(0, 0, 0, 0.9)',
+  fontGray2: 'rgba(0, 0, 0, 0.6)',
+  fontGray3: 'rgba(0, 0, 0, 0.4)',
+  fontGray4: 'rgba(0, 0, 0, 0.26)',
+  fontGray5: 'rgba(0, 0, 0, 0.18)',
+  fontWhite1: 'rgba(255, 255, 255, 1)',
+  fontWhite2: 'rgba(255, 255, 255, 0.8)',
+  fontWhite3: 'rgba(255, 255, 255, 0.55)',
+  fontWhite4: 'rgba(255, 255, 255, 0.35)',
+  fontWhite5: 'rgba(255, 255, 255, 0.22)',
+  blueGray1: 'rgba(243, 243, 244, 1)',
+  blueGray2: 'rgba(238, 238, 240, 1)',
+  blueGray3: 'rgba(231, 232, 235, 1)',
+  blueGray4: 'rgba(220, 221, 225, 1)',
+  blueGray5: 'rgba(196, 198, 205, 1)',
+  blueGray6: 'rgba(162, 166, 177, 1)',
+  blueGray7: 'rgba(133, 138, 153, 1)',
+  blueGray8: 'rgba(111, 118, 134, 1)',
+  blueGray9: 'rgba(83, 93, 109, 1)',
+  blueGray10: 'rgba(66, 74, 87, 1)',
+  blueGray11: 'rgba(50, 56, 67, 1)',
+  blueGray12: 'rgba(39, 43, 52, 1)',
+  blueGray13: 'rgba(32, 35, 43, 1)',
+  blueGray14: 'rgba(21, 24, 29, 1)',
+} as const;

package/src/shared/theme/tokens/shadow.ts

@@ -0,0 +1,93 @@
+import { Platform, StyleSheet } from 'react-native';
+
+const supportBoxShadowOnAndroid =
+  Platform.OS === 'android' && Platform.Version >= 28;
+
+/** 阴影 */
+export const shadow = {
+  level0: { boxShadow: [] },
+  level1: StyleSheet.flatten([
+    !supportBoxShadowOnAndroid && Platform.select({ android: { elevation: 3 } }),
+    {
+      boxShadow: [
+        {
+          offsetX: 0,
+          offsetY: 1,
+          blurRadius: 10,
+          spreadDistance: 0,
+          color: 'rgba(0, 0, 0, 0.05)',
+        },
+        {
+          offsetX: 0,
+          offsetY: 4,
+          blurRadius: 5,
+          spreadDistance: 0,
+          color: 'rgba(0, 0, 0, 0.08)',
+        },
+        {
+          offsetX: 0,
+          offsetY: 2,
+          blurRadius: 4,
+          spreadDistance: -1,
+          color: 'rgba(0, 0, 0, 0.12)',
+        },
+      ],
+    },
+  ]),
+  level2: StyleSheet.flatten([
+    !supportBoxShadowOnAndroid && Platform.select({ android: { elevation: 6 } }),
+    {
+      boxShadow: [
+        {
+          offsetX: 0,
+          offsetY: 3,
+          blurRadius: 14,
+          spreadDistance: 2,
+          color: 'rgba(0, 0, 0, 0.05)',
+        },
+        {
+          offsetX: 0,
+          offsetY: 8,
+          blurRadius: 10,
+          spreadDistance: 1,
+          color: 'rgba(0, 0, 0, 0.06)',
+        },
+        {
+          offsetX: 0,
+          offsetY: 5,
+          blurRadius: 5,
+          spreadDistance: -3,
+          color: 'rgba(0, 0, 0, 0.1)',
+        },
+      ],
+    },
+  ]),
+  level3: StyleSheet.flatten([
+    !supportBoxShadowOnAndroid && Platform.select({ android: { elevation: 9 } }),
+    {
+      boxShadow: [
+        {
+          offsetX: 0,
+          offsetY: 6,
+          blurRadius: 30,
+          spreadDistance: 5,
+          color: 'rgba(0, 0, 0, 0.05)',
+        },
+        {
+          offsetX: 0,
+          offsetY: 16,
+          blurRadius: 24,
+          spreadDistance: 2,
+          color: 'rgba(0, 0, 0, 0.04)',
+        },
+        {
+          offsetX: 0,
+          offsetY: 8,
+          blurRadius: 10,
+          spreadDistance: -5,
+          color: 'rgba(0, 0, 0, 0.08)',
+        },
+      ],
+    },
+  ]),
+} as const;

package/src/shared/theme/types.ts

@@ -0,0 +1,19 @@
+import type { FontsKey } from './fonts';
+import type { tokens } from './tokens';
+
+export type ThemeMode = 'light' | 'dark';
+
+export type Shadow = Theme['shadow'];
+export type Palette = Theme['palette'];
+export type Roundness = Theme['roundness'];
+export type Fonts = Theme['fonts'];
+export type TypescaleType = typeof tokens.typescale;
+
+export interface Theme {
+  mode: ThemeMode;
+  fonts: Record<FontsKey, TypescaleType>;
+  shadow: typeof tokens.shadow;
+  palette: typeof tokens.palette;
+  roundness: typeof tokens.roundness;
+  spacing: typeof tokens.spacing;
+}

package/src/shared/utils/element.ts

@@ -0,0 +1,12 @@
+import { isValidElement, type ReactElement, type ReactNode } from 'react';
+
+type TextNodeValue = string | number | boolean;
+
+export const safetyRenderChildren = (
+  children: ReactNode | undefined,
+  defaultRender: (text: TextNodeValue) => ReactElement,
+) => {
+  if (!children && typeof children !== 'number') return;
+  if (isValidElement(children)) return children;
+  return defaultRender(children as TextNodeValue);
+};

package/src/shared/utils/error.ts

@@ -0,0 +1,6 @@
+// 判断请求是否为网络错误，用于Ky请求库的错误对象
+export const isNetworkError = (error?: Error) => {
+  return (
+    error?.name === 'TimeoutError' || error?.message === 'Network request failed'
+  );
+};

package/src/shared/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './element';
+export * from './error';
+export type * from './types';

package/src/shared/utils/types.ts

@@ -0,0 +1,26 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Any = any;
+export type AnyObject = Record<string, Any>;
+export type DeepPartial<T> = T extends object
+  ? { [K in keyof T]?: DeepPartial<T[K]> }
+  : T;
+
+export interface RequestConfig {
+  url: string;
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE';
+}
+
+/**
+ * 从字符串中提取数字
+ * @param T 字符串类型
+ * @param Prefix 前缀字符串
+ * @returns 提取到的数字类型
+ */
+export type ExtractNumber<
+  T extends string,
+  Prefix extends string,
+> = T extends `${Prefix}${infer S}`
+  ? S extends `${infer N extends number}`
+    ? N
+    : never
+  : never;

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "composite": true,
+    "declaration": true,
+    "declarationMap": false,
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "tsBuildInfoFile": "node_modules/tsconfig.tsbuildinfo",
+    "paths": {
+      "#assets/*": ["./src/assets/*"],
+      "#shared/*": ["./src/shared/*"],
+      "#components/*": ["./src/components/*"],
+      "#native-provider/*": ["./src/native-provider/*"],
+      "#native-provider": ["./src/native-provider/index.ts"]
+    }
+  },
+  "include": ["./src"]
+}