pentatrion-design 0.0.1

package/src/components/tabs/Tabs.stories.tsx

@@ -0,0 +1,66 @@
+import { useState } from "react";
+import { Button } from "../button";
+import Tabs from "./Tabs";
+
+export default {
+  title: "Components/Tabs",
+  component: Tabs,
+};
+
+export const Basic = () => {
+  const tabs = [
+    {
+      id: "bulbasaur",
+      title: "Bulbasaur",
+      content: (
+        <>
+          <p>
+            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.
+          </p>
+        </>
+      ),
+    },
+    {
+      id: "charmander",
+      title: "Charmander",
+      content: (
+        <>
+          <p>
+            It has a preference for hot things. When it rains, steam is said to spout from the tip
+            of its tail. It has a preference for hot things. When it rains, steam is said to spout
+            from the tip of its tail. It has a preference for hot things. When it rains, steam is
+            said to spout from the tip of its tail.
+          </p>
+        </>
+      ),
+    },
+    {
+      id: "squirtle",
+      title: "Squirtle",
+      content: (
+        <>
+          <p>
+            When it retracts its long neck into its shell, it squirts out water with vigorous force.
+            When it retracts its long neck into its shell, it squirts out water with vigorous force.
+            When it retracts its long neck into its shell, it squirts out water with vigorous force.
+          </p>
+        </>
+      ),
+    },
+  ];
+  const [id, setId] = useState<string | number>("bulbasaur");
+  return (
+    <div className="flex flex-col gap-2">
+      <Tabs tabs={tabs} stickyTabs={true} value={id} onChange={setId}>
+        <Button icon variant="text" color="gray">
+          <i className="fe-sidebar-collapse"></i>
+        </Button>
+      </Tabs>
+      <Tabs tabs={tabs} value={id} onChange={setId} />
+      <Tabs tabs={tabs} fullWidth={true} value={id} onChange={setId} />
+    </div>
+  );
+};

package/src/components/tabs/Tabs.tsx

@@ -0,0 +1,80 @@
+import { ReactNode } from "react";
+import clsx from "clsx";
+
+/* TODO: fix stickyTabs with overflow: hidden */
+
+export interface Tab {
+  id: string | number;
+  title: ReactNode;
+  content?: ReactNode;
+}
+
+interface Props {
+  tabs?: Tab[];
+  value: number | string;
+  /**
+   * Will make tabs stick to the top of the container when overflowing
+   */
+  stickyTabs?: boolean;
+  /**
+   * Tabs will take the maximum width and divide equally
+   */
+  fullWidth?: boolean;
+  onChange: (id: number | string) => void;
+
+  children?: ReactNode;
+
+  className?: string;
+  contentClassName?: string;
+  listClassName?: string;
+}
+
+export default function Tabs({
+  className,
+  listClassName,
+  contentClassName,
+  tabs = [],
+  value,
+  onChange,
+  fullWidth = false,
+  stickyTabs = false,
+  children,
+}: Props) {
+  const content = tabs.find((t) => t.id === value)?.content;
+  return (
+    <div className={clsx("ll-tabs  md:rounded-sm shadow bg-gray-2 overflow-hidden", className)}>
+      <div
+        role="tablist"
+        className={clsx("tabs-list flex", stickyTabs && "sticky z-[1] top-0", listClassName)}
+      >
+        {tabs.map(({ title, id }) => {
+          return (
+            <div
+              key={id}
+              className={clsx(
+                "tabs-list-item border-t-4 hover:text-gray-7 transition-all",
+                fullWidth && "text-center flex-1",
+                value === id
+                  ? "border-t-yellow-3 bg-gray-0 text-gray-7"
+                  : "border-t-transparent text-gray-6",
+              )}
+            >
+              <button
+                className="px-2 py-1 focus-visible:outline-offset-0 w-full"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  event.preventDefault();
+                  onChange(id);
+                }}
+              >
+                {title}
+              </button>
+            </div>
+          );
+        })}
+        {children && <div className="extra ml-auto mr-2 flex items-center">{children}</div>}
+      </div>
+      <div className={clsx("p-2 bg-gray-0 shadow", contentClassName)}>{content}</div>
+    </div>
+  );
+}

