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

package/src/components/Text.test.tsx

@@ -4,12 +4,44 @@ import { Text } from './Text';
 
 describe('Text', () => {
   it('renders its children', async () => {
+    await render(<Text tone="muted">Hello</Text>);
+
+    expect(screen.getByText('Hello')).toBeOnTheScreen();
+  });
+
+  it('announces heading variants as headers', async () => {
+    await render(
+      <>
+        <Text variant="h2">Projects</Text>
+        <Text variant="lead">Everything in flight</Text>
+      </>,
+    );
+
+    expect(screen.getByRole('header', { name: 'Projects' })).toBeOnTheScreen();
+    expect(
+      screen.queryByRole('header', { name: 'Everything in flight' }),
+    ).toBeNull();
+  });
+
+  it('cuts truncated text to one line', async () => {
+    await render(<Text truncate>A long project name</Text>);
+
+    expect(screen.getByText('A long project name')).toHaveProp(
+      'numberOfLines',
+      1,
+    );
+  });
+
+  it('sets the code variant in a monospace font', async () => {
     await render(
-      <Text tone="muted" variant="h1">
-        Hello
+      <Text style={{ color: 'red' }} variant="code">
+        pnpm test
       </Text>,
     );
 
-    expect(screen.getByText('Hello')).toBeOnTheScreen();
+    expect(screen.getByText('pnpm test')).toHaveStyle({
+      color: 'red',
+      fontFamily: expect.any(String),
+    });
   });
 });

package/src/components/Text.tsx

@@ -1,9 +1,10 @@
 import { cva, type VariantProps } from 'class-variance-authority';
-import { Text as NativeText } from 'react-native';
+import { Text as NativeText, Platform, StyleSheet } from 'react-native';
 
 import { cn } from '../lib/cn';
 
-// Same variant and tone names as `Text` in @pickle-ui/react.
+// 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', {
   defaultVariants: { variant: 'body' },
   variants: {
@@ -13,24 +14,53 @@ const textVariants = cva('text-foreground', {
       primary: 'text-primary',
     },
     variant: {
-      body: 'text-sm',
-      h1: 'text-3xl font-semibold tracking-tight',
-      h2: 'text-2xl font-semibold tracking-tight',
-      h3: 'text-xl font-semibold',
-      h4: 'text-lg font-medium',
-      lead: 'text-base',
-      small: 'text-xs',
+      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',
+      h3: 'text-h3 font-semibold',
+      h4: 'text-h4 font-medium',
+      lead: 'text-lead',
+      small: 'text-small',
+    },
+    weight: {
+      bold: 'font-semibold',
+      normal: 'font-normal',
     },
   },
 });
 
+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.
+const styles = StyleSheet.create({
+  code: { fontFamily: Platform.select({ default: 'monospace', ios: 'Menlo' }) },
+});
+
 export type TextProps = React.ComponentProps<typeof NativeText> &
-  VariantProps<typeof textVariants>;
+  VariantProps<typeof textVariants> & {
+    /** Cuts the text to one line with an ellipsis. */
+    truncate?: boolean;
+  };
 
