@startsimpli/ui-native 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui-native",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "React Native UI primitives for StartSimpli apps (View/Text/Pressable), fed by shared design tokens",
   "license": "MIT",
   "homepage": "https://startsimpli.com",

package/src/__tests__/contrast.test.ts

@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest';
+import { palette, type ColorScheme, type ColorToken } from '../tokens';
+import { contrastRatio } from '../contrast';
+import { makeTheme } from '../theme';
+import { alertTextStyle, alertTitleStyle, type AlertVariant } from '../styles';
+
+const pairs: [ColorToken, ColorToken, number][] = [
+  ['foreground', 'background', 7],
+  ['cardForeground', 'card', 7],
+  ['mutedForeground', 'background', 4.5],
+  ['primaryForeground', 'primary', 4.5],
+  ['warningForeground', 'warning', 4.5],
+  // Colored text drawn straight on the page (error and status text).
+  ['primary', 'background', 4.5],
+];
+
+describe.each(['light', 'dark'] as ColorScheme[])('%s palette contrast (WCAG AA)', (scheme) => {
+  it.each(pairs)('%s on %s is at least %d:1', (fg, bg, min) => {
+    const ratio = contrastRatio(palette[scheme][fg], palette[scheme][bg]);
+    expect(ratio, `${fg} on ${bg} = ${ratio.toFixed(2)}`).toBeGreaterThanOrEqual(min);
+  });
+});
+
+describe.each(['light', 'dark'] as ColorScheme[])('%s Alert text', (scheme) => {
+  const theme = makeTheme(scheme);
+  it.each(['default', 'destructive', 'notice'] as AlertVariant[])('%s title and body are readable on the card', (variant) => {
+    for (const style of [alertTitleStyle(theme, variant), alertTextStyle(theme, variant)]) {
+      const ratio = contrastRatio(String(style.color), theme.colors.card);
+      expect(ratio, `${variant} = ${ratio.toFixed(2)}`).toBeGreaterThanOrEqual(4.5);
+    }
+  });
+});

package/src/__tests__/forms.test.tsx

