@usefui/components 1.5.1

package/src/scrollarea/Scrollarea.stories.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ScrollArea } from "..";
+
+// Duplicated doc: The JSDoc content isn't rendering on Storybook.
+
+/**
+ * Add native scroll functionality to custom components.
+ */
+const meta = {
+  title: "Components/ScrollArea",
+  component: ScrollArea,
+  tags: ["autodocs"],
+} satisfies Meta<typeof ScrollArea>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  args: {
+    scrollbar: false,
+  },
+  render: ({ ...args }) => {
+    return (
+      <ScrollArea
+        className="h-100 w-100 flex align-center justify-center p-large-10"
+        style={{ maxWidth: 1024, margin: "0 auto" }}
+        {...args}
+      >
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta autem
+        incidunt voluptatum dignissimos, aperiam nostrum, explicabo adipisci
+        ipsum magnam iste id accusamus, sed inventore ex eaque? Vitae iusto odit
+        temporibus. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+        Dicta autem incidunt voluptatum dignissimos, aperiam nostrum, explicabo
+        adipisci ipsum magnam iste id accusamus, sed inventore ex eaque? Vitae
+        iusto odit temporibus. Lorem ipsum dolor sit, amet consectetur
+        adipisicing elit. Dicta autem incidunt voluptatum dignissimos, aperiam
+        nostrum, explicabo adipisci ipsum magnam iste id accusamus, sed
+        inventore ex eaque? Vitae iusto odit temporibus. Lorem ipsum dolor sit,
+        amet consectetur adipisicing elit. Dicta autem incidunt voluptatum
+        dignissimos, aperiam nostrum, explicabo adipisci ipsum magnam iste id
+        accusamus, sed inventore ex eaque? Vitae iusto odit temporibus. Lorem
+        ipsum dolor sit, amet consectetur adipisicing elit. Dicta autem incidunt
+        voluptatum dignissimos, aperiam nostrum, explicabo adipisci ipsum magnam
+        iste id accusamus, sed inventore ex eaque? Vitae iusto odit temporibus.
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta autem
+        incidunt voluptatum dignissimos, aperiam nostrum, explicabo adipisci
+        ipsum magnam iste id accusamus, sed inventore ex eaque? Vitae iusto odit
+        temporibus. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+        Dicta autem incidunt voluptatum dignissimos, aperiam nostrum, explicabo
+        adipisci ipsum magnam iste id accusamus, sed inventore ex eaque? Vitae
+        iusto odit temporibus. Lorem ipsum dolor sit, amet consectetur
+        adipisicing elit. Dicta autem incidunt voluptatum dignissimos, aperiam
+        nostrum, explicabo adipisci ipsum magnam iste id accusamus, sed
+        inventore ex eaque? Vitae iusto odit temporibus.
+      </ScrollArea>
+    );
+  },
+};
+export const Scrollbar: Story = {
+  args: {
+    scrollbar: true,
+  },
+  render: ({ ...args }) => {
+    return (
+      <ScrollArea
+        className="h-100 w-100 flex align-center justify-center p-large-10"
+        style={{ maxWidth: 1024, margin: "0 auto" }}
+        {...args}
+      >
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta autem
+        incidunt voluptatum dignissimos, aperiam nostrum, explicabo adipisci
+        ipsum magnam iste id accusamus, sed inventore ex eaque? Vitae iusto odit
+        temporibus. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+        Dicta autem incidunt voluptatum dignissimos, aperiam nostrum, explicabo
+        adipisci ipsum magnam iste id accusamus, sed inventore ex eaque? Vitae
+        iusto odit temporibus. Lorem ipsum dolor sit, amet consectetur
+        adipisicing elit. Dicta autem incidunt voluptatum dignissimos, aperiam
+        nostrum, explicabo adipisci ipsum magnam iste id accusamus, sed
+        inventore ex eaque? Vitae iusto odit temporibus. Lorem ipsum dolor sit,
+        amet consectetur adipisicing elit. Dicta autem incidunt voluptatum
+        dignissimos, aperiam nostrum, explicabo adipisci ipsum magnam iste id
+        accusamus, sed inventore ex eaque? Vitae iusto odit temporibus. Lorem
+        ipsum dolor sit, amet consectetur adipisicing elit. Dicta autem incidunt
+        voluptatum dignissimos, aperiam nostrum, explicabo adipisci ipsum magnam
+        iste id accusamus, sed inventore ex eaque? Vitae iusto odit temporibus.
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta autem
+        incidunt voluptatum dignissimos, aperiam nostrum, explicabo adipisci
+        ipsum magnam iste id accusamus, sed inventore ex eaque? Vitae iusto odit
+        temporibus. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+        Dicta autem incidunt voluptatum dignissimos, aperiam nostrum, explicabo
+        adipisci ipsum magnam iste id accusamus, sed inventore ex eaque? Vitae
+        iusto odit temporibus. Lorem ipsum dolor sit, amet consectetur
+        adipisicing elit. Dicta autem incidunt voluptatum dignissimos, aperiam
+        nostrum, explicabo adipisci ipsum magnam iste id accusamus, sed
+        inventore ex eaque? Vitae iusto odit temporibus.
+      </ScrollArea>
+    );
+  },
+};

