pentatrion-design 0.0.1

package/src/components/context-menu/ContextMenu.tsx

@@ -0,0 +1,175 @@
+import {
+  Children,
+  ComponentPropsWithRef,
+  ReactElement,
+  cloneElement,
+  isValidElement,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import {
+  FloatingFocusManager,
+  FloatingPortal,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  size,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useListNavigation,
+  useRole,
+  useTypeahead,
+} from "@floating-ui/react";
+
+import { ContextMenuItemProps } from "./ContextMenuItem";
+import { Dialog } from "../dialog";
+import { useEventCallback, useRefDebounce } from "~/hooks";
+
+interface Props extends ComponentPropsWithRef<"div"> {
+  children: ReactElement[] | ReactElement;
+  eventName?: "contextmenu" | "maplibre-contextmenu";
+}
+export default function ContextMenu({ children, style, eventName = "contextmenu" }: Props) {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const isOpenDebounceRef = useRefDebounce(isOpen, 500);
+  const contextEvent = useRef<MouseEvent | CustomEvent | null>(null);
+  const listItemsRef = useRef<(HTMLButtonElement | null)[]>([]);
+  const listContentRef = useRef(
+    Children.map(children, (child) =>
+      isValidElement<ContextMenuItemProps>(child) ? child.props.label : null,
+    ) as (string | null)[],
+  );
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    middleware: [
+      offset({ mainAxis: 5, alignmentAxis: 4 }),
+      flip(),
+      size({
+        apply({ elements, availableHeight }) {
+          const firstChild = elements.floating.firstElementChild as HTMLElement;
+          if (firstChild) {
+            firstChild.style.maxHeight = `${Math.min(availableHeight, 300)}px`;
+          }
+        },
+        padding: 10,
+      }),
+      shift({ padding: 10 }),
+    ],
+    /**
+     * it is better to be less demanding on small screen sizes to see the content displayed correctly
+     */
+    placement: window.matchMedia("(min-width: 700px)").matches ? "right-start" : undefined,
+    strategy: "fixed",
+    whileElementsMounted: autoUpdate,
+  });
+
+  const role = useRole(context, { role: "menu" });
+  const dismiss = useDismiss(context);
+
+  const listNavigation = useListNavigation(context, {
+    listRef: listItemsRef,
+    onNavigate: setActiveIndex,
+    activeIndex,
+  });
+  const typeahead = useTypeahead(context, {
+    enabled: isOpen,
+    listRef: listContentRef,
+    onMatch: setActiveIndex,
+    activeIndex,
+  });
+
+  const { getFloatingProps, getItemProps } = useInteractions([
+    role,
+    dismiss,
+    listNavigation,
+    typeahead,
+  ]);
+
+  const onContextMenuStable = useEventCallback(function onContextMenu(e: MouseEvent | CustomEvent) {
+    /**
+     * if the context menu has just been closed we probably do not want a click to immediately
+     * reopen a new context menu
+     */
+    if (isOpenDebounceRef.current) {
+      return;
+    }
+    e.preventDefault();
+
+    const originalEvent = e instanceof MouseEvent ? e : (e.detail.originalEvent as MouseEvent);
+    contextEvent.current = e;
+
+    refs.setPositionReference({
+      getBoundingClientRect() {
+        return {
+          width: 0,
+          height: 0,
+          x: originalEvent.clientX,
+          y: originalEvent.clientY,
+          top: originalEvent.clientY,
+          right: originalEvent.clientX,
+          bottom: originalEvent.clientY,
+          left: originalEvent.clientX,
+        };
+      },
+    });
+
+    setIsOpen(true);
+    isOpenDebounceRef.current = true;
+  });
+
+  useEffect(() => {
+    document.addEventListener(eventName, onContextMenuStable);
+    return () => {
+      document.removeEventListener(eventName, onContextMenuStable);
+    };
+  }, [eventName, onContextMenuStable]);
+
+  return (
+    <FloatingPortal>
+      {isOpen && (
+        <FloatingFocusManager context={context} initialFocus={refs.floating}>
+          <div
+            className="z-dialog"
+            ref={refs.setFloating}
+            style={{ ...floatingStyles, ...style }}
+            {...getFloatingProps()}
+          >
+            <Dialog
+              placement={context.placement}
+              className="animate-fade-in-list z-context-menu max-h-80 overflow-auto"
+            >
+              {Children.map(
+                children,
+                (child, index) =>
+                  isValidElement<ContextMenuItemProps>(child) &&
+                  cloneElement(
+                    child,
+                    getItemProps({
+                      tabIndex: activeIndex === index ? 0 : -1,
+                      ref(node: HTMLButtonElement) {
+                        listItemsRef.current[index] = node;
+                      },
+                      onClick() {
+                        child.props.onClick?.(contextEvent.current);
+                        setIsOpen(false);
+                      },
+                      onMouseUp() {
+                        child.props.onClick?.(contextEvent.current);
+                        setIsOpen(false);
+                      },
+                    }),
+                  ),
+              )}
+            </Dialog>
+          </div>
+        </FloatingFocusManager>
+      )}
+    </FloatingPortal>
+  );
+}

