pentatrion-design 0.0.1

package/src/components/dropdown-menu/DropdownMenuTrigger.tsx

@@ -0,0 +1,42 @@
+import { HTMLProps, cloneElement, forwardRef, isValidElement } from "react";
+import { useDropdownMenuContext } from ".";
+import { useMergeRefs } from "@floating-ui/react";
+import { Button } from "../button";
+
+interface Props extends HTMLProps<HTMLElement> {
+  asChild?: boolean;
+}
+
+const DropdownMenuTrigger = forwardRef<HTMLElement, Props>(
+  ({ children, asChild = false, ...props }, propRef) => {
+    const context = useDropdownMenuContext();
+    const childrenRef = (children as any).ref;
+
+    const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+
+    if (asChild && isValidElement(children)) {
+      return cloneElement(
+        children,
+        context.getReferenceProps({
+          ref,
+          ...props,
+          ...children.props,
+          "data-state": context.open ? "open" : "closed",
+        }),
+      );
+    }
+
+    return (
+      <Button
+        variant="outlined"
+        ref={ref}
+        data-state={context.open ? "open" : "closed"}
+        {...context.getReferenceProps(props)}
+      >
+        {children}
+      </Button>
+    );
+  },
+);
+
+export default DropdownMenuTrigger;

package/src/components/dropdown-menu/index.ts

@@ -0,0 +1,7 @@
+export { default as DropdownMenu } from "./DropdownMenu";
+export { default as DropdownMenuContent } from "./DropdownMenuContent";
+export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger";
+export { default as useDropdownMenu } from "./useDropdownMenu";
+export { default as useDropdownMenuContext, DropdownMenuContext } from "./useDropdownMenuContext";
+export { default as DropdownMenuItem } from "./DropdownMenuItem";
+export type * from "./interface";

package/src/components/dropdown-menu/interface.d.ts

@@ -0,0 +1,13 @@
+import { Placement } from "@floating-ui/react";
+import { ThemeColor } from "~/types.d";
+
+export interface DropdownMenuOptions {
+  initialOpen?: boolean;
+  placement?: Placement;
+  open?: boolean;
+  onOpen?: (open: boolean) => void;
+  color?: ThemeColor | "default";
+  modal?: boolean;
+}
+
+export { ThemeColor };

package/src/components/dropdown-menu/useDropdownMenu.tsx

@@ -0,0 +1,115 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import type { DropdownMenuOptions } from "./interface";
+import {
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useListNavigation,
+  useRole,
+  useTypeahead,
+} from "@floating-ui/react";
+
+const arrowWidth = 12;
+
+export default function useDropdownMenu({
+  initialOpen = false,
+  placement = "bottom",
+  open: controlledOpen,
+  onOpen: setControlledOpen,
+  color = "default",
+  modal = false,
+}: DropdownMenuOptions) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
+
+  const isUncontrolled = controlledOpen === null || controlledOpen === undefined;
+  const open = isUncontrolled ? uncontrolledOpen : controlledOpen;
+  const setOpen = isUncontrolled ? setUncontrolledOpen : setControlledOpen!;
+
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  const elementsRef = useRef<Array<HTMLElement | null>>([]);
+  const labelsRef = useRef<Array<string | null>>([]);
+
+  const offsetVal = 2 + arrowWidth / 2;
+
+  const data = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(offsetVal),
+      flip({
+        // crossAxis: placement.includes('-'),
+        // fallbackAxisSideDirection: "end",
+      }),
+      shift({ padding: 5 }),
+    ],
+  });
+
+  const { context } = data;
+
+  const click = useClick(context, {
+    // TODO verify if use case to disable it
+    // enabled: isUncontrolled,
+  });
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+  const listNav = useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex,
+    onNavigate: setActiveIndex,
+    loop: true,
+  });
+
+  const handleSelect = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+
+  function handleTypeaheadMatch(index: number | null) {
+    if (open) {
+      setActiveIndex(index);
+    } else {
+      handleSelect();
+    }
+  }
+
+  const typeahead = useTypeahead(context, {
+    listRef: labelsRef,
+    activeIndex,
+    onMatch: handleTypeaheadMatch,
+  });
+
+  const interactions = useInteractions([click, dismiss, role, listNav, typeahead]);
+
+  return useMemo(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data,
+      elementsRef,
+      labelsRef,
+      color,
+      modal,
+      activeIndex,
+      handleSelect,
+    }),
+    [
+      open,
+      setOpen,
+      interactions,
+      data,
+      color,
+      modal,
+      activeIndex,
+      // getItemProps,
+      handleSelect,
+    ],
+  );
+}