package/src/scrollarea/index.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import React from "react";
+import { ScrollAreaWrapper } from "./styles";
+
+export interface IScrollAreaProperties extends React.ComponentProps<any> {
+  scrollbar?: boolean;
+}
+
+/**
+ * Add native scroll functionality to custom components.
+ */
+export const ScrollArea = ({
+  scrollbar = false,
+  children,
+  ...restProps
+}: IScrollAreaProperties) => {
+  return (
+    <ScrollAreaWrapper
+      aria-hidden="true"
+      data-scrollbar={scrollbar}
+      {...restProps}
+    >
+      {children}
+    </ScrollAreaWrapper>
+  );
+};

package/src/scrollarea/styles/index.ts

@@ -0,0 +1,71 @@
+import styled, { css } from "styled-components";
+
+export const HiddenScrollbar = css`
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+  &::-moz-scrollbar {
+    display: none;
+  }
+`;
+
+interface ScrollContainerProps {
+  $height?: string;
+  $width?: string;
+  $thumbColor?: string;
+  $trackColor?: string;
+  $thumbHoverColor?: string;
+}
+
+export const CustomScrollbar = css<ScrollContainerProps>`
+  height: ${({ $height }) => $height || "100%"};
+  width: ${({ $width }) => $width || "100%"};
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  &::-webkit-scrollbar {
+    cursor: pointer;
+
+    width: var(--measurement-medium-10);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: ${({ $trackColor }) => $trackColor || "transparent"};
+    border-radius: var(--measurement-medium-30);
+    border: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${({ $thumbColor }) =>
+      $thumbColor || "var(--font-color-alpha-10)"};
+    border-radius: var(--measurement-medium-30);
+    transition: background-color 0.2s ease;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: ${({ $thumbHoverColor, $thumbColor }) =>
+      $thumbHoverColor || $thumbColor || "var(--font-color-alpha-20)"};
+  }
+
+  // Firefox
+  scrollbar-width: thin;
+  scrollbar-color: ${({ $thumbColor, $trackColor }) =>
+    `${$thumbColor || "var(--font-color-alpha-10)"} ${
+      $trackColor || "transparent"
+    }`};
+`;
+
+export const ScrollAreaWrapper = styled.div<any>`
+  overflow: scroll;
+
+  &[data-scrollbar="true"] {
+    ${CustomScrollbar}
+  }
+  &[data-scrollbar="false"] {
+    ${HiddenScrollbar}
+  }
+`;

