@alexisapp/leave-mobile 0.0.1-beta.1

package/src/screens/LeaveScreen.tsx

@@ -0,0 +1,58 @@
+import { useMemo } from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+import { ElementBoundary } from '../components/ElementBoundary';
+import { BalanceTiles, LeaveHistory, UpcomingLeaves } from '../features';
+import { LeaveProvider } from '../providers/LeaveProvider';
+import { useLeaveTheme, type LeaveTheme } from '../theme';
+
+export interface LeaveScreenProps {
+  endpoint: string;
+  gatewayEndpoint?: string | undefined;
+  locale?: string | undefined;
+  getToken?: (() => Promise<string | null>) | undefined;
+  onAuthError?: (() => void) | undefined;
+  devToken?: string | undefined;
+  theme?: LeaveTheme | undefined;
+  onDismiss: () => void;
+  onError?: ((error: { code: string; message: string }) => void) | undefined;
+}
+
+export function LeaveScreen(props: LeaveScreenProps) {
+  const { endpoint, onDismiss, onError, ...providerProps } = props;
+
+  return (
+    <LeaveProvider endpoint={endpoint} {...providerProps}>
+      <LeaveScreenContent onDismiss={onDismiss} onError={onError} />
+    </LeaveProvider>
+  );
+}
+
+function LeaveScreenContent({
+  onDismiss,
+  onError,
+}: Pick<LeaveScreenProps, 'onDismiss' | 'onError'>) {
+  const { colors, spacing } = useLeaveTheme();
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: { flex: 1, width: '100%', backgroundColor: colors.background },
+        content: { gap: spacing.xxxl, paddingHorizontal: spacing.xxs },
+      }),
+    [colors, spacing]
+  );
+
+  return (
+    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+      <ElementBoundary onDismiss={onDismiss} onError={onError}>
+        <BalanceTiles />
+      </ElementBoundary>
+      <ElementBoundary onDismiss={onDismiss} onError={onError}>
+        <UpcomingLeaves />
+      </ElementBoundary>
+      <ElementBoundary onDismiss={onDismiss} onError={onError}>
+        <LeaveHistory />
+      </ElementBoundary>
+    </ScrollView>
+  );
+}

package/src/screens/index.ts

@@ -0,0 +1,2 @@
+export { LeaveScreen } from './LeaveScreen';
+export type { LeaveScreenProps } from './LeaveScreen';

package/src/theme/LeaveThemeContext.tsx

@@ -0,0 +1,21 @@
+import { createContext, useContext, type ReactNode } from 'react';
+import { defaultLeaveTheme, type LeaveTheme } from './tokens';
+
+const LeaveThemeContext = createContext<LeaveTheme>(defaultLeaveTheme);
+
+export interface LeaveThemeProviderProps {
+  theme?: LeaveTheme | undefined;
+  children: ReactNode;
+}
+
+export function LeaveThemeProvider({ theme, children }: LeaveThemeProviderProps) {
+  return (
+    <LeaveThemeContext.Provider value={theme ?? defaultLeaveTheme}>
+      {children}
+    </LeaveThemeContext.Provider>
+  );
+}
+
+export function useLeaveTheme(): LeaveTheme {
+  return useContext(LeaveThemeContext);
+}

package/src/theme/index.ts

@@ -0,0 +1,12 @@
+export { LeaveThemeProvider, useLeaveTheme } from './LeaveThemeContext';
+export type { LeaveThemeProviderProps } from './LeaveThemeContext';
+export { defaultLeaveTheme, darkLeaveTheme } from './tokens';
+export type {
+  LeaveTheme,
+  LeaveColorTokens,
+  LeaveSpacingTokens,
+  LeaveRadiusTokens,
+  LeaveTypographyTokens,
+  LeaveOpacityTokens,
+  TypographyStyle,
+} from './tokens';

package/src/theme/tokens.ts

