@pickle-ui/react-native 0.0.0-stage → 0.0.0

package/src/components/Badge.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+
+import { type ComponentMatrixCellProps, Story } from './_internal/Story';
+import { Badge, type BadgeProps } from './Badge';
+
+const meta = {
+  component: Badge,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/Badge',
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const DISPLAY_COLUMNS = [{ key: 'label', label: 'Label only' }];
+
+const SEMANTIC_ROWS = [
+  { key: 'default', label: 'Default' },
+  { key: 'secondary', label: 'Secondary' },
+  { key: 'inProgress', label: 'In progress' },
+  { key: 'inReview', label: 'In review' },
+  { key: 'success', label: 'Success' },
+];
+
+function SemanticBadgeCell({ row }: ComponentMatrixCellProps) {
+  return (
+    <Badge variant={row.key as NonNullable<BadgeProps['variant']>}>
+      {row.label}
+    </Badge>
+  );
+}
+
+export const All: StoryDefinition = {
+  args: { children: 'Badge' },
+  render: () => (
+    <Story.Layout className="max-w-4xl" title="Badge">
+      <Story.Section title="Semantic badges">
+        <Story.Matrix
+          Cell={SemanticBadgeCell}
+          cellClassName="min-h-16"
+          columns={DISPLAY_COLUMNS}
+          rows={SEMANTIC_ROWS}
+        />
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Badge.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react-native';
+
+import { Badge } from './Badge';
+
+describe('Badge', () => {
+  it('renders its label', async () => {
+    await render(<Badge variant="success">Shipped</Badge>);
+
+    expect(screen.getByText('Shipped')).toBeOnTheScreen();
+  });
+});

package/src/components/Badge.tsx

@@ -0,0 +1,42 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Text, View } from 'react-native';
+
+import { cn } from '../lib/cn';
+
+// Status variants use the `-subtle` token pairs, like `Badge` on the web.
+const badgeVariants = cva('self-start rounded-sm px-1.5 py-0.5', {
+  defaultVariants: { variant: 'default' },
+  variants: {
+    variant: {
+      default: 'bg-primary',
+      inProgress: 'bg-info-subtle',
+      inReview: 'bg-warning-subtle',
+      secondary: 'bg-secondary',
+      success: 'bg-success-subtle',
+    },
+  },
+});
+
+const labelVariants = cva('text-xs font-medium', {
+  defaultVariants: { variant: 'default' },
+  variants: {
+    variant: {
+      default: 'text-primary-foreground',
+      inProgress: 'text-info-subtle-foreground',
+      inReview: 'text-warning-subtle-foreground',
+      secondary: 'text-secondary-foreground',
+      success: 'text-success-subtle-foreground',
+    },
+  },
+});
+
+export type BadgeProps = React.ComponentProps<typeof View> &
+  VariantProps<typeof badgeVariants> & { children: string };
+
+export function Badge({ children, className, variant, ...props }: BadgeProps) {
+  return (
+    <View className={cn(badgeVariants({ variant }), className)} {...props}>
+      <Text className={labelVariants({ variant })}>{children}</Text>
+    </View>
+  );
+}

package/src/components/Button.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+
+import { type ComponentMatrixCellProps, Story } from './_internal/Story';
+import { Button, type ButtonProps } from './Button';
+
+const meta = {
+  component: Button,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/Button',
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type ButtonSize = NonNullable<ButtonProps['size']>;
+type ButtonVariant = NonNullable<ButtonProps['variant']>;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const STATE_COLUMNS: {
+  key: string;
+  label: string;
+  props: Partial<ButtonProps>;
+}[] = [
+  { key: 'default', label: 'Default', props: {} },
+  { key: 'disabled', label: 'Disabled', props: { disabled: true } },
+];
+
+const STATE_PROPS = Object.fromEntries(
+  STATE_COLUMNS.map((state) => [state.key, state.props]),
+) as Record<string, Partial<ButtonProps>>;
+
+const VARIANT_ROWS: {
+  key: ButtonVariant;
+  label: string;
+}[] = [
+  { key: 'default', label: 'Default' },
+  { key: 'secondary', label: 'Secondary' },
+  { key: 'destructive', label: 'Destructive' },
+  { key: 'outline', label: 'Outline' },
+  { key: 'ghost', label: 'Ghost' },
+];
+
+const SIZE_COLUMNS: { description: string; key: ButtonSize; label: string }[] =
+  [
+    { description: 'h-8', key: 'sm', label: 'Small' },
+    { description: 'h-10', key: 'md', label: 'Medium' },
+    { description: 'h-11', key: 'lg', label: 'Large' },
+  ];
+
+function ButtonSizeCell({ column, row }: ComponentMatrixCellProps) {
+  return (
+    <Button size={column.key as ButtonSize} variant={row.key as ButtonVariant}>
+      Add
+    </Button>
+  );
+}
+
+function ButtonStateCell({ column, row }: ComponentMatrixCellProps) {
+  return (
+    <Button variant={row.key as ButtonVariant} {...STATE_PROPS[column.key]}>
+      Button
+    </Button>
+  );
+}
+
+export const All: StoryDefinition = {
+  args: { children: 'Button' },
+  render: () => (
+    <Story.Layout className="max-w-6xl" title="Button">
+      <Story.Section title="Variants and states">
+        <Story.Matrix
+          Cell={ButtonStateCell}
+          columns={STATE_COLUMNS}
+          rows={VARIANT_ROWS}
+        />
+      </Story.Section>
+
+      <Story.Section title="Sizes">
+        <Story.Matrix
+          Cell={ButtonSizeCell}
+          columns={SIZE_COLUMNS}
+          rows={VARIANT_ROWS}
+        />
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Button.test.tsx

@@ -0,0 +1,34 @@
+import { fireEvent, render, screen } from '@testing-library/react-native';
+
+import { Button } from './Button';
+
+describe('Button', () => {
+  it('renders a button named by its label', async () => {
+    await render(<Button>Save</Button>);
+
+    expect(screen.getByRole('button', { name: 'Save' })).toBeOnTheScreen();
+  });
+
+  it('calls onPress', async () => {
+    const onPress = jest.fn();
+    await render(<Button onPress={onPress}>Save</Button>);
+
+    await fireEvent.press(screen.getByRole('button'));
+
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onPress when disabled', async () => {
+    const onPress = jest.fn();
+    await render(
+      <Button disabled onPress={onPress}>
+        Save
+      </Button>,
+    );
+
+    await fireEvent.press(screen.getByRole('button'));
+
+    expect(screen.getByRole('button')).toBeDisabled();
+    expect(onPress).not.toHaveBeenCalled();
+  });
+});

package/src/components/Button.tsx

@@ -0,0 +1,70 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Pressable, Text } from 'react-native';
+
+import { cn } from '../lib/cn';
+
+// Same variant and size names as `Button` in @pickle-ui/react.
+const buttonVariants = cva(
+  'flex-row items-center justify-center gap-2 rounded-lg border active:opacity-80 disabled:opacity-60',
+  {
+    defaultVariants: { size: 'md', variant: 'default' },
+    variants: {
+      size: {
+        lg: 'h-11 px-5',
+        md: 'h-10 px-4',
+        sm: 'h-8 px-3',
+      },
+      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',
+      },
+    },
+  },
+);
+
+const labelVariants = cva('font-medium', {
+  defaultVariants: { size: 'md', variant: 'default' },
+  variants: {
+    size: { lg: 'text-base', md: 'text-sm', sm: 'text-xs' },
+    variant: {
+      default: 'text-primary-foreground',
+      destructive: 'text-destructive-foreground',
+      ghost: 'text-foreground',
+      outline: 'text-foreground',
+      secondary: 'text-secondary-foreground',
+    },
+  },
+});
+
+export type ButtonProps = Omit<
+  React.ComponentProps<typeof Pressable>,
+  'children'
+> &
+  VariantProps<typeof buttonVariants> & {
+    children: string;
+    labelClassName?: string;
+  };
+
+export function Button({
+  children,
+  className,
+  labelClassName,
+  size,
+  variant,
+  ...props
+}: ButtonProps) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      className={cn(buttonVariants({ size, variant }), className)}
+      {...props}
+    >
+      <Text className={cn(labelVariants({ size, variant }), labelClassName)}>
+        {children}
+      </Text>
+    </Pressable>
+  );
+}

package/src/components/Card.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+
+import { View } from 'react-native';
+
+import { Story } from './_internal/Story';
+import { Button } from './Button';
+import { Card } from './Card';
+import { Text } from './Text';
+
+const meta = {
+  component: Card,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/Card',
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-5xl" title="Card">
+      <Story.Section title="Composition">
+        <View className="max-w-lg gap-6">
+          <Card>
+            <Card.Header>
+              <Card.Title>Project activity</Card.Title>
+              <Card.Description>
+                Changes made in the last week.
+              </Card.Description>
+            </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">
+                View report
+              </Button>
+            </Card.Content>
+          </Card>
+
+          <Card>
+            <Card.Header>
+              <Card.Title>Simple card</Card.Title>
+              <Card.Description>
+                Parts can be omitted when the content needs less structure.
+              </Card.Description>
+            </Card.Header>
+            <Card.Content>
+              <Button>Continue</Button>
+            </Card.Content>
+          </Card>
+        </View>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Card.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react-native';
+
+import { Card } from './Card';
+
+describe('Card', () => {
+  it('renders its compound parts', async () => {
+    await render(
+      <Card testID="card">
+        <Card.Header>
+          <Card.Title>Projects</Card.Title>
+          <Card.Description>Everything in flight</Card.Description>
+        </Card.Header>
+        <Card.Content testID="content" />
+      </Card>,
+    );
+
+    expect(screen.getByTestId('card')).toContainElement(
+      screen.getByText('Projects'),
+    );
+    expect(screen.getByText('Everything in flight')).toBeOnTheScreen();
+    expect(screen.getByTestId('content')).toBeOnTheScreen();
+  });
+});

package/src/components/Card.tsx

@@ -0,0 +1,55 @@
+import { View } from 'react-native';
+
+import { cn } from '../lib/cn';
+import { Text } from './Text';
+
+export type CardContentProps = React.ComponentProps<typeof View>;
+export type CardDescriptionProps = React.ComponentProps<typeof Text>;
+export type CardHeaderProps = React.ComponentProps<typeof View>;
+export type CardProps = React.ComponentProps<typeof View>;
+export type CardTitleProps = React.ComponentProps<typeof Text>;
+
+function CardContent({ className, ...props }: CardContentProps) {
+  return <View className={cn('gap-3 px-5', className)} {...props} />;
+}
+
+function CardDescription({ className, ...props }: CardDescriptionProps) {
+  return <Text className={className} tone="muted" {...props} />;
+}
+
+function CardHeader({ className, ...props }: CardHeaderProps) {
+  return <View className={cn('gap-1 px-5', className)} {...props} />;
+}
+
+function CardRoot({ className, ...props }: CardProps) {
+  return (
+    <View
+      className={cn(
+        'border-border bg-card gap-4 rounded-xl border py-5',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: CardTitleProps) {
+  return (
+    <Text
+      className={cn('text-card-foreground', className)}
+      variant="h4"
+      {...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, {
+  Content: CardContent,
+  Description: CardDescription,
+  Header: CardHeader,
+  Title: CardTitle,
+});
+
+export { Card, CardContent, CardDescription, CardHeader, CardTitle };

package/src/components/Text.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+
+import { type ComponentMatrixCellProps, Story } from './_internal/Story';
+import { Text, type TextProps } from './Text';
+
+const meta = {
+  component: Text,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/Text',
+} satisfies Meta<typeof Text>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+type TextTone = NonNullable<TextProps['tone']>;
+type TextVariant = NonNullable<TextProps['variant']>;
+
+const VARIANT_ROWS: { key: TextVariant; label: string }[] = [
+  { key: 'h1', label: 'H1' },
+  { key: 'h2', label: 'H2' },
+  { key: 'h3', label: 'H3' },
+  { key: 'h4', label: 'H4' },
+  { key: 'lead', label: 'Lead' },
+  { key: 'body', label: 'Body' },
+  { key: 'small', label: 'Small' },
+];
+
+const TONE_COLUMNS: { key: 'default' | TextTone; label: string }[] = [
+  { key: 'default', label: 'Default' },
+  { key: 'primary', label: 'Primary' },
+  { key: 'muted', label: 'Muted' },
+  { key: 'destructive', label: 'Destructive' },
+];
+
+function ToneCell({ column, row }: ComponentMatrixCellProps) {
+  return (
+    <Text
+      tone={column.key === 'default' ? undefined : (column.key as TextTone)}
+      variant={row.key as TextVariant}
+    >
+      Sample text
+    </Text>
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-6xl" title="Text">
+      <Story.Section title="Variants and tones">
+        <Story.Matrix
+          Cell={ToneCell}
+          columns={TONE_COLUMNS}
+          rows={VARIANT_ROWS}
+        />
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Text.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react-native';
+
+import { Text } from './Text';
+
+describe('Text', () => {
+  it('renders its children', async () => {
+    await render(
+      <Text tone="muted" variant="h1">
+        Hello
+      </Text>,
+    );
+
+    expect(screen.getByText('Hello')).toBeOnTheScreen();
+  });
+});

package/src/components/Text.tsx

@@ -0,0 +1,37 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Text as NativeText } from 'react-native';
+
+import { cn } from '../lib/cn';
+
+// Same variant and tone names as `Text` in @pickle-ui/react.
+const textVariants = cva('text-foreground', {
+  defaultVariants: { variant: 'body' },
+  variants: {
+    tone: {
+      destructive: 'text-destructive',
+      muted: 'text-muted-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',
+    },
+  },
+});
+
+export type TextProps = React.ComponentProps<typeof NativeText> &
+  VariantProps<typeof textVariants>;
+
+export function Text({ className, tone, variant, ...props }: TextProps) {
+  return (
+    <NativeText
+      className={cn(textVariants({ tone, variant }), className)}
+      {...props}
+    />
+  );
+}

package/src/components/_internal/Story.tsx

@@ -0,0 +1,148 @@
+import { type ComponentType, type ReactNode } from 'react';
+import { ScrollView, View } from 'react-native';
+
+import { cn } from '../../lib/cn';
+import { Text } from '../Text';
+
+type ComponentMatrixCellProps = {
+  column: ComponentMatrixColumn;
+  row: ComponentMatrixRow;
+};
+
+type ComponentMatrixColumn = {
+  description?: string;
+  key: string;
+  label: string;
+};
+
+type ComponentMatrixProps = {
+  Cell: ComponentType<ComponentMatrixCellProps>;
+  cellClassName?: string;
+  className?: string;
+  columns: ComponentMatrixColumn[];
+  rows: ComponentMatrixRow[];
+};
+
+type ComponentMatrixRow = {
+  description?: string;
+  key: string;
+  label: string;
+};
+
+// Same layout as `Story` in @pickle-ui/react, built on React Native
+// primitives: a 12rem column of row labels, then one column per matrix
+// column that grows from 12rem, like the web's `minmax(12rem, 1fr)`, since
+// React Native has no CSS grid.
+function Layout({
+  children,
+  className,
+  title,
+}: {
+  children: ReactNode;
+  className?: string;
+  title: string;
+}) {
+  return (
+    <View className="bg-background min-h-screen">
+      <View className={cn('px-8 py-12', className)}>
+        <View className="mb-12">
+          <Text variant="h1">{title}</Text>
+        </View>
+        <View className="gap-16">{children}</View>
+      </View>
+    </View>
+  );
+}
+
+function Matrix({
+  Cell,
+  cellClassName,
+  className,
+  columns,
+  rows,
+}: ComponentMatrixProps) {
+  return (
+    <ScrollView
+      className={cn('border-border bg-card/20 rounded-md border', className)}
+      contentContainerClassName="min-w-full"
+      horizontal
+    >
+      <View className="flex-1">
+        <View className="flex-row">
+          <View className="border-border bg-muted/30 w-48 border-r border-b p-3" />
+          {columns.map((column, columnIndex) => (
+            <View
+              className={cn(
+                'border-border bg-muted/30 min-w-48 flex-1 border-b p-3',
+                columnIndex < columns.length - 1 && 'border-r',
+              )}
+              key={column.key}
+            >
+              <Text className="font-medium">{column.label}</Text>
+              {column.description ? (
+                <Text className="mt-1" tone="muted" variant="small">
+                  {column.description}
+                </Text>
+              ) : null}
+            </View>
+          ))}
+        </View>
+
+        {rows.map((row, rowIndex) => (
+          <View className="flex-row" key={row.key}>
+            <View
+              className={cn(
+                'border-border bg-background/80 w-48 border-r p-3',
+                rowIndex < rows.length - 1 && 'border-b',
+              )}
+            >
+              <Text className="font-medium">{row.label}</Text>
+              {row.description ? (
+                <Text className="mt-1 max-w-40" tone="muted" variant="small">
+                  {row.description}
+                </Text>
+              ) : null}
+            </View>
+            {columns.map((column, columnIndex) => (
+              <View
+                className={cn(
+                  'border-border bg-background/55 min-h-24 min-w-48 flex-1 items-center justify-center p-4',
+                  rowIndex < rows.length - 1 && 'border-b',
+                  columnIndex < columns.length - 1 && 'border-r',
+                  cellClassName,
+                )}
+                key={`${row.key}-${column.key}`}
+              >
+                <Cell column={column} row={row} />
+              </View>
+            ))}
+          </View>
+        ))}
+      </View>
+    </ScrollView>
+  );
+}
+
+function Section({ children, title }: { children: ReactNode; title: string }) {
+  return (
+    <View>
+      <Text className="mb-6" variant="h3">
+        {title}
+      </Text>
+      {children}
+    </View>
+  );
+}
+
+const Story = Object.assign(Layout, {
+  Layout,
+  Matrix,
+  Section,
+});
+
+export { Story };
+export type {
+  ComponentMatrixCellProps,
+  ComponentMatrixColumn,
+  ComponentMatrixRow,
+};