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

package/src/components/Button.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react-native';
+import { View } from 'react-native';
 
 import { Button } from './Button';
 
@@ -31,4 +32,72 @@ describe('Button', () => {
     expect(screen.getByRole('button')).toBeDisabled();
     expect(onPress).not.toHaveBeenCalled();
   });
+
+  it('renders icons next to the label', async () => {
+    await render(
+      <Button>
+        <View testID="icon" />
+        Add project
+      </Button>,
+    );
+
+    expect(screen.getByRole('button')).toContainElement(
+      screen.getByTestId('icon'),
+    );
+    expect(screen.getByText('Add project')).toBeOnTheScreen();
+  });
+
+  it('names an icon-only button with accessibilityLabel', async () => {
+    await render(
+      <Button accessibilityLabel="Add project" size="icon">
+        <View />
+      </Button>,
+    );
+
+    expect(
+      screen.getByRole('button', { name: 'Add project' }),
+    ).toBeOnTheScreen();
+  });
+
+  it('is busy and disabled while loading', async () => {
+    const onPress = jest.fn();
+    await render(
+      <Button loading onPress={onPress}>
+        Save
+      </Button>,
+    );
+
+    await fireEvent.press(screen.getByRole('button'));
+
+    expect(screen.getByRole('button')).toBeBusy();
+    expect(screen.getByRole('button')).toBeDisabled();
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it('stretches every size to a 44pt touch target', async () => {
+    await render(
+      <>
+        <Button size="sm">Small</Button>
+        <Button accessibilityLabel="Add" size="icon">
+          +
+        </Button>
+        <Button hitSlop={0} size="xs">
+          Extra small
+        </Button>
+      </>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Small' })).toHaveProp(
+      'hitSlop',
+      { bottom: 8, top: 8 },
+    );
+    expect(screen.getByRole('button', { name: 'Add' })).toHaveProp(
+      'hitSlop',
+      6,
+    );
+    expect(screen.getByRole('button', { name: 'Extra small' })).toHaveProp(
+      'hitSlop',
+      0,
+    );
+  });
 });

package/src/components/Button.tsx

@@ -1,70 +1,211 @@
 import { cva, type VariantProps } from 'class-variance-authority';
-import { Pressable, Text } from 'react-native';
+import { Children, isValidElement } from 'react';
+import { type Insets, Pressable, Text, View } from 'react-native';
 
 import { cn } from '../lib/cn';
+import { Spinner } from './Spinner';
 
