@pickle-ui/react-native 1.0.0-beta.2 → 1.0.0-beta.3

package/src/components/Button.tsx

@@ -6,8 +6,9 @@ import { cn } from '../lib/cn';
 import { Spinner } from './Spinner';
 
 // Same variants, sizes and dimensions as `Button` in @pickle-ui/react on a
-// phone, with its text sizes from `sm` up. Like the web's `pointer-coarse` hit area, `hitSlop` stretches every
-// size to a 44pt touch target. Paddings leave room for the 1pt border.
+// phone, with its text sizes from `sm` up. `hitSlop` stretches every size to a
+// 44pt touch target, like the web's `pointer-coarse` hit area. Paddings leave
+// room for the 1pt border.
 const buttonVariants = cva(
   'flex-row items-center justify-center gap-2 rounded-lg border disabled:opacity-64',
   {
@@ -42,7 +43,7 @@ const buttonVariants = cva(
   },
 );
 
-const labelVariants = cva('font-medium', {
+const labelVariants = cva('font-sans font-medium', {
   compoundVariants: [
     { className: 'underline', pressed: true, variant: 'link' },
   ],

package/src/components/Card.tsx

@@ -45,10 +45,13 @@ function CardFooter({ className, ...props }: CardFooterProps) {
  * like the web header's grid.
  */
 function CardHeader({ children, className, ...props }: CardHeaderProps) {
-  const parts = Children.toArray(children);
-  const actions = parts.filter(
-    (child) => isValidElement(child) && child.type === CardAction,
-  );
+  const actions: React.ReactNode[] = [];
+  const rest: React.ReactNode[] = [];
+  for (const child of Children.toArray(children)) {
+    (isValidElement(child) && child.type === CardAction ? actions : rest).push(
+      child,
+    );
+  }
 
   if (actions.length === 0) {
     return (
@@ -63,9 +66,7 @@ function CardHeader({ children, className, ...props }: CardHeaderProps) {
       className={cn('flex-row items-start gap-4 px-6', className)}
       {...props}
     >
-      <View className="flex-1 gap-1.5">
-        {parts.filter((child) => !actions.includes(child))}
-      </View>
+      <View className="flex-1 gap-1.5">{rest}</View>
       {actions}
     </View>
   );
@@ -86,7 +87,10 @@ function CardRoot({ className, ...props }: CardProps) {
 function CardTitle({ className, ...props }: CardTitleProps) {
   return (
     <Text
-      className={cn('text-card-foreground leading-none', className)}
+      className={cn(
+        'text-card-foreground font-heading leading-none',
+        className,
+      )}
       variant="h3"
       {...props}
     />

package/src/components/Text.stories.tsx

@@ -1,8 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 
 import { View } from 'react-native';
+import { ScopedVariables } from 'uniwind';
 
 import { type ComponentMatrixCellProps, Story } from './_internal/Story';
+import { Badge } from './Badge';
+import { Button } from './Button';
+import { Card } from './Card';
+import { Input } from './form/Input';
 import { Text, type TextProps } from './Text';
 
 const meta = {
@@ -38,11 +43,47 @@ const TONE_COLUMNS: { key: 'default' | TextTone; label: string }[] = [
   { key: 'destructive', label: 'Destructive' },
 ];
 
+// An app sets `--font-sans` in its stylesheet; `ScopedVariables` sets it here
+// so both fonts sit side by side. On the web, `--font-heading` resolves
+// where it's declared, so the scope sets it too; native resolves it in place.
+const FONT_COLUMNS = [
+  { description: 'No --font-sans', key: '', label: 'System font' },
+  {
+    description: "--font-sans: 'Georgia'",
+    key: 'Georgia',
+    label: 'App font',
+  },
+];
+
 const WEIGHT_ROWS: { key: TextWeight; label: string }[] = [
   { key: 'normal', label: 'Normal' },
   { key: 'bold', label: 'Bold' },
 ];
 
+function FontCell({ column }: ComponentMatrixCellProps) {
+  return (
+    <ScopedVariables
+      variables={
+        column.key
+          ? { '--font-heading': column.key, '--font-sans': column.key }
+          : {}
+      }
+    >
+      <Card className="w-80">
+        <Card.Header>
+          <Card.Title>Weekly report</Card.Title>
+          <Card.Description>Every project, every Monday.</Card.Description>
+        </Card.Header>
+        <Card.Content className="items-start gap-3">
+          <Badge variant="success">Shipped</Badge>
+          <Input accessibilityLabel="Email" placeholder="ada@example.com" />
+          <Button>Subscribe</Button>
+        </Card.Content>
+      </Card>
+    </ScopedVariables>
+  );
+}
+
 function ToneCell({ column, row }: ComponentMatrixCellProps) {
   return (
     <Text
@@ -98,6 +139,14 @@ export const All: StoryDefinition = {
         />
       </Story.Section>
 
+      <Story.Section title="App font">
+        <Story.Matrix
+          Cell={FontCell}
+          columns={FONT_COLUMNS}
+          rows={[{ key: 'card', label: 'Components' }]}
+        />
+      </Story.Section>
+
       <Story.Section title="Truncate">
         <View className="border-border w-64 rounded-md border p-3">
           <Text truncate>

package/src/components/Text.tsx

@@ -5,7 +5,7 @@ import { cn } from '../lib/cn';
 
 // Same variants, tones and weights as `Text` in @pickle-ui/react, sized by the
 // shared type scale (`@pickle-ui/tokens/typography.css`).
-const textVariants = cva('text-foreground', {
+const textVariants = cva('text-foreground font-sans', {
   defaultVariants: { variant: 'body' },
   variants: {
     tone: {
@@ -16,8 +16,8 @@ const textVariants = cva('text-foreground', {
     variant: {
       body: 'text-body',
       code: 'text-code bg-muted self-start overflow-hidden rounded px-2 py-1',
-      h1: 'text-h1 font-semibold tracking-tight',
-      h2: 'text-h2 font-semibold tracking-tight',
+      h1: 'font-heading text-h1 font-semibold tracking-tight',
+      h2: 'font-heading text-h2 font-semibold tracking-tight',
       h3: 'text-h3 font-semibold',
       h4: 'text-h4 font-medium',
       lead: 'text-lead',
@@ -33,7 +33,8 @@ const textVariants = cva('text-foreground', {
 const HEADINGS = new Set(['h1', 'h2', 'h3', 'h4']);
 
 // Uniwind passes `font-mono`'s web font stack through as is, which native
-// fonts don't resolve, so `code` names each platform's monospace font.
+// fonts don't resolve, so `code` names each platform's monospace font. The
+// `style` prop wins over `font-sans` from `className`.
 const styles = StyleSheet.create({
   code: { fontFamily: Platform.select({ default: 'monospace', ios: 'Menlo' }) },
 });

package/src/components/form/Checkbox.tsx

@@ -62,9 +62,72 @@ export function Checkbox({
     defaultChecked,
     onCheckedChange,
   );
+  return (
+    // `role` and `aria-*` are React Native's current accessibility props;
+    // `accessibilityState` keeps any extra state the caller passes.
+    <Pressable
+      accessibilityState={{
+        ...accessibilityState,
+        checked: indeterminate ? 'mixed' : checked,
+        disabled,
+      }}
+      aria-checked={indeterminate ? 'mixed' : checked}
+      aria-disabled={disabled}
+      className={
+        label
+          ? cn('flex-row items-center gap-2', classNames?.field)
+          : 'self-start'
+      }
+      disabled={disabled}
+      hitSlop={label ? fieldHitSlop[size] : boxHitSlop[size]}
+      onPress={() => setChecked(!checked)}
+      role="checkbox"
+      {...props}
+    >
+      <CheckboxBox
+        checked={checked}
+        className={className}
+        disabled={disabled}
+        indeterminate={indeterminate}
+        indicatorClassName={classNames?.indicator}
+        invalid={invalid}
+        size={size}
+      />
+      {label ? (
+        <Text
+          className={cn(
+            'text-foreground font-sans text-sm leading-none font-medium',
+            disabled && 'opacity-50',
+            classNames?.label,
+          )}
+        >
+          {label}
+        </Text>
+      ) : null}
+    </Pressable>
+  );
+}
+
+function CheckboxBox({
+  checked,
+  className,
+  disabled,
+  indeterminate,
+  indicatorClassName,
+  invalid,
+  size,
+}: {
+  checked: boolean;
+  className?: string;
+  disabled: boolean;
+  indeterminate: boolean;
+  indicatorClassName?: string;
+  invalid: boolean;
+  size: 'md' | 'sm';
+}) {
   const filled = checked && !indeterminate;
 
-  const box = (
+  return (
     <View
       className={cn(
         'items-center justify-center rounded-[4px] border shadow-xs shadow-black/5',
@@ -87,7 +150,7 @@ export function Checkbox({
           className={cn(
             'bg-foreground rounded-full',
             minusClasses[size],
-            classNames?.indicator,
+            indicatorClassName,
           )}
         />
       ) : checked ? (
@@ -95,47 +158,10 @@ export function Checkbox({
           className={cn(
             'border-primary-foreground -mt-px rotate-45',
             checkClasses[size],
-            classNames?.indicator,
+            indicatorClassName,
           )}
         />
       ) : null}
     </View>
   );
-
-  return (
-    // `role` and `aria-*` are React Native's current accessibility props;
-    // `accessibilityState` keeps any extra state the caller passes.
-    <Pressable
-      accessibilityState={{
-        ...accessibilityState,
-        checked: indeterminate ? 'mixed' : checked,
-        disabled,
-      }}
-      aria-checked={indeterminate ? 'mixed' : checked}
-      aria-disabled={disabled}
-      className={
-        label
-          ? cn('flex-row items-center gap-2', classNames?.field)
-          : 'self-start'
-      }
-      disabled={disabled}
-      hitSlop={label ? fieldHitSlop[size] : boxHitSlop[size]}
-      onPress={() => setChecked(!checked)}
-      role="checkbox"
-      {...props}
-    >
-      {box}
-      {label ? (
-        <Text
-          className={cn(
-            'text-foreground text-sm leading-none font-medium',
-            disabled && 'opacity-50',
-            classNames?.label,
-          )}
-        >
-          {label}
-        </Text>
-      ) : null}
-    </Pressable>
-  );
 }

package/src/components/form/FormDescription.tsx

@@ -7,7 +7,7 @@ export type FormDescriptionProps = React.ComponentProps<typeof Text>;
 export function FormDescription({ className, ...props }: FormDescriptionProps) {
   return (
     <Text
-      className={cn('text-muted-foreground text-sm', className)}
+      className={cn('text-muted-foreground font-sans text-sm', className)}
       {...props}
     />
   );

package/src/components/form/FormError.tsx

@@ -9,7 +9,10 @@ export function FormError({ className, ...props }: FormErrorProps) {
   return (
     <Text
       accessibilityLiveRegion="polite"
-      className={cn('text-destructive text-sm font-medium', className)}
+      className={cn(
+        'text-destructive font-sans text-sm font-medium',
+        className,
+      )}
       role="alert"
       {...props}
     />

package/src/components/form/FormLabel.tsx

@@ -8,7 +8,7 @@ export function FormLabel({ className, ...props }: FormLabelProps) {
   return (
     <Text
       className={cn(
-        'text-foreground text-sm leading-none font-medium',
+        'text-foreground font-sans text-sm leading-none font-medium',
         className,
       )}
       {...props}

package/src/components/form/Input.tsx

@@ -47,7 +47,7 @@ export function Input({
     <TextInput
       accessibilityState={{ disabled }}
       className={cn(
-        'text-foreground flex-1 text-[14px] outline-none',
+        'text-foreground flex-1 font-sans text-[14px] outline-none',
         paddingClasses[size],
         unstyled ? cn(heightClasses[size], disabled && 'opacity-64') : 'h-full',
         unstyled ? className : classNames?.input,

package/src/components/form/InputGroup.tsx

@@ -86,7 +86,7 @@ function InputGroupAddon({
     >
       {Children.map(children, (child) =>
         typeof child === 'string' || typeof child === 'number' ? (
-          <Text className="text-foreground text-[14px]">{child}</Text>
+          <Text className="text-foreground font-sans text-[14px]">{child}</Text>
         ) : (
           child
         ),
@@ -204,7 +204,7 @@ function InputGroupRoot({ children, className, ...props }: InputGroupProps) {
 function InputGroupText({ className, ...props }: InputGroupTextProps) {
   return (
     <Text
-      className={cn('text-muted-foreground text-[14px]', className)}
+      className={cn('text-muted-foreground font-sans text-[14px]', className)}
       numberOfLines={1}
       {...props}
     />

package/src/components/form/RadioGroup.tsx

@@ -100,7 +100,7 @@ function RadioGroupItem({
       {label ? (
         <Text
           className={cn(
-            'text-sm leading-none font-medium',
+            'font-sans text-sm leading-none font-medium',
             disabled ? 'text-muted-foreground' : 'text-foreground',
             classNames?.label,
           )}

package/src/components/form/Textarea.tsx

@@ -51,7 +51,7 @@ export function Textarea({
       <TextInput
         accessibilityState={{ disabled }}
         className={cn(
-          'text-foreground web:field-sizing-content web:resize-none flex-1 py-2 text-sm outline-none',
+          'text-foreground web:field-sizing-content web:resize-none flex-1 py-2 font-sans text-sm outline-none',
           sizeClasses[size],
           classNames?.textarea,
         )}

package/src/fonts.test.tsx

@@ -0,0 +1,244 @@
+/// <reference types="node" />
+import {
+  render,
+  renderHook,
+  type RenderHookOptions,
+  screen,
+} from '@testing-library/react-native';
+import { execFileSync } from 'node:child_process';
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { useForm } from 'react-hook-form';
+import { type StyleProp, StyleSheet, type TextStyle } from 'react-native';
+import { ScopedVariables, useResolveClassNames } from 'uniwind';
+
+import { Badge } from './components/Badge';
+import { Button } from './components/Button';
+import { Card } from './components/Card';
+import { Checkbox } from './components/form/Checkbox';
+import { Form } from './components/form/Form';
+import { Input } from './components/form/Input';
+import { InputGroup } from './components/form/InputGroup';
+import { RadioGroup } from './components/form/RadioGroup';
+import { Textarea } from './components/form/Textarea';
+import { Text } from './components/Text';
+
+// Resolves the components' classes the way an app does: `styles.css`
+// compiled by Uniwind for iOS, followed by the app's own CSS, then loaded
+// into Uniwind's runtime.
+
+type HostElement = { props: { className?: string; style?: TextStyle } };
+
+/** The family the element renders with: its classes, then its `style`. */
+async function fontFamily(
+  element: HostElement,
+  options?: RenderHookOptions<unknown>,
+) {
+  const { result } = await renderHook(
+    () => useResolveClassNames(element.props.className ?? ''),
+    options,
+  );
+  // Uniwind's components render `style={[classNameStyle, props.style]}`.
+  const style: StyleProp<TextStyle> = [result.current, element.props.style];
+  return StyleSheet.flatten(style)?.fontFamily;
+}
+
+function FormFields() {
+  const form = useForm({ defaultValues: { email: '', name: '' } });
+
+  return (
+    <Form form={form} onSubmit={() => {}}>
+      <Form.Field
+        description="Field description"
+        label="Field label"
+        name="name"
+      >
+        <Form.Input placeholder="Form input" />
+      </Form.Field>
+      <Form.Field error="Field error" name="email">
+        <Form.Input />
+      </Form.Field>
+    </Form>
+  );
+}
+
+/** Compiles `styles.css` and `css` as an app's `global.css` and loads them. */
+function loadStyles(css: string) {
+  // Inside the package, so the compiled module's `require('uniwind')` resolves.
+  const cache = join(__dirname, '../node_modules/.cache');
+  mkdirSync(cache, { recursive: true });
+  const dir = mkdtempSync(join(cache, 'pickle-fonts-'));
+  const file = join(dir, 'global.css');
+  writeFileSync(file, `@import '${join(__dirname, 'styles.css')}';\n${css}`);
+  try {
+    const code = execFileSync(
+      process.execPath,
+      [join(__dirname, '../test/compile-uniwind.mjs'), file, 'ios'],
+      { encoding: 'utf8' },
+    );
+    writeFileSync(join(dir, 'styles.js'), code);
+    jest.requireActual(join(dir, 'styles.js'));
+  } finally {
+    rmSync(dir, { force: true, recursive: true });
+  }
+}
+
+async function renderComponents() {
+  await render(
+    <>
+      <Text>Body text</Text>
+      <Text variant="h1">Heading 1</Text>
+      <Text variant="h2">Heading 2</Text>
+      <Text variant="h3">Heading 3</Text>
+      <Text variant="code">pnpm test</Text>
+      <Card>
+        <Card.Header>
+          <Card.Title>Card title</Card.Title>
+          <Card.Description>Card description</Card.Description>
+        </Card.Header>
+      </Card>
+      <Badge>Badge label</Badge>
+      <Button>Button label</Button>
+      <Input placeholder="Input" />
+      <Textarea placeholder="Textarea" />
+      <InputGroup>
+        <InputGroup.Addon>@</InputGroup.Addon>
+        <InputGroup.Input placeholder="Group input" />
+        <InputGroup.Addon align="inline-end">
+          <InputGroup.Text>.com</InputGroup.Text>
+        </InputGroup.Addon>
+      </InputGroup>
+      <Checkbox label="Checkbox label" />
+      <RadioGroup>
+        <RadioGroup.Item label="Radio label" value="a" />
+      </RadioGroup>
+      <FormFields />
+    </>,
+  );
+}
+
+const SANS_TEXT = [
+  'Body text',
+  'Heading 3',
+  'Card description',
+  'Badge label',
+  'Button label',
+  '@',
+  '.com',
+  'Checkbox label',
+  'Radio label',
+  'Field label',
+  'Field description',
+  'Field error',
+];
+const HEADING_TEXT = ['Heading 1', 'Heading 2', 'Card title'];
+const FIELDS = ['Input', 'Textarea', 'Group input', 'Form input'];
+
+function elements(names: string[]) {
+  return names.map((name) => ({
+    element: FIELDS.includes(name)
+      ? screen.getByPlaceholderText(name)
+      : screen.getByText(name),
+    name,
+  }));
+}
+
+function every(names: string[], value: unknown) {
+  return Object.fromEntries(names.map((name) => [name, value]));
+}
+
+/** Finds every element first: `renderHook` replaces what `screen` queries. */
+async function fontFamilies(
+  names: string[],
+  options?: RenderHookOptions<unknown>,
+) {
+  const families: Record<string, unknown> = {};
+  for (const { element, name } of elements(names)) {
+    families[name] = await fontFamily(element, options);
+  }
+  return families;
+}
+
+const ALL = [...SANS_TEXT, ...HEADING_TEXT, ...FIELDS];
+
+describe('fonts', () => {
+  describe('when the app sets no font', () => {
+    beforeAll(() => loadStyles(''), 60_000);
+
+    it('sets no family, so text keeps the system font', async () => {
+      await renderComponents();
+
+      expect(await fontFamilies(ALL)).toEqual(every(ALL, undefined));
+    });
+
+    it('keeps the monospace font for code', async () => {
+      await renderComponents();
+
+      expect(await fontFamily(screen.getByText('pnpm test'))).toBe('Menlo');
+    });
+  });
+
+  describe('when the app sets --font-sans', () => {
+    beforeAll(() => loadStyles("@theme { --font-sans: 'Nunito'; }"), 60_000);
+
+    it('applies it to every component, headings included', async () => {
+      await renderComponents();
+
+      expect(await fontFamilies(ALL)).toEqual(every(ALL, 'Nunito'));
+    });
+
+    it('keeps the monospace font for code', async () => {
+      await renderComponents();
+
+      expect(await fontFamily(screen.getByText('pnpm test'))).toBe('Menlo');
+    });
+  });
+
+  describe('when the app sets --font-sans and --font-heading', () => {
+    beforeAll(
+      () =>
+        loadStyles("@theme { --font-sans: 'Nunito'; --font-heading: 'Lora'; }"),
+      60_000,
+    );
+
+    it('applies --font-heading to h1, h2 and Card.Title', async () => {
+      await renderComponents();
+
+      expect(await fontFamilies(ALL)).toEqual({
+        ...every([...SANS_TEXT, ...FIELDS], 'Nunito'),
+        ...every(HEADING_TEXT, 'Lora'),
+      });
+    });
+  });
+
+  describe('when the app sets --font-sans in a :root rule', () => {
+    beforeAll(
+      () => loadStyles("@layer theme { :root { --font-sans: 'Nunito'; } }"),
+      60_000,
+    );
+
+    it('applies it', async () => {
+      await renderComponents();
+
+      expect(await fontFamilies(ALL)).toEqual(every(ALL, 'Nunito'));
+    });
+  });
+
+  describe('when the app sets --font-sans at runtime', () => {
+    beforeAll(() => loadStyles(''), 60_000);
+
+    it('applies it inside ScopedVariables, headings included', async () => {
+      await renderComponents();
+
+      expect(
+        await fontFamilies(ALL, {
+          wrapper: ({ children }) => (
+            <ScopedVariables variables={{ '--font-sans': 'Nunito' }}>
+              {children}
+            </ScopedVariables>
+          ),
+        }),
+      ).toEqual(every(ALL, 'Nunito'));
+    });
+  });
+});

package/src/styles.css

@@ -10,3 +10,15 @@
 @import 'uniwind';
 @import '@pickle-ui/tokens/native.css';
 @import './base.css';
+
+/*
+ * The tokens' `--font-*` variables read the app's own on the web, where an
+ * unset one falls back to the inherited font. Uniwind resolves them to
+ * themselves and overflows the stack, so take the native defaults from
+ * `base.css` again. Declare your own `--font-*` after importing this file.
+ */
+@theme {
+  --font-sans: var(--pickle-no-font);
+  --font-heading: var(--font-sans);
+  --font-mono: var(--pickle-no-font);
+}