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

package/src/components/Dialog.stories.tsx

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Story } from './_internal/Story';
+import { Button } from './Button';
+import { Dialog, type DialogContentProps } from './Dialog';
+import { Input } from './form/Input';
+import { Text } from './Text';
+
+const meta = {
+  component: Dialog,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/Dialog',
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const SIZES: {
+  label: string;
+  size: NonNullable<DialogContentProps['size']>;
+}[] = [
+  { label: 'Small', size: 'sm' },
+  { label: 'Medium', size: 'md' },
+  { label: 'Large', size: 'lg' },
+];
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-5xl" title="Dialog">
+      <Story.Section title="Basic">
+        <div className="flex flex-wrap gap-3">
+          <Dialog>
+            <Dialog.Trigger render={<Button variant="outline" />}>
+              Show details
+            </Dialog.Trigger>
+            <Dialog.Content>
+              <Dialog.Header>
+                <Dialog.Title>Release notes</Dialog.Title>
+                <Dialog.Description>
+                  What changed in version 1.0.
+                </Dialog.Description>
+              </Dialog.Header>
+              <Text>
+                Dialogs now share their look with alert dialogs, animate in and
+                out, and keep focus inside until they close.
+              </Text>
+              <Dialog.Footer>
+                <Dialog.Close render={<Button />}>Got it</Dialog.Close>
+              </Dialog.Footer>
+            </Dialog.Content>
+          </Dialog>
+
+          <Dialog>
+            <Dialog.Trigger render={<Button variant="outline" />}>
+              Without close button
+            </Dialog.Trigger>
+            <Dialog.Content showCloseButton={false}>
+              <Dialog.Header>
+                <Dialog.Title>Session expiring</Dialog.Title>
+                <Dialog.Description>
+                  You will be signed out in two minutes.
+                </Dialog.Description>
+              </Dialog.Header>
+              <Dialog.Footer>
+                <Dialog.Close render={<Button variant="outline" />}>
+                  Sign out
+                </Dialog.Close>
+                <Dialog.Close render={<Button />}>Stay signed in</Dialog.Close>
+              </Dialog.Footer>
+            </Dialog.Content>
+          </Dialog>
+        </div>
+      </Story.Section>
+
+      <Story.Section title="Form">
+        <Dialog>
+          <Dialog.Trigger render={<Button variant="outline" />}>
+            Edit profile
+          </Dialog.Trigger>
+          <Dialog.Content>
+            <Dialog.Header>
+              <Dialog.Title>Edit profile</Dialog.Title>
+              <Dialog.Description>
+                Make changes to your profile, then save when you are done.
+              </Dialog.Description>
+            </Dialog.Header>
+            <div className="grid gap-4">
+              <label className="grid gap-2 text-sm font-medium">
+                Name
+                <Input defaultValue="Ada Lovelace" />
+              </label>
+              <label className="grid gap-2 text-sm font-medium">
+                Username
+                <Input defaultValue="@ada" />
+              </label>
+            </div>
+            <Dialog.Footer>
+              <Dialog.Close render={<Button variant="outline" />}>
+                Cancel
+              </Dialog.Close>
+              <Button type="submit">Save changes</Button>
+            </Dialog.Footer>
+          </Dialog.Content>
+        </Dialog>
+      </Story.Section>
+
+      <Story.Section title="Sizes">
+        <div className="flex flex-wrap gap-3">
+          {SIZES.map(({ label, size }) => (
+            <Dialog key={size}>
+              <Dialog.Trigger render={<Button variant="outline" />}>
+                {label}
+              </Dialog.Trigger>
+              <Dialog.Content size={size}>
+                <Dialog.Header>
+                  <Dialog.Title>{label} dialog</Dialog.Title>
+                  <Dialog.Description>
+                    The size controls the maximum width of the dialog.
+                  </Dialog.Description>
+                </Dialog.Header>
+                <Dialog.Footer>
+                  <Dialog.Close render={<Button />}>Close</Dialog.Close>
+                </Dialog.Footer>
+              </Dialog.Content>
+            </Dialog>
+          ))}
+        </div>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Dialog.test.tsx

@@ -0,0 +1,95 @@
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Dialog } from './Dialog';
+
+function renderDialog(contentProps?: {
+  closeLabel?: string;
+  showCloseButton?: boolean;
+}) {
+  return render(
+    <Dialog>
+      <Dialog.Trigger>Edit profile</Dialog.Trigger>
+      <Dialog.Content {...contentProps}>
+        <Dialog.Header>
+          <Dialog.Title>Profile</Dialog.Title>
+          <Dialog.Description>Update your public details.</Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Footer>
+          <Dialog.Close>Cancel</Dialog.Close>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog>,
+  );
+}
+
+describe('Dialog', () => {
+  it('opens from the trigger with an accessible name and description', async () => {
+    renderDialog();
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Edit profile' }));
+
+    const dialog = await screen.findByRole('dialog', { name: 'Profile' });
+
+    expect(dialog).toHaveAccessibleDescription('Update your public details.');
+    expect(dialog).toHaveAttribute('data-slot', 'dialog-content');
+    expect(screen.getByRole('heading', { name: 'Profile' })).toHaveAttribute(
+      'data-slot',
+      'dialog-title',
+    );
+    expect(document.querySelector('[data-slot=dialog-backdrop]')).toBeTruthy();
+  });
+
+  it('closes from the built-in close button', async () => {
+    renderDialog();
+    fireEvent.click(screen.getByRole('button', { name: 'Edit profile' }));
+
+    const dialog = await screen.findByRole('dialog', { name: 'Profile' });
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Close' }));
+
+    await waitFor(() =>
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument(),
+    );
+  });
+
+  it('closes from Dialog.Close', async () => {
+    renderDialog();
+    fireEvent.click(screen.getByRole('button', { name: 'Edit profile' }));
+
+    const dialog = await screen.findByRole('dialog', { name: 'Profile' });
+    fireEvent.click(within(dialog).getByRole('button', { name: 'Cancel' }));
+
+    await waitFor(() =>
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument(),
+    );
+  });
+
+  it('names the close button with closeLabel', async () => {
+    renderDialog({ closeLabel: 'Fermer' });
+    fireEvent.click(screen.getByRole('button', { name: 'Edit profile' }));
+
+    const dialog = await screen.findByRole('dialog', { name: 'Profile' });
+
+    expect(
+      within(dialog).getByRole('button', { name: 'Fermer' }),
+    ).toBeInTheDocument();
+  });
+
+  it('omits the close button when showCloseButton is false', async () => {
+    renderDialog({ showCloseButton: false });
+    fireEvent.click(screen.getByRole('button', { name: 'Edit profile' }));
+
+    const dialog = await screen.findByRole('dialog', { name: 'Profile' });
+
+    expect(
+      within(dialog).queryByRole('button', { name: 'Close' }),
+    ).not.toBeInTheDocument();
+  });
+});

