@usefui/components 1.5.3 → 1.7.0

package/src/__tests__/Tree.test.tsx

@@ -0,0 +1,275 @@
+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 { Tree } from "../../src/tree";
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+expect.extend(toHaveNoViolations);
+
+describe("Tree", () => {
+  test("Renders without accessibility violation", async () => {
+    const { container } = render(
+      <Tree.Root>
+        <Tree>
+          <Tree.Node nodeId="node-1">
+            <Tree.Trigger nodeId="node-1">Node 1</Tree.Trigger>
+            <Tree.Content nodeId="node-1" defaultOpen>
+              <Tree.Node level={1} nodeId="node-1-child">
+                <Tree.Trigger nodeId="node-1-child">Node 1 Child</Tree.Trigger>
+              </Tree.Node>
+            </Tree.Content>
+          </Tree.Node>
+        </Tree>
+      </Tree.Root>,
+    );
+
+    const ComponentContainer = await axe(container);
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+
+  //   test("Renders with accessibility definition", async () => {
+  //     render(
+  //       <Tree.Root>
+  //         <Tree>
+  //           <Tree.Node nodeId="node-1">
+  //             <Tree.Trigger nodeId="node-1">Node 1</Tree.Trigger>
+  //             <Tree.Content nodeId="node-1">
+  //               <Tree.Node level={1} nodeId="node-1-child">
+  //                 <Tree.Trigger nodeId="node-1-child">Node 1 Child</Tree.Trigger>
+  //               </Tree.Node>
+  //             </Tree.Content>
+  //           </Tree.Node>
+  //         </Tree>
+  //       </Tree.Root>,
+  //     );
+
+  //     const treeView = screen.getByRole("tree");
+  //     expect(treeView).toBeDefined();
+
+  //     const treeItems = screen.getAllByRole("treeitem");
+  //     expect(treeItems.length).toBe(1);
+
+  //     expect(() => screen.getByRole("group")).toThrow();
+
+  //     const trigger = screen.getByLabelText("node-1-action");
+  //     expect(trigger).toBeDefined();
+  //     expect(trigger.getAttribute("aria-expanded")).toBe("false");
+  //     expect(trigger.getAttribute("aria-selected")).toBe("false");
+  //     expect(trigger.getAttribute("data-state")).toBe("collapsed");
+
+  //     fireEvent.click(trigger);
+  //     await waitFor(() => {
+  //       const group = screen.getByRole("group");
+  //       expect(group).toBeDefined();
+  //       expect(group.getAttribute("aria-labelledby")).toBeDefined();
+  //       expect(group.getAttribute("id")).toBeDefined();
+  //       expect(group.getAttribute("data-nodeid")).toBe("node-1");
+
+  //       expect(trigger.getAttribute("aria-expanded")).toBe("true");
+  //       expect(trigger.getAttribute("aria-selected")).toBe("true");
+  //       expect(trigger.getAttribute("data-state")).toBe("expanded");
+
+  //       const childItems = screen.getAllByRole("treeitem");
+  //       expect(childItems.length).toBe(2);
+  //     });
+  //   });
+
+  test("Renders with correct aria-level on nested nodes", async () => {
+    render(
+      <Tree.Root>
+        <Tree>
+          <Tree.Node nodeId="root">
+            <Tree.Trigger nodeId="root">Root</Tree.Trigger>
+            <Tree.Content nodeId="root" defaultOpen>
+              <Tree.Node level={1} nodeId="child">
+                <Tree.Trigger nodeId="child">Child</Tree.Trigger>
+                <Tree.Content nodeId="child" defaultOpen>
+                  <Tree.Node level={2} nodeId="grandchild">
+                    <Tree.Trigger nodeId="grandchild">Grandchild</Tree.Trigger>
+                  </Tree.Node>
+                </Tree.Content>
+              </Tree.Node>
+            </Tree.Content>
+          </Tree.Node>
+        </Tree>
+      </Tree.Root>,
+    );
+
+    const treeItems = screen.getAllByRole("treeitem");
+    expect((treeItems[0] as HTMLElement).getAttribute("aria-level")).toBe("1");
+    expect((treeItems[1] as HTMLElement).getAttribute("aria-level")).toBe("2");
+    expect((treeItems[2] as HTMLElement).getAttribute("aria-level")).toBe("3");
+  });
+
+  //   test("Renders with defaultOpen and expands content on mount", async () => {
+  //     render(
+  //       <Tree.Root>
+  //         <Tree>
+  //           <Tree.Node nodeId="node-1">
+  //             <Tree.Trigger nodeId="node-1">Node 1</Tree.Trigger>
+  //             <Tree.Content nodeId="node-1" defaultOpen>
+  //               <Tree.Node level={1} nodeId="node-1-child">
+  //                 <Tree.Trigger nodeId="node-1-child">Node 1 Child</Tree.Trigger>
+  //               </Tree.Node>
+  //             </Tree.Content>
+  //           </Tree.Node>
+  //         </Tree>
+  //       </Tree.Root>,
+  //     );
+
+  //     await waitFor(() => {
+  //       expect(screen.getByRole("group")).toBeDefined();
+  //       expect(screen.getByText("Node 1 Child")).toBeDefined();
+
+  //       const trigger = screen.getByLabelText("node-1-action");
+  //       expect(trigger.getAttribute("aria-expanded")).toBe("true");
+  //       expect(trigger.getAttribute("data-state")).toBe("expanded");
+  //     });
+  //   });
+
+  test("Fires the defined callback and toggles content when trigger is clicked", async () => {
+    const onClickCallback = vi.fn();
+
+    render(
+      <Tree.Root>
+        <Tree>
+          <Tree.Node nodeId="node-1">
+            <Tree.Trigger
+              nodeId="node-1"
+              name="trigger-1"
+              onClick={onClickCallback}
+            >
+              Node 1
+            </Tree.Trigger>
+            <Tree.Content nodeId="node-1" defaultOpen>
+              <Tree.Node level={1} nodeId="node-1-child">
+                <Tree.Trigger nodeId="node-1-child">Node 1 Child</Tree.Trigger>
+              </Tree.Node>
+            </Tree.Content>
+          </Tree.Node>
+          <Tree.Node nodeId="node-2">
+            <Tree.Trigger nodeId="node-2" name="trigger-2">
+              Node 2
+            </Tree.Trigger>
+            <Tree.Content nodeId="node-2">
+              <Tree.Node level={1} nodeId="node-2-child">
+                <Tree.Trigger nodeId="node-2-child">Node 2 Child</Tree.Trigger>
+              </Tree.Node>
+            </Tree.Content>
+          </Tree.Node>
+        </Tree>
+      </Tree.Root>,
+    );
+
+    expect(screen.getByText("Node 1 Child")).toBeDefined();
+    expect(() => screen.getByText("Node 2 Child")).toThrow();
+
+    fireEvent.click(screen.getByLabelText("trigger-2-action"));
+    await waitFor(() => {
+      expect(screen.getByText("Node 2 Child")).toBeDefined();
+    });
+
+    fireEvent.click(screen.getByLabelText("trigger-1-action"));
+    await waitFor(() => {
+      expect(() => screen.getByText("Node 1 Child")).toThrow();
+      expect(onClickCallback).toHaveBeenCalledTimes(1);
+    });
+
+    fireEvent.click(screen.getByLabelText("trigger-1-action"));
+    await waitFor(() => {
+      expect(screen.getByText("Node 1 Child")).toBeDefined();
+      expect(onClickCallback).toHaveBeenCalledTimes(2);
+    });
+
+    fireEvent.click(screen.getByLabelText("trigger-1-action"));
+    await waitFor(() => {
+      expect(() => screen.getByText("Node 1 Child")).toThrow();
+    });
+  });
+
+  test("Fires onSelectionChange callback with selected node ids", async () => {
+    const onSelectionChange = vi.fn();
+
+    render(
+      <Tree.Root onSelectionChange={onSelectionChange}>
+        <Tree>
+          <Tree.Node nodeId="node-1">
+            <Tree.Trigger nodeId="node-1" name="trigger-1">
+              Node 1
+            </Tree.Trigger>
+          </Tree.Node>
+          <Tree.Node nodeId="node-2">
+            <Tree.Trigger nodeId="node-2" name="trigger-2">
+              Node 2
+            </Tree.Trigger>
+          </Tree.Node>
+        </Tree>
+      </Tree.Root>,
+    );
+
+    fireEvent.click(screen.getByLabelText("trigger-1-action"));
+    await waitFor(() => {
+      expect(onSelectionChange).toHaveBeenCalledTimes(1);
+      expect(onSelectionChange).toHaveBeenCalledWith(["node-1"]);
+    });
+
+    fireEvent.click(screen.getByLabelText("trigger-2-action"));
+    await waitFor(() => {
+      expect(onSelectionChange).toHaveBeenCalledTimes(2);
+      expect(onSelectionChange).toHaveBeenCalledWith(["node-1", "node-2"]);
+    });
+
+    fireEvent.click(screen.getByLabelText("trigger-1-action"));
+    await waitFor(() => {
+      expect(onSelectionChange).toHaveBeenCalledTimes(3);
+      expect(onSelectionChange).toHaveBeenCalledWith(["node-2"]);
+    });
+  });
+
+  test("Renders with defaultExpandedIds and expands matching nodes on mount", async () => {
+    render(
+      <Tree.Root defaultExpandedIds={["node-1", "node-2"]}>
+        <Tree>
+          <Tree.Node nodeId="node-1">
+            <Tree.Trigger nodeId="node-1">Node 1</Tree.Trigger>
+            <Tree.Content nodeId="node-1">
+              <Tree.Node level={1} nodeId="node-1-child">
+                <Tree.Trigger nodeId="node-1-child">Node 1 Child</Tree.Trigger>
+              </Tree.Node>
+            </Tree.Content>
+          </Tree.Node>
+          <Tree.Node nodeId="node-2">
+            <Tree.Trigger nodeId="node-2">Node 2</Tree.Trigger>
+            <Tree.Content nodeId="node-2">
+              <Tree.Node level={1} nodeId="node-2-child">
+                <Tree.Trigger nodeId="node-2-child">Node 2 Child</Tree.Trigger>
+              </Tree.Node>
+            </Tree.Content>
+          </Tree.Node>
+        </Tree>
+      </Tree.Root>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Node 1 Child")).toBeDefined();
+      expect(screen.getByText("Node 2 Child")).toBeDefined();
+
+      const groups = screen.getAllByRole("group");
+      expect(groups.length).toBe(2);
+    });
+  });
+});

package/src/accordion/Accordion.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Accordion } from "..";
+import { Accordion, Page } from "..";
 import { ComponentSizeEnum, ComponentVariantEnum } from "../../../../types";
 
 const meta = {
@@ -10,9 +10,11 @@ const meta = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="m-medium-30">
-        <Story />
-      </div>
+      <Page>
+        <Page.Content className="p-medium-30">
+          <Story />
+        </Page.Content>
+      </Page>
     ),
   ],
 } satisfies Meta<typeof Accordion>;

