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

package/src/components/form/FormRadioGroup.tsx

@@ -0,0 +1,48 @@
+import { useController } from 'react-hook-form';
+
+import {
+  useFormControlProps,
+  useFormMethods,
+  useRequiredFieldName,
+} from './Form.context';
+import { RadioGroup, type RadioGroupProps } from './RadioGroup';
+
+export type FormRadioGroupProps = Omit<RadioGroupProps, 'value'> & {
+  name?: string;
+};
+
+/** A `RadioGroup` bound to the field's value. */
+function FormRadioGroupRoot({
+  name: nameProp,
+  onValueChange,
+  ...props
+}: FormRadioGroupProps) {
+  const name = useRequiredFieldName(nameProp, 'Form.RadioGroup');
+  const { control } = useFormMethods();
+  const { field } = useController({
+    control,
+    defaultValue: props.defaultValue,
+    name,
+  });
+  const { accessibilityLabel, 'aria-labelledby': labelledBy } =
+    useFormControlProps();
+
+  return (
+    <RadioGroup
+      accessibilityLabel={accessibilityLabel}
+      aria-labelledby={labelledBy}
+      {...props}
+      onValueChange={(value) => {
+        field.onChange(value);
+        onValueChange?.(value);
+      }}
+      value={field.value}
+    />
+  );
+}
+
+const FormRadioGroup = Object.assign(FormRadioGroupRoot, {
+  Item: RadioGroup.Item,
+});
+
+export { FormRadioGroup };

package/src/components/form/FormRoot.tsx

@@ -0,0 +1,41 @@
+import { useCallback } from 'react';
+import {
+  type FieldValues,
+  FormProvider,
+  type SubmitHandler,
+  type UseFormReturn,
+} from 'react-hook-form';
+import { View } from 'react-native';
+
+import { cn } from '../../lib/cn';
+import { FormSubmitContext } from './Form.context';
+
+export type FormProps<FormValues extends FieldValues = FieldValues> =
+  React.ComponentProps<typeof View> & {
+    form: UseFormReturn<FormValues>;
+    onSubmit?: SubmitHandler<FormValues>;
+  };
+
+/**
+ * React Native has no `<form>`, so the root shares a submit action:
+ * `Form.Button` and the return key in `Form.Input` call it, like a submit
+ * button and Enter on the web.
+ */
+export function FormRoot<FormValues extends FieldValues = FieldValues>({
+  className,
+  form,
+  onSubmit,
+  ...props
+}: FormProps<FormValues>) {
+  const submit = useCallback(() => {
+    if (onSubmit) void form.handleSubmit(onSubmit)();
+  }, [form, onSubmit]);
+
+  return (
+    <FormProvider {...form}>
+      <FormSubmitContext value={submit}>
+        <View className={cn('gap-6', className)} {...props} />
+      </FormSubmitContext>
+    </FormProvider>
+  );
+}

package/src/components/form/FormTextarea.tsx

