@usefui/components 1.5.1

package/src/__tests__/Sheet.test.tsx

@@ -0,0 +1,125 @@
+import React from "react";
+
+import { test, vi, afterEach, describe, expect } from "vitest";
+import {
+  screen,
+  render,
+  cleanup,
+  waitFor,
+  fireEvent,
+} from "@testing-library/react";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+import { Sheet } from "../../src";
+import {
+  ComponentSideEnum,
+  ComponentSizeEnum,
+  TComponentSize,
+} from "../../../../types";
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+const onClickCallback = vi.fn();
+const onClickCallbackInner = vi.fn();
+
+const SheetDefault = (args: {
+  open?: boolean;
+  closeOnInteract?: boolean;
+  shortcut?: boolean;
+  side?: ComponentSideEnum;
+  sizing?: ComponentSizeEnum;
+  hotkey?: string;
+}) => {
+  return (
+    <Sheet.Root>
+      <Sheet.Trigger name="external" onClick={onClickCallback}>
+        Ext Trigger
+      </Sheet.Trigger>
+
+      <Sheet
+        open={args.open}
+        side={args.side as any}
+        sizing={args.sizing as TComponentSize}
+        shortcut={args.shortcut}
+        hotkey={args.hotkey}
+        aria-label="test-sheet"
+      >
+        <h4>test-content</h4>
+        <Sheet.Trigger name="inner" onClick={onClickCallbackInner}>
+          Inner Trigger
+        </Sheet.Trigger>
+      </Sheet>
+    </Sheet.Root>
+  );
+};
+
+expect.extend(toHaveNoViolations);
+describe("Sheet", () => {
+  test("Renders without accessibility violation", async () => {
+    const { container } = render(<SheetDefault open />);
+    const ComponentContainer = await axe(container);
+
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+  test("Renders with accessibility definition", async () => {
+    render(<SheetDefault />);
+    const ExtTrigger = screen.getByLabelText("external-action");
+
+    expect(ExtTrigger.getAttribute("data-state")).toBe("closed");
+
+    fireEvent.click(ExtTrigger);
+    await waitFor(() => {
+      const Content = screen.getByLabelText("test-sheet");
+      const InnerTrigger = screen.getByLabelText("inner-action");
+
+      expect(ExtTrigger.getAttribute("data-state")).toBe("open");
+      expect(InnerTrigger.getAttribute("data-state")).toBe("open");
+
+      expect(Content.getAttribute("role")).toBe("dialog");
+      expect(Content.getAttribute("data-state")).toBe("open");
+      expect(Content.getAttribute("tabIndex")).toBe("-1");
+      expect(Content.getAttribute("aria-labelledby")).toBeDefined();
+    });
+  });
+  test("Fires the defined callback functions and toggle the content when the triggers are clicked", async () => {
+    render(<SheetDefault />);
+
+    fireEvent.click(screen.getByLabelText("external-action"));
+    await waitFor(() => expect(onClickCallback).toHaveBeenCalled());
+
+    fireEvent.click(screen.getByLabelText("inner-action"));
+    await waitFor(() => expect(onClickCallbackInner).toHaveBeenCalled());
+  });
+  test("Renders the component by default if open is defined", async () => {
+    render(<SheetDefault open />);
+    await waitFor(() =>
+      expect(screen.getByLabelText("test-sheet")).toBeDefined()
+    );
+  });
+  test("Removes the component from the DOM if the Overlay is clicked and closeOnInteract is defined", async () => {
+    render(<SheetDefault open closeOnInteract />);
+    await waitFor(() => {
+      const Overlay = screen.getByLabelText("test-sheet-overlay");
+
+      expect(Overlay).toBeDefined();
+      expect(Overlay.getAttribute("aria-hidden")).toBe("true");
+    });
+
+    fireEvent.click(screen.getByLabelText("test-sheet-overlay"));
+    expect(() => screen.getByRole("region")).toThrow();
+    expect(() => screen.getByLabelText("test-sheet-overlay")).toThrow();
+  });
+  test("Toggle the component when the keyboard shortcut is pressed", async () => {
+    const { container } = render(<SheetDefault open shortcut hotkey="a" />);
+    expect(screen.getByText("test-content")).toBeDefined();
+
+    fireEvent.keyDown(container, { key: "a", code: "KeyA", ctrlKey: true });
+    await waitFor(() =>
+      expect(() => screen.getByText("test-content")).toThrow()
+    );
+  });
+});

package/src/__tests__/Switch.test.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+
+import { test, vi, afterEach, describe, expect } from "vitest";
+import {
+  screen,
+  render,
+  cleanup,
+  waitFor,
+  fireEvent,
+} from "@testing-library/react";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+import { Switch } from "../../src/switch";
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+const onClickCallback = vi.fn();
+const Switchefault = (args: { defaultChecked?: boolean }) => {
+  return (
+    <Switch.Root>
+      <label id="label" htmlFor="switch-test">
+        test switch
+      </label>
+      <Switch
+        defaultChecked={args.defaultChecked}
+        onClick={onClickCallback}
+        aria-labelledby="label"
+        disabled={false}
+      >
+        <Switch.Thumb />
+      </Switch>
+    </Switch.Root>
+  );
+};
+
+expect.extend(toHaveNoViolations);
+describe("Switch", () => {
+  test("Renders without accessibility violation", async () => {
+    const { container } = render(<Switchefault />);
+    const ComponentContainer = await axe(container);
+
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+  test("Renders with accessibility definition", async () => {
+    render(<Switchefault />);
+    const Trigger = screen.getByTitle("switch-trigger");
+    const Thumb = screen.getByTitle("switch-thumb");
+
+    expect(Trigger.getAttribute("value")).toBe("false");
+    expect(Trigger.getAttribute("type")).toBe("button");
+    expect(Trigger.getAttribute("aria-checked")).toBe("false");
+    expect(Trigger.getAttribute("data-disabled")).toBe("false");
+
+    expect(Thumb.getAttribute("aria-hidden")).toBeDefined();
+    expect(Thumb.getAttribute("tabIndex")).toBe("-1");
+    expect(Thumb.getAttribute("role")).toBe("presentation");
+    expect(Thumb.getAttribute("data-checked")).toBe("false");
+  });
+  test("Update the component state on click and fires the defined callback function", async () => {
+    render(<Switchefault />);
+    const Trigger = screen.getByTitle("switch-trigger");
+    const Thumb = screen.getByTitle("switch-thumb");
+
+    fireEvent.click(Trigger);
+
+    await waitFor(() => {
+      expect(Trigger.getAttribute("value")).toBe("true");
+      expect(Trigger.getAttribute("aria-checked")).toBe("true");
+      expect(Thumb.getAttribute("data-checked")).toBe("true");
+      expect(Thumb.getAttribute("data-checked")).toBe("true");
+
+      expect(onClickCallback).toHaveBeenCalled();
+      expect(onClickCallback).toHaveBeenCalledTimes(1);
+    });
+  });
+  test("Renders as checked if defaultChecked is defined", async () => {
+    render(<Switchefault defaultChecked />);
+    const Trigger = screen.getByTitle("switch-trigger");
+    const Thumb = screen.getByTitle("switch-thumb");
+
+    expect(Trigger.getAttribute("value")).toBe("true");
+    expect(Trigger.getAttribute("aria-checked")).toBe("true");
+    expect(Thumb.getAttribute("data-checked")).toBe("true");
+    expect(Thumb.getAttribute("data-checked")).toBe("true");
+  });
+});

package/src/__tests__/Tabs.test.tsx

@@ -0,0 +1,129 @@
+import React from "react";
+
+import { test, vi, afterEach, describe, expect } from "vitest";
+import {
+  screen,
+  render,
+  cleanup,
+  waitFor,
+  fireEvent,
+} from "@testing-library/react";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+import { Tabs } from "../../src/tabs";
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+const onClickCallback = vi.fn();
+const TabsDefault = () => {
+  return (
+    <Tabs.Root>
+      <Tabs>
+        <Tabs.Trigger value="1">trigger 1</Tabs.Trigger>
+        <Tabs.Trigger onClick={onClickCallback} value="2">
+          trigger 2
+        </Tabs.Trigger>
+      </Tabs>
+      <Tabs.Content value="1">
+        <p>item 1</p>
+      </Tabs.Content>
+      <Tabs.Content value="2">
+        <p>item 2</p>
+      </Tabs.Content>
+    </Tabs.Root>
+  );
+};
+
+expect.extend(toHaveNoViolations);
+describe("Tabs", () => {
+  test("Renders without accessibility violation", async () => {
+    const { container } = render(<TabsDefault />);
+    const ComponentContainer = await axe(container);
+
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+  test("Renders with accessibility definition", async () => {
+    render(<TabsDefault />);
+    const Trigger = screen.getByTitle("1-tab");
+    const Content = screen.getByTitle("1-tabpanel");
+    const ScndTrigger = screen.getByTitle("2-tab");
+    const ScndContent = screen.getByTitle("2-tabpanel");
+
+    expect(Trigger.getAttribute("role")).toBe("tab");
+    expect(Trigger.getAttribute("value")).toBe("1");
+    expect(Trigger.getAttribute("aria-selected")).toBe("true");
+    expect(Trigger.getAttribute("data-state")).toBe("active");
+    expect(Trigger.getAttribute("data-controls")).toBeDefined();
+
+    expect(Content.getAttribute("role")).toBe("tabpanel");
+    expect(Content.getAttribute("data-value")).toBe("1");
+    expect(Content.getAttribute("data-state")).toBe("active");
+    expect(Content.getAttribute("aria-labelledby")).toBeDefined();
+
+    expect(ScndTrigger.getAttribute("aria-selected")).toBe("false");
+    expect(ScndTrigger.getAttribute("data-state")).toBe("inactive");
+    expect(ScndContent.getAttribute("data-state")).toBe("inactive");
+  });
+  test("Update the component state on click and fires the defined callback function", async () => {
+    render(<TabsDefault />);
+    const Trigger = screen.getByTitle("1-tab");
+    const Content = screen.getByTitle("1-tabpanel");
+    const ScndTrigger = screen.getByTitle("2-tab");
+    const ScndContent = screen.getByTitle("2-tabpanel");
+
+    expect(screen.getByText("item 1")).toBeDefined();
+    fireEvent.click(ScndTrigger);
+    await waitFor(() => {
+      expect(Trigger.getAttribute("aria-selected")).toBe("false");
+      expect(Trigger.getAttribute("data-state")).toBe("inactive");
+      expect(Content.getAttribute("data-state")).toBe("inactive");
+
+      expect(ScndTrigger.getAttribute("aria-selected")).toBe("true");
+      expect(ScndTrigger.getAttribute("data-state")).toBe("active");
+      expect(ScndContent.getAttribute("data-state")).toBe("active");
+
+      expect(onClickCallback).toHaveBeenCalled();
+      expect(onClickCallback).toHaveBeenCalledTimes(1);
+
+      expect(() => screen.getByText("item 1")).toThrow();
+      expect(screen.getByText("item 2")).toBeDefined();
+    });
+  });
+  test("Renders the desired section as open if defaultOpen is defined", async () => {
+    render(
+      <Tabs.Root>
+        <Tabs defaultOpen="2">
+          <Tabs.Trigger value="1">trigger 1</Tabs.Trigger>
+          <Tabs.Trigger onClick={onClickCallback} value="2">
+            trigger 2
+          </Tabs.Trigger>
+        </Tabs>
+        <Tabs.Content value="1">
+          <p>item 1</p>
+        </Tabs.Content>
+        <Tabs.Content value="2">
+          <p>item 2</p>
+        </Tabs.Content>
+      </Tabs.Root>
+    );
+    const Trigger = screen.getByTitle("1-tab");
+    const Content = screen.getByTitle("1-tabpanel");
+    const ScndTrigger = screen.getByTitle("2-tab");
+    const ScndContent = screen.getByTitle("2-tabpanel");
+
+    expect(Trigger.getAttribute("aria-selected")).toBe("false");
+    expect(Trigger.getAttribute("data-state")).toBe("inactive");
+    expect(Content.getAttribute("data-state")).toBe("inactive");
+
+    expect(ScndTrigger.getAttribute("aria-selected")).toBe("true");
+    expect(ScndTrigger.getAttribute("data-state")).toBe("active");
+    expect(ScndContent.getAttribute("data-state")).toBe("active");
+
+    expect(() => screen.getByText("item 1")).toThrow();
+    expect(screen.getByText("item 2")).toBeDefined();
+  });
+});

package/src/__tests__/Toggle.test.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+
+import { test, vi, afterEach, describe, expect } from "vitest";
+import {
+  screen,
+  render,
+  cleanup,
+  waitFor,
+  fireEvent,
+} from "@testing-library/react";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+import { Toggle } from "../../src/toggle";
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+const onClickCallback = vi.fn();
+const ToggleDefault = (args: { defaultChecked?: boolean }) => {
+  return (
+    <Toggle defaultChecked={args.defaultChecked} onClick={onClickCallback}>
+      Test
+    </Toggle>
+  );
+};
+
+expect.extend(toHaveNoViolations);
+describe("Toggle", () => {
+  test("Renders without accessibility violation", async () => {
+    const { container } = render(<ToggleDefault />);
+    const ComponentContainer = await axe(container);
+
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+  test("Renders with accessibility definition", async () => {
+    render(<ToggleDefault />);
+    const ToggleComponent = screen.getByRole("switch");
+
+    expect(ToggleComponent.getAttribute("type")).toBe("button");
+    expect(ToggleComponent.getAttribute("value")).toBe("false");
+    expect(ToggleComponent.getAttribute("data-checked")).toBe("false");
+    expect(ToggleComponent.getAttribute("data-disabled")).toBe("false");
+  });
+  test("Update the component state on click and fires the defined callback function", async () => {
+    render(<ToggleDefault />);
+    const ToggleComponent = screen.getByRole("switch");
+
+    fireEvent.click(ToggleComponent);
+    await waitFor(() => {
+      expect(ToggleComponent.getAttribute("value")).toBe("true");
+      expect(ToggleComponent.getAttribute("data-checked")).toBe("true");
+
+      expect(onClickCallback).toHaveBeenCalled();
+      expect(onClickCallback).toHaveBeenCalledTimes(1);
+    });
+  });
+  test("Renders as checked if defaultChecked is defined", async () => {
+    render(<ToggleDefault defaultChecked />);
+    const ToggleComponent = screen.getByRole("switch");
+
+    expect(ToggleComponent.getAttribute("value")).toBe("true");
+    expect(ToggleComponent.getAttribute("data-checked")).toBe("true");
+  });
+});

package/src/__tests__/Toolbar.test.tsx

@@ -0,0 +1,147 @@
+import React from "react";
+
+import { test, vi, afterEach, describe, expect } from "vitest";
+import {
+  screen,
+  render,
+  cleanup,
+  waitFor,
+  fireEvent,
+} from "@testing-library/react";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+import { Toolbar } from "../../src/toolbar";
+import {
+  ComponentSizeEnum,
+  ComponentSideEnum,
+  TComponentSize,
+} from "../../../../types";
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+const onClickCallback = vi.fn();
+const ToolbarDefault = (args: {
+  showoncollapse?: boolean;
+  defaultOpen?: boolean;
+  shortcut?: boolean;
+  side?: ComponentSideEnum;
+  sizing?: ComponentSizeEnum;
+  hotkey?: string;
+}) => {
+  return (
+    <Toolbar.Root>
+      <Toolbar
+        side={args.side}
+        sizing={args.sizing as TComponentSize}
+        defaultOpen={args.defaultOpen}
+        shortcut={args.shortcut}
+        hotkey={args.hotkey}
+      >
+        <Toolbar.Section showoncollapse={args.showoncollapse}>
+          <Toolbar.Item aria-label="test-item">item</Toolbar.Item>
+          <Toolbar.Item aria-label="test-item-2">item2</Toolbar.Item>
+        </Toolbar.Section>
+
+        <Toolbar.Trigger onClick={onClickCallback}>&hArr;</Toolbar.Trigger>
+      </Toolbar>
+    </Toolbar.Root>
+  );
+};
+
+expect.extend(toHaveNoViolations);
+describe("Toolbar", () => {
+  test("Renders without accessibility violation", async () => {
+    const { container } = render(<ToolbarDefault />);
+    const ComponentContainer = await axe(container);
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+  test("Renders with accessibility definition", async () => {
+    render(<ToolbarDefault />);
+    const Container = screen.getByRole("toolbar");
+    const Trigger = screen.getByRole("button");
+
+    expect(() => screen.getByText("item")).toThrow();
+
+    expect(Container).toBeDefined();
+    expect(Container.getAttribute("aria-label")).toBeDefined();
+    expect(Container.getAttribute("aria-controls")).toBeDefined();
+    expect(Container.getAttribute("aria-expanded")).toBe("false");
+    expect(Container.getAttribute("aria-orientation")).toBe("vertical");
+    expect(Container.getAttribute("data-side")).toBe("left");
+
+    expect(Trigger).toBeDefined();
+    expect(Trigger.getAttribute("id")).toBe(
+      Container.getAttribute("aria-controls")
+    );
+
+    fireEvent.click(Trigger);
+    await waitFor(() => {
+      const Item = screen.getByText("item");
+
+      expect(Item).toBeDefined();
+      expect(Item.getAttribute("tabIndex")).toBe("-1");
+      expect(Item.getAttribute("aria-hidden")).toBe("true");
+      expect(Item.getAttribute("data-expanded")).toBe("true");
+      expect(Item.getAttribute("aria-describedby")).toBeDefined();
+    });
+  });
+  test("Update the component state on click and fires the defined callback function", async () => {
+    render(<ToolbarDefault />);
+    const Trigger = screen.getByRole("button");
+
+    fireEvent.click(Trigger);
+    await waitFor(() => {
+      expect(onClickCallback).toHaveBeenCalled();
+      expect(onClickCallback).toHaveBeenCalledTimes(1);
+    });
+  });
+  test("Toggle the component when the trigger is clicked", async () => {
+    render(<ToolbarDefault />);
+    const Trigger = screen.getByRole("button");
+
+    expect(() => screen.getByText("item")).toThrow();
+    fireEvent.click(Trigger);
+    await waitFor(() => {
+      expect(screen.getByText("item")).toBeDefined();
+    });
+  });
+  test("Toggle the component when the children item is clicked if showoncollapse is defined", async () => {
+    render(<ToolbarDefault showoncollapse />);
+    const Item = screen.getByLabelText("test-item");
+    const Container = screen.getByRole("toolbar");
+
+    fireEvent.click(Item);
+    await waitFor(() => {
+      expect(screen.getByLabelText("test-item")).toBeDefined();
+      expect(Container.getAttribute("aria-expanded")).toBe("true");
+    });
+  });
+  test("Renders the children sections even when it's closed if showoncollapse is defined", async () => {
+    render(<ToolbarDefault showoncollapse />);
+    const Item = screen.getByLabelText("test-item");
+    const Container = screen.getByRole("toolbar");
+
+    fireEvent.click(Item);
+    await waitFor(() => {
+      expect(screen.getByLabelText("test-item")).toBeDefined();
+      expect(Container.getAttribute("aria-expanded")).toBe("true");
+    });
+  });
+  test("Renders the component opened if defaultOpen is defined", async () => {
+    render(<ToolbarDefault defaultOpen />);
+    expect(screen.getByText("item")).toBeDefined();
+  });
+  test("Toggle the component when the keyboard shortcut is pressed", async () => {
+    const { container } = render(
+      <ToolbarDefault defaultOpen shortcut hotkey="a" />
+    );
+    expect(screen.getByText("item")).toBeDefined();
+
+    fireEvent.keyDown(container, { key: "a", code: "KeyA", ctrlKey: true });
+    await waitFor(() => expect(() => screen.getByText("item")).toThrow());
+  });
+});

package/src/__tests__/Tooltip.test.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+
+import { test, vi, afterEach, describe, expect } from "vitest";
+import {
+  screen,
+  render,
+  cleanup,
+  waitFor,
+  fireEvent,
+} from "@testing-library/react";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+import { Tooltip } from "../";
+import { ComponentSizeEnum } from "../../../../types";
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+const TooltipDefault = (args: {
+  content: string;
+  delay?: number;
+  sizing?: ComponentSizeEnum;
+  raw?: boolean;
+}) => {
+  return (
+    <Tooltip content={args.content} delay={args.delay} raw={args.raw}>
+      <span>Hover me</span>
+    </Tooltip>
+  );
+};
+
+expect.extend(toHaveNoViolations);
+describe("Tooltip", () => {
+  test("Renders without accessibility violation", async () => {
+    const { container } = render(<TooltipDefault content="Test content" />);
+    const ComponentContainer = await axe(container);
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+
+  test("Renders tooltip content on hover", async () => {
+    render(<TooltipDefault content="Test content" />);
+    const tooltipTrigger = screen.getByText("Hover me");
+
+    fireEvent.mouseEnter(tooltipTrigger);
+
+    await waitFor(() => {
+      expect(screen.getByText("Test content")).toBeDefined();
+    });
+
+    fireEvent.mouseLeave(tooltipTrigger);
+
+    await waitFor(() => {
+      expect(() => screen.getByText("Test content")).toThrow();
+    });
+  });
+
+  test("Applies delay before showing tooltip", async () => {
+    render(<TooltipDefault content="Test content" delay={200} />);
+    const tooltipTrigger = screen.getByText("Hover me");
+
+    fireEvent.mouseEnter(tooltipTrigger);
+    expect(() => screen.getByText("Test content")).toThrow();
+
+    await waitFor(() => {
+      expect(screen.getByText("Test content")).toBeDefined();
+    });
+  });
+
+  test("Hide content on mouse leave", async () => {
+    render(<TooltipDefault content="Test content" />);
+    const tooltipTrigger = screen.getByText("Hover me");
+
+    fireEvent.mouseEnter(tooltipTrigger);
+
+    await waitFor(() => {
+      expect(screen.getByText("Test content")).toBeDefined();
+    });
+
+    fireEvent.mouseLeave(tooltipTrigger);
+
+    await waitFor(() => {
+      expect(() => screen.getByText("Test content")).toThrow();
+    });
+  });
+});