@compsych/mobile-ui 1.0.9 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compsych/mobile-ui",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "ComPsych React Native Design System — 19 mobile UI components with self-contained design tokens",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -9,6 +9,12 @@
   "files": [
     "src"
   ],
+  "scripts": {
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "prepare": "husky"
+  },
   "keywords": [
     "react-native",
     "compsych",
@@ -16,11 +22,43 @@
     "components",
     "expo"
   ],
+  "lint-staged": {
+    "src/**/*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
   "license": "UNLICENSED",
   "peerDependencies": {
     "@expo/vector-icons": ">=15.0.0",
     "expo-font": ">=13.0.0",
     "react": ">=18.0.0",
-    "react-native": ">=0.73.0"
+    "react-native": ">=0.73.0",
+    "react-native-svg": ">=15.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/plugin-transform-flow-strip-types": "^7.27.1",
+    "@babel/preset-env": "^7.25.2",
+    "@babel/preset-react": "^7.25.2",
+    "@babel/preset-typescript": "^7.25.2",
+    "@react-native/jest-preset": "^0.85.3",
+    "@testing-library/react-native": "^13.0.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/jest": "^29.5.0",
+    "@types/react": "~19.1.0",
+    "@types/react-test-renderer": "^19.0.0",
+    "babel-jest": "^29.7.0",
+    "eslint": "^9.39.4",
+    "eslint-plugin-unused-imports": "^4.4.1",
+    "husky": "^9.1.7",
+    "jest": "^29.7.0",
+    "jest-expo": "^55.0.17",
+    "lint-staged": "^15.5.2",
+    "prettier": "^3.8.3",
+    "react": "^19.2.3",
+    "react-test-renderer": "^19.2.3",
+    "typescript": "~5.9.2",
+    "typescript-eslint": "^8.59.3"
   }
 }