package/src/components/context-menu/ContextMenuItem.tsx

@@ -0,0 +1,34 @@
+import React, { ComponentPropsWithRef, ReactNode, forwardRef } from "react";
+import clsx from "clsx";
+
+export type ContextMenuItemMouseEvent =
+  | React.MouseEvent<HTMLButtonElement>
+  | MouseEvent
+  | CustomEvent
+  | null;
+
+export interface ContextMenuItemProps extends Omit<ComponentPropsWithRef<"button">, "onClick"> {
+  label: string;
+  disabled?: boolean;
+  icon?: ReactNode;
+  onClick?: (e: ContextMenuItemMouseEvent) => void;
+}
+
+const ContextMenuItem = forwardRef<HTMLButtonElement, ContextMenuItemProps>(
+  ({ label, disabled, icon, className, ...props }, ref) => {
+    return (
+      <button
+        {...props}
+        className={clsx(["option", className])}
+        ref={ref}
+        role="menuitem"
+        disabled={disabled}
+      >
+        {icon}
+        <span className="content">{label}</span>
+      </button>
+    );
+  },
+);
+
+export default ContextMenuItem;

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

@@ -0,0 +1,2 @@
+export { default as ContextMenu } from "./ContextMenu";
+export { default as ContextMenuItem, type ContextMenuItemMouseEvent } from "./ContextMenuItem";

package/src/components/dialog/Dialog.stories.tsx

