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

package/src/components/form/InputGroup.tsx

@@ -0,0 +1,266 @@
+import {
+  Children,
+  createContext,
+  isValidElement,
+  type ReactNode,
+  use,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Pressable, Text, type TextInput, View } from 'react-native';
+
+import { cn } from '../../lib/cn';
+import { InputFrame } from '../_internal/InputFrame';
+import { Button, type ButtonProps } from '../Button';
+import { Input, type InputProps } from './Input';
+import { InputGroupStateContext } from './InputGroup.context';
+
+type InputGroupAlign =
+  | 'block-end'
+  | 'block-start'
+  | 'inline-end'
+  | 'inline-start';
+
+type TextInputInstance = React.ComponentRef<typeof TextInput>;
+
+// The web's addon paddings minus the 1pt border. Addons holding a button sit
+// closer to the edge, like the web's `has-[>button]` margins.
+const addonClasses = {
+  'block-end': 'w-full justify-start px-[11px] pb-[11px]',
+  'block-start': 'w-full justify-start px-[11px] pt-[11px]',
+  'inline-end': 'pe-[11px]',
+  'inline-start': 'ps-[11px]',
+} as const;
+const buttonAddonClasses = {
+  'block-end': '',
+  'block-start': '',
+  'inline-end': 'pe-[3px]',
+  'inline-start': 'ps-[3px]',
+} as const;
+
+type InputGroupContextValue = {
+  focusInput: () => void;
+  hasInlineEnd: boolean;
+  hasInlineStart: boolean;
+  setFocused: (focused: boolean) => void;
+  setInput: (input: null | TextInputInstance) => void;
+};
+
+const InputGroupContext = createContext<InputGroupContextValue | null>(null);
+
+export type InputGroupAddonProps = React.ComponentProps<typeof Pressable> & {
+  align?: InputGroupAlign;
+  /** Text is wrapped in a label; other children, such as icons, render as they are. */
+  children?: ReactNode;
+};
+
+export type InputGroupButtonProps = ButtonProps & { align?: InputGroupAlign };
+
+export type InputGroupInputProps = Omit<InputProps, 'unstyled'>;
+
+export type InputGroupProps = React.ComponentProps<typeof View>;
+
+export type InputGroupTextProps = React.ComponentProps<typeof Text>;
+
+/** Pressing an addon focuses the field, like clicking it on the web. */
+function InputGroupAddon({
+  align = 'inline-start',
+  children,
+  className,
+  ...props
+}: InputGroupAddonProps) {
+  const group = useInputGroup('Addon');
+
+  return (
+    <Pressable
+      accessible={false}
+      className={cn(
+        'flex-row items-center justify-center gap-2',
+        addonClasses[align],
+        className,
+      )}
+      onPress={group.focusInput}
+      {...props}
+    >
+      {Children.map(children, (child) =>
+        typeof child === 'string' || typeof child === 'number' ? (
+          <Text className="text-foreground font-sans text-[14px]">{child}</Text>
+        ) : (
+          child
+        ),
+      )}
+    </Pressable>
+  );
+}
+
+function InputGroupButton({
+  align = 'inline-end',
+  className,
+  size = 'icon-xs',
+  variant = 'ghost',
+  ...props
+}: InputGroupButtonProps) {
+  return (
+    <InputGroupAddon align={align} className={buttonAddonClasses[align]}>
+      <Button className={className} size={size} variant={variant} {...props} />
+    </InputGroupAddon>
+  );
+}
+
+function InputGroupInput({
+  className,
+  onBlur,
+  onFocus,
+  ref,
+  ...props
+}: InputGroupInputProps) {
+  const group = useInputGroup('Input');
+  const inputRef = useRef<null | TextInputInstance>(null);
+  useImperativeHandle(ref, () => inputRef.current as TextInputInstance);
+
+  return (
+    <Input
+      className={cn(
+        group.hasInlineStart && 'ps-2',
+        group.hasInlineEnd && 'pe-2',
+        className,
+      )}
+      onBlur={(event) => {
+        group.setFocused(false);
+        onBlur?.(event);
+      }}
+      onFocus={(event) => {
+        group.setFocused(true);
+        onFocus?.(event);
+      }}
+      ref={(node: null | TextInputInstance) => {
+        inputRef.current = node;
+        // The group focuses the input when an addon is pressed.
+        group.setInput(node);
+      }}
+      unstyled
+      {...props}
+    />
+  );
+}
+
+/** Places addons around the input and frames the group like an `Input`. */
+function InputGroupRoot({ children, className, ...props }: InputGroupProps) {
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef<null | TextInputInstance>(null);
+  const state = use(InputGroupStateContext);
+  const sorted = sortChildren(children);
+  const { parts } = sorted;
+  const disabled = sorted.disabled || Boolean(state?.disabled);
+  const invalid = sorted.invalid || Boolean(state?.invalid);
+  const hasInlineEnd = parts['inline-end'].length > 0;
+  const hasInlineStart = parts['inline-start'].length > 0;
+  const context = useMemo(
+    () => ({
+      focusInput: () => inputRef.current?.focus(),
+      hasInlineEnd,
+      hasInlineStart,
+      setFocused,
+      setInput: (input: null | TextInputInstance) => {
+        inputRef.current = input;
+      },
+    }),
+    [hasInlineEnd, hasInlineStart],
+  );
+  const hasBlock =
+    parts['block-start'].length > 0 || parts['block-end'].length > 0;
+  const row = [
+    ...parts['inline-start'],
+    ...parts.field,
+    ...parts['inline-end'],
+  ];
+
+  return (
+    <InputGroupContext value={context}>
+      <InputFrame
+        className={cn(hasBlock ? 'flex-col' : 'h-8 items-center', className)}
+        disabled={disabled}
+        focused={focused}
+        invalid={invalid}
+        role="group"
+        {...props}
+      >
+        {hasBlock ? (
+          <>
+            {parts['block-start']}
+            <View className="flex-row items-center">{row}</View>
+            {parts['block-end']}
+          </>
+        ) : (
+          row
+        )}
+      </InputFrame>
+    </InputGroupContext>
+  );
+}
+
+function InputGroupText({ className, ...props }: InputGroupTextProps) {
+  return (
+    <Text
+      className={cn('text-muted-foreground font-sans text-[14px]', className)}
+      numberOfLines={1}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Splits the group's direct children by `align`, since React Native has no
+ * CSS `order`, and reads `disabled` and `invalid` from its inputs.
+ */
+function sortChildren(children: ReactNode) {
+  const parts: Record<'field' | InputGroupAlign, ReactNode[]> = {
+    'block-end': [],
+    'block-start': [],
+    field: [],
+    'inline-end': [],
+    'inline-start': [],
+  };
+  let disabled = false;
+  let invalid = false;
+
+  for (const child of Children.toArray(children)) {
+    if (
+      isValidElement<{ align?: InputGroupAlign }>(child) &&
+      (child.type === InputGroupAddon || child.type === InputGroupButton)
+    ) {
+      const fallback =
+        child.type === InputGroupButton ? 'inline-end' : 'inline-start';
+      parts[child.props.align ?? fallback].push(child);
+    } else {
+      if (
+        isValidElement<InputGroupInputProps>(child) &&
+        child.type === InputGroupInput
+      ) {
+        disabled ||= Boolean(child.props.disabled);
+        invalid ||= Boolean(child.props.invalid);
+      }
+      parts.field.push(child);
+    }
+  }
+
+  return { disabled, invalid, parts };
+}
+
+function useInputGroup(part: string) {
+  const group = use(InputGroupContext);
+  if (!group)
+    throw new Error(`InputGroup.${part} must be inside an InputGroup.`);
+  return group;
+}
+
+const InputGroup = Object.assign(InputGroupRoot, {
+  Addon: InputGroupAddon,
+  Button: InputGroupButton,
+  Input: InputGroupInput,
+  Text: InputGroupText,
+});
+
+export { InputGroup };

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

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+
+import { type ComponentMatrixCellProps, Story } from '../_internal/Story';
+import { RadioGroup, type RadioGroupItemProps } from './RadioGroup';
+
+const meta = {
+  component: RadioGroup,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/form/RadioGroup',
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+type RadioSize = NonNullable<RadioGroupItemProps['size']>;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const SIZE_ROWS: { key: RadioSize; label: string }[] = [
+  { key: 'md', label: 'Medium' },
+  { key: 'sm', label: 'Small' },
+];
+
+const STATE_COLUMNS = [
+  { key: 'unchecked', label: 'Unchecked' },
+  { key: 'checked', label: 'Checked' },
+  { key: 'disabled', label: 'Disabled' },
+];
+
+function RadioStateCell({ column, row }: ComponentMatrixCellProps) {
+  const value = column.key === 'checked' ? 'option' : undefined;
+
+  return (
+    <RadioGroup defaultValue={value}>
+      <RadioGroup.Item
+        disabled={column.key === 'disabled'}
+        label={column.label}
+        size={row.key as RadioSize}
+        value="option"
+      />
+    </RadioGroup>
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-5xl" title="RadioGroup">
+      <Story.Section title="Sizes and states">
+        <Story.Matrix
+          Cell={RadioStateCell}
+          columns={STATE_COLUMNS}
+          rows={SIZE_ROWS}
+        />
+      </Story.Section>
+
+      <Story.Section title="Group">
+        <RadioGroup accessibilityLabel="Notifications" defaultValue="email">
+          <RadioGroup.Item label="Email" value="email" />
+          <RadioGroup.Item label="SMS" value="sms" />
+          <RadioGroup.Item disabled label="Push" value="push" />
+        </RadioGroup>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

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

@@ -0,0 +1,98 @@
+import { fireEvent, render, screen } from '@testing-library/react-native';
+
+import { RadioGroup } from './RadioGroup';
+
+describe('RadioGroup', () => {
+  it('renders a group of radios named by their labels', async () => {
+    await render(
+      <RadioGroup accessibilityLabel="Plan">
+        <RadioGroup.Item label="Option A" value="a" />
+        <RadioGroup.Item label="Option B" value="b" />
+      </RadioGroup>,
+    );
+
+    expect(screen.getByLabelText('Plan')).toHaveProp('role', 'radiogroup');
+    expect(screen.getByRole('radio', { name: 'Option A' })).toBeOnTheScreen();
+    expect(screen.getByRole('radio', { name: 'Option B' })).toBeOnTheScreen();
+  });
+
+  it('selects defaultValue on mount', async () => {
+    await render(
+      <RadioGroup defaultValue="b">
+        <RadioGroup.Item label="Option A" value="a" />
+        <RadioGroup.Item label="Option B" value="b" />
+      </RadioGroup>,
+    );
+
+    expect(screen.getByRole('radio', { name: 'Option B' })).toBeChecked();
+    expect(screen.getByRole('radio', { name: 'Option A' })).not.toBeChecked();
+  });
+
+  it('selecting one item deselects the others', async () => {
+    const onValueChange = jest.fn();
+    await render(
+      <RadioGroup defaultValue="a" onValueChange={onValueChange}>
+        <RadioGroup.Item label="Option A" value="a" />
+        <RadioGroup.Item label="Option B" value="b" />
+      </RadioGroup>,
+    );
+
+    await fireEvent.press(screen.getByText('Option B'));
+
+    expect(screen.getByRole('radio', { name: 'Option B' })).toBeChecked();
+    expect(screen.getByRole('radio', { name: 'Option A' })).not.toBeChecked();
+    expect(onValueChange).toHaveBeenCalledWith('b');
+  });
+
+  it('follows the value prop when controlled', async () => {
+    const onValueChange = jest.fn();
+    await render(
+      <RadioGroup onValueChange={onValueChange} value="a">
+        <RadioGroup.Item label="Option A" value="a" />
+        <RadioGroup.Item label="Option B" value="b" />
+      </RadioGroup>,
+    );
+
+    await fireEvent.press(screen.getByRole('radio', { name: 'Option B' }));
+
+    expect(onValueChange).toHaveBeenCalledWith('b');
+    expect(screen.getByRole('radio', { name: 'Option A' })).toBeChecked();
+  });
+
+  it('disables every item when the group is disabled', async () => {
+    const onValueChange = jest.fn();
+    await render(
+      <RadioGroup disabled onValueChange={onValueChange}>
+        <RadioGroup.Item label="Option A" value="a" />
+        <RadioGroup.Item disabled={false} label="Option B" value="b" />
+      </RadioGroup>,
+    );
+
+    await fireEvent.press(screen.getByRole('radio', { name: 'Option A' }));
+
+    expect(screen.getByRole('radio', { name: 'Option A' })).toBeDisabled();
+    expect(screen.getByRole('radio', { name: 'Option B' })).toBeDisabled();
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it('styles the row and the label text through classNames', async () => {
+    await render(
+      <RadioGroup>
+        <RadioGroup.Item
+          classNames={{ field: 'min-h-11', label: 'text-base font-normal' }}
+          label="Option A"
+          value="a"
+        />
+      </RadioGroup>,
+    );
+
+    expect(screen.getByRole('radio', { name: 'Option A' })).toHaveProp(
+      'className',
+      expect.stringContaining('min-h-11'),
+    );
+    expect(screen.getByText('Option A')).toHaveProp(
+      'className',
+      expect.stringContaining('text-base font-normal'),
+    );
+  });
+});

package/src/components/form/RadioGroup.tsx

@@ -0,0 +1,151 @@
+import { createContext, use, useMemo } from 'react';
+import { Pressable, Text, View } from 'react-native';
+
+import { cn } from '../../lib/cn';
+import { useControllableState } from '../_internal/useControllableState';
+
+// Same sizes as `RadioGroup` in @pickle-ui/react. `hitSlop` stretches the
+// circle to a 44pt touch target, vertically only when a label widens it.
+const controlClasses = { md: 'size-4', sm: 'size-3.5' } as const;
+const indicatorClasses = { md: 'size-2', sm: 'size-1.5' } as const;
+const controlHitSlop = { md: 14, sm: 15 } as const;
+const fieldHitSlop = {
+  md: { bottom: 14, top: 14 },
+  sm: { bottom: 15, top: 15 },
+} as const;
+
+type RadioGroupContextValue = {
+  disabled: boolean;
+  onSelect: (value: string) => void;
+  value: string | undefined;
+};
+
+const RadioGroupContext = createContext<null | RadioGroupContextValue>(null);
+
+export type RadioGroupItemProps = Omit<
+  React.ComponentProps<typeof Pressable>,
+  'children' | 'disabled'
+> & {
+  /** Class overrides for the row around the circle and label, the dot and the label. */
+  classNames?: { field?: string; indicator?: string; label?: string };
+  disabled?: boolean;
+  /** Marks the choice as invalid, like the web's `aria-invalid`. */
+  invalid?: boolean;
+  /** Text next to the circle; pressing it selects the item and names it. */
+  label?: React.ReactNode;
+  size?: 'md' | 'sm';
+  value: string;
+};
+
+export type RadioGroupProps = React.ComponentProps<typeof View> & {
+  defaultValue?: string;
+  disabled?: boolean;
+  onValueChange?: (value: string) => void;
+  value?: string;
+};
+
+function RadioGroupItem({
+  accessibilityState,
+  className,
+  classNames,
+  disabled: disabledProp = false,
+  invalid = false,
+  label,
+  size = 'md',
+  value,
+  ...props
+}: RadioGroupItemProps) {
+  const group = use(RadioGroupContext);
+  if (!group) throw new Error('RadioGroup.Item must be inside a RadioGroup.');
+
+  const checked = group.value === value;
+  const disabled = group.disabled || disabledProp;
+
+  return (
+    <Pressable
+      accessibilityState={{ ...accessibilityState, checked, disabled }}
+      aria-checked={checked}
+      aria-disabled={disabled}
+      className={
+        label
+          ? cn('flex-row items-center gap-2', classNames?.field)
+          : 'self-start'
+      }
+      disabled={disabled}
+      hitSlop={label ? fieldHitSlop[size] : controlHitSlop[size]}
+      onPress={() => group.onSelect(value)}
+      role="radio"
+      {...props}
+    >
+      <View
+        className={cn(
+          'border-input bg-background items-center justify-center rounded-full border',
+          controlClasses[size],
+          checked && 'border-primary',
+          invalid && 'border-destructive',
+          disabled && 'opacity-50',
+          className,
+        )}
+      >
+        {checked ? (
+          <View
+            className={cn(
+              'bg-primary rounded-full',
+              indicatorClasses[size],
+              classNames?.indicator,
+            )}
+          />
+        ) : null}
+      </View>
+      {label ? (
+        <Text
+          className={cn(
+            'font-sans text-sm leading-none font-medium',
+            disabled ? 'text-muted-foreground' : 'text-foreground',
+            classNames?.label,
+          )}
+        >
+          {label}
+        </Text>
+      ) : null}
+    </Pressable>
+  );
+}
+
+function RadioGroupRoot({
+  className,
+  defaultValue,
+  disabled = false,
+  onValueChange,
+  value: valueProp,
+  ...props
+}: RadioGroupProps) {
+  const [value, setValue] = useControllableState(
+    valueProp,
+    defaultValue,
+    onValueChange as ((value: string | undefined) => void) | undefined,
+  );
+
+  const context = useMemo(
+    () => ({
+      disabled,
+      onSelect: (next: string) => {
+        if (next !== value) setValue(next);
+      },
+      value,
+    }),
+    [disabled, setValue, value],
+  );
+
+  return (
+    <RadioGroupContext value={context}>
+      <View className={cn('gap-2', className)} role="radiogroup" {...props} />
+    </RadioGroupContext>
+  );
+}
+
+const RadioGroup = Object.assign(RadioGroupRoot, {
+  Item: RadioGroupItem,
+});
+
+export { RadioGroup, RadioGroupItem };

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

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+
+import { type ComponentMatrixCellProps, Story } from '../_internal/Story';
+import { Textarea, type TextareaProps } from './Textarea';
+
+const meta = {
+  component: Textarea,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/form/Textarea',
+} satisfies Meta<typeof Textarea>;
+
+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 SIZE_ROWS = [
+  { key: 'sm', label: 'Small' },
+  { key: 'md', label: 'Medium' },
+  { key: 'lg', label: 'Large' },
+];
+
+function TextareaMatrixCell({ column, row }: ComponentMatrixCellProps) {
+  const isInvalid = column.key === 'invalid';
+
+  return (
+    <Textarea
+      accessibilityLabel={`${row.label} ${column.label}`}
+      defaultValue={
+        column.key === 'filled'
+          ? 'Pickle UI grows this field with its content, line after line.'
+          : undefined
+      }
+      disabled={column.key === 'disabled'}
+      invalid={isInvalid}
+      placeholder={isInvalid ? 'Tell us a bit more' : 'Write a message'}
+      size={row.key as NonNullable<TextareaProps['size']>}
+    />
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-6xl" title="Textarea">
+      <Story.Section title="Sizes and states">
+        <Story.Matrix
+          Cell={TextareaMatrixCell}
+          cellClassName="items-stretch"
+          columns={STATE_COLUMNS}
+          rows={SIZE_ROWS}
+        />
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

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

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react-native';
+
+import { Textarea } from './Textarea';
+
+describe('Textarea', () => {
+  it('renders a multi-line field', async () => {
+    await render(
+      <Textarea accessibilityLabel="Message" defaultValue="Hello" />,
+    );
+
+    const field = screen.getByLabelText('Message');
+    expect(field).toHaveProp('multiline', true);
+    expect(field).toHaveDisplayValue('Hello');
+  });
+
+  it('styles the control with className and the field with classNames.textarea', async () => {
+    await render(
+      <Textarea
+        accessibilityLabel="Message"
+        className="control-x"
+        classNames={{ textarea: 'textarea-x' }}
+      />,
+    );
+
+    const field = screen.getByLabelText('Message');
+    expect(field).toHaveProp(
+      'className',
+      expect.stringContaining('textarea-x'),
+    );
+    expect(field.parent).toHaveProp(
+      'className',
+      expect.stringContaining('control-x'),
+    );
+  });
+});