@@ -0,0 +1,211 @@
+export interface TypographyStyle {
+  fontSize: number;
+  fontWeight: '400' | '500' | '600' | '700' | '800' | 'normal' | 'bold';
+  lineHeight?: number | undefined;
+}
+
+export interface LeaveColorTokens {
+  primary: string;
+  onPrimary: string;
+  primarySurface: string;
+  surface: string;
+  surfaceSecondary: string;
+  background: string;
+  textPrimary: string;
+  textSecondary: string;
+  textTertiary: string;
+  textMuted: string;
+  textPlaceholder: string;
+  border: string;
+  borderLight: string;
+  shadow: string;
+  overlay: string;
+  overlayLight: string;
+  disabled: string;
+  transparent: string;
+  error: string;
+  success: string;
+  warning: string;
+  info: string;
+  errorSurface: string;
+  errorBorder: string;
+  successSurface: string;
+  successBorder: string;
+  warningSurface: string;
+  warningBorder: string;
+  infoSurface: string;
+  infoBorder: string;
+}
+
+export interface LeaveSpacingTokens {
+  xxs: number;
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  xxl: number;
+  xxxl: number;
+}
+
+export interface LeaveRadiusTokens {
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+}
+
+export interface LeaveTypographyTokens {
+  h1: TypographyStyle;
+  h2: TypographyStyle;
+  h3: TypographyStyle;
+  body: TypographyStyle;
+  bodySmall: TypographyStyle;
+  caption: TypographyStyle;
+  label: TypographyStyle;
+}
+
+export interface LeaveOpacityTokens {
+  disabled: number;
+  activePress: number;
+  shadowLight: number;
+  shadowMedium: number;
+}
+
+export interface LeaveTheme {
+  colors: LeaveColorTokens;
+  spacing: LeaveSpacingTokens;
+  radius: LeaveRadiusTokens;
+  typography: LeaveTypographyTokens;
+  opacity: LeaveOpacityTokens;
+  avatarPalette: string[];
+}
+
+export const defaultLeaveTheme: LeaveTheme = {
+  colors: {
+    primary: '#6366f1',
+    onPrimary: '#ffffff',
+    primarySurface: '#eef2ff',
+    surface: '#ffffff',
+    surfaceSecondary: '#f1f5f9',
+    background: '#f8fafc',
+    textPrimary: '#0f172a',
+    textSecondary: '#1e293b',
+    textTertiary: '#334155',
+    textMuted: '#64748b',
+    textPlaceholder: '#94a3b8',
+    border: '#cbd5e1',
+    borderLight: '#e2e8f0',
+    shadow: '#000000',
+    overlay: 'rgba(0,0,0,0.5)',
+    overlayLight: 'rgba(0,0,0,0.2)',
+    disabled: '#94a3b8',
+    transparent: 'transparent',
+    error: '#ef4444',
+    success: '#22c55e',
+    warning: '#f59e0b',
+    info: '#3b82f6',
+    errorSurface: '#fef2f2',
+    errorBorder: '#fecaca',
+    successSurface: '#f0fdf4',
+    successBorder: '#bbf7d0',
+    warningSurface: '#fffbeb',
+    warningBorder: '#fde68a',
+    infoSurface: '#eff6ff',
+    infoBorder: '#bfdbfe',
+  },
+  spacing: { xxs: 2, xs: 4, sm: 8, md: 12, lg: 16, xl: 20, xxl: 24, xxxl: 32 },
+  radius: { xs: 4, sm: 6, md: 8, lg: 12, xl: 16 },
+  typography: {
+    h1: { fontSize: 32, fontWeight: '800' },
+    h2: { fontSize: 24, fontWeight: '700' },
+    h3: { fontSize: 20, fontWeight: '700' },
+    body: { fontSize: 16, fontWeight: '400', lineHeight: 24 },
+    bodySmall: { fontSize: 14, fontWeight: '400', lineHeight: 22 },
+    caption: { fontSize: 12, fontWeight: '400' },
+    label: { fontSize: 14, fontWeight: '500' },
+  },
+  opacity: {
+    disabled: 0.5,
+    activePress: 0.7,
+    shadowLight: 0.1,
+    shadowMedium: 0.15,
+  },
+  avatarPalette: [
+    '#6366f1',
+    '#8b5cf6',
+    '#ec4899',
+    '#f43f5e',
+    '#f97316',
+    '#eab308',
+    '#22c55e',
+    '#14b8a6',
+    '#06b6d4',
+    '#3b82f6',
+  ],
+};
+
+export const darkLeaveTheme: LeaveTheme = {
+  colors: {
+    primary: '#818cf8',
+    onPrimary: '#1e1b4b',
+    primarySurface: '#312e81',
+    surface: '#1f2937',
+    surfaceSecondary: '#374151',
+    background: '#111827',
+    textPrimary: '#f9fafb',
+    textSecondary: '#e5e7eb',
+    textTertiary: '#d1d5db',
+    textMuted: '#9ca3af',
+    textPlaceholder: '#6b7280',
+    border: '#4b5563',
+    borderLight: '#374151',
+    shadow: '#000000',
+    overlay: 'rgba(0,0,0,0.7)',
+    overlayLight: 'rgba(0,0,0,0.4)',
+    disabled: '#6b7280',
+    transparent: 'transparent',
+    error: '#f87171',
+    success: '#34d399',
+    warning: '#fbbf24',
+    info: '#60a5fa',
+    errorSurface: '#450a0a',
+    errorBorder: '#7f1d1d',
+    successSurface: '#052e16',
+    successBorder: '#14532d',
+    warningSurface: '#451a03',
+    warningBorder: '#78350f',
+    infoSurface: '#172554',
+    infoBorder: '#1e3a5f',
+  },
+  spacing: { xxs: 2, xs: 4, sm: 8, md: 12, lg: 16, xl: 20, xxl: 24, xxxl: 32 },
+  radius: { xs: 4, sm: 6, md: 8, lg: 12, xl: 16 },
+  typography: {
+    h1: { fontSize: 32, fontWeight: '800' },
+    h2: { fontSize: 24, fontWeight: '700' },
+    h3: { fontSize: 20, fontWeight: '700' },
+    body: { fontSize: 16, fontWeight: '400', lineHeight: 24 },
+    bodySmall: { fontSize: 14, fontWeight: '400', lineHeight: 22 },
+    caption: { fontSize: 12, fontWeight: '400' },
+    label: { fontSize: 14, fontWeight: '500' },
+  },
+  opacity: {
+    disabled: 0.5,
+    activePress: 0.7,
+    shadowLight: 0.1,
+    shadowMedium: 0.15,
+  },
+  avatarPalette: [
+    '#818cf8',
+    '#a78bfa',
+    '#f472b6',
+    '#fb7185',
+    '#fb923c',
+    '#facc15',
+    '#34d399',
+    '#2dd4bf',
+    '#22d3ee',
+    '#60a5fa',
+  ],
+};