-// Same variant and size names as `Button` in @pickle-ui/react.
+// Same variants, sizes and dimensions as `Button` in @pickle-ui/react on a
+// phone, with its text sizes from `sm` up. Like the web's `pointer-coarse` hit area, `hitSlop` stretches every
+// size to a 44pt touch target. Paddings leave room for the 1pt border.
 const buttonVariants = cva(
-  'flex-row items-center justify-center gap-2 rounded-lg border active:opacity-80 disabled:opacity-60',
+  'flex-row items-center justify-center gap-2 rounded-lg border disabled:opacity-64',
   {
     defaultVariants: { size: 'md', variant: 'default' },
     variants: {
       size: {
-        lg: 'h-11 px-5',
-        md: 'h-10 px-4',
-        sm: 'h-8 px-3',
+        icon: 'size-8',
+        'icon-lg': 'size-9',
+        'icon-sm': 'size-7',
+        'icon-xl': 'size-10',
+        'icon-xs': 'size-6 rounded-md',
+        lg: 'h-9 px-[13px]',
+        md: 'h-8 px-[11px]',
+        sm: 'h-7 gap-1.5 px-[9px]',
+        xl: 'h-10 px-[15px]',
+        xs: 'h-6 gap-1 rounded-md px-[7px]',
       },
       variant: {
-        default: 'border-primary bg-primary',
-        destructive: 'border-destructive bg-destructive',
-        ghost: 'border-transparent active:bg-accent',
-        outline: 'border-input bg-popover',
-        secondary: 'border-transparent bg-secondary',
+        default:
+          'border-primary bg-primary shadow-primary/24 shadow-xs active:bg-primary/90 disabled:shadow-none',
+        destructive:
+          'border-destructive bg-destructive shadow-destructive/24 shadow-xs active:bg-destructive/90 disabled:shadow-none',
+        'destructive-outline':
+          'border-input bg-popover active:border-destructive/32 active:bg-destructive/4 dark:bg-input/32 shadow-xs shadow-black/5 disabled:shadow-none',
+        ghost: 'active:bg-accent border-transparent',
+        link: 'border-transparent',
+        outline:
+          'border-input bg-popover active:bg-accent/50 dark:bg-input/32 dark:active:bg-input/64 shadow-xs shadow-black/5 disabled:shadow-none',
+        secondary: 'bg-secondary active:bg-secondary/80 border-transparent',
       },
     },
   },
 );
 
 const labelVariants = cva('font-medium', {
+  compoundVariants: [
+    { className: 'underline', pressed: true, variant: 'link' },
+  ],
   defaultVariants: { size: 'md', variant: 'default' },
   variants: {
-    size: { lg: 'text-base', md: 'text-sm', sm: 'text-xs' },
+    pressed: { false: '', true: '' },
+    // The web's sizes from `sm` up, not its larger phone sizes, which only
+    // stop iOS Safari zooming into focused fields.
+    size: {
+      icon: 'text-sm',
+      'icon-lg': 'text-sm',
+      'icon-sm': 'text-sm',
+      'icon-xl': 'text-sm',
+      'icon-xs': 'text-sm',
+      lg: 'text-sm',
+      md: 'text-sm',
+      sm: 'text-sm',
+      xl: 'text-base',
+      xs: 'text-xs',
+    },
+    variant: {
+      default: 'text-primary-foreground',
+      destructive: 'text-destructive-foreground',
+      'destructive-outline': 'text-destructive-subtle-foreground',
+      ghost: 'text-foreground',
+      link: 'text-foreground',
+      outline: 'text-foreground',
+      secondary: 'text-secondary-foreground',
+    },
+  },
+});
+
+// Sized and dimmed like the web button's icons, in the label's color.
+const spinnerVariants = cva('size-4 opacity-80', {
+  variants: {
     variant: {
       default: 'text-primary-foreground',
       destructive: 'text-destructive-foreground',
+      'destructive-outline': 'text-foreground',
       ghost: 'text-foreground',
+      link: 'text-foreground',
       outline: 'text-foreground',
       secondary: 'text-secondary-foreground',
     },
   },
 });
 
+// The web's 1px inner highlight on solid buttons. Uniwind draws
+// `inset-shadow` outside the view, so a top border on an overlay stands in.
+const highlightVariants = cva('absolute inset-0 rounded-lg border-t', {
+  variants: {
+    pressed: { false: 'border-white/16', true: 'border-black/8' },
+    size: {
+      icon: '',
+      'icon-lg': '',
+      'icon-sm': '',
+      'icon-xl': '',
+      'icon-xs': 'rounded-md',
+      lg: '',
+      md: '',
+      sm: '',
+      xl: '',
+      xs: 'rounded-md',
+    },
+  },
+});
+
+type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>['size']>;
+
+// Half the gap between each size and a 44pt touch target, vertical only for
+// buttons with a label, whose width already reaches it.
+const HIT_SLOP: Record<ButtonSize, Insets | number> = {
+  icon: 6,
+  'icon-lg': 4,
+  'icon-sm': 8,
+  'icon-xl': 2,
+  'icon-xs': 10,
+  lg: { bottom: 4, top: 4 },
+  md: { bottom: 6, top: 6 },
+  sm: { bottom: 8, top: 8 },
+  xl: { bottom: 2, top: 2 },
+  xs: { bottom: 10, top: 10 },
+};
+
 export type ButtonProps = Omit<
   React.ComponentProps<typeof Pressable>,
   'children'
 > &
   VariantProps<typeof buttonVariants> & {
-    children: string;
+    /**
+     * Text is wrapped in the label; other children, such as icons, render as
+     * they are. Icon-only buttons need an `icon*` size and an
+     * `accessibilityLabel`.
+     */
+    children: React.ReactNode;
     labelClassName?: string;
+    /** Shows a spinner in place of the content and disables the button. */
+    loading?: boolean;
   };
 
 export function Button({
+  accessibilityState,
   children,
   className,
+  disabled,
   labelClassName,
-  size,
-  variant,
+  loading = false,
+  size = 'md',
+  variant = 'default',
   ...props
 }: ButtonProps) {
+  const isDisabled = Boolean(disabled || loading);
+  const isSolid = variant === 'default' || variant === 'destructive';
+
   return (
     <Pressable
       accessibilityRole="button"
+      accessibilityState={{
+        ...accessibilityState,
+        busy: loading,
+        disabled: isDisabled,
+      }}
       className={cn(buttonVariants({ size, variant }), className)}
+      disabled={isDisabled}
+      hitSlop={size ? HIT_SLOP[size] : undefined}
       {...props}
     >
-      <Text className={cn(labelVariants({ size, variant }), labelClassName)}>
-        {children}
-      </Text>
+      {({ pressed }) => (
+        <>
+          {isSolid && !isDisabled ? (
+            <View
+              className={highlightVariants({ pressed, size })}
+              pointerEvents="none"
+            />
+          ) : null}
+          {/* While loading, the content stays in place, invisible, so the
+              button keeps its width under the spinner. */}
+          {Children.map(children, (child) =>
+            typeof child === 'string' || typeof child === 'number' ? (
+              <Text
+                className={cn(
+                  labelVariants({ pressed, size, variant }),
+                  loading && 'opacity-0',
+                  labelClassName,
+                )}
+              >
+                {child}
+              </Text>
+            ) : isValidElement(child) ? (
+              loading ? (
+                <View className="opacity-0">{child}</View>
+              ) : (
+                child
+              )
+            ) : null,
+          )}
+          {loading ? (
+            <View className="absolute">
+              <Spinner aria-hidden className={spinnerVariants({ variant })} />
+            </View>
+          ) : null}
+        </>
+      )}
     </Pressable>
   );
 }

