@usefui/components 1.5.1

package/src/dialog/index.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import React from "react";
+import { useDialog, DialogProvider } from "./hooks";
+import { useDisabledScroll } from "@usefui/hooks";
+import {
+  Overlay,
+  IOverlayProperties,
+  Button,
+  IButtonProperties,
+  ScrollArea,
+  IScrollAreaProperties,
+} from "..";
+import { DialogWrapper, Menu } from "./styles";
+import { applyDataState } from "../utils";
+import {
+  IComponentStyling,
+  ComponentSizeEnum,
+  IComponentSize,
+} from "../../../../types";
+
+export interface IDialogItemProperties
+  extends IComponentStyling,
+    IComponentSize,
+    IScrollAreaProperties,
+    React.ComponentProps<"dialog"> {
+  lock?: boolean;
+}
+
+/**
+ * Dialog are used displays a modal window to the user on top of the current layer.
+ *
+ * **Best practices:**
+ *
+ * - Ensure that the dialog is visible and accessible to all users, including those using assistive technologies.
+ * - Use keyboard shortcuts to provide an alternative way of interacting with the dialog.
+ * - Ensure that the dialog is responsive and adapts to different screen sizes and orientations.
+ *
+ * @param {IDialogItemProperties} props - The props for the Dialog component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component.
+ * @param {boolean} props.open - Whether the dialog is open or not.
+ * @param {ReactNode} props.children - The content to be rendered inside the dialog.
+ * @returns {ReactElement} The Dialog component.
+ */
+const Dialog = (props: IDialogItemProperties) => {
+  const {
+    raw,
+    sizing = ComponentSizeEnum.Medium,
+    open = false,
+    lock = true,
+    children,
+    ...restProps
+  } = props;
+  const { states, methods } = useDialog();
+  const { getDialogId, toggleDialog } = methods;
+
+  const triggerId = getDialogId && getDialogId("trigger");
+  const contentId = getDialogId && getDialogId("content");
+
+  React.useEffect(() => {
+    if (open && toggleDialog) toggleDialog();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (lock) useDisabledScroll(Boolean(states.open));
+
+  return (
+    <>
+      {states.open && (
+        <ScrollArea
+          as={DialogWrapper}
+          role="dialog"
+          tabIndex={-1}
+          id={String(contentId)}
+          open={Boolean(states.open)}
+          aria-labelledby={String(triggerId)}
+          data-state={applyDataState(Boolean(states.open))}
+          data-size={sizing}
+          data-raw={Boolean(raw)}
+          {...restProps}
+        >
+          {children}
+        </ScrollArea>
+      )}
+    </>
+  );
+};
+Dialog.displayName = "Dialog";
+
+const DialogRoot = ({ children }: React.ComponentProps<"div">) => {
+  return <DialogProvider>{children}</DialogProvider>;
+};
+DialogRoot.displayName = "Dialog.Root";
+
+const DialogOverlay = (props: IOverlayProperties) => {
+  const { closeOnInteract = false, onClick, ...restProps } = props;
+  const { states, methods } = useDialog();
+  const { toggleDialog } = methods;
+
+  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (closeOnInteract && toggleDialog) toggleDialog();
+    if (onClick) onClick(event);
+  };
+
+  return (
+    <Overlay
+      visible={Boolean(states.open)}
+      closeOnInteract={closeOnInteract}
+      onClick={handleClick}
+      {...restProps}
+    />
+  );
+};
+DialogOverlay.displayName = "Dialog.Overlay";
+
+/**
+ * Dialog.Trigger is used to trigger the render of the associated Dialog component.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive title for the trigger that accurately conveys the content of the associated Dialog.
+ * - 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 Dialog.Trigger component.
+ * @returns {ReactElement} The Dialog.Trigger component.
+ */
+const DialogTrigger = (props: IButtonProperties) => {
+  const { onClick, children, ...restProps } = props;
+  const { states, methods } = useDialog();
+  const { getDialogId, toggleDialog } = methods;
+
+  const triggerId = getDialogId && getDialogId("trigger");
+  const contentId = getDialogId && getDialogId("content");
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (toggleDialog) toggleDialog();
+    if (onClick) onClick(event);
+  };
+
+  return (
+    <Button
+      id={String(triggerId)}
+      onClick={handleClick}
+      aria-controls={String(contentId)}
+      aria-expanded={Boolean(states.open)}
+      data-state={applyDataState(Boolean(states.open))}
+      {...restProps}
+    >
+      {children}
+    </Button>
+  );
+};
+DialogTrigger.displayName = "Dialog.Trigger";
+
+const DialogMenu = (props: IDialogItemProperties) => {
+  const { raw, children, ...restProps } = props;
+
+  return (
+    <Menu data-raw={Boolean(raw)} {...restProps}>
+      {children}
+    </Menu>
+  );
+};
+DialogMenu.displayName = "Dialog.Menu";
+
+/**
+ * Dialog.Control is used to trigger action inside the associated Dialog component.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive title for the trigger that accurately conveys the content of the associated action.
+ * - 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 Dialog.Control component.
+ * @returns {ReactElement} The Dialog.Control component.
+ */
+const DialogControl = (props: IButtonProperties) => {
+  const { onClick, children, ...restProps } = props;
+  const { states, methods } = useDialog();
+  const { getDialogId, toggleDialog } = methods;
+
+  const innerControlId = getDialogId && getDialogId("inner-control");
+  const contentId = getDialogId && getDialogId("content");
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (toggleDialog) toggleDialog();
+    if (onClick) onClick(event);
+  };
+
+  return (
+    <Button
+      id={String(innerControlId)}
+      onClick={handleClick}
+      aria-controls={String(contentId)}
+      aria-expanded={Boolean(states.open)}
+      data-state={applyDataState(Boolean(states.open))}
+      {...restProps}
+    >
+      {children}
+    </Button>
+  );
+};
+DialogControl.displayName = "Dialog.Control";
+
+Dialog.Root = DialogRoot;
+Dialog.Trigger = DialogTrigger;
+Dialog.Control = DialogControl;
+Dialog.Menu = DialogMenu;
+Dialog.Overlay = DialogOverlay;
+
+export {
+  Dialog,
+  DialogRoot,
+  DialogTrigger,
+  DialogControl,
+  DialogMenu,
+  DialogOverlay,
+};

