pentatrion-design 0.0.1

package/src/components/modal/ModalTrigger.tsx

@@ -0,0 +1,41 @@
+import { HTMLProps, cloneElement, forwardRef, isValidElement } from "react";
+import { useMergeRefs } from "@floating-ui/react";
+import { Button } from "../button";
+import { useModalContext } from ".";
+
+interface Props extends HTMLProps<HTMLElement> {
+  asChild?: boolean;
+}
+
+const ModalTrigger = forwardRef<HTMLElement, Props>(
+  ({ children, asChild = false, ...props }, propRef) => {
+    const context = useModalContext();
+    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
+        ref={ref}
+        data-state={context.open ? "open" : "closed"}
+        {...context.getReferenceProps(props)}
+      >
+        {children}
+      </Button>
+    );
+  },
+);
+
+export default ModalTrigger;

package/src/components/modal/index.ts

@@ -0,0 +1,7 @@
+export { default as Modal } from "./Modal";
+export { default as ModalContent } from "./ModalContent";
+export { default as ModalTrigger } from "./ModalTrigger";
+export { default as useModal } from "./useModal";
+export { default as useModalContext, ModalContext } from "./useModalContext";
+export { ModalHeader, ModalDescription, ModalFooter } from "./Components";
+export type * from "./interface";

package/src/components/modal/interface.d.ts

@@ -0,0 +1,10 @@
+import { type ThemeColor } from "~/types.d";
+
+export interface ModalOptions {
+  initialOpen?: boolean;
+  open?: boolean;
+  onOpen?: (open: boolean) => void;
+  color?: ThemeColor | "default";
+}
+
+export { ThemeColor };

package/src/components/modal/useModal.ts

@@ -0,0 +1,48 @@
+import { Dispatch, SetStateAction, useMemo, useState } from "react";
+import { ModalOptions } from "./interface";
+import { useClick, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
+
+export default function useModal({
+  initialOpen = false,
+  open: controlledOpen,
+  onOpen: setControlledOpen,
+  color = "default",
+}: ModalOptions = {}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
+  const [labelId, setLabelId] = useState<string | undefined>();
+  const [descriptionId, setDescriptionId] = useState<string | undefined>();
+
+  const isUncontrolled = controlledOpen === null || controlledOpen === undefined;
+  const open = isUncontrolled ? uncontrolledOpen : controlledOpen;
+  const setOpen = isUncontrolled
+    ? setUncontrolledOpen
+    : (setControlledOpen as Dispatch<SetStateAction<boolean>>);
+
+  const data = useFloating({
+    open,
+    onOpenChange: setOpen,
+  });
+
+  const { context } = data;
+
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+
+  const interactions = useInteractions([click, dismiss, role]);
+
+  return useMemo(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data,
+      color,
+      labelId,
+      descriptionId,
+      setLabelId,
+      setDescriptionId,
+    }),
+    [open, setOpen, interactions, data, color, labelId, descriptionId],
+  );
+}

package/src/components/modal/useModalContext.ts

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

package/src/components/notification/Notification.stories.tsx

@@ -0,0 +1,51 @@
+import { Meta, ReactRenderer } from "@storybook/react";
+import { PartialStoryFn } from "@storybook/types";
+import { useRef } from "react";
+import NotificationsProvider from "./NotificationsProvider";
+import { useFetch, useNotifications } from "~/hooks";
+import { Button } from "../button";
+
+const meta = {
+  title: "Components/NotificationsProvider",
+  component: NotificationsProvider,
+  decorators: [
+    (Story) => (
+      <NotificationsProvider>
+        <Story />
+      </NotificationsProvider>
+    ),
+  ] as ((story: PartialStoryFn<ReactRenderer, any>) => JSX.Element)[],
+} satisfies Meta<typeof NotificationsProvider>;
+export default meta;
+
+export const Context = () => {
+  const counter = useRef(0);
+  const { addNotification, notifyError } = useNotifications();
+  const fetch = useFetch();
+  function handleClick() {
+    counter.current += 1;
+    addNotification(`Notification num. ${counter.current}`, {
+      expiration: 5000,
+    });
+  }
+
+  function throwError() {
+    try {
+      throw new Error("Custom error message");
+    } catch (e) {
+      notifyError(e);
+    }
+  }
+
+  function handle404Error() {
+    fetch("/throw-404-error");
+  }
+
+  return (
+    <div className="grid grid-cols-1 gap-8">
+      <Button onClick={handleClick}>Show info notification</Button>
+      <Button onClick={throwError}>Throw custom error</Button>
+      <Button onClick={handle404Error}>Throw 404 fetch error</Button>
+    </div>
+  );
+};

