@usefui/components 1.5.1

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@usefui/components",
+  "version": "1.5.1",
+  "description": "Open Source React components library",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "keywords": [
+    "react",
+    "typescript",
+    "accessibility",
+    "ui",
+    "components",
+    "ui-components"
+  ],
+  "author": "Nicolas Nunes",
+  "license": "MIT",
+  "peerDependencies": {
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "@types/styled-components": "*",
+    "react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
+    "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0",
+    "styled-components": "^5.1.34"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@types/styled-components": "^5.1.34",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "styled-components": "^5.3.11",
+    "typescript": "^5.9.2",
+    "@usefui/core": "^1.3.3",
+    "@usefui/hooks": "^1.3.3",
+    "@usefui/tokens": "^1.5.2"
+  },
+  "scripts": {
+    "test": "vitest run --coverage --logHeapUsage",
+    "test:coverage": "open coverage/lcov-report/index.html",
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "lint": "tsc"
+  }
+}

package/src/__tests__/Accordion.test.tsx

@@ -0,0 +1,106 @@
+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 { Accordion } from "../../src/accordion";
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+expect.extend(toHaveNoViolations);
+describe("Accordion", () => {
+  test("Renders without accessibility violation", async () => {
+    const { container } = render(
+      <Accordion.Root>
+        <Accordion>
+          <Accordion.Trigger value="1">1</Accordion.Trigger>
+          <Accordion.Content value="1" defaultOpen>
+            2
+          </Accordion.Content>
+        </Accordion>
+      </Accordion.Root>
+    );
+
+    const ComponentContainer = await axe(container);
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+  test("Renders with accessibility definition", async () => {
+    render(
+      <Accordion.Root>
+        <Accordion>
+          <Accordion.Trigger value="1">1</Accordion.Trigger>
+          <Accordion.Content value="1">1</Accordion.Content>
+        </Accordion>
+      </Accordion.Root>
+    );
+    const Trigger = screen.getByLabelText("button-action");
+
+    expect(Trigger).toBeDefined();
+    expect(() => screen.getByRole("article")).toThrow();
+
+    fireEvent.click(Trigger);
+    await waitFor(() => {
+      const Content = screen.getByRole("article");
+      expect(Content).toBeDefined();
+      expect(Content.getAttribute("aria-expanded")).toBe("true");
+      expect(Content.getAttribute("data-value")).toBe("1");
+      expect(Content.getAttribute("aria-labelledby")).toBeDefined();
+      expect(Content.getAttribute("id")).toBeDefined();
+    });
+  });
+  test("Fires the defined callback function and toggle the content when the trigger is clicked", async () => {
+    const onClickCallback = vi.fn();
+    render(
+      <Accordion.Root>
+        <Accordion>
+          <Accordion.Trigger
+            onClick={onClickCallback}
+            value="1"
+            name="trigger-1"
+          >
+            Trigger 1
+          </Accordion.Trigger>
+          <Accordion.Trigger value="2" name="trigger-2">
+            Trigger 2
+          </Accordion.Trigger>
+          <Accordion.Content value="1" defaultOpen>
+            Content 1
+          </Accordion.Content>
+          <Accordion.Content value="2">Content 2</Accordion.Content>
+        </Accordion>
+      </Accordion.Root>
+    );
+
+    expect(screen.getByText("Content 1")).toBeDefined();
+
+    fireEvent.click(screen.getByLabelText("trigger-2-action"));
+    await waitFor(() => {
+      expect(() => screen.getByText("Content 1")).toThrow();
+      expect(screen.getByText("Content 2")).toBeDefined();
+    });
+
+    fireEvent.click(screen.getByLabelText("trigger-1-action"));
+    await waitFor(() => {
+      expect(() => screen.getByText("Content 2")).toThrow();
+      expect(screen.getByText("Content 1")).toBeDefined();
+      expect(onClickCallback).toHaveBeenCalledTimes(1);
+    });
+
+    fireEvent.click(screen.getByLabelText("trigger-1-action"));
+    await waitFor(() => {
+      expect(() => screen.getByText("Content 1")).toThrow();
+      expect(() => screen.getByText("Content 2")).toThrow();
+    });
+  });
+});

package/src/__tests__/Avatar.test.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+
+import { test, vi, afterEach, describe, expect } from "vitest";
+import { screen, render, cleanup } from "@testing-library/react";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+import { Avatar, AvataStatusEnum } from "../../src/avatar";
+import { ComponentSizeEnum, TComponentSize } from "../../../../types";
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+expect.extend(toHaveNoViolations);
+describe("Avatar", () => {
+  test("Renders without accessibility violation", async () => {
+    const { container } = render(
+      <Avatar
+        sizing={ComponentSizeEnum.Small}
+        status={AvataStatusEnum.Online}
+      />
+    );
+    const ComponentContainer = await axe(container);
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+  test("Renders with accessibility definition", async () => {
+    render(
+      <Avatar
+        sizing={ComponentSizeEnum.Small}
+        status={AvataStatusEnum.Online}
+      />
+    );
+
+    const avatarLabel = "small-user-avatar";
+    const AvatarWrapper = screen.getByLabelText(avatarLabel);
+    const AvatarStatus = screen.getByLabelText(`${avatarLabel}-status`);
+
+    expect(AvatarWrapper).toBeDefined();
+    expect(AvatarWrapper.getAttribute("data-size")).toBe("small");
+    expect(AvatarWrapper.getAttribute("data-status")).toBe("online");
+
+    expect(AvatarStatus).toBeDefined();
+    expect(AvatarStatus.getAttribute("role")).toBe("img");
+    expect(AvatarStatus.getAttribute("data-status")).toBe("online");
+  });
+  test("Renders with Image as background", async () => {
+    render(<Avatar src="http://www.bui/tests" />);
+
+    const avatarLabel = "medium-user-avatar";
+    const AvatarWrapper = screen.getByLabelText(avatarLabel);
+    const AvatarImage = screen.getByLabelText("medium-user-avatar-image");
+
+    expect(AvatarWrapper).toBeDefined();
+    expect(AvatarImage).toBeDefined();
+    expect(AvatarWrapper.getAttribute("data-size")).toBe("medium");
+  });
+  test("Renders variants without accessibility violation", async () => {
+    const SizeVariants = [
+      ComponentSizeEnum.Small,
+      ComponentSizeEnum.Medium,
+      ComponentSizeEnum.Large,
+    ];
+    const StatusVariants = [
+      AvataStatusEnum.Online,
+      AvataStatusEnum.Away,
+      AvataStatusEnum.Busy,
+      AvataStatusEnum.Offline,
+    ];
+
+    const { container } = render(
+      <React.Fragment>
+        {StatusVariants.map((variant, key) => (
+          <Avatar
+            key={variant}
+            status={variant}
+            sizing={
+              (SizeVariants[key] as TComponentSize) ?? ComponentSizeEnum.Small
+            }
+          />
+        ))}
+      </React.Fragment>
+    );
+
+    const ComponentContainer = await axe(container);
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+});

package/src/__tests__/Badge.test.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+
+import { test, vi, afterEach, describe, expect } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+import { Badge } from "../../src/badge";
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+expect.extend(toHaveNoViolations);
+const handleClick = vi.fn();
+
+describe("Badge", () => {
+  test("Renders without accessibility violation", async () => {
+    const { container } = render(
+      <Badge aria-label="test-badge" onClick={handleClick}>
+        Test
+      </Badge>
+    );
+    const ComponentContainer = await axe(container);
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+  test("Renders variants without accessibility violation", async () => {
+    const Variants = [
+      "primary",
+      "secondary",
+      "border",
+      "error",
+      "warning",
+      "success",
+      "meta",
+    ];
+    const Shapes = ["square", "smooth", "round"];
+
+    const { container } = render(
+      <React.Fragment>
+        {Variants.map((variant) => (
+          <Badge key={variant} variant={variant as any}>
+            {variant}
+          </Badge>
+        ))}
+        {Shapes.map((variant) => (
+          <Badge key={variant} variant={variant as any}>
+            {variant}
+          </Badge>
+        ))}
+      </React.Fragment>
+    );
+
+    const ComponentContainer = await axe(container);
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+});

package/src/__tests__/Button.test.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+
+import { test, vi, afterEach, describe, expect } from "vitest";
+import { screen, render, cleanup, fireEvent } from "@testing-library/react";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+import { Button } from "../../src/button";
+import { ComponentVariantEnum } from "../../../../types";
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+expect.extend(toHaveNoViolations);
+const handleClick = vi.fn();
+
+describe("Button", () => {
+  test("Renders with accessibility definition", async () => {
+    render(<Button onClick={handleClick}>Test</Button>);
+
+    expect(screen.getByRole("button").getAttribute("type")).toEqual("button");
+    expect(screen.getByRole("button").getAttribute("tabIndex")).toEqual("0");
+    expect(screen.getByRole("button").getAttribute("name")).toEqual("button");
+    expect(screen.getByRole("button").getAttribute("aria-disabled")).toEqual(
+      "false"
+    );
+    expect(screen.getByRole("button").getAttribute("aria-label")).toEqual(
+      "button-action"
+    );
+    expect(screen.getByRole("button").getAttribute("data-size")).toEqual(
+      "medium"
+    );
+    expect(screen.getByRole("button").getAttribute("data-raw")).toEqual(
+      "false"
+    );
+    expect(screen.getByRole("button").getAttribute("aria-description")).toEqual(
+      "button-action:button/disabled:false"
+    );
+  });
+  test("Renders variants without accessibility violation", async () => {
+    const ButtonsVariants = [
+      ComponentVariantEnum.Primary,
+      ComponentVariantEnum.Secondary,
+      ComponentVariantEnum.Tertiary,
+      ComponentVariantEnum.Ghost,
+    ];
+
+    const { container } = render(
+      <React.Fragment>
+        {ButtonsVariants.map((variant) => (
+          <Button
+            key={variant}
+            name={`test-styled-${variant}`}
+            variant={variant}
+          >
+            {variant}
+          </Button>
+        ))}
+      </React.Fragment>
+    );
+
+    const ComponentContainer = await axe(container);
+    expect(ComponentContainer).toHaveNoViolations();
+
+    ButtonsVariants.map((variant) => {
+      expect(
+        screen
+          .getByLabelText(`test-styled-${variant}-action`)
+          .getAttribute("data-variant")
+      ).toBe(variant);
+    });
+  });
+  test("Renders without accessibility violation", async () => {
+    const { container } = render(
+      <Button name="test" onClick={handleClick}>
+        Test
+      </Button>
+    );
+    const ComponentContainer = await axe(container);
+    const ButtonComponent = screen.getByRole("button");
+
+    expect(ComponentContainer).toHaveNoViolations();
+    fireEvent.click(ButtonComponent);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});

package/src/__tests__/Checkbox.test.tsx

@@ -0,0 +1,106 @@
+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 { Checkbox } from "../../src/checkbox";
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+const onClickCallback = vi.fn();
+const onChangeCallback = vi.fn();
+const CheckboxDefault = () => {
+  return (
+    <Checkbox.Root>
+      <Checkbox
+        checked={false}
+        onClick={onClickCallback}
+        onChange={onChangeCallback}
+        name="test"
+      >
+        <Checkbox.Indicator />
+      </Checkbox>
+    </Checkbox.Root>
+  );
+};
+
+expect.extend(toHaveNoViolations);
+describe("Checkbox", () => {
+  test("Renders without accessibility violation", async () => {
+    const { container } = render(<CheckboxDefault />);
+    const ComponentContainer = await axe(container);
+
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+  test("Renders with accessibility definition", () => {
+    render(<CheckboxDefault />);
+    const CheckboxComponent = screen.getByLabelText("test-native-checkbox");
+
+    expect(CheckboxComponent.getAttribute("type")).toBe("checkbox");
+    expect(CheckboxComponent.getAttribute("tabindex")).toBe("0");
+    expect(CheckboxComponent.getAttribute("value")).toBe("unchecked");
+    expect(CheckboxComponent.getAttribute("aria-checked")).toBe("false");
+    expect(CheckboxComponent.getAttribute("aria-disabled")).toBe("false");
+    expect(CheckboxComponent.getAttribute("aria-required")).toBe("false");
+    expect(CheckboxComponent.getAttribute("data-state")).toBe("unchecked");
+  });
+  test("Toggle checked state on click and fire callback function", async () => {
+    render(<CheckboxDefault />);
+    const CheckboxComponent = screen.getByLabelText("test-checkbox");
+    const CheckboxNative = screen.getByLabelText("test-native-checkbox");
+
+    expect(CheckboxComponent.getAttribute("data-state")).toBe("unchecked");
+
+    expect(CheckboxNative.getAttribute("value")).toBe("unchecked");
+    expect(CheckboxNative.getAttribute("aria-checked")).toBe("false");
+
+    fireEvent.click(CheckboxNative);
+    await waitFor(() => {
+      expect(onClickCallback).toHaveBeenCalled();
+      expect(screen.getByTitle("Checked")).toBeDefined();
+
+      expect(CheckboxComponent.getAttribute("data-state")).toBe("checked");
+      expect(CheckboxNative.getAttribute("value")).toBe("checked");
+      expect(CheckboxNative.getAttribute("aria-checked")).toBe("true");
+    });
+
+    fireEvent.click(CheckboxNative);
+    await waitFor(() => {
+      expect(onClickCallback).toHaveBeenCalled();
+      expect(CheckboxComponent.getAttribute("data-state")).toBe("unchecked");
+      expect(CheckboxNative.getAttribute("value")).toBe("unchecked");
+      expect(CheckboxNative.getAttribute("aria-checked")).toBe("false");
+    });
+  });
+  test("Renders as checked if defaultChecked is defined", async () => {
+    render(
+      <Checkbox.Root>
+        <Checkbox
+          name="test"
+          defaultChecked
+          onClick={onClickCallback}
+          onChange={onChangeCallback}
+        >
+          <Checkbox.Indicator />
+        </Checkbox>
+      </Checkbox.Root>
+    );
+    const CheckboxComponent = screen.getByLabelText("test-checkbox");
+    const CheckboxNative = screen.getByLabelText("test-native-checkbox");
+
+    expect(CheckboxComponent.getAttribute("data-state")).toBe("checked");
+    expect(CheckboxNative.getAttribute("value")).toBe("checked");
+    expect(CheckboxNative.getAttribute("aria-checked")).toBe("true");
+  });
+});

package/src/__tests__/Collapsible.test.tsx

@@ -0,0 +1,79 @@
+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 { Collapsible } from "../../src/collapsible";
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+const onClickCallback = vi.fn();
+const CollapsibleDefault = (args: {
+  defaultOpen?: boolean;
+  showFirstChild?: boolean;
+}) => {
+  return (
+    <Collapsible.Root>
+      <Collapsible>
+        <Collapsible.Trigger onClick={onClickCallback}>
+          Trigger
+        </Collapsible.Trigger>
+        <Collapsible.Content
+          defaultOpen={args.defaultOpen}
+          showFirstChild={args.showFirstChild}
+          aria-label="test-content"
+        >
+          <p key={1}>Item 1</p>
+          <p key={2}>Item 2</p>
+        </Collapsible.Content>
+      </Collapsible>
+    </Collapsible.Root>
+  );
+};
+
+expect.extend(toHaveNoViolations);
+describe("Collapsible", () => {
+  test("Renders without accessibility violation", async () => {
+    const { container } = render(<CollapsibleDefault />);
+    const ComponentContainer = await axe(container);
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+  test("Renders with accessibility definition", () => {
+    render(<CollapsibleDefault />);
+    const TriggerComponent = screen.getByRole("button");
+
+    expect(TriggerComponent.getAttribute("aria-disabled")).toBe("false");
+    expect(TriggerComponent.getAttribute("data-expanded")).toBe("false");
+    expect(TriggerComponent.getAttribute("data-state")).toBe("closed");
+  });
+  test("Fires the defined callback function and toggle the content when the trigger is clicked", async () => {
+    render(<CollapsibleDefault showFirstChild defaultOpen />);
+    const TriggerComponent = screen.getByRole("button");
+    const FirstChild = screen.queryByText("Item 1");
+    const ContentContainer = screen.getByLabelText("test-content");
+
+    expect(TriggerComponent).toBeDefined();
+    expect(FirstChild).toBeDefined();
+    expect(ContentContainer.getAttribute("data-state")).toBe("open");
+
+    fireEvent.click(TriggerComponent);
+    await waitFor(() => {
+      expect(onClickCallback).toHaveBeenCalled();
+
+      expect(FirstChild).toBeDefined();
+      expect(ContentContainer.getAttribute("data-state")).toBe("closed");
+      expect(screen.queryByText("Item 2")).toBe(null);
+    });
+  });
+});

package/src/__tests__/Dialog.test.tsx

@@ -0,0 +1,109 @@
+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 { Dialog } from "../../src/dialog";
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+const onClickCallback = vi.fn();
+const onClickCallbackInner = vi.fn();
+const onClickCallbackOverlay = vi.fn();
+const DialogDefault = (args: { open?: boolean; closeOnInteract?: boolean }) => {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger name="external" onClick={onClickCallback}>
+        Ext Trigger
+      </Dialog.Trigger>
+
+      <Dialog open={args.open} aria-label="test-dialog">
+        <h4>Dialog component</h4>
+        <Dialog.Menu>
+          <Dialog.Control name="inner" onClick={onClickCallbackInner}>
+            Close
+          </Dialog.Control>
+        </Dialog.Menu>
+      </Dialog>
+      <Dialog.Overlay
+        aria-label="overlay"
+        closeOnInteract={Boolean(args.closeOnInteract)}
+        onClick={onClickCallbackOverlay}
+      />
+    </Dialog.Root>
+  );
+};
+
+expect.extend(toHaveNoViolations);
+describe("Dialog", () => {
+  test("Renders without accessibility violation", async () => {
+    const { container } = render(<DialogDefault open />);
+    const ComponentContainer = await axe(container);
+
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+  test("Renders with accessibility definition", async () => {
+    render(<DialogDefault />);
+    const ExtTrigger = screen.getByLabelText("external-action");
+
+    expect(ExtTrigger.getAttribute("aria-expanded")).toBe("false");
+    expect(ExtTrigger.getAttribute("data-state")).toBe("closed");
+
+    fireEvent.click(ExtTrigger);
+    await waitFor(() => {
+      const Content = screen.getByLabelText("test-dialog");
+      const InnerTrigger = screen.getByLabelText("inner-action");
+
+      expect(ExtTrigger.getAttribute("aria-expanded")).toBe("true");
+      expect(ExtTrigger.getAttribute("data-state")).toBe("open");
+
+      expect(InnerTrigger.getAttribute("aria-expanded")).toBe("true");
+      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(<DialogDefault />);
+
+    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(<DialogDefault open />);
+    await waitFor(() =>
+      expect(screen.getByLabelText("test-dialog")).toBeDefined()
+    );
+  });
+  test("Removes the component from the DOM if the Overlay is clicked and closeOnInteract is defined", async () => {
+    render(<DialogDefault open closeOnInteract />);
+    await waitFor(() => {
+      const Overlay = screen.getByLabelText("overlay");
+
+      expect(Overlay).toBeDefined();
+      expect(Overlay.getAttribute("aria-hidden")).toBe("true");
+    });
+
+    fireEvent.click(screen.getByLabelText("overlay"));
+    expect(onClickCallbackOverlay).toHaveBeenCalled();
+    expect(() => screen.getByRole("region")).toThrow();
+    expect(() => screen.getByLabelText("overlay")).toThrow();
+  });
+});