@alexisapp/leave-mobile 0.0.1-beta.1

package/README.md

@@ -0,0 +1,133 @@
+# @leave/mobile
+
+React Native package for the leave management feature. Consumed as an npm package by the `mobile-platform` host app.
+
+## Setup
+
+```bash
+pnpm install
+pnpm typecheck   # tsc --noEmit
+pnpm lint        # eslint src/
+pnpm test        # vitest run
+pnpm test:watch  # vitest (watch mode)
+```
+
+No build step — Metro resolves raw `.ts` via the `react-native` condition in `package.json`. The host compiles everything at bundle time.
+
+## Usage
+
+The primary export is `LeaveScreen` — a self-contained screen that initializes the client, i18n, query cache, and theme, then renders balance tiles, upcoming leaves, and leave history.
+
+```tsx
+import { LeaveScreen } from '@leave/mobile';
+
+<LeaveScreen
+  endpoint="https://api-2.dev-alexishr.io/graphql"
+  gatewayEndpoint="https://api-2.dev-alexishr.io/v2/graphql"
+  locale="en-GB"
+  getToken={() => auth0.getAccessTokenSilently()}
+  onAuthError={() => navigation.navigate('Login')}
+  onDismiss={() => navigation.goBack()}
+  onError={(err) => analytics.track('leave_error', err)}
+/>;
+```
+
+### Props (`LeaveScreenProps`)
+
+| Prop              | Type                                                 | Required | Description                                                 |
+| ----------------- | ---------------------------------------------------- | -------- | ----------------------------------------------------------- |
+| `endpoint`        | `string`                                             | Yes      | HR Core GraphQL endpoint URL                                |
+| `gatewayEndpoint` | `string`                                             | No       | Gateway GraphQL endpoint URL                                |
+| `locale`          | `string`                                             | No       | Locale code (e.g. `en-GB`, `sv-SE`). Defaults to `en-GB`    |
+| `getToken`        | `() => Promise<string \| null>`                      | No       | Returns Auth0 JWT for authenticated requests                |
+| `onAuthError`     | `() => void`                                         | No       | Called on 401/403 before throwing — host navigates to login |
+| `devToken`        | `string`                                             | No       | Hardcoded dev token. Takes precedence over `getToken`       |
+| `theme`           | `LeaveTheme`                                         | No       | Custom theme tokens. Defaults to `defaultLeaveTheme`        |
+| `onDismiss`       | `() => void`                                         | Yes      | Called when user taps close/dismiss                         |
+| `onError`         | `(error: { code: string; message: string }) => void` | No       | Error callback for analytics/logging                        |
+
+## Architecture
+
+```
+LeaveScreen
+└── LeaveProvider          # Initializes client, i18n, QueryClient, theme
+    └── LeaveScreenContent
+        ├── ElementBoundary + BalanceTiles
+        ├── ElementBoundary + UpcomingLeaves
+        └── ElementBoundary + LeaveHistory
+```
+
+- **LeaveProvider** — wires up the `@leave/core` singletons (`initializeClient`, `initLeaveI18n`), TanStack Query `QueryClientProvider`, `react-i18next` `I18nextProvider`, and `LeaveThemeProvider`. Blocks rendering until singletons are ready. Invalidates leave queries on AppState foreground transition.
+- **ElementBoundary** — per-section error/suspense boundary wrapping `AsyncBoundary` from `@leave/core/components`. Shows `ActivityIndicator` during loading, `ErrorFallback` on error.
+- **ErrorFallback** — RN error view with i18n title/description, retry button (for transient errors), and dismiss button.
+
+## Source Layout
+
+```
+src/
+├── components/       # ElementBoundary, ErrorFallback, cards (LeaveCard, LeaveCardList)
+├── features/         # Feature modules (balance, upcoming, history)
+│   ├── balance/      # BalanceTiles, BalanceTile
+│   ├── upcoming/     # UpcomingLeaves, useUpcomingLeaves
+│   └── history/      # LeaveHistory, useHistoryLeaves
+├── hooks/            # useCurrentEmployeeId, useLeaveList
+├── providers/        # LeaveProvider
+├── screens/          # LeaveScreen (main entry point)
+├── theme/            # LeaveThemeProvider, tokens (defaultLeaveTheme, darkLeaveTheme)
+├── ui/               # Shared UI primitives (Button, Card, Input, Select, Dialog, etc.)
+└── utils/            # formatDateRange, leaveStatus, splitLeaveSections
+```
+
+## Theming
+
+The package ships with `defaultLeaveTheme` and `darkLeaveTheme`. Host apps can pass a custom `LeaveTheme` via the `theme` prop. Inside components, use `useLeaveTheme()` to access tokens:
+
+```tsx
+import { useLeaveTheme } from '@leave/mobile';
+
+const { colors, spacing, typography, radius, opacity } = useLeaveTheme();
+```
+
+## Exports
+
+```typescript
+// Screen
+export { LeaveScreen } from '@leave/mobile';
+export type { LeaveScreenProps } from '@leave/mobile';
+
+// Backwards compat alias
+export { TimeOffScreen } from '@leave/mobile';
+
+// Theme
+export {
+  useLeaveTheme,
+  LeaveThemeProvider,
+  defaultLeaveTheme,
+  darkLeaveTheme,
+} from '@leave/mobile';
+export type { LeaveTheme } from '@leave/mobile';
+
+// UI primitives
+export { Button, Card, Typography, Input, Select, Dialog /* ... */ } from '@leave/mobile';
+```
+
+## Dependencies
+
+| Package                 | Purpose                               |
+| ----------------------- | ------------------------------------- |
+| `@leave/core`           | Client, queries, errors, i18n, domain |
+| `@tanstack/react-query` | Server-state cache                    |
+| `@tanstack/react-form`  | Form state management                 |
+| `zod`                   | Schema validation                     |
+| `ky`                    | HTTP client                           |
+| `i18next`               | Internationalization                  |
+| `react-i18next`         | React bindings for i18next            |
+| `react-error-boundary`  | Error boundary primitives             |
+
+### Peer Dependencies
+
+| Package        | Range                  |
+| -------------- | ---------------------- |
+| `react`        | `^18.0.0 \|\| ^19.0.0` |
+| `react-native` | `>=0.73.0`             |
+| `expo`         | `>=51.0.0`             |

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@alexisapp/leave-mobile",
+  "version": "0.0.1-beta.1",
+  "main": "src/index.ts",
+  "react-native": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src/",
+    "package.json"
+  ],
+  "exports": {
+    ".": {
+      "react-native": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-native": ">=0.73.0",
+    "expo": ">=51.0.0",
+    "@tanstack/react-query": "^5.0.0",
+    "react-error-boundary": "^5.0.0",
+    "zod": "^4.0.0"
+  },
+  "devDependencies": {
+    "typescript": "~5.9.0",
+    "@types/react": "^19.1.0",
+    "react-native": ">=0.73.0",
+    "vitest": "^3.0.0",
+    "@tanstack/react-query": "^5.0.0",
+    "react-error-boundary": "^5.0.0"
+  },
+  "dependencies": {
+    "react-i18next": "^14.0.0",
+    "@alexisapp/leave-core": "0.0.1-beta.1"
+  }
+}

