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

package/src/components/Grid.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+
+import { Story } from './_internal/Story';
+import { StoryItem as Item } from './_internal/StoryItem';
+import { Grid } from './Grid';
+
+const meta = {
+  component: Grid,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/Grid',
+} satisfies Meta<typeof Grid>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-6xl" title="Grid">
+      <Story.Section title="Columns and gaps">
+        <Grid columns={3} gap={4}>
+          {['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven'].map(
+            (label) => (
+              <Item className="min-h-20" key={label}>
+                {label}
+              </Item>
+            ),
+          )}
+        </Grid>
+      </Story.Section>
+
+      <Story.Section title="Rows and column flow">
+        <Grid flow="column" gapX={4} gapY={2} rows={2}>
+          {['A', 'B', 'C', 'D', 'E', 'F'].map((label) => (
+            <Item className="min-h-20" key={label}>
+              {label}
+            </Item>
+          ))}
+        </Grid>
+      </Story.Section>
+
+      <Story.Section title="Placement">
+        <Grid
+          className="border-border rounded-md border border-dashed p-4"
+          columns={3}
+          gap={4}
+          placeItems="center"
+        >
+          <Item className="min-h-40">Tall item</Item>
+          <Item>Centered</Item>
+          <Item className="flex-1">Full height</Item>
+        </Grid>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Grid.test.tsx

@@ -0,0 +1,140 @@
+import { render, screen, within } from '@testing-library/react-native';
+import { Text } from 'react-native';
+
+import { Grid } from './Grid';
+
+const LABELS = ['A', 'B', 'C', 'D', 'E'];
+
+/** The labels of each grid row, empty cells as `''`. */
+function gridRows() {
+  return screen
+    .getByTestId('grid')
+    .children.map((row) =>
+      typeof row === 'string'
+        ? []
+        : row.children.map((cell) =>
+            typeof cell === 'string'
+              ? cell
+              : (within(cell).queryByText(/./)?.props.children ?? ''),
+          ),
+    );
+}
+
+function renderGrid(props: React.ComponentProps<typeof Grid>) {
+  return render(
+    <Grid testID="grid" {...props}>
+      {LABELS.map((label) => (
+        <Text key={label}>{label}</Text>
+      ))}
+    </Grid>,
+  );
+}
+
+describe('Grid', () => {
+  it('fills rows first, keeping empty cells in the last row', async () => {
+    await renderGrid({ columns: 3 });
+
+    expect(gridRows()).toEqual([
+      ['A', 'B', 'C'],
+      ['D', 'E', ''],
+    ]);
+  });
+
+  it('fills columns first with flow="column"', async () => {
+    await renderGrid({ flow: 'column', rows: 2 });
+
+    expect(gridRows()).toEqual([
+      ['A', 'C', 'E'],
+      ['B', 'D', ''],
+    ]);
+  });
+
+  it('keeps the rows it is given, even empty ones', async () => {
+    await renderGrid({ flow: 'column', rows: 3 });
+
+    expect(gridRows()).toEqual([
+      ['A', 'D'],
+      ['B', 'E'],
+      ['C', ''],
+    ]);
+
+    await renderGrid({ columns: 2, rows: 4 });
+
+    expect(gridRows()).toEqual([
+      ['A', 'B'],
+      ['C', 'D'],
+      ['E', ''],
+      ['', ''],
+    ]);
+  });
+
+  it('places the dense flows like row and column', async () => {
+    await renderGrid({ flow: 'column-dense', rows: 2 });
+
+    expect(gridRows()).toEqual([
+      ['A', 'C', 'E'],
+      ['B', 'D', ''],
+    ]);
+  });
+
+  it('gives each child of a fragment its own cell', async () => {
+    await render(
+      <Grid columns={2} testID="grid">
+        <>
+          <Text>A</Text>
+          <Text>B</Text>
+        </>
+        <Text>C</Text>
+      </Grid>,
+    );
+
+    expect(gridRows()).toEqual([
+      ['A', 'B'],
+      ['C', ''],
+    ]);
+  });
+
+  it('distributes rows and cells with placeContent', async () => {
+    await renderGrid({ columns: 2, justify: 'end', placeContent: 'stretch' });
+
+    const grid = screen.getByTestId('grid');
+    expect(grid).toHaveProp('className', 'justify-start');
+    expect(grid.children[0]).toHaveProp(
+      'className',
+      'flex-row justify-start grow',
+    );
+
+    await renderGrid({ columns: 2, justify: 'end' });
+
+    expect(screen.getByTestId('grid').children[0]).toHaveProp(
+      'className',
+      'flex-row justify-end',
+    );
+  });
+
+  it('stacks its children in one column by default', async () => {
+    await renderGrid({});
+
+    expect(gridRows()).toEqual([['A'], ['B'], ['C'], ['D'], ['E']]);
+  });
+
+  it('spaces rows with gapY and columns with gapX', async () => {
+    await renderGrid({ columns: 2, gap: 4, gapX: 2 });
+
+    const grid = screen.getByTestId('grid');
+    expect(grid).toHaveProp('className', 'gap-y-4');
+    expect(grid.children[0]).toHaveProp('className', 'flex-row gap-x-2');
+  });
+
+  it('places items in their cells', async () => {
+    await renderGrid({ align: 'end', columns: 2 });
+    const cell = screen.getByText('A').parent;
+    expect(cell).toHaveProp('className', 'flex-1 justify-end');
+
+    await renderGrid({ align: 'end', columns: 2, placeItems: 'center' });
+    expect(screen.getByText('A').parent).toHaveProp(
+      'className',
+      'flex-1 items-center justify-center',
+    );
+  });
+});

