@usefui/components 1.5.1

package/src/checkbox/styles/index.ts

@@ -0,0 +1,139 @@
+import styled, { css } from "styled-components";
+
+const CheckboxDefaultStyles = css`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(var(--measurement-small-10));
+  transition: all ease-in-out 0.2s;
+`;
+const CheckboxVariantsStyles = css`
+  &[data-variant="primary"] {
+    background-color: var(--font-color-alpha-10);
+    border: var(--measurement-small-10) solid transparent;
+
+    &:hover,
+    &:focus {
+      border-color: var(--font-color-alpha-10);
+    }
+
+    &:active,
+    &[data-state="checked"] {
+      background-color: var(--font-color);
+    }
+
+    &[data-state="checked"] {
+      svg {
+        stroke: var(--body-color);
+      }
+    }
+  }
+
+  &[data-variant="border"] {
+    background-color: var(--body-color);
+    border: var(--measurement-small-10) solid var(--font-color-alpha-10);
+
+    &:hover,
+    &:focus,
+    &:active,
+    &[data-state="checked"] {
+      background-color: var(--font-color-alpha-10);
+      border-color: transparent;
+    }
+
+    &[data-state="checked"] {
+      svg {
+        stroke: var(--font-color);
+      }
+    }
+  }
+  &[data-variant="mono"] {
+    background-color: var(--font-color-alpha-10);
+    border: var(--measurement-small-10) solid transparent;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &[data-state="checked"] {
+      border-color: var(--font-color-alpha-10);
+    }
+
+    &[data-state="checked"] {
+      svg {
+        stroke: var(--font-color);
+      }
+    }
+  }
+  &[data-variant="ghost"] {
+    border: var(--measurement-small-10) solid transparent;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &[data-state="checked"] {
+      border-color: var(--font-color-alpha-10);
+
+      svg {
+        stroke: var(--font-color);
+      }
+    }
+  }
+`;
+const CheckboxSizeStyles = css`
+  &[data-size="small"] {
+    width: var(--measurement-medium-60);
+    height: var(--measurement-medium-60);
+    border-radius: var(--measurement-small-80);
+  }
+  &[data-size="medium"] {
+    width: var(--measurement-medium-70);
+    height: var(--measurement-medium-70);
+    border-radius: var(--measurement-medium-10);
+  }
+  &[data-size="large"] {
+    width: var(--measurement-large-10);
+    height: var(--measurement-large-10);
+    border-radius: var(--measurement-medium-20);
+  }
+`;
+
+export const CheckboxWrapper = styled.div`
+  cursor: pointer;
+
+  &[data-raw="false"] {
+    ${CheckboxDefaultStyles}
+    ${CheckboxVariantsStyles}
+    ${CheckboxSizeStyles}
+  }
+
+  &[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.6;
+
+    svg {
+      stroke-opacity: 0.6;
+    }
+  }
+`;
+export const NativeInput = styled.input<any>`
+  &[data-raw="false"] {
+    appearance: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+`;
+export const Indicator = styled.span<any>`
+  line-height: 0;
+  pointer-events: none;
+`;