package/src/components/ActionSheet/ActionSheet.test.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+
+import { Text } from 'react-native';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { ActionSheet } from './index';
+
+jest.mock('react-native/Libraries/Modal/Modal', () => {
+  const mockModal = ({
+    children,
+    visible,
+  }: {
+    children: any;
+    visible: boolean;
+  }) => {
+    const { View } = jest.requireActual('react-native');
+    const { createElement } = require('react');
+    return visible ? createElement(View, null, children) : null;
+  };
+  mockModal.displayName = 'Modal';
+  return { default: mockModal };
+});
+
+describe('ActionSheet', () => {
+  it('renders title when visible', () => {
+    const { getByText } = render(
+      <ActionSheet visible title="Choose an option" onClose={jest.fn()} />,
+    );
+    expect(getByText('Choose an option')).toBeTruthy();
+  });
+
+  it('does not render content when not visible', () => {
+    const { queryByText } = render(
+      <ActionSheet
+        visible={false}
+        title="Choose an option"
+        onClose={jest.fn()}
+      />,
+    );
+    expect(queryByText('Choose an option')).toBeNull();
+  });
+
+  it('calls onClose when close button is pressed', () => {
+    const onClose = jest.fn();
+    const { getByLabelText } = render(
+      <ActionSheet visible title="Options" onClose={onClose} />,
+    );
+    fireEvent.press(getByLabelText('Close'));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders primary action and handles press', () => {
+    const onPress = jest.fn();
+    const { getByText } = render(
+      <ActionSheet
+        visible
+        title="Options"
+        onClose={jest.fn()}
+        primaryAction={{ label: 'Confirm', onPress }}
+      />,
+    );
+    fireEvent.press(getByText('Confirm'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders secondary action and handles press', () => {
+    const onPress = jest.fn();
+    const { getByText } = render(
+      <ActionSheet
+        visible
+        title="Options"
+        onClose={jest.fn()}
+        secondaryAction={{ label: 'Cancel', onPress }}
+      />,
+    );
+    fireEvent.press(getByText('Cancel'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders children content', () => {
+    const { getByText } = render(
+      <ActionSheet visible title="Options" onClose={jest.fn()}>
+        <Text>Custom content</Text>
+      </ActionSheet>,
+    );
+    expect(getByText('Custom content')).toBeTruthy();
+  });
+});

package/src/{ActionSheet.tsx → components/ActionSheet/index.tsx}

@@ -1,15 +1,20 @@
 import React from 'react';
+
 import {
   Modal,
   Pressable,
   ScrollView,
+  StyleProp,
   StyleSheet,
   View,
+  ViewStyle,
 } from 'react-native';
+
 import { Ionicons } from '@expo/vector-icons';
-import { sys } from './tokens';
-import { HeaderText } from './HeaderText';
-import { Button } from './Button';
+
+import { sys } from '../../tokens';
+import { Button } from '../Button';
+import { HeaderText } from '../HeaderText';
 
 export interface ActionSheetAction {
   label: string;
@@ -23,9 +28,10 @@ export interface ActionSheetProps {
   children?: React.ReactNode;
   primaryAction?: ActionSheetAction;
   secondaryAction?: ActionSheetAction;
+  style?: StyleProp<ViewStyle>;
 }
 
-const { colorRoles: cr, dimensions: dim } = sys;
+const { colorRoles: cr } = sys;
 
 export function ActionSheet({
   visible,
@@ -34,6 +40,7 @@ export function ActionSheet({
   children,
   primaryAction,
   secondaryAction,
+  style,
 }: ActionSheetProps) {
   return (
     <Modal
@@ -47,9 +54,8 @@ export function ActionSheet({
       <Pressable style={styles.backdrop} onPress={onClose} accessible={false} />
 
       {/* Sheet */}
-      <View style={styles.sheetWrapper} pointerEvents="box-none">
+      <View style={[styles.sheetWrapper, style]} pointerEvents="box-none">
         <View style={styles.sheet}>
-
           {/* Toolbar */}
           <View style={styles.toolbar}>
             {/* Grabber */}
@@ -78,7 +84,10 @@ export function ActionSheet({
                 accessibilityLabel="Close"
                 style={({ pressed }) => [
                   styles.closeButton,
-                  { backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainer },
+                  {
+                    backgroundColor:
+                      cr.surface.surfaceContainer.sysSurfaceContainer,
+                  },
                   pressed && styles.closePresseed,
                 ]}
               >
@@ -125,7 +134,6 @@ export function ActionSheet({
               )}
             </View>
           )}
-
         </View>
       </View>
     </Modal>

package/src/components/Alert/Alert.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { Alert } from './index';
+
+describe('Alert', () => {
+  it('renders description text', () => {
+    const { getByText } = render(<Alert description="Something went wrong" />);
+    expect(getByText('Something went wrong')).toBeTruthy();
+  });
+
+  it('renders title when size is lg', () => {
+    const { getByText } = render(
+      <Alert size="lg" title="Heads up" description="Details here" />,
+    );
+    expect(getByText('Heads up')).toBeTruthy();
+  });
+
+  it('does not render title when size is sm', () => {
+    const { queryByText } = render(
+      <Alert size="sm" title="Heads up" description="Details here" />,
+    );
+    expect(queryByText('Heads up')).toBeNull();
+  });
+
+  it('calls onAction when action button is pressed', () => {
+    const onAction = jest.fn();
+    const { getByRole } = render(
+      <Alert description="Try again" actionLabel="Retry" onAction={onAction} />,
+    );
+    fireEvent.press(getByRole('button', { name: 'Retry' }));
+    expect(onAction).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onDismiss when dismiss button is pressed', () => {
+    const onDismiss = jest.fn();
+    const { getByRole } = render(
+      <Alert description="Dismissible" dismissible onDismiss={onDismiss} />,
+    );
+    fireEvent.press(getByRole('button', { name: 'Dismiss' }));
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it.each([
+    'default',
+    'elevated',
+    'informative',
+    'warning',
+    'positive',
+    'danger',
+  ] as const)('renders variant "%s" without crashing', (variant) => {
+    const { toJSON } = render(<Alert variant={variant} description="Test" />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('hides icon when hideIcon is true', () => {
+    const { toJSON } = render(<Alert description="No icon" hideIcon />);
+    expect(toJSON()).toBeTruthy();
+  });
+});

package/src/{Alert.tsx → components/Alert/index.tsx}

@@ -1,12 +1,17 @@
-import { Ionicons } from '@expo/vector-icons';
 import React from 'react';
+
 import {
   Pressable,
+  StyleProp,
   StyleSheet,
   Text,
   View,
+  ViewStyle,
 } from 'react-native';
-import { sys } from './tokens';
+
+import { Ionicons } from '@expo/vector-icons';
+
+import { sys } from '../../tokens';
 
 export type AlertVariant =
   | 'default'
@@ -35,6 +40,7 @@ export interface AlertProps {
   /** Show dismiss (×) button */
   dismissible?: boolean;
   onDismiss?: () => void;
+  style?: StyleProp<ViewStyle>;
 }
 
 const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
@@ -135,6 +141,7 @@ export function Alert({
   onAction,
   dismissible = false,
   onDismiss,
+  style,
 }: AlertProps) {
   const c = getVariantColors(variant);
   const isLg = size === 'lg';
@@ -162,6 +169,7 @@ export function Alert({
             : dim.borderRadius.sysRadiusMd,
         },
         c.elevated && styles.elevated,
+        style,
       ]}
     >
       {/* ── Content row ─────────────────────────────────────────────────── */}
@@ -229,8 +237,8 @@ export function Alert({
           </View>
 
           {/* Action button */}
-          {actionLabel && (
-            isLg ? (
+          {actionLabel &&
+            (isLg ? (
               // lg: pill button with white bg + shadow (or border for elevated)
               <Pressable
                 onPress={onAction}
@@ -274,8 +282,7 @@ export function Alert({
                   {actionLabel}
                 </Text>
               </Pressable>
-            )
-          )}
+            ))}
         </View>
 
         {/* Dismiss button */}
@@ -290,11 +297,7 @@ export function Alert({
               pressed && { opacity: 0.6 },
             ]}
           >
-            <Ionicons
-              name="close"
-              size={16}
-              color={c.iconColor}
-            />
+            <Ionicons name="close" size={16} color={c.iconColor} />
           </Pressable>
         )}
       </View>

package/src/components/Avatar/Avatar.test.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { render } from '@testing-library/react-native';
+
+import { Avatar } from './index';
+
+describe('Avatar', () => {
+  it('renders initials in text variant', () => {
+    const { getByText } = render(<Avatar variant="text" initials="CP" />);
+    expect(getByText('CP')).toBeTruthy();
+  });
+
+  it('renders image variant without crashing', () => {
+    const { getByLabelText } = render(
+      <Avatar
+        variant="image"
+        source={{ uri: 'https://example.com/avatar.jpg' }}
+        accessibilityLabel="User avatar"
+      />,
+    );
+    expect(getByLabelText('User avatar')).toBeTruthy();
+  });
+
+  it('renders icon variant without crashing', () => {
+    const { getByLabelText } = render(
+      <Avatar variant="icon" accessibilityLabel="Icon avatar" />,
+    );
+    expect(getByLabelText('Icon avatar')).toBeTruthy();
+  });
+
+  it.each(['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] as const)(
+    'renders size "%s" without crashing',
+    (size) => {
+      const { getByText } = render(
+        <Avatar variant="text" initials="AB" size={size} />,
+      );
+      expect(getByText('AB')).toBeTruthy();
+    },
+  );
+
+  it('renders activity ring when activityRing is true', () => {
+    const { getByLabelText } = render(
+      <Avatar
+        variant="text"
+        initials="CP"
+        activityRing
+        accessibilityLabel="Active user"
+      />,
+    );
+    expect(getByLabelText('Active user')).toBeTruthy();
+  });
+});

package/src/{Avatar.tsx → components/Avatar/index.tsx}

@@ -1,13 +1,18 @@
-import { Ionicons } from '@expo/vector-icons';
 import React from 'react';
+
 import {
   Image,
   ImageSourcePropType,
+  StyleProp,
   StyleSheet,
   Text,
   View,
+  ViewStyle,
 } from 'react-native';
-import { sys } from './tokens';
+
+import { Ionicons } from '@expo/vector-icons';
+
+import { sys } from '../../tokens';
 
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
 export type AvatarVariant = 'text' | 'image' | 'icon';
@@ -27,6 +32,7 @@ export interface AvatarProps {
   presenceBadge?: boolean;
   /** Accessible label announced by screen readers */
   accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
 }
 
 const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
@@ -127,12 +133,12 @@ export function Avatar({
   activityRing = false,
   presenceBadge = false,
   accessibilityLabel,
+  style,
 }: AvatarProps) {
   const s = SIZE_TOKENS[size];
   const r = s.diameter / 2;
 
-  const defaultLabel =
-    variant === 'text' ? `Avatar: ${initials}` : 'Avatar';
+  const defaultLabel = variant === 'text' ? `Avatar: ${initials}` : 'Avatar';
 
   return (
     // Outer wrapper — same footprint as avatar, does NOT clip so ring/badge
@@ -141,9 +147,8 @@ export function Avatar({
       accessible
       accessibilityRole="image"
       accessibilityLabel={accessibilityLabel ?? defaultLabel}
-      style={{ width: s.diameter, height: s.diameter }}
+      style={[{ width: s.diameter, height: s.diameter }, style]}
     >
-
       {/* ── Avatar circle ─────────────────────────────────────────────── */}
       <View
         style={[
@@ -153,9 +158,7 @@ export function Avatar({
             height: s.diameter,
             borderRadius: r,
             backgroundColor:
-              variant !== 'image'
-                ? cr.custom.info.sysInfoContainer
-                : undefined,
+              variant !== 'image' ? cr.custom.info.sysInfoContainer : undefined,
           },
         ]}
       >
@@ -183,15 +186,14 @@ export function Avatar({
           />
         )}
 
-        {variant === 'icon' && (
-          icon ?? (
+        {variant === 'icon' &&
+          (icon ?? (
             <Ionicons
               name="person"
               size={s.iconSize}
               color={cr.custom.info.sysOnInfoContainer}
             />
-          )
-        )}
+          ))}
       </View>
 
       {/* ── Activity ring ─────────────────────────────────────────────── */}

package/src/components/Badge/Badge.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { render } from '@testing-library/react-native';
+
+import { Badge } from './index';
+
+describe('Badge', () => {
+  it('renders label text', () => {
+    const { getByText } = render(<Badge label="New" />);
+    expect(getByText('New')).toBeTruthy();
+  });
+
+  it.each(['sm', 'md', 'lg'] as const)(
+    'renders size "%s" without crashing',
+    (size) => {
+      const { getByText } = render(<Badge label="Badge" size={size} />);
+      expect(getByText('Badge')).toBeTruthy();
+    },
+  );
+
+  it.each(['filled', 'positive', 'danger', 'elevated', 'tonal'] as const)(
+    'renders style "%s" without crashing',
+    (badgeStyle) => {
+      const { getByText } = render(
+        <Badge label="Badge" badgeStyle={badgeStyle} />,
+      );
+      expect(getByText('Badge')).toBeTruthy();
+    },
+  );
+});

package/src/{Badge.tsx → components/Badge/index.tsx}

@@ -1,6 +1,8 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { sys } from './tokens';
+
+import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
+
+import { sys } from '../../tokens';
 
 export type BadgeSize = 'sm' | 'md' | 'lg';
 export type BadgeStyle =
@@ -16,6 +18,7 @@ export interface BadgeProps {
   label?: number | string;
   size?: BadgeSize;
   badgeStyle?: BadgeStyle;
+  style?: StyleProp<ViewStyle>;
 }
 
 const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
@@ -105,6 +108,7 @@ export function Badge({
   label,
   size = 'md',
   badgeStyle = 'filled',
+  style,
 }: BadgeProps) {
   const s = SIZE_TOKENS[size];
   const c = getStyleColors(badgeStyle);
@@ -114,13 +118,16 @@ export function Badge({
     return (
       <View
         accessible={false}
-        style={{
-          width: s.outerSize,
-          height: s.outerSize,
-          borderRadius: s.outerSize / 2,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
+        style={[
+          {
+            width: s.outerSize,
+            height: s.outerSize,
+            borderRadius: s.outerSize / 2,
+            alignItems: 'center',
+            justifyContent: 'center',
+          },
+          style,
+        ]}
       >
         <View
           style={{
@@ -152,6 +159,7 @@ export function Badge({
           backgroundColor: c.bg,
         },
         c.elevated && styles.elevated,
+        style,
       ]}
     >
       <Text

package/src/components/BodyText/BodyText.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { render } from '@testing-library/react-native';
+
+import { BodyText } from './index';
+
+describe('BodyText', () => {
+  it('renders children', () => {
+    const { getByText } = render(<BodyText>Hello world</BodyText>);
+    expect(getByText('Hello world')).toBeTruthy();
+  });
+
+  it.each(['small', 'medium', 'large', 'labelMedium', 'labelLarge'] as const)(
+    'renders variant "%s" without crashing',
+    (variant) => {
+      const { getByText } = render(<BodyText variant={variant}>Text</BodyText>);
+      expect(getByText('Text')).toBeTruthy();
+    },
+  );
+
+  it('applies custom color', () => {
+    const { getByText } = render(<BodyText color="#ff0000">Colored</BodyText>);
+    expect(getByText('Colored')).toBeTruthy();
+  });
+
+  it('renders emphasized text', () => {
+    const { getByText } = render(<BodyText emphasized>Bold</BodyText>);
+    expect(getByText('Bold')).toBeTruthy();
+  });
+});

package/src/{BodyText.tsx → components/BodyText/index.tsx}

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import { Text, type TextProps } from 'react-native';
+
 import { useFonts } from 'expo-font';
 
-import { sys } from './tokens';
+import { sys } from '../../tokens';
 
 export type BodyVariant =
   | 'large'
@@ -43,13 +45,15 @@ export function BodyText({
   ...rest
 }: BodyTextProps) {
   const [fontsLoaded] = useFonts({
-    GoogleSans_400Regular: require('./fonts/GoogleSans_400Regular.ttf'),
-    GoogleSans_500Medium: require('./fonts/GoogleSans_500Medium.ttf'),
-    GoogleSans_600SemiBold: require('./fonts/GoogleSans_600SemiBold.ttf'),
+    GoogleSans_400Regular: require('../../fonts/GoogleSans_400Regular.ttf'),
+    GoogleSans_500Medium: require('../../fonts/GoogleSans_500Medium.ttf'),
+    GoogleSans_600SemiBold: require('../../fonts/GoogleSans_600SemiBold.ttf'),
   });
 
   const token = ts[VARIANT_TOKEN_KEY[variant]];
-  const weight = emphasized ? token.sysFontWeightEmphasized : token.sysFontWeight;
+  const weight = emphasized
+    ? token.sysFontWeightEmphasized
+    : token.sysFontWeight;
 
   return (
     <Text