@nexub/react-native 2.1.0 → 2.2.0

package/src/patterns/home.tsx

@@ -0,0 +1,211 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { moneyFormatter } from '@nexub/core';
+import type { NativeIconProps } from '@nexub/icons/native';
+import { Button } from '../components/actions';
+import { Card, ListItem, ListSection } from '../components/containers';
+import { Amount, Avatar, Badge } from '../components/display';
+import { RefreshControl } from '../components/mobile';
+import { Pressable } from '../primitives/Pressable';
+import { ScreenContainer } from '../primitives/ScreenContainer';
+import { Heading, Text } from '../primitives/Text';
+import { useTheme } from '../theme/ThemeProvider';
+import type { Transaction } from './money';
+
+export interface QuickAction {
+  id: string;
+  label: string;
+  icon?: React.ComponentType<NativeIconProps>;
+  onPress: () => void;
+}
+
+export interface Insight {
+  id: string;
+  title: string;
+  body: string;
+  action?: { label: string; onPress: () => void };
+}
+
+export interface HomeScreenProps {
+  /** e.g. "Good morning, Mei". Leave out when the native header shows the title. */
+  greeting?: string;
+  balance: { value: number; currency: string; label?: string };
+  /** Send, Add money, Request… Up to four fit one row. */
+  quickActions?: QuickAction[];
+  /** The latest few transactions. */
+  recent?: Transaction[];
+  onTransactionPress?: (t: Transaction) => void;
+  /** Shows "See all" beside Recent activity. */
+  onSeeAllActivity?: () => void;
+  insights?: Insight[];
+  onRefresh?: () => void;
+  refreshing?: boolean;
+  /** Copy overrides. */
+  labels?: Partial<{ totalBalance: string; recentActivity: string; seeAll: string; insights: string }>;
+}
+
+/**
+ * Money-app home (Payub): balance hero with quick actions, recent activity,
+ * insights and pull-to-refresh. Web twin: `DashboardPage` in @nexub/patterns.
+ */
+export function HomeScreen({
+  greeting,
+  balance,
+  quickActions = [],
+  recent = [],
+  onTransactionPress,
+  onSeeAllActivity,
+  insights = [],
+  onRefresh,
+  refreshing = false,
+  labels,
+}: HomeScreenProps) {
+  const { roles, tokens, locale } = useTheme();
+  const l = {
+    totalBalance: 'Total balance',
+    recentActivity: 'Recent activity',
+    seeAll: 'See all',
+    insights: 'Insights',
+    ...labels,
+  };
+  const balanceLabel = balance.label ?? l.totalBalance;
+
+  return (
+    <ScreenContainer
+      gap="6"
+      refreshControl={
+        onRefresh ? <RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> : undefined
+      }
+    >
+      {greeting && <Heading variant="headline-sm">{greeting}</Heading>}
+
+      <Card tone="surface-container" style={{ padding: tokens.spacing[5], gap: tokens.spacing[5] }}>
+        <View
+          accessible
+          accessibilityLabel={`${balanceLabel}, ${moneyFormatter(balance.currency, locale).format(balance.value)}`}
+          style={{ gap: tokens.spacing[1] }}
+        >
+          <Text variant="label-lg" color="on-surface-variant">
+            {balanceLabel}
+          </Text>
+          <Amount value={balance.value} currency={balance.currency} locale={locale} size="display" />
+        </View>
+        {quickActions.length > 0 && (
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between', gap: tokens.spacing[2] }}>
+            {quickActions.slice(0, 4).map((a) => {
+              const Icon = a.icon;
+              return (
+                <Pressable
+                  key={a.id}
+                  accessibilityRole="button"
+                  accessibilityLabel={a.label}
+                  haptic="selection"
+                  onPress={a.onPress}
+                  style={{
+                    flex: 1,
+                    alignItems: 'center',
+                    gap: tokens.spacing[2],
+                    paddingVertical: tokens.spacing[2],
+                    borderRadius: tokens.shape.container,
+                  }}
+                >
+                  <View
+                    style={{
+                      width: 48,
+                      height: 48,
+                      borderRadius: 24,
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      backgroundColor: roles['primary-container'],
+                    }}
+                  >
+                    {Icon && <Icon size="md" color={roles['on-primary-container']} />}
+                  </View>
+                  <Text variant="label-md" numberOfLines={1}>
+                    {a.label}
+                  </Text>
+                </Pressable>
+              );
+            })}
+          </View>
+        )}
+      </Card>
+
+      {recent.length > 0 && (
+        <View style={{ gap: tokens.spacing[2] }}>
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              paddingStart: tokens.spacing[4],
+            }}
+          >
+            <Text variant="title-sm" color="on-surface-variant" accessibilityRole="header">
+              {l.recentActivity}
+            </Text>
+            {onSeeAllActivity && (
+              <Button variant="text" size="sm" onPress={onSeeAllActivity}>
+                {l.seeAll}
+              </Button>
+            )}
+          </View>
+          <ListSection inset={68}>
+            {recent.map((t) => (
+              <ListItem
+                key={t.id}
+                title={t.title}
+                subtitle={t.subtitle}
+                leading={<Avatar name={t.title} src={t.image} />}
+                trailing={
+                  <View style={{ alignItems: 'flex-end', gap: 2 }}>
+                    <Amount
+                      value={t.amount}
+                      currency={t.currency}
+                      locale={locale}
+                      tone="auto"
+                      signDisplay="exceptZero"
+                    />
+                    {t.status && (
+                      <Badge tone={t.status === 'failed' ? 'danger' : 'warning'} size="sm">
+                        {t.status === 'failed' ? 'Failed' : 'Pending'}
+                      </Badge>
+                    )}
+                  </View>
+                }
+                variant={onTransactionPress ? 'navigation' : 'static'}
+                onPress={onTransactionPress && (() => onTransactionPress(t))}
+              />
+            ))}
+          </ListSection>
+        </View>
+      )}
+
+      {insights.length > 0 && (
+        <View style={{ gap: tokens.spacing[3] }}>
+          <Text
+            variant="title-sm"
+            color="on-surface-variant"
+            accessibilityRole="header"
+            style={{ paddingHorizontal: tokens.spacing[4] }}
+          >
+            {l.insights}
+          </Text>
+          {insights.map((i) => (
+            <Card key={i.id}>
+              <Text variant="title-sm">{i.title}</Text>
+              <Text variant="body-sm" color="on-surface-variant">
+                {i.body}
+              </Text>
+              {i.action && (
+                <Button variant="text" size="sm" onPress={i.action.onPress} style={{ alignSelf: 'flex-start' }}>
+                  {i.action.label}
+                </Button>
+              )}
+            </Card>
+          ))}
+        </View>
+      )}
+    </ScreenContainer>
+  );
+}