package/src/components/ElementBoundary.tsx

@@ -0,0 +1,45 @@
+import { ActivityIndicator, View } from 'react-native';
+import type { PropsWithChildren, ReactNode } from 'react';
+import type { LeaveError } from '@leave/core';
+import { AsyncBoundary } from '@leave/core/components';
+import { ErrorFallback } from './ErrorFallback';
+
+interface ElementBoundaryProps {
+  suspenseFallback?: ReactNode;
+  onDismiss: () => void;
+  onError?: ((error: { code: string; message: string }) => void) | undefined;
+}
+
+export const ElementBoundary = ({
+  children,
+  suspenseFallback,
+  onDismiss,
+  onError,
+}: PropsWithChildren<ElementBoundaryProps>) => (
+  <AsyncBoundary
+    suspenseFallback={
+      suspenseFallback || (
+        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+          <ActivityIndicator size="large" />
+        </View>
+      )
+    }
+    errorBoundaryProps={{
+      fallbackRender: ({ error, resetErrorBoundary }) => (
+        <ErrorFallback
+          error={error}
+          resetErrorBoundary={resetErrorBoundary}
+          onDismiss={onDismiss}
+        />
+      ),
+      onError: (error) => {
+        onError?.({
+          code: (error as LeaveError).code ?? 'RENDER_ERROR',
+          message: error.message,
+        });
+      },
+    }}
+  >
+    {children}
+  </AsyncBoundary>
+);