package/src/components/Card.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 
+import { IconArrowUpRight, IconDots } from '@tabler/icons-react-native';
 import { View } from 'react-native';
 
 import { Story } from './_internal/Story';
@@ -27,14 +28,26 @@ export const All: StoryDefinition = {
               <Card.Description>
                 Changes made in the last week.
               </Card.Description>
+              <Card.Action>
+                <Button
+                  accessibilityLabel="More options"
+                  size="icon"
+                  variant="ghost"
+                >
+                  <Story.Icon icon={IconDots} />
+                </Button>
+              </Card.Action>
             </Card.Header>
             <Card.Content className="gap-2">
               <Text variant="h1">1,284</Text>
               <Text tone="muted">Events across 8 active projects</Text>
-              <Button className="self-end" size="sm" variant="ghost">
+            </Card.Content>
+            <Card.Footer>
+              <Button className="ml-auto" size="sm" variant="ghost">
                 View report
+                <Story.Icon icon={IconArrowUpRight} />
               </Button>
-            </Card.Content>
+            </Card.Footer>
           </Card>
 
           <Card>
@@ -44,9 +57,9 @@ export const All: StoryDefinition = {
                 Parts can be omitted when the content needs less structure.
               </Card.Description>
             </Card.Header>
-            <Card.Content>
+            <Card.Footer>
               <Button>Continue</Button>
-            </Card.Content>
+            </Card.Footer>
           </Card>
         </View>
       </Story.Section>

package/src/components/Card.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react-native';
 
+import { Button } from './Button';
 import { Card } from './Card';
 
 describe('Card', () => {
@@ -11,13 +12,35 @@ describe('Card', () => {
           <Card.Description>Everything in flight</Card.Description>
         </Card.Header>
         <Card.Content testID="content" />
+        <Card.Footer testID="footer" />
       </Card>,
     );
 
     expect(screen.getByTestId('card')).toContainElement(
-      screen.getByText('Projects'),
+      screen.getByRole('header', { name: 'Projects' }),
     );
     expect(screen.getByText('Everything in flight')).toBeOnTheScreen();
     expect(screen.getByTestId('content')).toBeOnTheScreen();
+    expect(screen.getByTestId('footer')).toBeOnTheScreen();
+  });
+
+  it('places Card.Action in the header', async () => {
+    await render(
+      <Card>
+        <Card.Header testID="header">
+          <Card.Title>Projects</Card.Title>
+          <Card.Action>
+            <Button size="sm" variant="outline">
+              View all
+            </Button>
+          </Card.Action>
+        </Card.Header>
+      </Card>,
+    );
+
+    expect(screen.getByTestId('header')).toContainElement(
+      screen.getByRole('button', { name: 'View all' }),
+    );
+    expect(screen.getByText('Projects')).toBeOnTheScreen();
   });
 });

package/src/components/Card.tsx

@@ -1,31 +1,81 @@
+import { Children, isValidElement } from 'react';
 import { View } from 'react-native';
 
 import { cn } from '../lib/cn';
-import { Text } from './Text';
+import { Text, type TextProps } from './Text';
 
+export type CardActionProps = React.ComponentProps<typeof View>;
 export type CardContentProps = React.ComponentProps<typeof View>;
-export type CardDescriptionProps = React.ComponentProps<typeof Text>;
+export type CardDescriptionProps = Omit<TextProps, 'tone' | 'variant'>;
+export type CardFooterProps = React.ComponentProps<typeof View>;
 export type CardHeaderProps = React.ComponentProps<typeof View>;
 export type CardProps = React.ComponentProps<typeof View>;
-export type CardTitleProps = React.ComponentProps<typeof Text>;
+export type CardTitleProps = Omit<TextProps, 'tone' | 'variant'>;
+
+// The parts sit in a column with `gap-4` and their own side padding, which
+// reproduces the web's spacing between header, content and footer.
+
+function CardAction({ className, ...props }: CardActionProps) {
+  return <View className={cn('self-start', className)} {...props} />;
+}
 
 function CardContent({ className, ...props }: CardContentProps) {
-  return <View className={cn('gap-3 px-5', className)} {...props} />;
+  return <View className={cn('px-6', className)} {...props} />;
 }
 
 function CardDescription({ className, ...props }: CardDescriptionProps) {
-  return <Text className={className} tone="muted" {...props} />;
+  return (
+    <Text
+      className={cn('text-sm', className)}
+      tone="muted"
+      variant="body"
+      {...props}
+    />
+  );
 }
 
-function CardHeader({ className, ...props }: CardHeaderProps) {
-  return <View className={cn('gap-1 px-5', className)} {...props} />;
+function CardFooter({ className, ...props }: CardFooterProps) {
+  return (
+    <View className={cn('flex-row items-center px-6', className)} {...props} />
+  );
+}
+
+/**
+ * Lays a `Card.Action` out beside the title and description, top-aligned,
+ * like the web header's grid.
+ */
+function CardHeader({ children, className, ...props }: CardHeaderProps) {
+  const parts = Children.toArray(children);
+  const actions = parts.filter(
+    (child) => isValidElement(child) && child.type === CardAction,
+  );
+
+  if (actions.length === 0) {
+    return (
+      <View className={cn('gap-1.5 px-6', className)} {...props}>
+        {children}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      className={cn('flex-row items-start gap-4 px-6', className)}
+      {...props}
+    >
+      <View className="flex-1 gap-1.5">
+        {parts.filter((child) => !actions.includes(child))}
+      </View>
+      {actions}
+    </View>
+  );
 }
 
 function CardRoot({ className, ...props }: CardProps) {
   return (
     <View
       className={cn(
-        'border-border bg-card gap-4 rounded-xl border py-5',
+        'border-border bg-card gap-4 rounded-2xl border py-6 shadow-xs shadow-black/5',
         className,
       )}
       {...props}
@@ -36,20 +86,28 @@ function CardRoot({ className, ...props }: CardProps) {
 function CardTitle({ className, ...props }: CardTitleProps) {
   return (
     <Text
-      className={cn('text-card-foreground', className)}
-      variant="h4"
+      className={cn('text-card-foreground leading-none', className)}
+      variant="h3"
       {...props}
     />
   );
 }
 
-// Same compound shape as `Card` in @pickle-ui/react. The parts are exported
-// so Fast Refresh keeps their state; the public entry only exports `Card`.
 const Card = Object.assign(CardRoot, {
+  Action: CardAction,
   Content: CardContent,
   Description: CardDescription,
+  Footer: CardFooter,
   Header: CardHeader,
   Title: CardTitle,
 });
 
-export { Card, CardContent, CardDescription, CardHeader, CardTitle };
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};

package/src/components/Flex.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+
+import { Story } from './_internal/Story';
+import { StoryItem as Item } from './_internal/StoryItem';
+import { Flex } from './Flex';
+
+const meta = {
+  component: Flex,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/Flex',
+} satisfies Meta<typeof Flex>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-6xl" title="Flex">
+      <Story.Section title="Direction and spacing">
+        <Flex direction="column" gap={3}>
+          <Item className="min-h-16">First</Item>
+          <Item className="min-h-16">Second</Item>
+          <Item className="min-h-16">Third</Item>
+        </Flex>
+      </Story.Section>
+
+      <Story.Section title="Alignment and distribution">
+        <Flex
+          align="center"
+          className="border-border min-h-40 rounded-md border border-dashed p-4"
+          gap={4}
+          justify="between"
+        >
+          <Item className="min-h-16 min-w-20">Start</Item>
+          <Item className="min-h-16 min-w-20">Center</Item>
+          <Item className="min-h-16 min-w-20">End</Item>
+        </Flex>
+      </Story.Section>
+
+      <Story.Section title="Wrapping">
+        <Flex gap={3} wrap="wrap">
+          {['One', 'Two', 'Three', 'Four', 'Five', 'Six'].map((label) => (
+            <Item className="min-h-16 min-w-24" key={label}>
+              {label}
+            </Item>
+          ))}
+        </Flex>
+      </Story.Section>
+
+      <Story.Section title="Responsive override">
+        <Flex className="flex-col md:flex-row" gap={3}>
+          <Item className="min-h-16">Column on small screens</Item>
+          <Item className="min-h-16">Row from md</Item>
+        </Flex>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Flex.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react-native';
+
+import { Flex } from './Flex';
+
+function classesOf(testID: string) {
+  return String(screen.getByTestId(testID).props.className).split(' ');
+}
+
+describe('Flex', () => {
+  it('lays its children out in a row, like the web', async () => {
+    await render(<Flex testID="flex" />);
+
+    expect(classesOf('flex')).toContain('flex-row');
+  });
+
+  it('renders layout props as Tailwind classes', async () => {
+    await render(
+      <Flex
+        align="center"
+        direction="column"
+        gap={4}
+        gapX={2}
+        gapY={3}
+        justify="between"
+        testID="flex"
+        wrap="wrap"
+      />,
+    );
+
+    expect(classesOf('flex')).toEqual(
+      expect.arrayContaining([
+        'flex-col',
+        'flex-wrap',
+        'items-center',
+        'justify-between',
+        'gap-4',
+        'gap-x-2',
+        'gap-y-3',
+      ]),
+    );
+  });
+
+  it('lets className override the props', async () => {
+    await render(
+      <Flex
+        className="custom-class flex-row"
+        direction="column"
+        testID="flex"
+      />,
+    );
+
+    expect(classesOf('flex')).toEqual(
+      expect.arrayContaining(['flex-row', 'custom-class']),
+    );
+    expect(classesOf('flex')).not.toContain('flex-col');
+  });
+});

package/src/components/Flex.tsx

@@ -0,0 +1,52 @@
+import { View } from 'react-native';
+
+import { cn } from '../lib/cn';
+import { getLayoutClasses, type LayoutStyleProps } from './_internal/layout';
+
+const directionClasses = {
+  column: 'flex-col',
+  'column-reverse': 'flex-col-reverse',
+  row: 'flex-row',
+  'row-reverse': 'flex-row-reverse',
+} as const;
+
+const wrapClasses = {
+  nowrap: 'flex-nowrap',
+  wrap: 'flex-wrap',
+  'wrap-reverse': 'flex-wrap-reverse',
+} as const;
+
+export type FlexProps = LayoutStyleProps &
+  Omit<React.ComponentProps<typeof View>, keyof LayoutStyleProps> & {
+    direction?: keyof typeof directionClasses;
+    wrap?: keyof typeof wrapClasses;
+  };
+
+/**
+ * A `View` laid out with flexbox props, like `Flex` in @pickle-ui/react. It
+ * defaults to a row, as on the web, where React Native's `View` stacks its
+ * children in a column.
+ */
+export function Flex({
+  align,
+  className,
+  direction = 'row',
+  gap,
+  gapX,
+  gapY,
+  justify,
+  wrap,
+  ...props
+}: FlexProps) {
+  return (
+    <View
+      className={cn(
+        getLayoutClasses({ align, gap, gapX, gapY, justify }),
+        directionClasses[direction],
+        wrap === undefined ? undefined : wrapClasses[wrap],
+        className,
+      )}
+      {...props}
+    />
+  );
+}