package/src/components/tooltip/SimpleTooltip.tsx

@@ -0,0 +1,17 @@
+import { ReactNode, isValidElement } from "react";
+import { TooltipOptions } from "./interface";
+import { Tooltip, TooltipContent, TooltipTrigger } from ".";
+
+interface Props extends TooltipOptions {
+  children: ReactNode;
+  content: ReactNode;
+}
+
+export default function SimpleTooltip({ content, children, contentClassName, ...options }: Props) {
+  return (
+    <Tooltip {...options}>
+      <TooltipContent className={contentClassName}>{content}</TooltipContent>
+      <TooltipTrigger asChild={isValidElement(children)}>{children}</TooltipTrigger>
+    </Tooltip>
+  );
+}

package/src/components/tooltip/Tooltip.stories.tsx

@@ -0,0 +1,129 @@
+import { HTMLProps, forwardRef } from "react";
+import { useDrag } from "@use-gesture/react";
+import { useSpring, animated } from "@react-spring/web";
+import Tooltip from "./Tooltip";
+import SimpleTooltip from "./SimpleTooltip";
+
+export default {
+  title: "Components/Tooltip",
+  component: Tooltip,
+};
+
+const Box = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>((props, ref) => (
+  <div
+    ref={ref}
+    className="shadow-lg w-[100px] h-[100px] bg-gray-2 flex-center"
+    style={{
+      margin: "100px",
+    }}
+    {...props}
+  ></div>
+));
+
+export const Basic = () => {
+  return (
+    <div>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio neque dolorum soluta
+        suscipit,&nbsp;
+        <SimpleTooltip content="infos" placement="bottom">
+          dessous
+        </SimpleTooltip>
+        &nbsp;aut unde provident? Optio ipsum provident unde! Nulla, dignissimos recusandae. Eveniet
+        ut quam voluptatum accusantium aspernatur?
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur sit amet consectetur sit amet consectetur sit amet
+        consectetur sit amet consectetursit amet consectetur adipisicing elit. Distinctio neque
+        dolorum soluta suscipit,&nbsp;
+        <SimpleTooltip content="infos" placement="top">
+          top
+        </SimpleTooltip>
+        &nbsp; aut unde provident? Optio ipsum provident unde! Nulla, dignissimos recusandae.
+        Eveniet ut quam voluptatum accusantium aspernatur?
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio neque dolorum soluta
+        suscipit, sit amet consectetur&nbsp;
+        <SimpleTooltip content="infos" placement="left">
+          gauche
+        </SimpleTooltip>
+        &nbsp; aut unde provident? Optio ipsum provident unde! Nulla, dignissimos recusandae.
+        Eveniet ut quam voluptatum accusantium aspernatur?
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur sit amet consectetur sit amet consectetur adipisicing
+        elit. Distinctio neque dolorum soluta suscipit, &nbsp;
+        <SimpleTooltip content="infos" placement="right">
+          droite
+        </SimpleTooltip>
+        &nbsp; aut unde provident? Optio ipsum provident unde! Nulla, dignissimos recusandae.
+        Eveniet ut quam voluptatum accusantium aspernatur?
+      </p>
+
+      <div className="grid grid-cols-repeat-fill-300 gap-8">
+        <SimpleTooltip color="yellow" open={true} placement="right-start" content="infos">
+          <Box />
+        </SimpleTooltip>
+        <SimpleTooltip open={true} placement="right" content="infos">
+          <Box />
+        </SimpleTooltip>
+        <SimpleTooltip open={true} placement="right-end" content="infos">
+          <Box />
+        </SimpleTooltip>
+        <SimpleTooltip color="yellow" open={true} placement="left-start" content="infos">
+          <Box />
+        </SimpleTooltip>
+        <SimpleTooltip color="gray" open={true} placement="left" content="infos">
+          <Box />
+        </SimpleTooltip>
+        <SimpleTooltip color="orange" open={true} placement="left-end" content="infos">
+          <Box />
+        </SimpleTooltip>
+        <SimpleTooltip color="red" open={true} placement="top-start" content="infos">
+          <Box />
+        </SimpleTooltip>
+        <SimpleTooltip color="blue" open={true} placement="top" content="infos">
+          <Box />
+        </SimpleTooltip>
+        <SimpleTooltip color="green" open={true} placement="top-end" content="infos">
+          <Box />
+        </SimpleTooltip>
+        <SimpleTooltip color="red" open={true} placement="bottom-start" content="infos">
+          <Box />
+        </SimpleTooltip>
+        <SimpleTooltip open={true} placement="bottom" content="infos">
+          <Box />
+        </SimpleTooltip>
+        <SimpleTooltip open={true} placement="bottom-end" content="infos">
+          <Box />
+        </SimpleTooltip>
+      </div>
+    </div>
+  );
+};
+
+export const Draggable = () => {
+  const [{ x, y }, api] = useSpring(() => ({ x: 0, y: 0 }));
+  const bind = useDrag(({ event, offset: [x, y] }) => {
+    event.preventDefault();
+    api.start({ x, y, immediate: true });
+  });
+  return (
+    <div className="container">
+      <SimpleTooltip content="infos" placement="top" open={true} color="yellow">
+        <animated.div
+          {...bind()}
+          className="shadow-lg w-[100px] h-[100px] bg-gray-2 flex-center"
+          style={{
+            x,
+            y,
+            cursor: "pointer",
+          }}
+        >
+          <span>Box</span>
+        </animated.div>
+      </SimpleTooltip>
+    </div>
+  );
+};

