@pickle-ui/react 0.0.0-stage → 1.0.0-beta.3

package/src/components/Grid.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { getLayoutClasses, type LayoutStyleProps } from './_internal/layout';
+
+const columnClasses = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-2',
+  3: 'grid-cols-3',
+  4: 'grid-cols-4',
+  5: 'grid-cols-5',
+  6: 'grid-cols-6',
+  7: 'grid-cols-7',
+  8: 'grid-cols-8',
+  9: 'grid-cols-9',
+  10: 'grid-cols-10',
+  11: 'grid-cols-11',
+  12: 'grid-cols-12',
+} as const;
+
+const flowClasses = {
+  column: 'grid-flow-col',
+  'column-dense': 'grid-flow-col-dense',
+  dense: 'grid-flow-dense',
+  row: 'grid-flow-row',
+  'row-dense': 'grid-flow-row-dense',
+} as const;
+
+const placeContentClasses = {
+  around: 'place-content-around',
+  baseline: 'place-content-baseline',
+  between: 'place-content-between',
+  center: 'place-content-center',
+  end: 'place-content-end',
+  evenly: 'place-content-evenly',
+  start: 'place-content-start',
+  stretch: 'place-content-stretch',
+} as const;
+
+const placeItemsClasses = {
+  baseline: 'place-items-baseline',
+  center: 'place-items-center',
+  end: 'place-items-end',
+  start: 'place-items-start',
+  stretch: 'place-items-stretch',
+} as const;
+
+const rowClasses = {
+  1: 'grid-rows-1',
+  2: 'grid-rows-2',
+  3: 'grid-rows-3',
+  4: 'grid-rows-4',
+  5: 'grid-rows-5',
+  6: 'grid-rows-6',
+  7: 'grid-rows-7',
+  8: 'grid-rows-8',
+  9: 'grid-rows-9',
+  10: 'grid-rows-10',
+  11: 'grid-rows-11',
+  12: 'grid-rows-12',
+} as const;
+
+type GridProps = LayoutStyleProps &
+  Omit<React.ComponentProps<'div'>, keyof LayoutStyleProps> & {
+    as?: React.ElementType;
+    columns?: keyof typeof columnClasses;
+    flow?: keyof typeof flowClasses;
+    placeContent?: keyof typeof placeContentClasses;
+    placeItems?: keyof typeof placeItemsClasses;
+    rows?: keyof typeof rowClasses;
+  };
+
+function Grid({
+  align,
+  as,
+  className,
+  columns,
+  flow,
+  gap,
+  gapX,
+  gapY,
+  justify,
+  placeContent,
+  placeItems,
+  ref,
+  rows,
+  ...props
+}: GridProps) {
+  const Component = as ?? 'div';
+
+  return (
+    <Component
+      className={cn(
+        'grid',
+        getLayoutClasses({ align, gap, gapX, gapY, justify }),
+        columns === undefined ? undefined : columnClasses[columns],
+        flow === undefined ? undefined : flowClasses[flow],
+        placeContent === undefined
+          ? undefined
+          : placeContentClasses[placeContent],
+        placeItems === undefined ? undefined : placeItemsClasses[placeItems],
+        rows === undefined ? undefined : rowClasses[rows],
+        className,
+      )}
+      data-slot="grid"
+      ref={ref}
+      {...props}
+    />
+  );
+}
+
+export { Grid };
+export type { GridProps };

package/src/components/Group.stories.tsx

