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

package/src/components/AlertDialog.test.tsx

@@ -0,0 +1,142 @@
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { AlertDialog, type AlertDialogProps } from './AlertDialog';
+
+type RenderProps = Pick<AlertDialogProps, 'disablePointerDismissal'>;
+
+async function openAlertDialog(props: RenderProps = {}) {
+  const onOpenChange = vi.fn();
+  renderAlertDialog({ ...props, onOpenChange });
+  fireEvent.click(screen.getByRole('button', { name: 'Delete project' }));
+
+  const dialog = await screen.findByRole('alertdialog');
+  // The viewport covers the backdrop, so it receives clicks around the popup.
+  const viewport = dialog.closest('[role=presentation]')!;
+  onOpenChange.mockClear();
+
+  return { dialog, onOpenChange, viewport };
+}
+
+/** Presses on `down` and releases on `up`, like a real mouse click or drag. */
+function press(down: Element, up: Element = down) {
+  fireEvent.pointerDown(down, { button: 0, pointerType: 'mouse' });
+  fireEvent.mouseDown(down, { button: 0 });
+  fireEvent.pointerUp(up, { button: 0, pointerType: 'mouse' });
+  fireEvent.mouseUp(up, { button: 0 });
+  // A drag fires `click` on the closest element containing both ends.
+  fireEvent.click(down.contains(up) ? down : up, { button: 0 });
+}
+
+function renderAlertDialog(props: AlertDialogProps = {}) {
+  return render(
+    <AlertDialog {...props}>
+      <AlertDialog.Trigger>Delete project</AlertDialog.Trigger>
+      <AlertDialog.Content>
+        <AlertDialog.Header>
+          <AlertDialog.Title>Delete project?</AlertDialog.Title>
+          <AlertDialog.Description>
+            This action cannot be undone.
+          </AlertDialog.Description>
+        </AlertDialog.Header>
+        <AlertDialog.Footer>
+          <AlertDialog.Close>Cancel</AlertDialog.Close>
+          <AlertDialog.Close>Delete</AlertDialog.Close>
+        </AlertDialog.Footer>
+      </AlertDialog.Content>
+    </AlertDialog>,
+  );
+}
+
+describe('AlertDialog', () => {
+  it('opens an alertdialog with an accessible name and description', async () => {
+    renderAlertDialog();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Delete project' }));
+
+    const dialog = await screen.findByRole('alertdialog', {
+      name: 'Delete project?',
+    });
+
+    expect(dialog).toHaveAccessibleDescription('This action cannot be undone.');
+    expect(dialog).toHaveAttribute('data-slot', 'alert-dialog-content');
+    expect(
+      document.querySelector('[data-slot=alert-dialog-backdrop]'),
+    ).toBeTruthy();
+  });
+
+  it('has no built-in close icon', async () => {
+    renderAlertDialog();
+    fireEvent.click(screen.getByRole('button', { name: 'Delete project' }));
+
+    const dialog = await screen.findByRole('alertdialog');
+
+    expect(
+      within(dialog).queryByRole('button', { name: 'Close' }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('closes from AlertDialog.Close', async () => {
+    renderAlertDialog();
+    fireEvent.click(screen.getByRole('button', { name: 'Delete project' }));
+
+    const dialog = await screen.findByRole('alertdialog');
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Cancel' }));
+
+    await waitFor(() =>
+      expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument(),
+    );
+  });
+
+  it('closes on backdrop click by default', async () => {
+    const { dialog, onOpenChange, viewport } = await openAlertDialog();
+
+    expect(dialog).toHaveAttribute('role', 'alertdialog');
+
+    await act(async () => press(viewport));
+
+    expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(
+      false,
+      expect.objectContaining({ reason: 'outside-press' }),
+    );
+    await waitFor(() =>
+      expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument(),
+    );
+  });
+
+  it('stays open on backdrop click with disablePointerDismissal', async () => {
+    const { dialog, onOpenChange, viewport } = await openAlertDialog({
+      disablePointerDismissal: true,
+    });
+
+    expect(dialog).toHaveAttribute('role', 'alertdialog');
+
+    await act(async () => press(viewport));
+
+    expect(onOpenChange).not.toHaveBeenCalled();
+    expect(screen.getByRole('alertdialog')).toBeInTheDocument();
+  });
+
+  it('stays open when a press starts outside the popup and ends in it', async () => {
+    const { dialog, onOpenChange, viewport } = await openAlertDialog();
+
+    await act(async () => press(viewport, dialog));
+
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+
+  it('stays open when a press starts in the popup and ends outside it', async () => {
+    const { dialog, onOpenChange, viewport } = await openAlertDialog();
+
+    await act(async () => press(dialog, viewport));
+
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+});

package/src/components/AlertDialog.tsx

@@ -0,0 +1,164 @@
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+import {
+  dialogBackdropClassName,
+  dialogDescriptionClassName,
+  dialogFooterClassName,
+  dialogHeaderClassName,
+  dialogPopupVariants,
+  type DialogSize,
+  dialogTitleClassName,
+  dialogViewportClassName,
+} from './_internal/dialog-styles';
+
+type AlertDialogCloseProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Close
+>;
+type AlertDialogContentProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Popup
+> & {
+  /** Maximum width of the dialog. Defaults to `md`. */
+  size?: DialogSize;
+};
+type AlertDialogDescriptionProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Description
+>;
+type AlertDialogFooterProps = React.ComponentProps<'div'>;
+type AlertDialogHeaderProps = React.ComponentProps<'div'>;
+type AlertDialogProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Root
+> & {
+  /**
+   * Keeps the dialog open when the backdrop is clicked, so it only closes
+   * through `AlertDialog.Close` or Escape. Defaults to `false`: a backdrop
+   * click closes the dialog.
+   */
+  disablePointerDismissal?: boolean;
+};
+type AlertDialogTitleProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Title
+>;
+type AlertDialogTriggerProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Trigger
+>;
+
+function AlertDialogClose({ ...props }: AlertDialogCloseProps) {
+  return (
+    <AlertDialogPrimitive.Close data-slot="alert-dialog-close" {...props} />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  size = 'md',
+  ...props
+}: AlertDialogContentProps) {
+  return (
+    <AlertDialogPrimitive.Portal>
+      <AlertDialogPrimitive.Backdrop
+        className={dialogBackdropClassName}
+        data-slot="alert-dialog-backdrop"
+      />
+      <AlertDialogPrimitive.Viewport className={dialogViewportClassName}>
+        <AlertDialogPrimitive.Popup
+          className={cn(dialogPopupVariants({ size }), className)}
+          data-size={size}
+          data-slot="alert-dialog-content"
+          // The Dialog root used for pointer dismissal would render `dialog`.
+          role="alertdialog"
+          {...props}
+        />
+      </AlertDialogPrimitive.Viewport>
+    </AlertDialogPrimitive.Portal>
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: AlertDialogDescriptionProps) {
+  return (
+    <AlertDialogPrimitive.Description
+      className={cn(dialogDescriptionClassName, className)}
+      data-slot="alert-dialog-description"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps) {
+  return (
+    <div
+      className={cn(dialogFooterClassName, className)}
+      data-slot="alert-dialog-footer"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps) {
+  return (
+    <div
+      className={cn(dialogHeaderClassName, className)}
+      data-slot="alert-dialog-header"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogRoot({
+  disablePointerDismissal = false,
+  ...props
+}: AlertDialogProps) {
+  if (disablePointerDismissal) {
+    return <AlertDialogPrimitive.Root {...props} />;
+  }
+
+  // Base UI's alert dialog always ignores outside presses. A modal Dialog root
+  // shares every part and closes on them with the `outside-press` reason.
+  return (
+    <DialogPrimitive.Root {...props} disablePointerDismissal={false} modal />
+  );
+}
+
+function AlertDialogTitle({ className, ...props }: AlertDialogTitleProps) {
+  return (
+    <AlertDialogPrimitive.Title
+      className={cn(dialogTitleClassName, className)}
+      data-slot="alert-dialog-title"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogTriggerProps) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+const AlertDialog = Object.assign(AlertDialogRoot, {
+  Close: AlertDialogClose,
+  Content: AlertDialogContent,
+  Description: AlertDialogDescription,
+  Footer: AlertDialogFooter,
+  Header: AlertDialogHeader,
+  Title: AlertDialogTitle,
+  Trigger: AlertDialogTrigger,
+});
+
+export { AlertDialog };
+export type {
+  AlertDialogCloseProps,
+  AlertDialogContentProps,
+  AlertDialogDescriptionProps,
+  AlertDialogFooterProps,
+  AlertDialogHeaderProps,
+  AlertDialogProps,
+  AlertDialogTitleProps,
+  AlertDialogTriggerProps,
+};

package/src/components/Avatar.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { type ComponentMatrixCellProps, Story } from './_internal/Story';
+import { Avatar } from './Avatar';
+
+const meta = {
+  component: Avatar,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/Avatar',
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const people: {
+  fallback: string;
+  name: string;
+  src?: string;
+}[] = [
+  {
+    fallback: 'MC',
+    name: 'Maya Chen',
+    src: 'https://i.pravatar.cc/128?u=maya-chen',
+  },
+  {
+    fallback: 'AR',
+    name: 'Alex Rivera',
+    src: 'https://i.pravatar.cc/128?u=alex-rivera',
+  },
+  {
+    fallback: 'SO',
+    name: 'Sam Okonkwo',
+    src: 'https://i.pravatar.cc/128?u=sam-okonkwo',
+  },
+  {
+    fallback: 'JL',
+    name: 'Jordan Lee',
+  },
+];
+
+const AVATAR_ROWS = [
+  { key: 'image', label: 'Image' },
+  { key: 'fallback', label: 'Fallback' },
+];
+
+const AVATAR_COLUMNS = people.map((person) => ({
+  key: person.name,
+  label: person.name,
+}));
+
+function AvatarMatrixCell({ column, row }: ComponentMatrixCellProps) {
+  const person =
+    people.find((candidate) => candidate.name === column.key) ?? people[0];
+  const src = row.key === 'broken' ? '/missing-avatar.png' : person.src;
+
+  return (
+    <Avatar>
+      {row.key === 'fallback' || !src ? null : (
+        <Avatar.Image alt={person.name} src={src} />
+      )}
+      <Avatar.Fallback>{person.fallback}</Avatar.Fallback>
+    </Avatar>
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-4xl" title="Avatar">
+      <Story.Section title="States">
+        <Story.Matrix
+          Cell={AvatarMatrixCell}
+          cellWidth="9rem"
+          columns={AVATAR_COLUMNS}
+          rows={AVATAR_ROWS}
+        />
+      </Story.Section>
+
+      <Story.Section title="Grouped">
+        <Avatar.Group>
+          {people.map((person) => (
+            <Avatar key={person.name}>
+              {person.src ? (
+                <Avatar.Image alt={person.name} src={person.src} />
+              ) : null}
+              <Avatar.Fallback>{person.fallback}</Avatar.Fallback>
+            </Avatar>
+          ))}
+        </Avatar.Group>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Avatar.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Avatar } from './Avatar';
+
+describe('Avatar', () => {
+  it('renders fallback content', () => {
+    render(
+      <Avatar>
+        <Avatar.Fallback>MC</Avatar.Fallback>
+      </Avatar>,
+    );
+
+    expect(screen.getByText('MC')).toBeInTheDocument();
+  });
+
+  it('uses the default avatar dimensions', () => {
+    render(
+      <Avatar data-testid="avatar">
+        <Avatar.Fallback>MC</Avatar.Fallback>
+      </Avatar>,
+    );
+
+    expect(screen.getByTestId('avatar')).toHaveClass('size-8');
+  });
+});

package/src/components/Avatar.tsx

@@ -0,0 +1,96 @@
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+type AvatarFallbackProps = React.ComponentProps<
+  typeof AvatarPrimitive.Fallback
+>;
+
+type AvatarGroupChildProps = {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+type AvatarGroupProps = React.ComponentProps<'div'>;
+
+type AvatarImageProps = React.ComponentProps<typeof AvatarPrimitive.Image>;
+
+type AvatarProps = React.ComponentProps<typeof AvatarPrimitive.Root>;
+
+function AvatarFallback({ className, ...props }: AvatarFallbackProps) {
+  return (
+    <AvatarPrimitive.Fallback
+      className={cn(
+        'bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full',
+        className,
+      )}
+      data-slot="avatar-fallback"
+      {...props}
+    />
+  );
+}
+
+function AvatarGroup({ children, className, ...props }: AvatarGroupProps) {
+  return (
+    <div
+      className={cn('flex -space-x-3', className)}
+      data-slot="avatar-group"
+      {...props}
+    >
+      {React.Children.map(children, (child, index) => {
+        if (!React.isValidElement<AvatarGroupChildProps>(child)) {
+          return child;
+        }
+
+        return React.cloneElement(child, {
+          className: cn(
+            'ring-background relative ring-2',
+            child.props.className,
+          ),
+          style: {
+            ...child.props.style,
+            zIndex: index + 1,
+          },
+        });
+      })}
+    </div>
+  );
+}
+
+function AvatarImage({ className, ...props }: AvatarImageProps) {
+  return (
+    <AvatarPrimitive.Image
+      className={cn('size-full object-cover', className)}
+      data-slot="avatar-image"
+      {...props}
+    />
+  );
+}
+
+function AvatarRoot({ className, ...props }: AvatarProps) {
+  return (
+    <AvatarPrimitive.Root
+      className={cn(
+        'bg-background inline-flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full align-middle text-xs font-medium select-none',
+        className,
+      )}
+      data-slot="avatar"
+      {...props}
+    />
+  );
+}
+
+const Avatar = Object.assign(AvatarRoot, {
+  Fallback: AvatarFallback,
+  Group: AvatarGroup,
+  Image: AvatarImage,
+});
+
+export { Avatar, AvatarFallback, AvatarGroup, AvatarImage, AvatarRoot };
+export type {
+  AvatarFallbackProps,
+  AvatarGroupProps,
+  AvatarImageProps,
+  AvatarProps,
+};

package/src/components/Badge.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react-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' },
+  { key: 'icon', label: 'With icon' },
+];
+
+const SEMANTIC_ROWS = [
+  { key: 'default', label: 'Default' },
+  { key: 'secondary', label: 'Secondary' },
+  { key: 'outline', label: 'Outline' },
+  { key: 'info', label: 'Info' },
+  { key: 'success', label: 'Success' },
+  { key: 'warning', label: 'Warning' },
+  { key: 'error', label: 'Error' },
+  { key: 'destructive', label: 'Destructive' },
+];
+
+function SemanticBadgeCell({ row }: ComponentMatrixCellProps) {
+  return (
+    <Badge variant={row.key as NonNullable<BadgeProps['variant']>}>
+      {row.label}
+    </Badge>
+  );
+}
+
+export const All: StoryDefinition = {
+  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,35 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Badge } from './Badge';
+
+describe('Badge', () => {
+  it('renders content and forwards native props', () => {
+    render(<Badge aria-label="Status">Ready</Badge>);
+    expect(screen.getByLabelText('Status')).toHaveTextContent('Ready');
+  });
+
+  it('supports the success variant', () => {
+    render(<Badge variant="success">Complete</Badge>);
+    expect(screen.getByText('Complete')).toHaveClass('bg-success-subtle');
+  });
+
+  it('exposes its variant and size as data attributes, defaults included', () => {
+    render(
+      <>
+        <Badge>New</Badge>
+        <Badge size="sm" variant="warning">
+          Pending
+        </Badge>
+      </>,
+    );
+
+    expect(screen.getByText('New')).toHaveAttribute('data-variant', 'default');
+    expect(screen.getByText('New')).toHaveAttribute('data-size', 'md');
+    expect(screen.getByText('Pending')).toHaveAttribute(
+      'data-variant',
+      'warning',
+    );
+    expect(screen.getByText('Pending')).toHaveAttribute('data-size', 'sm');
+  });
+});

package/src/components/Badge.tsx

@@ -0,0 +1,65 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  "relative inline-flex shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-sm border border-transparent font-medium outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [button&,a&]:cursor-pointer [button&,a&]:pointer-coarse:after:absolute [button&,a&]:pointer-coarse:after:size-full [button&,a&]:pointer-coarse:after:min-h-11 [button&,a&]:pointer-coarse:after:min-w-11",
+  {
+    defaultVariants: {
+      size: 'md',
+      variant: 'default',
+    },
+    variants: {
+      size: {
+        lg: 'h-5.5 min-w-5.5 px-[calc(--spacing(1.5)-1px)] text-sm',
+        md: 'h-4.5 min-w-4.5 px-[calc(--spacing(1)-1px)] text-xs',
+        sm: 'h-4 min-w-4 rounded-[.25rem] px-[calc(--spacing(1)-1px)] text-[.625rem]',
+      },
+      variant: {
+        default:
+          'bg-primary text-primary-foreground [button&,a&]:hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground [button&,a&]:hover:bg-destructive/90',
+        error: 'bg-destructive-subtle text-destructive-subtle-foreground',
+        expired:
+          'bg-secondary text-secondary-foreground [button&,a&]:hover:bg-secondary/90',
+        failed: 'bg-destructive-subtle text-destructive-subtle-foreground',
+        info: 'bg-info-subtle text-info-subtle-foreground',
+        inProgress: 'bg-info-subtle text-info-subtle-foreground',
+        inReview: 'bg-warning-subtle text-warning-subtle-foreground',
+        outline:
+          'border-input bg-background text-foreground dark:bg-input/32 [button&,a&]:hover:bg-accent/50 dark:[button&,a&]:hover:bg-input/48',
+        pending: 'bg-warning-subtle text-warning-subtle-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground [button&,a&]:hover:bg-secondary/90',
+        submitted: 'bg-info-subtle text-info-subtle-foreground',
+        success: 'bg-success-subtle text-success-subtle-foreground',
+        warning: 'bg-warning-subtle text-warning-subtle-foreground',
+      },
+    },
+  },
+);
+
+interface BadgeProps
+  extends React.ComponentProps<'span'>, VariantProps<typeof badgeVariants> {}
+
+function Badge({
+  className,
+  size = 'md',
+  variant = 'default',
+  ...props
+}: BadgeProps) {
+  return (
+    <span
+      className={cn(badgeVariants({ size, variant }), className)}
+      data-size={size}
+      data-slot="badge"
+      data-variant={variant}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };
+export type { BadgeProps };