package/src/ui/components/Button.tsx

@@ -0,0 +1,107 @@
+import React, { useMemo } from 'react';
+import { TouchableOpacity, Text, ActivityIndicator } from 'react-native';
+import type { ViewStyle, TextStyle } from 'react-native';
+import { useTheme } from '../theme';
+
+interface ButtonProps {
+  children?: React.ReactNode;
+  title?: string;
+  onPress?: () => void;
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'outline';
+  size?: 'small' | 'medium' | 'large';
+  disabled?: boolean;
+  loading?: boolean;
+  leadingIcon?: React.ReactNode;
+  trailingIcon?: React.ReactNode;
+  style?: ViewStyle;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  title,
+  children,
+  onPress,
+  variant = 'primary',
+  size = 'medium',
+  disabled = false,
+  loading = false,
+  leadingIcon,
+  trailingIcon,
+  style,
+}) => {
+  const { colors, spacing, radius, typography, opacity } = useTheme();
+  const label = children ?? title ?? '';
+  const isDisabled = disabled || loading;
+  const hasLabel = label !== '';
+
+  const s = useMemo(() => {
+    const base: ViewStyle = {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: radius.md,
+      gap: spacing.xs,
+    };
+    const sizes: Record<string, ViewStyle> = {
+      small: { paddingHorizontal: spacing.md, paddingVertical: 6 },
+      medium: { paddingHorizontal: spacing.lg, paddingVertical: 10 },
+      large: { paddingHorizontal: spacing.xxl, paddingVertical: 14 },
+    };
+    const variants: Record<string, ViewStyle> = {
+      primary: { backgroundColor: colors.primary },
+      secondary: { backgroundColor: colors.surfaceSecondary },
+      tertiary: { backgroundColor: colors.transparent },
+      outline: {
+        backgroundColor: colors.transparent,
+        borderWidth: 2,
+        borderColor: colors.primary,
+      },
+    };
+    const textVariants: Record<string, TextStyle> = {
+      primary: { color: colors.onPrimary },
+      secondary: { color: colors.textTertiary },
+      tertiary: { color: colors.primary },
+      outline: { color: colors.primary },
+    };
+    return { base, sizes, variants, textVariants };
+  }, [colors, spacing, radius]);
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={isDisabled}
+      style={[
+        s.base,
+        s.sizes[size],
+        s.variants[variant],
+        isDisabled && { opacity: opacity.disabled },
+        style,
+      ]}
+      activeOpacity={opacity.activePress}
+    >
+      {loading ? (
+        <ActivityIndicator
+          color={variant === 'primary' ? colors.onPrimary : colors.primary}
+          size="small"
+        />
+      ) : (
+        <>
+          {leadingIcon}
+          {hasLabel && (
+            <Text
+              style={[
+                {
+                  fontSize: typography.bodySmall.fontSize,
+                  fontWeight: '600' as const,
+                },
+                s.textVariants[variant],
+              ]}
+            >
+              {label}
+            </Text>
+          )}
+          {trailingIcon}
+        </>
+      )}
+    </TouchableOpacity>
+  );
+};