@@ -0,0 +1,130 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import {
+  IconChevronDown,
+  IconGitFork,
+  IconZoomIn,
+  IconZoomOut,
+} from '@tabler/icons-react';
+
+import { type ComponentMatrixCellProps, Story } from './_internal/Story';
+import { Badge } from './Badge';
+import { Button } from './Button';
+import { Input } from './form/Input';
+import { Group } from './Group';
+import { Popover } from './Popover';
+
+const meta = {
+  component: Group,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/Group',
+} satisfies Meta<typeof Group>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const STATE_COLUMNS = [
+  { key: 'default', label: 'Default' },
+  { key: 'disabled', label: 'Disabled' },
+];
+
+const PATTERN_ROWS = [
+  {
+    description: 'Icon buttons stacked vertically',
+    key: 'vertical',
+    label: 'Vertical',
+  },
+  {
+    description: 'Action button with popover trigger',
+    key: 'with-popup',
+    label: 'With popup',
+  },
+  {
+    description: 'Adjacent inputs with separator',
+    key: 'two-inputs',
+    label: 'Two inputs',
+  },
+];
+
+function GroupMatrixCell({ column, row }: ComponentMatrixCellProps) {
+  const disabled = column.key === 'disabled';
+
+  if (row.key === 'vertical') {
+    return (
+      <Group aria-label="Zoom controls" orientation="vertical">
+        <Button aria-label="Zoom in" size="icon" variant="outline">
+          <IconZoomIn aria-hidden="true" stroke={2} />
+        </Button>
+        <Group.Separator orientation="horizontal" />
+        <Button
+          aria-label="Zoom out"
+          disabled={disabled}
+          size="icon"
+          variant="outline"
+        >
+          <IconZoomOut aria-hidden="true" stroke={2} />
+        </Button>
+      </Group>
+    );
+  }
+
+  if (row.key === 'with-popup') {
+    return (
+      <Group aria-label="Repository actions">
+        <Button disabled={disabled} variant="outline">
+          <IconGitFork aria-hidden="true" stroke={2} />
+          Fork
+          <Badge variant="secondary">48</Badge>
+        </Button>
+        <Group.Separator />
+        <Popover>
+          <Popover.Trigger
+            render={
+              <Button aria-label="Fork options" size="icon" variant="outline" />
+            }
+          >
+            <IconChevronDown aria-hidden="true" stroke={2} />
+          </Popover.Trigger>
+          <Popover.Content align="end" className="w-64">
+            <Popover.Header>
+              <Popover.Title>Existing forks</Popover.Title>
+              <Popover.Description>
+                You do not have any forks of this repository.
+              </Popover.Description>
+            </Popover.Header>
+          </Popover.Content>
+        </Popover>
+      </Group>
+    );
+  }
+
+  return (
+    <Group aria-label="Full name" className="w-full max-w-xs">
+      <Input aria-label="First name" placeholder="First name" />
+      <Group.Separator />
+      <Input
+        aria-label="Last name"
+        disabled={disabled}
+        placeholder="Last name"
+      />
+    </Group>
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-4xl" title="Group">
+      <Story.Section title="Patterns and states">
+        <Story.Matrix
+          Cell={GroupMatrixCell}
+          cellClassName="justify-start"
+          cellWidth="18rem"
+          columns={STATE_COLUMNS}
+          rows={PATTERN_ROWS}
+        />
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Group.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Button } from './Button';
+import { Group } from './Group';
+
+describe('Group', () => {
+  it('renders grouped controls with separators', () => {
+    render(
+      <Group aria-label="Actions">
+        <Button>One</Button>
+        <Group.Separator />
+        <Button>Two</Button>
+      </Group>,
+    );
+
+    expect(screen.getByRole('group', { name: 'Actions' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'One' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Two' })).toBeInTheDocument();
+  });
+
+  it('defaults to horizontal orientation', () => {
+    render(
+      <Group aria-label="Actions">
+        <Button>One</Button>
+      </Group>,
+    );
+
+    expect(screen.getByRole('group', { name: 'Actions' })).toHaveAttribute(
+      'data-orientation',
+      'horizontal',
+    );
+  });
+
+  it('supports vertical orientation', () => {
+    render(
+      <Group
+        aria-label="Zoom controls"
+        data-testid="group"
+        orientation="vertical"
+      >
+        <Button aria-label="Zoom in" size="icon" variant="outline">
+          +
+        </Button>
+        <Group.Separator orientation="horizontal" />
+        <Button aria-label="Zoom out" size="icon" variant="outline">
+          -
+        </Button>
+      </Group>,
+    );
+
+    expect(screen.getByTestId('group')).toHaveAttribute(
+      'data-orientation',
+      'vertical',
+    );
+  });
+});

package/src/components/Group.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { Separator, type SeparatorProps } from './Separator';
+
+const groupVariants = cva(
+  'flex w-fit *:focus-visible:z-1 has-[>[data-slot=group]]:gap-2 *:has-focus-visible:z-1 dark:*:[[data-slot=separator]:has(~button:hover):not(:has(~[data-slot=separator]~[data-slot]:hover)),[data-slot=separator]:has(~[data-slot][data-pressed]):not(:has(~[data-slot=separator]~[data-slot][data-pressed]))]:before:bg-input/64 dark:*:[button:hover~[data-slot=separator]:not([data-slot]:hover~[data-slot=separator]~[data-slot=separator]),[data-slot][data-pressed]~[data-slot=separator]:not([data-slot][data-pressed]~[data-slot=separator]~[data-slot=separator])]:before:bg-input/64',
+  {
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+    variants: {
+      orientation: {
+        horizontal:
+          '*:pointer-coarse:after:min-w-auto *:data-slot:has-[~[data-slot]]:rounded-e-none *:data-slot:has-[~[data-slot]]:border-e-0 *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-end-[0.5px] *:data-slot:has-[~[data-slot]]:before:rounded-e-none *:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-start-[0.5px] *:[[data-slot]~[data-slot]]:rounded-s-none *:[[data-slot]~[data-slot]]:border-s-0 *:[[data-slot]~[data-slot]]:before:rounded-s-none',
+        vertical:
+          'flex-col *:pointer-coarse:after:min-h-auto *:data-slot:has-[~[data-slot]]:rounded-b-none *:data-slot:has-[~[data-slot]]:border-b-0 *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-bottom-[0.5px] *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:hidden *:data-slot:has-[~[data-slot]]:before:rounded-b-none dark:*:last:before:hidden dark:*:first:before:block *:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-top-[0.5px] *:[[data-slot]~[data-slot]]:rounded-t-none *:[[data-slot]~[data-slot]]:border-t-0 *:[[data-slot]~[data-slot]]:before:rounded-t-none',
+      },
+    },
+  },
+);
+
+type GroupProps = React.ComponentProps<'div'> &
+  VariantProps<typeof groupVariants>;
+
+type GroupSeparatorProps = SeparatorProps;
+
+type GroupTextProps = useRender.ComponentProps<'div'>;
+
+function GroupRoot({
+  className,
+  orientation = 'horizontal',
+  ...props
+}: GroupProps) {
+  return (
+    <div
+      className={cn(groupVariants({ orientation }), className)}
+      data-orientation={orientation}
+      data-slot="group"
+      // react-doctor-disable-next-line react-doctor/prefer-tag-over-role -- role="group" is the correct ARIA pattern for grouped controls
+      role="group"
+      {...props}
+    />
+  );
+}
+
+function GroupSeparator({
+  className,
+  orientation = 'vertical',
+  ...props
+}: GroupSeparatorProps) {
+  return (
+    <Separator
+      className={cn(
+        'bg-input has-[+[data-slot=input-control]:focus-within,+[data-slot=input-group]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:bg-ring dark:before:bg-input/32 [[data-slot=input-control]:focus-within+&,[data-slot=input-group]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+&,[data-slot=number-field]:focus-within+input+&]:bg-ring pointer-events-none relative z-2 before:absolute before:inset-0 has-[+[data-slot=input-control]:focus-within,+[data-slot=input-group]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:translate-x-px [[data-slot=input-control]:focus-within+&,[data-slot=input-group]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+input+&]:-translate-x-px',
+        className,
+      )}
+      orientation={orientation}
+      {...props}
+    />
+  );
+}
+
+function GroupText({ className, render, ...props }: GroupTextProps) {
+  const defaultProps = {
+    className: cn(
+      'border-input bg-muted text-muted-foreground relative inline-flex h-8 items-center gap-2 rounded-lg border px-[calc(--spacing(3)-1px)] text-base whitespace-nowrap shadow-xs/5 outline-none transition-shadow not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] sm:text-sm dark:bg-input/64 dark:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*="size-"])]:size-4 [&_svg]:-mx-0.5 [&_svg]:shrink-0',
+      className,
+    ),
+    'data-slot': 'group-text',
+  };
+
+  return useRender({
+    defaultTagName: 'div',
+    props: mergeProps(defaultProps, props),
+    render,
+  });
+}
+
+const Group = Object.assign(GroupRoot, {
+  Separator: GroupSeparator,
+  Text: GroupText,
+});
+
+export { Group, GroupRoot, GroupSeparator, GroupText, groupVariants };
+export type { GroupProps, GroupSeparatorProps, GroupTextProps };

package/src/components/Menu.stories.tsx

@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import {
+  IconCreditCard,
+  IconLogout,
+  IconMail,
+  IconMessage,
+  IconSettings,
+  IconUser,
+  IconUserPlus,
+} from '@tabler/icons-react';
+import { useState } from 'react';
+
+import { Story } from './_internal/Story';
+import { Button } from './Button';
+import { Menu } from './Menu';
+
+const meta = {
+  component: Menu,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/Menu',
+} satisfies Meta<typeof Menu>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+function AccountMenu() {
+  const [showStatusBar, setShowStatusBar] = useState(true);
+  const [showActivity, setShowActivity] = useState(false);
+  const [theme, setTheme] = useState('system');
+
+  return (
+    <Menu>
+      <Menu.Trigger render={<Button variant="outline" />}>
+        My account
+      </Menu.Trigger>
+      <Menu.Content className="w-56">
+        <Menu.Group>
+          <Menu.GroupLabel>Account</Menu.GroupLabel>
+          <Menu.Item>
+            <IconUser />
+            Profile
+            <Menu.Shortcut>⇧⌘P</Menu.Shortcut>
+          </Menu.Item>
+          <Menu.Item>
+            <IconCreditCard />
+            Billing
+            <Menu.Shortcut>⌘B</Menu.Shortcut>
+          </Menu.Item>
+          <Menu.Item>
+            <IconSettings />
+            Settings
+            <Menu.Shortcut>⌘,</Menu.Shortcut>
+          </Menu.Item>
+          <Menu.Sub>
+            <Menu.SubTrigger>
+              <IconUserPlus />
+              Invite users
+            </Menu.SubTrigger>
+            <Menu.SubContent>
+              <Menu.Item>
+                <IconMail />
+                Email
+              </Menu.Item>
+              <Menu.Item>
+                <IconMessage />
+                Message
+              </Menu.Item>
+            </Menu.SubContent>
+          </Menu.Sub>
+        </Menu.Group>
+        <Menu.Separator />
+        <Menu.Group>
+          <Menu.GroupLabel>View</Menu.GroupLabel>
+          <Menu.CheckboxItem
+            checked={showStatusBar}
+            onCheckedChange={setShowStatusBar}
+          >
+            Status bar
+          </Menu.CheckboxItem>
+          <Menu.CheckboxItem
+            checked={showActivity}
+            onCheckedChange={setShowActivity}
+          >
+            Activity panel
+          </Menu.CheckboxItem>
+        </Menu.Group>
+        <Menu.Separator />
+        <Menu.Group>
+          <Menu.GroupLabel>Theme</Menu.GroupLabel>
+          <Menu.RadioGroup
+            onValueChange={(value) => setTheme(value as string)}
+            value={theme}
+          >
+            <Menu.RadioItem value="light">Light</Menu.RadioItem>
+            <Menu.RadioItem value="dark">Dark</Menu.RadioItem>
+            <Menu.RadioItem value="system">System</Menu.RadioItem>
+          </Menu.RadioGroup>
+        </Menu.Group>
+        <Menu.Separator />
+        <Menu.Item variant="destructive">
+          <IconLogout />
+          Log out
+          <Menu.Shortcut>⇧⌘Q</Menu.Shortcut>
+        </Menu.Item>
+      </Menu.Content>
+    </Menu>
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-6xl" title="Menu">
+      <Story.Section title="Account menu">
+        <AccountMenu />
+      </Story.Section>
+      <Story.Section title="Alignment">
+        <div className="flex gap-4">
+          {(['start', 'center', 'end'] as const).map((align) => (
+            <Menu key={align}>
+              <Menu.Trigger render={<Button variant="outline" />}>
+                Align {align}
+              </Menu.Trigger>
+              <Menu.Content align={align}>
+                <Menu.Item>Rename</Menu.Item>
+                <Menu.Item>Duplicate</Menu.Item>
+                <Menu.Item disabled>Archive</Menu.Item>
+                <Menu.Separator />
+                <Menu.Item variant="destructive">Delete</Menu.Item>
+              </Menu.Content>
+            </Menu>
+          ))}
+        </div>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Menu.test.tsx

@@ -0,0 +1,103 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { Menu } from './Menu';
+
+describe('Menu', () => {
+  it('opens on trigger click and calls item handlers', async () => {
+    const onRename = vi.fn();
+
+    render(
+      <Menu>
+        <Menu.Trigger>Actions</Menu.Trigger>
+        <Menu.Content>
+          <Menu.Item onClick={onRename}>Rename</Menu.Item>
+          <Menu.Item variant="destructive">Delete</Menu.Item>
+        </Menu.Content>
+      </Menu>,
+    );
+
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Actions' }));
+
+    expect(await screen.findByRole('menu')).toHaveAttribute(
+      'data-slot',
+      'menu-content',
+    );
+    expect(screen.getAllByRole('menuitem')).toHaveLength(2);
+    expect(screen.getByRole('menuitem', { name: 'Delete' })).toHaveAttribute(
+      'data-variant',
+      'destructive',
+    );
+
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Rename' }));
+
+    expect(onRename).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders checkbox, radio, group and shortcut parts', () => {
+    render(
+      <Menu defaultOpen>
+        <Menu.Trigger>View</Menu.Trigger>
+        <Menu.Content>
+          <Menu.Group>
+            <Menu.GroupLabel>Panels</Menu.GroupLabel>
+            <Menu.CheckboxItem defaultChecked>Status bar</Menu.CheckboxItem>
+          </Menu.Group>
+          <Menu.Separator />
+          <Menu.RadioGroup defaultValue="dark">
+            <Menu.RadioItem value="light">Light</Menu.RadioItem>
+            <Menu.RadioItem value="dark">Dark</Menu.RadioItem>
+          </Menu.RadioGroup>
+          <Menu.Item>
+            Settings
+            <Menu.Shortcut>⌘,</Menu.Shortcut>
+          </Menu.Item>
+        </Menu.Content>
+      </Menu>,
+    );
+
+    expect(
+      screen.getByRole('menuitemcheckbox', { name: 'Status bar' }),
+    ).toHaveAttribute('aria-checked', 'true');
+    expect(screen.getByRole('menuitemradio', { name: 'Dark' })).toHaveAttribute(
+      'aria-checked',
+      'true',
+    );
+    expect(screen.getByText('Panels')).toHaveAttribute(
+      'data-slot',
+      'menu-group-label',
+    );
+    expect(screen.getByText('⌘,')).toHaveAttribute(
+      'data-slot',
+      'menu-shortcut',
+    );
+  });
+
+  it('opens a submenu from its sub trigger', async () => {
+    render(
+      <Menu defaultOpen>
+        <Menu.Trigger>Share</Menu.Trigger>
+        <Menu.Content>
+          <Menu.Sub>
+            <Menu.SubTrigger>Invite users</Menu.SubTrigger>
+            <Menu.SubContent>
+              <Menu.Item>Email</Menu.Item>
+            </Menu.SubContent>
+          </Menu.Sub>
+        </Menu.Content>
+      </Menu>,
+    );
+
+    const subTrigger = screen.getByRole('menuitem', { name: 'Invite users' });
+
+    expect(subTrigger).toHaveAttribute('data-slot', 'menu-sub-trigger');
+
+    fireEvent.click(subTrigger);
+
+    expect(
+      await screen.findByRole('menuitem', { name: 'Email' }),
+    ).toBeInTheDocument();
+  });
+});