@@ -119,6 +119,13 @@ describe('TextArea + FormField', () => {
 });
 
 describe('SearchBar', () => {
+  it('caps text scaling on the field and glyph so the glyph never covers the placeholder', () => {
+    const r = render(<SearchBar testID="sb2" value="" onChangeText={() => {}} />);
+    const input = r.root.findAll((n) => n.props.testID === 'sb2' && n.props.placeholder)[0];
+    expect(input.props.maxFontSizeMultiplier).toBeLessThanOrEqual(1.3);
+    const glyph = r.root.findAll((n) => n.type === 'Text' && n.props.children === '🔍')[0];
+    expect(glyph.props.maxFontSizeMultiplier).toBeLessThanOrEqual(1.3);
+  });
   it('reports text, submit, and clears with an accessible button', () => {
     const log: string[] = [];
     const r = render(<SearchBar testID="sb" value="milk" onChangeText={(t) => log.push('t:' + t)} onSubmit={(t) => log.push('s:' + t)} onClear={() => log.push('clear')} />);

package/src/__tests__/interactive.test.tsx

@@ -95,10 +95,9 @@ describe('MessageBubble', () => {
 });
 
 describe('ChatComposer', () => {
-  it('keyboard-avoiding wrapper, send disabled until text', () => {
+  it('send disabled until text (keyboard lift is covered in keyboard.test.tsx)', () => {
     const sent: string[] = [];
     const r = render(<ChatComposer testID="c" onSend={(t) => sent.push(t)} placeholder="Ask" />);
-    expect(r.root.findAllByType('KeyboardAvoidingView' as any).length).toBe(1);
     const send = hostById(r, 'c-send');
     expect(send.props.accessibilityLabel).toBe('Send message');
     expect(send.props.disabled).toBe(true);

package/src/__tests__/keyboard.test.tsx

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+import { act, create } from 'react-test-renderer';
+import { Keyboard } from 'react-native';
+import { ChatComposer } from '../components/ChatComposer';
+import { ThemeProvider } from '../components/ThemeProvider';
+import { lightTheme } from '../theme';
+import { keyboardOverlap } from '../logic/keyboard';
+import { flat } from '../../test/render';
+
+describe('keyboardOverlap', () => {
+  it('is how far the view bottom sits below the keyboard top, never negative', () => {
+    expect(keyboardOverlap(780, 520)).toBe(260);
+    expect(keyboardOverlap(400, 520)).toBe(0);
+  });
+});
+
+describe('ChatComposer above a tab bar', () => {
+  it('lifts clear of the keyboard (not behind it) and drops back when it hides', () => {
+    // Composer bottom edge at y=700 in the window; keyboard opens with its top at y=450.
+    let r!: ReturnType<typeof create>;
+    act(() => {
+      r = create(<ThemeProvider theme={lightTheme}><ChatComposer testID="c" onSend={() => {}} /></ThemeProvider>,
+        { createNodeMock: () => ({ measureInWindow: (cb: (x: number, y: number, w: number, h: number) => void) => cb(0, 640, 390, 60) }) });
+    });
+    const paddingBottom = () => flat(r.root.findAll((n) => typeof n.type === 'string' && n.props.testID === undefined && flat(n.props.style).borderTopWidth !== undefined)[0]?.props.style).paddingBottom as number;
+    const before = paddingBottom();
+    act(() => { (Keyboard as any).emit('keyboardWillChangeFrame', { endCoordinates: { screenY: 450 } }); });
+    expect(paddingBottom()).toBeGreaterThanOrEqual(before + 250);
+    act(() => { (Keyboard as any).emit('keyboardWillHide', {}); });
+    expect(paddingBottom()).toBe(before);
+  });
+});

package/src/__tests__/large-text.test.tsx

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest';
+import { Header } from '../components/Header';
+import { ListRow } from '../components/ListRow';
+import { StatTile } from '../components/StatTile';
+import { render } from '../../test/render';
+
+const texts = (r: ReturnType<typeof render>) => r.root.findAll((n) => n.type === 'Text');
+
+describe('large Dynamic Type', () => {
+  it('Header titles wrap to two lines instead of ellipsizing a word like "Connectio..."', () => {
+    const title = texts(render(<Header title="Connections" subtitle="3 connected accounts" />))[0];
+    expect(title.props.numberOfLines).toBe(2);
+    expect(title.props.maxFontSizeMultiplier).toBeLessThanOrEqual(1.6);
+  });
+  it('StatTile value and caption cap scaling so captions do not break mid-word', () => {
+    const [value, label] = texts(render(<StatTile value="3" label="Documents" />));
+    expect(value.props.maxFontSizeMultiplier).toBeLessThanOrEqual(1.3);
+    expect(label.props.maxFontSizeMultiplier).toBeLessThanOrEqual(1.2);
+    expect(label.props.numberOfLines).toBe(1);
+  });
+  it('ListRow keeps a very long title and subtitle to two lines each so one row cannot fill the screen', () => {
+    const [title, subtitle] = texts(render(<ListRow title={'x'.repeat(300)} subtitle={'y'.repeat(300)} />));
+    expect(title.props.numberOfLines).toBe(2);
+    expect(subtitle.props.numberOfLines).toBe(2);
+    expect(title.props.ellipsizeMode ?? 'tail').toBe('tail');
+  });
+});

package/src/__tests__/styles-primitives.test.ts

@@ -96,9 +96,10 @@ describe('progress', () => {
 });
 
 describe('alert', () => {
-  it('default vs destructive variants color the border + title', () => {
+  it('destructive colors the border; titles stay foreground so they read on dark; notice uses the warning border', () => {
     expect(alertStyle(t, 'destructive').borderColor).toBe(t.colors.destructive);
-    expect(alertTitleStyle(t, 'destructive').color).toBe(t.colors.destructive);
+    expect(alertTitleStyle(t, 'destructive').color).toBe(t.colors.foreground);
+    expect(alertStyle(t, 'notice').borderColor).toBe(t.colors.warning);
     expect(alertTitleStyle(t, 'default').color).toBe(t.colors.foreground);
   });
 });

package/src/__tests__/tabbar.test.tsx

@@ -13,6 +13,9 @@ describe('TabBar labels never wrap or clip', () => {
       expect(l.props.ellipsizeMode).toBe('tail');
     }
   });
+  it('label text scaling is capped so five labels fit at the largest Dynamic Type', () => {
+    for (const l of r.root.findAll((n) => n.type === 'Text')) expect(l.props.maxFontSizeMultiplier).toBeLessThanOrEqual(1.3);
+  });
   it('items can shrink below their label width so the ellipsis can happen', () => {
     for (const tab of r.root.findAll((n) => n.props.accessibilityRole === 'tab')) {
       expect(flat(tab.props.style).minWidth).toBe(0);

package/src/components/ChatComposer.tsx

@@ -1,9 +1,10 @@
-import { useState } from 'react';
-import { KeyboardAvoidingView, Platform, Pressable, Text as RNText, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useRef, useState } from 'react';
+import { Pressable, Text as RNText, View, type StyleProp, type ViewStyle } from 'react-native';
 import { Input } from './Input';
 import { useTheme } from './ThemeProvider';
 import { composerStyle, sendButtonStyle, sendGlyphStyle } from '../styles-chat';
 import { canSend } from '../logic/chat';
+import { useKeyboardInset } from './useKeyboardInset';
 
 export interface ChatComposerProps {
   onSend: (text: string) => void;
@@ -13,7 +14,7 @@ export interface ChatComposerProps {
   placeholder?: string;
   /** Disables sending while an answer is in flight. */
   sending?: boolean;
-  /** Extra offset for headers above the keyboard-avoiding view. */
+  /** Unused since the composer measures the keyboard itself; kept so callers still compile. */
   keyboardVerticalOffset?: number;
   /** Bottom safe-area padding (home indicator). */
   bottomInset?: number;
@@ -24,6 +25,8 @@ export interface ChatComposerProps {
 /** Keyboard-avoiding message input with a send button. Trims text on send. */
 export function ChatComposer({ onSend, value, onChangeText, placeholder = 'Message', sending = false, keyboardVerticalOffset = 0, bottomInset = 0, style, testID }: ChatComposerProps) {
   const theme = useTheme();
+  const outer = useRef<View>(null);
+  const lift = useKeyboardInset(outer);
   const [own, setOwn] = useState('');
   const controlled = value !== undefined;
   const text = controlled ? value : own;
@@ -37,8 +40,8 @@ export function ChatComposer({ onSend, value, onChangeText, placeholder = 'Messa
   };
 
   return (
-    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} keyboardVerticalOffset={keyboardVerticalOffset}>
-      <View style={[composerStyle(theme), { paddingBottom: bottomInset + theme.spacing.sm }, style]}>
+    <View ref={outer} collapsable={false}>
+      <View style={[composerStyle(theme), { paddingBottom: lift + (lift > 0 ? 0 : bottomInset) + theme.spacing.sm }, style]}>
         <Input
           testID={id('input')}
           value={text}
@@ -60,6 +63,6 @@ export function ChatComposer({ onSend, value, onChangeText, placeholder = 'Messa
           <RNText style={sendGlyphStyle(theme, enabled)}>↑</RNText>
         </Pressable>
       </View>
-    </KeyboardAvoidingView>
+    </View>
   );
 }

package/src/components/Header.tsx

@@ -37,8 +37,8 @@ export function Header({ title, subtitle, onBack, backLabel = 'Back', trailing,
         </Pressable>
       ) : null}
       <View style={{ flex: 1 }}>
-        <RNText accessibilityRole="header" numberOfLines={1} style={[textStyle(theme, 'heading'), { fontSize: theme.fontSizes.lg }]}>{title}</RNText>
-        {subtitle ? <RNText numberOfLines={1} style={textStyle(theme, 'caption')}>{subtitle}</RNText> : null}
+        <RNText accessibilityRole="header" numberOfLines={2} maxFontSizeMultiplier={1.6} style={[textStyle(theme, 'heading'), { fontSize: theme.fontSizes.lg }]}>{title}</RNText>
+        {subtitle ? <RNText numberOfLines={2} maxFontSizeMultiplier={1.4} style={textStyle(theme, 'caption')}>{subtitle}</RNText> : null}
       </View>
       {trailing ? <View style={{ flexDirection: 'row', alignItems: 'center', gap: theme.spacing.sm }}>{trailing}</View> : null}
     </View>

package/src/components/ListRow.tsx

@@ -22,8 +22,8 @@ export function ListRow({ title, subtitle, leading, trailing, onPress, style }:
     <>
       {leading ? <View>{leading}</View> : null}
       <View style={{ flex: 1 }}>
-        <RNText style={listRowTitleStyle(theme)}>{title}</RNText>
-        {subtitle ? <RNText style={listRowSubtitleStyle(theme)}>{subtitle}</RNText> : null}
+        <RNText numberOfLines={2} style={listRowTitleStyle(theme)}>{title}</RNText>
+        {subtitle ? <RNText numberOfLines={2} style={listRowSubtitleStyle(theme)}>{subtitle}</RNText> : null}
       </View>
       {trailing ? <View>{trailing}</View> : null}
     </>

package/src/components/SearchBar.tsx

@@ -31,10 +31,11 @@ export function SearchBar({ value, onChangeText, onSubmit, onClear, placeholder
         autoCapitalize="none"
         autoCorrect={false}
         autoFocus={autoFocus}
+        maxFontSizeMultiplier={1.3}
         clearButtonMode="never"
         style={{ paddingLeft: theme.spacing.md + 22, paddingRight: value ? 44 : theme.spacing.md, borderRadius: theme.radii.full }}
       />
-      <RNText pointerEvents="none" accessibilityElementsHidden importantForAccessibility="no" style={{ position: 'absolute', left: theme.spacing.md, color: theme.colors.mutedForeground, fontSize: theme.fontSizes.sm }}>🔍</RNText>
+      <RNText maxFontSizeMultiplier={1.3} pointerEvents="none" accessibilityElementsHidden importantForAccessibility="no" style={{ position: 'absolute', left: theme.spacing.md, color: theme.colors.mutedForeground, fontSize: theme.fontSizes.sm }}>🔍</RNText>
       {value ? (
         <Pressable
           testID={testID ? `${testID}-clear` : undefined}

package/src/components/StatTile.tsx

@@ -62,8 +62,8 @@ export function StatTile({
           ) : null}
         </View>
       )}
-      <RNText style={statValueStyle(theme)}>{value}</RNText>
-      <RNText style={statLabelStyle(theme)}>{label}</RNText>
+      <RNText maxFontSizeMultiplier={1.3} style={statValueStyle(theme)}>{value}</RNText>
+      <RNText numberOfLines={1} adjustsFontSizeToFit minimumFontScale={0.8} maxFontSizeMultiplier={1.2} style={statLabelStyle(theme)}>{label}</RNText>
     </View>
   );
 }

package/src/components/TabBar.tsx

@@ -41,7 +41,7 @@ export function TabBar({ items, activeKey, onChange, style }: TabBarProps) {
             style={tabItemStyle(theme)}
           >
             {item.icon?.({ active, color })}
-            <RNText numberOfLines={1} ellipsizeMode="tail" style={tabLabelStyle(theme, active)}>{item.label}</RNText>
+            <RNText numberOfLines={1} ellipsizeMode="tail" maxFontSizeMultiplier={1.3} style={tabLabelStyle(theme, active)}>{item.label}</RNText>
           </Pressable>
         );
       })}

package/src/components/useKeyboardInset.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState, type RefObject } from 'react';
+import { Keyboard, Platform } from 'react-native';
+import { keyboardOverlap } from '../logic/keyboard';
+
+interface Measurable { measureInWindow(cb: (x: number, y: number, w: number, h: number) => void): void }
+
+/**
+ * Bottom padding that keeps the measured view above the keyboard. Measures the view against the keyboard's real
+ * frame, so it still works when the view sits above a tab bar (KeyboardAvoidingView left the Ask composer under the keys there).
+ * The view's own bottom edge does not move when this padding is applied, so re-measuring is stable.
+ */
+export function useKeyboardInset(ref: RefObject<Measurable | null>): number {
+  const [inset, setInset] = useState(0);
+  useEffect(() => {
+    const change = Keyboard.addListener(Platform.OS === 'ios' ? 'keyboardWillChangeFrame' : 'keyboardDidShow', (e) => {
+      ref.current?.measureInWindow((_x, y, _w, h) => setInset(keyboardOverlap(y + h, e.endCoordinates.screenY)));
+    });
+    const hide = Keyboard.addListener(Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide', () => setInset(0));
+    return () => { change.remove(); hide.remove(); };
+  }, [ref]);
+  return inset;
+}

package/src/contrast.ts

@@ -0,0 +1,20 @@
+/** WCAG contrast between two HSL colors, as channel strings ("H S% L%") or the theme's hsl(h, s%, l%) form. */
+function toRgb(channels: string): [number, number, number] {
+  const [h, s, l] = (channels.match(/-?\d+(?:\.\d+)?/g) ?? []).map(Number);
+  const sat = s / 100;
+  const light = l / 100;
+  const k = (n: number) => (n + h / 30) % 12;
+  const a = sat * Math.min(light, 1 - light);
+  const f = (n: number) => light - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+  return [f(0), f(8), f(4)];
+}
+
+function luminance(channels: string): number {
+  const [r, g, b] = toRgb(channels).map((c) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+export function contrastRatio(a: string, b: string): number {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}

package/src/logic/keyboard.ts

@@ -0,0 +1,4 @@
+/** How far a view whose bottom edge is at `bottomY` (window coordinates) must lift to clear a keyboard whose top is at `keyboardTop`. */
+export function keyboardOverlap(bottomY: number, keyboardTop: number): number {
+  return Math.max(0, Math.round(bottomY - keyboardTop));
+}

package/src/styles.ts

@@ -185,7 +185,8 @@ export function progressFillStyle(theme: Theme, value: number): ViewStyle {
 
 /* ------------------------------------------------------------------ Alert -- */
 
-export type AlertVariant = 'default' | 'destructive';
+/** `notice` is a heads-up (warning border); `destructive` is an error. Both keep body text at the foreground colors, which read on the card in light and dark (the destructive token itself does not on dark). */
+export type AlertVariant = 'default' | 'destructive' | 'notice';
 
 export function alertStyle(theme: Theme, variant: AlertVariant): ViewStyle {
   return {
@@ -193,7 +194,7 @@ export function alertStyle(theme: Theme, variant: AlertVariant): ViewStyle {
     borderRadius: theme.radii.lg,
     borderWidth: 1,
     backgroundColor: theme.colors.card,
-    borderColor: variant === 'destructive' ? theme.colors.destructive : theme.colors.border,
+    borderColor: variant === 'destructive' ? theme.colors.destructive : variant === 'notice' ? theme.colors.warning : theme.colors.border,
   };
 }
 
@@ -201,14 +202,14 @@ export function alertTitleStyle(theme: Theme, variant: AlertVariant): TextStyle
   return {
     fontSize: theme.fontSizes.base,
     fontWeight: theme.fontWeights.semibold as TextStyle['fontWeight'],
-    color: variant === 'destructive' ? theme.colors.destructive : theme.colors.foreground,
+    color: theme.colors.foreground,
   };
 }
 
 export function alertTextStyle(theme: Theme, variant: AlertVariant): TextStyle {
   return {
     fontSize: theme.fontSizes.sm,
-    color: variant === 'destructive' ? theme.colors.destructive : theme.colors.mutedForeground,
+    color: variant === 'default' ? theme.colors.mutedForeground : theme.colors.foreground,
   };
 }