package/src/components/notification/NotificationsContext.ts

@@ -0,0 +1,79 @@
+import { Dispatch, SetStateAction, createContext } from "react";
+import { parseError } from "~/lib";
+import { Message, MessageOptions } from "~/types.d";
+
+export function createNotificationsManager(setNotifications: Dispatch<SetStateAction<Message[]>>) {
+  let idx = 1;
+  const timeoutIds = new Map<string, any>();
+
+  const removeNotification = (id: string) => {
+    const timeoutId = timeoutIds.get(id);
+    if (!timeoutId) {
+      return;
+    }
+    clearTimeout(timeoutId);
+    timeoutIds.delete(id);
+
+    return setNotifications((oldNotifications) => {
+      return oldNotifications.filter(({ id: otherId }) => id !== otherId);
+    });
+  };
+
+  const addNotification = (
+    content = "",
+    {
+      expiration = 5000,
+      color = "yellow",
+      canClose = true,
+      withLoader = false,
+    }: MessageOptions = {},
+  ) => {
+    const id = (idx++).toString();
+    if (timeoutIds.has(id)) {
+      throw new Error("notification already exists");
+    }
+
+    setNotifications((oldNotifications) => {
+      const newNotification: Message = {
+        id,
+        content,
+        expiration,
+        color,
+        canClose,
+        withLoader,
+      };
+
+      return [newNotification, ...oldNotifications];
+    });
+
+    timeoutIds.set(
+      id,
+      expiration === -1 ? -1 : setTimeout(() => removeNotification(id), expiration),
+    );
+
+    return id;
+  };
+
+  const notifyError = (err: unknown) => {
+    const errorMessage = parseError(err);
+    if (errorMessage) {
+      addNotification(...errorMessage);
+    } else {
+      throw err;
+    }
+  };
+
+  return {
+    addNotification,
+    removeNotification,
+    notifyError,
+  };
+}
+
+export type NotificationsManager = ReturnType<typeof createNotificationsManager>;
+
+export const NotificationsContext = createContext<NotificationsManager>(
+  null as unknown as NotificationsManager,
+);
+
+export type { Message };

package/src/components/notification/NotificationsProvider.tsx

