@douglasneuroinformatics/libui 2.5.2 → 2.6.0

package/src/components/Dialog/Dialog.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../Button/Button.js';
+import { Input } from '../Input/Input.js';
+import { Label } from '../Label/Label.js';
+import { Dialog } from './Dialog.js';
+
+type Story = StoryObj<typeof Dialog>;
+
+export default {
+  args: {
+    children: (
+      <>
+        <Dialog.Trigger asChild>
+          <Button variant="outline">Edit Profile</Button>
+        </Dialog.Trigger>
+        <Dialog.Content className="sm:max-w-[425px]">
+          <Dialog.Header>
+            <Dialog.Title>Edit profile</Dialog.Title>
+            <Dialog.Description>Make changes to your profile here. Click save when you are done.</Dialog.Description>
+          </Dialog.Header>
+          <Dialog.Body className="grid gap-4">
+            <div className="grid gap-2">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="description">Description</Label>
+              <Input id="description" />
+            </div>
+          </Dialog.Body>
+          <Dialog.Footer>
+            <Button type="submit">Save changes</Button>
+          </Dialog.Footer>
+        </Dialog.Content>
+      </>
+    )
+  },
+  component: Dialog
+} as Meta<typeof Dialog>;
+
+export const Default: Story = {};

package/src/components/Drawer/Drawer.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../Button/Button.js';
+import { Drawer } from './Drawer.js';
+
+type Story = StoryObj<typeof Drawer>;
+
+export default { component: Drawer } as Meta<typeof Drawer>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <Drawer.Trigger asChild>
+          <Button variant="outline">Open Drawer</Button>
+        </Drawer.Trigger>
+        <Drawer.Content>
+          <div className="mx-auto w-full max-w-sm">
+            <Drawer.Header>
+              <Drawer.Title>Title</Drawer.Title>
+              <Drawer.Description>
+                Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
+              </Drawer.Description>
+            </Drawer.Header>
+            <Drawer.Footer>
+              <Drawer.Close asChild>
+                <Button variant="outline">Close</Button>
+              </Drawer.Close>
+            </Drawer.Footer>
+          </div>
+        </Drawer.Content>
+      </>
+    )
+  }
+};

package/src/components/DropdownButton/DropdownButton.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DropdownButton } from './DropdownButton.js';
+
+type Story = StoryObj<typeof DropdownButton>;
+
+export default { component: DropdownButton } as Meta<typeof DropdownButton>;
+
+export const Default: Story = {
+  args: {
+    children: 'My Dropdown'
+  }
+};

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../Button/Button.js';
+import { DropdownMenu } from './DropdownMenu.js';
+
+type Story = StoryObj<typeof DropdownMenu>;
+
+export default {
+  component: DropdownMenu,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} as Meta<typeof DropdownMenu>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <div className="mx-24">
+        <DropdownMenu.Trigger asChild>
+          <Button variant="outline">Open</Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content className="w-56">
+          <DropdownMenu.Label>My Account</DropdownMenu.Label>
+          <DropdownMenu.Separator />
+          <DropdownMenu.Group>
+            <DropdownMenu.Item>
+              Profile
+              <DropdownMenu.Shortcut>⇧⌘P</DropdownMenu.Shortcut>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item>
+              Billing
+              <DropdownMenu.Shortcut>⌘B</DropdownMenu.Shortcut>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item>
+              Settings
+              <DropdownMenu.Shortcut>⌘S</DropdownMenu.Shortcut>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item>
+              Keyboard shortcuts
+              <DropdownMenu.Shortcut>⌘K</DropdownMenu.Shortcut>
+            </DropdownMenu.Item>
+          </DropdownMenu.Group>
+          <DropdownMenu.Separator />
+          <DropdownMenu.Group>
+            <DropdownMenu.Item>Team</DropdownMenu.Item>
+            <DropdownMenu.Sub>
+              <DropdownMenu.SubTrigger>Invite users</DropdownMenu.SubTrigger>
+              <DropdownMenu.Portal>
+                <DropdownMenu.SubContent>
+                  <DropdownMenu.Item>Email</DropdownMenu.Item>
+                  <DropdownMenu.Item>Message</DropdownMenu.Item>
+                  <DropdownMenu.Separator />
+                  <DropdownMenu.Item>More...</DropdownMenu.Item>
+                </DropdownMenu.SubContent>
+              </DropdownMenu.Portal>
+            </DropdownMenu.Sub>
+            <DropdownMenu.Item>
+              New Team
+              <DropdownMenu.Shortcut>⌘+T</DropdownMenu.Shortcut>
+            </DropdownMenu.Item>
+          </DropdownMenu.Group>
+          <DropdownMenu.Separator />
+          <DropdownMenu.Item>GitHub</DropdownMenu.Item>
+          <DropdownMenu.Item>Support</DropdownMenu.Item>
+          <DropdownMenu.Item disabled>API</DropdownMenu.Item>
+          <DropdownMenu.Separator />
+          <DropdownMenu.Item>
+            Log out
+            <DropdownMenu.Shortcut>⇧⌘Q</DropdownMenu.Shortcut>
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </div>
+    )
+  }
+};