-export function Text({ className, tone, variant, ...props }: TextProps) {
+export function Text({
+  className,
+  style,
+  tone,
+  truncate,
+  variant = 'body',
+  weight,
+  ...props
+}: TextProps) {
   return (
     <NativeText
-      className={cn(textVariants({ tone, variant }), className)}
+      accessibilityRole={
+        variant && HEADINGS.has(variant) ? 'header' : undefined
+      }
+      className={cn(textVariants({ tone, variant, weight }), className)}
+      numberOfLines={truncate ? 1 : undefined}
+      style={variant === 'code' ? [styles.code, style] : style}
       {...props}
     />
   );

package/src/components/XStack.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+
+import { Story } from './_internal/Story';
+import { StoryItem as Item } from './_internal/StoryItem';
+import { XStack } from './XStack';
+
+const meta = {
+  component: XStack,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/XStack',
+} satisfies Meta<typeof XStack>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-6xl" title="XStack">
+      <Story.Section title="Horizontal spacing">
+        <XStack gap={3}>
+          <Item>Avatar</Item>
+          <Item>Profile details</Item>
+          <Item>Status</Item>
+        </XStack>
+      </Story.Section>
+
+      <Story.Section title="Distribution">
+        <XStack
+          align="center"
+          className="border-border min-h-48 rounded-md border border-dashed p-4"
+          justify="between"
+        >
+          <Item>Leading action</Item>
+          <Item>Trailing action</Item>
+        </XStack>
+      </Story.Section>
+
+      <Story.Section title="Responsive override">
+        <XStack className="max-sm:flex-col" gap={3}>
+          <Item>Horizontal by default</Item>
+          <Item>Vertical below sm</Item>
+        </XStack>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/XStack.test.tsx

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react-native';
+
+import { XStack } from './XStack';
+
+describe('XStack', () => {
+  it('renders a row with the Flex props', async () => {
+    await render(<XStack align="center" gap={2} testID="stack" />);
+
+    expect(
+      String(screen.getByTestId('stack').props.className).split(' '),
+    ).toEqual(expect.arrayContaining(['flex-row', 'items-center', 'gap-2']));
+  });
+});

package/src/components/XStack.tsx

@@ -0,0 +1,7 @@
+import { Flex, type FlexProps } from './Flex';
+
+export type XStackProps = Omit<FlexProps, 'direction'>;
+
+export function XStack(props: XStackProps) {
+  return <Flex direction="row" {...props} />;
+}

package/src/components/YStack.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+
+import { Story } from './_internal/Story';
+import { StoryItem as Item } from './_internal/StoryItem';
+import { YStack } from './YStack';
+
+const meta = {
+  component: YStack,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/YStack',
+} satisfies Meta<typeof YStack>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-6xl" title="YStack">
+      <Story.Section title="Vertical spacing">
+        <YStack gap={3}>
+          <Item>Avatar</Item>
+          <Item>Profile details</Item>
+          <Item>Status</Item>
+        </YStack>
+      </Story.Section>
+
+      <Story.Section title="Distribution">
+        <YStack
+          align="center"
+          className="border-border min-h-48 rounded-md border border-dashed p-4"
+          justify="between"
+        >
+          <Item>Leading action</Item>
+          <Item>Trailing action</Item>
+        </YStack>
+      </Story.Section>
+
+      <Story.Section title="Responsive override">
+        <YStack className="sm:flex-row" gap={3}>
+          <Item>Vertical by default</Item>
+          <Item>Horizontal from sm</Item>
+        </YStack>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/YStack.test.tsx

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react-native';
+
+import { YStack } from './YStack';
+
+describe('YStack', () => {
+  it('renders a column with the Flex props', async () => {
+    await render(<YStack gap={2} justify="center" testID="stack" />);
+
+    expect(
+      String(screen.getByTestId('stack').props.className).split(' '),
+    ).toEqual(expect.arrayContaining(['flex-col', 'justify-center', 'gap-2']));
+  });
+});

package/src/components/YStack.tsx

@@ -0,0 +1,7 @@
+import { Flex, type FlexProps } from './Flex';
+
+export type YStackProps = Omit<FlexProps, 'direction'>;
+
+export function YStack(props: YStackProps) {
+  return <Flex direction="column" {...props} />;
+}

package/src/components/_internal/InputFrame.tsx

@@ -0,0 +1,50 @@
+import { View } from 'react-native';
+
+import { cn } from '../../lib/cn';
+
+export type InputFrameProps = React.ComponentProps<typeof View> & {
+  disabled?: boolean;
+  focused: boolean;
+  invalid?: boolean;
+};
+
+/**
+ * The border, background and focus ring the web's `Input`, `Textarea` and
+ * `InputGroup` draw around their field. React Native has no `ring`, so a
+ * 3pt outline sits outside the border while the field has focus.
+ */
+export function InputFrame({
+  children,
+  className,
+  disabled,
+  focused,
+  invalid,
+  ...props
+}: InputFrameProps) {
+  return (
+    <View
+      className={cn(
+        'border-input bg-background dark:bg-input/32 w-full flex-row rounded-lg border shadow-xs shadow-black/5',
+        invalid && 'border-destructive/36',
+        focused && (invalid ? 'border-destructive/64' : 'border-ring'),
+        (disabled || focused || invalid) && 'shadow-none',
+        disabled && 'opacity-64',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {focused ? (
+        <View
+          className={cn(
+            'absolute -inset-1 rounded-[calc(var(--radius)+3px)] border-[3px]',
+            invalid
+              ? 'border-destructive/16 dark:border-destructive/24'
+              : 'border-ring/24',
+          )}
+          pointerEvents="none"
+        />
+      ) : null}
+    </View>
+  );
+}

package/src/components/_internal/Story.tsx

@@ -1,5 +1,7 @@
+import { type Icon as TablerIconComponent } from '@tabler/icons-react-native';
 import { type ComponentType, type ReactNode } from 'react';
 import { ScrollView, View } from 'react-native';
+import { useResolveClassNames } from 'uniwind';
 
 import { cn } from '../../lib/cn';
 import { Text } from '../Text';
@@ -29,6 +31,37 @@ type ComponentMatrixRow = {
   label: string;
 };
 
+/**
+ * A Tabler icon, the library the web stories use, dimmed and pulled in like
+ * the web `Button` styles its `svg`s. React Native has no `currentColor`, so
+ * `className` sets its color with the label's class (`text-primary-foreground`,
+ * …) and `size` follows the button's (14 for `xs`, 18 for `xl`).
+ */
+function Icon({
+  className,
+  icon: TablerIcon,
+  size = 16,
+}: {
+  className?: string;
+  icon: TablerIconComponent;
+  size?: number;
+}) {
+  const style = useResolveClassNames(
+    cn('text-foreground -mx-0.5 opacity-80', className),
+  );
+
+  return (
+    <TablerIcon
+      accessibilityElementsHidden
+      color={style.color}
+      importantForAccessibility="no-hide-descendants"
+      size={size}
+      strokeWidth={2}
+      style={style}
+    />
+  );
+}
+
 // Same layout as `Story` in @pickle-ui/react, built on React Native
 // primitives: a 12rem column of row labels, then one column per matrix
 // column that grows from 12rem, like the web's `minmax(12rem, 1fr)`, since
@@ -135,6 +168,7 @@ function Section({ children, title }: { children: ReactNode; title: string }) {
 }
 
 const Story = Object.assign(Layout, {
+  Icon,
   Layout,
   Matrix,
   Section,

package/src/components/_internal/StoryItem.tsx

@@ -0,0 +1,24 @@
+import { View } from 'react-native';
+
+import { cn } from '../../lib/cn';
+import { Text } from '../Text';
+
+/** A labelled box for the layout stories. */
+export function StoryItem({
+  children,
+  className,
+}: {
+  children: string;
+  className?: string;
+}) {
+  return (
+    <View
+      className={cn(
+        'border-border bg-muted items-center justify-center rounded-md border px-4 py-3',
+        className,
+      )}
+    >
+      <Text>{children}</Text>
+    </View>
+  );
+}

package/src/components/_internal/layout.ts

@@ -0,0 +1,103 @@
+import { cn } from '../../lib/cn';
+
+// Same props and spacing scale as the layout helper of @pickle-ui/react. Each
+// class is written out in full so Uniwind finds it in the source.
+
+const alignClasses = {
+  baseline: 'items-baseline',
+  center: 'items-center',
+  end: 'items-end',
+  start: 'items-start',
+  stretch: 'items-stretch',
+} as const;
+
+const gapClasses = {
+  0: 'gap-0',
+  0.5: 'gap-0.5',
+  1: 'gap-1',
+  1.5: 'gap-1.5',
+  2: 'gap-2',
+  2.5: 'gap-2.5',
+  3: 'gap-3',
+  3.5: 'gap-3.5',
+  4: 'gap-4',
+  5: 'gap-5',
+  6: 'gap-6',
+  8: 'gap-8',
+  10: 'gap-10',
+  12: 'gap-12',
+  16: 'gap-16',
+} as const;
+
+export const gapXClasses = {
+  0: 'gap-x-0',
+  0.5: 'gap-x-0.5',
+  1: 'gap-x-1',
+  1.5: 'gap-x-1.5',
+  2: 'gap-x-2',
+  2.5: 'gap-x-2.5',
+  3: 'gap-x-3',
+  3.5: 'gap-x-3.5',
+  4: 'gap-x-4',
+  5: 'gap-x-5',
+  6: 'gap-x-6',
+  8: 'gap-x-8',
+  10: 'gap-x-10',
+  12: 'gap-x-12',
+  16: 'gap-x-16',
+} as const;
+
+export const gapYClasses = {
+  0: 'gap-y-0',
+  0.5: 'gap-y-0.5',
+  1: 'gap-y-1',
+  1.5: 'gap-y-1.5',
+  2: 'gap-y-2',
+  2.5: 'gap-y-2.5',
+  3: 'gap-y-3',
+  3.5: 'gap-y-3.5',
+  4: 'gap-y-4',
+  5: 'gap-y-5',
+  6: 'gap-y-6',
+  8: 'gap-y-8',
+  10: 'gap-y-10',
+  12: 'gap-y-12',
+  16: 'gap-y-16',
+} as const;
+
+const justifyClasses = {
+  around: 'justify-around',
+  between: 'justify-between',
+  center: 'justify-center',
+  end: 'justify-end',
+  evenly: 'justify-evenly',
+  start: 'justify-start',
+} as const;
+
+export type LayoutAlign = keyof typeof alignClasses;
+export type LayoutGap = keyof typeof gapClasses;
+export type LayoutJustify = keyof typeof justifyClasses;
+
+export type LayoutStyleProps = {
+  align?: LayoutAlign;
+  gap?: LayoutGap;
+  gapX?: LayoutGap;
+  gapY?: LayoutGap;
+  justify?: LayoutJustify;
+};
+
+export function getLayoutClasses({
+  align,
+  gap,
+  gapX,
+  gapY,
+  justify,
+}: LayoutStyleProps) {
+  return cn(
+    align === undefined ? undefined : alignClasses[align],
+    gap === undefined ? undefined : gapClasses[gap],
+    gapX === undefined ? undefined : gapXClasses[gapX],
+    gapY === undefined ? undefined : gapYClasses[gapY],
+    justify === undefined ? undefined : justifyClasses[justify],
+  );
+}

package/src/components/_internal/useControllableState.ts

@@ -0,0 +1,25 @@
+import { useCallback, useState } from 'react';
+
+/**
+ * State a component owns unless its parent controls it, like Base UI's
+ * `checked` / `defaultChecked` / `onCheckedChange` trios: `value` wins when
+ * defined, and every change is reported through `onChange`.
+ */
+export function useControllableState<T>(
+  value: T | undefined,
+  defaultValue: T,
+  onChange?: (value: T) => void,
+) {
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const controlled = value !== undefined;
+
+  const setValue = useCallback(
+    (next: T) => {
+      if (!controlled) setUncontrolled(next);
+      onChange?.(next);
+    },
+    [controlled, onChange],
+  );
+
+  return [controlled ? value : uncontrolled, setValue] as const;
+}

package/src/components/form/Checkbox.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+
+import { type ComponentMatrixCellProps, Story } from '../_internal/Story';
+import { Checkbox, type CheckboxProps } from './Checkbox';
+
+const meta = {
+  component: Checkbox,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/form/Checkbox',
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type CheckboxSize = NonNullable<CheckboxProps['size']>;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const STATE_COLUMNS: {
+  key: string;
+  label: string;
+  props: Partial<CheckboxProps>;
+}[] = [
+  { key: 'unchecked', label: 'Unchecked', props: {} },
+  { key: 'checked', label: 'Checked', props: { defaultChecked: true } },
+  { key: 'indeterminate', label: 'Mixed', props: { indeterminate: true } },
+  {
+    key: 'invalid',
+    label: 'Invalid',
+    props: { defaultChecked: true, invalid: true },
+  },
+  { key: 'disabled', label: 'Disabled', props: { disabled: true } },
+];
+
+const SIZE_ROWS: { key: CheckboxSize; label: string }[] = [
+  { key: 'md', label: 'Medium' },
+  { key: 'sm', label: 'Small' },
+];
+
+const STATE_PROPS = Object.fromEntries(
+  STATE_COLUMNS.map((state) => [state.key, state.props]),
+) as Record<string, Partial<CheckboxProps>>;
+
+function CheckboxStateCell({ column, row }: ComponentMatrixCellProps) {
+  return (
+    <Checkbox
+      accessibilityLabel={`${row.label} ${column.label}`}
+      size={row.key as CheckboxSize}
+      {...STATE_PROPS[column.key]}
+    />
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-5xl" title="Checkbox">
+      <Story.Section title="Sizes and states">
+        <Story.Matrix
+          Cell={CheckboxStateCell}
+          columns={STATE_COLUMNS}
+          rows={SIZE_ROWS}
+        />
+      </Story.Section>
+
+      <Story.Section title="Label">
+        <Checkbox label="Accept terms" />
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/form/Checkbox.test.tsx

@@ -0,0 +1,88 @@
+import { fireEvent, render, screen } from '@testing-library/react-native';
+
+import { Checkbox } from './Checkbox';
+
+describe('Checkbox', () => {
+  it('renders unchecked by default', async () => {
+    await render(<Checkbox accessibilityLabel="Accept" />);
+
+    expect(screen.getByRole('checkbox', { name: 'Accept' })).not.toBeChecked();
+  });
+
+  it('toggles on press', async () => {
+    await render(<Checkbox accessibilityLabel="Accept" />);
+    const checkbox = screen.getByRole('checkbox', { name: 'Accept' });
+
+    await fireEvent.press(checkbox);
+    expect(checkbox).toBeChecked();
+
+    await fireEvent.press(checkbox);
+    expect(checkbox).not.toBeChecked();
+  });
+
+  it('is named by its label, which toggles it', async () => {
+    const onCheckedChange = jest.fn();
+    await render(
+      <Checkbox label="Accept terms" onCheckedChange={onCheckedChange} />,
+    );
+
+    await fireEvent.press(screen.getByText('Accept terms'));
+
+    expect(
+      screen.getByRole('checkbox', { name: 'Accept terms' }),
+    ).toBeChecked();
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+
+  it('follows the checked prop when controlled', async () => {
+    const onCheckedChange = jest.fn();
+    await render(
+      <Checkbox
+        accessibilityLabel="Accept"
+        checked={false}
+        onCheckedChange={onCheckedChange}
+      />,
+    );
+
+    await fireEvent.press(screen.getByRole('checkbox'));
+
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+    expect(screen.getByRole('checkbox')).not.toBeChecked();
+  });
+
+  it('reports the mixed state when indeterminate', async () => {
+    await render(<Checkbox accessibilityLabel="Partial" indeterminate />);
+
+    expect(
+      screen.getByRole('checkbox', { name: 'Partial' }),
+    ).toBePartiallyChecked();
+  });
+
+  it('is disabled and ignores presses', async () => {
+    await render(<Checkbox accessibilityLabel="Accept" disabled />);
+    const checkbox = screen.getByRole('checkbox', { name: 'Accept' });
+
+    await fireEvent.press(checkbox);
+
+    expect(checkbox).toBeDisabled();
+    expect(checkbox).not.toBeChecked();
+  });
+
+  it('reaches a 44pt touch target', async () => {
+    await render(
+      <>
+        <Checkbox accessibilityLabel="Box" />
+        <Checkbox label="Row" size="sm" />
+      </>,
+    );
+
+    expect(screen.getByRole('checkbox', { name: 'Box' })).toHaveProp(
+      'hitSlop',
+      13,
+    );
+    expect(screen.getByRole('checkbox', { name: 'Row' })).toHaveProp(
+      'hitSlop',
+      { bottom: 15, top: 15 },
+    );
+  });
+});