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

package/src/components/Text.test.tsx

@@ -0,0 +1,106 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Text } from './Text';
+
+describe('Text', () => {
+  it('renders default body variant as a <p> with body classes', () => {
+    render(<Text>Hello world</Text>);
+    const el = screen.getByText('Hello world');
+    expect(el.tagName.toLowerCase()).toBe('p');
+    expect(el).toHaveClass('text-body');
+    expect(el).toHaveAttribute('data-slot', 'text');
+  });
+
+  it('exposes its variant, tone, weight and truncate as data attributes', () => {
+    render(
+      <>
+        <Text>Plain</Text>
+        <Text tone="muted" truncate variant="small" weight="bold">
+          Styled
+        </Text>
+      </>,
+    );
+
+    const plain = screen.getByText('Plain');
+    expect(plain).toHaveAttribute('data-variant', 'body');
+    expect(plain).not.toHaveAttribute('data-tone');
+    expect(plain).not.toHaveAttribute('data-weight');
+    expect(plain).not.toHaveAttribute('data-truncate');
+
+    const styled = screen.getByText('Styled');
+    expect(styled).toHaveAttribute('data-variant', 'small');
+    expect(styled).toHaveAttribute('data-tone', 'muted');
+    expect(styled).toHaveAttribute('data-weight', 'bold');
+    expect(styled).toHaveAttribute('data-truncate', '');
+  });
+
+  it('keeps the body size next to a tone color', () => {
+    render(<Text tone="muted">Muted body size</Text>);
+    const el = screen.getByText('Muted body size');
+    expect(el).toHaveClass('text-body');
+    expect(el).toHaveClass('text-muted-foreground');
+  });
+
+  it('lets a className font size replace the body size', () => {
+    render(<Text className="text-lg">Larger body</Text>);
+    const el = screen.getByText('Larger body');
+    expect(el).toHaveClass('text-lg');
+    expect(el).not.toHaveClass('text-body');
+  });
+
+  it('renders variant="h2" as an <h2>', () => {
+    render(<Text variant="h2">Heading Two</Text>);
+    const el = screen.getByText('Heading Two');
+    expect(el.tagName.toLowerCase()).toBe('h2');
+    expect(el).toHaveClass('text-h2');
+    expect(el).toHaveClass('font-semibold');
+  });
+
+  it('renders variant="code" as a <code>', () => {
+    render(<Text variant="code">npm install pickle-ui</Text>);
+    const el = screen.getByText('npm install pickle-ui');
+    expect(el.tagName.toLowerCase()).toBe('code');
+    expect(el).toHaveClass('font-mono');
+  });
+
+  it('overrides the element via the as prop while keeping data-slot and variant classes', () => {
+    render(
+      <Text as="h1" variant="h2">
+        Page title
+      </Text>,
+    );
+    const el = screen.getByText('Page title');
+    expect(el.tagName.toLowerCase()).toBe('h1');
+    expect(el).toHaveAttribute('data-slot', 'text');
+    expect(el).toHaveClass('text-h2');
+    expect(el).toHaveClass('font-semibold');
+  });
+
+  it('merges className without replacing variant classes', () => {
+    render(<Text className="custom-class">Merged classes</Text>);
+    const el = screen.getByText('Merged classes');
+    expect(el).toHaveClass('text-body');
+    expect(el).toHaveClass('custom-class');
+  });
+
+  it('tone="muted" adds text-muted-foreground and is orthogonal to variant', () => {
+    render(
+      <Text tone="muted" variant="body">
+        Muted body
+      </Text>,
+    );
+    const muted = screen.getByText('Muted body');
+    expect(muted).toHaveClass('text-muted-foreground');
+
+    render(
+      <Text tone="muted" variant="h3">
+        Muted heading
+      </Text>,
+    );
+    const mutedHeading = screen.getByText('Muted heading');
+    expect(mutedHeading).toHaveClass('text-muted-foreground');
+    expect(mutedHeading).toHaveClass('text-h3');
+    expect(mutedHeading.tagName.toLowerCase()).toBe('h3');
+  });
+});

package/src/components/Text.tsx

