@nexub/react-native 0.0.0-stage → 2.2.0

package/src/patterns/auth.tsx

@@ -0,0 +1,266 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Lock, ShieldCheck } from '@nexub/icons/native';
+import { Button } from '../components/actions';
+import { PasswordInput, TextField } from '../components/inputs';
+import { Banner } from '../components/feedback';
+import { OTPInput, StickyFooter } from '../components/mobile';
+import { ScreenContainer } from '../primitives/ScreenContainer';
+import { Text, Heading } from '../primitives/Text';
+import { useTheme } from '../theme/ThemeProvider';
+
+export interface AuthScreenProps {
+  /** Brand mark above the title. */
+  logo?: React.ReactNode;
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+  /** Primary action(s), kept above the keyboard. */
+  footer: React.ReactNode;
+  /** Error from the last attempt (announced). */
+  error?: string;
+}
+
+/** Frame for sign-in, sign-up and verification screens (web AuthCard, full screen). */
+export function AuthScreen({ logo, title, description, children, footer, error }: AuthScreenProps) {
+  const { tokens } = useTheme();
+  return (
+    <StickyFooter footer={footer}>
+      <ScreenContainer
+        edges={['top', 'left', 'right']}
+        gap="6"
+        contentStyle={{ paddingTop: tokens.spacing[10] }}
+      >
+        <View style={{ gap: tokens.spacing[2] }}>
+          {logo}
+          <Heading variant="headline-md">{title}</Heading>
+          {description && (
+            <Text variant="body-md" color="on-surface-variant">
+              {description}
+            </Text>
+          )}
+        </View>
+        {error && <Banner tone="danger">{error}</Banner>}
+        <View style={{ gap: tokens.spacing[4] }}>{children}</View>
+      </ScreenContainer>
+    </StickyFooter>
+  );
+}
+
+export interface SignInScreenProps {
+  onSubmit: (email: string, password: string) => void;
+  /** Offer passkey/biometric sign-in (name the method: "Sign in with Face ID"). */
+  biometricLabel?: string;
+  onBiometric?: () => void;
+  onForgotPassword?: () => void;
+  onCreateAccount?: () => void;
+  loading?: boolean;
+  error?: string;
+  logo?: React.ReactNode;
+  /** Copy overrides. */
+  title?: string;
+  submitLabel?: string;
+}
+
+/** Email + password sign-in with platform autofill, plus an optional biometric/passkey path. */
+export function SignInScreen({
+  onSubmit,
+  biometricLabel,
+  onBiometric,
+  onForgotPassword,
+  onCreateAccount,
+  loading,
+  error,
+  logo,
+  title = 'Sign in',
+  submitLabel = 'Sign in',
+}: SignInScreenProps) {
+  const [email, setEmail] = React.useState('');
+  const [password, setPassword] = React.useState('');
+  return (
+    <AuthScreen
+      logo={logo}
+      title={title}
+      error={error}
+      footer={
+        <>
+          <Button
+            size="lg"
+            fullWidth
+            loading={loading}
+            disabled={!email || !password}
+            onPress={() => onSubmit(email, password)}
+          >
+            {submitLabel}
+          </Button>
+          {onBiometric && biometricLabel && (
+            <Button
+              size="lg"
+              fullWidth
+              variant="tonal"
+              leadingIcon={ShieldCheck}
+              onPress={onBiometric}
+            >
+              {biometricLabel}
+            </Button>
+          )}
+          {onCreateAccount && (
+            <Button size="lg" fullWidth variant="text" onPress={onCreateAccount}>
+              Create an account
+            </Button>
+          )}
+        </>
+      }
+    >
+      <TextField
+        label="Email"
+        value={email}
+        onChangeText={setEmail}
+        keyboardType="email-address"
+        autoCapitalize="none"
+        autoCorrect={false}
+        autoComplete="email"
+        textContentType="username"
+        returnKeyType="next"
+      />
+      <PasswordInput
+        label="Password"
+        value={password}
+        onChangeText={setPassword}
+        returnKeyType="go"
+        onSubmitEditing={() => email && password && onSubmit(email, password)}
+      />
+      {onForgotPassword && (
+        <Button
+          variant="text"
+          size="sm"
+          onPress={onForgotPassword}
+          style={{ alignSelf: 'flex-end' }}
+        >
+          Forgot password?
+        </Button>
+      )}
+    </AuthScreen>
+  );
+}
+
+export interface VerifyCodeScreenProps {
+  /** Where the code went, e.g. "+65 •••• 4821". */
+  destination: string;
+  onComplete: (code: string) => void;
+  onResend: () => void;
+  /** Seconds before Resend is allowed again. @default 30 */
+  resendAfter?: number;
+  length?: number;
+  error?: string;
+}
+
+/** One-time code entry (SMS autofill ready) with a resend countdown. */
+export function VerifyCodeScreen({
+  destination,
+  onComplete,
+  onResend,
+  resendAfter = 30,
+  length = 6,
+  error,
+}: VerifyCodeScreenProps) {
+  const [left, setLeft] = React.useState(resendAfter);
+  React.useEffect(() => {
+    if (left <= 0) return;
+    const t = setTimeout(() => setLeft(left - 1), 1000);
+    return () => clearTimeout(t);
+  }, [left]);
+  return (
+    <AuthScreen
+      title="Enter the code"
+      description={`We sent a ${length}-digit code to ${destination}.`}
+      footer={
+        <Button
+          size="lg"
+          fullWidth
+          variant="text"
+          disabled={left > 0}
+          onPress={() => {
+            setLeft(resendAfter);
+            onResend();
+          }}
+        >
+          {left > 0 ? `Resend code in ${left}s` : 'Resend code'}
+        </Button>
+      }
+    >
+      <OTPInput
+        label="Verification code"
+        length={length}
+        onComplete={onComplete}
+        error={error}
+        autoFocus
+      />
+    </AuthScreen>
+  );
+}
+
+export interface LockScreenProps {
+  /** "Unlock with Face ID" / "Unlock with fingerprint" (name the method). */
+  unlockLabel: string;
+  onUnlock: () => void;
+  /** Fallback to the app passcode or password. */
+  onUsePasscode?: () => void;
+  logo?: React.ReactNode;
+  appName?: string;
+}
+
+/** Biometric unlock on app open/resume, with a passcode fallback. */
+export function LockScreen({
+  unlockLabel,
+  onUnlock,
+  onUsePasscode,
+  logo,
+  appName,
+}: LockScreenProps) {
+  const { roles, tokens } = useTheme();
+  return (
+    <StickyFooter
+      footer={
+        <>
+          <Button size="lg" fullWidth leadingIcon={ShieldCheck} onPress={onUnlock}>
+            {unlockLabel}
+          </Button>
+          {onUsePasscode && (
+            <Button size="lg" fullWidth variant="text" onPress={onUsePasscode}>
+              Use passcode
+            </Button>
+          )}
+        </>
+      }
+    >
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: tokens.spacing[4],
+          padding: tokens.spacing[6],
+        }}
+      >
+        {logo ?? (
+          <View
+            style={{
+              width: 72,
+              height: 72,
+              borderRadius: 36,
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: roles['primary-container'],
+            }}
+          >
+            <Lock size="xl" color={roles['on-primary-container']} />
+          </View>
+        )}
+        <Heading variant="headline-sm" style={{ textAlign: 'center' }}>
+          {appName ? `${appName} is locked` : 'Locked'}
+        </Heading>
+      </View>
+    </StickyFooter>
+  );
+}

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