@@ -0,0 +1,56 @@
+import { use, useImperativeHandle, useRef } from 'react';
+import { useController } from 'react-hook-form';
+import { type TextInput } from 'react-native';
+
+import {
+  FormFieldContext,
+  useFormControlProps,
+  useFormMethods,
+  useRequiredFieldName,
+} from './Form.context';
+import { Textarea, type TextareaProps } from './Textarea';
+
+export type FormTextareaProps = Omit<
+  TextareaProps,
+  'defaultValue' | 'invalid' | 'value'
+> & { name?: string };
+
+type TextInputInstance = React.ComponentRef<typeof TextInput>;
+
+/** A `Textarea` bound to the field's value. */
+export function FormTextarea({
+  name: nameProp,
+  onBlur,
+  onChangeText,
+  ref,
+  ...props
+}: FormTextareaProps) {
+  const name = useRequiredFieldName(nameProp, 'Form.Textarea');
+  const { control } = useFormMethods();
+  const { field } = useController({ control, name });
+  const controlProps = useFormControlProps();
+  const fieldContext = use(FormFieldContext);
+  const inputRef = useRef<null | TextInputInstance>(null);
+  useImperativeHandle(ref, () => inputRef.current as TextInputInstance);
+
+  return (
+    <Textarea
+      {...controlProps}
+      {...props}
+      onBlur={(event) => {
+        field.onBlur();
+        onBlur?.(event);
+      }}
+      onChangeText={(text) => {
+        field.onChange(text);
+        onChangeText?.(text);
+      }}
+      ref={(node: null | TextInputInstance) => {
+        inputRef.current = node;
+        field.ref(node);
+        fieldContext?.setControl(node);
+      }}
+      value={field.value ?? ''}
+    />
+  );
+}

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

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+
+import { type ComponentMatrixCellProps, Story } from '../_internal/Story';
+import { Button } from '../Button';
+import { XStack } from '../XStack';
+import { Input } from './Input';
+
+const meta = {
+  component: Input,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/form/Input',
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+// No focus column: React Native can't force a focus state. Tap a field.
+const STATE_COLUMNS = [
+  { key: 'empty', label: 'Empty' },
+  { key: 'filled', label: 'Filled' },
+  { key: 'disabled', label: 'Disabled' },
+  { key: 'invalid', label: 'Invalid' },
+];
+
+const TYPE_ROWS = [
+  { description: 'General text input', key: 'text', label: 'Text' },
+  { description: 'Keyboard for email', key: 'email', label: 'Email' },
+  { description: 'Masked text entry', key: 'password', label: 'Password' },
+];
+
+function InputMatrixCell({ column, row }: ComponentMatrixCellProps) {
+  const isInvalid = column.key === 'invalid';
+
+  return (
+    <Input
+      accessibilityLabel={`${row.label} ${column.label}`}
+      defaultValue={
+        column.key === 'filled'
+          ? row.key === 'email'
+            ? 'hello@pickle.dev'
+            : 'Pickle UI'
+          : undefined
+      }
+      disabled={column.key === 'disabled'}
+      invalid={isInvalid}
+      keyboardType={row.key === 'email' ? 'email-address' : 'default'}
+      placeholder={isInvalid ? 'Check this value' : row.label}
+      secureTextEntry={row.key === 'password'}
+    />
+  );
+}
+
+const SIZE_COLUMNS = [
+  { key: 'sm', label: 'Small' },
+  { key: 'md', label: 'Medium' },
+  { key: 'lg', label: 'Large' },
+];
+
+function InputSizeCell({ column }: ComponentMatrixCellProps) {
+  const size = column.key as 'lg' | 'md' | 'sm';
+
+  return (
+    <XStack gap={2}>
+      <Input
+        accessibilityLabel={`${column.label} email`}
+        className="flex-1"
+        placeholder="Email"
+        size={size}
+      />
+      <Button size={size} variant="outline">
+        Subscribe
+      </Button>
+    </XStack>
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-6xl" title="Input">
+      <Story.Section title="Types and states">
+        <Story.Matrix
+          Cell={InputMatrixCell}
+          cellClassName="items-stretch"
+          columns={STATE_COLUMNS}
+          rows={TYPE_ROWS}
+        />
+      </Story.Section>
+
+      <Story.Section title="Sizes">
+        <Story.Matrix
+          Cell={InputSizeCell}
+          cellClassName="items-stretch"
+          columns={SIZE_COLUMNS}
+          rows={[
+            {
+              description: 'Matches the Button of the same size',
+              key: 'with-button',
+              label: 'With button',
+            },
+          ]}
+        />
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

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

@@ -0,0 +1,76 @@
+import { fireEvent, render, screen } from '@testing-library/react-native';
+
+import { Input } from './Input';
+
+describe('Input', () => {
+  it('renders a text field named by its accessibility label', async () => {
+    await render(<Input accessibilityLabel="Email" />);
+
+    expect(screen.getByLabelText('Email')).toBeOnTheScreen();
+  });
+
+  it.each([
+    ['sm', 'h-7'],
+    ['md', 'h-8'],
+    ['lg', 'h-9'],
+  ] as const)('matches the Button height at size %s', async (size, height) => {
+    await render(<Input accessibilityLabel="Email" size={size} />);
+
+    expect(screen.getByLabelText('Email').parent).toHaveProp(
+      'className',
+      expect.stringContaining(height),
+    );
+  });
+
+  it('styles the control with className and the field with classNames.input', async () => {
+    await render(
+      <Input
+        accessibilityLabel="Email"
+        className="control-x"
+        classNames={{ input: 'input-x' }}
+      />,
+    );
+
+    const field = screen.getByLabelText('Email');
+    expect(field).toHaveProp('className', expect.stringContaining('input-x'));
+    expect(field.parent).toHaveProp(
+      'className',
+      expect.stringContaining('control-x'),
+    );
+  });
+
+  it('stops editing when disabled', async () => {
+    await render(<Input accessibilityLabel="Email" disabled />);
+
+    expect(screen.getByLabelText('Email')).toHaveProp('editable', false);
+    expect(screen.getByLabelText('Email')).toBeDisabled();
+  });
+
+  it('shows a focus ring while focused and still calls onFocus', async () => {
+    const onFocus = jest.fn();
+    await render(<Input accessibilityLabel="Email" onFocus={onFocus} />);
+
+    const control = () => screen.getByLabelText('Email').parent;
+    expect(control()).not.toHaveProp(
+      'className',
+      expect.stringContaining('border-ring'),
+    );
+
+    await fireEvent(screen.getByLabelText('Email'), 'focus');
+
+    expect(onFocus).toHaveBeenCalledTimes(1);
+    expect(control()).toHaveProp(
+      'className',
+      expect.stringContaining('border-ring'),
+    );
+  });
+
+  it('renders the bare field when unstyled', async () => {
+    await render(<Input accessibilityLabel="Search" className="x" unstyled />);
+
+    expect(screen.getByLabelText('Search')).toHaveProp(
+      'className',
+      expect.stringMatching(/h-8.*x$/),
+    );
+  });
+});

package/src/components/form/Input.tsx

@@ -0,0 +1,81 @@
+import { useState } from 'react';
+import { TextInput } from 'react-native';
+
+import { cn } from '../../lib/cn';
+import { InputFrame } from '../_internal/InputFrame';
+
+// Same heights as `Button` for the same size, so they line up side by side,
+// and the web's paddings minus the 1pt border.
+const heightClasses = { lg: 'h-9', md: 'h-8', sm: 'h-7' } as const;
+const paddingClasses = {
+  lg: 'px-[13px]',
+  md: 'px-[11px]',
+  sm: 'px-[9px]',
+} as const;
+
+export type InputProps = React.ComponentProps<typeof TextInput> & {
+  /** Class overrides for the inner `TextInput`; `className` styles the control around it. */
+  classNames?: { input?: string };
+  /** Dims the field and stops editing, like the web's `disabled`. */
+  disabled?: boolean;
+  /** Marks the value as invalid, like the web's `aria-invalid`. */
+  invalid?: boolean;
+  size?: 'lg' | 'md' | 'sm';
+  /** Renders the bare `TextInput`, without the border and background. */
+  unstyled?: boolean;
+};
+
+/** A single-line text field, like `Input` in @pickle-ui/react. */
+export function Input({
+  className,
+  classNames,
+  disabled = false,
+  editable = true,
+  invalid = false,
+  onBlur,
+  onFocus,
+  size = 'md',
+  unstyled = false,
+  ...props
+}: InputProps) {
+  const [focused, setFocused] = useState(false);
+  // The web's 14px from `sm` up: the 16px it uses on phones only stops iOS
+  // Safari zooming into a focused field, which native apps don't do.
+  // `text-[14px]` sets the size without `text-sm`'s line height, which
+  // pushes a single-line field's text off center on iOS.
+  const input = (
+    <TextInput
+      accessibilityState={{ disabled }}
+      className={cn(
+        '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,
+      )}
+      editable={editable && !disabled}
+      onBlur={(event) => {
+        setFocused(false);
+        onBlur?.(event);
+      }}
+      onFocus={(event) => {
+        setFocused(true);
+        onFocus?.(event);
+      }}
+      placeholderTextColorClassName="accent-muted-foreground/72"
+      {...props}
+    />
+  );
+
+  if (unstyled) return input;
+
+  return (
+    <InputFrame
+      className={cn(heightClasses[size], className)}
+      disabled={disabled}
+      focused={focused}
+      invalid={invalid}
+    >
+      {input}
+    </InputFrame>
+  );
+}

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

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+/**
+ * Lets a wrapper mark the frame `disabled` or `invalid` when its input isn't
+ * a direct `InputGroup.Input` child, like `Form.InputGroup` does with
+ * `Form.Input`, whose invalid state comes from the form.
+ */
+export const InputGroupStateContext = createContext<null | {
+  disabled?: boolean;
+  invalid?: boolean;
+}>(null);

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

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+
+import { IconEye, IconEyeOff, IconSearch } from '@tabler/icons-react-native';
+import { useState } from 'react';
+
+import { type ComponentMatrixCellProps, Story } from '../_internal/Story';
+import { InputGroup } from './InputGroup';
+
+const meta = {
+  component: InputGroup,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/form/InputGroup',
+} satisfies Meta<typeof InputGroup>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const STATE_COLUMNS = [
+  { key: 'default', label: 'Default' },
+  { key: 'disabled', label: 'Disabled' },
+  { key: 'invalid', label: 'Invalid' },
+];
+
+const PATTERN_ROWS = [
+  { description: 'Leading icon addon', key: 'search', label: 'Search' },
+  {
+    description: 'Trailing visibility toggle',
+    key: 'password',
+    label: 'Password',
+  },
+  { description: 'Leading text addon', key: 'currency', label: 'Currency' },
+  { description: 'Trailing text addon', key: 'domain', label: 'Domain' },
+];
+
+function InputGroupMatrixCell({ column, row }: ComponentMatrixCellProps) {
+  const inputProps = {
+    disabled: column.key === 'disabled',
+    invalid: column.key === 'invalid',
+  };
+
+  if (row.key === 'search') {
+    return (
+      <InputGroup>
+        <InputGroup.Addon>
+          <Story.Icon icon={IconSearch} />
+        </InputGroup.Addon>
+        <InputGroup.Input
+          accessibilityLabel="Search"
+          inputMode="search"
+          placeholder="Search…"
+          {...inputProps}
+        />
+      </InputGroup>
+    );
+  }
+
+  if (row.key === 'password') {
+    return <PasswordInputGroupCell {...inputProps} />;
+  }
+
+  if (row.key === 'currency') {
+    return (
+      <InputGroup>
+        <InputGroup.Addon>$</InputGroup.Addon>
+        <InputGroup.Input
+          accessibilityLabel="Amount in USD"
+          defaultValue="1200"
+          inputMode="decimal"
+          {...inputProps}
+        />
+      </InputGroup>
+    );
+  }
+
+  return (
+    <InputGroup>
+      <InputGroup.Input
+        accessibilityLabel="Pickle subdomain ending in .dev"
+        defaultValue="pickle"
+        {...inputProps}
+      />
+      <InputGroup.Addon align="inline-end">.dev</InputGroup.Addon>
+    </InputGroup>
+  );
+}
+
+function PasswordInputGroupCell({
+  disabled,
+  invalid,
+}: {
+  disabled: boolean;
+  invalid: boolean;
+}) {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <InputGroup>
+      <InputGroup.Input
+        accessibilityLabel="Password with toggle visibility"
+        disabled={disabled}
+        invalid={invalid}
+        placeholder="Enter your password"
+        secureTextEntry={!showPassword}
+      />
+      <InputGroup.Button
+        accessibilityLabel={showPassword ? 'Hide password' : 'Show password'}
+        disabled={disabled}
+        onPress={() => setShowPassword((visible) => !visible)}
+      >
+        <Story.Icon icon={showPassword ? IconEyeOff : IconEye} />
+      </InputGroup.Button>
+    </InputGroup>
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-6xl" title="InputGroup">
+      <Story.Section title="Patterns and states">
+        <Story.Matrix
+          Cell={InputGroupMatrixCell}
+          cellClassName="items-stretch"
+          columns={STATE_COLUMNS}
+          rows={PATTERN_ROWS}
+        />
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

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

@@ -0,0 +1,95 @@
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import { Text } from 'react-native';
+
+import { InputGroup } from './InputGroup';
+
+describe('InputGroup', () => {
+  it('places addons by align, whatever their order in the code', async () => {
+    await render(
+      <InputGroup testID="group">
+        <InputGroup.Addon align="inline-end">
+          <Text>.dev</Text>
+        </InputGroup.Addon>
+        <InputGroup.Input accessibilityLabel="Subdomain" />
+        <InputGroup.Addon>
+          <Text>https://</Text>
+        </InputGroup.Addon>
+      </InputGroup>,
+    );
+
+    const texts = screen
+      .getByTestId('group')
+      .children.map((child) =>
+        typeof child === 'string'
+          ? child
+          : (child.props.accessibilityLabel ??
+            child.children
+              .map((c) => (typeof c === 'string' ? c : c.props.children))
+              .join('')),
+      );
+    expect(texts).toEqual(['https://', 'Subdomain', '.dev']);
+  });
+
+  it('pads the input on the sides that have an addon', async () => {
+    await render(
+      <InputGroup>
+        <InputGroup.Addon>$</InputGroup.Addon>
+        <InputGroup.Input accessibilityLabel="Amount" />
+      </InputGroup>,
+    );
+
+    expect(screen.getByLabelText('Amount')).toHaveProp(
+      'className',
+      expect.stringContaining('ps-2'),
+    );
+    expect(screen.getByLabelText('Amount')).not.toHaveProp(
+      'className',
+      expect.stringContaining('pe-2'),
+    );
+  });
+
+  it('frames the group while its input has focus', async () => {
+    await render(
+      <InputGroup testID="group">
+        <InputGroup.Input accessibilityLabel="Search" />
+      </InputGroup>,
+    );
+
+    await fireEvent(screen.getByLabelText('Search'), 'focus');
+
+    expect(screen.getByTestId('group')).toHaveProp(
+      'className',
+      expect.stringContaining('border-ring'),
+    );
+  });
+
+  it('marks the frame from the input’s invalid and disabled props', async () => {
+    await render(
+      <InputGroup testID="group">
+        <InputGroup.Input accessibilityLabel="Email" disabled invalid />
+      </InputGroup>,
+    );
+
+    expect(screen.getByTestId('group')).toHaveProp(
+      'className',
+      expect.stringMatching(/border-destructive\/36.*opacity-64/),
+    );
+    expect(screen.getByLabelText('Email')).toBeDisabled();
+  });
+
+  it('renders InputGroup.Button as a ghost button after the input', async () => {
+    const onPress = jest.fn();
+    await render(
+      <InputGroup>
+        <InputGroup.Button accessibilityLabel="Clear" onPress={onPress}>
+          <Text>×</Text>
+        </InputGroup.Button>
+        <InputGroup.Input accessibilityLabel="Search" />
+      </InputGroup>,
+    );
+
+    await fireEvent.press(screen.getByRole('button', { name: 'Clear' }));
+
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+});