@@ -0,0 +1,85 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const textVariants = cva('', {
+  defaultVariants: {
+    variant: 'body',
+  },
+  variants: {
+    tone: {
+      destructive: 'text-destructive',
+      muted: 'text-muted-foreground',
+      primary: 'text-primary',
+    },
+    truncate: {
+      false: '',
+      true: 'truncate',
+    },
+    variant: {
+      body: 'text-body',
+      code: 'font-mono text-code bg-muted rounded px-2 py-1',
+      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',
+      small: 'text-small',
+    },
+    weight: {
+      bold: 'font-semibold',
+      normal: 'font-normal',
+    },
+  },
+});
+
+const variantElement: Record<
+  NonNullable<VariantProps<typeof textVariants>['variant']>,
+  React.ElementType
+> = {
+  body: 'p',
+  code: 'code',
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  lead: 'p',
+  small: 'span',
+};
+
+export type TextProps = React.ComponentProps<'p'> &
+  VariantProps<typeof textVariants> & {
+    as?: React.ElementType;
+  };
+
+function Text({
+  as,
+  className,
+  ref,
+  tone,
+  truncate,
+  variant = 'body',
+  weight,
+  ...props
+}: TextProps) {
+  const resolvedVariant = variant ?? 'body';
+  const Component = as ?? variantElement[resolvedVariant];
+  return (
+    <Component
+      className={cn(
+        textVariants({ tone, truncate, variant, weight }),
+        className,
+      )}
+      data-slot="text"
+      data-tone={tone}
+      data-truncate={truncate ? '' : undefined}
+      data-variant={variant}
+      data-weight={weight}
+      ref={ref}
+      {...props}
+    />
+  );
+}
+
+export { Text, textVariants };

package/src/components/Toast.stories.tsx

