@douglasneuroinformatics/libui 2.5.3 → 2.6.1

package/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Label } from '@radix-ui/react-label';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Switch } from './Switch.js';
+
+type Story = StoryObj<typeof Switch>;
+
+export default { component: Switch, tags: ['autodocs'] } as Meta<typeof Switch>;
+
+export const Default: Story = {
+  decorators: [
+    (Story) => (
+      <div className="flex items-center space-x-2">
+        <Story args={{ id: 'airplane-mode' }} />
+        <Label htmlFor="airplane-mode">Airplane Mode</Label>
+      </div>
+    )
+  ]
+};

package/src/components/Table/Table.stories.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Table } from './Table.js';
+
+const invoices = [
+  {
+    invoice: 'INV001',
+    paymentMethod: 'Credit Card',
+    paymentStatus: 'Paid',
+    totalAmount: '$250.00'
+  },
+  {
+    invoice: 'INV002',
+    paymentMethod: 'PayPal',
+    paymentStatus: 'Pending',
+    totalAmount: '$150.00'
+  },
+  {
+    invoice: 'INV003',
+    paymentMethod: 'Bank Transfer',
+    paymentStatus: 'Unpaid',
+    totalAmount: '$350.00'
+  },
+  {
+    invoice: 'INV004',
+    paymentMethod: 'Credit Card',
+    paymentStatus: 'Paid',
+    totalAmount: '$450.00'
+  },
+  {
+    invoice: 'INV005',
+    paymentMethod: 'PayPal',
+    paymentStatus: 'Paid',
+    totalAmount: '$550.00'
+  },
+  {
+    invoice: 'INV006',
+    paymentMethod: 'Bank Transfer',
+    paymentStatus: 'Pending',
+    totalAmount: '$200.00'
+  },
+  {
+    invoice: 'INV007',
+    paymentMethod: 'Credit Card',
+    paymentStatus: 'Unpaid',
+    totalAmount: '$300.00'
+  }
+];
+
+type Story = StoryObj<typeof Table>;
+
+export default { component: Table } as Meta<typeof Table>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <React.Fragment>
+        <Table.Caption>A list of your recent invoices.</Table.Caption>
+        <Table.Header>
+          <Table.Row>
+            <Table.Head className="w-[100px]">Invoice</Table.Head>
+            <Table.Head>Status</Table.Head>
+            <Table.Head>Method</Table.Head>
+            <Table.Head className="text-right">Amount</Table.Head>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {invoices.map((invoice) => (
+            <Table.Row key={invoice.invoice}>
+              <Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
+              <Table.Cell>{invoice.paymentStatus}</Table.Cell>
+              <Table.Cell>{invoice.paymentMethod}</Table.Cell>
+              <Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+        <Table.Footer>
+          <Table.Row>
+            <Table.Cell colSpan={3}>Total</Table.Cell>
+            <Table.Cell className="text-right">$2,500.00</Table.Cell>
+          </Table.Row>
+        </Table.Footer>
+      </React.Fragment>
+    )
+  }
+};

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../Button/Button.js';
+import { Card } from '../Card/Card.js';
+import { Input } from '../Input/Input.js';
+import { Label } from '../Label/Label.js';
+import { Tabs } from './Tabs.js';
+
+type Story = StoryObj<typeof Tabs>;
+
+export default { component: Tabs, tags: ['autodocs'] } as Meta<typeof Tabs>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <Tabs.List className="grid w-full grid-cols-2">
+          <Tabs.Trigger value="account">Account</Tabs.Trigger>
+          <Tabs.Trigger value="password">Password</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="account">
+          <Card>
+            <Card.Header>
+              <Card.Title>Account</Card.Title>
+              <Card.Description>Make changes to your account here. Click save when you are done.</Card.Description>
+            </Card.Header>
+            <Card.Content className="space-y-2">
+              <div className="space-y-1">
+                <Label htmlFor="name">Name</Label>
+                <Input defaultValue="Pedro Duarte" id="name" />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="username">Username</Label>
+                <Input defaultValue="@peduarte" id="username" />
+              </div>
+            </Card.Content>
+            <Card.Footer>
+              <Button>Save changes</Button>
+            </Card.Footer>
+          </Card>
+        </Tabs.Content>
+        <Tabs.Content value="password">
+          <Card>
+            <Card.Header>
+              <Card.Title>Password</Card.Title>
+              <Card.Description>Change your password here. After saving, you will be logged out.</Card.Description>
+            </Card.Header>
+            <Card.Content className="space-y-2">
+              <div className="space-y-1">
+                <Label htmlFor="current">Current password</Label>
+                <Input id="current" type="password" />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="new">New password</Label>
+                <Input id="new" type="password" />
+              </div>
+            </Card.Content>
+            <Card.Footer>
+              <Button>Save password</Button>
+            </Card.Footer>
+          </Card>
+        </Tabs.Content>
+      </>
+    ),
+    className: 'w-[400px]',
+    defaultValue: 'account'
+  }
+};