@@ -0,0 +1,270 @@
+import { Meta } from "@storybook/react";
+import Dialog from "./Dialog";
+import { Button } from "../button";
+
+const meta = {
+  title: "Components/Dialog",
+} satisfies Meta;
+export default meta;
+
+export const Basic = () => {
+  return (
+    <div className="flex gap-8 flex-col mb-4">
+      <div>
+        <Dialog>
+          <div className="description p-2">coucou</div>
+        </Dialog>
+      </div>
+      <div>
+        <Dialog placement="top" color="gray" style={{ width: 300 }}>
+          <div className="description p-2">infos</div>
+          <div style={{ left: "18px" }} className="p8n-arrow"></div>
+        </Dialog>
+      </div>
+      <div>
+        <Dialog placement="bottom" color="red" style={{ width: 300 }}>
+          <div className="description p-2">infos</div>
+          <div style={{ left: "18px" }} className="p8n-arrow"></div>
+        </Dialog>
+      </div>
+      <div>
+        <Dialog placement="left" color="blue" style={{ width: 300 }}>
+          <div className="description p-2">infos</div>
+          <div style={{ top: "12px" }} className="p8n-arrow"></div>
+        </Dialog>
+      </div>
+      <div>
+        <Dialog placement="right" color="green" style={{ width: 300 }}>
+          <div className="description p-2">infos</div>
+          <div style={{ top: "12px" }} className="p8n-arrow"></div>
+        </Dialog>
+      </div>
+
+      <div>
+        <Dialog placement="top" color="orange" style={{ width: 300 }}>
+          <div className="p-1 float-right">
+            <Button icon variant="text" color="gray">
+              <i className="fe-cancel"></i>
+            </Button>
+          </div>
+
+          <div className="description p-2">infos</div>
+          <div style={{ left: "18px", bottom: "-8px" }} className="p8n-arrow"></div>
+        </Dialog>
+      </div>
+
+      <div>
+        <Dialog placement="top" color="blue" style={{ width: 300 }}>
+          <div className="p-1 float-right">
+            <Button icon variant="text" color="gray">
+              <i className="fe-cancel"></i>
+            </Button>
+          </div>
+          <header className="flex items-center px-2 pt-2">
+            <h4>Heading</h4>
+          </header>
+          <div className="description p-2">description</div>
+          <div style={{ left: "18px", bottom: "-8px" }} className="p8n-arrow"></div>
+        </Dialog>
+      </div>
+
+      <div>
+        <Dialog placement="top" color="yellow" style={{ width: 300 }}>
+          <div className="p-1 float-right">
+            <Button icon variant="text" color="gray">
+              <i className="fe-cancel"></i>
+            </Button>
+          </div>
+          <header className="flex items-center px-2 pt-2">
+            <h4>Heading</h4>
+          </header>
+          <div className="description p-2">description</div>
+          <footer className="relative z-10 px-2 pb-2">
+            <div className="flex justify-between">
+              <Button variant="text" color="gray">
+                Annuler
+              </Button>
+              <Button color="yellow">Valider</Button>
+            </div>
+          </footer>
+          <div style={{ left: "18px", bottom: "-8px" }} className="p8n-arrow"></div>
+        </Dialog>
+      </div>
+    </div>
+  );
+};
+
+export const Options = () => {
+  return (
+    <div className="flex gap-8 flex-col mb-4">
+      <div>
+        <Dialog placement="bottom" style={{ width: 300 }}>
+          <div className="option">Default state 1</div>
+          <div className="option active">Active state 2 (keyboard navigation)</div>
+          <div className="option">Default state 3</div>
+          <div className="option selected">Selected state 4</div>
+          <div className="option">Default state 5</div>
+          <div className="option">Default state 6</div>
+        </Dialog>
+      </div>
+
+      <div>
+        <Dialog placement="bottom" style={{ width: 300 }}>
+          <div className="option">
+            <i className="fe-star mr-2"></i>
+            <span>Default state 1</span>
+          </div>
+          <div className="option">
+            <i className="fe-marker mr-2"></i>
+            <span>State 2</span>
+          </div>
+        </Dialog>
+      </div>
+
+      <div>
+        <Dialog placement="bottom" style={{ width: 300 }}>
+          <div className="option">
+            <span className="bullet">A</span>
+            <span>Itinéraire depuis ce point</span>
+          </div>
+          <div className="option text-gray-6">
+            <i className="fe-point-inter mr-2"></i>
+            <span>Ajouter un point</span>
+          </div>
+          <div className="option">
+            <span className="bullet">B</span>
+            <span>Itinéraire vers ce point</span>
+          </div>
+          <div className="option">
+            <i className="fe-plus mr-2"></i>
+            <span>Prolonger l'itinéraire jusqu'ici</span>
+          </div>
+        </Dialog>
+      </div>
+
+      <div>
+        <Dialog placement="bottom" style={{ width: 300 }}>
+          <div className="option">
+            <span className="bullet">A</span>
+            <span>Itinéraire depuis ce point</span>
+          </div>
+          <div className="option text-gray-6">
+            <i className="fe-point-inter mr-2"></i>
+            <span className="text-sm">point intermédiaire</span>
+          </div>
+          <div className="option">
+            <span className="bullet">B</span>
+            <span>Déplacer ce point</span>
+          </div>
+          <div className="option text-gray-6">
+            <i className="fe-point-inter mr-2"></i>
+            <span className="text-sm">point intermédiaire</span>
+          </div>
+          <div className="option">
+            <span className="bullet">C</span>
+            <span>Déplacer ce point</span>
+          </div>
+          <div className="option text-gray-6">
+            <i className="fe-point-inter mr-2"></i>
+            <span className="text-sm">point intermédiaire</span>
+          </div>
+          <div className="option">
+            <span className="bullet">D</span>
+            <span>Itinéraire vers ce point</span>
+          </div>
+          <div className="option">
+            <i className="fe-plus mr-2"></i>
+            <span>Prolonger l'itinéraire jusqu'ici</span>
+          </div>
+        </Dialog>
+      </div>
+
+      <div>
+        <Dialog placement="bottom" style={{ width: 300 }}>
+          <div className="overflow-auto max-h-56">
+            <div className="option">
+              <span className="bullet">A</span>
+              <span>Itinéraire depuis ce point</span>
+            </div>
+            <div className="option text-gray-6">
+              <i className="fe-point-inter mr-2"></i>
+              <span className="text-sm">point intermédiaire</span>
+            </div>
+            <div className="option">
+              <span className="bullet">B</span>
+              <span>Déplacer ce point</span>
+            </div>
+            <div className="option text-gray-6">
+              <i className="fe-point-inter mr-2"></i>
+              <span className="text-sm">point intermédiaire</span>
+            </div>
+            <div className="option">
+              <span className="bullet">C</span>
+              <span>Déplacer ce point</span>
+            </div>
+            <div className="option text-gray-6">
+              <i className="fe-point-inter mr-2"></i>
+              <span className="text-sm">point intermédiaire</span>
+            </div>
+            <div className="option">
+              <span className="bullet">D</span>
+              <span>Itinéraire vers ce point</span>
+            </div>
+            <div className="option text-gray-6">
+              <i className="fe-point-inter mr-2"></i>
+              <span className="text-sm">point intermédiaire</span>
+            </div>
+            <div className="option">
+              <span className="bullet">E</span>
+              <span>Itinéraire vers ce point</span>
+            </div>
+            <div className="option text-gray-6">
+              <i className="fe-point-inter mr-2"></i>
+              <span className="text-sm">point intermédiaire</span>
+            </div>
+            <div className="option">
+              <span className="bullet">F</span>
+              <span>Itinéraire vers ce point</span>
+            </div>
+            <div className="option text-gray-6">
+              <i className="fe-point-inter mr-2"></i>
+              <span className="text-sm">point intermédiaire</span>
+            </div>
+            <div className="option">
+              <span className="bullet">G</span>
+              <span>Itinéraire vers ce point</span>
+            </div>
+            <div className="option text-gray-6">
+              <i className="fe-point-inter mr-2"></i>
+              <span className="text-sm">point intermédiaire</span>
+            </div>
+            <div className="option">
+              <span className="bullet">H</span>
+              <span>Itinéraire vers ce point</span>
+            </div>
+            <div className="option text-gray-6">
+              <i className="fe-point-inter mr-2"></i>
+              <span className="text-sm">point intermédiaire</span>
+            </div>
+            <div className="option">
+              <span className="bullet">I</span>
+              <span>Itinéraire vers ce point</span>
+            </div>
+            <div className="option text-gray-6">
+              <i className="fe-point-inter mr-2"></i>
+              <span className="text-sm">point intermédiaire</span>
+            </div>
+            <div className="option">
+              <span className="bullet">J</span>
+              <span>Itinéraire vers ce point</span>
+            </div>
+          </div>
+          <div className="option">
+            <i className="fe-plus"></i>
+            <span>Prolonger l'itinéraire jusqu'ici</span>
+          </div>
+        </Dialog>
+      </div>
+    </div>
+  );
+};

