@unif/react-native-ui 0.3.6 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unif/react-native-ui",
-  "version": "0.3.6",
+  "version": "1.0.0",
   "description": "UNIF React Native UI Components",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",
@@ -44,7 +44,7 @@
   "scripts": {
     "example": "yarn --cwd example",
     "clean": "del-cli lib",
-    "prepare": "",
+    "prepare": "husky || true",
     "prepublishOnly": "bob build",
     "typecheck": "tsc",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
@@ -58,9 +58,9 @@
     "detox:test:android": "yarn --cwd example detox:test:android",
     "detox:build:ios": "yarn --cwd example detox:build:ios",
     "detox:test:ios": "yarn --cwd example detox:test:ios",
-    "docs": "docusaurus start",
-    "docs:build": "docusaurus build",
-    "docs:serve": "docusaurus serve",
+    "docs": "yarn --cwd site dev",
+    "docs:build": "yarn --cwd site build",
+    "docs:serve": "yarn --cwd site preview",
     "release": "node scripts/release.js",
     "build": "bob build"
   },
@@ -76,14 +76,9 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@docusaurus/core": "^3.9.2",
-    "@docusaurus/module-type-aliases": "^3.9.2",
-    "@docusaurus/preset-classic": "^3.9.2",
-    "@docusaurus/types": "^3.9.2",
     "@eslint/compat": "^1.3.2",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.35.0",
-    "@mdx-js/react": "^3.1.1",
     "@react-native/babel-preset": "0.83.0",
     "@react-native/eslint-config": "0.83.0",
     "@testing-library/react-native": "^13.3.3",
@@ -96,23 +91,34 @@
     "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
+    "husky": "^9.1.7",
     "jest": "^29.7.0",
+    "lint-staged": "^16.4.0",
     "prettier": "^2.8.8",
-    "prism-react-renderer": "^2.4.1",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "react-native": "0.81.5",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.84.1",
     "react-native-builder-bob": "^0.40.13",
-    "react-test-renderer": "19.1.0",
+    "react-native-reanimated": "^4.3.0",
+    "react-native-svg": "^15.15.3",
+    "react-native-worklets": "^0.8.1",
+    "react-test-renderer": "19.2.3",
     "turbo": "^2.5.6",
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-native": "*"
+    "react": ">=19.0.0",
+    "react-native": ">=0.84.0",
+    "react-native-gesture-handler": ">=2.21.0",
+    "react-native-keyboard-controller": ">=1.18.0",
+    "react-native-reanimated": ">=4.0.0",
+    "react-native-safe-area-context": ">=5.0.0",
+    "react-native-svg": ">=15.2.0",
+    "react-native-worklets": ">=0.8.0"
   },
   "workspaces": [
-    "example"
+    "example",
+    "site"
   ],
   "packageManager": "yarn@4.11.0",
   "react-native-builder-bob": {
@@ -141,6 +147,9 @@
     "trailingComma": "es5",
     "useTabs": false
   },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": "prettier --write"
