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

package/src/components/Button.tsx

@@ -1,70 +1,208 @@
 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 './_internal/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. 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: '' },
+    size: {
+      icon: 'text-base',
+      'icon-lg': 'text-base',
+      'icon-sm': 'text-base',
+      'icon-xl': 'text-base',
+      'icon-xs': 'text-base',
+      lg: 'text-base',
+      md: 'text-base',
+      sm: 'text-base',
+      xl: 'text-lg',
+      xs: 'text-sm',
+    },
     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',
     },
   },
 });
 
+const spinnerVariants = cva('', {
+  variants: {
+    variant: {
+      default: 'border-primary-foreground',
+      destructive: 'border-destructive-foreground',
+      'destructive-outline': 'border-foreground',
+      ghost: 'border-foreground',
+      link: 'border-foreground',
+      outline: 'border-foreground',
+      secondary: 'border-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 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/Text.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 
+import { View } from 'react-native';
+
 import { type ComponentMatrixCellProps, Story } from './_internal/Story';
 import { Text, type TextProps } from './Text';
 
@@ -16,6 +18,7 @@ type StoryDefinition = StoryObj<typeof meta>;
 
 type TextTone = NonNullable<TextProps['tone']>;
 type TextVariant = NonNullable<TextProps['variant']>;
+type TextWeight = NonNullable<TextProps['weight']>;
 
 const VARIANT_ROWS: { key: TextVariant; label: string }[] = [
   { key: 'h1', label: 'H1' },
@@ -25,6 +28,7 @@ const VARIANT_ROWS: { key: TextVariant; label: string }[] = [
   { key: 'lead', label: 'Lead' },
   { key: 'body', label: 'Body' },
   { key: 'small', label: 'Small' },
+  { key: 'code', label: 'Code' },
 ];
 
 const TONE_COLUMNS: { key: 'default' | TextTone; label: string }[] = [
@@ -34,6 +38,11 @@ const TONE_COLUMNS: { key: 'default' | TextTone; label: string }[] = [
   { key: 'destructive', label: 'Destructive' },
 ];
 
+const WEIGHT_ROWS: { key: TextWeight; label: string }[] = [
+  { key: 'normal', label: 'Normal' },
+  { key: 'bold', label: 'Bold' },
+];
+
 function ToneCell({ column, row }: ComponentMatrixCellProps) {
   return (
     <Text
@@ -45,16 +54,57 @@ function ToneCell({ column, row }: ComponentMatrixCellProps) {
   );
 }
 
+function WeightCell({ row }: ComponentMatrixCellProps) {
+  return (
+    <Text variant="body" weight={row.key as TextWeight}>
+      {row.label} weight
+    </Text>
+  );
+}
+
 export const All: StoryDefinition = {
   render: () => (
     <Story.Layout className="max-w-6xl" title="Text">
-      <Story.Section title="Variants and tones">
+      <Story.Section title="Variant scale">
+        <View className="gap-4">
+          {VARIANT_ROWS.map(({ key, label }) => (
+            <View className="flex-row items-baseline gap-4" key={key}>
+              <Text className="w-12" tone="muted" variant="small">
+                {label}
+              </Text>
+              <Text className="flex-1" variant={key}>
+                {key === 'code'
+                  ? 'npx expo install @pickle-ui/react-native'
+                  : 'The quick brown fox jumps over the lazy dog.'}
+              </Text>
+            </View>
+          ))}
+        </View>
+      </Story.Section>
+
+      <Story.Section title="Tone (color axis)">
         <Story.Matrix
           Cell={ToneCell}
           columns={TONE_COLUMNS}
-          rows={VARIANT_ROWS}
+          rows={VARIANT_ROWS.slice(0, 4)}
+        />
+      </Story.Section>
+
+      <Story.Section title="Weight">
+        <Story.Matrix
+          Cell={WeightCell}
+          columns={[{ key: 'body', label: 'Body' }]}
+          rows={WEIGHT_ROWS}
         />
       </Story.Section>
+
+      <Story.Section title="Truncate">
+        <View className="border-border w-64 rounded-md border p-3">
+          <Text truncate>
+            A project name long enough to run past the edge of its container
+          </Text>
+        </View>
+      </Story.Section>
     </Story.Layout>
   ),
 };

package/src/components/Text.test.tsx

@@ -4,12 +4,44 @@ import { Text } from './Text';
 
 describe('Text', () => {
   it('renders its children', async () => {
+    await render(<Text tone="muted">Hello</Text>);
+
+    expect(screen.getByText('Hello')).toBeOnTheScreen();
+  });
+
+  it('announces heading variants as headers', async () => {
+    await render(
+      <>
+        <Text variant="h2">Projects</Text>
+        <Text variant="lead">Everything in flight</Text>
+      </>,
+    );
+
+    expect(screen.getByRole('header', { name: 'Projects' })).toBeOnTheScreen();
+    expect(
+      screen.queryByRole('header', { name: 'Everything in flight' }),
+    ).toBeNull();
+  });
+
+  it('cuts truncated text to one line', async () => {
+    await render(<Text truncate>A long project name</Text>);
+
+    expect(screen.getByText('A long project name')).toHaveProp(
+      'numberOfLines',
+      1,
+    );
+  });
+
+  it('sets the code variant in a monospace font', async () => {
     await render(
-      <Text tone="muted" variant="h1">
-        Hello
+      <Text style={{ color: 'red' }} variant="code">
+        pnpm test
       </Text>,
     );
 
-    expect(screen.getByText('Hello')).toBeOnTheScreen();
+    expect(screen.getByText('pnpm test')).toHaveStyle({
+      color: 'red',
+      fontFamily: expect.any(String),
+    });
   });
 });

package/src/components/Text.tsx

@@ -1,9 +1,10 @@
 import { cva, type VariantProps } from 'class-variance-authority';
-import { Text as NativeText } from 'react-native';
+import { Text as NativeText, Platform, StyleSheet } from 'react-native';
 
 import { cn } from '../lib/cn';
 
-// Same variant and tone names as `Text` in @pickle-ui/react.
+// Same variants, tones and weights as `Text` in @pickle-ui/react, sized by the
+// shared type scale (`@pickle-ui/tokens/typography.css`).
 const textVariants = cva('text-foreground', {
   defaultVariants: { variant: 'body' },
   variants: {
@@ -13,24 +14,53 @@ const textVariants = cva('text-foreground', {
       primary: 'text-primary',
     },
     variant: {
-      body: 'text-sm',
-      h1: 'text-3xl font-semibold tracking-tight',
-      h2: 'text-2xl font-semibold tracking-tight',
-      h3: 'text-xl font-semibold',
-      h4: 'text-lg font-medium',
-      lead: 'text-base',
-      small: 'text-xs',
+      body: 'text-body',
+      code: 'text-code bg-muted self-start overflow-hidden rounded px-2 py-1',
+      h1: 'text-h1 font-semibold tracking-tight',
+      h2: 'text-h2 font-semibold tracking-tight',
+      h3: 'text-h3 font-semibold',
+      h4: 'text-h4 font-medium',
+      lead: 'text-lead',
+      small: 'text-small',
+    },
+    weight: {
+      bold: 'font-semibold',
+      normal: 'font-normal',
     },
   },
 });
 
+const HEADINGS = new Set(['h1', 'h2', 'h3', 'h4']);
+
+// Uniwind passes `font-mono`'s web font stack through as is, which native
+// fonts don't resolve, so `code` names each platform's monospace font.
+const styles = StyleSheet.create({
+  code: { fontFamily: Platform.select({ default: 'monospace', ios: 'Menlo' }) },
+});
+
 export type TextProps = React.ComponentProps<typeof NativeText> &
-  VariantProps<typeof textVariants>;
+  VariantProps<typeof textVariants> & {
+    /** Cuts the text to one line with an ellipsis. */
+    truncate?: boolean;
+  };
 
-export function Text({ className, tone, variant, ...props }: TextProps) {
+export function Text({
+  className,
+  style,
+  tone,
+  truncate,
+  variant = 'body',
+  weight,
+  ...props
+}: TextProps) {
   return (
     <NativeText
-      className={cn(textVariants({ tone, variant }), className)}
+      accessibilityRole={
+        variant && HEADINGS.has(variant) ? 'header' : undefined
+      }
+      className={cn(textVariants({ tone, variant, weight }), className)}
+      numberOfLines={truncate ? 1 : undefined}
+      style={variant === 'code' ? [styles.code, style] : style}
       {...props}
     />
   );