package/src/components/dropdown-menu/useDropdownMenuContext.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+import useDropdownMenu from "./useDropdownMenu";
+
+type ContextType = ReturnType<typeof useDropdownMenu> | null;
+
+export const DropdownMenuContext = createContext<ContextType>(null);
+
+export default function useDropdownMenuContext() {
+  const context = useContext(DropdownMenuContext);
+
+  if (context === null) {
+    throw new Error("DropdownMenu components must be wrapped in <DropdownMenu />");
+  }
+
+  return context;
+}

package/src/components/dropdown-menu-nested/DropdownMenuNested.stories.tsx

@@ -0,0 +1,33 @@
+import { DropdownMenuNested, MenuItem, MenuItemWithChildren } from ".";
+import { Button } from "../button";
+
+import { Meta } from "@storybook/react";
+
+const meta = {
+  title: "Components/DropdownMenuNested",
+  component: DropdownMenuNested,
+} satisfies Meta<typeof DropdownMenuNested>;
+export default meta;
+
+export const Basic = () => (
+  <DropdownMenuNested label="Edit" triggerComponent={Button} color="yellow">
+    <MenuItem label="Undo" onClick={() => console.log("Undo")} />
+    <MenuItem label="Redo" disabled />
+    <MenuItem label="Cut" />
+    <MenuItemWithChildren label="Copy as">
+      <MenuItem label="Text" />
+      <MenuItem label="Video" />
+      <MenuItemWithChildren label="Image">
+        <MenuItem label=".png" />
+        <MenuItem label=".jpg" />
+        <MenuItem label=".svg" />
+        <MenuItem label=".gif" />
+      </MenuItemWithChildren>
+      <MenuItem label="Audio" />
+    </MenuItemWithChildren>
+    <MenuItemWithChildren label="Share">
+      <MenuItem label="Mail" />
+      <MenuItem label="Instagram" />
+    </MenuItemWithChildren>
+  </DropdownMenuNested>
+);

package/src/components/dropdown-menu-nested/DropdownMenuNested.tsx

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import MenuItemWithChildren from "./MenuItemWithChildren";
+import { FloatingTree } from "@floating-ui/react";
+import { Button, type ButtonProps } from "../button";
+
+export interface Props extends ButtonProps {
+  label: string;
+  triggerComponent: typeof Button;
+}
+
+const DropdownMenuNested = forwardRef<HTMLButtonElement, Props>((props, ref) => {
+  return (
+    <FloatingTree>
+      <MenuItemWithChildren {...props} ref={ref} />
+    </FloatingTree>
+  );
+});
+
+export default DropdownMenuNested;

package/src/components/dropdown-menu-nested/MenuContext.ts

@@ -0,0 +1,15 @@
+import { Dispatch, HTMLProps, SetStateAction, createContext } from "react";
+
+export const MenuContext = createContext<{
+  getItemProps: (userProps?: HTMLProps<HTMLElement>) => Record<string, unknown>;
+  activeIndex: number | null;
+  setActiveIndex: Dispatch<SetStateAction<number | null>>;
+  setHasFocusInside: Dispatch<SetStateAction<boolean>>;
+  isOpen: boolean;
+}>({
+  getItemProps: () => ({}),
+  activeIndex: null,
+  setActiveIndex: () => {},
+  setHasFocusInside: () => {},
+  isOpen: false,
+});

package/src/components/dropdown-menu-nested/MenuItem.tsx

@@ -0,0 +1,43 @@
+import { useFloatingTree, useListItem, useMergeRefs } from "@floating-ui/react";
+import { ButtonHTMLAttributes, FocusEvent, MouseEvent, forwardRef, useContext } from "react";
+import { MenuContext } from "./MenuContext";
+
+interface Props {
+  label: string;
+  disabled?: boolean;
+}
+
+const MenuItem = forwardRef<HTMLButtonElement, Props & ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ label, disabled, ...props }, forwardedRef) => {
+    const menu = useContext(MenuContext);
+    const item = useListItem({ label: disabled ? null : label });
+    const tree = useFloatingTree();
+    const isActive = item.index === menu.activeIndex;
+
+    return (
+      <button
+        {...props}
+        ref={useMergeRefs([item.ref, forwardedRef])}
+        type="button"
+        role="menuitem"
+        className="option"
+        tabIndex={isActive ? 0 : -1}
+        disabled={disabled}
+        {...menu.getItemProps({
+          onClick(event: MouseEvent<HTMLButtonElement>) {
+            props.onClick?.(event);
+            tree?.events.emit("click");
+          },
+          onFocus(event: FocusEvent<HTMLButtonElement>) {
+            props.onFocus?.(event);
+            menu.setHasFocusInside(true);
+          },
+        })}
+      >
+        {label}
+      </button>
+    );
+  },
+);
+
+export default MenuItem;