+  },
   "create-react-native-library": {
     "type": "library",
     "languages": "js",

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,47 @@
+import { memo, useCallback, useState } from 'react';
+import { View } from 'react-native';
+import { AccordionProvider } from './context';
+import type { AccordionProps } from './types';
+
+const Accordion = memo(function Accordion({
+  type = 'single',
+  defaultValue,
+  children,
+  testID,
+  style,
+}: AccordionProps) {
+  // 初始化展开状态：支持单值字符串或数组
+  const [expandedValues, setExpandedValues] = useState<Set<string>>(() => {
+    if (!defaultValue) return new Set();
+    if (Array.isArray(defaultValue)) return new Set(defaultValue);
+    return new Set([defaultValue]);
+  });
+
+  const toggle = useCallback(
+    (value: string) => {
+      setExpandedValues((prev) => {
+        const next = new Set(prev);
+        if (next.has(value)) {
+          next.delete(value);
+        } else {
+          // single 模式：展开新项前清空已有展开项
+          if (type === 'single') next.clear();
+          next.add(value);
+        }
+        return next;
+      });
+    },
+    [type]
+  );
+
+  return (
+    <AccordionProvider value={{ type, expandedValues, toggle }}>
+      <View testID={testID} style={style}>
+        {children}
+      </View>
+    </AccordionProvider>
+  );
+});
+Accordion.displayName = 'Accordion';
+
+export { Accordion };

package/src/components/Accordion/AccordionContent.tsx

@@ -0,0 +1,32 @@
+import { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Collapsible, CollapsibleContent } from '../Collapsible';
+import { useAccordionItemCtx } from './context';
+import type { AccordionContentProps } from './types';
+
+const AccordionContent = memo(function AccordionContent({
+  children,
+  testID,
+  style,
+}: AccordionContentProps) {
+  const { isOpen } = useAccordionItemCtx();
+  return (
+    <Collapsible open={isOpen}>
+      <CollapsibleContent style={style}>
+        <View testID={testID} style={styles.content}>
+          {children}
+        </View>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+});
+AccordionContent.displayName = 'AccordionContent';
+
+const styles = StyleSheet.create({
+  content: {
+    paddingBottom: 12,
+    paddingHorizontal: 4,
+  },
+});
+
+export { AccordionContent };

package/src/components/Accordion/AccordionItem.tsx

@@ -0,0 +1,35 @@
+import { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import { AccordionItemProvider, useAccordionCtx } from './context';
+import type { AccordionItemProps } from './types';
+
+const AccordionItem = memo(function AccordionItem({
+  value,
+  children,
+  testID,
+  style,
+}: AccordionItemProps) {
+  const { expandedValues } = useAccordionCtx();
+  const isOpen = expandedValues.has(value);
+  const border = useTheme((t) => t.border);
+  return (
+    <AccordionItemProvider value={{ value, isOpen }}>
+      <View
+        testID={testID}
+        style={[styles.accordionItem, { borderBottomColor: border }, style]}
+      >
+        {children}
+      </View>
+    </AccordionItemProvider>
+  );
+});
+AccordionItem.displayName = 'AccordionItem';
+
+const styles = StyleSheet.create({
+  accordionItem: {
+    borderBottomWidth: 1,
+  },
+});
+
+export { AccordionItem };

package/src/components/Accordion/AccordionTrigger.tsx

@@ -0,0 +1,51 @@
+import { memo } from 'react';
+import { Text, Pressable, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import { useAccordionCtx, useAccordionItemCtx } from './context';
+import type { AccordionTriggerProps } from './types';
+
+const AccordionTrigger = memo(function AccordionTrigger({
+  children,
+  testID,
+  style,
+}: AccordionTriggerProps) {
+  const { value, isOpen } = useAccordionItemCtx();
+  const { toggle } = useAccordionCtx();
+  const fg = useTheme((t) => t.foreground);
+
+  return (
+    <Pressable
+      testID={testID}
+      onPress={() => toggle(value)}
+      accessibilityRole="button"
+      accessibilityState={{ expanded: isOpen }}
+      style={[styles.trigger, style]}
+    >
+      <Text style={[styles.triggerLabel, { color: fg }]}>{children}</Text>
+      {/* 展开/折叠指示箭头 */}
+      <Text style={[styles.triggerIcon, { color: fg }]}>
+        {isOpen ? '▲' : '▼'}
+      </Text>
+    </Pressable>
+  );
+});
+AccordionTrigger.displayName = 'AccordionTrigger';
+
+const styles = StyleSheet.create({
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 14,
+    paddingHorizontal: 4,
+  },
+  triggerLabel: {
+    fontSize: 14,
+    fontWeight: '500',
+    flex: 1,
+  },
+  triggerIcon: {
+    fontSize: 12,
+  },
+});
+
+export { AccordionTrigger };

package/src/components/Accordion/context.ts

@@ -0,0 +1,28 @@
+import { createCompound } from '../../core';
+
+// ─── Accordion Context ────────────────────────────────────────────────────────
+
+/** Accordion 根组件向子组件共享的状态 */
+export interface AccordionCtx {
+  type: 'single' | 'multiple';
+  /** 当前展开的 value 集合 */
+  expandedValues: Set<string>;
+  /** 切换某个 item 的展开/折叠状态 */
+  toggle: (value: string) => void;
+}
+
+export const [AccordionProvider, useAccordionCtx] =
+  createCompound<AccordionCtx>('Accordion');
+
+// ─── AccordionItem Context ────────────────────────────────────────────────────
+
+/** AccordionItem 向 Trigger/Content 共享的状态 */
+export interface AccordionItemCtx {
+  /** 此 item 的唯一标识 */
+  value: string;
+  /** 当前是否展开 */
+  isOpen: boolean;
+}
+
+export const [AccordionItemProvider, useAccordionItemCtx] =
+  createCompound<AccordionItemCtx>('AccordionItem');

package/src/components/Accordion/index.tsx

@@ -0,0 +1,11 @@
+export { Accordion } from './Accordion';
+export { AccordionItem } from './AccordionItem';
+export { AccordionTrigger } from './AccordionTrigger';
+export { AccordionContent } from './AccordionContent';
+export type {
+  AccordionProps,
+  AccordionItemProps,
+  AccordionTriggerProps,
+  AccordionContentProps,
+  AccordionType,
+} from './types';

package/src/components/Accordion/types.ts

@@ -0,0 +1,34 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/** 手风琴模式：single 同时只能展开一项，multiple 可同时展开多项 */
+export type AccordionType = 'single' | 'multiple';
+
+export interface AccordionProps {
+  /** 展开模式：'single'（默认）或 'multiple' */
+  type?: AccordionType;
+  /** 初始展开的 item value（非受控模式） */
+  defaultValue?: string | string[];
+  children?: React.ReactNode;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface AccordionItemProps {
+  /** 唯一标识，用于匹配 defaultValue 和 toggle */
+  value: string;
+  children?: React.ReactNode;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface AccordionTriggerProps {
+  children?: React.ReactNode;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface AccordionContentProps {
+  children?: React.ReactNode;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,76 @@
+import { memo } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import type { AlertProps } from './types';
+
+const Alert = memo(function Alert({
+  title,
+  description,
+  visual = 'info',
+  testID,
+  style,
+}: AlertProps) {
+  const primary = useTheme((t) => t.primary);
+  const destructive = useTheme((t) => t.destructive);
+  const success = useTheme((t) => t.success);
+  const warning = useTheme((t) => t.warning);
+  const border = useTheme((t) => t.border);
+  const bg = useTheme((t) => t.background);
+  const fg = useTheme((t) => t.foreground);
+  const mutedFg = useTheme((t) => t.mutedForeground);
+
+  // 根据 visual 确定左侧强调边框颜色
+  const accentColor =
+    visual === 'destructive'
+      ? destructive
+      : visual === 'success'
+      ? success
+      : visual === 'warning'
+      ? warning
+      : primary; // info 使用主色
+
+  return (
+    <View
+      testID={testID}
+      accessible
+      accessibilityRole="alert"
+      style={[
+        styles.container,
+        {
+          backgroundColor: bg,
+          borderColor: border,
+          borderLeftColor: accentColor,
+        },
+        style,
+      ]}
+    >
+      <Text style={[styles.title, { color: fg }]}>{title}</Text>
+      {description ? (
+        <Text style={[styles.description, { color: mutedFg }]}>
+          {description}
+        </Text>
+      ) : null}
+    </View>
+  );
+});
+
+Alert.displayName = 'Alert';
+
+const styles = StyleSheet.create({
+  container: {
+    borderWidth: 1,
+    borderLeftWidth: 4, // 左侧强调边框更宽
+    borderRadius: 8,
+    padding: 12,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  description: {
+    fontSize: 13,
+    marginTop: 4,
+  },
+});
+
+export { Alert };

package/src/components/Alert/index.tsx

@@ -0,0 +1,2 @@
+export { Alert } from './Alert';
+export type { AlertProps, AlertVisual } from './types';

package/src/components/Alert/types.ts

@@ -0,0 +1,15 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/** 视觉风格：决定左侧高亮边框的颜色 */
+export type AlertVisual = 'info' | 'success' | 'warning' | 'destructive';
+
+export interface AlertProps {
+  /** 主标题（必填） */
+  title: string;
+  /** 补充描述（可选） */
+  description?: string;
+  /** 视觉风格；默认为 'info'（使用主色） */
+  visual?: AlertVisual;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,84 @@
+import { memo, useState } from 'react';
+import { View, Text, Image, StyleSheet } from 'react-native';
+import { useTheme } from '../../core';
+import type { AvatarProps, AvatarSize } from './types';
+
+/** 各尺寸对应的像素尺寸 */
+const SIZE_DIM: Record<AvatarSize, number> = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48,
+  xl: 64,
+};
+/** 各尺寸对应的 fallback 文字字号 */
+const SIZE_FONT: Record<AvatarSize, number> = {
+  xs: 10,
+  sm: 12,
+  md: 14,
+  lg: 16,
+  xl: 20,
+};
+
+const Avatar = memo(function Avatar({
+  fallback,
+  src,
+  size = 'md',
+  shape = 'circle',
+  testID,
+  style,
+}: AvatarProps) {
+  // 图片加载失败时降级为 fallback 文字
+  const [imgError, setImgError] = useState(false);
+  const muted = useTheme((t) => t.muted);
+  const mutedFg = useTheme((t) => t.mutedForeground);
+
+  const dim = SIZE_DIM[size];
+  // 圆形：半径 = 尺寸/2；方形：固定 6px 小圆角
+  const borderRadius = shape === 'circle' ? dim / 2 : 6;
+
+  const showImage = !!src && !imgError;
+
+  return (
+    <View
+      testID={testID}
+      style={[
+        styles.container,
+        { width: dim, height: dim, borderRadius, backgroundColor: muted },
+        style,
+      ]}
+    >
+      {showImage ? (
+        <Image
+          source={{ uri: src }}
+          style={[StyleSheet.absoluteFill, { borderRadius }]}
+          onError={() => setImgError(true)}
+        />
+      ) : (
+        <Text
+          style={[
+            styles.fallback,
+            { fontSize: SIZE_FONT[size], color: mutedFg },
+          ]}
+        >
+          {fallback}
+        </Text>
+      )}
+    </View>
+  );
+});
+
+Avatar.displayName = 'Avatar';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  fallback: {
+    fontWeight: '600',
+  },
+});
+
+export { Avatar };

package/src/components/Avatar/index.tsx

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps, AvatarSize, AvatarShape } from './types';

package/src/components/Avatar/types.ts

@@ -0,0 +1,17 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarShape = 'circle' | 'square';
+
+export interface AvatarProps {
+  /** 图片加载失败或无图片时显示的文字（通常为姓名首字母） */
+  fallback: string;
+  /** 头像图片 URI；若为空或加载失败则显示 fallback 文字 */
+  src?: string;
+  /** 尺寸规格；默认为 'md'（40×40）*/
+  size?: AvatarSize;
+  /** 形状：圆形或方形（方形带小圆角）；默认为 'circle' */
+  shape?: AvatarShape;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,133 @@
+import { memo } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import type { ViewStyle, TextStyle } from 'react-native';
+import { useStyles, recipe } from '../../core';
+import type { BadgeProps } from './types';
+
+const badgeRecipe = recipe<{ badge: ViewStyle; label: TextStyle }>({
+  base: {
+    badge: {
+      minWidth: 18,
+      height: 18,
+      borderRadius: 9,
+      paddingHorizontal: 4,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    label: { fontSize: 11, fontWeight: '600', lineHeight: 14 },
+  },
+  variants: {
+    visual: {
+      default: (t) => ({
+        badge: { backgroundColor: t.destructive },
+        label: { color: t.destructiveForeground },
+      }),
+      destructive: (t) => ({
+        badge: { backgroundColor: t.destructive },
+        label: { color: t.destructiveForeground },
+      }),
+      secondary: (t) => ({
+        badge: { backgroundColor: t.secondary },
+        label: { color: t.secondaryForeground },
+      }),
+      outline: (t) => ({
+        badge: {
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+          borderColor: t.border,
+        },
+        label: { color: t.foreground },
+      }),
+      warning: (t) => ({
+        badge: { backgroundColor: t.warning },
+        label: { color: t.warningForeground },
+      }),
+    },
+  },
+  defaults: { visual: 'default' },
+});
+
+/** 根据 count / max / showZero 解析最终显示内容
+ * @returns 'dot' | 格式化数字字符串 | null（不显示）
+ */
+function resolveBadgeContent(
+  count: number | 'dot' | undefined,
+  max: number,
+  showZero: boolean
+): string | 'dot' | null {
+  if (count === 'dot') return 'dot';
+  if (count === undefined) return null;
+  if (!isFinite(count) || isNaN(count)) return null;
+  const clamped = Math.max(0, count);
+  if (clamped === 0 && !showZero) return null;
+  if (clamped > max) return `${max}+`;
+  return String(clamped);
+}
+
+const Badge = memo(function Badge({
+  visual = 'default',
+  count,
+  max = 99,
+  showZero = false,
+  children,
+  style,
+  testID,
+  accessibilityLabel,
+  accessible,
+}: BadgeProps) {
+  const s = useStyles(badgeRecipe, { visual });
+  const content = resolveBadgeContent(count, max, showZero);
+
+  // content 为 null 时不渲染徽标（但 children 仍会渲染）
+  const badgeEl =
+    content === null ? null : (
+      <View
+        accessible={false}
+        style={[
+          s.badge,
+          content === 'dot' && styles.dot,
+          children ? styles.absolute : undefined,
+        ]}
+      >
+        {content !== 'dot' && <Text style={s.label}>{content}</Text>}
+      </View>
+    );
+
+  // 有 children 时徽标叠加在右上角（absolute 定位）；无 children 时独立渲染
+  if (children) {
+    return (
+      <View testID={testID} style={[styles.wrapper, style]}>
+        {children}
+        {badgeEl}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      testID={testID}
+      accessible={accessible}
+      accessibilityRole="text"
+      accessibilityLabel={accessibilityLabel}
+      style={style}
+    >
+      {badgeEl}
+    </View>
+  );
+});
+
+Badge.displayName = 'Badge';
+
+const styles = StyleSheet.create({
+  wrapper: { position: 'relative' },
+  absolute: { position: 'absolute', end: -4, top: -4, zIndex: 1 },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    minWidth: 0,
+    paddingHorizontal: 0,
+  },
+});
+
+export { Badge };

package/src/components/Badge/index.tsx

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps } from './types';