package/src/components/Dialog.tsx

@@ -0,0 +1,147 @@
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+import { IconX } from '@tabler/icons-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+import {
+  dialogBackdropClassName,
+  dialogDescriptionClassName,
+  dialogFooterClassName,
+  dialogHeaderClassName,
+  dialogPopupVariants,
+  type DialogSize,
+  dialogTitleClassName,
+  dialogViewportClassName,
+} from './_internal/dialog-styles';
+import { Button } from './Button';
+
+type DialogCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>;
+type DialogContentProps = React.ComponentProps<typeof DialogPrimitive.Popup> & {
+  /** Accessible name of the close icon button. Defaults to `"Close"`. */
+  closeLabel?: string;
+  /** Renders a close icon button in the top-right corner. Defaults to `true`. */
+  showCloseButton?: boolean;
+  /** Maximum width of the dialog. Defaults to `md`. */
+  size?: DialogSize;
+};
+type DialogDescriptionProps = React.ComponentProps<
+  typeof DialogPrimitive.Description
+>;
+type DialogFooterProps = React.ComponentProps<'div'>;
+type DialogHeaderProps = React.ComponentProps<'div'>;
+type DialogProps = React.ComponentProps<typeof DialogPrimitive.Root>;
+type DialogTitleProps = React.ComponentProps<typeof DialogPrimitive.Title>;
+type DialogTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>;
+
+function DialogClose({ ...props }: DialogCloseProps) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogContent({
+  children,
+  className,
+  closeLabel = 'Close',
+  showCloseButton = true,
+  size = 'md',
+  ...props
+}: DialogContentProps) {
+  return (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Backdrop
+        className={dialogBackdropClassName}
+        data-slot="dialog-backdrop"
+      />
+      <DialogPrimitive.Viewport className={dialogViewportClassName}>
+        <DialogPrimitive.Popup
+          className={cn(dialogPopupVariants({ size }), className)}
+          data-size={size}
+          data-slot="dialog-content"
+          {...props}
+        >
+          {children}
+          {showCloseButton ? (
+            <DialogPrimitive.Close
+              aria-label={closeLabel}
+              className="absolute end-3 top-3"
+              data-slot="dialog-close"
+              render={<Button size="icon-sm" variant="ghost" />}
+            >
+              <IconX />
+            </DialogPrimitive.Close>
+          ) : null}
+        </DialogPrimitive.Popup>
+      </DialogPrimitive.Viewport>
+    </DialogPrimitive.Portal>
+  );
+}
+
+function DialogDescription({ className, ...props }: DialogDescriptionProps) {
+  return (
+    <DialogPrimitive.Description
+      className={cn(dialogDescriptionClassName, className)}
+      data-slot="dialog-description"
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: DialogFooterProps) {
+  return (
+    <div
+      className={cn(dialogFooterClassName, className)}
+      data-slot="dialog-footer"
+      {...props}
+    />
+  );
+}
+
+function DialogHeader({ className, ...props }: DialogHeaderProps) {
+  return (
+    <div
+      className={cn(dialogHeaderClassName, className)}
+      data-slot="dialog-header"
+      {...props}
+    />
+  );
+}
+
+function DialogRoot({ ...props }: DialogProps) {
+  return <DialogPrimitive.Root {...props} />;
+}
+
+function DialogTitle({ className, ...props }: DialogTitleProps) {
+  return (
+    <DialogPrimitive.Title
+      className={cn(dialogTitleClassName, className)}
+      data-slot="dialog-title"
+      {...props}
+    />
+  );
+}
+
+function DialogTrigger({ ...props }: DialogTriggerProps) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+const Dialog = Object.assign(DialogRoot, {
+  Close: DialogClose,
+  Content: DialogContent,
+  Description: DialogDescription,
+  Footer: DialogFooter,
+  Header: DialogHeader,
+  Title: DialogTitle,
+  Trigger: DialogTrigger,
+});
+
+export { Dialog };
+export type {
+  DialogCloseProps,
+  DialogContentProps,
+  DialogDescriptionProps,
+  DialogFooterProps,
+  DialogHeaderProps,
+  DialogProps,
+  DialogTitleProps,
+  DialogTriggerProps,
+};

package/src/components/Flex.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Story } from './_internal/Story';
+import { Flex } from './Flex';
+import { Text } from './Text';
+
+const meta = {
+  component: Flex,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/Flex',
+} satisfies Meta<typeof Flex>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+function Item({ children }: { children: string }) {
+  return (
+    <Flex
+      align="center"
+      className="bg-muted min-h-16 min-w-24 rounded-md border p-4"
+      justify="center"
+    >
+      <Text>{children}</Text>
+    </Flex>
+  );
+}
+
+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>First</Item>
+          <Item>Second</Item>
+          <Item>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>Start</Item>
+          <Item>Center</Item>
+          <Item>End</Item>
+        </Flex>
+      </Story.Section>
+
+      <Story.Section title="Wrapping">
+        <Flex gap={3} wrap="wrap">
+          {['One', 'Two', 'Three', 'Four', 'Five', 'Six'].map((label) => (
+            <Item key={label}>{label}</Item>
+          ))}
+        </Flex>
+      </Story.Section>
+
+      <Story.Section title="Responsive override">
+        <Flex className="flex-col md:flex-row" gap={3}>
+          <Item>Column on small screens</Item>
+          <Item>Row from md</Item>
+        </Flex>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Flex.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Flex } from './Flex';
+
+describe('Flex', () => {
+  it('renders layout props as Tailwind classes', () => {
+    render(
+      <Flex
+        align="center"
+        direction="column"
+        gap={4}
+        gapX={2}
+        gapY={3}
+        justify="between"
+        wrap="wrap"
+      >
+        Content
+      </Flex>,
+    );
+
+    expect(screen.getByText('Content')).toHaveClass(
+      'flex',
+      'flex-col',
+      'flex-wrap',
+      'items-center',
+      'justify-between',
+      'gap-4',
+      'gap-x-2',
+      'gap-y-3',
+    );
+  });
+
+  it('supports polymorphism, native props, refs, and class overrides', () => {
+    const ref = { current: null };
+    render(
+      <Flex
+        aria-label="navigation"
+        as="nav"
+        className="custom-class flex-row"
+        direction="column"
+        ref={ref}
+      />,
+    );
+
+    const element = screen.getByLabelText('navigation');
+    expect(element.tagName.toLowerCase()).toBe('nav');
+    expect(element).toHaveAttribute('data-slot', 'flex');
+    expect(element).toHaveClass('flex-row', 'custom-class');
+    expect(element).not.toHaveClass('flex-col');
+    expect(ref.current).toBe(element);
+  });
+});