package/src/components/ErrorFallback.tsx

@@ -0,0 +1,70 @@
+import { useMemo } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { isRetryable, getErrorMessage } from '@leave/core';
+import { useTranslation } from 'react-i18next';
+import type { FallbackProps } from 'react-error-boundary';
+import { useLeaveTheme } from '../theme';
+
+interface ErrorFallbackProps extends FallbackProps {
+  onDismiss: () => void;
+}
+
+export function ErrorFallback({ error, resetErrorBoundary, onDismiss }: ErrorFallbackProps) {
+  const { colors, spacing, typography } = useLeaveTheme();
+  const retryable = isRetryable(error);
+  const { title, description } = getErrorMessage(error);
+  const { t } = useTranslation();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: spacing.xxl,
+        },
+        title: {
+          fontSize: typography.body.fontSize,
+          fontWeight: '600',
+          marginBottom: spacing.sm,
+          textAlign: 'center',
+          color: colors.textPrimary,
+        },
+        description: {
+          fontSize: typography.bodySmall.fontSize,
+          marginBottom: spacing.lg,
+          textAlign: 'center',
+          color: colors.textMuted,
+        },
+        retryText: { color: colors.primary, fontSize: typography.body.fontSize },
+        closeButton: { marginTop: spacing.md },
+        closeText: { color: colors.textMuted, fontSize: typography.bodySmall.fontSize },
+      }),
+    [colors, spacing, typography]
+  );
+
+  return (
+    <View style={styles.container} accessible accessibilityRole='alert'>
+      <Text style={styles.title}>{title}</Text>
+      <Text style={styles.description}>{description}</Text>
+      {retryable && (
+        <TouchableOpacity
+          onPress={resetErrorBoundary}
+          accessibilityLabel={t('retry')}
+          accessibilityRole='button'
+        >
+          <Text style={styles.retryText}>{t('retry')}</Text>
+        </TouchableOpacity>
+      )}
+      <TouchableOpacity
+        onPress={onDismiss}
+        style={styles.closeButton}
+        accessibilityLabel={t('close')}
+        accessibilityRole='button'
+      >
+        <Text style={styles.closeText}>{t('close')}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}

package/src/components/cards/LeaveCard.tsx

