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

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

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