package/src/accordion/hooks/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, createContext, useContext } from "react";
 import { IReactChildren, IComponentAPI } from "../../../../../types";
 
@@ -11,7 +13,7 @@ export const useAccordion = () => useContext(AccordionContext);
 
 export const AccordionProvider = ({
   children,
-}: IReactChildren): JSX.Element => {
+}: IReactChildren): React.JSX.Element => {
   const context = useAccordionProvider();
 
   return (

package/src/accordion/index.tsx

@@ -16,8 +16,7 @@ export interface IAccordionComposition {
   Content: typeof AccordionContent;
 }
 export interface IAccordionProperties
-  extends IComponentSpacing,
-    React.ComponentProps<"div"> {}
+  extends IComponentSpacing, React.ComponentProps<"div"> {}
 export interface IAccordionTriggerProperties extends IButtonProperties {
   value: string;
 }

package/src/avatar/Avatar.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { Avatar } from "..";
+import { Avatar, Page, Tooltip } from "..";
 
 const meta = {
   title: "Components/Avatar",
@@ -8,9 +8,11 @@ const meta = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="m-medium-30">
-        <Story />
-      </div>
+      <Page>
+        <Page.Content className="p-medium-30">
+          <Story />
+        </Page.Content>
+      </Page>
     ),
   ],
 } satisfies Meta<typeof Avatar>;