@@ -0,0 +1,58 @@
+import { ReactNode, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import {
+  NotificationsContext,
+  createNotificationsManager,
+  type NotificationsManager,
+} from "./NotificationsContext";
+import Snack from "../snack/Snack";
+import { Message } from "~/types.d";
+
+interface Props {
+  children: ReactNode;
+}
+
+export default function NotificationsProvider({ children }: Props) {
+  const [notifications, setNotifications] = useState<Message[]>([]);
+  const container = useRef<HTMLDivElement>(null!);
+  if (!container.current) {
+    container.current = document.createElement("div");
+    container.current.id = Math.floor(Math.random() * 100000).toString();
+    /* .ll-snack-bar */
+    container.current.classList.add("fixed", "bottom-0", "left-0", "right-0", "z-notification");
+    document.body.append(container.current);
+  }
+
+  useEffect(() => {
+    return () => {
+      container.current && container.current.remove();
+    };
+  }, []);
+
+  const managerRef = useRef<NotificationsManager>();
+
+  if (!managerRef.current) {
+    managerRef.current = createNotificationsManager(setNotifications);
+  }
+
+  const manager = managerRef.current;
+
+  return (
+    <>
+      <NotificationsContext.Provider value={manager}>{children}</NotificationsContext.Provider>
+      {createPortal(
+        /* snack-bar-inner */
+        <div className="mb-4 mx-4 flex flex-col gap-4 items-center">
+          {notifications.map((props) => (
+            <Snack
+              {...props}
+              key={props.id}
+              onRemove={() => manager.removeNotification(props.id)}
+            />
+          ))}
+        </div>,
+        container.current,
+      )}
+    </>
+  );
+}

package/src/components/notification/index.ts

@@ -0,0 +1,2 @@
+export { default as NotificationsProvider } from "./NotificationsProvider";
+export { NotificationsContext } from "./NotificationsContext";

package/src/components/popover/Components.tsx

@@ -0,0 +1,45 @@
+import { ComponentProps } from "react";
+import { usePopoverContext } from ".";
+import clsx from "clsx";
+import { Button } from "../button";
+
+interface PopoverHeaderProps extends ComponentProps<"h2"> {
+  closeButton?: boolean;
+}
+export function PopoverHeader({
+  children,
+  closeButton = true,
+  className,
+  ...props
+}: PopoverHeaderProps) {
+  const { setOpen } = usePopoverContext();
+  return (
+    <>
+      {closeButton && (
+        <div className="p-1 float-right">
+          <Button icon variant="text" color="gray" onClick={() => setOpen(false)}>
+            <i className="fe-cancel"></i>
+          </Button>
+        </div>
+      )}
+      <header className={clsx("flex items-center px-2 pt-2", className)} {...props}>
+        <h4>{children}</h4>
+      </header>
+    </>
+  );
+}
+export function PopoverDescription({ children, className, ...props }: ComponentProps<"div">) {
+  return (
+    <div className={clsx("p-2", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function PopoverFooter({ children, className, ...props }: ComponentProps<"footer">) {
+  return (
+    <footer className={clsx("relative z-10 px-2 pb-2", className)} {...props}>
+      {children}
+    </footer>
+  );
+}

package/src/components/popover/Popover.stories.tsx

@@ -0,0 +1,46 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Popover, PopoverContent, PopoverTrigger, PopoverHeader, PopoverDescription } from ".";
+
+const meta = {
+  title: "Components/Popover",
+  component: Popover,
+} satisfies Meta<typeof Popover>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render: ({ children, ...args }) => (
+    <>
+      <p>
+        Contrairement au tooltip il doit s'activer par un clic. le Popover est masqué si
+        l'utilisateur clique autre part
+      </p>
+      <Popover {...args}>
+        <PopoverTrigger>My trigger</PopoverTrigger>
+        <PopoverContent style={{ width: "400px" }}>
+          <PopoverHeader>Heading</PopoverHeader>
+          <PopoverDescription>description</PopoverDescription>
+        </PopoverContent>
+      </Popover>
+    </>
+  ),
+  args: {
+    initialOpen: false,
+    placement: "bottom",
+    color: "yellow",
+    modal: false,
+    children: "",
+  },
+};
+
+export const Context = () => (
+  <Popover color="yellow">
+    <PopoverTrigger>My trigger</PopoverTrigger>
+    <PopoverContent style={{ width: "400px" }}>
+      <PopoverHeader>Heading</PopoverHeader>
+      <PopoverDescription>description</PopoverDescription>
+    </PopoverContent>
+  </Popover>
+);

package/src/components/popover/Popover.test.tsx

@@ -0,0 +1,21 @@
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import { afterEach, describe, it } from "vitest";
+import { Popover, PopoverContent, PopoverDescription, PopoverTrigger } from ".";
+
+afterEach(cleanup);
+
+describe("<Popover />", () => {
+  it("open popup on click", async () => {
+    const { getByText, getByRole } = render(
+      <Popover color="yellow">
+        <PopoverTrigger>My trigger</PopoverTrigger>
+        <PopoverContent>
+          <PopoverDescription>Content</PopoverDescription>
+        </PopoverContent>
+      </Popover>,
+    );
+
+    fireEvent.click(getByRole("button"));
+    getByText("Content");
+  });
+});

package/src/components/popover/Popover.tsx

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

package/src/components/popover/PopoverContent.tsx

@@ -0,0 +1,46 @@
+import { ComponentProps, forwardRef } from "react";
+import { usePopoverContext } from ".";
+import { FloatingFocusManager, FloatingPortal, useMergeRefs } from "@floating-ui/react";
+import clsx from "clsx";
+import { computeArrowStyle } from "../dialog/util";
+import { Dialog } from "../dialog";
+
+const PopoverContent = forwardRef<HTMLDivElement, ComponentProps<"div">>(
+  ({ style, children, className, ...props }, propRef) => {
+    const context = usePopoverContext();
+    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 }}
+            aria-labelledby={context.labelId}
+            aria-describedby={context.descriptionId}
+            {...context.getFloatingProps(props)}
+          >
+            <Dialog
+              placement={context.placement}
+              color={context.color}
+              className={clsx("animate-fade-in-list", className)}
+            >
+              {children}
+              <div
+                ref={context.arrowRef}
+                style={computeArrowStyle(context)}
+                className="p8n-arrow"
+              ></div>
+            </Dialog>
+          </div>
+        </FloatingFocusManager>
+      </FloatingPortal>
+    );
+  },
+);
+
+export default PopoverContent;

