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

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

package/src/components/form/Textarea.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import { TextInput } from 'react-native';
+
+import { cn } from '../../lib/cn';
+import { InputFrame } from '../_internal/InputFrame';
+
+const sizeClasses = {
+  lg: 'min-h-18 px-[11px]',
+  md: 'min-h-17.5 px-[11px]',
+  sm: 'min-h-16 px-[9px]',
+} as const;
+
+export type TextareaProps = Omit<
+  React.ComponentProps<typeof TextInput>,
+  'multiline'
+> & {
+  /** Class overrides for the inner `TextInput`; `className` styles the control around it. */
+  classNames?: { textarea?: 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';
+};
+
+/**
+ * A multi-line text field that grows with its content from three lines, like
+ * `Textarea` in @pickle-ui/react. Set a `min-h-*` class on
+ * `classNames.textarea` to change the minimum.
+ */
+export function Textarea({
+  className,
+  classNames,
+  disabled = false,
+  editable = true,
+  invalid = false,
+  onBlur,
+  onFocus,
+  size = 'md',
+  ...props
+}: TextareaProps) {
+  const [focused, setFocused] = useState(false);
+
+  return (
+    <InputFrame
+      className={className}
+      disabled={disabled}
+      focused={focused}
+      invalid={invalid}
+    >
+      <TextInput
+        accessibilityState={{ disabled }}
+        className={cn(
+          'text-foreground web:field-sizing-content web:resize-none flex-1 py-2 text-sm outline-none',
+          sizeClasses[size],
+          classNames?.textarea,
+        )}
+        editable={editable && !disabled}
+        multiline
+        onBlur={(event) => {
+          setFocused(false);
+          onBlur?.(event);
+        }}
+        onFocus={(event) => {
+          setFocused(true);
+          onFocus?.(event);
+        }}
+        placeholderTextColorClassName="accent-muted-foreground/72"
+        textAlignVertical="top"
+        {...props}
+      />
+    </InputFrame>
+  );
+}

package/src/entries/card.ts

@@ -1,7 +1,9 @@
 export { Card } from '../components/Card';
 export type {
+  CardActionProps,
   CardContentProps,
   CardDescriptionProps,
+  CardFooterProps,
   CardHeaderProps,
   CardProps,
   CardTitleProps,

package/src/entries/checkbox.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from '../components/form/Checkbox';
+export type { CheckboxProps } from '../components/form/Checkbox';

package/src/entries/flex.ts

@@ -0,0 +1,2 @@
+export { Flex } from '../components/Flex';
+export type { FlexProps } from '../components/Flex';

package/src/entries/form.ts

@@ -0,0 +1,13 @@
+export { Form } from '../components/form/Form';
+export type {
+  FormCheckboxProps,
+  FormDescriptionProps,
+  FormErrorProps,
+  FormFieldProps,
+  FormInputGroupProps,
+  FormInputProps,
+  FormLabelProps,
+  FormProps,
+  FormRadioGroupProps,
+  FormTextareaProps,
+} from '../components/form/Form';

package/src/entries/grid.ts

@@ -0,0 +1,2 @@
+export { Grid } from '../components/Grid';
+export type { GridProps } from '../components/Grid';

package/src/entries/input-group.ts

@@ -0,0 +1,8 @@
+export { InputGroup } from '../components/form/InputGroup';
+export type {
+  InputGroupAddonProps,
+  InputGroupButtonProps,
+  InputGroupInputProps,
+  InputGroupProps,
+  InputGroupTextProps,
+} from '../components/form/InputGroup';

package/src/entries/input.ts

@@ -0,0 +1,2 @@
+export { Input } from '../components/form/Input';
+export type { InputProps } from '../components/form/Input';

package/src/entries/radio-group.ts

@@ -0,0 +1,5 @@
+export { RadioGroup } from '../components/form/RadioGroup';
+export type {
+  RadioGroupItemProps,
+  RadioGroupProps,
+} from '../components/form/RadioGroup';

package/src/entries/separator.ts

@@ -0,0 +1,2 @@
+export { Separator } from '../components/Separator';
+export type { SeparatorProps } from '../components/Separator';

package/src/entries/spinner.ts

@@ -0,0 +1,2 @@
+export { Spinner } from '../components/Spinner';
+export type { SpinnerProps } from '../components/Spinner';

package/src/entries/textarea.ts

@@ -0,0 +1,2 @@
+export { Textarea } from '../components/form/Textarea';
+export type { TextareaProps } from '../components/form/Textarea';

package/src/entries/theme.ts

@@ -0,0 +1,7 @@
+export { createTheme } from '@pickle-ui/tokens/theme';
+export type {
+  Theme,
+  ThemeFonts,
+  ThemeOptions,
+  ThemeVariables,
+} from '@pickle-ui/tokens/theme';

package/src/entries/x-stack.ts

@@ -0,0 +1,2 @@
+export { XStack } from '../components/XStack';
+export type { XStackProps } from '../components/XStack';

package/src/entries/y-stack.ts

@@ -0,0 +1,2 @@
+export { YStack } from '../components/YStack';
+export type { YStackProps } from '../components/YStack';

package/src/index.ts

@@ -3,6 +3,19 @@
 export * from './entries/badge';
 export * from './entries/button';
 export * from './entries/card';
+export * from './entries/checkbox';
 export * from './entries/cn';
+export * from './entries/flex';
+export * from './entries/form';
+export * from './entries/grid';
+export * from './entries/input';
+export * from './entries/input-group';
+export * from './entries/radio-group';
+export * from './entries/separator';
+export * from './entries/spinner';
 export * from './entries/text';
+export * from './entries/textarea';
+export * from './entries/theme';
 export * from './entries/use-color-token';
+export * from './entries/x-stack';
+export * from './entries/y-stack';

package/src/lib/cn.test.ts

@@ -6,4 +6,10 @@ describe('cn', () => {
       'text-sm px-4',
     );
   });
+
+  it('keeps a type scale size next to a text color', () => {
+    expect(cn('text-h1 text-foreground', 'text-muted-foreground')).toBe(
+      'text-h1 text-muted-foreground',
+    );
+  });
 });

package/src/lib/cn.ts

@@ -1,4 +1,17 @@
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+/**
+ * Teaches tailwind-merge Pickle's type scale: `text-body`, `text-h1`, … are
+ * font sizes, so they must not be mistaken for text colors and dropped next
+ * to one.
+ */
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ['body', 'code', 'h1', 'h2', 'h3', 'h4', 'lead', 'small'],
+    },
+  },
+});
 
 /** Joins class names; later classes win, like `@pickle-ui/react/cn`. */
 export function cn(...classes: Array<false | null | string | undefined>) {