package/src/components/TextArea/TextArea.spec.tsx

@@ -0,0 +1,23 @@
+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 { TextArea } from './TextArea.js';
+
+const TEST_ID = 'text-area';
+
+describe('TextArea ', () => {
+  it('should render', () => {
+    render(<TextArea />);
+    const input = screen.getByTestId(TEST_ID);
+    expect(input).toBeInTheDocument();
+  });
+  it('should allow typing', async () => {
+    render(<TextArea />);
+    const input = screen.getByTestId(TEST_ID);
+    await userEvent.type(input, 'hello world');
+    expect(input).toHaveDisplayValue('hello world');
+  });
+});

package/src/components/TextArea/TextArea.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TextArea } from './TextArea.js';
+
+type Story = StoryObj<typeof TextArea>;
+
+export default { component: TextArea, tags: ['autodocs'] } as Meta<typeof TextArea>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Type your message here.'
+  }
+};

package/src/components/ThemeToggle/ThemeToggle.stories.tsx

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

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { DownloadIcon } from 'lucide-react';
+
+import { Tooltip } from './Tooltip.js';
+
+type Story = StoryObj<typeof Tooltip>;
+
+export default {
+  component: Tooltip,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} as Meta<typeof Tooltip>;
+
+export const Outline: Story = {
+  args: {
+    children: (
+      <React.Fragment>
+        <Tooltip.Trigger>Hover</Tooltip.Trigger>
+        <Tooltip.Content>
+          <p>Add to library</p>
+        </Tooltip.Content>
+      </React.Fragment>
+    )
+  }
+};
+
+export const Icon: Story = {
+  args: {
+    children: (
+      <React.Fragment>
+        <Tooltip.Trigger size="icon">
+          <DownloadIcon />
+        </Tooltip.Trigger>
+        <Tooltip.Content>
+          <p>Add to library</p>
+        </Tooltip.Content>
+      </React.Fragment>
+    )
+  }
+};

package/src/hooks/useDownload.test.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import { act, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useDownload } from './useDownload.js';
+
+const mockNotificationsStore = {
+  addNotification: vi.fn()
+};
+
+vi.mock('./useNotificationsStore', () => ({
+  useNotificationsStore: () => mockNotificationsStore
+}));
+
+describe('useDownload', () => {
+  let download: ReturnType<typeof useDownload>;
+
+  beforeEach(() => {
+    vi.spyOn(document, 'createElement');
+    vi.spyOn(React, 'useState');
+    const { result } = renderHook(() => useDownload());
+    download = result.current;
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render', () => {
+    expect(download).toBeDefined();
+  });
+
+  it('should invoke the fetch data function', async () => {
+    const fetchData = vi.fn(() => 'hello world');
+    await download('hello.txt', fetchData);
+    expect(fetchData).toHaveBeenCalledOnce();
+  });
+  it('should attempt at add a notification if the fetch data function throws an error', async () => {
+    await act(() =>
+      download('hello.txt', () => {
+        throw new Error('An error occurred!');
+      })
+    );
+    expect(mockNotificationsStore.addNotification).toHaveBeenCalledOnce();
+    expect(mockNotificationsStore.addNotification.mock.lastCall[0]).toMatchObject({ message: 'An error occurred!' });
+  });
+  it('should attempt at add a notification if the fetch data function throws a non-error', async () => {
+    await act(() =>
+      download('hello.txt', () => {
+        throw NaN;
+      })
+    );
+    expect(mockNotificationsStore.addNotification).toHaveBeenCalledOnce();
+  });
+  it('should attempt to create one anchor element', async () => {
+    await act(() => download('hello.txt', () => 'hello world'));
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(document.createElement).toHaveBeenLastCalledWith('a');
+  });
+  it('should invoke the fetch data a gather an image', async () => {
+    const fetchData = vi.fn(() => new Blob());
+    await download('testdiv.png', fetchData, { blobType: 'image/png' });
+    expect(fetchData).toHaveBeenCalledOnce();
+  });
+});

