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

package/src/base.css

@@ -1,11 +1,29 @@
 /**
  * Pickle's components as a content source, so Uniwind generates the classes
- * they use, and the type scale behind `Text`'s variants, shared with
- * `@pickle-ui/react`. `styles.css` imports this file; import it alone, after
- * `uniwind`, to bring your own token set instead of
- * `@pickle-ui/tokens/native.css`. The type scale only declares theme
- * variables, so it compiles in any order.
+ * they use, the type scale behind `Text`'s variants, shared with
+ * `@pickle-ui/react`, and the native font defaults. `styles.css` imports this
+ * file; import it alone, after `uniwind`, to bring your own token set instead
+ * of `@pickle-ui/tokens/native.css`. It only declares theme variables, so it
+ * compiles in any order.
  */
 @import '@pickle-ui/tokens/typography.css';
 
 @source './components/**/*.{ts,tsx}';
+
+/*
+ * The components' text uses `font-sans`, and their headings `font-heading`.
+ * Until the app declares `--font-sans`, it reads a variable nothing declares,
+ * so it sets no family and text keeps the system font: an explicit system
+ * family would also drop the medium and semibold weights on Android.
+ * `default` lets any `--font-*` an app or its token set declares win, and
+ * replaces Tailwind's web font stacks, which native can't resolve.
+ *
+ * This default is Pickle's, not Uniwind's. Uniwind suggests per-platform
+ * values instead, but `@variant ios` doesn't compile inside `@theme`, and
+ * inside `@layer theme` it overrides the app's own `--font-sans`.
+ */
+@theme default {
+  --font-sans: var(--pickle-no-font);
+  --font-heading: var(--font-sans);
+  --font-mono: var(--pickle-no-font);
+}

package/src/components/Badge.tsx

@@ -35,7 +35,7 @@ const badgeVariants = cva(
   },
 );
 
-const labelVariants = cva('font-medium', {
+const labelVariants = cva('font-sans font-medium', {
   defaultVariants: { size: 'md', variant: 'default' },
   variants: {
     size: {

package/src/components/Button.tsx

@@ -3,11 +3,12 @@ import { Children, isValidElement } from 'react';
 import { type Insets, Pressable, Text, View } from 'react-native';
 
 import { cn } from '../lib/cn';
-import { Spinner } from './_internal/Spinner';
+import { Spinner } from './Spinner';
 
 // 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.
+// phone, with its text sizes from `sm` up. `hitSlop` stretches every size to a
+// 44pt touch target, like the web's `pointer-coarse` hit area. Paddings leave
+// room for the 1pt border.
 const buttonVariants = cva(
   'flex-row items-center justify-center gap-2 rounded-lg border disabled:opacity-64',
   {
@@ -42,24 +43,26 @@ const buttonVariants = cva(
   },
 );
 
-const labelVariants = cva('font-medium', {
+const labelVariants = cva('font-sans font-medium', {
   compoundVariants: [
     { className: 'underline', pressed: true, variant: 'link' },
   ],
   defaultVariants: { size: 'md', variant: 'default' },
   variants: {
     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-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',
+      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',
@@ -73,16 +76,17 @@ const labelVariants = cva('font-medium', {
   },
 });
 
-const spinnerVariants = cva('', {
+// Sized and dimmed like the web button's icons, in the label's color.
+const spinnerVariants = cva('size-4 opacity-80', {
   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',
+      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',
     },
   },
 });
@@ -198,7 +202,7 @@ export function Button({
           )}
           {loading ? (
             <View className="absolute">
-              <Spinner className={spinnerVariants({ variant })} />
+              <Spinner aria-hidden className={spinnerVariants({ variant })} />
             </View>
           ) : null}
         </>

package/src/components/Card.tsx

@@ -45,10 +45,13 @@ function CardFooter({ className, ...props }: CardFooterProps) {
  * 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,
-  );
+  const actions: React.ReactNode[] = [];
+  const rest: React.ReactNode[] = [];
+  for (const child of Children.toArray(children)) {
+    (isValidElement(child) && child.type === CardAction ? actions : rest).push(
+      child,
+    );
+  }
 
   if (actions.length === 0) {
     return (
@@ -63,9 +66,7 @@ function CardHeader({ children, className, ...props }: CardHeaderProps) {
       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>
+      <View className="flex-1 gap-1.5">{rest}</View>
       {actions}
     </View>
   );
@@ -86,7 +87,10 @@ function CardRoot({ className, ...props }: CardProps) {
 function CardTitle({ className, ...props }: CardTitleProps) {
   return (
     <Text
-      className={cn('text-card-foreground leading-none', className)}
+      className={cn(
+        'text-card-foreground font-heading leading-none',
+        className,
+      )}
       variant="h3"
       {...props}
     />

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}
+    />
+  );
+}

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