package/src/sheet/Sheet.stories.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Sheet } from "..";
+import { ComponentSizeEnum, ComponentSideEnum } from "../../../../types";
+
+// Duplicated doc: The JSDoc content isn't rendering on Storybook.
+
+/**
+ * Sheets are component that provides additional information in a top layer.
+ *
+ * **Best practices:**
+ *
+ * - Use semantic HTML elements to structure the content of the sheet.
+ * - Ensure that the sheet is visible and accessible to all users, including those using assistive technologies.
+ * - Use keyboard shortcuts to provide an alternative way of interacting with the sheet.
+ * - Ensure that the sheet is responsive and adapts to different screen sizes and orientations.
+ *
+ */
+const meta = {
+  title: "Components/Sheet",
+  component: Sheet,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Sheet>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default = {
+  args: {
+    raw: false,
+    open: false,
+    lock: false,
+    overlay: false,
+    closeOnInteract: false,
+    shortcut: false,
+    sizing: "small",
+    side: "right",
+    hotkey: "k",
+    bindkey: null,
+  },
+  argTypes: {
+    side: {
+      options: [ComponentSideEnum.Right, ComponentSideEnum.Left],
+      control: { type: "radio" },
+    },
+    sizing: {
+      options: [
+        ComponentSizeEnum.Small,
+        ComponentSizeEnum.Medium,
+        ComponentSizeEnum.Large,
+      ],
+      control: { type: "radio" },
+    },
+  },
+  render: ({ ...args }) => (
+    <Sheet.Root>
+      <Sheet.Trigger>&hArr;</Sheet.Trigger>
+      <Sheet>
+        🐻‍❄️
+        <Sheet.Trigger>&hArr;</Sheet.Trigger>
+      </Sheet>
+    </Sheet.Root>
+  ),
+};
+export const DefaultOpen: Story = {
+  render: ({ ...args }) => (
+    <Sheet.Root>
+      <Sheet.Trigger>&hArr;</Sheet.Trigger>
+      <Sheet open lock={false}>
+        🐻‍❄️
+        <Sheet.Trigger>&hArr;</Sheet.Trigger>
+      </Sheet>
+    </Sheet.Root>
+  ),
+};
+export const Shortcut: Story = {
+  render: ({ ...args }) => (
+    <Sheet.Root>
+      <Sheet.Trigger>&hArr;</Sheet.Trigger>
+      <Sheet shortcut bindkey="ctrlKey" hotkey="t">
+        🐻‍❄️
+        <Sheet.Trigger>&hArr;</Sheet.Trigger>
+      </Sheet>
+    </Sheet.Root>
+  ),
+};

package/src/sheet/hooks/index.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { IReactChildren } from "../../../../../types";
+
+type MethodsType = React.Dispatch<React.SetStateAction<boolean>> | any;
+interface IContextProperties {
+  id: Record<string, string>;
+  states: Record<string, string | boolean>;
+  methods: Record<string, MethodsType>;
+}
+
+const SheetContext = React.createContext<IContextProperties>({
+  id: {},
+  states: {},
+  methods: {},
+});
+export const useSheet = () => React.useContext(SheetContext);
+
+export const SheetProvider = ({ children }: IReactChildren): JSX.Element => {
+  const context = useSheetProvider();
+
+  return (
+    <SheetContext.Provider value={context}>{children}</SheetContext.Provider>
+  );
+};
+
+function useSheetProvider(): IContextProperties {
+  const containerId = React.useId();
+  const triggerId = React.useId();
+  const controlId = React.useId();
+
+  const [open, setOpen] = React.useState<boolean>(false);
+
+  return {
+    id: {
+      containerId,
+      triggerId,
+      controlId,
+    },
+    states: {
+      open,
+    },
+    methods: {
+      setOpen,
+      toggle: () => setOpen(!open),
+    },
+  };
+}

package/src/sheet/index.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import React from "react";
+
+import { useKeyPress, useDisabledScroll } from "@usefui/hooks";
+import { SheetProvider, useSheet } from "./hooks";
+
+import { Button, Overlay } from "../";
+import { SheetWrapper } from "./styles";
+
+import { applyDataState } from "../utils";
+
+import { IButtonProperties } from "../button";
+import {
+  ComponentVariantEnum,
+  ComponentSizeEnum,
+  ComponentSideEnum,
+  IComponentStyling,
+  IComponentSize,
+  IComponentControlProperties,
+  IReactChildren,
+  KeyBindingEnum,
+} from "../../../../types";
+
+export interface ISheetProperties
+  extends IComponentStyling,
+    IComponentSize,
+    IComponentControlProperties,
+    React.ComponentProps<"dialog"> {
+  side?: "left" | "right";
+  lock?: boolean;
+  overlay?: boolean;
+  closeOnInteract?: boolean;
+  open?: boolean;
+}
+
+export interface ISheetComposition {
+  Root: typeof SheetRoot;
+  Trigger: typeof SheetTrigger;
+}
+
+const SheetRoot = ({ children }: IReactChildren) => {
+  return <SheetProvider>{children}</SheetProvider>;
+};
+SheetRoot.displayName = "Sheet.Root";
+
+/**
+ * Sheets are component that provides additional information in a top layer.
+ *
+ * **Best practices:**
+ *
+ * - Use semantic HTML elements to structure the content of the sheet.
+ * - Ensure that the sheet is visible and accessible to all users, including those using assistive technologies.
+ * - Use keyboard shortcuts to provide an alternative way of interacting with the sheet.
+ * - Ensure that the sheet is responsive and adapts to different screen sizes and orientations.
+ *
+ * @param {ISheetProperties} props - The props for the Sheet component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {string} props.shortcut - The key combination used as keyboard shortcuts to trigger the sheet.
+ * @param {string} props.hotkey - The key to use in the key combination for the keyboard shortcuts.
+ * @param {KeyBindingEnum} props.bindkey - The modifier key to use in the key combination.
+ * @param {TComponentSide} props.sizing - The size of the sheet.
+ * @param {ComponentSideEnum} props.side - The side of the sheet.
+ * @param {boolean} props.open - Whether the sheet should be open by default.
+ * @param {boolean} props.lock - Whether the sheet blocks the scroll once opened. True by default.
+ * @param {boolean} props.overlay - Whether the sheet has an overlay between the page and the sheet itself.
+ * @param {boolean} props.closeOnInteract - Whether the over should be closed if interacted with.
+ * @param {ReactNode} props.children - The content to be rendered inside the sheet.
+ * @returns {ReactElement} The Sheet component.
+ */
+const Sheet = (props: ISheetProperties) => {
+  const {
+    raw,
+    sizing = ComponentSizeEnum.Medium,
+    side = ComponentSideEnum.Right,
+    lock = true,
+    overlay = true,
+    closeOnInteract = true,
+    open,
+    shortcut,
+    bindkey = KeyBindingEnum.Ctrl,
+    hotkey,
+    children,
+    ...restProps
+  } = props;
+  const { id, states, methods } = useSheet();
+  const { toggle } = methods;
+  const shortcutControls = useKeyPress(String(hotkey), true, bindkey);
+
+  React.useEffect(() => {
+    if (open && toggle) return toggle();
+  }, [open]);
+
+  React.useEffect(() => {
+    if (shortcut && shortcutControls && toggle) {
+      return toggle();
+    }
+  }, [shortcutControls]);
+
+  useDisabledScroll(lock && Boolean(states.open));
+  return (
+    <React.Fragment>
+      {states.open && (
+        <React.Fragment>
+          <SheetWrapper
+            role="dialog"
+            tabIndex={-1}
+            id={String(id.containerId)}
+            aria-label={props["aria-label"] ?? `${id.containerId}-sheet`}
+            aria-labelledby={String(id.containerId)}
+            open={Boolean(states.open)}
+            data-expanded={Boolean(states.open)}
+            data-state={applyDataState(Boolean(states.open))}
+            data-size={sizing}
+            data-side={side}
+            data-raw={Boolean(raw)}
+            {...restProps}
+          >
+            {children}
+          </SheetWrapper>
+          {overlay && (
+            <Overlay
+              onClick={() => toggle && toggle(!states.open)}
+              visible={Boolean(states.open)}
+              closeOnInteract={closeOnInteract}
+              aria-label={
+                props["aria-label"]
+                  ? `${props["aria-label"]}-overlay`
+                  : `${id.containerId}-sheet-overlay`
+              }
+            />
+          )}
+        </React.Fragment>
+      )}
+    </React.Fragment>
+  );
+};
+Sheet.displayName = "Sheet";
+
+/**
+ * Sheet.Trigger are used to triggers the expansion and collapse of the associated Sheet component.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive title for the trigger that accurately conveys the content of the associated sheet 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 Sheet.Trigger component.
+ * @param {ReactNode} props.children - The content to be rendered inside the Sheet trigger.
+ * @returns {ReactElement} The Sheet.Trigger component.
+ */
+const SheetTrigger = (props: IButtonProperties) => {
+  const {
+    raw,
+    onClick,
+    variant = ComponentVariantEnum.Ghost,
+    sizing = ComponentSizeEnum.Small,
+    children,
+    ...restProps
+  } = props;
+  const { id, methods, states } = useSheet();
+  const { toggle } = methods;
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (onClick) onClick(event);
+    if (toggle) toggle(!states.open);
+  };
+
+  return (
+    <Button
+      id={id.triggerId}
+      aria-controls={String(id.containerId)}
+      data-state={applyDataState(Boolean(states.open))}
+      variant={variant}
+      sizing={sizing}
+      raw={Boolean(raw)}
+      onClick={handleClick}
+      {...restProps}
+    >
+      {children}
+    </Button>
+  );
+};
+SheetTrigger.displayName = "Sheet.Trigger";
+
+Sheet.Root = SheetRoot;
+Sheet.Trigger = SheetTrigger;
+
+export { Sheet, SheetRoot, SheetTrigger };