package/src/components/tooltip/Tooltip.test.tsx

@@ -0,0 +1,18 @@
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import { afterEach, describe, it } from "vitest";
+import { SimpleTooltip } from ".";
+
+afterEach(cleanup);
+
+describe("<Tooltip />", () => {
+  it("show the popup", async () => {
+    const { getByRole, findByText } = render(
+      <SimpleTooltip openDelay={1} content="details">
+        tooltip
+      </SimpleTooltip>,
+    );
+
+    fireEvent.mouseEnter(getByRole("button"));
+    findByText("details");
+  });
+});

package/src/components/tooltip/Tooltip.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import { TooltipOptions } from "./interface";
+import useTooltip from "./useTooltip";
+import { TooltipContext } from "./useTooltipContext";
+
+interface Props extends TooltipOptions {
+  children: ReactNode;
+}
+
+export default function Tooltip({ children, ...options }: Props) {
+  const tooltip = useTooltip(options);
+  return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;
+}

package/src/components/tooltip/TooltipContent.tsx

@@ -0,0 +1,41 @@
+import { ComponentProps, forwardRef } from "react";
+import useTooltipContext from "./useTooltipContext";
+import { FloatingPortal, useMergeRefs } from "@floating-ui/react";
+import clsx from "clsx";
+import { computeArrowStyle } from "../dialog/util";
+import { Dialog } from "../dialog";
+
+const TooltipContent = forwardRef<HTMLDivElement, ComponentProps<"div">>(
+  ({ style, children, className, ...props }, propRef) => {
+    const context = useTooltipContext();
+    const ref = useMergeRefs([context.refs.setFloating, propRef]);
+    if (!context.open) {
+      return null;
+    }
+    return (
+      <FloatingPortal>
+        <div
+          ref={ref}
+          className={clsx("z-tooltip", context.middlewareData.hide?.referenceHidden && "invisible")}
+          style={{ ...context.floatingStyles, ...style }}
+          {...context.getFloatingProps(props)}
+        >
+          <Dialog
+            placement={context.placement}
+            className={clsx("animate-fade-in px-2 py-1 max-w-80 text-sm", className)}
+            color={context.color}
+          >
+            {children}
+            <div
+              ref={context.arrowRef}
+              style={computeArrowStyle(context)}
+              className="p8n-arrow"
+            ></div>
+          </Dialog>
+        </div>
+      </FloatingPortal>
+    );
+  },
+);
+
+export default TooltipContent;

