@compsych/mobile-ui 1.0.10 → 1.0.13

package/src/components/BodyText/index.tsx

@@ -4,7 +4,7 @@ import { Text, type TextProps } from 'react-native';
 
 import { useFonts } from 'expo-font';
 
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 
 export type BodyVariant =
   | 'large'
@@ -26,7 +26,7 @@ const FONT_FAMILY: Record<string, string> = {
   semibold: 'GoogleSans_600SemiBold',
 };
 
-const VARIANT_TOKEN_KEY: Record<BodyVariant, keyof typeof sys.typeScale> = {
+const VARIANT_TOKEN_KEY: Record<BodyVariant, string> = {
   large: 'bodyLarge',
   medium: 'bodyMedium',
   small: 'bodySmall',
@@ -35,8 +35,6 @@ const VARIANT_TOKEN_KEY: Record<BodyVariant, keyof typeof sys.typeScale> = {
   labelSmall: 'labelSmall',
 };
 
-const { typeScale: ts } = sys;
-
 export function BodyText({
   variant = 'medium',
   emphasized = false,
@@ -44,13 +42,15 @@ export function BodyText({
   style,
   ...rest
 }: BodyTextProps) {
+  const { typeScale: ts } = useTheme();
+
   const [fontsLoaded] = useFonts({
     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 token = ts[VARIANT_TOKEN_KEY[variant] as keyof typeof ts];
   const weight = emphasized
     ? token.sysFontWeightEmphasized
     : token.sysFontWeight;

package/src/components/Breadcrumb/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import {
   Pressable,
@@ -12,7 +12,7 @@ import {
 
 import { Ionicons } from '@expo/vector-icons';
 
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 
 export type BreadcrumbSize = 'sm' | 'lg';
 
@@ -38,31 +38,34 @@ export interface BreadcrumbProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
+export function Breadcrumb({ items, size = 'lg', style }: BreadcrumbProps) {
+  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();
 
-const SIZE_TOKENS = {
-  sm: {
-    fontSize: ts.labelSmall.sysFontSize,
-    lineHeight: ts.labelSmall.sysLineHeight,
-    letterSpacing: ts.labelSmall.sysTracking,
-    paddingH: dim.spacing.padding.sysPadding8,
-    paddingV: dim.spacing.padding.sysPadding2,
-    iconSize: 16,
-    dividerWidth: 8,
-  },
-  lg: {
-    fontSize: ts.labelMedium.sysFontSize,
-    lineHeight: ts.labelMedium.sysLineHeight,
-    letterSpacing: ts.labelMedium.sysTracking,
-    paddingH: dim.spacing.padding.sysPadding8,
-    paddingV: dim.spacing.padding.sysPadding4,
-    iconSize: 16,
-    dividerWidth: 8,
-  },
-};
+  const sizeTokens = useMemo(
+    () => ({
+      sm: {
+        fontSize: ts.labelSmall.sysFontSize,
+        lineHeight: ts.labelSmall.sysLineHeight,
+        letterSpacing: ts.labelSmall.sysTracking,
+        paddingH: dim.spacing.padding.sysPadding8,
+        paddingV: dim.spacing.padding.sysPadding2,
+        iconSize: 16,
+        dividerWidth: 8,
+      },
+      lg: {
+        fontSize: ts.labelMedium.sysFontSize,
+        lineHeight: ts.labelMedium.sysLineHeight,
+        letterSpacing: ts.labelMedium.sysTracking,
+        paddingH: dim.spacing.padding.sysPadding8,
+        paddingV: dim.spacing.padding.sysPadding4,
+        iconSize: 16,
+        dividerWidth: 8,
+      },
+    }),
+    [dim, ts],
+  );
 
-export function Breadcrumb({ items, size = 'lg', style }: BreadcrumbProps) {
-  const s = SIZE_TOKENS[size];
+  const s = sizeTokens[size];
 
   return (
     // ScrollView lets a long breadcrumb scroll horizontally without clipping
@@ -130,7 +133,10 @@ export function Breadcrumb({ items, size = 'lg', style }: BreadcrumbProps) {
                 accessibilityLabel={item.isHome ? 'Home' : item.label}
                 style={({ pressed }) => [
                   styles.pressable,
-                  pressed && styles.pressed,
+                  pressed && {
+                    backgroundColor: cr.transparent.neutral.sysBlack10,
+                    borderRadius: 4,
+                  },
                 ]}
               >
                 {content}
@@ -183,10 +189,6 @@ const styles = StyleSheet.create({
   pressable: {
     borderRadius: 4,
   },
-  pressed: {
-    backgroundColor: cr.transparent.neutral.sysBlack10,
-    borderRadius: 4,
-  },
   content: {
     flexDirection: 'row',
     alignItems: 'center',

package/src/components/Button/Button.test.tsx

@@ -22,13 +22,19 @@ describe('Button', () => {
     expect(getByRole('button').props.accessibilityState.disabled).toBe(true);
   });
 
-  it.each(['filled', 'tonal', 'outlined', 'elevated', 'text'] as const)(
-    'renders variant "%s" without crashing',
-    (variant) => {
-      const { getByText } = render(<Button label="Button" variant={variant} />);
-      expect(getByText('Button')).toBeTruthy();
-    },
-  );
+  it.each([
+    'filled',
+    'tonal',
+    'outlined',
+    'elevated',
+    'text',
+    'danger',
+    'danger-outlined',
+    'warning',
+  ] as const)('renders variant "%s" without crashing', (variant) => {
+    const { getByText } = render(<Button label="Button" variant={variant} />);
+    expect(getByText('Button')).toBeTruthy();
+  });
 
   it.each(['sm', 'md', 'lg', 'xl'] as const)(
     'renders size "%s" without crashing',

package/src/components/Button/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import {
   ActivityIndicator,
@@ -9,7 +9,7 @@ import {
   View,
 } from 'react-native';
 
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 
 export type ButtonVariant =
   | 'filled'
@@ -18,7 +18,8 @@ export type ButtonVariant =
   | 'elevated'
   | 'text'
   | 'danger'
-  | 'danger-outlined';
+  | 'danger-outlined'
+  | 'warning';
 
 export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
 
@@ -37,91 +38,6 @@ export interface ButtonProps extends Omit<
   trailingIcon?: React.ReactNode;
 }
 
-const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
-
-const VARIANT_TOKENS: Record<
-  ButtonVariant,
-  { bg: string; label: string; borderColor: string; borderWidth: number }
-> = {
-  filled: {
-    bg: cr.accent.primary.sysPrimary,
-    label: cr.accent.primary.sysOnPrimary,
-    borderColor: 'transparent',
-    borderWidth: 0,
-  },
-  tonal: {
-    bg: cr.addOn.primaryFixed.sysPrimaryFixedDim,
-    label: cr.addOn.primaryFixed.sysOnPrimaryFixed,
-    borderColor: 'transparent',
-    borderWidth: 0,
-  },
-  outlined: {
-    bg: 'transparent',
-    label: cr.surface.surface.sysOnSurface,
-    borderColor: cr.outline.sysOutline,
-    borderWidth: dim.borderWidth.sysStrokeThin,
-  },
-  elevated: {
-    bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
-    label: cr.surface.surface.sysOnSurface,
-    borderColor: 'transparent',
-    borderWidth: 0,
-  },
-  text: {
-    bg: 'transparent',
-    label: cr.surface.surface.sysOnSurface,
-    borderColor: 'transparent',
-    borderWidth: 0,
-  },
-  danger: {
-    bg: cr.error.sysError,
-    label: cr.error.sysOnError,
-    borderColor: 'transparent',
-    borderWidth: 0,
-  },
-  'danger-outlined': {
-    bg: 'transparent',
-    label: cr.error.sysError,
-    borderColor: cr.error.sysErrorContainer,
-    borderWidth: dim.borderWidth.sysStrokeThin,
-  },
-};
-
-const SIZE_TOKENS = {
-  sm: {
-    height: 32,
-    paddingH: dim.spacing.padding.sysPadding12,
-    paddingV: dim.spacing.padding.sysPadding4,
-    fontSize: ts.labelSmall.sysFontSize,
-    lineHeight: ts.labelSmall.sysLineHeight,
-    iconSize: sys.iconography.sysSizeXs,
-  },
-  md: {
-    height: 40,
-    paddingH: dim.spacing.padding.sysPadding16,
-    paddingV: dim.spacing.padding.sysPadding8,
-    fontSize: ts.labelMedium.sysFontSize,
-    lineHeight: ts.labelMedium.sysLineHeight,
-    iconSize: sys.iconography.sysSizeXs,
-  },
-  lg: {
-    height: 48,
-    paddingH: dim.spacing.padding.sysPadding24,
-    paddingV: dim.spacing.padding.sysPadding12,
-    fontSize: ts.labelLarge.sysFontSize,
-    lineHeight: ts.labelLarge.sysLineHeight,
-    iconSize: sys.iconography.sysSizeSm,
-  },
-  xl: {
-    height: 56,
-    paddingH: dim.spacing.padding.sysPadding32,
-    paddingV: dim.spacing.padding.sysPadding16,
-    fontSize: ts.titleSmall.sysFontSize,
-    lineHeight: ts.titleSmall.sysLineHeight,
-    iconSize: sys.iconography.sysSizeMd,
-  },
-};
-
 export function Button({
   variant = 'filled',
   size = 'md',
@@ -136,6 +52,109 @@ export function Button({
   accessibilityLabel,
   ...rest
 }: ButtonProps) {
+  const {
+    colorRoles: cr,
+    dimensions: dim,
+    typeScale: ts,
+    iconography: ico,
+  } = useTheme();
+
+  const VARIANT_TOKENS = useMemo(
+    () =>
+      ({
+        filled: {
+          bg: cr.accent.primary.sysPrimary,
+          label: cr.accent.primary.sysOnPrimary,
+          borderColor: 'transparent',
+          borderWidth: 0,
+        },
+        tonal: {
+          bg: cr.addOn.primaryFixed.sysPrimaryFixedDim,
+          label: cr.addOn.primaryFixed.sysOnPrimaryFixed,
+          borderColor: 'transparent',
+          borderWidth: 0,
+        },
+        outlined: {
+          bg: 'transparent',
+          label: cr.surface.surface.sysOnSurface,
+          borderColor: cr.outline.sysOutline,
+          borderWidth: dim.borderWidth.sysStrokeThin,
+        },
+        elevated: {
+          bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+          label: cr.surface.surface.sysOnSurface,
+          borderColor: 'transparent',
+          borderWidth: 0,
+        },
+        text: {
+          bg: 'transparent',
+          label: cr.surface.surface.sysOnSurface,
+          borderColor: 'transparent',
+          borderWidth: 0,
+        },
+        danger: {
+          bg: cr.error.sysError,
+          label: cr.error.sysOnError,
+          borderColor: 'transparent',
+          borderWidth: 0,
+        },
+        'danger-outlined': {
+          bg: 'transparent',
+          label: cr.error.sysError,
+          borderColor: cr.error.sysErrorContainer,
+          borderWidth: dim.borderWidth.sysStrokeThin,
+        },
+        warning: {
+          bg: cr.custom.warning.sysWarning,
+          label: cr.custom.warning.sysOnWarning,
+          borderColor: 'transparent',
+          borderWidth: 0,
+        },
+      }) as Record<
+        ButtonVariant,
+        { bg: string; label: string; borderColor: string; borderWidth: number }
+      >,
+    [cr, dim],
+  );
+
+  const SIZE_TOKENS = useMemo(
+    () => ({
+      sm: {
+        height: 32,
+        paddingH: dim.spacing.padding.sysPadding12,
+        paddingV: dim.spacing.padding.sysPadding4,
+        fontSize: ts.labelSmall.sysFontSize,
+        lineHeight: ts.labelSmall.sysLineHeight,
+        iconSize: ico.sysSizeXs,
+      },
+      md: {
+        height: 40,
+        paddingH: dim.spacing.padding.sysPadding16,
+        paddingV: dim.spacing.padding.sysPadding8,
+        fontSize: ts.labelMedium.sysFontSize,
+        lineHeight: ts.labelMedium.sysLineHeight,
+        iconSize: ico.sysSizeXs,
+      },
+      lg: {
+        height: 48,
+        paddingH: dim.spacing.padding.sysPadding24,
+        paddingV: dim.spacing.padding.sysPadding12,
+        fontSize: ts.labelLarge.sysFontSize,
+        lineHeight: ts.labelLarge.sysLineHeight,
+        iconSize: ico.sysSizeSm,
+      },
+      xl: {
+        height: 56,
+        paddingH: dim.spacing.padding.sysPadding32,
+        paddingV: dim.spacing.padding.sysPadding16,
+        fontSize: ts.titleSmall.sysFontSize,
+        lineHeight: ts.titleSmall.sysLineHeight,
+        iconSize: ico.sysSizeMd,
+      },
+    }),
+    [dim, ts, ico],
+  );
+
   const v = VARIANT_TOKENS[variant];
   const s = SIZE_TOKENS[size];
   const isDisabled = disabled || loading;
@@ -172,13 +191,16 @@ export function Button({
                 }),
           ...(fullWidth && !iconOnly ? { alignSelf: 'stretch' } : {}),
           opacity: isDisabled ? 0.48 : pressed ? 0.82 : 1,
+          // Elevated: Figma specifies two drop shadows — RN only supports one
+          // on iOS, so we use the larger/more visible one (lv2: 0px 4px 16px
+          // rgba(0,0,0,0.10)) and fall back to elevation: 2 on Android.
           ...(variant === 'elevated'
             ? {
                 shadowColor: '#000',
-                shadowOffset: { width: 0, height: 2 },
-                shadowOpacity: 0.06,
-                shadowRadius: 4,
-                elevation: 1,
+                shadowOffset: { width: 0, height: 4 },
+                shadowOpacity: 0.1,
+                shadowRadius: 16,
+                elevation: 2,
               }
             : {}),
         },

package/src/components/ChatBubble/ChatBubble.test.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { ChatBubble } from './index';
+
+jest.mock('@expo/vector-icons', () => ({
+  Ionicons: 'Ionicons',
+}));
+
+describe('ChatBubble', () => {
+  it('renders message for incoming variant', () => {
+    const { getByText } = render(
+      <ChatBubble variant="incoming" message="Hello, how can I help?" />,
+    );
+    expect(getByText('Hello, how can I help?')).toBeTruthy();
+  });
+
+  it('renders message for outgoing variant', () => {
+    const { getByText } = render(
+      <ChatBubble variant="outgoing" message="I need some help" />,
+    );
+    expect(getByText('I need some help')).toBeTruthy();
+  });
+
+  it('renders timestamp when provided', () => {
+    const { getByText } = render(
+      <ChatBubble variant="incoming" message="Hi" timestamp="11:30 AM" />,
+    );
+    expect(getByText('11:30 AM')).toBeTruthy();
+  });
+
+  it('does not render timestamp when omitted', () => {
+    const { queryByText } = render(
+      <ChatBubble variant="incoming" message="Hi" />,
+    );
+    expect(queryByText('11:30 AM')).toBeNull();
+  });
+
+  it('renders thumbs-up button and calls onThumbsUp when pressed', () => {
+    const onThumbsUp = jest.fn();
+    const { getByLabelText } = render(
+      <ChatBubble variant="incoming" message="Hi" onThumbsUp={onThumbsUp} />,
+    );
+    fireEvent.press(getByLabelText('Thumbs up'));
+    expect(onThumbsUp).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders thumbs-down button and calls onThumbsDown when pressed', () => {
+    const onThumbsDown = jest.fn();
+    const { getByLabelText } = render(
+      <ChatBubble
+        variant="incoming"
+        message="Hi"
+        onThumbsDown={onThumbsDown}
+      />,
+    );
+    fireEvent.press(getByLabelText('Thumbs down'));
+    expect(onThumbsDown).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not render reaction buttons for outgoing variant', () => {
+    const onThumbsUp = jest.fn();
+    const { queryByLabelText } = render(
+      <ChatBubble variant="outgoing" message="Hey" onThumbsUp={onThumbsUp} />,
+    );
+    expect(queryByLabelText('Thumbs up')).toBeNull();
+  });
+
+  it('does not render reaction buttons when handlers are not provided', () => {
+    const { queryByLabelText } = render(
+      <ChatBubble variant="incoming" message="Hi" />,
+    );
+    expect(queryByLabelText('Thumbs up')).toBeNull();
+    expect(queryByLabelText('Thumbs down')).toBeNull();
+  });
+});

package/src/components/ChatBubble/index.tsx

@@ -0,0 +1,187 @@
+import React, { useMemo } from 'react';
+
+import {
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import { Ionicons } from '@expo/vector-icons';
+
+import { useTheme } from '../../theme';
+import { BodyText } from '../BodyText';
+
+export type ChatBubbleVariant = 'incoming' | 'outgoing';
+
+export interface ChatBubbleProps {
+  variant: ChatBubbleVariant;
+  message: string;
+  timestamp?: string;
+  onThumbsUp?: () => void;
+  onThumbsDown?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function ChatBubble({
+  variant,
+  message,
+  timestamp,
+  onThumbsUp,
+  onThumbsDown,
+  style,
+}: ChatBubbleProps) {
+  const { colorRoles: cr, dimensions: dim, iconography: ico } = useTheme();
+
+  const isOutgoing = variant === 'outgoing';
+
+  const tokenStyles = useMemo(
+    () => ({
+      bubble: {
+        maxWidth: '80%' as const,
+        paddingVertical: dim.spacing.padding.sysPadding8,
+        paddingHorizontal: dim.spacing.padding.sysPadding12,
+        borderRadius: dim.borderRadius.sysRadiusMd,
+      },
+      bubbleIncoming: {
+        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+        borderWidth: dim.borderWidth.sysStrokeThin,
+        borderColor: cr.outline.sysOutlineVariant,
+        borderBottomLeftRadius: dim.borderRadius.sysRadiusXs,
+      },
+      bubbleOutgoing: {
+        backgroundColor: cr.accent.primary.sysPrimary,
+        borderBottomRightRadius: dim.borderRadius.sysRadiusXs,
+      },
+      metaRow: {
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        gap: dim.spacing.padding.sysPadding8,
+        marginTop: dim.spacing.padding.sysPadding4,
+      },
+      reactionBtn: {
+        padding: dim.spacing.padding.sysPadding2,
+      },
+    }),
+    [cr, dim],
+  );
+
+  const textColor = isOutgoing
+    ? cr.accent.primary.sysOnPrimary
+    : cr.surface.surface.sysOnSurface;
+  const timestampColor = isOutgoing
+    ? 'rgba(255,255,255,0.64)'
+    : cr.surface.surface.sysOnSurfaceVariant;
+  const iconColor = cr.surface.surface.sysOnSurfaceVariant;
+  const iconSize = ico.sysSizeXs;
+
+  return (
+    <View
+      style={[
+        styles.row,
+        isOutgoing ? styles.rowOutgoing : styles.rowIncoming,
+        style,
+      ]}
+    >
+      <View>
+        {/* Bubble */}
+        <View
+          style={[
+            tokenStyles.bubble,
+            isOutgoing
+              ? tokenStyles.bubbleOutgoing
+              : tokenStyles.bubbleIncoming,
+          ]}
+        >
+          <BodyText
+            variant="medium"
+            color={textColor}
+            style={styles.messageText}
+          >
+            {message}
+          </BodyText>
+        </View>
+
+        {/* Meta row: timestamp + reactions */}
+        <View
+          style={[
+            tokenStyles.metaRow,
+            isOutgoing ? styles.metaOutgoing : styles.metaIncoming,
+          ]}
+        >
+          {timestamp && (
+            <BodyText variant="labelSmall" color={timestampColor}>
+              {timestamp}
+            </BodyText>
+          )}
+
+          {/* Reaction buttons — incoming only */}
+          {!isOutgoing && (onThumbsUp || onThumbsDown) && (
+            <>
+              {onThumbsUp && (
+                <Pressable
+                  onPress={onThumbsUp}
+                  style={({ pressed }) => [
+                    tokenStyles.reactionBtn,
+                    pressed && styles.pressed,
+                  ]}
+                  accessibilityRole="button"
+                  accessibilityLabel="Thumbs up"
+                >
+                  <Ionicons
+                    name="thumbs-up-outline"
+                    size={iconSize}
+                    color={iconColor}
+                  />
+                </Pressable>
+              )}
+              {onThumbsDown && (
+                <Pressable
+                  onPress={onThumbsDown}
+                  style={({ pressed }) => [
+                    tokenStyles.reactionBtn,
+                    pressed && styles.pressed,
+                  ]}
+                  accessibilityRole="button"
+                  accessibilityLabel="Thumbs down"
+                >
+                  <Ionicons
+                    name="thumbs-down-outline"
+                    size={iconSize}
+                    color={iconColor}
+                  />
+                </Pressable>
+              )}
+            </>
+          )}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    width: '100%',
+  },
+  rowIncoming: {
+    justifyContent: 'flex-start',
+  },
+  rowOutgoing: {
+    justifyContent: 'flex-end',
+  },
+  metaIncoming: {
+    justifyContent: 'flex-start',
+  },
+  metaOutgoing: {
+    justifyContent: 'flex-end',
+  },
+  messageText: {
+    flexShrink: 1,
+  },
+  pressed: {
+    opacity: 0.6,
+  },
+});