package/src/components/popover/PopoverTrigger.tsx

@@ -0,0 +1,42 @@
+import { HTMLProps, cloneElement, forwardRef, isValidElement } from "react";
+import { usePopoverContext } from ".";
+import { useMergeRefs } from "@floating-ui/react";
+import { Button } from "../button";
+
+interface Props extends HTMLProps<HTMLElement> {
+  asChild?: boolean;
+}
+
+const PopoverTrigger = forwardRef<HTMLElement, Props>(
+  ({ children, asChild = false, ...props }, propRef) => {
+    const context = usePopoverContext();
+    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 PopoverTrigger;

package/src/components/popover/index.ts

@@ -0,0 +1,7 @@
+export { default as Popover } from "./Popover";
+export { default as PopoverContent } from "./PopoverContent";
+export { default as PopoverTrigger } from "./PopoverTrigger";
+export { default as usePopover } from "./usePopover";
+export { default as usePopoverContext, PopoverContext } from "./usePopoverContext";
+export { PopoverHeader, PopoverDescription, PopoverFooter } from "./Components";
+export type * from "./interface";

package/src/components/popover/interface.d.ts

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

package/src/components/popover/usePopover.tsx

@@ -0,0 +1,80 @@
+import { useMemo, useRef, useState } from "react";
+import { PopoverOptions } from "./interface";
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useRole,
+} from "@floating-ui/react";
+
+const arrowWidth = 12;
+
+export default function usePopover({
+  initialOpen = false,
+  placement = "bottom",
+  open: controlledOpen,
+  onOpen: setControlledOpen,
+  color,
+  modal = false,
+}: PopoverOptions) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
+  const [labelId, setLabelId] = useState<string | undefined>();
+  const [descriptionId, setDescriptionId] = useState<string | undefined>();
+
+  const isUncontrolled = controlledOpen === null || controlledOpen === undefined;
+  const open = isUncontrolled ? uncontrolledOpen : controlledOpen;
+  const setOpen = isUncontrolled ? setUncontrolledOpen : setControlledOpen!;
+
+  const arrowRef = useRef<HTMLDivElement>(null);
+  const offsetVal = arrowWidth / 2;
+
+  const data = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(offsetVal),
+      flip(),
+      shift({ padding: 5 }),
+      arrow({
+        element: arrowRef,
+        padding: 12,
+      }),
+    ],
+  });
+
+  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 interactions = useInteractions([click, dismiss, role]);
+
+  return useMemo(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data,
+      arrowRef,
+      color,
+      modal,
+      labelId,
+      descriptionId,
+      setLabelId,
+      setDescriptionId,
+    }),
+    [open, setOpen, interactions, data, color, modal, labelId, descriptionId],
+  );
+}

package/src/components/popover/usePopoverContext.ts

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

package/src/components/portal/Portal.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import ReactDOM from "react-dom";
+
+interface Props {
+  children: ReactNode;
+}
+
+const Portal = ({ children }: Props) => {
+  return ReactDOM.createPortal(children, document.body);
+};
+
+export default Portal;