package/src/components/tooltip/TooltipTrigger.tsx

@@ -0,0 +1,36 @@
+import { HTMLProps, cloneElement, forwardRef, isValidElement } from "react";
+import useTooltipContext from "./useTooltipContext";
+import { useMergeRefs } from "@floating-ui/react";
+
+interface Props extends HTMLProps<HTMLElement> {
+  /* allows the user to pass any element as the anchor instead of <button> */
+  asChild?: boolean;
+}
+
+const TooltipTrigger = forwardRef<HTMLElement, Props>(
+  ({ children, asChild = false, ...props }, propRef) => {
+    const context = useTooltipContext();
+    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 (
+      <abbr ref={ref} {...context.getReferenceProps(props)}>
+        {children}
+      </abbr>
+    );
+  },
+);
+
+export default TooltipTrigger;

package/src/components/tooltip/index.ts

@@ -0,0 +1,6 @@
+export { default as Tooltip } from "./Tooltip";
+export { default as TooltipContent } from "./TooltipContent";
+export { default as TooltipTrigger } from "./TooltipTrigger";
+export { default as useTooltip } from "./useTooltip";
+export { default as useTooltipContext, TooltipContext } from "./useTooltipContext";
+export { default as SimpleTooltip } from "./SimpleTooltip";

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

@@ -0,0 +1,15 @@
+import { Placement } from "@floating-ui/react";
+import { ThemeColor } from "~/types.d";
+
+export interface TooltipOptions {
+  initialOpen?: boolean;
+  placement?: Placement;
+  open?: boolean;
+  onOpen?: (open: boolean) => void;
+  openDelay?: number;
+  closeDelay?: number;
+  color?: ThemeColor;
+  contentClassName?: string;
+}
+
+export { ThemeColor };

package/src/components/tooltip/useTooltip.ts

@@ -0,0 +1,87 @@
+import { useMemo, useRef, useState } from "react";
+import { TooltipOptions } from "./interface";
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  hide,
+  offset,
+  shift,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useHover,
+  useInteractions,
+  useRole,
+} from "@floating-ui/react";
+
+const arrowWidth = 16;
+
+export default function useTooltip({
+  initialOpen = false,
+  placement = "top",
+  open: controlledOpen,
+  onOpen: setControlledOpen,
+  openDelay = 500,
+  closeDelay = 500,
+  color = "yellow",
+}: TooltipOptions = {}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
+
+  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,
+      }),
+      hide({
+        padding: 20,
+      }),
+    ],
+  });
+  const { context } = data;
+
+  const hover = useHover(context, {
+    move: false,
+    enabled: isUncontrolled,
+    delay: {
+      open: openDelay || 1,
+      close: closeDelay,
+    },
+  });
+  const focus = useFocus(context, {
+    enabled: isUncontrolled,
+  });
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: "tooltip" });
+
+  const interactions = useInteractions([hover, focus, dismiss, role]);
+
+  return useMemo(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data,
+      arrowRef,
+      color,
+    }),
+    [open, setOpen, color, interactions, data],
+  );
+}

package/src/components/tooltip/useTooltipContext.ts

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

package/src/env.d.ts