@@ -31,6 +33,25 @@ export const Status: Story = {
     </div>
   ),
 };
+export const Badges: Story = {
+  render: ({ ...args }) => (
+    <div className="flex g-medium-30">
+      {["small", "medium", "large"].map((variant) => (
+        <Avatar
+          sizing={variant as "small"}
+          alt="foundation-logo"
+          src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
+        >
+          <Avatar.Badge
+            alt="foundation-logo"
+            src="https://www.untitledui.com/logos/images/Layers.jpg"
+          />
+        </Avatar>
+      ))}
+    </div>
+  ),
+};
+
 export const Sizes: Story = {
   render: ({ ...args }) => (
     <div className="flex g-medium-30">
@@ -40,22 +61,31 @@ export const Sizes: Story = {
     </div>
   ),
 };
+export const Shapes: Story = {
+  render: ({ ...args }) => (
+    <div className="flex g-medium-30">
+      <Avatar shape="square" status="online" {...args} />
+      <Avatar shape="smooth" status="online" {...args} />
+      <Avatar shape="round" status="online" {...args} />
+    </div>
+  ),
+};
 export const Variants: Story = {
   render: ({ ...args }) => (
     <div className="flex g-medium-30">
       <Avatar />
       <Avatar
         alt="foundation-logo"
-        src="https://avatars.githubusercontent.com/u/153380498?s=200&v=4"
+        src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
       />
       <Avatar>
-        <b>AZ</b>
+        <b className="fs-medium-10">AZ</b>
       </Avatar>
       <Avatar
         style={{ backgroundColor: "var(--color-purple)" }}
         status="online"
       >
-        <small>Acme</small>
+        <span className="fs-small-30">Acme</span>
       </Avatar>
     </div>
   ),

package/src/avatar/index.tsx

@@ -1,11 +1,13 @@
 "use client";
 
 import React from "react";
-import { AvatarWrapper, StatusWrapper } from "./styles";
+import { AvatarWrapper, BadgeWrapper, StatusWrapper } from "./styles";
 import {
   IComponentStyling,
   ComponentSizeEnum,
   IComponentSize,
+  ComponentShapeEnum,
+  IComponentShape,
 } from "../../../../types";
 
 export enum AvataStatusEnum {
@@ -14,13 +16,25 @@ export enum AvataStatusEnum {
   Busy = "busy",
   Offline = "offline",
 }
+export type AvatarStatusType = "online" | "away" | "busy" | "offline";
 export interface IAvatarProperties
-  extends IComponentStyling,
+  extends
+    IComponentStyling,
     IComponentSize,
+    IComponentShape,
     React.HTMLAttributes<HTMLDivElement> {
   src?: string;
   alt?: string;
-  status?: "online" | "away" | "busy" | "offline";
+  status?: AvatarStatusType;
+}
+export interface IAvatarBadgeProperties extends React.HTMLAttributes<HTMLDivElement> {
+  src?: string;
+  alt?: string;
+}
+
+export interface IAvatarComposition {
+  Status: typeof AvatarStatus;
+  Badge: typeof AvatarBadge;
 }
 
 /**
@@ -41,11 +55,12 @@ export interface IAvatarProperties
  * @param {ReactNode} props.children - The content to be rendered inside the avatar.
  * @returns {ReactElement} The Avatar component.
  */
-export const Avatar = (props: IAvatarProperties) => {
+const Avatar = (props: IAvatarProperties) => {
   const {
     raw,
     sizing = ComponentSizeEnum.Medium,
     status,
+    shape = ComponentShapeEnum.Round,
     src,
     alt,
     children,
@@ -58,10 +73,11 @@ export const Avatar = (props: IAvatarProperties) => {
       data-raw={Boolean(raw)}
       data-size={sizing}
       data-status={status}
+      data-shape={shape}
       aria-label={props["aria-label"] ?? `${sizeLabel}-user-avatar`}
       {...restProps}
     >
-      {!children && src && (
+      {src && (
         <img
           aria-label={`${sizeLabel}-user-avatar-image`}
           alt={alt ?? `${sizeLabel}-user-avatar-image`}
@@ -70,21 +86,76 @@ export const Avatar = (props: IAvatarProperties) => {
       )}
 
       {children}
-      {status && (
-        <StatusWrapper
-          role="img"
-          aria-label={`${sizing}-user-avatar-status`}
-          aria-labelledby="title desc"
-          data-status={status}
-          height="16"
-          width="16"
-        >
-          <title>{"Activity status"}</title>
-          <desc>{status}</desc>
-          <circle role="presentation" cx="8" cy="8" r="6" />
-        </StatusWrapper>
-      )}
+      {status && <Avatar.Status status={status} />}
     </AvatarWrapper>
   );
 };
 Avatar.displayName = "Avatar";
+
+/**
+ * Avatar Statuses are used to represents a user activity status on an interface.
+ *
+ * **Best practices:**
+ *
+ * - Use the appropriate status to match the context and the importance of the information.
+ *
+ * @param {string} props.status - The status of the user represented by the avatar.
+ * @returns {ReactElement} The Avatar Status component.
+ */
+const AvatarStatus = (props: {
+  status?: AvatarStatusType;
+}): React.ReactElement => {
+  const { status } = props;
+
+  return (
+    <StatusWrapper
+      role="img"
+      aria-label={`${status}-user-avatar-status`}
+      aria-labelledby="title desc"
+      data-status={status}
+      height="12"
+      width="12"
+      {...props}
+    >
+      <title>{"Activity status"}</title>
+      <desc>{status}</desc>
+      <circle role="presentation" cx="6" cy="6" r="4" />
+    </StatusWrapper>
+  );
+};
+AvatarStatus.displayName = "Avatar.Status";
+
+/**
+ * Avatar Badges are used to represents an entity or an information related to the primary subject of the avatar.
+ *
+ * **Best practices:**
+ *
+ * - Use the appropriate imgage to display the context and the importance of the information.
+ * - Always provide an `alt` attribute for accessibility when using an image.
+ *
+ * @param {IAvatarBadgeProperties} props - The props for the Avatar Badge component.
+ * @param {string} props.src - The source URL of the image to be displayed in the avatar badge.
+ * @param {string} props.alt - The alternative text for the image in the avatar badge.
+ * @returns {ReactElement} The Avatar Badge component.
+ */
+const AvatarBadge = (props: IAvatarBadgeProperties): React.ReactElement => {
+  const { src, alt, children } = props;
+  return (
+    <BadgeWrapper role="img" aria-label="user-avatar-badge-wrapper" {...props}>
+      {src && !children && (
+        <img
+          aria-label="user-avatar-badge"
+          alt={alt ?? "user-avatar-badge"}
+          src={src}
+        />
+      )}
+      {!src && children && children}
+    </BadgeWrapper>
+  );
+};
+AvatarBadge.displayName = "Avatar.Badge";
+
+Avatar.Status = AvatarStatus;
+Avatar.Badge = AvatarBadge;
+
+export { Avatar, AvatarStatus };

package/src/avatar/styles/index.ts

@@ -2,19 +2,19 @@ import styled, { css } from "styled-components";
 
 const AvatarSizesStyles = css`
   &[data-size="small"] {
+    width: var(--measurement-medium-70);
+    height: var(--measurement-medium-70);
+    min-width: var(--measurement-medium-70);
+    min-height: var(--measurement-medium-70);
+  }
+
+  &[data-size="medium"] {
     width: var(--measurement-large-10);
     height: var(--measurement-large-10);
     min-width: var(--measurement-large-10);
     min-height: var(--measurement-large-10);
   }
 
-  &[data-size="medium"] {
-    width: var(--measurement-medium-90);
-    height: var(--measurement-medium-90);
-    min-width: var(--measurement-medium-90);
-    min-height: var(--measurement-medium-90);
-  }
-
   &[data-size="large"] {
     width: var(--measurement-large-20);
     height: var(--measurement-large-20);
@@ -22,6 +22,26 @@ const AvatarSizesStyles = css`
     min-height: var(--measurement-large-20);
   }
 `;
+const AvatarShapesStyles = css`
+  &[data-shape="square"] {
+    border-radius: 0;
+    img {
+      border-radius: 0;
+    }
+  }
+  &[data-shape="smooth"] {
+    border-radius: var(--measurement-medium-30);
+    img {
+      border-radius: var(--measurement-medium-30);
+    }
+  }
+  &[data-shape="round"] {
+    border-radius: 100%;
+    img {
+      border-radius: 100%;
+    }
+  }
+`;
 const AvatarStatusesStyles = css`
   &[data-status="online"] {
     fill: var(--shade-green-10);
@@ -40,7 +60,7 @@ const AvatarStatusesStyles = css`
 
   &[data-status="offline"] {
     fill: var(--body-color);
-    stroke: var(--font-color-alpha-10);
+    stroke: var(--contrast-color);
   }
 `;
 
@@ -51,17 +71,18 @@ export const AvatarWrapper = styled.div`
     align-items: center;
     justify-content: center;
 
-    background-color: var(--body-color);
-    border-radius: 100%;
+    background-color: var(--font-color-alpha-10);
+    border: var(--measurement-small-10) solid var(--font-color-alpha-10);
 
     img {
       width: inherit;
       height: inherit;
       min-width: inherit;
       min-height: inherit;
-      border-radius: 100%;
+      border: var(--measurement-small-10) solid var(--font-color-alpha-10);
     }
 
+    ${AvatarShapesStyles}
     ${AvatarSizesStyles}
   }
 `;
@@ -71,9 +92,34 @@ export const StatusWrapper = styled.svg`
   );
 
   position: absolute;
-  stroke-width: var(--measurement-small-30);
+  stroke-width: var(--measurement-small-10);
   bottom: var(--status-position);
   right: var(--status-position);
 
   ${AvatarStatusesStyles}
 `;
+export const BadgeWrapper = styled.div`
+  --status-position: calc(
+    var(--measurement-medium-10) - (var(--measurement-medium-10) * 2)
+  );
+
+  position: absolute;
+
+  bottom: var(--status-position);
+  right: var(--status-position);
+
+  width: var(--measurement-medium-60);
+  height: var(--measurement-medium-60);
+
+  background-color: var(--font-color-alpha-10);
+  border-radius: 100%;
+
+  img {
+    width: inherit;
+    height: inherit;
+    min-width: inherit;
+    min-height: inherit;
+    border-radius: 100%;
+    border: var(--measurement-small-10) solid var(--font-color-alpha-10);
+  }
+`;