@@ -0,0 +1,119 @@
+import { useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import { useLeaveTheme } from '../../theme';
+import { formatDateRange } from '@leave/core/utils';
+import type { DisplayStatus } from '@leave/core/utils';
+import { getStatusChipColors } from '../../utils/leaveStatusColorsUtils';
+
+interface LeaveCardProps {
+  typeName: string;
+  displayStatus: DisplayStatus;
+  localStartDate: string;
+  localEndDate: string | null;
+}
+
+export function LeaveCard({
+  typeName,
+  displayStatus,
+  localStartDate,
+  localEndDate,
+}: LeaveCardProps) {
+  const { colors, spacing, radius, typography, opacity } = useLeaveTheme();
+  const { t } = useTranslation();
+  const chipColors = getStatusChipColors(displayStatus, colors);
+
+  const statusLabel = t(`leave.status.${displayStatus}`);
+  const dateText = formatDateRange(localStartDate, localEndDate, t('leave.ongoing'));
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        card: {
+          backgroundColor: colors.surface,
+          borderRadius: radius.lg,
+          padding: spacing.md,
+          borderWidth: 1,
+          borderColor: colors.borderLight,
+          shadowColor: colors.shadow,
+          shadowOffset: { width: 0, height: 1 },
+          shadowOpacity: opacity.shadowLight,
+          shadowRadius: 2,
+          elevation: 1,
+        },
+        header: {
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        },
+        typeName: {
+          fontSize: typography.body.fontSize,
+          fontWeight: '600',
+          color: colors.textPrimary,
+          flex: 1,
+          marginRight: spacing.sm,
+        },
+        chip: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          backgroundColor: chipColors.background,
+          borderWidth: 1,
+          borderColor: chipColors.border,
+          borderRadius: radius.xl,
+          paddingHorizontal: spacing.sm,
+          paddingVertical: spacing.xxs,
+          gap: spacing.xxs,
+        },
+        chipIcon: {
+          fontSize: typography.caption.fontSize,
+          color: chipColors.text,
+        },
+        chipText: {
+          fontSize: typography.caption.fontSize,
+          fontWeight: '500',
+          color: chipColors.text,
+        },
+        dates: {
+          fontSize: typography.bodySmall.fontSize,
+          color: colors.textMuted,
+          marginTop: spacing.xs,
+        },
+      }),
+    [colors, spacing, radius, typography, opacity, chipColors]
+  );
+
+  const chipIcon = getChipIcon(displayStatus);
+
+  return (
+    <View
+      style={styles.card}
+      accessibilityRole='summary'
+      accessibilityLabel={`${typeName}, ${statusLabel}, ${dateText}`}
+    >
+      <View style={styles.header}>
+        <Text style={styles.typeName} numberOfLines={1}>
+          {typeName}
+        </Text>
+        <View style={styles.chip}>
+          <Text style={styles.chipIcon}>{chipIcon}</Text>
+          <Text style={styles.chipText}>{statusLabel}</Text>
+        </View>
+      </View>
+      <Text style={styles.dates}>{dateText}</Text>
+    </View>
+  );
+}
+
+function getChipIcon(status: DisplayStatus): string {
+  switch (status) {
+    case 'APPROVED':
+      return '\u2713'; // ✓
+    case 'PENDING':
+    case 'PENDING_CHANGES':
+    case 'PENDING_REVOKE':
+      return '\u25F7'; // ◷
+    case 'DENIED':
+    case 'CANCELLED':
+      return '\u2717'; // ✗
+  }
+}

package/src/components/cards/LeaveCardList.tsx

@@ -0,0 +1,55 @@
+import { useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import type { LeaveListItem } from '@leave/core/hooks';
+import { useLeaveTheme } from '../../theme';
+import { LeaveCard } from './LeaveCard';
+
+interface LeaveCardListProps {
+  title: string;
+  items: readonly LeaveListItem[];
+}
+
+export function LeaveCardList({ title, items }: LeaveCardListProps) {
+  const { colors, spacing, typography } = useLeaveTheme();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          gap: spacing.sm,
+        },
+        header: {
+          fontSize: typography.caption.fontSize,
+          fontWeight: '600',
+          color: colors.textMuted,
+          textTransform: 'uppercase',
+          letterSpacing: 0.5,
+        },
+        list: {
+          gap: spacing.sm,
+        },
+      }),
+    [colors, spacing, typography]
+  );
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.header}>{title}</Text>
+      <View style={styles.list}>
+        {items.map(item => (
+          <LeaveCard
+            key={item.id}
+            typeName={item.typeName}
+            displayStatus={item.displayStatus}
+            localStartDate={item.localStartDate}
+            localEndDate={item.localEndDate}
+          />
+        ))}
+      </View>
+    </View>
+  );
+}

