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

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/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 },
+    );
+  });
+});

package/src/components/form/Checkbox.tsx

@@ -0,0 +1,167 @@
+import { Pressable, Text, View } from 'react-native';
+
+import { cn } from '../../lib/cn';
+import { useControllableState } from '../_internal/useControllableState';
+
+// Same box sizes as `Checkbox` in @pickle-ui/react. `hitSlop` stretches the
+// box to a 44pt touch target, vertically only when a label already widens it.
+const boxClasses = { md: 'size-4.5', sm: 'size-3.5' } as const;
+const boxHitSlop = { md: 13, sm: 15 } as const;
+const fieldHitSlop = {
+  md: { bottom: 13, top: 13 },
+  sm: { bottom: 15, top: 15 },
+} as const;
+
+// The web draws Tabler's check and minus icons. Without SVG, the check is the
+// bottom and right borders of a rotated box, and the minus a bar.
+const checkClasses = {
+  md: 'h-[9px] w-[5px] border-b-[1.5px] border-r-[1.5px]',
+  sm: 'h-[7px] w-[4px] border-b-[1.25px] border-r-[1.25px]',
+} as const;
+const minusClasses = { md: 'h-[1.5px] w-2', sm: 'h-[1.25px] w-1.5' } as const;
+
+export type CheckboxProps = Omit<
+  React.ComponentProps<typeof Pressable>,
+  'children' | 'disabled'
+> & {
+  checked?: boolean;
+  /** Class overrides for the row around the box and label, the check and the label. */
+  classNames?: { field?: string; indicator?: string; label?: string };
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  /** Shows a minus instead of the check, for a partly selected group. */
+  indeterminate?: boolean;
+  /** Marks the value as invalid, like the web's `aria-invalid`. */
+  invalid?: boolean;
+  /** Text next to the box; pressing it toggles the checkbox and names it. */
+  label?: React.ReactNode;
+  onCheckedChange?: (checked: boolean) => void;
+  size?: 'md' | 'sm';
+};
+
+/**
+ * A checkbox, like `Checkbox` in @pickle-ui/react. Give it a `label`, or an
+ * `accessibilityLabel` when visible text elsewhere names it.
+ */
+export function Checkbox({
+  accessibilityState,
+  checked: checkedProp,
+  className,
+  classNames,
+  defaultChecked = false,
+  disabled = false,
+  indeterminate = false,
+  invalid = false,
+  label,
+  onCheckedChange,
+  size = 'md',
+  ...props
+}: CheckboxProps) {
+  const [checked, setChecked] = useControllableState(
+    checkedProp,
+    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;
+
+  return (
+    <View
+      className={cn(
+        'items-center justify-center rounded-[4px] border shadow-xs shadow-black/5',
+        boxClasses[size],
+        // A checked box is filled in both themes, so the dark input
+        // background must not apply to it.
+        filled
+          ? 'border-primary bg-primary'
+          : cn(
+              'border-input bg-background dark:bg-input/32',
+              invalid && 'border-destructive/36',
+            ),
+        (checked || indeterminate || invalid || disabled) && 'shadow-none',
+        disabled && 'opacity-64',
+        className,
+      )}
+    >
+      {indeterminate ? (
+        <View
+          className={cn(
+            'bg-foreground rounded-full',
+            minusClasses[size],
+            indicatorClassName,
+          )}
+        />
+      ) : checked ? (
+        <View
+          className={cn(
+            'border-primary-foreground -mt-px rotate-45',
+            checkClasses[size],
+            indicatorClassName,
+          )}
+        />
+      ) : null}
+    </View>
+  );
+}

package/src/components/form/Form.context.ts

@@ -0,0 +1,91 @@
+import { createContext, isValidElement, type ReactNode, use } from 'react';
+import {
+  useFormContext,
+  type UseFormReturn,
+  useFormState,
+} from 'react-hook-form';
+
+export type FormFieldContextValue = {
+  /** The field's label, used as its control's accessibility label when it is text. */
+  label?: ReactNode;
+  /** The `nativeID` of the field's label, for `aria-labelledby`. */
+  labelId?: string;
+  name?: string;
+  /** Registers the control the label focuses when pressed. */
+  setControl: (control: FocusTarget | null) => void;
+};
+
+type FocusTarget = { focus: () => void };
+
+export const FormFieldContext = createContext<FormFieldContextValue | null>(
+  null,
+);
+
+/** True inside `Form.InputGroup`, where `Form.Input` renders `InputGroup.Input`. */
+export const FormInputGroupContext = createContext(false);
+
+/** Submits the form, like pressing a submit button or Enter on the web. */
+export const FormSubmitContext = createContext<() => void>(() => {});
+
+export function getErrorMessage(error: unknown): ReactNode {
+  if (!error || typeof error !== 'object') return undefined;
+
+  const message = (error as { message?: unknown }).message;
+
+  return isValidElement(message) ||
+    typeof message === 'string' ||
+    typeof message === 'number'
+    ? message
+    : undefined;
+}
+
+/**
+ * React Hook Form tracks field state but has no DOM to label: this maps the
+ * current `Form.Field` onto its control, naming it by the field's label and
+ * marking it `invalid` while the field has an error.
+ */
+export function useFormControlProps() {
+  const field = use(FormFieldContext);
+  const { control, getFieldState } = useFormMethods();
+  const name = field?.name;
+  const formState = useFormState({
+    control,
+    disabled: !name,
+    exact: true,
+    name,
+  });
+
+  return {
+    accessibilityLabel:
+      typeof field?.label === 'string' ? field.label : undefined,
+    'aria-labelledby': field?.labelId,
+    invalid: name ? getFieldState(name, formState).invalid : false,
+  };
+}
+
+export function useFormMethods() {
+  const methods = useFormContext() as null | UseFormReturn;
+
+  if (!methods) {
+    throw new Error(
+      'Form components must be rendered inside <Form form={form}>.',
+    );
+  }
+
+  return methods;
+}
+
+export function useRequiredFieldName(
+  name: string | undefined,
+  componentName: string,
+) {
+  const fieldName = name ?? use(FormFieldContext)?.name;
+
+  if (!fieldName) {
+    throw new Error(
+      `${componentName} requires a name prop or a parent <Form.Field name="...">.`,
+    );
+  }
+
+  return fieldName;
+}