package/src/patterns/index.ts

@@ -1,4 +1,6 @@
 // @nexub/react-native/patterns — screen templates built only from public components.
+export { HomeScreen } from './home';
+export type { HomeScreenProps, QuickAction, Insight } from './home';
 export { AuthScreen, SignInScreen, VerifyCodeScreen, LockScreen } from './auth';
 export type {
   AuthScreenProps,

package/src/primitives/Pressable.tsx

@@ -11,6 +11,9 @@ import {
 import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import type { HapticToken } from '../theme/haptics';
 import { useHaptics, useTheme, type RoleName } from '../theme/ThemeProvider';
+import { nxSpring } from '../theme/motion';
+
+const PRESS_SPRING = nxSpring('spatial', 'fast');
 
 // The touchable itself animates and takes `style`, so layout props (flex,
 // position, margins) apply to the element that sits in the parent's layout.
@@ -48,7 +51,7 @@ export function Pressable({
   const { roles, tokens } = useTheme();
   const play = useHaptics();
   const pressed = useSharedValue(0);
-  const spring = tokens.motion.spring.spatial.fast;
+  const spring = PRESS_SPRING;
   const opacity = tokens.state.pressed;
   const scale = pressScale === false ? 1 : pressScale;
 

package/src/theme/motion.ts

@@ -0,0 +1,105 @@
+import {
+  Easing,
+  FadeIn,
+  FadeInDown,
+  FadeInUp,
+  FadeOut,
+  FadeOutDown,
+  FadeOutUp,
+  LinearTransition,
+  ReduceMotion,
+  SlideOutLeft,
+  SlideOutRight,
+  ZoomIn,
+  ZoomOut,
+} from 'react-native-reanimated';
+import { native } from '@nexub/tokens/native';
+
+// Layout-animation presets built from the same spring tokens as the web
+// (`motion.spring.*` → CSS linear() there, Reanimated springs here).
+// Enter rides `spatial` (position and size, a hair of settle); exit is quicker
+// on `effects` and never overshoots. Every preset honours the OS Reduce Motion
+// setting (ReduceMotion.System): the change lands without travel.
+
+export type SpringFamily = keyof typeof native.motion.spring;
+export type SpringSpeed = keyof (typeof native.motion.spring)['spatial'];
+
+/** `withSpring` config for a spring token, honouring Reduce Motion. */
+export function nxSpring(family: SpringFamily = 'spatial', speed: SpringSpeed = 'default') {
+  return { ...native.motion.spring[family][speed], reduceMotion: ReduceMotion.System };
+}
+
+export type EnterKind = 'fade' | 'up' | 'down' | 'scale';
+export type ExitKind = 'fade' | 'up' | 'down' | 'scale' | 'start' | 'end';
+
+const ENTER = { fade: FadeIn, up: FadeInUp, down: FadeInDown, scale: ZoomIn } as const;
+const EXIT = { fade: FadeOut, up: FadeOutUp, down: FadeOutDown, scale: ZoomOut } as const;
+
+/**
+ * Settle time of a spring token (ms): when it is within 0.1% of rest. The
+ * same rule @nexub/tokens uses for the CSS spring durations.
+ */
+export function springSettleMs({ stiffness, damping, mass }: { stiffness: number; damping: number; mass: number }) {
+  const dt = 1 / 1000;
+  let x = 0;
+  let v = 0;
+  let still = 0;
+  for (let t = 0; t < 3; t += dt) {
+    const a = (stiffness * (1 - x) - damping * v) / mass;
+    v += a * dt;
+    x += v * dt;
+    still = Math.abs(1 - x) < 0.001 && Math.abs(v) < 0.01 ? still + 1 : 0;
+    if (still > 16) return Math.round((t - 0.016) * 1000);
+  }
+  return 3000;
+}
+
+// Enter and exit run as timed animations lasting the spring token's settle
+// time, on the system decelerate / accelerate curves: Reanimated's
+// physics-spring entering animations (`springify()` with stiffness/damping)
+// left entering views invisible on iOS. Layout transitions move views that are
+// already visible, so they keep the physics spring.
+const decelerate = Easing.bezier(0, 0, 0.2, 1);
+const accelerate = Easing.bezier(0.4, 0, 1, 1);
+
+/**
+ * `entering` animation, timed to the spatial spring.
+ * `up` rises into place (rows, toasts from below); `down` drops in (banners).
+ *
+ * ```tsx
+ * <Animated.View entering={nxEnter('up')} exiting={nxExit('down')} layout={nxLayout()} />
+ * ```
+ */
+export function nxEnter(kind: EnterKind = 'fade', speed: SpringSpeed = 'default') {
+  return ENTER[kind]
+    .duration(springSettleMs(native.motion.spring.spatial[speed]))
+    .easing(decelerate)
+    .reduceMotion(ReduceMotion.System);
+}
+
+/**
+ * `exiting` animation, timed to the effects spring: quicker than enter.
+ * `start` / `end` slide out toward that edge (swipe-to-delete), following RTL.
+ */
+export function nxExit(kind: ExitKind = 'fade', speed: SpringSpeed = 'fast', rtl = false) {
+  const builder =
+    kind === 'start' || kind === 'end'
+      ? (kind === 'start') !== rtl
+        ? SlideOutLeft
+        : SlideOutRight
+      : EXIT[kind];
+  return builder
+    .duration(springSettleMs(native.motion.spring.effects[speed]))
+    .easing(accelerate)
+    .reduceMotion(ReduceMotion.System);
+}
+
+/** `layout` transition: siblings glide to their new place on the spatial spring. */
+export function nxLayout(speed: SpringSpeed = 'default') {
+  const s = native.motion.spring.spatial[speed];
+  return LinearTransition.springify()
+    .stiffness(s.stiffness)
+    .damping(s.damping)
+    .mass(s.mass)
+    .reduceMotion(ReduceMotion.System);
+}