@nexub/react-native 0.0.0-stage → 2.2.0

package/src/patterns/money.tsx

@@ -0,0 +1,458 @@
+import * as React from 'react';
+import { SectionList, View } from 'react-native';
+import { moneyFormatter } from '@nexub/core';
+import { CheckCircle2, ShieldCheck, type NativeIconProps } from '@nexub/icons/native';
+import { Button } from '../components/actions';
+import { ListItem, ListSection } from '../components/containers';
+import { Amount, Avatar, Badge } from '../components/display';
+import { EmptyState, Progress } from '../components/feedback';
+import {
+  ExpressiveMoneyInput,
+  RefreshControl,
+  StickyFooter,
+  SwipeableRow,
+  type SwipeAction,
+} from '../components/mobile';
+import { ScreenContainer } from '../primitives/ScreenContainer';
+import { Heading, Text } from '../primitives/Text';
+import { useTheme } from '../theme/ThemeProvider';
+
+// ─── Flow step frame ─────────────────────────────────────────────────────────
+
+export interface FlowStepProps {
+  /** 1-based. */
+  step: number;
+  total: number;
+  title: string;
+  children: React.ReactNode;
+  footer: React.ReactNode;
+}
+
+/** One step of a multi-step flow: progress, title, content, sticky primary action. */
+export function FlowStep({ step, total, title, children, footer }: FlowStepProps) {
+  const { tokens, messages } = useTheme();
+  return (
+    <StickyFooter footer={footer}>
+      <ScreenContainer gap="5">
+        <View style={{ gap: tokens.spacing[2] }}>
+          <Progress value={step / total} label={messages.pageOf(step, total)} />
+          <Text variant="label-md" color="on-surface-variant">
+            {messages.pageOf(step, total)}
+          </Text>
+          <Heading variant="headline-sm">{title}</Heading>
+        </View>
+        {children}
+      </ScreenContainer>
+    </StickyFooter>
+  );
+}
+
+// ─── Send money ──────────────────────────────────────────────────────────────
+
+export interface Quote {
+  fee: number;
+  /** Units of `to` per unit of `from`. */
+  rate: number;
+  /** e.g. "In seconds", "By Friday". */
+  arrives: string;
+}
+
+export interface AmountStepProps {
+  from: string;
+  to: string;
+  /** Available balance in `from`. */
+  balance: number;
+  /** Quote for an amount (fees and rate shown before anything else, like Wise). */
+  quote: (amount: number) => Quote;
+  onContinue: (amount: number) => void;
+  step?: number;
+  total?: number;
+}
+
+/** Amount entry with the fee, rate and arrival shown live. */
+export function AmountStep({
+  from,
+  to,
+  balance,
+  quote,
+  onContinue,
+  step = 1,
+  total = 3,
+}: AmountStepProps) {
+  const { locale } = useTheme();
+  const [amount, setAmount] = React.useState<number | null>(null);
+  const fmt = (n: number, c: string) => moneyFormatter(c, locale).format(n);
+  const over = amount != null && amount > balance;
+  const q = amount ? quote(amount) : undefined;
+  return (
+    <FlowStep
+      step={step}
+      total={total}
+      title="How much?"
+      footer={
+        <Button
+          size="lg"
+          fullWidth
+          disabled={!amount || over}
+          onPress={() => amount && onContinue(amount)}
+        >
+          Continue
+        </Button>
+      }
+    >
+      <ExpressiveMoneyInput
+        label="Amount to send"
+        currency={from}
+        value={amount}
+        onValueChange={setAmount}
+        error={over}
+        caption={
+          over ? `More than your balance (${fmt(balance, from)})` : `Balance ${fmt(balance, from)}`
+        }
+      />
+      {q && amount && !over && (
+        <ListSection>
+          <ListItem variant="value" title="Fee" value={fmt(q.fee, from)} />
+          <ListItem variant="value" title="Rate" value={`1 ${from} = ${q.rate} ${to}`} />
+          <ListItem
+            variant="value"
+            title="Recipient gets"
+            value={fmt((amount - q.fee) * q.rate, to)}
+          />
+          <ListItem variant="value" title="Arrives" value={q.arrives} />
+        </ListSection>
+      )}
+    </FlowStep>
+  );
+}
+
+export interface ReviewRow {
+  label: string;
+  value: string;
+}
+
+export interface ReviewStepProps {
+  rows: ReviewRow[];
+  /** "Confirm and send". */
+  confirmLabel: string;
+  onConfirm: () => void;
+  /** Biometric confirmation, named: "Confirm with Face ID". Shown as the hint under the button. */
+  confirmHint?: string;
+  loading?: boolean;
+  step?: number;
+  total?: number;
+}
+
+/** Summary before money moves: every number visible, one confirming action. */
+export function ReviewStep({
+  rows,
+  confirmLabel,
+  onConfirm,
+  confirmHint,
+  loading,
+  step = 2,
+  total = 3,
+}: ReviewStepProps) {
+  return (
+    <FlowStep
+      step={step}
+      total={total}
+      title="Check the details"
+      footer={
+        <>
+          <Button
+            size="lg"
+            fullWidth
+            loading={loading}
+            leadingIcon={confirmHint ? ShieldCheck : undefined}
+            onPress={onConfirm}
+          >
+            {confirmLabel}
+          </Button>
+          {confirmHint && (
+            <Text variant="body-sm" color="on-surface-variant" style={{ textAlign: 'center' }}>
+              {confirmHint}
+            </Text>
+          )}
+        </>
+      }
+    >
+      <ListSection>
+        {rows.map((r) => (
+          <ListItem key={r.label} variant="value" title={r.label} value={r.value} />
+        ))}
+      </ListSection>
+    </FlowStep>
+  );
+}
+
+// ─── Activity ────────────────────────────────────────────────────────────────
+
+export interface Transaction {
+  id: string;
+  title: string;
+  subtitle?: string;
+  /** Negative = money out. */
+  amount: number;
+  currency: string;
+  date: Date;
+  status?: 'pending' | 'failed';
+  /** Avatar image URL. */
+  image?: string;
+}
+
+export interface ActivityListProps {
+  transactions: Transaction[];
+  onPress?: (t: Transaction) => void;
+  onRefresh?: () => void;
+  refreshing?: boolean;
+  onEndReached?: () => void;
+  /** Swipe actions per row (also accessibility actions). */
+  actions?: (t: Transaction) => SwipeAction[];
+  header?: React.ReactElement;
+  empty?: React.ReactElement;
+}
+
+/** Transactions grouped by day, with pull-to-refresh, paging and swipe actions (web ActivityFeed). */
+export function ActivityList({
+  transactions,
+  onPress,
+  onRefresh,
+  refreshing = false,
+  onEndReached,
+  actions,
+  header,
+  empty,
+}: ActivityListProps) {
+  const { roles, tokens, locale } = useTheme();
+  const day = new Intl.DateTimeFormat(locale, { dateStyle: 'medium' });
+  const sections = React.useMemo(() => {
+    const map = new Map<string, Transaction[]>();
+    for (const t of [...transactions].sort((a, b) => +b.date - +a.date)) {
+      const key = day.format(t.date);
+      map.set(key, [...(map.get(key) ?? []), t]);
+    }
+    return [...map].map(([title, data]) => ({ title, data }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [transactions, locale]);
+
+  const row = (t: Transaction) => {
+    const label = `${t.title}, ${moneyFormatter(t.currency, locale, { signDisplay: 'exceptZero' }).format(t.amount)}${t.status ? `, ${t.status}` : ''}`;
+    const item = (
+      <ListItem
+        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={onPress ? 'navigation' : 'static'}
+        onPress={onPress && (() => onPress(t))}
+      />
+    );
+    return actions ? (
+      <SwipeableRow label={label} onPress={onPress && (() => onPress(t))} actions={actions(t)}>
+        {item}
+      </SwipeableRow>
+    ) : (
+      item
+    );
+  };
+
+  return (
+    <SectionList
+      sections={sections}
+      keyExtractor={(t) => t.id}
+      contentInsetAdjustmentBehavior="automatic"
+      style={{ backgroundColor: roles.surface }}
+      contentContainerStyle={{ padding: tokens.spacing[4], gap: 0 }}
+      ListHeaderComponent={header}
+      ListEmptyComponent={
+        empty ?? (
+          <EmptyState
+            title="No activity yet"
+            description="Your payments and transfers will show up here."
+          />
+        )
+      }
+      renderSectionHeader={({ section }) => (
+        <Text
+          variant="title-sm"
+          color="on-surface-variant"
+          accessibilityRole="header"
+          style={{
+            paddingTop: tokens.spacing[4],
+            paddingBottom: tokens.spacing[2],
+            paddingHorizontal: tokens.spacing[4],
+            backgroundColor: roles.surface,
+          }}
+        >
+          {section.title}
+        </Text>
+      )}
+      renderItem={({ item, index, section }) => (
+        <View
+          style={{
+            backgroundColor: roles['surface-container-lowest'],
+            borderTopStartRadius: index === 0 ? tokens.shape.container : 0,
+            borderTopEndRadius: index === 0 ? tokens.shape.container : 0,
+            borderBottomStartRadius: index === section.data.length - 1 ? tokens.shape.container : 0,
+            borderBottomEndRadius: index === section.data.length - 1 ? tokens.shape.container : 0,
+            overflow: 'hidden',
+          }}
+        >
+          {row(item)}
+        </View>
+      )}
+      refreshControl={
+        onRefresh ? <RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> : undefined
+      }
+      onEndReached={onEndReached}
+      onEndReachedThreshold={0.5}
+      stickySectionHeadersEnabled={false}
+    />
+  );
+}
+
+export interface TransactionDetailProps {
+  transaction: Transaction;
+  /** Extra rows: reference, account, category… */
+  rows?: ReviewRow[];
+  actions?: React.ReactNode;
+}
+
+/** One transaction: hero amount, status, summary rows (web InfoList). */
+export function TransactionDetail({ transaction: t, rows = [], actions }: TransactionDetailProps) {
+  const { tokens, locale } = useTheme();
+  const when = new Intl.DateTimeFormat(locale, { dateStyle: 'full', timeStyle: 'short' }).format(
+    t.date,
+  );
+  return (
+    <ScreenContainer gap="5">
+      <View
+        style={{ alignItems: 'center', gap: tokens.spacing[2], paddingVertical: tokens.spacing[4] }}
+      >
+        <Avatar name={t.title} src={t.image} size="xl" />
+        <Text variant="title-md">{t.title}</Text>
+        <Amount
+          value={t.amount}
+          currency={t.currency}
+          locale={locale}
+          size="display"
+          tone="auto"
+          signDisplay="exceptZero"
+        />
+        {t.status ? (
+          <Badge tone={t.status === 'failed' ? 'danger' : 'warning'} dot>
+            {t.status === 'failed' ? 'Failed' : 'Pending'}
+          </Badge>
+        ) : (
+          <Badge tone="success" dot>
+            Completed
+          </Badge>
+        )}
+      </View>
+      <ListSection>
+        <ListItem variant="value" title="Date" value={when} />
+        {t.subtitle && <ListItem variant="value" title="Details" value={t.subtitle} />}
+        {rows.map((r) => (
+          <ListItem key={r.label} variant="value" title={r.label} value={r.value} />
+        ))}
+      </ListSection>
+      {actions}
+    </ScreenContainer>
+  );
+}
+
+// ─── Result screens ──────────────────────────────────────────────────────────
+
+export interface ResultScreenProps {
+  /** @default 'success' */
+  kind?: 'success' | 'error' | 'offline' | 'maintenance' | 'update';
+  title: string;
+  description?: string;
+  /** Hero figure (e.g. the amount sent). */
+  amount?: { value: number; currency: string };
+  primary: { label: string; onPress: () => void };
+  secondary?: { label: string; onPress: () => void };
+  icon?: React.ComponentType<NativeIconProps>;
+}
+
+/** Full-screen outcome: success, error, offline, maintenance, or "update required". */
+export function ResultScreen({
+  kind = 'success',
+  title,
+  description,
+  amount,
+  primary,
+  secondary,
+  icon,
+}: ResultScreenProps) {
+  const { roles, tokens, locale } = useTheme();
+  const tone = kind === 'success' ? 'success' : kind === 'error' ? 'error' : 'primary';
+  const Glyph = icon ?? CheckCircle2;
+  return (
+    <StickyFooter
+      footer={
+        <>
+          <Button size="lg" fullWidth onPress={primary.onPress}>
+            {primary.label}
+          </Button>
+          {secondary && (
+            <Button size="lg" fullWidth variant="text" onPress={secondary.onPress}>
+              {secondary.label}
+            </Button>
+          )}
+        </>
+      }
+    >
+      <View
+        accessibilityLiveRegion="polite"
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: tokens.spacing[4],
+          padding: tokens.spacing[6],
+        }}
+      >
+        <View
+          style={{
+            width: 88,
+            height: 88,
+            borderRadius: 44,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: roles[`${tone}-container`],
+          }}
+        >
+          <Glyph size={44} color={roles[tone]} />
+        </View>
+        <Heading variant="headline-md" style={{ textAlign: 'center' }}>
+          {title}
+        </Heading>
+        {amount && (
+          <Amount value={amount.value} currency={amount.currency} locale={locale} size="display" />
+        )}
+        {description && (
+          <Text variant="body-md" color="on-surface-variant" style={{ textAlign: 'center' }}>
+            {description}
+          </Text>
+        )}
+      </View>
+    </StickyFooter>
+  );
+}

package/src/primitives/Icon.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { NativeIconProps } from '@nexub/icons/native';
+import { useTheme, type RoleName } from '../theme/ThemeProvider';
+
+export interface IconProps extends Omit<NativeIconProps, 'color'> {
+  /** An icon from `@nexub/icons/native`, e.g. `Search`. */
+  icon: React.ComponentType<NativeIconProps>;
+  /** Colour role. @default 'on-surface-variant' */
+  color?: RoleName;
+}
+
+/** An `@nexub/icons/native` icon coloured by a role. Decorative unless `label` is set. */
+export function Icon({ icon: Glyph, color = 'on-surface-variant', ...rest }: IconProps) {
+  return <Glyph color={useTheme().roles[color]} {...rest} />;
+}

package/src/primitives/Layout.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { View, type ViewProps, type ViewStyle } from 'react-native';
+import type { NativeTokens } from '@nexub/tokens/native';
+import { useTheme, type RoleName } from '../theme/ThemeProvider';
+import type { ShapeName } from './Surface';
+
+export type Space = keyof NativeTokens['spacing'];
+
+export interface BoxProps extends ViewProps {
+  /** Padding on every side (spacing token). */
+  padding?: Space;
+  /** Horizontal padding (start + end, so RTL is free). */
+  paddingX?: Space;
+  paddingY?: Space;
+  /** Gap between children. */
+  gap?: Space;
+  background?: RoleName;
+  radius?: ShapeName;
+  align?: ViewStyle['alignItems'];
+  justify?: ViewStyle['justifyContent'];
+  flex?: number;
+}
+
+function useBoxStyle({
+  padding,
+  paddingX,
+  paddingY,
+  gap,
+  background,
+  radius,
+  align,
+  justify,
+  flex,
+}: BoxProps): ViewStyle {
+  const { tokens, roles } = useTheme();
+  const s = (k?: Space) => (k === undefined ? undefined : tokens.spacing[k]);
+  return {
+    padding: s(padding),
+    paddingHorizontal: s(paddingX),
+    paddingVertical: s(paddingY),
+    gap: s(gap),
+    backgroundColor: background && roles[background],
+    borderRadius: radius && tokens.shape[radius],
+    alignItems: align,
+    justifyContent: justify,
+    flex,
+  };
+}
+
+export function Box({ style, ...props }: BoxProps) {
+  return <View style={[useBoxStyle(props), style]} {...props} />;
+}
+
+/** Children in a column. @default gap '3' */
+export function Stack({ gap = '3', style, ...props }: BoxProps) {
+  return <View style={[useBoxStyle({ gap, ...props }), style]} {...props} />;
+}
+
+/** Children in a row that wraps, centred on the cross axis. @default gap '2' */
+export function Inline({ gap = '2', align = 'center', style, ...props }: BoxProps) {
+  return (
+    <View
+      style={[
+        useBoxStyle({ gap, align, ...props }),
+        { flexDirection: 'row', flexWrap: 'wrap' },
+        style,
+      ]}
+      {...props}
+    />
+  );
+}

package/src/primitives/Pressable.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import {
+  Pressable as RNPressable,
+  StyleSheet,
+  View,
+  type GestureResponderEvent,
+  type PressableProps as RNPressableProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+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.
+const AnimatedPressable = Animated.createAnimatedComponent(RNPressable);
+const AnimatedView = Animated.createAnimatedComponent(View);
+
+export interface PressableProps extends Omit<RNPressableProps, 'style' | 'children'> {
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+  /** Haptic played on press (Apple: not for plain taps — toggles, selections, outcomes). */
+  haptic?: HapticToken;
+  /** On-colour of the state layer, or false for none. @default 'on-surface' */
+  stateLayer?: RoleName | false;
+  /** Press-scale target, or false for none. @default 0.97 */
+  pressScale?: number | false;
+}
+
+/**
+ * The base of every Nexub control: a state layer (on-colour at the pressed
+ * opacity) and a 0.97 press-scale on the spatial-fast spring. No ripple.
+ * Reduce Motion is honoured by Reanimated (ReduceMotion.System).
+ */
+export function Pressable({
+  style,
+  children,
+  haptic,
+  stateLayer = 'on-surface',
+  pressScale = 0.97,
+  disabled,
+  onPress,
+  onPressIn,
+  onPressOut,
+  ...rest
+}: PressableProps) {
+  const { roles, tokens } = useTheme();
+  const play = useHaptics();
+  const pressed = useSharedValue(0);
+  const spring = PRESS_SPRING;
+  const opacity = tokens.state.pressed;
+  const scale = pressScale === false ? 1 : pressScale;
+
+  const container = useAnimatedStyle(() => ({
+    transform: [{ scale: 1 - (1 - scale) * pressed.value }],
+  }));
+  const layer = useAnimatedStyle(() => ({ opacity: pressed.value * opacity }));
+  const radius = StyleSheet.flatten(style)?.borderRadius;
+
+  return (
+    <AnimatedPressable
+      accessibilityRole="button"
+      accessibilityState={{ disabled: !!disabled }}
+      disabled={disabled}
+      onPressIn={(e: GestureResponderEvent) => {
+        pressed.value = withSpring(1, spring);
+        onPressIn?.(e);
+      }}
+      onPressOut={(e: GestureResponderEvent) => {
+        pressed.value = withSpring(0, spring);
+        onPressOut?.(e);
+      }}
+      onPress={(e: GestureResponderEvent) => {
+        if (haptic) play(haptic);
+        onPress?.(e);
+      }}
+      style={[style, container]}
+      {...rest}
+    >
+      {children}
+      {stateLayer && (
+        <AnimatedView
+          pointerEvents="none"
+          style={[
+            StyleSheet.absoluteFill,
+            { backgroundColor: roles[stateLayer], borderRadius: radius },
+            layer,
+          ]}
+        />
+      )}
+    </AnimatedPressable>
+  );
+}

package/src/primitives/ScreenContainer.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { ScrollView, View, type ScrollViewProps, type ViewStyle } from 'react-native';
+import { useSafeAreaInsets, type Edge } from 'react-native-safe-area-context';
+import { useTheme, type RoleName } from '../theme/ThemeProvider';
+import type { Space } from './Layout';
+
+export interface ScreenContainerProps extends Omit<ScrollViewProps, 'contentContainerStyle'> {
+  /** Scrolls (and lets a native large title collapse). @default true */
+  scroll?: boolean;
+  /** Safe-area edges to pad. A native header already covers 'top'. @default ['left', 'right', 'bottom'] */
+  edges?: Edge[];
+  /** @default 'surface' */
+  background?: RoleName;
+  /** Content padding. @default '4' */
+  padding?: Space;
+  /** Gap between children. @default '4' */
+  gap?: Space;
+  contentStyle?: ViewStyle;
+}
+
+/**
+ * The root of every screen: background, edge-to-edge safe-area insets and
+ * content padding. With `scroll`, iOS adjusts insets itself
+ * (contentInsetAdjustmentBehavior) so native large titles collapse.
+ */
+export function ScreenContainer({
+  scroll = true,
+  edges = ['left', 'right', 'bottom'],
+  background = 'surface',
+  padding = '4',
+  gap = '4',
+  contentStyle,
+  children,
+  style,
+  ...rest
+}: ScreenContainerProps) {
+  const { roles, tokens } = useTheme();
+  const insets = useSafeAreaInsets();
+  const pad = tokens.spacing[padding];
+  const inner: ViewStyle = {
+    paddingTop: pad + (edges.includes('top') ? insets.top : 0),
+    paddingBottom: pad + (edges.includes('bottom') ? insets.bottom : 0),
+    paddingStart: pad + (edges.includes('left') ? insets.left : 0),
+    paddingEnd: pad + (edges.includes('right') ? insets.right : 0),
+    gap: tokens.spacing[gap],
+  };
+  if (!scroll) {
+    return (
+      <View style={[{ flex: 1, backgroundColor: roles[background] }, inner, contentStyle, style]}>
+        {children}
+      </View>
+    );
+  }
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior="automatic"
+      keyboardShouldPersistTaps="handled"
+      style={[{ flex: 1, backgroundColor: roles[background] }, style]}
+      contentContainerStyle={[inner, contentStyle]}
+      {...rest}
+    >
+      {children}
+    </ScrollView>
+  );
+}