package/src/collapsible/Collapsible.stories.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Collapsible } from "..";
+import { ComponentVariantEnum, ComponentSizeEnum } from "../../../../types";
+
+const meta = {
+  title: "Components/Collapsible",
+  component: Collapsible,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="m-medium-30">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Collapsible>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  args: {
+    raw: false,
+    defaultOpen: false,
+    showFirstChild: false,
+  },
+  argTypes: {
+    variant: {
+      options: [
+        ComponentVariantEnum.Primary,
+        ComponentVariantEnum.Secondary,
+        ComponentVariantEnum.Tertiary,
+        ComponentVariantEnum.Mono,
+        ComponentVariantEnum.Border,
+        ComponentVariantEnum.Ghost,
+      ],
+      control: { type: "radio" },
+    },
+    sizing: {
+      options: [
+        ComponentSizeEnum.Small,
+        ComponentSizeEnum.Medium,
+        ComponentSizeEnum.Large,
+      ],
+      control: { type: "radio" },
+    },
+  },
+  render: ({ ...args }) => (
+    <Collapsible.Root>
+      <Collapsible>
+        <Collapsible.Trigger>🐻‍❄️</Collapsible.Trigger>
+        <Collapsible.Content>🐻🐻‍❄️🦊🐱🐶</Collapsible.Content>
+      </Collapsible>
+    </Collapsible.Root>
+  ),
+};
+export const DefaultOpen: Story = {
+  render: ({ ...args }) => (
+    <Collapsible.Root>
+      <Collapsible>
+        <Collapsible.Trigger>🐻‍❄️</Collapsible.Trigger>
+        <Collapsible.Content defaultOpen>🐻🐻‍❄️🦊🐱🐶</Collapsible.Content>
+      </Collapsible>
+    </Collapsible.Root>
+  ),
+};
+export const ShowFirstChild: Story = {
+  render: ({ ...args }) => (
+    <Collapsible.Root>
+      <Collapsible>
+        <Collapsible.Trigger>🐻‍❄️</Collapsible.Trigger>
+        <Collapsible.Content showFirstChild>
+          {["🐻", "🐻‍❄️", "🦊", "🐱", "🐶"].map((item) => (
+            <p key={item}>{item}</p>
+          ))}
+        </Collapsible.Content>
+      </Collapsible>
+    </Collapsible.Root>
+  ),
+};
+export const Group: Story = {
+  render: ({ ...args }) => (
+    <div className="flex g-medium-30">
+      {["🐻", "🐻‍❄️", "🦊", "🐱", "🐶"].map((item) => (
+        <Collapsible.Root key={item}>
+          <Collapsible>
+            <Collapsible.Trigger>{item}</Collapsible.Trigger>
+            <Collapsible.Content>{item}</Collapsible.Content>
+          </Collapsible>
+        </Collapsible.Root>
+      ))}
+    </div>
+  ),
+};

package/src/collapsible/hooks/index.tsx

@@ -0,0 +1,50 @@
+import React, { useState, createContext, useContext } from "react";
+import { IReactChildren, IComponentAPI } from "../../../../../types";
+
+const defaultComponentAPI = {
+  id: "",
+  states: {},
+  methods: {},
+};
+const CollapsibleContext = createContext<IComponentAPI>(defaultComponentAPI);
+export const useCollapsible = () => useContext(CollapsibleContext);
+
+export const CollapsibleProvider = ({
+  children,
+}: IReactChildren): JSX.Element => {
+  const context = useCollapsibleProvider();
+
+  return (
+    <CollapsibleContext.Provider value={context}>
+      {children}
+    </CollapsibleContext.Provider>
+  );
+};
+
+function useCollapsibleProvider(): IComponentAPI {
+  const [expanded, setExpanded] = useState<boolean>(false);
+  const [defaultOpen, setDefaultOpen] = useState<boolean>(false);
+  const collapsibleId = React.useId();
+
+  const toggleCollapsible = () => {
+    setExpanded(!expanded);
+    setDefaultOpen(false);
+  };
+
+  const applyDefaultOpen = () => {
+    setExpanded(!expanded);
+    setDefaultOpen(true);
+  };
+
+  return {
+    id: collapsibleId,
+    states: {
+      expanded,
+      defaultOpen,
+    },
+    methods: {
+      toggleCollapsible: () => toggleCollapsible(),
+      applyDefaultOpen: () => applyDefaultOpen(),
+    },
+  };
+}

