@douglasneuroinformatics/libui 2.5.3 → 2.6.0

package/src/components/MenuBar/MenuBar.stories.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { MenuBar } from './MenuBar.js';
+
+type Story = StoryObj<typeof MenuBar>;
+
+export default { component: MenuBar } as Meta<typeof MenuBar>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <MenuBar.Menu>
+          <MenuBar.Trigger>File</MenuBar.Trigger>
+          <MenuBar.Content>
+            <MenuBar.Item>
+              New Tab <MenuBar.Shortcut>⌘T</MenuBar.Shortcut>
+            </MenuBar.Item>
+            <MenuBar.Item>
+              New Window <MenuBar.Shortcut>⌘N</MenuBar.Shortcut>
+            </MenuBar.Item>
+            <MenuBar.Item disabled>New Incognito Window</MenuBar.Item>
+            <MenuBar.Separator />
+            <MenuBar.Sub>
+              <MenuBar.SubTrigger>Share</MenuBar.SubTrigger>
+              <MenuBar.SubContent>
+                <MenuBar.Item>Email link</MenuBar.Item>
+                <MenuBar.Item>Messages</MenuBar.Item>
+                <MenuBar.Item>Notes</MenuBar.Item>
+              </MenuBar.SubContent>
+            </MenuBar.Sub>
+            <MenuBar.Separator />
+            <MenuBar.Item>
+              Print... <MenuBar.Shortcut>⌘P</MenuBar.Shortcut>
+            </MenuBar.Item>
+          </MenuBar.Content>
+        </MenuBar.Menu>
+        <MenuBar.Menu>
+          <MenuBar.Trigger>Edit</MenuBar.Trigger>
+          <MenuBar.Content>
+            <MenuBar.Item>
+              Undo <MenuBar.Shortcut>⌘Z</MenuBar.Shortcut>
+            </MenuBar.Item>
+            <MenuBar.Item>
+              Redo <MenuBar.Shortcut>⇧⌘Z</MenuBar.Shortcut>
+            </MenuBar.Item>
+            <MenuBar.Separator />
+            <MenuBar.Sub>
+              <MenuBar.SubTrigger>Find</MenuBar.SubTrigger>
+              <MenuBar.SubContent>
+                <MenuBar.Item>Search the web</MenuBar.Item>
+                <MenuBar.Separator />
+                <MenuBar.Item>Find...</MenuBar.Item>
+                <MenuBar.Item>Find Next</MenuBar.Item>
+                <MenuBar.Item>Find Previous</MenuBar.Item>
+              </MenuBar.SubContent>
+            </MenuBar.Sub>
+            <MenuBar.Separator />
+            <MenuBar.Item>Cut</MenuBar.Item>
+            <MenuBar.Item>Copy</MenuBar.Item>
+            <MenuBar.Item>Paste</MenuBar.Item>
+          </MenuBar.Content>
+        </MenuBar.Menu>
+        <MenuBar.Menu>
+          <MenuBar.Trigger>View</MenuBar.Trigger>
+          <MenuBar.Content>
+            <MenuBar.CheckboxItem>Always Show Bookmarks Bar</MenuBar.CheckboxItem>
+            <MenuBar.CheckboxItem checked>Always Show Full URLs</MenuBar.CheckboxItem>
+            <MenuBar.Separator />
+            <MenuBar.Item inset>
+              Reload <MenuBar.Shortcut>⌘R</MenuBar.Shortcut>
+            </MenuBar.Item>
+            <MenuBar.Item disabled inset>
+              Force Reload <MenuBar.Shortcut>⇧⌘R</MenuBar.Shortcut>
+            </MenuBar.Item>
+            <MenuBar.Separator />
+            <MenuBar.Item inset>Toggle Fullscreen</MenuBar.Item>
+            <MenuBar.Separator />
+            <MenuBar.Item inset>Hide Sidebar</MenuBar.Item>
+          </MenuBar.Content>
+        </MenuBar.Menu>
+        <MenuBar.Menu>
+          <MenuBar.Trigger>Profiles</MenuBar.Trigger>
+          <MenuBar.Content>
+            <MenuBar.RadioGroup value="benoit">
+              <MenuBar.RadioItem value="andy">Andy</MenuBar.RadioItem>
+              <MenuBar.RadioItem value="benoit">Benoit</MenuBar.RadioItem>
+              <MenuBar.RadioItem value="Luis">Luis</MenuBar.RadioItem>
+            </MenuBar.RadioGroup>
+            <MenuBar.Separator />
+            <MenuBar.Item inset>Edit...</MenuBar.Item>
+            <MenuBar.Separator />
+            <MenuBar.Item inset>Add Profile...</MenuBar.Item>
+          </MenuBar.Content>
+        </MenuBar.Menu>
+      </>
+    )
+  }
+};