package/src/sheet/styles/index.ts

@@ -0,0 +1,69 @@
+import styled, { css } from "styled-components";
+
+const SheetStyles = css`
+  all: unset;
+  position: fixed;
+  background-color: var(--body-color);
+  border: var(--measurement-small-10) solid transparent;
+  padding: var(--measurement-medium-60);
+  height: 100%;
+  z-index: var(--depth-default-100);
+
+  @keyframes slide-right {
+    0% {
+      transform: translateX(calc(var(--measurement-large-90) * 2));
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+  @keyframes slide-left {
+    0% {
+      transform: translateX(calc(var(--measurement-large-90) * -2));
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  animation-delay: 0.2s;
+  animation-duration: 0.2s;
+  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+  animation-fill-mode: backwards;
+`;
+const SheetSizeStyles = css`
+  &[data-size="small"] {
+    width: var(--measurement-large-80);
+  }
+
+  &[data-size="medium"] {
+    width: var(--measurement-large-90);
+  }
+
+  &[data-size="large"] {
+    width: calc(var(--measurement-large-90) * 1.5);
+  }
+`;
+const SheetSideStyles = css`
+  top: 0;
+
+  &[data-side="right"] {
+    right: 0;
+    border-left-color: var(--font-color-alpha-10);
+    animation-name: slide-right;
+  }
+
+  &[data-side="left"] {
+    left: 0;
+    border-right-color: var(--font-color-alpha-10);
+    animation-name: slide-left;
+  }
+`;
+
+export const SheetWrapper = styled.dialog<any>`
+  &[data-raw="false"] {
+    ${SheetStyles}
+    ${SheetSideStyles}
+    ${SheetSizeStyles}
+  }
+`;