package/src/hooks/useEventCallback.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { fireEvent, render, renderHook, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { useEventCallback } from './useEventCallback.js';
+
+describe('useEventCallback', () => {
+  it('should not call the callback during render', () => {
+    const fn = vi.fn();
+    const { result } = renderHook(() => useEventCallback(fn));
+    render(<button onClick={result.current}>Click me</button>);
+    expect(fn).not.toHaveBeenCalled();
+  });
+  it('should call the callback when the event is triggered', () => {
+    const fn = vi.fn();
+    const { result } = renderHook(() => useEventCallback(fn));
+    render(<button onClick={result.current}>Click me</button>);
+    fireEvent.click(screen.getByText('Click me'));
+    expect(fn).toHaveBeenCalled();
+  });
+});

package/src/hooks/useEventListener.test.tsx

@@ -0,0 +1,120 @@
+import { fireEvent, renderHook } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { useEventListener } from './useEventListener.js';
+
+describe('useEventListener', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should bind/unbind the event listener to the window when element is not provided', () => {
+    const eventName: keyof WindowEventMap = 'load';
+    const handler = vi.fn();
+    const options = undefined;
+
+    vi.spyOn(window, 'addEventListener');
+    vi.spyOn(window, 'removeEventListener');
+
+    const { unmount } = renderHook(() => {
+      useEventListener(eventName, handler);
+    });
+
+    expect(window.addEventListener).toHaveBeenCalledWith(eventName, expect.any(Function), options);
+    unmount();
+    expect(window.removeEventListener).toHaveBeenCalledWith(eventName, expect.any(Function), options);
+  });
+
+  it('should bind/unbind the event listener to the element when element is provided', () => {
+    const eventName: keyof HTMLElementEventMap = 'mouseenter';
+    const handler = vi.fn();
+    const ref = { current: document.createElement('div') };
+    const options = undefined;
+
+    vi.spyOn(ref.current, 'addEventListener');
+    vi.spyOn(ref.current, 'removeEventListener');
+
+    const { unmount } = renderHook(() => {
+      useEventListener(eventName, handler, ref, options);
+    });
+
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(ref.current.addEventListener).toHaveBeenCalledWith(eventName, expect.any(Function), options);
+    unmount();
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(ref.current.removeEventListener).toHaveBeenCalledWith(eventName, expect.any(Function), options);
+  });
+
+  it('should bind/unbind the event listener to the document when document is provided', () => {
+    const eventName: keyof DocumentEventMap = 'load';
+    const handler = vi.fn();
+    const ref = { current: document };
+    const options = undefined;
+
+    vi.spyOn(document, 'addEventListener');
+    vi.spyOn(document, 'removeEventListener');
+
+    const { unmount } = renderHook(() => {
+      useEventListener(eventName, handler, ref, options);
+    });
+
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(document.addEventListener).toHaveBeenCalledWith(eventName, expect.any(Function), options);
+    unmount();
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(document.removeEventListener).toHaveBeenCalledWith(eventName, expect.any(Function), options);
+  });
+
+  it('should pass the options to the event listener', () => {
+    const eventName: keyof WindowEventMap = 'load';
+    const handler = vi.fn();
+    const options = {
+      capture: true,
+      once: true,
+      passive: true
+    };
+
+    vi.spyOn(window, 'addEventListener');
+    vi.spyOn(window, 'removeEventListener');
+
+    renderHook(() => {
+      useEventListener(eventName, handler, undefined, options);
+    });
+
+    expect(window.addEventListener).toHaveBeenCalledWith(eventName, expect.any(Function), options);
+  });
+
+  it('should call the event listener handler when the event is triggered', () => {
+    const eventName: keyof HTMLElementEventMap = 'click';
+    const handler = vi.fn();
+    const ref = { current: document.createElement('button') };
+
+    renderHook(() => {
+      useEventListener(eventName, handler, ref);
+    });
+
+    fireEvent.click(ref.current);
+
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it('should have the correct event type', () => {
+    const ref = { current: document.createElement('button') };
+
+    const clickHandler = vi.fn();
+    const keydownHandler = vi.fn();
+
+    renderHook(() => {
+      useEventListener('click', clickHandler, ref);
+    });
+    renderHook(() => {
+      useEventListener('keydown', keydownHandler, ref);
+    });
+
+    fireEvent.click(ref.current);
+    fireEvent.keyDown(ref.current);
+
+    expect(clickHandler).toHaveBeenCalledWith(expect.any(MouseEvent));
+    expect(keydownHandler).toHaveBeenCalledWith(expect.any(KeyboardEvent));
+  });
+});

package/src/hooks/useInterval.test.ts