package/src/components/NotificationHub/NotificationHub.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useNotificationsStore } from '../../hooks/useNotificationsStore.js';
+import { Button } from '../Button/Button.js';
+import { NotificationHub } from './NotificationHub.js';
+
+type Story = StoryObj<typeof NotificationHub>;
+
+const meta: Meta<typeof NotificationHub> = {
+  component: NotificationHub,
+  decorators: [
+    (Story) => {
+      const notifications = useNotificationsStore();
+      return (
+        <div className="border">
+          <Story />
+          <Button
+            label="Add Notification"
+            type="button"
+            onClick={() => {
+              notifications.addNotification({
+                message: `Notification ${notifications.notifications.length}`,
+                type: 'info'
+              });
+            }}
+          />
+        </div>
+      );
+    }
+  ]
+};
+
+export default meta;
+
+export const Default: Story = {
+  args: {
+    timeout: 100000
+  }
+};

package/src/components/Pagination/Pagination.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Pagination } from './Pagination.js';
+
+type Story = StoryObj<typeof Pagination>;
+
+export default {
+  args: {
+    children: (
+      <>
+        <Pagination.Content>
+          <Pagination.Item>
+            <Pagination.Previous href="#" />
+          </Pagination.Item>
+          <Pagination.Item>
+            <Pagination.Link href="#">1</Pagination.Link>
+          </Pagination.Item>
+          <Pagination.Item>
+            <Pagination.Link isActive href="#">
+              2
+            </Pagination.Link>
+          </Pagination.Item>
+          <Pagination.Item>
+            <Pagination.Link href="#">3</Pagination.Link>
+          </Pagination.Item>
+          <Pagination.Item>
+            <Pagination.Ellipsis />
+          </Pagination.Item>
+          <Pagination.Item>
+            <Pagination.Next href="#" />
+          </Pagination.Item>
+        </Pagination.Content>
+      </>
+    )
+  },
+  component: Pagination
+} as Meta<typeof Pagination>;
+
+export const Default: Story = {};

package/src/components/Popover/Popover.spec.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+
+import { Popover } from './Popover.js';
+
+const TestPopover = () => (
+  <Popover>
+    <Popover.Trigger>Open</Popover.Trigger>
+    <Popover.Content>Place content for the popover here.</Popover.Content>
+  </Popover>
+);
+
+describe('Popover', () => {
+  it('should function correctly', async () => {
+    render(<TestPopover />);
+    expect(screen.getByText('Open')).toBeInTheDocument();
+    expect(() => screen.getByText('Place content for the popover here.')).toThrow();
+    await userEvent.click(screen.getByText('Open'));
+    expect(screen.getByText('Place content for the popover here.')).toBeInTheDocument();
+  });
+});

package/src/components/Popover/Popover.stories.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { CircleHelpIcon } from 'lucide-react';
+
+import { Button } from '../Button/Button.js';
+import { Input } from '../Input/Input.js';
+import { Label } from '../Label/Label.js';
+import { Popover } from './Popover.js';
+
+type Story = StoryObj<typeof Popover>;
+
+export default {
+  component: Popover,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} as Meta<typeof Popover>;
+
+export const Form: Story = {
+  args: {
+    children: (
+      <React.Fragment>
+        <Popover.Trigger asChild>
+          <Button variant="outline">Open popover</Button>
+        </Popover.Trigger>
+        <Popover.Content className="w-80 p-4">
+          <div className="grid gap-4">
+            <div className="space-y-2">
+              <h4 className="font-medium leading-none">Dimensions</h4>
+              <p className="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
+            </div>
+            <div className="grid gap-2">
+              <div className="grid grid-cols-3 items-center gap-4">
+                <Label htmlFor="width">Width</Label>
+                <Input className="col-span-2 h-8" defaultValue="100%" id="width" />
+              </div>
+              <div className="grid grid-cols-3 items-center gap-4">
+                <Label htmlFor="maxWidth">Max. width</Label>
+                <Input className="col-span-2 h-8" defaultValue="300px" id="maxWidth" />
+              </div>
+              <div className="grid grid-cols-3 items-center gap-4">
+                <Label htmlFor="height">Height</Label>
+                <Input className="col-span-2 h-8" defaultValue="25px" id="height" />
+              </div>
+              <div className="grid grid-cols-3 items-center gap-4">
+                <Label htmlFor="maxHeight">Max. height</Label>
+                <Input className="col-span-2 h-8" defaultValue="none" id="maxHeight" />
+              </div>
+            </div>
+          </div>
+        </Popover.Content>
+      </React.Fragment>
+    )
+  }
+};
+
+export const Icon: Story = {
+  args: {
+    children: (
+      <React.Fragment>
+        <Popover.Trigger asChild>
+          <Button size="icon" variant="ghost">
+            <CircleHelpIcon />
+          </Button>
+        </Popover.Trigger>
+        <Popover.Content className="w-min whitespace-nowrap text-sm">Hello World</Popover.Content>
+      </React.Fragment>
+    )
+  }
+};

