@usefui/components 1.5.1

package/src/dropdown/index.tsx

@@ -0,0 +1,316 @@
+"use client";
+
+import React from "react";
+import { useClickOutside, useDisabledScroll } from "@usefui/hooks";
+import { DropdownMenuProvider, useDropdownMenu } from "./hooks";
+import { RootWrapper, ContentWrapper, ItemWrapper } from "./styles";
+import { Button, IButtonProperties } from "../button";
+import { applyDataState } from "../utils";
+import {
+  IReactChildren,
+  IComponentStyling,
+  IComponentSize,
+  ComponentSideEnum,
+} from "../../../../types";
+
+export interface IDropdownContentProperties
+  extends IComponentStyling,
+    IComponentSize,
+    React.ComponentPropsWithRef<"ul"> {
+  defaultOpen?: boolean;
+}
+export interface IDropdownItemProperties
+  extends IComponentStyling,
+    React.ComponentProps<"li"> {
+  radio?: boolean;
+  disabled?: boolean;
+  onClick?: (
+    event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>
+  ) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLLIElement>) => void;
+}
+
+export interface IDropdownComposition {
+  Root: typeof DropdownMenuRoot;
+  Trigger: typeof DropdownMenuTrigger;
+  Content: typeof DropdownMenuContent;
+  Item: typeof DropdownMenuItem;
+}
+
+/**
+ * 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.
+ *
+ * @param {React.ComponentProps<"div">} props - The props for the DropdownMenu component.
+ * @param {ReactNode} props.children - The content to be rendered inside the dropdown menu.
+ * @returns {ReactElement} The DropdownMenu component.
+ */
+const DropdownMenu = ({ children }: React.ComponentProps<"div">) => {
+  const DropdownContentRef = React.useRef(null);
+  const { states, methods } = useDropdownMenu();
+  const { toggleOpen } = methods;
+
+  const handleClickOutside = () => {
+    if (states.open && toggleOpen) toggleOpen();
+  };
+
+  useClickOutside(DropdownContentRef, handleClickOutside);
+  useDisabledScroll(Boolean(states.open));
+  return <RootWrapper ref={DropdownContentRef}>{children}</RootWrapper>;
+};
+DropdownMenu.displayName = "DropdownMenu";
+
+const DropdownMenuRoot = ({ children }: IReactChildren) => {
+  return <DropdownMenuProvider>{children}</DropdownMenuProvider>;
+};
+DropdownMenuRoot.displayName = "DropdownMenu.Root";
+
+/**
+ * DropdownMenu.Trigger is used to triggers the expansion and collapse of the associated DropdownMenu.Content component.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive title for the trigger that accurately conveys the content of the associated dropdown 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 DropdownMenu.Trigger component.components.
+ * @param {ReactNode} props.children - The content to be rendered inside the dropdown trigger.
+ * @returns {ReactElement} The DropdownMenu.Trigger component.
+ */
+const DropdownMenuTrigger = (props: IButtonProperties) => {
+  const triggerRef = React.useRef<HTMLButtonElement>(null);
+  const triggerRect = () => triggerRef.current?.getBoundingClientRect();
+
+  const { variant = "ghost", onClick, children, ...restProps } = props;
+  const { id, states, methods } = useDropdownMenu();
+  const { toggleOpen, setTriggerProps } = methods;
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (onClick) onClick(event);
+    if (toggleOpen) toggleOpen();
+    if (setTriggerProps)
+      setTriggerProps({
+        top: Number(triggerRect()?.top),
+        right: Number(triggerRect()?.right),
+        bottom: Number(triggerRect()?.bottom),
+        left: Number(triggerRect()?.left),
+        width: Number(triggerRect()?.width),
+        height: Number(triggerRect()?.height),
+      });
+  };
+
+  return (
+    <Button
+      ref={triggerRef}
+      id={id.split("|").at(0)}
+      onClick={handleClick}
+      aria-haspopup="menu"
+      data-state={applyDataState(Boolean(states.open))}
+      variant={variant}
+      {...restProps}
+    >
+      {children}
+    </Button>
+  );
+};
+DropdownMenuTrigger.displayName = "DropdownMenu.Trigger";
+
+/**
+ * DropdownMenu.Content is used to contains the content of the associated DropdownMenu.Trigger component.
+ *
+ * **Best practices:**
+ *
+ * - Ensure that the content is hidden when the associated dropdown menu is collapsed.
+ * - Ensure that the content is properly focused when the associated dropdown menu is expanded.
+ *
+ * @param {IDropdownContentProperties} props - The props for the DropdownMenu.Content 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.defaultOpen - The initial open state of the dropdown menu. Defaults to false.
+ * @param {ReactNode} props.children - The content to be rendered inside the dropdown menu.
+ * @returns {ReactElement} The DropdownMenu.Content component.
+ */
+const DropdownMenuContent = React.forwardRef<
+  HTMLUListElement,
+  IDropdownContentProperties
+>((props, _) => {
+  const { raw, sizing = "medium", defaultOpen, children, ...restProps } = props;
+  const { id, states, methods } = useDropdownMenu();
+  const { toggleOpen, setContentProps } = methods;
+
+  const mounted = React.useRef(false);
+  const contentRef = React.useRef<HTMLDivElement>(null);
+
+  const contentRect = () => contentRef?.current?.getBoundingClientRect();
+  const bodyRect = (): DOMRect | undefined => {
+    if (typeof document !== "undefined") {
+      return document?.body?.getBoundingClientRect();
+    }
+    return undefined;
+  };
+
+  const positions = {
+    btt: `calc((${states?.triggerProps?.top}px - ${states?.contentProps?.height}px) - (var(--measurement-medium-10) * 2))`,
+    ttb: `calc((${states?.triggerProps?.top}px + ${states?.triggerProps?.height}px) + var(--measurement-medium-10))`,
+    ltr: `${states?.triggerProps?.left}px`,
+    rtl: `calc(${states?.triggerProps?.left}px - (${states?.contentProps?.width}px - ${states?.triggerProps?.width}px))`,
+  };
+  const dimensions = {
+    body_width: bodyRect()?.width ?? 0,
+    body_height: bodyRect()?.height ?? 0,
+    content_width: states.contentProps.width,
+    content_height: states.contentProps.height,
+    content_left: states.contentProps.left,
+    content_bottom: states.contentProps.bottom,
+  };
+
+  const hasEnoughHorizontalSpace =
+    dimensions.body_width - dimensions.content_left >
+    dimensions.content_width * 1.1;
+
+  const hasEnoughVerticalSpace =
+    dimensions.body_height - dimensions.content_bottom >
+    dimensions.content_height - dimensions.content_height * 0.9;
+
+  React.useEffect(() => {
+    if (defaultOpen && toggleOpen) toggleOpen();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  React.useEffect(() => {
+    mounted.current = true;
+
+    setContentProps &&
+      setContentProps({
+        top: Number(contentRect()?.top),
+        right: Number(contentRect()?.right),
+        bottom: Number(contentRect()?.bottom),
+        left: Number(contentRect()?.left),
+        width: Number(contentRect()?.width),
+        height: Number(contentRect()?.height),
+      });
+
+    return () => {
+      mounted.current = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [states.open]);
+
+  return (
+    <>
+      {states.open && (
+        <ContentWrapper
+          ref={contentRef}
+          id={id.split("|").at(-1)}
+          role="menu"
+          tabIndex={-1}
+          aria-labelledby={id.split("|").at(0)}
+          data-state={applyDataState(Boolean(states.open))}
+          data-sizing={sizing}
+          data-side={
+            hasEnoughHorizontalSpace
+              ? ComponentSideEnum.Left
+              : ComponentSideEnum.Right
+          }
+          data-align={
+            hasEnoughHorizontalSpace
+              ? ComponentSideEnum.Left
+              : ComponentSideEnum.Right
+          }
+          data-raw={Boolean(raw)}
+          style={{
+            top: hasEnoughVerticalSpace ? positions.ttb : positions.btt,
+            left: hasEnoughHorizontalSpace ? positions.ltr : positions.rtl,
+          }}
+          {...restProps}
+        >
+          {children}
+        </ContentWrapper>
+      )}
+    </>
+  );
+});
+DropdownMenuContent.displayName = "DropdownMenu.Content";
+
+/**
+ * DropdownMenu.Item is used to handle action inside DropdownMenu.Content.
+ *
+ * @param {IDropdownItemProperties} props - The props for the DropdownMenu.Item component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {boolean} props.radio - Define whether the component is collapses the dropdown menu on click or not.
+ * @returns {ReactElement} The DropdownMenu.Content component.
+ */
+const DropdownMenuItem = (props: IDropdownItemProperties) => {
+  const {
+    raw,
+    onClick,
+    radio = false,
+    disabled,
+    children,
+    ...restProps
+  } = props;
+  const { methods } = useDropdownMenu();
+  const { toggleOpen } = methods;
+
+  const EventsHandler = {
+    toggle: () => {
+      if (!radio && toggleOpen) toggleOpen();
+    },
+    click: (
+      event:
+        | React.MouseEvent<HTMLLIElement>
+        | React.KeyboardEvent<HTMLLIElement>
+    ) => {
+      if (onClick) onClick(event);
+    },
+  };
+
+  const handleClick = (event: React.MouseEvent<HTMLLIElement>) => {
+    if (!disabled) {
+      EventsHandler.click(event);
+      EventsHandler.toggle();
+    }
+  };
+  const handleKeydown = (event: React.KeyboardEvent<HTMLLIElement>) => {
+    if (["Space", "Enter"].includes(event.code || event.key) && !disabled) {
+      EventsHandler.click(event);
+      EventsHandler.toggle();
+    }
+  };
+
+  return (
+    <ItemWrapper
+      role="menuitem"
+      tabIndex={0}
+      onClick={handleClick}
+      onKeyDown={handleKeydown}
+      aria-disabled={disabled}
+      data-orientation="vertical"
+      data-raw={Boolean(raw)}
+      {...restProps}
+    >
+      {children}
+    </ItemWrapper>
+  );
+};
+DropdownMenuItem.displayName = "DropdownMenu.Item";
+
+DropdownMenu.Root = DropdownMenuRoot;
+DropdownMenu.Trigger = DropdownMenuTrigger;
+DropdownMenu.Content = DropdownMenuContent;
+DropdownMenu.Item = DropdownMenuItem;
+
+export {
+  DropdownMenuRoot,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+};

package/src/dropdown/styles/index.ts

@@ -0,0 +1,90 @@
+import styled, { css, keyframes } from "styled-components";
+
+const FadeIn = keyframes`
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+const ContentWrapperSizes = css`
+  --small: var(--measurement-large-60);
+  --medium: var(--measurement-large-80);
+  --large: var(--measurement-large-90);
+
+  max-height: var(--measurement-large-90);
+
+  &[data-sizing="small"] {
+    width: var(--small);
+    max-width: var(--small);
+  }
+
+  &[data-sizing="medium"] {
+    width: var(--medium);
+    max-width: var(--medium);
+  }
+
+  &[data-sizing="large"] {
+    width: var(--large);
+    max-width: var(--large);
+  }
+`;
+
+export const RootWrapper = styled.div`
+  position: relative;
+`;
+export const ContentWrapper = styled.ul<any>`
+  --small: var(--measurement-large-60);
+  --medium: var(--measurement-large-80);
+  --large: var(--measurement-large-90);
+
+  &[data-raw="false"] {
+    position: fixed;
+    margin: 0;
+
+    padding: var(--measurement-medium-30);
+    margin: var(--measurement-medium-10) 0;
+
+    background-color: var(--body-color);
+    border: var(--measurement-small-10) solid var(--font-color-alpha-10);
+    border-radius: var(--measurement-medium-30);
+
+    z-index: var(--depth-default-100);
+    animation-duration: 0.2s;
+    animation-name: ${FadeIn};
+    animation-fill-mode: backwards;
+
+    ${ContentWrapperSizes}
+  }
+`;
+
+export const ItemWrapper = styled.li<any>`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  user-select: none;
+
+  &[data-raw="false"] {
+    font-size: var(--fontsize-small-80);
+    padding: var(--measurement-medium-30);
+    border-radius: var(--measurement-medium-20);
+    text-align: left;
+    color: var(--font-color-alpha-60);
+    outline: none;
+    transition: all ease-in-out 0.2s;
+    cursor: pointer;
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--font-color);
+      background-color: var(--font-color-alpha-10);
+    }
+  }
+
+  &[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+`;

package/src/field/Field.stories.tsx

@@ -0,0 +1,146 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Field } from "..";
+import { ComponentVariantEnum, ComponentSizeEnum } from "../../../../types";
+
+const meta = {
+  title: "Components/Field",
+  component: Field,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="m-medium-30">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Field>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  args: {
+    raw: false,
+    optional: false,
+    hint: "",
+    error: "",
+  },
+  argTypes: {
+    variant: {
+      options: [
+        ComponentVariantEnum.Primary,
+        ComponentVariantEnum.Secondary,
+        ComponentVariantEnum.Ghost,
+      ],
+      control: { type: "radio" },
+    },
+    sizing: {
+      options: [
+        ComponentSizeEnum.Small,
+        ComponentSizeEnum.Medium,
+        ComponentSizeEnum.Large,
+      ],
+      control: { type: "radio" },
+    },
+  },
+  render: ({ ...args }) => {
+    return (
+      <Field.Root>
+        <Field />
+      </Field.Root>
+    );
+  },
+};
+export const Label = {
+  render: ({ ...args }) => {
+    return (
+      <Field.Root>
+        <Field.Wrapper>
+          <Field.Label>Label</Field.Label>
+          <Field />
+        </Field.Wrapper>
+      </Field.Root>
+    );
+  },
+};
+export const Description = {
+  render: ({ ...args }) => {
+    return (
+      <Field.Root>
+        <Field />
+        <Field.Meta>Meta</Field.Meta>
+      </Field.Root>
+    );
+  },
+};
+export const Hint = {
+  render: ({ ...args }) => {
+    return (
+      <Field.Root>
+        <Field hint="hint" />
+      </Field.Root>
+    );
+  },
+};
+export const Error = {
+  render: ({ ...args }) => {
+    return (
+      <Field.Root>
+        <Field error="error" />
+      </Field.Root>
+    );
+  },
+};
+export const Composed = {
+  render: ({ ...args }) => {
+    return (
+      <Field.Root>
+        <Field.Wrapper>
+          <Field.Label>Label</Field.Label>
+          <Field hint="hint" />
+        </Field.Wrapper>
+        <Field.Meta>Meta</Field.Meta>
+      </Field.Root>
+    );
+  },
+};
+export const ComposedError = {
+  render: ({ ...args }) => {
+    return (
+      <Field.Root>
+        <Field.Wrapper>
+          <Field.Label>Label</Field.Label>
+          <Field error="error" hint="hint" />
+        </Field.Wrapper>
+        <Field.Meta>Meta</Field.Meta>
+      </Field.Root>
+    );
+  },
+};
+export const Sizes = {
+  render: ({ ...args }) => {
+    return (
+      <div className="flex g-medium-30">
+        {["large", "medium", "small"].map((item) => (
+          <Field.Root key={item}>
+            <Field placeholder={item} sizing={item} />
+          </Field.Root>
+        ))}
+      </div>
+    );
+  },
+};
+export const Variants = {
+  render: ({ ...args }) => {
+    return (
+      <div className="flex g-medium-30">
+        {["primary", "secondary", "ghost"].map((item) => (
+          <Field.Root key={item}>
+            <Field placeholder={item} variant={item} />
+          </Field.Root>
+        ))}
+      </div>
+    );
+  },
+};

package/src/field/hooks/index.tsx

@@ -0,0 +1,28 @@
+import React, { createContext, useContext } from "react";
+import { IReactChildren, IComponentAPI } from "../../../../../types";
+
+const defaultComponentAPI = {
+  id: "",
+  states: {},
+  methods: {},
+};
+const FieldContext = createContext<IComponentAPI>(defaultComponentAPI);
+export const useField = () => useContext(FieldContext);
+
+export const FieldProvider = ({ children }: IReactChildren): JSX.Element => {
+  const context = useFieldProvider();
+
+  return (
+    <FieldContext.Provider value={context}>{children}</FieldContext.Provider>
+  );
+};
+
+function useFieldProvider(): IComponentAPI {
+  const fieldId = React.useId();
+
+  return {
+    id: fieldId,
+    states: {},
+    methods: {},
+  };
+}