@@ -0,0 +1,58 @@
+import { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useInterval } from './useInterval.js';
+
+describe('useInterval()', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.useFakeTimers();
+  });
+
+  it('should fire the callback function (1)', () => {
+    const timeout = 500;
+    const callback = vi.fn();
+    renderHook(() => {
+      useInterval(callback, timeout);
+    });
+    vi.advanceTimersByTime(timeout);
+  });
+
+  it('should fire the callback function (2)', () => {
+    const timeout = 500;
+    const earlyTimeout = 400;
+    const callback = vi.fn();
+    renderHook(() => {
+      useInterval(callback, timeout);
+    });
+    vi.advanceTimersByTime(earlyTimeout);
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('should call set interval on start', () => {
+    mockSetInterval();
+    const timeout = 1200;
+    const callback = vi.fn();
+    renderHook(() => {
+      useInterval(callback, timeout);
+    });
+    expect(setInterval).toHaveBeenCalledWith(expect.any(Function), timeout);
+  });
+
+  it('should call clearTimeout on unmount', () => {
+    mockClearInterval();
+    const callback = vi.fn();
+    const { unmount } = renderHook(() => {
+      useInterval(callback, 1200);
+    });
+    unmount();
+  });
+});
+
+function mockSetInterval() {
+  vi.spyOn(global, 'setInterval');
+}
+
+function mockClearInterval() {
+  vi.spyOn(global, 'clearInterval');
+}

package/src/hooks/useIsomorphicLayoutEffect.test.ts

@@ -0,0 +1,27 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const isBrowser = vi.fn();
+
+vi.mock('../utils.js', () => ({ isBrowser }));
+
+describe('useIsomorphicLayoutEffect', () => {
+  beforeEach(() => {
+    vi.resetModules();
+  });
+  describe('browser', () => {
+    it('should return useLayoutEffect', async () => {
+      isBrowser.mockReturnValueOnce(true);
+      const { useIsomorphicLayoutEffect } = await import('./useIsomorphicLayoutEffect.js');
+      expect(useIsomorphicLayoutEffect).toBe(useLayoutEffect);
+    });
+  });
+  describe('server', () => {
+    it('should be useEffect', async () => {
+      isBrowser.mockReturnValueOnce(false);
+      const { useIsomorphicLayoutEffect } = await import('./useIsomorphicLayoutEffect.js');
+      expect(useIsomorphicLayoutEffect).toBe(useEffect);
+    });
+  });
+});

package/src/hooks/useMediaQuery.test.ts

@@ -0,0 +1,33 @@
+import { renderHook } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { mockMatchMedia } from '../testing/mocks.js';
+import { isBrowser } from '../utils.js';
+import { useMediaQuery } from './useMediaQuery.js';
+
+vi.mock('../utils.js', () => ({ isBrowser: vi.fn(() => true) }));
+
+describe('useMediaQuery', () => {
+  afterEach(() => {
+    vi.spyOn(window, 'matchMedia');
+    vi.restoreAllMocks();
+  });
+
+  it('should return false if running on the server', () => {
+    vi.mocked(isBrowser).mockReturnValue(false);
+    const { result } = renderHook(() => useMediaQuery('(min-width: 768px)'));
+    expect(result.current).toBe(false);
+  });
+
+  it('should return false if running in the browser, if the media query is false', () => {
+    mockMatchMedia(false);
+    const { result } = renderHook(() => useMediaQuery('(min-width: 768px)'));
+    expect(result.current).toBe(false);
+  });
+
+  it('should return true if running in the browser, if the media query is true', () => {
+    mockMatchMedia(true);
+    const { result } = renderHook(() => useMediaQuery('(min-width: 768px)'));
+    expect(result.current).toBe(true);
+  });
+});

package/src/hooks/useNotificationsStore.test.ts

@@ -0,0 +1,30 @@
+import { act, renderHook } from '@testing-library/react';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+import * as zustand from 'zustand';
+
+import { useNotificationsStore } from './useNotificationsStore.js';
+
+describe('useNotificationsStore', () => {
+  beforeAll(() => {
+    vi.spyOn(zustand, 'create');
+  });
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+  it('should render and return an object', () => {
+    const { result } = renderHook(() => useNotificationsStore());
+    expect(result.current).toBeTypeOf('object');
+  });
+  it('should add and dismiss notifications', () => {
+    const { result } = renderHook(() => useNotificationsStore());
+    act(() => {
+      result.current.addNotification({ message: 'test', type: 'info' });
+    });
+    expect(result.current.notifications.length).toBe(1);
+    expect(result.current.notifications[0]).toMatchObject({ message: 'test' });
+    act(() => {
+      result.current.dismissNotification(result.current.notifications[0].id);
+    });
+    expect(result.current.notifications.length).toBe(0);
+  });
+});