package/src/components/dialog/Dialog.tsx

@@ -0,0 +1,46 @@
+import { Placement } from "@floating-ui/react";
+import clsx from "clsx";
+import { ComponentProps, ReactNode } from "react";
+import type { ThemeColor } from "~/types.d";
+
+interface Props extends ComponentProps<"div"> {
+  color?: ThemeColor;
+  placement?: Placement;
+  children: ReactNode;
+}
+
+export const dialogVariants = {
+  color(color?: ThemeColor) {
+    if (!color) {
+      return "bg-gray-0";
+    }
+    return clsx(
+      "border-t-4",
+      {
+        yellow: "border-t-yellow-3 bg-gray-0",
+        gray: "border-t-gray-3 bg-gray-0",
+        red: "border-t-red-3 bg-red-1",
+        blue: "border-t-blue-3 bg-blue-1",
+        green: "border-t-green-3 bg-green-1",
+        orange: "border-t-orange-3 bg-orange-1",
+      }[color],
+    );
+  },
+};
+
+export default function Dialog({ placement, color, children, className, ...rest }: Props) {
+  return (
+    <div
+      className={clsx(
+        "rounded-2xl relative shadow dark:shadow-dark",
+        dialogVariants.color(color),
+        className,
+      )}
+      data-placement={placement}
+      data-color={color}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/dialog/index.ts

@@ -0,0 +1 @@
+export { default as Dialog, dialogVariants } from "./Dialog";

package/src/components/dialog/util.ts

@@ -0,0 +1,29 @@
+import { Placement, Side, UseFloatingReturn } from "@floating-ui/react";
+
+function getSide(placement: Placement): Side {
+  return placement.split("-")[0] as Side;
+}
+
+export function computeArrowStyle({ middlewareData, placement }: UseFloatingReturn) {
+  if (!middlewareData.arrow) {
+    return {
+      display: "none",
+    };
+  }
+
+  const { x, y } = middlewareData.arrow;
+  const staticSide: "bottom" | "left" | "top" | "right" = (
+    {
+      top: "bottom",
+      right: "left",
+      bottom: "top",
+      left: "right",
+    } as const
+  )[getSide(placement)];
+
+  return {
+    left: x != null ? `${x}px` : "",
+    top: y != null ? `${y}px` : "",
+    [staticSide]: "-6px",
+  };
+}

package/src/components/dropdown-menu/DropdownMenu.stories.tsx

@@ -0,0 +1,19 @@
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from ".";
+import { Meta } from "@storybook/react";
+
+const meta = {
+  title: "Components/DropdownMenu",
+  component: DropdownMenu,
+} satisfies Meta<typeof DropdownMenu>;
+export default meta;
+
+export const Basic = () => (
+  <DropdownMenu>
+    <DropdownMenuTrigger>Menu</DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem onClick={() => console.log("Undo")}>Your profile</DropdownMenuItem>
+      <DropdownMenuItem disabled>Settings</DropdownMenuItem>
+      <DropdownMenuItem>Sign out</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+);

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

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import { DropdownMenuOptions } from "./interface";
+import { DropdownMenuContext, useDropdownMenu } from ".";
+
+interface Props extends DropdownMenuOptions {
+  children: ReactNode;
+}
+
+export default function DropdownMenu({ children, ...options }: Props) {
+  const popover = useDropdownMenu(options);
+  return <DropdownMenuContext.Provider value={popover}>{children}</DropdownMenuContext.Provider>;
+}

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

@@ -0,0 +1,46 @@
+import { ComponentProps, forwardRef } from "react";
+import { useDropdownMenuContext } from ".";
+import {
+  FloatingFocusManager,
+  FloatingList,
+  FloatingPortal,
+  useMergeRefs,
+} from "@floating-ui/react";
+import clsx from "clsx";
+import { Dialog } from "../dialog";
+
+const DropdownMenuContent = forwardRef<HTMLDivElement, ComponentProps<"div">>(
+  ({ style, children, ...props }, propRef) => {
+    const context = useDropdownMenuContext();
+    const floatingContext = context.context;
+
+    const ref = useMergeRefs([context.refs.setFloating, propRef]);
+    if (!context.open) {
+      return null;
+    }
+    return (
+      <FloatingPortal>
+        <FloatingFocusManager context={floatingContext} modal={context.modal}>
+          <div
+            ref={ref}
+            style={{ ...context.floatingStyles, ...style }}
+            {...context.getFloatingProps(props)}
+          >
+            <Dialog
+              placement={context.placement}
+              className={clsx(`border-${context.color}-2`, "animate-fade-in-list")}
+            >
+              <div className="box">
+                <FloatingList elementsRef={context.elementsRef} labelsRef={context.labelsRef}>
+                  {children}
+                </FloatingList>
+              </div>
+            </Dialog>
+          </div>
+        </FloatingFocusManager>
+      </FloatingPortal>
+    );
+  },
+);
+
+export default DropdownMenuContent;

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

@@ -0,0 +1,33 @@
+import { useListItem } from "@floating-ui/react";
+import clsx from "clsx";
+import { useDropdownMenuContext } from ".";
+import { ComponentProps, MouseEvent, ReactNode } from "react";
+
+interface Props extends ComponentProps<"button"> {
+  children: ReactNode;
+}
+
+export default function DropdownMenuItem({ children, onClick, ...rest }: Props) {
+  const { activeIndex, getItemProps, handleSelect } = useDropdownMenuContext();
+
+  const { ref, index } = useListItem({ label: children?.toString() });
+  const isActive = activeIndex === index;
+  return (
+    <button
+      className={clsx("option", isActive && "bg-gray-1")}
+      ref={ref}
+      role="option"
+      aria-selected={isActive}
+      tabIndex={isActive ? 0 : -1}
+      {...getItemProps({
+        ...rest,
+        onClick: (e: MouseEvent<HTMLButtonElement>) => {
+          onClick?.(e);
+          handleSelect();
+        },
+      })}
+    >
+      {children}
+    </button>
+  );
+}