package/src/switch/Switch.stories.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Switch } from "..";
+import { ComponentSizeEnum, ComponentVariantEnum } from "../../../../types";
+
+// Duplicated doc: The JSDoc content isn't rendering on Storybook.
+
+/**
+ * Switch are toggle components that allows the user to turn a setting on or off.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive label for each switch.
+ * - The interaction must have predictable behavior.
+ */
+const meta = {
+  title: "Components/Switch",
+  component: Switch,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="m-medium-30">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Switch>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  args: {
+    raw: false,
+    defaultChecked: false,
+  },
+  argTypes: {
+    variant: {
+      options: [ComponentVariantEnum.Primary, ComponentVariantEnum.Ghost],
+      control: { type: "radio" },
+    },
+    sizing: {
+      options: [
+        ComponentSizeEnum.Small,
+        ComponentSizeEnum.Medium,
+        ComponentSizeEnum.Large,
+      ],
+      control: { type: "radio" },
+    },
+  },
+  render: ({ ...args }) => (
+    <Switch.Root>
+      <Switch>
+        <Switch.Thumb />
+      </Switch>
+    </Switch.Root>
+  ),
+};
+export const DefaultChecked: Story = {
+  render: ({ ...args }) => (
+    <Switch.Root>
+      <Switch defaultChecked>
+        <Switch.Thumb />
+      </Switch>
+    </Switch.Root>
+  ),
+};
+export const Sizes: Story = {
+  render: ({ ...args }) => (
+    <div className="flex g-medium-30">
+      {["large", "medium", "small"].map((item) => (
+        <Switch.Root key={item}>
+          <Switch sizing={item}>
+            <Switch.Thumb />
+          </Switch>
+        </Switch.Root>
+      ))}
+    </div>
+  ),
+};
+export const Variants: Story = {
+  render: ({ ...args }) => (
+    <div className="flex g-medium-30">
+      {["primary", "ghost"].map((item) => (
+        <Switch.Root key={item}>
+          <Switch name={item} variant={item}>
+            <Switch.Thumb />
+          </Switch>
+          <label htmlFor={item}>
+            <small>{item}</small>
+          </label>
+        </Switch.Root>
+      ))}
+    </div>
+  ),
+};