package/src/dialog/styles/index.ts

@@ -0,0 +1,72 @@
+import styled, { css } from "styled-components";
+
+const DialogDefaultStyles = css`
+  position: fixed;
+  top: 15dvh;
+  padding: var(--measurement-medium-60);
+  width: 100%;
+
+  border: var(--measurement-small-10) solid var(--font-color-alpha-10);
+  background-color: var(--body-color);
+  border-radius: var(--measurement-medium-30);
+
+  transition: all ease-in-out 0.2s;
+  z-index: var(--depth-default-100);
+`;
+const DialogSizeStyles = css`
+  --base-size: var(--measurement-medium-60);
+  --computed-size: calc(100% - (var(--base-size) * 2));
+  --max-height: 75dvh;
+
+  &[data-size="small"] {
+    max-width: calc(var(--measurement-large-90) * 1.33);
+    max-height: var(--max-height);
+  }
+  &[data-size="medium"] {
+    max-width: calc(var(--measurement-large-90) * 2.66);
+    max-height: var(--max-height);
+  }
+
+  &[data-size="large"] {
+    top: var(--base-size);
+    max-width: var(--computed-size);
+    height: var(--computed-size);
+    padding: var(--measurement-medium-80);
+  }
+`;
+
+export const Menu = styled.menu<any>`
+  margin: 0;
+  padding: 0;
+
+  &[data-raw="false"] {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--measurement-medium-30);
+  }
+`;
+export const DialogWrapper = styled.dialog<any>`
+  @keyframes slide-in {
+    0% {
+      opacity: 0;
+      transform: translateY(var(--measurement-medium-30));
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  border: none;
+  box-shadow: none;
+  z-index: 100;
+
+  &[data-raw="false"] {
+    ${DialogDefaultStyles}
+    ${DialogSizeStyles}
+
+    animation-duration: 0.2s;
+    animation-name: slide-in;
+    animation-fill-mode: backwards;
+  }
+`;