package/src/collapsible/index.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import React from "react";
+
+import { CollapsibleProvider, useCollapsible } from "./hooks";
+import { Button, IButtonProperties } from "..";
+import { applyDataState } from "../utils";
+import { IReactChildren, ComponentVariantEnum } from "../../../../types";
+
+export interface ICollapsibleComposition {
+  Root: typeof CollapsibleRoot;
+  Trigger: typeof CollapsibleTrigger;
+  Content: typeof CollapsibleContent;
+}
+export interface ICollapsibleProperties extends React.ComponentProps<"div"> {
+  defaultOpen?: boolean;
+  showFirstChild?: boolean;
+}
+
+/**
+ * Collapsible is a component that can be expanded or collapsed by its child trigger component.
+ *
+ * **Best practices:**
+ *
+ * - Use semantic HTML elements inside the collapsible content.
+ * - Ensure that the collapsible content is hidden from screen readers when it is collapsed.
+ * - Provide a clear and descriptive label for the trigger element that accurately conveys the content of the collapsible section.
+ *
+ * @returns {ReactElement} The Collapsible component.
+ */
+const Collapsible = (props: ICollapsibleProperties) => {
+  const { children, ...restProps } = props;
+  const collapsibleContext = useCollapsible();
+
+  return (
+    <div
+      data-state={applyDataState(Boolean(collapsibleContext.states.expanded))}
+      {...restProps}
+    >
+      {children}
+    </div>
+  );
+};
+Collapsible.displayName = "Collapsible";
+
+const CollapsibleRoot = ({ children }: IReactChildren) => {
+  return <CollapsibleProvider>{children}</CollapsibleProvider>;
+};
+CollapsibleRoot.displayName = "Collapsible.Root";
+
+/**
+ * Collapsible.Trigger is used to triggers the expansion and collapse of the associated Collapsible.Content component.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive title for the trigger that accurately conveys the content of the associated Collapsible section.
+ * - Ensure that the trigger can be operated using only the keyboard.
+ * - Ensure that the focus is properly managed when the trigger is activated.
+ *
+ * @param {IButtonProperties} props - The props for the Collapsible.Trigger component.
+ * @returns {ReactElement} The Collapsible.Trigger component.
+ */
+const CollapsibleTrigger = (props: IButtonProperties) => {
+  const { children, disabled, onClick, ...restProps } = props;
+  const { id, states, methods } = useCollapsible();
+  const { toggleCollapsible } = methods;
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (toggleCollapsible) toggleCollapsible();
+    if (onClick) onClick(event);
+  };
+
+  return (
+    <Button
+      disabled={disabled}
+      aria-controls={id}
+      data-state={applyDataState(Boolean(states.expanded))}
+      data-expanded={states.expanded}
+      onClick={handleClick}
+      variant={props.variant ?? ComponentVariantEnum.Ghost}
+      {...restProps}
+    >
+      {children}
+    </Button>
+  );
+};
+CollapsibleTrigger.displayName = "Collapsible.Trigger";
+
+/**
+ * Collapsible.Content is used to contains the content of the associated Collapsible.Trigger component.
+ *
+ * **Best practices:**
+ *
+ * - Ensure that the content is hidden when the associated Collapsible section is collapsed.
+ * - Ensure that the content is properly focused when the associated Collapsible section is expanded.
+ *
+ * @param {ICollapsibleProperties} props - The props for the Collapsible.Content component.components.
+ * @param {boolean} props.defaultOpen - The initial open state of the Collapsible content. Defaults to false.
+ * @param {boolean} props.showFirstChild - The props used to render the first child component whether the component is closed or not.
+ * @param {ReactNode} props.children - The content to be rendered inside the Collapsible.
+ * @returns {ReactElement} The Collapsible.Content component.
+ */
+const CollapsibleContent = (props: ICollapsibleProperties) => {
+  const { defaultOpen = false, showFirstChild, children, ...restProps } = props;
+  const { id, states, methods } = useCollapsible();
+  const { applyDefaultOpen } = methods;
+
+  const childArray = React.Children.toArray(children);
+  const displayChildren = states.expanded ?? states.defaultOpen;
+
+  const displayFirstChild =
+    showFirstChild && childArray.length > 1 && !states.expanded;
+
+  React.useEffect(() => {
+    if (defaultOpen && applyDefaultOpen) applyDefaultOpen();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div
+      id={id}
+      data-state={applyDataState(Boolean(states.expanded))}
+      role="region"
+      {...restProps}
+    >
+      {displayFirstChild && childArray[0]}
+      {displayChildren && children}
+    </div>
+  );
+};
+CollapsibleContent.displayName = "Collapsible.Content";
+
+Collapsible.Root = CollapsibleRoot;
+Collapsible.Trigger = CollapsibleTrigger;
+Collapsible.Content = CollapsibleContent;
+
+export { Collapsible, CollapsibleRoot, CollapsibleTrigger, CollapsibleContent };

package/src/dialog/Dialog.stories.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import styled from "styled-components";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Dialog } from "..";
+import { ComponentSizeEnum } from "../../../../types";
+
+const Wrapper = styled.div``;
+const meta = {
+  title: "Components/Dialog",
+  component: Dialog,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Dialog>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  args: {
+    closeOnInteract: false,
+    open: false,
+    raw: false,
+  },
+  argTypes: {
+    sizing: {
+      options: [
+        ComponentSizeEnum.Small,
+        ComponentSizeEnum.Medium,
+        ComponentSizeEnum.Large,
+      ],
+      control: { type: "radio" },
+    },
+  },
+  render: ({ ...args }) => (
+    <Dialog.Root>
+      <Dialog.Trigger>🐻‍❄️</Dialog.Trigger>
+      <Dialog>
+        🐻🐻‍❄️🦊🐱🐶
+        <Dialog.Menu>
+          <Dialog.Control>🐻</Dialog.Control>
+        </Dialog.Menu>
+      </Dialog>
+      <Dialog.Overlay />
+    </Dialog.Root>
+  ),
+};
+export const DefaultOpen = {
+  render: ({ ...args }) => (
+    <Dialog.Root>
+      <Dialog.Trigger>🐻‍❄️</Dialog.Trigger>
+
+      <Dialog open>
+        🐻🐻‍❄️🦊🐱🐶
+        <Dialog.Menu>
+          <Dialog.Control>🐻</Dialog.Control>
+        </Dialog.Menu>
+      </Dialog>
+      <Dialog.Overlay />
+    </Dialog.Root>
+  ),
+};
+export const NoOverlay = {
+  render: ({ ...args }) => (
+    <Dialog.Root>
+      <Dialog.Trigger>🐻‍❄️</Dialog.Trigger>
+      <Dialog open>
+        🐻🐻‍❄️🦊🐱🐶
+        <Dialog.Menu>
+          <Dialog.Control>🐻</Dialog.Control>
+        </Dialog.Menu>
+      </Dialog>
+    </Dialog.Root>
+  ),
+};

package/src/dialog/hooks/index.tsx

@@ -0,0 +1,35 @@
+import React, { useState, createContext, useContext } from "react";
+import { IReactChildren, IComponentAPI } from "../../../../../types";
+
+const defaultComponentAPI = {
+  id: "",
+  states: {},
+  methods: {},
+};
+const DialogContext = createContext<IComponentAPI>(defaultComponentAPI);
+export const useDialog = () => useContext(DialogContext);
+
+export const DialogProvider = ({ children }: IReactChildren): JSX.Element => {
+  const context = useDialogProvider();
+
+  return (
+    <DialogContext.Provider value={context}>{children}</DialogContext.Provider>
+  );
+};
+
+function useDialogProvider(): IComponentAPI {
+  const [open, setOpen] = useState<boolean>(false);
+  const dialogId = React.useId();
+
+  return {
+    id: dialogId,
+    states: {
+      open: open,
+    },
+    methods: {
+      toggleDialog: () => setOpen(!open),
+      getDialogId: (type: "trigger" | "dialog" | "inner-control"): string =>
+        `${dialogId}-${type}`,
+    },
+  };
+}