package/src/components/ErrorFallback/ErrorFallback.stories.tsx

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ErrorFallback } from './ErrorFallback.js';
+
+type Story = StoryObj<typeof ErrorFallback>;
+
+export default { component: ErrorFallback } satisfies Meta<typeof ErrorFallback>;
+
+export const Default: Story = {};

package/src/components/Form/BooleanField/BooleanField.spec.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { BooleanField, type BooleanFieldProps } from './BooleanField.js';
+
+const TestBooleanField = ({ variant }: Pick<BooleanFieldProps, 'variant'>) => {
+  const [error, setError] = useState<string | undefined>();
+  const [value, setValue] = useState<boolean | undefined>();
+  return (
+    <BooleanField
+      error={error}
+      label="boolean-field"
+      name="boolean-field"
+      setError={setError}
+      setValue={setValue}
+      value={value}
+      variant={variant}
+    />
+  );
+};
+
+describe('BooleanField', () => {
+  it('should render a checkbox field', () => {
+    render(<TestBooleanField variant="checkbox" />);
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+    expect(() => screen.getByRole('radiogroup')).toThrow();
+  });
+  it('should render a radio field', () => {
+    render(<TestBooleanField variant="radio" />);
+    expect(screen.getByRole('radiogroup')).toBeInTheDocument();
+    expect(() => screen.getByRole('checkbox')).toThrow();
+  });
+});

package/src/components/Form/BooleanField/BooleanField.stories.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { BooleanField } from './BooleanField.js';
+
+type Story = StoryObj<typeof BooleanField>;
+
+export default { component: BooleanField } as Meta<typeof BooleanField>;
+
+export const Radio: Story = {
+  decorators: [
+    (Story) => {
+      const [value, setValue] = useState<boolean | undefined>();
+      return (
+        <Story
+          args={{
+            description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+            label: 'Boolean Field',
+            name: 'boolean',
+            setValue,
+            value,
+            variant: 'radio'
+          }}
+        />
+      );
+    }
+  ]
+};
+
+export const Checkbox: Story = {
+  decorators: [
+    (Story) => {
+      const [value, setValue] = useState<boolean | undefined>(false);
+      return (
+        <Story
+          args={{
+            description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+            label: 'Boolean Field',
+            name: 'boolean',
+            setValue,
+            value,
+            variant: 'checkbox'
+          }}
+        />
+      );
+    }
+  ]
+};