package/src/components/Flex.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+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;
+
+type FlexProps = LayoutStyleProps &
+  Omit<React.ComponentProps<'div'>, keyof LayoutStyleProps> & {
+    as?: React.ElementType;
+    direction?: keyof typeof directionClasses;
+    wrap?: keyof typeof wrapClasses;
+  };
+
+function Flex({
+  align,
+  as,
+  className,
+  direction,
+  gap,
+  gapX,
+  gapY,
+  justify,
+  ref,
+  wrap,
+  ...props
+}: FlexProps) {
+  const Component = as ?? 'div';
+
+  return (
+    <Component
+      className={cn(
+        'flex',
+        getLayoutClasses({ align, gap, gapX, gapY, justify }),
+        direction === undefined ? undefined : directionClasses[direction],
+        wrap === undefined ? undefined : wrapClasses[wrap],
+        className,
+      )}
+      data-slot="flex"
+      ref={ref}
+      {...props}
+    />
+  );
+}
+
+export { Flex };
+export type { FlexProps };

package/src/components/Grid.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Story } from './_internal/Story';
+import { Grid } from './Grid';
+import { Text } from './Text';
+
+const meta = {
+  component: Grid,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/Grid',
+} satisfies Meta<typeof Grid>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+function Item({ children }: { children: string }) {
+  return (
+    <Grid
+      className="bg-muted min-h-20 rounded-md border p-4"
+      placeItems="center"
+    >
+      <Text>{children}</Text>
+    </Grid>
+  );
+}
+
+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'].map((label) => (
+            <Item key={label}>{label}</Item>
+          ))}
+        </Grid>
+      </Story.Section>
+
+      <Story.Section title="Rows and column flow">
+        <Grid columns={3} flow="column" gapX={4} gapY={2} rows={2}>
+          {['A', 'B', 'C', 'D', 'E', 'F'].map((label) => (
+            <Item key={label}>{label}</Item>
+          ))}
+        </Grid>
+      </Story.Section>
+
+      <Story.Section title="Placement">
+        <Grid
+          className="border-border min-h-72 rounded-md border border-dashed p-4"
+          columns={2}
+          gap={4}
+          placeContent="center"
+          placeItems="stretch"
+        >
+          <Item>Centered track</Item>
+          <Item>Stretched item</Item>
+        </Grid>
+      </Story.Section>
+
+      <Story.Section title="Responsive override">
+        <Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-4" gap={3}>
+          {['One', 'Two', 'Three', 'Four'].map((label) => (
+            <Item key={label}>{label}</Item>
+          ))}
+        </Grid>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Grid.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Grid } from './Grid';
+
+describe('Grid', () => {
+  it('renders grid and shared layout props as Tailwind classes', () => {
+    render(
+      <Grid
+        align="start"
+        columns={3}
+        flow="column-dense"
+        gap={4}
+        justify="center"
+        placeContent="between"
+        placeItems="stretch"
+        rows={2}
+      >
+        Content
+      </Grid>,
+    );
+
+    expect(screen.getByText('Content')).toHaveClass(
+      'grid',
+      'grid-cols-3',
+      'grid-rows-2',
+      'grid-flow-col-dense',
+      'place-content-between',
+      'place-items-stretch',
+      'items-start',
+      'justify-center',
+      'gap-4',
+    );
+  });
+
+  it('supports polymorphism and forwards native props', () => {
+    render(
+      <Grid aria-label="results" as="section" className="md:grid-cols-4" />,
+    );
+
+    const element = screen.getByLabelText('results');
+    expect(element.tagName.toLowerCase()).toBe('section');
+    expect(element).toHaveAttribute('data-slot', 'grid');
+    expect(element).toHaveClass('md:grid-cols-4');
+  });
+});