package/src/components/dropdown-menu-nested/MenuItemWithChildren.tsx

@@ -0,0 +1,204 @@
+import {
+  FloatingFocusManager,
+  FloatingList,
+  FloatingNode,
+  FloatingPortal,
+  autoUpdate,
+  flip,
+  offset,
+  safePolygon,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useFloatingNodeId,
+  useFloatingParentNodeId,
+  useFloatingTree,
+  useHover,
+  useInteractions,
+  useListItem,
+  useListNavigation,
+  useMergeRefs,
+  useRole,
+  useTypeahead,
+} from "@floating-ui/react";
+import { FocusEvent, forwardRef, useContext, useEffect, useRef, useState } from "react";
+import { MenuContext } from "./MenuContext";
+import clsx from "clsx";
+import { Button, type ButtonProps } from "../button";
+import { Dialog } from "../dialog";
+
+export interface Props extends ButtonProps {
+  label?: string;
+  triggerComponent?: typeof Button;
+}
+
+export const MenuItemWithChildren = forwardRef<HTMLButtonElement, Props>(
+  ({ children, label, triggerComponent: TriggerComponent = Button, ...props }, forwardedRef) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [hasFocusInside, setHasFocusInside] = useState(false);
+    const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+    const elementsRef = useRef<Array<HTMLButtonElement | null>>([]);
+    const labelsRef = useRef<Array<string | null>>([]);
+    const parent = useContext(MenuContext);
+
+    const tree = useFloatingTree();
+    const nodeId = useFloatingNodeId();
+    const parentId = useFloatingParentNodeId();
+    const item = useListItem();
+
+    const isNested = parentId != null;
+
+    const { floatingStyles, refs, context } = useFloating<HTMLButtonElement>({
+      nodeId,
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      placement: isNested ? "right-start" : "bottom-start",
+      middleware: [
+        offset({ mainAxis: isNested ? -8 : 10, alignmentAxis: isNested ? 0 : 0 }),
+        flip(),
+        shift(),
+      ],
+      whileElementsMounted: autoUpdate,
+    });
+
+    const hover = useHover(context, {
+      enabled: isNested,
+      delay: { open: 75 },
+      handleClose: safePolygon({ blockPointerEvents: true }),
+    });
+    const click = useClick(context, {
+      event: "mousedown",
+      toggle: !isNested,
+      ignoreMouse: isNested,
+    });
+    const role = useRole(context, { role: "menu" });
+    const dismiss = useDismiss(context, { bubbles: true });
+    const listNavigation = useListNavigation(context, {
+      listRef: elementsRef,
+      activeIndex,
+      nested: isNested,
+      onNavigate: setActiveIndex,
+    });
+    const typeahead = useTypeahead(context, {
+      listRef: labelsRef,
+      onMatch: isOpen ? setActiveIndex : undefined,
+      activeIndex,
+    });
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+      hover,
+      click,
+      role,
+      dismiss,
+      listNavigation,
+      typeahead,
+    ]);
+
+    useEffect(() => {
+      if (!tree) return;
+
+      function handleTreeClick() {
+        setIsOpen(false);
+      }
+
+      function onSubMenuOpen(event: { nodeId: string; parentId: string }) {
+        // close sibling menu
+        if (event.nodeId !== nodeId && event.parentId === parentId) {
+          setIsOpen(false);
+        }
+      }
+
+      tree.events.on("click", handleTreeClick);
+      tree.events.on("menuopen", onSubMenuOpen);
+
+      return () => {
+        tree.events.off("click", handleTreeClick);
+        tree.events.off("menuopen", onSubMenuOpen);
+      };
+    }, [tree, nodeId, parentId]);
+
+    useEffect(() => {
+      if (isOpen && tree) {
+        tree.events.emit("menuopen", { parentId, nodeId });
+      }
+    }, [tree, isOpen, nodeId, parentId]);
+
+    const ref = useMergeRefs([refs.setReference, item.ref, forwardedRef]);
+
+    return (
+      <FloatingNode id={nodeId}>
+        {isNested ? (
+          <button
+            ref={ref}
+            tabIndex={parent.activeIndex === item.index ? 0 : -1}
+            role="menuitem"
+            data-open={isOpen ? "" : undefined}
+            data-nested=""
+            data-focus-inside={hasFocusInside ? "" : undefined}
+            {...getReferenceProps(
+              parent.getItemProps({
+                onFocus(event: FocusEvent<HTMLButtonElement>) {
+                  props.onFocus?.(event);
+                  setHasFocusInside(false);
+                  parent.setHasFocusInside(true);
+                },
+              }),
+            )}
+            className={clsx(isNested && "option")}
+          >
+            <span>{label}</span>
+            <span className="ml-auto">
+              <i className="fe-angle-right mr-0" aria-hidden></i>
+            </span>
+          </button>
+        ) : (
+          <TriggerComponent
+            ref={ref}
+            data-open={isOpen ? "" : undefined}
+            data-focus-inside={hasFocusInside ? "" : undefined}
+            {...props}
+            {...getReferenceProps(
+              parent.getItemProps({
+                onFocus(event: FocusEvent<HTMLButtonElement>) {
+                  props.onFocus?.(event);
+                  setHasFocusInside(false);
+                  parent.setHasFocusInside(true);
+                },
+              }),
+            )}
+            className={clsx(
+              isNested && "option",
+              !isNested && !TriggerComponent && "ll-dropdown-menu-trigger",
+            )}
+          >
+            {label}
+          </TriggerComponent>
+        )}
+
+        <MenuContext.Provider
+          value={{ activeIndex, setActiveIndex, getItemProps, setHasFocusInside, isOpen }}
+        >
+          {isOpen && (
+            <FloatingPortal>
+              <FloatingFocusManager
+                context={context}
+                modal={false}
+                initialFocus={isNested ? -1 : 0}
+                returnFocus={!isNested}
+              >
+                <FloatingList elementsRef={elementsRef} labelsRef={labelsRef}>
+                  <div ref={refs.setFloating} style={floatingStyles} className="outline-none">
+                    <Dialog {...getFloatingProps()}>{children}</Dialog>
+                  </div>
+                </FloatingList>
+              </FloatingFocusManager>
+            </FloatingPortal>
+          )}
+        </MenuContext.Provider>
+      </FloatingNode>
+    );
+  },
+);
+
+export default MenuItemWithChildren;