package/src/components/Form/DateField/DateField.spec.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+
+import { toBasicISOString } from '@douglasneuroinformatics/libjs';
+import { getByText, render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { DateField } from './DateField.js';
+
+describe('DateField', () => {
+  const setError = vi.fn();
+  const setValue = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render an input with an empty string value ', () => {
+    render(<DateField label="Date" name="date" setError={setError} setValue={setValue} value={undefined} />);
+    const input: HTMLInputElement = screen.getByRole('textbox');
+    expect(input).toBeInTheDocument();
+    expect(input.value).toBe('');
+  });
+  it('should allow typing arbitrary text while focused', async () => {
+    render(<DateField label="Date" name="date" setError={setError} setValue={setValue} value={undefined} />);
+    const input: HTMLInputElement = screen.getByRole('textbox');
+    await userEvent.type(input, 'foo');
+    expect(input.value).toBe('foo');
+  });
+  it('should not initially show the datepicker', () => {
+    render(<DateField label="Date" name="date" setError={setError} setValue={setValue} value={undefined} />);
+    expect(() => screen.getByTestId('datepicker')).toThrow();
+  });
+  it('should show the datepicker when the input is clicked', async () => {
+    render(<DateField label="Date" name="date" setError={setError} setValue={setValue} value={undefined} />);
+    const input = screen.getByRole('textbox');
+    expect(() => screen.getByTestId('datepicker')).toThrow();
+    await userEvent.click(input);
+    expect(screen.getByTestId('datepicker')).toBeInTheDocument();
+  });
+  it('should discard invalid text when unfocused, once the date picker is closed', async () => {
+    render(<DateField label="Date" name="date" setError={setError} setValue={setValue} value={undefined} />);
+    const input: HTMLInputElement = screen.getByRole('textbox');
+    await userEvent.type(input, 'foo');
+    expect(input.value).toBe('foo');
+    const datepicker = screen.getByTestId('datepicker');
+    await userEvent.click(datepicker);
+    expect(datepicker).toBeInTheDocument();
+    await userEvent.type(input, 'foo');
+    await userEvent.click(screen.getByText('Date'));
+    expect(() => screen.getByTestId('datepicker')).toThrow();
+    expect(input.value).toBe('');
+  });
+  it('should not attempt to set the value if the date is invalid', async () => {
+    render(<DateField label="Date" name="date" setError={setError} setValue={setValue} value={undefined} />);
+    const input: HTMLInputElement = screen.getByRole('textbox');
+    await userEvent.type(input, 'foo');
+    expect(input.value).toBe('foo');
+    await userEvent.click(screen.getByText('Date'));
+    expect(input.value).toBe('');
+    expect(setValue).not.toHaveBeenCalled();
+  });
+  it('should attempt to set the value if the user enters a correct date', async () => {
+    render(<DateField label="Date" name="date" setError={setError} setValue={setValue} value={undefined} />);
+    const input: HTMLInputElement = screen.getByRole('textbox');
+    await userEvent.type(input, '2000-01-01');
+    await userEvent.click(screen.getByText('Date'));
+    expect(input.value).toBe('2000-01-01');
+    expect(setValue).toHaveBeenCalledOnce();
+    expect(setValue).toHaveBeenCalledWith(new Date('2000-01-01'));
+  });
+  it('should allow setting the date using the date picker', async () => {
+    render(<DateField label="Date" name="date" setError={setError} setValue={setValue} value={undefined} />);
+    const input: HTMLInputElement = screen.getByRole('textbox');
+    let datepicker: HTMLElement;
+    let expectedDate: Date;
+    let expectedDateString: string;
+
+    await userEvent.click(input);
+    datepicker = screen.getByTestId('datepicker');
+    await userEvent.click(getByText(datepicker, '1'));
+    expectedDate = new Date(new Date().setDate(1));
+    expectedDateString = toBasicISOString(expectedDate);
+    expect(toBasicISOString(setValue.mock.lastCall[0])).toBe(expectedDateString);
+
+    await userEvent.click(input);
+    datepicker = screen.getByTestId('datepicker');
+    await userEvent.click(getByText(datepicker, '2'));
+    expectedDate = new Date(new Date().setDate(2));
+    expectedDateString = toBasicISOString(expectedDate);
+    expect(toBasicISOString(setValue.mock.lastCall[0])).toBe(expectedDateString);
+  });
+  it('should render the value provided as a prop', () => {
+    const today = new Date();
+    render(<DateField label="Date" name="date" setError={setError} setValue={setValue} value={today} />);
+    const input: HTMLInputElement = screen.getByRole('textbox');
+    expect(input.value).toBe(toBasicISOString(today));
+  });
+});

package/src/components/Form/DateField/DateField.stories.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DateField } from './DateField.js';
+
+type Story = StoryObj<typeof DateField>;
+
+export default { component: DateField } as Meta<typeof DateField>;
+
+export const Default: Story = {
+  decorators: [
+    (Story) => {
+      const [value, setValue] = useState<Date | undefined>();
+      return (
+        <Story
+          args={{
+            description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+            label: 'Date of Birth',
+            name: 'date-of-birth',
+            setValue,
+            value
+          }}
+        />
+      );
+    }
+  ]
+};