package/src/components/Grid.tsx

@@ -0,0 +1,166 @@
+import { Children, Fragment, isValidElement, type ReactNode } from 'react';
+import { View } from 'react-native';
+
+import { cn } from '../lib/cn';
+import {
+  gapXClasses,
+  gapYClasses,
+  type LayoutAlign,
+  type LayoutGap,
+  type LayoutJustify,
+} from './_internal/layout';
+
+// React Native has no CSS grid, so `Grid` places its children itself: one row
+// of equal `flex-1` cells per grid row, spaced by `gapX`, and the rows stacked
+// and spaced by `gapY`. Empty cells and rows keep their size, so every column
+// stays the same width and `rows` keeps its tracks, as on the web.
+
+type GridFlow = 'column' | 'column-dense' | 'dense' | 'row' | 'row-dense';
+type GridPlaceContent = 'baseline' | 'stretch' | LayoutJustify;
+type GridTrackCount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+// Cells are columns: `items-*` places an item across the cell's width and
+// `justify-*` down its height. A cell can't stretch an item vertically, so
+// `stretch` and `baseline` place it at the top; give the item `flex-1` to fill
+// its cell's height.
+const horizontalClasses = {
+  baseline: 'items-start',
+  center: 'items-center',
+  end: 'items-end',
+  start: 'items-start',
+  stretch: 'items-stretch',
+} as const;
+
+const verticalClasses = {
+  baseline: 'justify-start',
+  center: 'justify-center',
+  end: 'justify-end',
+  start: 'justify-start',
+  stretch: 'justify-start',
+} as const;
+
+// Distributes the rows down the grid and the cells along each row, like CSS
+// `align-content` and `justify-content`. Cells share each row's width, so only
+// a grid taller than its rows shows the difference; `stretch` grows the rows
+// into that height instead.
+const contentClasses = {
+  around: 'justify-around',
+  baseline: 'justify-start',
+  between: 'justify-between',
+  center: 'justify-center',
+  end: 'justify-end',
+  evenly: 'justify-evenly',
+  start: 'justify-start',
+  stretch: 'justify-start',
+} as const;
+
+export type GridProps = React.ComponentProps<typeof View> & {
+  /**
+   * Places each item down its cell, like CSS `align-items`. `stretch` and
+   * `baseline` place it at the top: give the item `flex-1` to fill the cell.
+   */
+  align?: LayoutAlign;
+  columns?: GridTrackCount;
+  /**
+   * Fills rows first (`row`) or columns first (`column`). Items can't span
+   * cells on native, so the `dense` flows place them like `row` and `column`.
+   */
+  flow?: GridFlow;
+  gap?: LayoutGap;
+  gapX?: LayoutGap;
+  gapY?: LayoutGap;
+  /** Distributes the cells along each row, like CSS `justify-content`. */
+  justify?: LayoutJustify;
+  /** Distributes the rows and the cells, like CSS `place-content`. */
+  placeContent?: GridPlaceContent;
+  /** Places each item across and down its cell, like CSS `place-items`. */
+  placeItems?: LayoutAlign;
+  rows?: GridTrackCount;
+};
+
+/**
+ * Lays its children out in equal columns, like `Grid` in @pickle-ui/react.
+ * Items fill their cell's width by default and the cells of a row share its
+ * height.
+ */
+export function Grid({
+  align,
+  children,
+  className,
+  columns,
+  flow = 'row',
+  gap,
+  gapX = gap,
+  gapY = gap,
+  justify,
+  placeContent,
+  placeItems,
+  rows,
+  ...props
+}: GridProps) {
+  const items = flattenChildren(children);
+  const byColumn = flow === 'column' || flow === 'column-dense';
+  const rowCount = byColumn
+    ? (rows ?? 1)
+    : Math.max(rows ?? 0, Math.ceil(items.length / (columns ?? 1)));
+  const columnCount = byColumn
+    ? Math.max(columns ?? 1, Math.ceil(items.length / rowCount))
+    : (columns ?? 1);
+  const vertical = placeItems ?? align;
+  const distribution = placeContent ?? justify;
+
+  return (
+    <View
+      className={cn(
+        gapY === undefined ? undefined : gapYClasses[gapY],
+        placeContent === undefined ? undefined : contentClasses[placeContent],
+        className,
+      )}
+      {...props}
+    >
+      {Array.from({ length: rowCount }, (_, row) => (
+        <View
+          className={cn(
+            'flex-row',
+            gapX === undefined ? undefined : gapXClasses[gapX],
+            distribution === undefined
+              ? undefined
+              : contentClasses[distribution],
+            placeContent === 'stretch' ? 'grow' : undefined,
+          )}
+          key={row}
+        >
+          {Array.from({ length: columnCount }, (_, column) => (
+            <View
+              className={cn(
+                'flex-1',
+                placeItems === undefined
+                  ? undefined
+                  : horizontalClasses[placeItems],
+                vertical === undefined ? undefined : verticalClasses[vertical],
+              )}
+              key={column}
+            >
+              {
+                items[
+                  byColumn
+                    ? column * rowCount + row
+                    : row * columnCount + column
+                ]
+              }
+            </View>
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+/** The grid items, with fragments opened up as on the web. */
+function flattenChildren(children: ReactNode): ReactNode[] {
+  return Children.toArray(children).flatMap((child) =>
+    isValidElement<{ children?: ReactNode }>(child) && child.type === Fragment
+      ? flattenChildren(child.props.children)
+      : [child],
+  );
+}

package/src/components/Separator.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+
+import { Story } from './_internal/Story';
+import { Separator } from './Separator';
+import { Text } from './Text';
+import { XStack } from './XStack';
+import { YStack } from './YStack';
+
+const meta = {
+  component: Separator,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/Separator',
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-3xl" title="Separator">
+      <Story.Section title="Horizontal">
+        <YStack className="max-w-sm" gap={3}>
+          <Text>Account</Text>
+          <Separator />
+          <Text tone="muted">Manage your profile and preferences.</Text>
+        </YStack>
+      </Story.Section>
+      <Story.Section title="Vertical">
+        <XStack align="center" className="h-5" gap={3}>
+          <Text>Docs</Text>
+          <Separator orientation="vertical" />
+          <Text>Components</Text>
+          <Separator orientation="vertical" />
+          <Text>Theming</Text>
+        </XStack>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Separator.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react-native';
+
+import { Separator } from './Separator';
+
+describe('Separator', () => {
+  it('renders a horizontal separator by default', async () => {
+    await render(<Separator testID="separator" />);
+
+    const separator = screen.getByTestId('separator');
+    expect(separator).toHaveProp('role', 'separator');
+    expect(separator).toHaveProp(
+      'className',
+      expect.stringContaining('h-px w-full'),
+    );
+  });
+
+  it('renders a vertical separator', async () => {
+    await render(<Separator orientation="vertical" testID="separator" />);
+
+    expect(screen.getByTestId('separator')).toHaveProp(
+      'className',
+      expect.stringContaining('w-px self-stretch'),
+    );
+  });
+});

package/src/components/Separator.tsx

@@ -0,0 +1,30 @@
+import { View } from 'react-native';
+
+import { cn } from '../lib/cn';
+
+export type SeparatorProps = React.ComponentProps<typeof View> & {
+  orientation?: 'horizontal' | 'vertical';
+};
+
+/**
+ * A 1px rule in the border color, like `Separator` in @pickle-ui/react. Its
+ * `separator` role reaches screen readers on the web; iOS and Android have no
+ * separator trait, so they skip it like any non-focusable view.
+ */
+export function Separator({
+  className,
+  orientation = 'horizontal',
+  ...props
+}: SeparatorProps) {
+  return (
+    <View
+      className={cn(
+        'bg-border shrink-0',
+        orientation === 'horizontal' ? 'h-px w-full' : 'w-px self-stretch',
+        className,
+      )}
+      role="separator"
+      {...props}
+    />
+  );
+}

package/src/components/Spinner.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+
+import { Story } from './_internal/Story';
+import { Spinner } from './Spinner';
+import { Text } from './Text';
+import { XStack } from './XStack';
+
+const meta = {
+  component: Spinner,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/Spinner',
+} satisfies Meta<typeof Spinner>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-3xl" title="Spinner">
+      <Story.Section title="Sizes">
+        <XStack align="center" gap={6}>
+          <Spinner className="size-4" />
+          <Spinner className="size-6" />
+          <Spinner className="size-8" />
+        </XStack>
+      </Story.Section>
+      <Story.Section title="With a label">
+        <XStack align="center" gap={2}>
+          <Spinner aria-hidden className="text-muted-foreground size-4" />
+          <Text tone="muted">Loading your workspace…</Text>
+        </XStack>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Spinner.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react-native';
+
+import { Spinner } from './Spinner';
+
+describe('Spinner', () => {
+  it('announces that something is loading', async () => {
+    await render(<Spinner />);
+
+    expect(
+      screen.getByRole('progressbar', { name: 'Loading' }),
+    ).toBeOnTheScreen();
+  });
+
+  it('accepts a custom accessible name', async () => {
+    await render(<Spinner accessibilityLabel="Saving" />);
+
+    expect(
+      screen.getByRole('progressbar', { name: 'Saving' }),
+    ).toBeOnTheScreen();
+  });
+
+  it('is decorative when aria-hidden', async () => {
+    await render(<Spinner aria-hidden testID="spinner" />);
+
+    expect(screen.queryByRole('progressbar')).toBeNull();
+    expect(
+      screen.getByTestId('spinner', { includeHiddenElements: true }),
+    ).not.toHaveProp('accessibilityLabel');
+  });
+});

package/src/components/Spinner.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react';
+import { Animated, Easing, Platform, View } from 'react-native';
+import { useResolveClassNames } from 'uniwind';
+
+import { cn } from '../lib/cn';
+
+export type SpinnerProps = Omit<
+  React.ComponentProps<typeof View>,
+  'children'
+> & {
+  /** Hides the spinner from screen readers, when visible text already says what is loading. */
+  'aria-hidden'?: boolean;
+};
+
+/**
+ * The web `Spinner`'s look on native: a three-quarter ring turning once a
+ * second, drawn inside a `size-6` box like the web icon. Size it with
+ * `size-*` and color it with `text-*`, as on the web. Announced as "Loading"
+ * by default; `accessibilityLabel` replaces the name and `aria-hidden` makes
+ * it decorative.
+ */
+export function Spinner({
+  accessibilityLabel = 'Loading',
+  'aria-hidden': ariaHidden = false,
+  className,
+  style,
+  ...props
+}: SpinnerProps) {
+  const [turn] = useState(() => new Animated.Value(0));
+  const box = cn('text-foreground size-6', className);
+  // React Native has no `currentColor`: the ring reads the `text-*` color, and
+  // its stroke follows the box like the icon's (2px at 24px).
+  const { color, width } = useResolveClassNames(box);
+  const strokeWidth = typeof width === 'number' ? width / 12 : 2;
+
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.timing(turn, {
+        duration: 1000,
+        easing: Easing.linear,
+        toValue: 1,
+        // react-native-web has no native driver and warns when asked for it.
+        useNativeDriver: Platform.OS !== 'web',
+      }),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [turn]);
+
+  const rotate = turn.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  return (
+    <Animated.View
+      accessibilityLabel={ariaHidden ? undefined : accessibilityLabel}
+      accessibilityRole={ariaHidden ? undefined : 'progressbar'}
+      accessible={!ariaHidden}
+      aria-hidden={ariaHidden}
+      className={cn('items-center justify-center', box)}
+      style={[style, { transform: [{ rotate }] }]}
+      {...props}
+    >
+      <View
+        className="size-3/4 rounded-full"
+        style={{
+          borderColor: typeof color === 'string' ? color : undefined,
+          borderTopColor: 'transparent',
+          borderWidth: strokeWidth,
+        }}
+      />
+    </Animated.View>
+  );
+}

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