package/src/features/balance/components/BalanceTile.tsx

@@ -0,0 +1,28 @@
+import { View } from 'react-native';
+import { Card, Typography } from '../../../ui';
+import { useLeaveTheme } from '../../../theme';
+
+interface BalanceTileProps {
+  label: string;
+  value: number;
+  subtitle: string;
+}
+
+export function BalanceTile({ label, value, subtitle }: BalanceTileProps) {
+  const { spacing } = useLeaveTheme();
+  return (
+    <View style={{ flex: 1 }} accessibilityLabel={`${label}: ${value} ${subtitle}`}>
+      <Card>
+        <Typography variant="caption" style={{ textTransform: 'uppercase', letterSpacing: 1 }}>
+          {label}
+        </Typography>
+        <Typography variant="h2" style={{ marginTop: spacing.xs }}>
+          {String(value)}
+        </Typography>
+        <Typography variant="caption" style={{ marginTop: spacing.xxs }}>
+          {subtitle}
+        </Typography>
+      </Card>
+    </View>
+  );
+}

package/src/features/balance/components/BalanceTiles.tsx

@@ -0,0 +1,44 @@
+import { useBalance } from '@leave/core/hooks';
+import { useTranslation } from 'react-i18next';
+import { View } from 'react-native';
+import { useLeaveTheme } from '../../../theme';
+import { BalanceTile } from './BalanceTile';
+
+export function BalanceTiles() {
+  const { spacing } = useLeaveTheme();
+  const { t } = useTranslation();
+  const balance = useBalance();
+
+  if (!balance) return null;
+
+  return (
+    <View style={{ gap: spacing.sm }}>
+      <View style={{ flexDirection: 'row', gap: spacing.sm }}>
+        <BalanceTile
+          label={t('balance.remaining.label')}
+          value={balance.remaining}
+          subtitle={t('balance.remaining.subtitle')}
+        />
+        <BalanceTile
+          label={t('balance.spent.label')}
+          value={balance.spent}
+          subtitle={t('balance.spent.subtitle')}
+        />
+      </View>
+      {balance.saved != null && balance.unpaid != null && (
+        <View style={{ flexDirection: 'row', gap: spacing.sm }}>
+          <BalanceTile
+            label={t('balance.saved.label')}
+            value={balance.saved}
+            subtitle={t('balance.saved.subtitle')}
+          />
+          <BalanceTile
+            label={t('balance.unpaid.label')}
+            value={balance.unpaid}
+            subtitle={t('balance.unpaid.subtitle')}
+          />
+        </View>
+      )}
+    </View>
+  );
+}

package/src/features/balance/index.ts

@@ -0,0 +1 @@
+export { BalanceTiles } from './components/BalanceTiles';

package/src/features/history/components/LeaveHistory.tsx

@@ -0,0 +1,10 @@
+import { useTranslation } from 'react-i18next';
+import { useLeaveList } from '@leave/core/hooks';
+import { LeaveCardList } from '../../../components/cards/LeaveCardList';
+
+export function LeaveHistory() {
+  const { history } = useLeaveList();
+  const { t } = useTranslation();
+
+  return <LeaveCardList title={t('leave.history')} items={history} />;
+}

package/src/features/history/index.ts

@@ -0,0 +1 @@
+export { LeaveHistory } from './components/LeaveHistory';

package/src/features/index.ts

@@ -0,0 +1,3 @@
+export { BalanceTiles } from './balance';
+export { UpcomingLeaves } from './upcoming';
+export { LeaveHistory } from './history';

package/src/features/upcoming/components/UpcomingLeaves.tsx

@@ -0,0 +1,10 @@
+import { useTranslation } from 'react-i18next';
+import { useLeaveList } from '@leave/core/hooks';
+import { LeaveCardList } from '../../../components/cards/LeaveCardList';
+
+export function UpcomingLeaves() {
+  const { upcoming } = useLeaveList();
+  const { t } = useTranslation();
+
+  return <LeaveCardList title={t('leave.upcoming')} items={upcoming} />;
+}

