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

package/src/base.css

@@ -0,0 +1,99 @@
+/**
+ * Pickle base styles: animation and variant plugins, the content source for
+ * Tailwind, the `.dark` variant, shared utilities and element resets.
+ * Import this with your own token set instead of `@pickle-ui/react/theme.css`.
+ */
+
+@import 'tw-animate-css';
+
+@source './components/**/*.{ts,tsx}';
+
+/**
+ * Data-attribute variants, vendored from shadcn/ui's `shadcn/tailwind.css`
+ * (MIT, https://github.com/shadcn-ui/ui) so the `shadcn` CLI package is not a
+ * runtime dependency. Only the variants the components use are kept. Unlike
+ * Tailwind's native `data-*` variants they use `:where()` (zero specificity),
+ * match the Radix-style `data-state` attribute, and ignore `data-x="false"`.
+ */
+@custom-variant data-open {
+  &:where([data-state='open']),
+  &:where([data-open]:not([data-open='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant data-closed {
+  &:where([data-state='closed']),
+  &:where([data-closed]:not([data-closed='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant data-checked {
+  &:where([data-state='checked']),
+  &:where([data-checked]:not([data-checked='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant data-unchecked {
+  &:where([data-state='unchecked']),
+  &:where([data-unchecked]:not([data-unchecked='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant data-disabled {
+  &:where([data-disabled='true']),
+  &:where([data-disabled]:not([data-disabled='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant dark (&:is(.dark *));
+
+/**
+ * Type scale behind `Text`'s variants and the `text-<variant>` utilities.
+ * It lives here rather than in `theme.css` because the components need it
+ * whatever token set an app brings. Not inlined, so each size stays a CSS
+ * variable an app can override from `:root` or its own `@theme`.
+ */
+@theme {
+  --text-h1: 1.875rem;
+  --text-h1--line-height: calc(2.25 / 1.875);
+  --text-h2: 1.5rem;
+  --text-h2--line-height: calc(2 / 1.5);
+  --text-h3: 1.25rem;
+  --text-h3--line-height: calc(1.75 / 1.25);
+  --text-h4: 1.125rem;
+  --text-h4--line-height: calc(1.75 / 1.125);
+  --text-lead: 1rem;
+  --text-lead--line-height: 1.5;
+  --text-body: 0.875rem;
+  --text-body--line-height: 1.5;
+  --text-small: 0.75rem;
+  --text-small--line-height: 1;
+  --text-code: 0.75rem;
+  --text-code--line-height: calc(1 / 0.75);
+}
+
+/**
+ * Shared focus-visible ring for components that opt into focus-ring.
+ */
+@utility focus-ring {
+  @apply transition-shadow outline-none;
+  @apply focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--font-mono);
+  }
+}

package/src/components/Alert.stories.tsx

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import {
+  IconAlertCircle,
+  IconAlertTriangle,
+  IconCircleCheck,
+  IconInfoCircle,
+  IconTerminal2,
+} from '@tabler/icons-react';
+
+import { Story } from './_internal/Story';
+import { Alert, type AlertProps } from './Alert';
+import { Button } from './Button';
+import { Text } from './Text';
+
+const meta = {
+  component: Alert,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/Alert',
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const VARIANTS: {
+  description: string;
+  icon: typeof IconInfoCircle;
+  title: string;
+  variant: NonNullable<AlertProps['variant']>;
+}[] = [
+  {
+    description: 'You can add components to your app using the CLI.',
+    icon: IconTerminal2,
+    title: 'Heads up!',
+    variant: 'default',
+  },
+  {
+    description: 'A new version is available. Reload to get the latest.',
+    icon: IconInfoCircle,
+    title: 'Update available',
+    variant: 'info',
+  },
+  {
+    description: 'Your changes have been saved and published.',
+    icon: IconCircleCheck,
+    title: 'Saved',
+    variant: 'success',
+  },
+  {
+    description: 'Your trial ends in 3 days. Add a payment method to continue.',
+    icon: IconAlertTriangle,
+    title: 'Trial ending soon',
+    variant: 'warning',
+  },
+  {
+    description: 'We could not reach the server. Check your connection.',
+    icon: IconAlertCircle,
+    title: 'Something went wrong',
+    variant: 'destructive',
+  },
+];
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-3xl" title="Alert">
+      <Story.Section title="Variants">
+        <div className="space-y-4">
+          {VARIANTS.map(({ description, icon: Icon, title, variant }) => (
+            <Alert key={variant} variant={variant}>
+              <Alert.Icon>
+                <Icon />
+              </Alert.Icon>
+              <Alert.Title>{title}</Alert.Title>
+              <Alert.Description>{description}</Alert.Description>
+            </Alert>
+          ))}
+        </div>
+      </Story.Section>
+
+      <Story.Section title="With action">
+        <div className="space-y-4">
+          <Alert role="alert" variant="destructive">
+            <Alert.Icon>
+              <IconAlertCircle />
+            </Alert.Icon>
+            <Alert.Title>Payment failed</Alert.Title>
+            <Alert.Description>
+              Your card was declined. Update your billing details to retry.
+            </Alert.Description>
+            <Alert.Action>
+              <Button size="sm" variant="outline">
+                Retry
+              </Button>
+            </Alert.Action>
+          </Alert>
+          <Alert variant="info">
+            <Alert.Title>Without an icon</Alert.Title>
+            <Alert.Description>
+              The icon column collapses when{' '}
+              <Text as="code" variant="code">
+                Alert.Icon
+              </Text>{' '}
+              is omitted.
+            </Alert.Description>
+            <Alert.Action>
+              <Button size="sm" variant="ghost">
+                Dismiss
+              </Button>
+            </Alert.Action>
+          </Alert>
+        </div>
+      </Story.Section>
+
+      <Story.Section title="Title only">
+        <Alert role="status" variant="success">
+          <Alert.Icon>
+            <IconCircleCheck />
+          </Alert.Icon>
+          <Alert.Title>Invitation sent to 3 people.</Alert.Title>
+        </Alert>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Alert.test.tsx

@@ -0,0 +1,76 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Alert } from './Alert';
+
+describe('Alert', () => {
+  it('renders the title, description and variant', () => {
+    render(
+      <Alert data-testid="alert" variant="warning">
+        <Alert.Icon>
+          <svg />
+        </Alert.Icon>
+        <Alert.Title>Trial ending soon</Alert.Title>
+        <Alert.Description>Add a payment method.</Alert.Description>
+        <Alert.Action>
+          <button type="button">Upgrade</button>
+        </Alert.Action>
+      </Alert>,
+    );
+
+    const alert = screen.getByTestId('alert');
+
+    expect(alert).toHaveAttribute('data-slot', 'alert');
+    expect(alert).toHaveAttribute('data-variant', 'warning');
+    expect(screen.getByText('Trial ending soon')).toHaveAttribute(
+      'data-slot',
+      'alert-title',
+    );
+    expect(screen.getByText('Add a payment method.')).toHaveAttribute(
+      'data-slot',
+      'alert-description',
+    );
+    expect(screen.getByRole('button', { name: 'Upgrade' })).toBeInTheDocument();
+    expect(alert.querySelector('[data-slot="alert-icon"]')).toHaveAttribute(
+      'aria-hidden',
+      'true',
+    );
+  });
+
+  it('keeps the title and description at text-sm whatever the body size', () => {
+    render(
+      <Alert>
+        <Alert.Title>Compact title</Alert.Title>
+        <Alert.Description>Compact description</Alert.Description>
+      </Alert>,
+    );
+
+    for (const text of ['Compact title', 'Compact description']) {
+      const el = screen.getByText(text);
+      expect(el).toHaveClass('text-sm');
+      expect(el).not.toHaveClass('text-body');
+    }
+  });
+
+  it('has no live role by default and accepts one', () => {
+    const { rerender } = render(
+      <Alert>
+        <Alert.Title>Notice</Alert.Title>
+      </Alert>,
+    );
+
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    expect(screen.getByText('Notice').parentElement).toHaveAttribute(
+      'data-variant',
+      'default',
+    );
+
+    rerender(
+      <Alert role="alert" variant="destructive">
+        <Alert.Title>Failed</Alert.Title>
+      </Alert>,
+    );
+
+    expect(screen.getByRole('alert')).toHaveTextContent('Failed');
+  });
+});

package/src/components/Alert.tsx

@@ -0,0 +1,133 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { Text, type TextProps } from './Text';
+
+const alertVariants = cva(
+  'relative grid w-full grid-cols-[1fr] items-start gap-x-3 gap-y-0.5 rounded-xl border px-3.5 py-3 text-sm has-[>[data-slot=alert-action]]:grid-cols-[1fr_auto] has-[>[data-slot=alert-icon]]:grid-cols-[auto_1fr] has-[>[data-slot=alert-icon]]:has-[>[data-slot=alert-action]]:grid-cols-[auto_1fr_auto]',
+  {
+    defaultVariants: {
+      variant: 'default',
+    },
+    variants: {
+      variant: {
+        default:
+          'bg-card text-card-foreground *:data-[slot=alert-icon]:text-muted-foreground',
+        destructive:
+          'border-destructive/32 bg-destructive-subtle text-foreground *:data-[slot=alert-icon]:text-destructive',
+        info: 'border-info/32 bg-info-subtle text-foreground *:data-[slot=alert-icon]:text-info',
+        success:
+          'border-success/32 bg-success-subtle text-foreground *:data-[slot=alert-icon]:text-success',
+        warning:
+          'border-warning/32 bg-warning-subtle text-foreground *:data-[slot=alert-icon]:text-warning',
+      },
+    },
+  },
+);
+
+type AlertActionProps = React.ComponentProps<'div'>;
+type AlertDescriptionProps = Omit<TextProps, 'as' | 'tone' | 'variant'>;
+type AlertIconProps = React.ComponentProps<'div'>;
+type AlertProps = React.ComponentProps<'div'> &
+  VariantProps<typeof alertVariants>;
+type AlertTitleProps = Omit<TextProps, 'as' | 'tone' | 'variant'>;
+
+function AlertAction({ className, ...props }: AlertActionProps) {
+  return (
+    <div
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 flex items-center gap-1.5 self-center [[data-slot=alert-icon]~&]:col-start-3',
+        className,
+      )}
+      data-slot="alert-action"
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ className, ...props }: AlertDescriptionProps) {
+  return (
+    <Text
+      as="div"
+      className={cn(
+        'col-start-1 flex flex-col gap-2 text-sm [[data-slot=alert-icon]~&]:col-start-2',
+        className,
+      )}
+      data-slot="alert-description"
+      tone="muted"
+      variant="body"
+      {...props}
+    />
+  );
+}
+
+/**
+ * Leading icon slot. Pass an SVG as children; it is sized and tinted to match
+ * the alert's `variant`. The wrapper is hidden from assistive technology by
+ * default since the title carries the meaning.
+ */
+function AlertIcon({ className, ...props }: AlertIconProps) {
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        "col-start-1 row-start-1 flex h-5 items-center [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      data-slot="alert-icon"
+      {...props}
+    />
+  );
+}
+
+/**
+ * An inline message that draws attention to contextual information.
+ *
+ * The alert has no live-region role by default, so static notices are not
+ * announced on page load. When the alert appears in response to a user action,
+ * pass `role="alert"` for urgent messages (failures) or `role="status"` for
+ * polite ones (confirmations, info).
+ */
+function AlertRoot({ className, variant = 'default', ...props }: AlertProps) {
+  return (
+    <div
+      className={cn(alertVariants({ variant }), className)}
+      data-slot="alert"
+      data-variant={variant}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: AlertTitleProps) {
+  return (
+    <Text
+      as="div"
+      className={cn(
+        'col-start-1 text-sm leading-5 font-medium [[data-slot=alert-icon]~&]:col-start-2',
+        className,
+      )}
+      data-slot="alert-title"
+      variant="body"
+      {...props}
+    />
+  );
+}
+
+const Alert = Object.assign(AlertRoot, {
+  Action: AlertAction,
+  Description: AlertDescription,
+  Icon: AlertIcon,
+  Title: AlertTitle,
+});
+
+export { Alert, AlertAction, AlertDescription, AlertIcon, AlertTitle };
+export type {
+  AlertActionProps,
+  AlertDescriptionProps,
+  AlertIconProps,
+  AlertProps,
+  AlertTitleProps,
+};

package/src/components/AlertDialog.stories.tsx

@@ -0,0 +1,184 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { type ComponentMatrixCellProps, Story } from './_internal/Story';
+import {
+  AlertDialog,
+  type AlertDialogContentProps,
+  type AlertDialogProps,
+} from './AlertDialog';
+import { Button } from './Button';
+
+const meta = {
+  component: AlertDialog,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/AlertDialog',
+} satisfies Meta<typeof AlertDialog>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const SIZE_COLUMNS: {
+  key: NonNullable<AlertDialogContentProps['size']>;
+  label: string;
+}[] = [
+  { key: 'sm', label: 'Small' },
+  { key: 'md', label: 'Medium (default)' },
+  { key: 'lg', label: 'Large' },
+];
+
+const CONTENT_ROWS = [
+  { description: 'One-line title', key: 'short', label: 'Short title' },
+  {
+    description: 'Title wraps onto several lines',
+    key: 'long',
+    label: 'Long title',
+  },
+  {
+    description: 'Destructive action button',
+    key: 'destructive',
+    label: 'Destructive',
+  },
+];
+
+const CONTENT: Record<
+  string,
+  { action: string; description: string; title: string; trigger: string }
+> = {
+  destructive: {
+    action: 'Delete project',
+    description:
+      'This permanently deletes the project and its deployments. This action cannot be undone.',
+    title: 'Delete this project?',
+    trigger: 'Delete',
+  },
+  long: {
+    action: 'Archive',
+    description:
+      'Members keep their exported data. You can restore the workspace within 30 days.',
+    title: 'Archive this workspace and remove access for every member?',
+    trigger: 'Archive',
+  },
+  short: {
+    action: 'Discard',
+    description: 'Your unsaved edits will be lost.',
+    title: 'Discard changes?',
+    trigger: 'Discard',
+  },
+};
+
+const DISMISSAL_COLUMNS: {
+  description: string;
+  key: 'false' | 'true';
+  label: string;
+}[] = [
+  {
+    description: 'Default',
+    key: 'false',
+    label: 'Backdrop click closes',
+  },
+  {
+    description: 'disablePointerDismissal',
+    key: 'true',
+    label: 'Backdrop click ignored',
+  },
+];
+
+const DISMISSAL_ROWS = [
+  {
+    description: 'Click outside the dialog once it is open',
+    key: 'backdrop',
+    label: 'Backdrop click',
+  },
+];
+
+function AlertDialogDismissalCell({ column }: ComponentMatrixCellProps) {
+  const disablePointerDismissal: AlertDialogProps['disablePointerDismissal'] =
+    column.key === 'true';
+
+  return (
+    <AlertDialog disablePointerDismissal={disablePointerDismissal}>
+      <AlertDialog.Trigger render={<Button variant="outline" />}>
+        Leave page
+      </AlertDialog.Trigger>
+      <AlertDialog.Content>
+        <AlertDialog.Header>
+          <AlertDialog.Title>Leave this page?</AlertDialog.Title>
+          <AlertDialog.Description>
+            {disablePointerDismissal
+              ? 'Clicking outside does nothing. Pick an action.'
+              : 'Clicking outside closes this dialog and keeps you on the page.'}
+          </AlertDialog.Description>
+        </AlertDialog.Header>
+        <AlertDialog.Footer>
+          <AlertDialog.Close render={<Button variant="outline" />}>
+            Stay
+          </AlertDialog.Close>
+          <AlertDialog.Close render={<Button />}>Leave</AlertDialog.Close>
+        </AlertDialog.Footer>
+      </AlertDialog.Content>
+    </AlertDialog>
+  );
+}
+
+function AlertDialogMatrixCell({ column, row }: ComponentMatrixCellProps) {
+  const content = CONTENT[row.key];
+  const destructive = row.key === 'destructive';
+
+  return (
+    <AlertDialog>
+      <AlertDialog.Trigger
+        render={
+          <Button variant={destructive ? 'destructive-outline' : 'outline'} />
+        }
+      >
+        {content.trigger}
+      </AlertDialog.Trigger>
+      <AlertDialog.Content
+        size={column.key as NonNullable<AlertDialogContentProps['size']>}
+      >
+        <AlertDialog.Header>
+          <AlertDialog.Title>{content.title}</AlertDialog.Title>
+          <AlertDialog.Description>
+            {content.description}
+          </AlertDialog.Description>
+        </AlertDialog.Header>
+        <AlertDialog.Footer>
+          <AlertDialog.Close render={<Button variant="outline" />}>
+            Cancel
+          </AlertDialog.Close>
+          <AlertDialog.Close
+            render={
+              <Button variant={destructive ? 'destructive' : 'default'} />
+            }
+          >
+            {content.action}
+          </AlertDialog.Close>
+        </AlertDialog.Footer>
+      </AlertDialog.Content>
+    </AlertDialog>
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-5xl" title="AlertDialog">
+      <Story.Section title="Sizes and content">
+        <Story.Matrix
+          Cell={AlertDialogMatrixCell}
+          columns={SIZE_COLUMNS}
+          rows={CONTENT_ROWS}
+        />
+      </Story.Section>
+
+      <Story.Section title="Backdrop dismissal">
+        <Story.Matrix
+          Cell={AlertDialogDismissalCell}
+          columns={DISMISSAL_COLUMNS}
+          rows={DISMISSAL_ROWS}
+        />
+      </Story.Section>
+    </Story.Layout>
+  ),
+};