@@ -0,0 +1,27 @@
+import "react";
+
+type Merge<T, U> = Omit<T, keyof U> & U;
+type PropsWithAs<P, T extends React.ElementType> = P & { as?: T };
+export type PolymorphicPropsWithRef<P, T extends React.ElementType> = Merge<
+  T extends keyof JSX.IntrinsicElements
+    ? React.PropsWithRef<JSX.IntrinsicElements[T]>
+    : React.ComponentPropsWithRef<T>,
+  PropsWithAs<P, T>
+>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    "maplibre-contextmenu": CustomEvent;
+  }
+}
+
+declare module "react" {
+  interface CSSProperties {
+    [key: `--${string}`]: string | number;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  function forwardRef<T, P = {}>(
+    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null,
+  ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+}

package/src/hooks/index.ts

@@ -0,0 +1,13 @@
+export { useNotifications } from "./useNotifications";
+export { useRipple } from "./useRipple";
+export { useIsMounted } from "./useIsMounted";
+export { useFetch } from "./useFetch";
+export { useCombinedRefs } from "./useCombinedRefs";
+export { useIsClosing } from "./useIsClosing";
+export { usePrevious } from "./usePrevious";
+export { useEventCallback } from "./useEventCallback";
+export { useDebounce, useStateDebounce, useRefDebounce } from "./useDebounce";
+export { useCopyToClipboard } from "./useCopyToClipboard";
+export { useEventListener } from "./useEventListener";
+export { useOnClickOutside } from "./useOnClickOutside";
+export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";

package/src/hooks/useCombinedRefs.test.tsx

@@ -0,0 +1,42 @@
+import { createElement, useEffect, useRef } from "react";
+
+import { render } from "@testing-library/react";
+
+import { useCombinedRefs } from "./useCombinedRefs";
+import { describe, expect, it, vi } from "vitest";
+
+describe("useCombinedRefs", () => {
+  it("should correctly combine refs into one ref", async () => {
+    const cbRef = vi.fn();
+    const refs: { a: null | HTMLDivElement; b: null | HTMLDivElement } = { a: null, b: null };
+
+    const Test = () => {
+      const refA = useRef<HTMLDivElement>(null);
+      const refB = useRef<HTMLDivElement>(null);
+      const combinedRef = useCombinedRefs(refA, refB, cbRef, undefined);
+      useEffect(() => {
+        refs.a = refA.current;
+        refs.b = refB.current;
+        return () => {
+          refs.a = refA.current;
+          refs.b = refB.current;
+        };
+      });
+      return <div ref={combinedRef} data-testid="div"></div>;
+    };
+
+    const { getByTestId, rerender } = render(createElement(Test));
+
+    const div = getByTestId("div");
+
+    expect(refs.a).toBe(div);
+    expect(refs.b).toBe(div);
+    expect(cbRef).toHaveBeenCalledWith(div);
+
+    rerender(<div />);
+
+    expect(cbRef).toHaveBeenCalledWith(null);
+    expect(refs.a).toBe(null);
+    expect(refs.b).toBe(null);
+  });
+});

package/src/hooks/useCombinedRefs.ts

@@ -0,0 +1,21 @@
+import { Ref, useCallback } from "react";
+
+export const useCombinedRefs = <T extends any>(...refs: (Ref<T> | undefined)[]): Ref<T> =>
+  useCallback(
+    (element: T) =>
+      refs.forEach((ref) => {
+        if (!ref) {
+          return;
+        }
+
+        // Ref can have two types - a function or an object. We treat each case.
+        if (typeof ref === "function") {
+          return ref(element);
+        }
+
+        // As per https://github.com/facebook/react/issues/13029
+        // it should be fine to set current this way.
+        (ref as any).current = element;
+      }),
+    refs,
+  );

package/src/hooks/useCopyToClipboard.ts

@@ -0,0 +1,28 @@
+import { useCallback, useState } from "react";
+
+type CopiedValue = string | null;
+
+type CopyFn = (text: string) => Promise<boolean>;
+
+export function useCopyToClipboard(): [CopiedValue, CopyFn] {
+  const [copiedText, setCopiedText] = useState<CopiedValue>(null);
+
+  const copy: CopyFn = useCallback(async (text) => {
+    if (!navigator?.clipboard) {
+      console.warn("Clipboard not supported");
+      return false;
+    }
+
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedText(text);
+      return true;
+    } catch (error) {
+      console.warn("Copy failed", error);
+      setCopiedText(null);
+      return false;
+    }
+  }, []);
+
+  return [copiedText, copy];
+}