package/src/components/Progress/Progress.stories.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Progress } from './Progress.js';
+
+type Story = StoryObj<typeof Progress>;
+
+export default { component: Progress } as Meta<typeof Progress>;
+
+export const Default: Story = {
+  decorators: [
+    (Story) => {
+      const [progress, setProgress] = useState(13);
+
+      useEffect(() => {
+        const timer = setTimeout(() => setProgress(66), 500);
+        return () => clearTimeout(timer);
+      }, []);
+
+      return <Story args={{ className: 'w-[60%]', value: progress }} />;
+    }
+  ]
+};

package/src/components/RadioGroup/RadioGroup.spec.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { Label } from '../Label/Label.js';
+import { RadioGroup, type RadioGroupProps } from './RadioGroup.js';
+
+const TEST_ID = 'radio-group';
+
+const TestRadioGroup = (props: RadioGroupProps) => (
+  <RadioGroup {...props}>
+    <div className="flex items-center space-x-2">
+      <RadioGroup.Item id="option-one" value="option-one" />
+      <Label htmlFor="option-one">Option One</Label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroup.Item id="option-two" value="option-two" />
+      <Label htmlFor="option-two">Option Two</Label>
+    </div>
+  </RadioGroup>
+);
+
+describe('RadioGroup', () => {
+  it('should render', () => {
+    render(<TestRadioGroup />);
+    expect(screen.getByTestId(TEST_ID)).toBeInTheDocument();
+  });
+  it('should contain a custom class name', () => {
+    render(<TestRadioGroup className="foo" />);
+    expect(screen.getByTestId(TEST_ID)).toHaveClass('foo');
+  });
+  it('should function correctly', async () => {
+    const handleValueChange = vi.fn();
+    render(<TestRadioGroup onValueChange={handleValueChange} />);
+    await userEvent.click(screen.getByText('Option One'));
+    expect(handleValueChange).toHaveBeenLastCalledWith('option-one');
+    await userEvent.click(screen.getByText('Option Two'));
+    expect(handleValueChange).toHaveBeenLastCalledWith('option-two');
+  });
+});

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Label } from '../Label/Label.js';
+import { RadioGroup } from './RadioGroup.js';
+
+type Story = StoryObj<typeof RadioGroup>;
+
+export default { component: RadioGroup, tags: ['autodocs'] } as Meta<typeof RadioGroup>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <div className="flex items-center space-x-2">
+          <RadioGroup.Item id="r1" value="default" />
+          <Label htmlFor="r1">Default</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <RadioGroup.Item id="r2" value="comfortable" />
+          <Label htmlFor="r2">Comfortable</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <RadioGroup.Item id="r3" value="compact" />
+          <Label htmlFor="r3">Compact</Label>
+        </div>
+      </>
+    ),
+    defaultValue: 'default',
+    onValueChange(value) {
+      alert(value);
+    }
+  }
+};

package/src/components/Resizable/Resizable.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Resizable } from './Resizable.js';
+
+type Story = StoryObj<typeof Resizable>;
+
+export default { component: Resizable } as Meta<typeof Resizable>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <Resizable.PanelGroup className="max-w-md rounded-lg border" direction="horizontal">
+        <Resizable.Panel defaultSize={50}>
+          <div className="flex h-[200px] items-center justify-center p-6">
+            <span className="font-semibold">One</span>
+          </div>
+        </Resizable.Panel>
+        <Resizable.Handle />
+        <Resizable.Panel defaultSize={50}>
+          <Resizable.PanelGroup direction="vertical">
+            <Resizable.Panel defaultSize={25}>
+              <div className="flex h-full items-center justify-center p-6">
+                <span className="font-semibold">Two</span>
+              </div>
+            </Resizable.Panel>
+            <Resizable.Handle />
+            <Resizable.Panel defaultSize={75}>
+              <div className="flex h-full items-center justify-center p-6">
+                <span className="font-semibold">Three</span>
+              </div>
+            </Resizable.Panel>
+          </Resizable.PanelGroup>
+        </Resizable.Panel>
+      </Resizable.PanelGroup>
+    )
+  }
+};