package/src/components/dropdown-menu-nested/index.ts

@@ -0,0 +1,3 @@
+export { default as DropdownMenuNested } from "./DropdownMenuNested";
+export { default as MenuItem } from "./MenuItem";
+export { default as MenuItemWithChildren } from "./MenuItemWithChildren";

package/src/components/flash/Flash.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Flash from "./Flash";
+
+const meta = {
+  title: "Components/Flash",
+  component: Flash,
+} satisfies Meta<typeof Flash>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playbook: Story = {
+  args: {
+    color: "yellow",
+    children:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta quod consequatur exercitationem delectus ad quibusdam ipsa officia consectetur laboriosam perspiciatis beatae incidunt sequi, velit sint aspernatur? Aliquid eum culpa cum.",
+    className: "",
+  },
+};
+
+const colors = ["yellow", "green", "blue", "orange", "red", "gray"] as const;
+
+export const Context = () => (
+  <div className="flex flex-col gap-2">
+    {colors.map((color) => (
+      <Flash key={color} color={color}>
+        There is a plant seed on its back right from the day this Pokémon is born. The seed slowly
+        grows larger. There is a plant seed on its back right from the day this Pokémon is born. The
+        seed slowly grows larger. There is a plant seed on its back right from the day this Pokémon
+        is born. The seed slowly grows larger.
+      </Flash>
+    ))}
+  </div>
+);

package/src/components/flash/Flash.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+import { ThemeColor } from "~/types.d";
+import clsx from "clsx";
+import { colorVariants } from "~/lib/tailwindVariants";
+
+interface Props {
+  color?: ThemeColor;
+  children?: ReactNode;
+  className?: string;
+}
+
+export default function Alert({ color = "yellow", children, className }: Props) {
+  return (
+    <div
+      className={clsx(
+        "p-2 shadow border-l-4 dark:shadow-dark",
+        colorVariants[color].border,
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}