@compsych/mobile-ui 1.0.8 → 1.0.10

package/src/components/ScreenContainer/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { ScrollView, type ScrollViewProps } from 'react-native';
+
+import { sys } from '../../tokens';
+
+const { dimensions: dim, colorRoles: cr } = sys;
+
+export interface ScreenContainerProps extends ScrollViewProps {
+  children?: React.ReactNode;
+}
+
+export function ScreenContainer({
+  children,
+  style,
+  contentContainerStyle,
+  ...rest
+}: ScreenContainerProps) {
+  return (
+    <ScrollView
+      style={[
+        {
+          flex: 1,
+          backgroundColor:
+            cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+        },
+        style,
+      ]}
+      contentContainerStyle={[
+        {
+          paddingHorizontal: dim.spacing.padding.sysPadding16,
+          paddingVertical: dim.spacing.padding.sysPadding8,
+        },
+        contentContainerStyle,
+      ]}
+      {...rest}
+    >
+      {children}
+    </ScrollView>
+  );
+}

package/src/components/SegmentedControl/SegmentedControl.test.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { SegmentedControl } from './index';
+
+const options = [
+  { value: 'day', label: 'Day' },
+  { value: 'week', label: 'Week' },
+  { value: 'month', label: 'Month' },
+];
+
+describe('SegmentedControl', () => {
+  it('renders all option labels', () => {
+    const { getByText } = render(
+      <SegmentedControl options={options} value="day" onChange={jest.fn()} />,
+    );
+    expect(getByText('Day')).toBeTruthy();
+    expect(getByText('Week')).toBeTruthy();
+    expect(getByText('Month')).toBeTruthy();
+  });
+
+  it('calls onChange with the tapped option value', () => {
+    const onChange = jest.fn();
+    const { getByText } = render(
+      <SegmentedControl options={options} value="day" onChange={onChange} />,
+    );
+    fireEvent.press(getByText('Week'));
+    expect(onChange).toHaveBeenCalledWith('week');
+  });
+
+  it('does not call onChange for a disabled option', () => {
+    const onChange = jest.fn();
+    const disabledOptions = [
+      { value: 'a', label: 'A' },
+      { value: 'b', label: 'B', disabled: true },
+    ];
+    const { getByText } = render(
+      <SegmentedControl
+        options={disabledOptions}
+        value="a"
+        onChange={onChange}
+      />,
+    );
+    fireEvent.press(getByText('B'));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('renders full width when fullWidth is true', () => {
+    const { toJSON } = render(
+      <SegmentedControl
+        options={options}
+        value="day"
+        onChange={jest.fn()}
+        fullWidth
+      />,
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+});

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

@@ -1,7 +1,15 @@
 import React from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
-import { sys } from './tokens';
-import { BodyText } from './BodyText';
+
+import {
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import { sys } from '../../tokens';
+import { BodyText } from '../BodyText';
 
 export interface SegmentedControlOption {
   value: string;
@@ -15,6 +23,7 @@ export interface SegmentedControlProps {
   value: string;
   onChange: (value: string) => void;
   fullWidth?: boolean;
+  style?: StyleProp<ViewStyle>;
 }
 
 const { colorRoles: cr, dimensions: dim } = sys;
@@ -24,9 +33,10 @@ export function SegmentedControl({
   value,
   onChange,
   fullWidth = false,
+  style,
 }: SegmentedControlProps) {
   return (
-    <View style={[styles.container, fullWidth && styles.fullWidth]}>
+    <View style={[styles.container, fullWidth && styles.fullWidth, style]}>
       {options.map((option) => {
         const isActive = option.value === value;
         const isDisabled = option.disabled ?? false;
@@ -51,9 +61,7 @@ export function SegmentedControl({
               isDisabled && styles.disabled,
             ]}
           >
-            {option.icon && (
-              <View style={styles.iconSlot}>{option.icon}</View>
-            )}
+            {option.icon && <View style={styles.iconSlot}>{option.icon}</View>}
             <BodyText
               variant="small"
               emphasized={isActive}

package/src/components/SelectionCard/SelectionCard.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { SelectionCard } from './index';
+
+describe('SelectionCard', () => {
+  it('renders title', () => {
+    const { getByText } = render(<SelectionCard title="Option A" />);
+    expect(getByText('Option A')).toBeTruthy();
+  });
+
+  it('calls onPress when tapped', () => {
+    const onPress = jest.fn();
+    const { getByText } = render(
+      <SelectionCard title="Option A" onPress={onPress} />,
+    );
+    fireEvent.press(getByText('Option A'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders disabled state', () => {
+    const { toJSON } = render(<SelectionCard title="Option A" disabled />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it.each(['sm', 'md'] as const)(
+    'renders size "%s" without crashing',
+    (size) => {
+      const { getByText } = render(
+        <SelectionCard title="Option" size={size} />,
+      );
+      expect(getByText('Option')).toBeTruthy();
+    },
+  );
+
+  it('renders selected state', () => {
+    const { toJSON } = render(<SelectionCard title="Selected" selected />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('renders multi-select variant', () => {
+    const { toJSON } = render(
+      <SelectionCard title="Multi" multiSelect selected />,
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+});

package/src/components/SelectionCard/index.tsx

@@ -0,0 +1,213 @@
+import React from 'react';
+
+import {
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import { Ionicons } from '@expo/vector-icons';
+
+import { ICON_MAP, type IconName } from '../../icons';
+import { sys } from '../../tokens';
+import { BodyText } from '../BodyText';
+import { HeaderText } from '../HeaderText';
+
+export type SelectionCardSize = 'sm' | 'md';
+
+export interface SelectionCardProps {
+  title: string;
+  icon?: IconName;
+  size?: SelectionCardSize;
+  multiSelect?: boolean;
+  selected?: boolean;
+  disabled?: boolean;
+  onPress?: () => void;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const { colorRoles: cr, dimensions: dim } = sys;
+
+const SELECTED_RING = {
+  shadowColor: cr.accent.primary.sysPrimary,
+  shadowOffset: { width: 1, height: 2 },
+  shadowOpacity: 1,
+  shadowRadius: 0,
+  elevation: 2,
+};
+
+export function SelectionCard({
+  title,
+  icon,
+  size = 'md',
+  multiSelect = false,
+  selected = false,
+  disabled = false,
+  onPress,
+  accessibilityLabel,
+  style,
+}: SelectionCardProps) {
+  const IconComponent = icon ? ICON_MAP[icon] : null;
+
+  const a11yState = {
+    disabled,
+    ...(multiSelect ? { checked: selected } : { selected }),
+  };
+
+  const checkboxNode = (
+    <Ionicons
+      name={selected ? 'checkbox' : 'square-outline'}
+      size={20}
+      color={selected ? cr.accent.primary.sysPrimary : cr.outline.sysOutline}
+      accessible={false}
+    />
+  );
+
+  if (size === 'sm') {
+    const iconColor = selected
+      ? cr.accent.primary.sysPrimary
+      : cr.surface.surface.sysOnSurface;
+
+    return (
+      <Pressable
+        onPress={disabled ? undefined : onPress}
+        accessibilityRole={multiSelect ? 'checkbox' : 'radio'}
+        accessibilityLabel={accessibilityLabel ?? title}
+        accessibilityState={a11yState}
+        style={({ pressed }) => [
+          styles.smRoot,
+          {
+            borderColor: selected
+              ? cr.accent.primary.sysPrimary
+              : cr.outline.sysOutline,
+            borderWidth: selected
+              ? dim.borderWidth.sysStrokeMedium
+              : dim.borderWidth.sysStrokeThin,
+            opacity: disabled ? 0.38 : 1,
+          },
+          selected && SELECTED_RING,
+          pressed && !disabled && styles.pressed,
+          style,
+        ]}
+      >
+        {IconComponent && (
+          <View style={styles.smIconWrap}>
+            <IconComponent size="small" color={iconColor} />
+          </View>
+        )}
+        <BodyText
+          variant="labelLarge"
+          color={cr.surface.surface.sysOnSurface}
+          emphasized={selected}
+          style={styles.smTitle}
+        >
+          {title}
+        </BodyText>
+        {multiSelect && checkboxNode}
+      </Pressable>
+    );
+  }
+
+  // ── Medium ──────────────────────────────────────────────────────────────────
+  const iconBgColor = selected
+    ? cr.accent.primary.sysPrimary
+    : cr.surface.surfaceContainer.sysSurfaceContainer;
+  const iconColor = selected
+    ? cr.accent.primary.sysOnPrimary
+    : cr.surface.surface.sysOnSurface;
+  const titleColor = selected
+    ? cr.accent.primary.sysPrimary
+    : cr.surface.surface.sysOnSurface;
+
+  const iconCircle = IconComponent ? (
+    <View style={[styles.mdIconCircle, { backgroundColor: iconBgColor }]}>
+      <IconComponent size="small" color={iconColor} />
+    </View>
+  ) : null;
+
+  return (
+    <Pressable
+      onPress={disabled ? undefined : onPress}
+      accessibilityRole={multiSelect ? 'checkbox' : 'radio'}
+      accessibilityLabel={accessibilityLabel ?? title}
+      accessibilityState={a11yState}
+      style={({ pressed }) => [
+        styles.mdRoot,
+        {
+          borderColor: selected
+            ? cr.accent.primary.sysPrimary
+            : cr.outline.sysOutline,
+          borderWidth: selected
+            ? dim.borderWidth.sysStrokeThick
+            : dim.borderWidth.sysStrokeMedium,
+          opacity: disabled ? 0.38 : 1,
+        },
+        selected && SELECTED_RING,
+        pressed && !disabled && styles.pressed,
+        style,
+      ]}
+    >
+      {multiSelect ? (
+        <View style={styles.mdIconCheckboxRow}>
+          {iconCircle}
+          {checkboxNode}
+        </View>
+      ) : (
+        iconCircle
+      )}
+      <HeaderText variant="titleSmall" color={titleColor} emphasized={selected}>
+        {title}
+      </HeaderText>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  mdRoot: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    padding: dim.spacing.padding.sysPadding24,
+    gap: dim.spacing.padding.sysPadding24,
+    borderRadius: dim.borderRadius.sysRadiusLg,
+    backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+    overflow: 'hidden',
+  },
+  mdIconCircle: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: dim.spacing.padding.sysPadding12,
+    borderRadius: dim.borderRadius.sysRadiusFull,
+    overflow: 'hidden',
+  },
+  mdIconCheckboxRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    width: '100%',
+  },
+  smRoot: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: dim.spacing.padding.sysPadding12,
+    paddingHorizontal: dim.spacing.padding.sysPadding20,
+    paddingVertical: dim.spacing.padding.sysPadding16,
+    borderRadius: dim.borderRadius.sysRadiusMd,
+    backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+    overflow: 'hidden',
+  },
+  smIconWrap: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  smTitle: {
+    flex: 1,
+  },
+  pressed: {
+    opacity: 0.84,
+  },
+});

package/src/components/ServiceCard/ServiceCard.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { ServiceCard } from './index';
+
+describe('ServiceCard', () => {
+  it('renders title', () => {
+    const { getByText } = render(<ServiceCard title="Therapy" />);
+    expect(getByText('Therapy')).toBeTruthy();
+  });
+
+  it('renders description', () => {
+    const { getByText } = render(
+      <ServiceCard title="Therapy" description="One-on-one sessions" />,
+    );
+    expect(getByText('One-on-one sessions')).toBeTruthy();
+  });
+
+  it('calls onPress when interactive and tapped', () => {
+    const onPress = jest.fn();
+    const { getByLabelText } = render(
+      <ServiceCard
+        title="Therapy"
+        interactive
+        onPress={onPress}
+        accessibilityLabel="Therapy card"
+      />,
+    );
+    fireEvent.press(getByLabelText('Therapy card'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders in disabled state', () => {
+    const { toJSON } = render(
+      <ServiceCard
+        title="Therapy"
+        interactive
+        disabled
+        accessibilityLabel="Therapy card"
+      />,
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it.each(['outlined', 'tonal', 'filled', 'doubled'] as const)(
+    'renders variant "%s" without crashing',
+    (variant) => {
+      const { toJSON } = render(<ServiceCard title="Card" variant={variant} />);
+      expect(toJSON()).toBeTruthy();
+    },
+  );
+
+  it.each(['sm', 'md', 'lg'] as const)(
+    'renders size "%s" without crashing',
+    (size) => {
+      const { toJSON } = render(<ServiceCard title="Card" size={size} />);
+      expect(toJSON()).toBeTruthy();
+    },
+  );
+});