package/src/divider/index.ts

@@ -0,0 +1,10 @@
+"use client";
+
+import styled from "styled-components";
+
+export const Divider = styled.hr`
+  height: var(--measurement-small-10);
+  margin: var(--measurement-medium-30) 0;
+  background: var(--font-color-alpha-10);
+  border: none;
+`;

package/src/dropdown/Dropdown.stories.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { DropdownMenu } from "..";
+import { ComponentVariantEnum, ComponentSizeEnum } from "../../../../types";
+
+// Duplicated doc: The JSDoc content isn't rendering on Storybook.
+
+/**
+ * Dropdown are used to expand and collapse list of actions.
+ *
+ * **Best practices:**
+ *
+ * - Use semantic HTML elements to structure the dropdown menu content.
+ * - Ensure that the dropdown menu can be opened and closed using the keyboard.
+ * - Ensure that the dropdown menu is visibly focused when opened using the keyboard.
+ * - Ensure that the dropdown menu is dismissed when the user clicks outside of it or presses the Esc key.
+ *
+ */
+const meta = {
+  title: "Components/DropdownMenu",
+  component: DropdownMenu,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="m-medium-30">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DropdownMenu>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  args: {
+    raw: false,
+    container: "",
+    defaultOpen: false,
+    radio: false,
+    disabled: 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 }) => (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>🐻‍❄️</DropdownMenu.Trigger>
+      <DropdownMenu>
+        <DropdownMenu.Content>
+          {["🐻", "🐻‍❄️", "🦊", "🐱", "🐶"].map((item) => (
+            <DropdownMenu.Item key={item}>{item}</DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    </DropdownMenu.Root>
+  ),
+};
+export const DefaultOpen: Story = {
+  render: ({ ...args }) => (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>🐻‍❄️</DropdownMenu.Trigger>
+      <DropdownMenu>
+        <DropdownMenu.Content defaultOpen>
+          <DropdownMenu.Item>🐻🐻‍❄️🦊🐱🐶</DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    </DropdownMenu.Root>
+  ),
+};
+export const RadioItem: Story = {
+  render: ({ ...args }) => (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>🐻‍❄️</DropdownMenu.Trigger>
+      <DropdownMenu>
+        <DropdownMenu.Content>
+          <DropdownMenu.Item radio>🐻🐻‍❄️🦊🐱🐶</DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    </DropdownMenu.Root>
+  ),
+};

package/src/dropdown/hooks/index.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { IReactChildren, IComponentAPI } from "../../../../../types";
+
+const DEFAULT_API = {
+  id: "",
+  states: {},
+  methods: {},
+};
+const DEFAULT_POSITIONS = {
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+};
+const DEFAULT_DIMENSIONS = {
+  width: 0,
+  height: 0,
+};
+
+const DropdownMenuContext = React.createContext<IComponentAPI>(DEFAULT_API);
+export const useDropdownMenu = () => React.useContext(DropdownMenuContext);
+
+export const DropdownMenuProvider = ({
+  children,
+}: IReactChildren): JSX.Element => {
+  const context = useDropdownMenuProvider();
+
+  return (
+    <DropdownMenuContext.Provider value={context}>
+      {children}
+    </DropdownMenuContext.Provider>
+  );
+};
+
+function useDropdownMenuProvider(): IComponentAPI {
+  const [open, setOpen] = React.useState<boolean>(false);
+
+  const [contentProps, setContentProps] = React.useState({
+    ...DEFAULT_POSITIONS,
+    ...DEFAULT_DIMENSIONS,
+  });
+  const [triggerProps, setTriggerProps] = React.useState({
+    ...DEFAULT_POSITIONS,
+    ...DEFAULT_DIMENSIONS,
+  });
+
+  const triggerId = React.useId();
+  const dropdownId = React.useId();
+  const composedId = `${triggerId}|${dropdownId}`;
+
+  return {
+    id: composedId,
+    states: {
+      open,
+      contentProps,
+      triggerProps,
+    },
+    methods: {
+      toggleOpen: (): boolean | void => setOpen(!open),
+      setContentProps,
+      setTriggerProps,
+    },
+  };
+}