@boostdev/design-system-react-native 0.4.0 → 0.5.0

package/src/components/ui/Pagination/Pagination.tsx

@@ -1,4 +1,5 @@
-import { AccessibilityRole, StyleSheet, View, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { AccessibilityRole, StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, border, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Progress/Progress.tsx

@@ -1,4 +1,5 @@
-import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, border, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/ProgressCircle/ProgressCircle.tsx

@@ -1,4 +1,5 @@
-import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { font } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Table/Table.tsx

@@ -1,13 +1,6 @@
 import { ReactNode } from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  ScrollView,
-  Pressable,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { StyleSheet, View, ScrollView, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, border, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Tabs/Tabs.tsx

@@ -1,14 +1,6 @@
 import { ReactNode, useState } from 'react';
-import {
-  AccessibilityRole,
-  StyleSheet,
-  View,
-  Text,
-  Pressable,
-  ScrollView,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { AccessibilityRole, StyleSheet, View, Pressable, ScrollView, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Tooltip/Tooltip.tsx

@@ -1,5 +1,6 @@
 import { ReactNode, useState } from 'react';
-import { StyleSheet, View, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, border } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Typography/Typography.mdx

@@ -49,6 +49,8 @@ import { Typography } from '@boostdev/design-system-components';
 | `variant` | `"h1" \| "h2" \| "h3" \| "body" \| "body_s"` | `"body"` | Typographic scale |
 | `children` | `ReactNode` | — | Text content |
 | `style` | `StyleProp<TextStyle>` | — | Override text styles |
+| `maxFontSizeMultiplier` | `number` | — | Overrides the ceiling on how far the text grows with the OS text size (default: from its font size, see `maxFontScaleFor`). `1` keeps the text at its own size. |
+| `numberOfLines` | `number` | — | Truncates the text with an ellipsis after this many lines. |
 
 ## Accessibility
 

package/src/components/ui/Typography/Typography.spec.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import type React from 'react';
 import { ThemeProvider } from '../../../native/ThemeContext';
 import { Typography } from './Typography';
 
@@ -6,6 +7,37 @@ function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
 }
 
+// Mocks react-native's Text to expose maxFontSizeMultiplier/numberOfLines as data attributes
+// (react-native-web drops them from the DOM). `accessibilityRole` is mapped to `role` the same
+// way react-native-web does ("header" -> "heading") so the heading-role tests above keep working
+// once this mock is in effect for the whole file.
+vi.mock('react-native', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('react-native')>();
+  const accessibilityRoleToWebRole: Record<string, string> = { header: 'heading' };
+  return {
+    ...actual,
+    Text: ({
+      children,
+      maxFontSizeMultiplier,
+      numberOfLines,
+      adjustsFontSizeToFit,
+      minimumFontScale,
+      accessibilityRole,
+    }: Record<string, unknown> & { children?: React.ReactNode; accessibilityRole?: string }) => (
+      <span
+        data-testid="text"
+        role={accessibilityRole ? accessibilityRoleToWebRole[accessibilityRole] : undefined}
+        data-max-font-scale={String(maxFontSizeMultiplier)}
+        data-lines={String(numberOfLines)}
+        data-fit={String(adjustsFontSizeToFit)}
+        data-min-scale={String(minimumFontScale)}
+      >
+        {children}
+      </span>
+    ),
+  };
+});
+
 describe('Typography (native)', () => {
   it('renders children text', () => {
     renderWithTheme(<Typography>Hello world</Typography>);
@@ -47,3 +79,30 @@ describe('Typography (native)', () => {
     expect(screen.getByText('Styled')).toBeInTheDocument();
   });
 });
+
+describe('Typography text size', () => {
+  it('caps h1 at a multiplier of 1.3 (32 pt)', () => {
+    renderWithTheme(<Typography variant="h1">Heading</Typography>);
+    expect(screen.getByText('Heading')).toHaveAttribute('data-max-font-scale', '1.3');
+  });
+
+  it('caps body at a multiplier of 2', () => {
+    renderWithTheme(<Typography variant="body">Body</Typography>);
+    expect(screen.getByText('Body')).toHaveAttribute('data-max-font-scale', '2');
+  });
+
+  it('caps a large custom font size at a multiplier of 1', () => {
+    renderWithTheme(<Typography style={{ fontSize: 88 }}>Big</Typography>);
+    expect(screen.getByText('Big')).toHaveAttribute('data-max-font-scale', '1');
+  });
+
+  it('uses the override multiplier when given', () => {
+    renderWithTheme(<Typography maxFontSizeMultiplier={1}>Body</Typography>);
+    expect(screen.getByText('Body')).toHaveAttribute('data-max-font-scale', '1');
+  });
+
+  it('passes numberOfLines through to truncate the text', () => {
+    renderWithTheme(<Typography numberOfLines={1}>Body</Typography>);
+    expect(screen.getByText('Body')).toHaveAttribute('data-lines', '1');
+  });
+});

package/src/components/ui/Typography/Typography.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { StyleSheet, Text, StyleProp, TextStyle } from 'react-native';
+import { StyleSheet, StyleProp, TextStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { font, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 
@@ -9,6 +10,13 @@ interface TypographyProps {
   variant?: TypographyVariant;
   children: ReactNode;
   style?: StyleProp<TextStyle>;
+  /**
+   * Overrides the ceiling on how far the text grows with the OS text size (default: from its
+   * font size, see `maxFontScaleFor`). `1` keeps the text at its own size.
+   */
+  maxFontSizeMultiplier?: number;
+  /** Truncates the text with an ellipsis after this many lines. */
+  numberOfLines?: number;
 }
 
 const styles = StyleSheet.create({
@@ -52,12 +60,20 @@ const accessibilityRoles: Record<TypographyVariant, 'header' | 'text'> = {
   body_s: 'text',
 };
 
-export function Typography({ variant = 'body', children, style }: TypographyProps) {
+export function Typography({
+  variant = 'body',
+  children,
+  style,
+  maxFontSizeMultiplier,
+  numberOfLines,
+}: TypographyProps) {
   const { colors } = useTheme();
   return (
     <Text
       accessibilityRole={accessibilityRoles[variant]}
       style={[styles.base, styles[variant], { color: colors.colorOnBg }, style]}
+      maxFontSizeMultiplier={maxFontSizeMultiplier}
+      numberOfLines={numberOfLines}
     >
       {children}
     </Text>

package/src/index.ts

@@ -14,6 +14,8 @@ export type {
   ReactNavigationFontStyle,
   CreateReactNavigationThemeOptions,
 } from './native/ReactNavigationTheme';
+export { ScaledText, ScaledTextInput, maxFontScaleForStyle } from './native/ScaledText';
+export { maxFontScaleFor } from './native/fontScale';
 
 // UI
 export { Typography } from './components/ui/Typography/Typography';

package/src/native/ScaledText.guard.spec.ts

@@ -0,0 +1,25 @@
+import { readFileSync, readdirSync, statSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+// Not `new URL('../components', import.meta.url)`: Vite statically matches that exact pattern as
+// an asset-URL import and resolves it against the dev server's location, which under jsdom is a
+// fake `http://localhost:3000/`, not the real file. Building the path from `dirname` avoids it.
+const componentsDir = join(dirname(fileURLToPath(import.meta.url)), '../components');
+
+function sourceFiles(dir: string): string[] {
+  return readdirSync(dir).flatMap((name) => {
+    const path = join(dir, name);
+    if (statSync(path).isDirectory()) return sourceFiles(path);
+    return /\.tsx?$/.test(name) && !/\.(spec|stories)\.tsx?$/.test(name) ? [path] : [];
+  });
+}
+
+describe('text in components', () => {
+  it('never takes Text or TextInput from react-native directly', () => {
+    const offenders = sourceFiles(componentsDir).filter((file) =>
+      /import\s*{[^}]*\b(Text|TextInput)\b[^}]*}\s*from\s*'react-native'/.test(readFileSync(file, 'utf8')),
+    );
+    expect(offenders).toEqual([]);
+  });
+});

package/src/native/ScaledText.spec.tsx

@@ -0,0 +1,77 @@
+import { render, screen } from '@testing-library/react';
+import type React from 'react';
+import { maxFontScaleForStyle, ScaledText, ScaledTextInput } from './ScaledText';
+
+describe('maxFontScaleForStyle', () => {
+  it('returns 2 for a fontSize of 16', () => {
+    expect(maxFontScaleForStyle({ fontSize: 16 })).toBe(2);
+  });
+
+  it('returns 1.3 for a style array, the later style wins', () => {
+    expect(maxFontScaleForStyle([{ fontSize: 16 }, { fontSize: 28 }])).toBe(1.3);
+  });
+
+  it('returns 2 for an undefined style', () => {
+    expect(maxFontScaleForStyle(undefined)).toBe(2);
+  });
+
+  it('returns the override when given', () => {
+    expect(maxFontScaleForStyle({ fontSize: 16 }, 1)).toBe(1);
+  });
+
+  it('returns the computed value when the override is null', () => {
+    expect(maxFontScaleForStyle({ fontSize: 16 }, null)).toBe(2);
+  });
+});
+
+vi.mock('react-native', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('react-native')>();
+  return {
+    ...actual,
+    Text: ({
+      children,
+      maxFontSizeMultiplier,
+      numberOfLines,
+      adjustsFontSizeToFit,
+      minimumFontScale,
+    }: Record<string, unknown> & { children?: React.ReactNode }) => (
+      <span
+        data-testid="text"
+        data-max-font-scale={String(maxFontSizeMultiplier)}
+        data-lines={String(numberOfLines)}
+        data-fit={String(adjustsFontSizeToFit)}
+        data-min-scale={String(minimumFontScale)}
+      >
+        {children}
+      </span>
+    ),
+    TextInput: ({
+      maxFontSizeMultiplier,
+    }: Record<string, unknown> & { children?: React.ReactNode }) => (
+      <input data-testid="text-input" data-max-font-scale={String(maxFontSizeMultiplier)} />
+    ),
+  };
+});
+
+describe('ScaledText', () => {
+  it('caps a large figure at a multiplier of 1', () => {
+    render(<ScaledText style={{ fontSize: 88 }}>7:00</ScaledText>);
+    expect(screen.getByTestId('text')).toHaveAttribute('data-max-font-scale', '1');
+  });
+
+  it('uses the override multiplier when given', () => {
+    render(
+      <ScaledText style={{ fontSize: 16 }} maxFontSizeMultiplier={1}>
+        Body
+      </ScaledText>,
+    );
+    expect(screen.getByTestId('text')).toHaveAttribute('data-max-font-scale', '1');
+  });
+});
+
+describe('ScaledTextInput', () => {
+  it('caps a body input at a multiplier of 2', () => {
+    render(<ScaledTextInput style={{ fontSize: 16 }} />);
+    expect(screen.getByTestId('text-input')).toHaveAttribute('data-max-font-scale', '2');
+  });
+});

package/src/native/ScaledText.tsx

@@ -0,0 +1,30 @@
+import { forwardRef } from 'react';
+import { StyleSheet, Text, TextInput } from 'react-native';
+import type { StyleProp, TextInputProps, TextProps, TextStyle } from 'react-native';
+import { DEFAULT_FONT_SIZE, maxFontScaleFor } from './fontScale';
+
+/** The ceiling for a text with this style (see `maxFontScaleFor`), unless the caller passes its own. */
+export function maxFontScaleForStyle(style: StyleProp<TextStyle>, override?: number | null): number {
+  if (override !== undefined && override !== null) return override;
+  const fontSize = StyleSheet.flatten(style)?.fontSize;
+  return maxFontScaleFor(typeof fontSize === 'number' ? fontSize : DEFAULT_FONT_SIZE);
+}
+
+/**
+ * React Native's `Text` with a ceiling on how far it grows with the OS text size, taken from its
+ * own font size. Pass `maxFontSizeMultiplier` to override it, e.g. `1` for text in a fixed shape.
+ */
+export const ScaledText = forwardRef<Text, TextProps>(function ScaledText(
+  { maxFontSizeMultiplier, style, ...rest },
+  ref,
+) {
+  return <Text ref={ref} style={style} maxFontSizeMultiplier={maxFontScaleForStyle(style, maxFontSizeMultiplier)} {...rest} />;
+});
+
+/** React Native's `TextInput` with the same ceiling as `ScaledText`. */
+export const ScaledTextInput = forwardRef<TextInput, TextInputProps>(function ScaledTextInput(
+  { maxFontSizeMultiplier, style, ...rest },
+  ref,
+) {
+  return <TextInput ref={ref} style={style} maxFontSizeMultiplier={maxFontScaleForStyle(style, maxFontSizeMultiplier)} {...rest} />;
+});

package/src/native/fontScale.spec.ts

@@ -0,0 +1,35 @@
+import { maxFontScaleFor } from './fontScale';
+
+describe('maxFontScaleFor', () => {
+  it('returns 2 for a font size of 13', () => {
+    expect(maxFontScaleFor(13)).toBe(2);
+  });
+
+  it('returns 2 for a font size of 19.5', () => {
+    expect(maxFontScaleFor(19.5)).toBe(2);
+  });
+
+  it('returns 1.5 for a font size of 20', () => {
+    expect(maxFontScaleFor(20)).toBe(1.5);
+  });
+
+  it('returns 1.5 for a font size of 25', () => {
+    expect(maxFontScaleFor(25)).toBe(1.5);
+  });
+
+  it('returns 1.3 for a font size of 26', () => {
+    expect(maxFontScaleFor(26)).toBe(1.3);
+  });
+
+  it('returns 1.3 for a font size of 59', () => {
+    expect(maxFontScaleFor(59)).toBe(1.3);
+  });
+
+  it('returns 1 for a font size of 60', () => {
+    expect(maxFontScaleFor(60)).toBe(1);
+  });
+
+  it('returns 1 for a font size of 112', () => {
+    expect(maxFontScaleFor(112)).toBe(1);
+  });
+});

package/src/native/fontScale.ts

@@ -0,0 +1,15 @@
+/**
+ * How far text of this size may grow with the OS text size (iOS Dynamic Type, Android font
+ * scale), as React Native's `maxFontSizeMultiplier`. Big text grows less: a 16 pt body line may
+ * double, a 32 pt heading grows to about 42, and a figure of 60 pt or more (a countdown, a score)
+ * stays as it is.
+ */
+export function maxFontScaleFor(fontSize: number): number {
+  if (fontSize >= 60) return 1;
+  if (fontSize >= 26) return 1.3;
+  if (fontSize >= 20) return 1.5;
+  return 2;
+}
+
+/** React Native's own font size for a text whose style sets none. */
+export const DEFAULT_FONT_SIZE = 14;