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

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;

package/src/test/cornerRadii.ts

@@ -0,0 +1,15 @@
+/**
+ * The four corner radii of an element, clockwise from top-left.
+ *
+ * react-native-web expands `borderRadius` into the four corner longhands, and jsdom
+ * does not rebuild the `border-radius` shorthand from them, so a spec reads the corners.
+ */
+export function cornerRadii(element: Element): string[] {
+  const style = getComputedStyle(element);
+  return [
+    style.borderTopLeftRadius,
+    style.borderTopRightRadius,
+    style.borderBottomRightRadius,
+    style.borderBottomLeftRadius,
+  ];
+}