@@ -0,0 +1,59 @@
+// @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,
+  SignInScreenProps,
+  VerifyCodeScreenProps,
+  LockScreenProps,
+} from './auth';
+export {
+  FlowStep,
+  AmountStep,
+  ReviewStep,
+  ActivityList,
+  TransactionDetail,
+  ResultScreen,
+} from './money';
+export type {
+  FlowStepProps,
+  Quote,
+  AmountStepProps,
+  ReviewRow,
+  ReviewStepProps,
+  Transaction,
+  ActivityListProps,
+  TransactionDetailProps,
+  ResultScreenProps,
+} from './money';
+export {
+  OnboardingScreen,
+  PermissionPrimer,
+  SettingsScreen,
+  AppearanceSection,
+  ProfileHeader,
+  NotificationsInbox,
+  SearchScreen,
+  ChatScreen,
+  PaywallScreen,
+  AppSwitcherSheet,
+} from './app';
+export type {
+  OnboardingSlide,
+  OnboardingScreenProps,
+  PermissionPrimerProps,
+  SettingsGroup,
+  SettingsScreenProps,
+  AppearanceSectionProps,
+  ProfileHeaderProps,
+  NotificationEntry,
+  NotificationsInboxProps,
+  SearchScreenProps,
+  ChatMessage,
+  ChatScreenProps,
+  Plan,
+  PaywallScreenProps,
+  NexubApp,
+  AppSwitcherSheetProps,
+} from './app';