@@ -0,0 +1,166 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import * as React from 'react';
+
+import { Story } from './_internal/Story';
+import { Button } from './Button';
+import { Text } from './Text';
+import { Toast, type ToastProviderProps } from './Toast';
+
+const meta = {
+  component: Toast.Provider,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/Toast',
+} satisfies Meta<typeof Toast.Provider>;
+
+export default meta;
+type Position = NonNullable<ToastProviderProps['position']>;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const POSITIONS: Position[] = [
+  'top-left',
+  'top-center',
+  'top-right',
+  'bottom-left',
+  'bottom-center',
+  'bottom-right',
+];
+
+const TYPES = [
+  {
+    description: 'Your changes have been saved.',
+    title: 'Saved',
+    type: 'success',
+  },
+  {
+    description: 'We could not reach the server.',
+    title: 'Upload failed',
+    type: 'error',
+  },
+  {
+    description: 'Your session expires in 5 minutes.',
+    title: 'Heads up',
+    type: 'warning',
+  },
+  {
+    description: 'A new version is available.',
+    title: 'Update ready',
+    type: 'info',
+  },
+  {
+    description: 'Neutral toasts render without an icon.',
+    title: 'Event created',
+    type: undefined,
+  },
+] as const;
+
+function HookTriggers() {
+  const toast = Toast.useToast();
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Button
+        onClick={() => {
+          const id = toast.add({
+            actionProps: {
+              children: 'Undo',
+              onClick: () => toast.close(id),
+            },
+            description: 'The file was moved to the trash.',
+            title: 'File deleted',
+          });
+        }}
+        variant="outline"
+      >
+        With action
+      </Button>
+      <Button
+        onClick={() =>
+          toast.promise(wait(2000), {
+            error: 'Could not publish.',
+            loading: { description: 'Publishing your post…', title: 'Busy' },
+            success: { description: 'Your post is live.', title: 'Published' },
+          })
+        }
+        variant="outline"
+      >
+        Promise (resolves)
+      </Button>
+      <Button
+        onClick={() =>
+          toast
+            .promise(wait(2000, true), {
+              error: { description: 'Try again later.', title: 'Failed' },
+              loading: { description: 'Publishing your post…', title: 'Busy' },
+              success: 'Your post is live.',
+            })
+            .catch(() => undefined)
+        }
+        variant="outline"
+      >
+        Promise (rejects)
+      </Button>
+    </div>
+  );
+}
+
+function ToastDemo() {
+  const [position, setPosition] = React.useState<Position>('bottom-right');
+
+  return (
+    <Toast.Provider position={position}>
+      <Story.Layout className="max-w-3xl" title="Toast">
+        <Story.Section title="Types (global manager)">
+          <Text className="mb-4" tone="muted">
+            <Text as="code" variant="code">
+              Toast.manager.add()
+            </Text>{' '}
+            works anywhere, including outside React.
+          </Text>
+          <div className="flex flex-wrap gap-2">
+            {TYPES.map(({ description, title, type }) => (
+              <Button
+                key={title}
+                onClick={() => Toast.manager.add({ description, title, type })}
+                variant="outline"
+              >
+                {type ?? 'default'}
+              </Button>
+            ))}
+          </div>
+        </Story.Section>
+
+        <Story.Section title="Action and promise (Toast.useToast)">
+          <HookTriggers />
+        </Story.Section>
+
+        <Story.Section title="Position">
+          <div className="flex flex-wrap gap-2">
+            {POSITIONS.map((value) => (
+              <Button
+                key={value}
+                onClick={() => {
+                  setPosition(value);
+                  Toast.manager.add({ title: `Toasts now appear ${value}` });
+                }}
+                variant={value === position ? 'default' : 'outline'}
+              >
+                {value}
+              </Button>
+            ))}
+          </div>
+        </Story.Section>
+      </Story.Layout>
+    </Toast.Provider>
+  );
+}
+
+function wait(ms: number, fail = false) {
+  return new Promise<void>((resolve, reject) =>
+    setTimeout(() => (fail ? reject(new Error('Failed')) : resolve()), ms),
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => <ToastDemo />,
+};

package/src/components/Toast.test.tsx

@@ -0,0 +1,97 @@
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+
+import { Toast } from './Toast';
+
+function Trigger() {
+  const toast = Toast.useToast();
+
+  return (
+    <button
+      onClick={() =>
+        toast.add({
+          actionProps: { children: 'Undo' },
+          description: 'From the hook',
+          title: 'Hook toast',
+          type: 'info',
+        })
+      }
+      type="button"
+    >
+      Notify
+    </button>
+  );
+}
+
+describe('Toast', () => {
+  afterEach(() => {
+    act(() => Toast.manager.close());
+  });
+
+  it('shows toasts added through the global manager and closes them', async () => {
+    render(<Toast.Provider />);
+
+    act(() => {
+      Toast.manager.add({
+        description: 'Your changes are live.',
+        title: 'Saved',
+        type: 'success',
+      });
+    });
+
+    const title = await screen.findByText('Saved');
+
+    expect(title).toHaveAttribute('data-slot', 'toast-title');
+    expect(title).toHaveClass('text-sm');
+    expect(title).not.toHaveClass('text-body');
+    expect(screen.getByText('Your changes are live.')).toHaveClass('text-sm');
+    expect(title.closest('[data-slot="toast"]')).toHaveAttribute(
+      'data-type',
+      'success',
+    );
+
+    // Base UI hides the close button from assistive tech until the stack is
+    // expanded or focused, so look it up by its label.
+    fireEvent.click(screen.getByLabelText('Close'));
+
+    await waitFor(() => {
+      expect(screen.queryByText('Saved')).not.toBeInTheDocument();
+    });
+  });
+
+  it('adds toasts with an action through Toast.useToast', async () => {
+    render(
+      <Toast.Provider position="top-center">
+        <Trigger />
+      </Toast.Provider>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Notify' }));
+
+    expect(await screen.findByText('Hook toast')).toBeInTheDocument();
+    expect(screen.getByText('Undo')).toHaveAttribute(
+      'data-slot',
+      'toast-action',
+    );
+    expect(
+      document.querySelector('[data-slot="toast-viewport"]'),
+    ).toHaveAttribute('data-position', 'top-center');
+  });
+
+  it('names the close button with closeLabel', async () => {
+    render(<Toast.Provider closeLabel="Fermer" />);
+
+    act(() => {
+      Toast.manager.add({ title: 'Enregistré' });
+    });
+
+    await screen.findByText('Enregistré');
+    expect(screen.getByLabelText('Fermer')).toBeInTheDocument();
+  });
+});