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

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,8 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 
 import { View } from 'react-native';
+import { ScopedVariables } from 'uniwind';
 
 import { type ComponentMatrixCellProps, Story } from './_internal/Story';
+import { Badge } from './Badge';
+import { Button } from './Button';
+import { Card } from './Card';
+import { Input } from './form/Input';
 import { Text, type TextProps } from './Text';
 
 const meta = {
@@ -38,11 +43,47 @@ const TONE_COLUMNS: { key: 'default' | TextTone; label: string }[] = [
   { key: 'destructive', label: 'Destructive' },
 ];
 
+// An app sets `--font-sans` in its stylesheet; `ScopedVariables` sets it here
+// so both fonts sit side by side. On the web, `--font-heading` resolves
+// where it's declared, so the scope sets it too; native resolves it in place.
+const FONT_COLUMNS = [
+  { description: 'No --font-sans', key: '', label: 'System font' },
+  {
+    description: "--font-sans: 'Georgia'",
+    key: 'Georgia',
+    label: 'App font',
+  },
+];
+
 const WEIGHT_ROWS: { key: TextWeight; label: string }[] = [
   { key: 'normal', label: 'Normal' },
   { key: 'bold', label: 'Bold' },
 ];
 
+function FontCell({ column }: ComponentMatrixCellProps) {
+  return (
+    <ScopedVariables
+      variables={
+        column.key
+          ? { '--font-heading': column.key, '--font-sans': column.key }
+          : {}
+      }
+    >
+      <Card className="w-80">
+        <Card.Header>
+          <Card.Title>Weekly report</Card.Title>
+          <Card.Description>Every project, every Monday.</Card.Description>
+        </Card.Header>
+        <Card.Content className="items-start gap-3">
+          <Badge variant="success">Shipped</Badge>
+          <Input accessibilityLabel="Email" placeholder="ada@example.com" />
+          <Button>Subscribe</Button>
+        </Card.Content>
+      </Card>
+    </ScopedVariables>
+  );
+}
+
 function ToneCell({ column, row }: ComponentMatrixCellProps) {
   return (
     <Text
@@ -98,6 +139,14 @@ export const All: StoryDefinition = {
         />
       </Story.Section>
 
+      <Story.Section title="App font">
+        <Story.Matrix
+          Cell={FontCell}
+          columns={FONT_COLUMNS}
+          rows={[{ key: 'card', label: 'Components' }]}
+        />
+      </Story.Section>
+
       <Story.Section title="Truncate">
         <View className="border-border w-64 rounded-md border p-3">
           <Text truncate>

package/src/components/Text.tsx

@@ -5,7 +5,7 @@ import { cn } from '../lib/cn';
 
 // 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', {
+const textVariants = cva('text-foreground font-sans', {
   defaultVariants: { variant: 'body' },
   variants: {
     tone: {
@@ -16,8 +16,8 @@ const textVariants = cva('text-foreground', {
     variant: {
       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',
+      h1: 'font-heading text-h1 font-semibold tracking-tight',
+      h2: 'font-heading text-h2 font-semibold tracking-tight',
       h3: 'text-h3 font-semibold',
       h4: 'text-h4 font-medium',
       lead: 'text-lead',
@@ -33,7 +33,8 @@ const textVariants = cva('text-foreground', {
 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.
+// fonts don't resolve, so `code` names each platform's monospace font. The
+// `style` prop wins over `font-sans` from `className`.
 const styles = StyleSheet.create({
   code: { fontFamily: Platform.select({ default: 'monospace', ios: 'Menlo' }) },
 });

package/src/components/XStack.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+
+import { Story } from './_internal/Story';
+import { StoryItem as Item } from './_internal/StoryItem';
+import { XStack } from './XStack';
+
+const meta = {
+  component: XStack,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/XStack',
+} satisfies Meta<typeof XStack>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-6xl" title="XStack">
+      <Story.Section title="Horizontal spacing">
+        <XStack gap={3}>
+          <Item>Avatar</Item>
+          <Item>Profile details</Item>
+          <Item>Status</Item>
+        </XStack>
+      </Story.Section>
+
+      <Story.Section title="Distribution">
+        <XStack
+          align="center"
+          className="border-border min-h-48 rounded-md border border-dashed p-4"
+          justify="between"
+        >
+          <Item>Leading action</Item>
+          <Item>Trailing action</Item>
+        </XStack>
+      </Story.Section>
+
+      <Story.Section title="Responsive override">
+        <XStack className="max-sm:flex-col" gap={3}>
+          <Item>Horizontal by default</Item>
+          <Item>Vertical below sm</Item>
+        </XStack>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/XStack.test.tsx

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react-native';
+
+import { XStack } from './XStack';
+
+describe('XStack', () => {
+  it('renders a row with the Flex props', async () => {
+    await render(<XStack align="center" gap={2} testID="stack" />);
+
+    expect(
+      String(screen.getByTestId('stack').props.className).split(' '),
+    ).toEqual(expect.arrayContaining(['flex-row', 'items-center', 'gap-2']));
+  });
+});

package/src/components/XStack.tsx

@@ -0,0 +1,7 @@
+import { Flex, type FlexProps } from './Flex';
+
+export type XStackProps = Omit<FlexProps, 'direction'>;
+
+export function XStack(props: XStackProps) {
+  return <Flex direction="row" {...props} />;
+}

package/src/components/YStack.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+
+import { Story } from './_internal/Story';
+import { StoryItem as Item } from './_internal/StoryItem';
+import { YStack } from './YStack';
+
+const meta = {
+  component: YStack,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/YStack',
+} satisfies Meta<typeof YStack>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-6xl" title="YStack">
+      <Story.Section title="Vertical spacing">
+        <YStack gap={3}>
+          <Item>Avatar</Item>
+          <Item>Profile details</Item>
+          <Item>Status</Item>
+        </YStack>
+      </Story.Section>
+
+      <Story.Section title="Distribution">
+        <YStack
+          align="center"
+          className="border-border min-h-48 rounded-md border border-dashed p-4"
+          justify="between"
+        >
+          <Item>Leading action</Item>
+          <Item>Trailing action</Item>
+        </YStack>
+      </Story.Section>
+
+      <Story.Section title="Responsive override">
+        <YStack className="sm:flex-row" gap={3}>
+          <Item>Vertical by default</Item>
+          <Item>Horizontal from sm</Item>
+        </YStack>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/YStack.test.tsx

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react-native';
+
+import { YStack } from './YStack';
+
+describe('YStack', () => {
+  it('renders a column with the Flex props', async () => {
+    await render(<YStack gap={2} justify="center" testID="stack" />);
+
+    expect(
+      String(screen.getByTestId('stack').props.className).split(' '),
+    ).toEqual(expect.arrayContaining(['flex-col', 'justify-center', 'gap-2']));
+  });
+});

package/src/components/YStack.tsx

@@ -0,0 +1,7 @@
+import { Flex, type FlexProps } from './Flex';
+
+export type YStackProps = Omit<FlexProps, 'direction'>;
+
+export function YStack(props: YStackProps) {
+  return <Flex direction="column" {...props} />;
+}