package/src/features/upcoming/index.ts

@@ -0,0 +1 @@
+export { UpcomingLeaves } from './components/UpcomingLeaves';

package/src/index.ts

@@ -0,0 +1,8 @@
+export { LeaveScreen } from './screens/LeaveScreen';
+export type { LeaveScreenProps } from './screens/LeaveScreen';
+// Backwards compat
+export { LeaveScreen as TimeOffScreen } from './screens/LeaveScreen';
+export type { LeaveScreenProps as TimeOffScreenProps } from './screens/LeaveScreen';
+export { useLeaveTheme, LeaveThemeProvider, defaultLeaveTheme, darkLeaveTheme } from './theme';
+export type { LeaveTheme } from './theme';
+export * from './ui';

package/src/providers/LeaveProvider.tsx

@@ -0,0 +1,94 @@
+import { type ReactNode, useEffect, useState } from 'react';
+import { AppState, type AppStateStatus } from 'react-native';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { I18nextProvider } from 'react-i18next';
+import { initializeClient, resetClient } from '@leave/core';
+import { initLeaveI18n, getLeaveI18n, resetLeaveI18n } from '@leave/core/i18n';
+import { leaveQueries } from '@leave/core/queries';
+import { LeaveThemeProvider, type LeaveTheme } from '../theme';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000,
+      gcTime: 30 * 60 * 1000,
+      retry: 2,
+      refetchOnWindowFocus: false,
+    },
+    mutations: {
+      retry: 0,
+    },
+  },
+});
+
+export interface LeaveProviderProps {
+  children: ReactNode;
+  endpoint: string;
+  gatewayEndpoint?: string | undefined;
+  locale?: string | undefined;
+  getToken?: (() => Promise<string | null>) | undefined;
+  onAuthError?: (() => void) | undefined;
+  devToken?: string | undefined;
+  theme?: LeaveTheme | undefined;
+}
+
+export function LeaveProvider(props: LeaveProviderProps) {
+  const { children, endpoint, gatewayEndpoint, locale, getToken, onAuthError, devToken, theme } =
+    props;
+
+  const [initialized, setInitialized] = useState(false);
+  const [i18nReady, setI18nReady] = useState(false);
+
+  // Client initialization (ADR-011 singleton guard)
+  useEffect(() => {
+    initializeClient({ endpoint, gatewayEndpoint, getToken, onAuthError, devToken });
+    setInitialized(true);
+
+    return () => {
+      resetClient();
+      setInitialized(false);
+    };
+  }, [endpoint, gatewayEndpoint, getToken, onAuthError, devToken]);
+
+  // i18n initialization (ADR-011 singleton)
+  useEffect(() => {
+    let cancelled = false;
+
+    void initLeaveI18n(locale ?? 'en-GB').then(() => {
+      if (!cancelled) {
+        setI18nReady(true);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+      resetLeaveI18n();
+      setI18nReady(false);
+    };
+  }, [locale]);
+
+  // AppState foreground refetch — replaces missing window.focus in RN
+  useEffect(() => {
+    let previousState: AppStateStatus = AppState.currentState;
+
+    const subscription = AppState.addEventListener('change', (nextState: AppStateStatus) => {
+      if (previousState.match(/inactive|background/) && nextState === 'active') {
+        void queryClient.invalidateQueries({ queryKey: leaveQueries.all });
+      }
+      previousState = nextState;
+    });
+
+    return () => subscription.remove();
+  }, []);
+
+  // State gate — prevent children from rendering before singletons are ready
+  if (!initialized || !i18nReady) return null;
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <I18nextProvider i18n={getLeaveI18n()}>
+        <LeaveThemeProvider theme={theme}>{children}</LeaveThemeProvider>
+      </I18nextProvider>
+    </QueryClientProvider>
+  );
+}