package/src/components/ScrollArea/ScrollArea.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { ScrollArea } from './ScrollArea.js';
+
+const TEST_ID = 'scroll-area';
+
+describe('ScrollArea', () => {
+  it('should render', () => {
+    render(<ScrollArea />);
+    expect(screen.getByTestId(TEST_ID)).toBeInTheDocument();
+  });
+  it('should contain a custom class name', () => {
+    render(<ScrollArea className="foo" />);
+    expect(screen.getByTestId(TEST_ID)).toHaveClass('foo');
+  });
+});

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ScrollArea } from './ScrollArea.js';
+
+type Story = StoryObj<typeof ScrollArea>;
+
+export default { component: ScrollArea, tags: ['autodocs'] } as Meta<typeof ScrollArea>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <p>
+        Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under
+        the king&apos;s pillow, in his soup, even in the royal toilet. The king was furious, but he could not seem to
+        stop Jokester. And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so
+        funny that they could not help but laugh. And once they started laughing, they could not stop.
+      </p>
+    ),
+    className: 'h-[200px] w-[350px] rounded-md border p-4'
+  }
+};

package/src/components/SearchBar/SearchBar.stories.tsx

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

package/src/components/Select/Select.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Select } from './Select.js';
+
+type Story = StoryObj<typeof Select>;
+
+export default { component: Select, tags: ['autodocs'] } as Meta<typeof Select>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <Select.Trigger className="w-[180px]">
+          <Select.Value placeholder="Select a fruit" />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Group>
+            <Select.Label>Fruits</Select.Label>
+            <Select.Item value="apple">Apple</Select.Item>
+            <Select.Item value="banana">Banana</Select.Item>
+            <Select.Item value="blueberry">Blueberry</Select.Item>
+            <Select.Item value="grapes">Grapes</Select.Item>
+            <Select.Item value="pineapple">Pineapple</Select.Item>
+          </Select.Group>
+        </Select.Content>
+      </>
+    )
+  }
+};

package/src/components/Separator/Separator.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Separator } from './Separator.js';
+
+const TEST_ID = 'separator';
+
+describe('Separator', () => {
+  it('should render', () => {
+    render(<Separator />);
+    expect(screen.getByTestId(TEST_ID)).toBeInTheDocument();
+  });
+  it('should contain a custom class name', () => {
+    render(<Separator className="foo" />);
+    expect(screen.getByTestId(TEST_ID)).toHaveClass('foo');
+  });
+});

package/src/components/Separator/Separator.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Separator } from './Separator.js';
+
+type Story = StoryObj<typeof Separator>;
+
+export default { component: Separator, tags: ['autodocs'] } as Meta<typeof Separator>;
+
+export const Default: Story = {
+  decorators: [
+    (Story) => (
+      <div>
+        <div className="space-y-1">
+          <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
+          <p className="text-sm text-muted-foreground">An open-source UI component library.</p>
+        </div>
+        <Story args={{ className: 'my-4' }} />
+        <div className="flex h-5 items-center space-x-4 text-sm">
+          <div>Blog</div>
+          <Separator orientation="vertical" />
+          <div>Docs</div>
+          <Separator orientation="vertical" />
+          <div>Source</div>
+        </div>
+      </div>
+    )
+  ]
+};

package/src/components/Sheet/Sheet.stories.tsx

@@ -0,0 +1,49 @@
+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 { Sheet } from './Sheet.js';
+
+type Story = StoryObj<typeof Sheet>;
+
+export default { component: Sheet } as Meta<typeof Sheet>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <React.Fragment>
+        <Sheet.Trigger asChild>
+          <Button variant="outline">Open</Button>
+        </Sheet.Trigger>
+        <Sheet.Content>
+          <Sheet.Header>
+            <Sheet.Title>Edit profile</Sheet.Title>
+            <Sheet.Description>Make changes to your profile here. Click save when you are done.</Sheet.Description>
+          </Sheet.Header>
+          <Sheet.Body className="grid gap-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label className="text-right" htmlFor="name">
+                Name
+              </Label>
+              <Input className="col-span-3" id="name" value="Pedro Duarte" />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label className="text-right" htmlFor="username">
+                Username
+              </Label>
+              <Input className="col-span-3" id="username" value="@peduarte" />
+            </div>
+          </Sheet.Body>
+          <Sheet.Footer>
+            <Sheet.Close asChild>
+              <Button type="submit">Save changes</Button>
+            </Sheet.Close>
+          </Sheet.Footer>
+        </Sheet.Content>
+      </React.Fragment>
+    )
+  }
+};

package/src/components/Slider/Slider.stories.tsx

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

package/src/components/Spinner/Spinner.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Spinner } from './Spinner.js';
+
+type Story = StoryObj<typeof Spinner>;
+
+export default {
+  component: Spinner,
+  parameters: {
+    layout: 'centered'
+  }
+} as Meta<typeof Spinner>;
+
+export const Default: Story = {};

package/src/components/SpinnerIcon/SpinnerIcon.stories.tsx

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