package/src/ui/components/Card.tsx

@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+import { View, Text, ViewStyle, TextStyle } from 'react-native';
+import { useTheme } from '../theme';
+
+interface CardProps {
+  title?: string;
+  children?: React.ReactNode;
+}
+
+export const Card: React.FC<CardProps> = ({ title, children }) => {
+  const { colors, spacing, radius, opacity } = useTheme();
+
+  const s = useMemo(
+    () => ({
+      container: {
+        backgroundColor: colors.surface,
+        borderRadius: radius.lg,
+        padding: spacing.md,
+        shadowColor: colors.shadow,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: opacity.shadowLight,
+        shadowRadius: 4,
+        elevation: 1,
+      } as ViewStyle,
+      title: {
+        fontSize: 18,
+        fontWeight: '700' as const,
+        color: colors.textSecondary,
+        marginBottom: spacing.md,
+      } as TextStyle,
+    }),
+    [colors, spacing, radius, opacity]
+  );
+
+  return (
+    <View style={s.container}>
+      {title && <Text style={s.title}>{title}</Text>}
+      <View>{children}</View>
+    </View>
+  );
+};

package/src/ui/components/DatePicker.tsx

@@ -0,0 +1,220 @@
+import React, { useState, useMemo } from 'react';
+import { View, Text, TouchableOpacity, Modal, ViewStyle, TextStyle } from 'react-native';
+import { useTheme } from '../theme';
+
+interface DatePickerProps {
+  id?: string;
+  label?: string;
+  placeholder?: string;
+  value?: Date;
+  onChange?: (date: Date | undefined) => void;
+  required?: boolean;
+  disabled?: boolean;
+  style?: ViewStyle;
+}
+
+const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+export const DatePicker: React.FC<DatePickerProps> = ({
+  label,
+  placeholder,
+  value,
+  onChange,
+  required = false,
+  disabled = false,
+  style,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [viewDate, setViewDate] = useState(value ?? new Date());
+  const { colors, spacing, radius, typography, opacity } = useTheme();
+
+  const displayValue = value
+    ? `${value.getFullYear()}-${String(value.getMonth() + 1).padStart(2, '0')}-${String(value.getDate()).padStart(2, '0')}`
+    : undefined;
+
+  const year = viewDate.getFullYear();
+  const month = viewDate.getMonth();
+  const firstDay = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+
+  const cells: (number | null)[] = [
+    ...Array(firstDay).fill(null),
+    ...Array.from({ length: daysInMonth }, (_, i) => i + 1),
+  ];
+
+  const handleDayPress = (day: number) => {
+    const selected = new Date(year, month, day);
+    onChange?.(selected);
+    setIsOpen(false);
+  };
+
+  const prevMonth = () => setViewDate(new Date(year, month - 1, 1));
+  const nextMonth = () => setViewDate(new Date(year, month + 1, 1));
+
+  const s = useMemo(
+    () => ({
+      container: { gap: spacing.xs } as ViewStyle,
+      label: { ...typography.label, color: colors.textSecondary } as TextStyle,
+      required: { color: colors.error } as TextStyle,
+      trigger: {
+        flexDirection: 'row' as const,
+        justifyContent: 'space-between' as const,
+        alignItems: 'center' as const,
+        borderWidth: 1,
+        borderColor: colors.border,
+        borderRadius: radius.md,
+        paddingHorizontal: spacing.md,
+        paddingVertical: 10,
+        backgroundColor: colors.surface,
+      } as ViewStyle,
+      triggerDisabled: { backgroundColor: colors.surfaceSecondary } as ViewStyle,
+      triggerText: {
+        fontSize: typography.bodySmall.fontSize,
+        color: colors.textPrimary,
+        flex: 1,
+      } as TextStyle,
+      placeholder: { color: colors.textPlaceholder } as TextStyle,
+      icon: { fontSize: typography.body.fontSize } as TextStyle,
+      overlay: {
+        flex: 1,
+        backgroundColor: colors.overlayLight,
+        justifyContent: 'center' as const,
+        padding: spacing.xxl,
+      } as ViewStyle,
+      calendar: {
+        backgroundColor: colors.surface,
+        borderRadius: radius.lg,
+        padding: spacing.lg,
+        shadowColor: colors.shadow,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: opacity.shadowMedium,
+        shadowRadius: 12,
+        elevation: 8,
+      } as ViewStyle,
+      header: {
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'space-between' as const,
+        marginBottom: spacing.md,
+      } as ViewStyle,
+      navBtn: { padding: spacing.sm } as ViewStyle,
+      navText: { fontSize: 20, color: colors.primary, fontWeight: '600' as const } as TextStyle,
+      monthLabel: {
+        fontSize: 15,
+        fontWeight: '600' as const,
+        color: colors.textSecondary,
+      } as TextStyle,
+      grid: { flexDirection: 'row' as const, flexWrap: 'wrap' as const } as ViewStyle,
+      dayHeader: {
+        width: '14.28%' as unknown as number,
+        textAlign: 'center' as const,
+        fontSize: typography.caption.fontSize,
+        color: colors.textMuted,
+        paddingVertical: spacing.xs,
+      } as TextStyle,
+      cell: {
+        width: '14.28%' as unknown as number,
+        alignItems: 'center' as const,
+        paddingVertical: 6,
+        borderRadius: radius.sm,
+      } as ViewStyle,
+      cellSelected: { backgroundColor: colors.primary } as ViewStyle,
+      cellText: { fontSize: typography.bodySmall.fontSize, color: colors.textPrimary } as TextStyle,
+      cellTextSelected: { color: colors.onPrimary, fontWeight: '600' as const } as TextStyle,
+      cellEmpty: { color: colors.transparent } as TextStyle,
+      clearBtn: {
+        marginTop: spacing.md,
+        alignItems: 'center' as const,
+        paddingVertical: spacing.sm,
+      } as ViewStyle,
+      clearText: { color: colors.primary, fontSize: typography.bodySmall.fontSize } as TextStyle,
+    }),
+    [colors, spacing, radius, typography, opacity]
+  );
+
+  return (
+    <View style={[s.container, style]}>
+      {label && (
+        <Text style={s.label}>
+          {label}
+          {required && <Text style={s.required}> *</Text>}
+        </Text>
+      )}
+      <TouchableOpacity
+        style={[s.trigger, disabled && s.triggerDisabled]}
+        onPress={() => !disabled && setIsOpen(true)}
+        activeOpacity={opacity.activePress}
+      >
+        <Text style={[s.triggerText, !displayValue && s.placeholder]}>
+          {displayValue ?? placeholder ?? 'Pick a date'}
+        </Text>
+        <Text style={s.icon}>📅</Text>
+      </TouchableOpacity>
+
+      <Modal
+        visible={isOpen}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setIsOpen(false)}
+      >
+        <TouchableOpacity style={s.overlay} activeOpacity={1} onPress={() => setIsOpen(false)}>
+          <View style={s.calendar} onStartShouldSetResponder={() => true}>
+            <View style={s.header}>
+              <TouchableOpacity onPress={prevMonth} style={s.navBtn}>
+                <Text style={s.navText}>‹</Text>
+              </TouchableOpacity>
+              <Text style={s.monthLabel}>
+                {MONTHS[month]} {year}
+              </Text>
+              <TouchableOpacity onPress={nextMonth} style={s.navBtn}>
+                <Text style={s.navText}>›</Text>
+              </TouchableOpacity>
+            </View>
+            <View style={s.grid}>
+              {DAYS.map((d) => (
+                <Text key={d} style={s.dayHeader}>
+                  {d}
+                </Text>
+              ))}
+              {cells.map((day, i) => {
+                const isSelected =
+                  day !== null &&
+                  value?.getFullYear() === year &&
+                  value?.getMonth() === month &&
+                  value?.getDate() === day;
+                return (
+                  <TouchableOpacity
+                    key={i}
+                    style={[s.cell, isSelected && s.cellSelected]}
+                    onPress={() => day !== null && handleDayPress(day)}
+                    disabled={day === null}
+                  >
+                    <Text
+                      style={[
+                        s.cellText,
+                        isSelected && s.cellTextSelected,
+                        day === null && s.cellEmpty,
+                      ]}
+                    >
+                      {day ?? ''}
+                    </Text>
+                  </TouchableOpacity>
+                );
+              })}
+            </View>
+            <TouchableOpacity
+              style={s.clearBtn}
+              onPress={() => {
+                onChange?.(undefined);
+                setIsOpen(false);
+              }}
+            >
+              <Text style={s.clearText}>Clear</Text>
+            </TouchableOpacity>
+          </View>
+        </TouchableOpacity>
+      </Modal>
+    </View>
+  );
+};