@refinedev/devtools 1.0.0

package/src/components/devtools-pin.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { RefineDevtoolsIcon } from "./icons/devtools-icon";
+import { getPinButtonTransform } from "src/utilities";
+import { DevtoolsSelector } from "./devtools-selector";
+
+type Props = {
+    onClick?: () => void;
+    active?: boolean;
+    groupHover?: boolean;
+    onSelectorHighlight: (name: string) => void;
+    onSelectorOpen: () => void;
+};
+
+export const DevtoolsPin = ({
+    active,
+    onClick,
+    groupHover,
+    onSelectorHighlight,
+    onSelectorOpen,
+}: Props) => {
+    const [hover, setHover] = React.useState(false);
+
+    return (
+        <button
+            type="button"
+            style={{
+                position: "relative",
+                userSelect: "none",
+                WebkitUserSelect: "none",
+                background: "none",
+                border: "none",
+                padding: 0,
+                margin: 0,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontWeight: "bold",
+                color: "white",
+                cursor: "pointer",
+                width: "100%",
+                height: "100%",
+                transition: "all ease-in-out 0.2s",
+                transform: `scale(${hover ? 1.05 : 1}) ${getPinButtonTransform(
+                    groupHover,
+                )}`,
+                filter: `drop-shadow(0 0 ${
+                    hover ? "8px" : "5px"
+                } rgba(71, 235, 235, ${hover ? "0.5" : "0.25"}))`,
+            }}
+            onMouseOver={() => setHover(true)}
+            onMouseOut={() => setHover(false)}
+            onClick={onClick}
+        >
+            <RefineDevtoolsIcon active={active} hovered={hover} />
+            <DevtoolsSelector
+                onSelectorOpen={onSelectorOpen}
+                onHighlight={onSelectorHighlight}
+                groupHover={hover}
+            />
+        </button>
+    );
+};

package/src/components/devtools-selector.tsx

@@ -0,0 +1,127 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import { useSelector } from "src/utilities/use-selector";
+import { SelectorButtonIcon } from "./icons/selector-button";
+import { SelectorBox } from "./selector-box";
+import { SelectorHint } from "./selector-hint";
+
+type Props = {
+    onSelectorOpen: () => void;
+    onHighlight: (name: string) => void;
+    groupHover?: boolean;
+};
+
+export const DevtoolsSelector = ({
+    onSelectorOpen,
+    onHighlight,
+    groupHover,
+}: Props) => {
+    const [active, setActive] = React.useState(false);
+    const [hover, setHover] = React.useState(false);
+    const { rect, name } = useSelector(active);
+
+    const [selectorBoxRoot, setSelectorBoxRoot] =
+        React.useState<HTMLElement | null>(null);
+
+    React.useEffect(() => {
+        if (!selectorBoxRoot) {
+            const element = document.createElement("div");
+            element.id = "selector-box-root";
+
+            document.body.appendChild(element);
+
+            setSelectorBoxRoot(element);
+        }
+    }, []);
+
+    React.useEffect(() => {
+        if (active) {
+            document.body.style.cursor = "crosshair";
+        } else {
+            document.body.style.cursor = "default";
+        }
+    }, [active]);
+
+    React.useEffect(() => {
+        const onKeyDown = (e: KeyboardEvent) => {
+            if (!active) return;
+            if (!name) return;
+            if (e.code === "Space") {
+                e?.preventDefault();
+                e?.stopPropagation();
+                onHighlight(name);
+                setActive(false);
+            }
+        };
+
+        document.addEventListener("keydown", onKeyDown);
+
+        return () => {
+            document.removeEventListener("keydown", onKeyDown);
+        };
+    }, [name, onHighlight, active]);
+
+    React.useEffect(() => {
+        if (active) {
+            onSelectorOpen();
+        }
+    }, [active, onSelectorOpen]);
+
+    return (
+        <div
+            style={{
+                position: "absolute",
+                left: "calc((100px - ((100% - 42px) / 2)) + 7px)",
+                top: "calc((100% - 28px) / 2)",
+                transform: groupHover ? "translateX(0)" : "translateX(-40px)",
+                transitionDuration: "0.2s",
+                transitionProperty: "transform,opacity",
+                transitionTimingFunction: "ease-in-out",
+                pointerEvents: groupHover ? "auto" : "none",
+                height: 28,
+                width: 28,
+            }}
+        >
+            <div
+                role="button"
+                title="Element Selector"
+                onMouseOver={() => setHover(true)}
+                onMouseOut={() => setHover(false)}
+                onClick={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    (document?.activeElement as HTMLElement)?.blur();
+                    setActive((active) => !active);
+                }}
+                style={{
+                    width: 28,
+                    height: 28,
+                    border: "none",
+                    background: "none",
+                    outline: "none",
+                    margin: 0,
+                    padding: 0,
+                    cursor: "pointer",
+                    transform: `scale(${hover ? 1.05 : 1})`,
+                    transitionProperty: "transform,opacity",
+                    transitionTimingFunction: "ease-in-out",
+                    transitionDuration: "0.1s",
+                    opacity: groupHover ? 1 : 0,
+                }}
+            >
+                <SelectorButtonIcon
+                    width={28}
+                    height={28}
+                    style={{ pointerEvents: "none" }}
+                />
+            </div>
+            <SelectorHint active={active} groupHover={groupHover} />
+            {active &&
+                selectorBoxRoot &&
+                createPortal(
+                    <SelectorBox {...rect} name={name} />,
+                    selectorBoxRoot,
+                )}
+        </div>
+    );
+};

package/src/components/icons/devtools-icon.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+
+type Props = React.SVGProps<SVGSVGElement> & {
+    active?: boolean;
+    hovered?: boolean;
+};
+
+export const RefineDevtoolsIcon = ({ active, hovered, ...props }: Props) => (
+    <svg
+        width={42}
+        height={42}
+        viewBox="0 0 42 42"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M16.3043 1.10851C19.2603 -0.369505 22.7397 -0.369505 25.6957 1.10851L36.1957 6.35852C39.753 8.13713 42 11.7729 42 15.75V26.25C42 30.2271 39.753 33.8629 36.1957 35.6415L25.6957 40.8915C22.7397 42.3695 19.2603 42.3695 16.3043 40.8915L5.80426 35.6415C2.24702 33.8629 0 30.2271 0 26.25V15.75C0 11.7729 2.24702 8.13713 5.80426 6.35852L16.3043 1.10851Z"
+            fill="#1D1E30"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M14.7975 13.2C14.7975 9.77583 17.5733 7 20.9975 7C24.4217 7 27.1975 9.77583 27.1975 13.2V28.8C27.1975 32.2242 24.4217 35 20.9975 35C17.5733 35 14.7975 32.2242 14.7975 28.8V13.2ZM20.9975 8C18.1256 8 15.7975 10.3281 15.7975 13.2V28.8C15.7975 31.6719 18.1256 34 20.9975 34C23.8694 34 26.1975 31.6719 26.1975 28.8V13.2C26.1975 10.3281 23.8694 8 20.9975 8Z"
+            fill="url(#devtools_icon_gradient_1)"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M16.5279 2.05573C19.3431 0.648091 22.6569 0.648091 25.4721 2.05573L35.4721 7.05573C38.86 8.74965 41 12.2123 41 16V26C41 29.7877 38.86 33.2504 35.4721 34.9443L25.4721 39.9443C22.6569 41.3519 19.3431 41.3519 16.5279 39.9443L6.52786 34.9443C3.14002 33.2504 1 29.7877 1 26V16C1 12.2123 3.14002 8.74965 6.52786 7.05573L16.5279 2.05573ZM16.9751 2.95016C19.5088 1.68328 22.4912 1.68328 25.0249 2.95016L35.0249 7.95016C38.074 9.47468 40 12.5911 40 16V26C40 29.4089 38.074 32.5253 35.0249 34.0498L25.0249 39.0498C22.4912 40.3167 19.5088 40.3167 16.9751 39.0498L6.97508 34.0498C3.92602 32.5253 2 29.4089 2 26V16C2 12.5911 3.92602 9.47468 6.97508 7.95016L16.9751 2.95016Z"
+            fill="url(#devtools_icon_gradient_2)"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M16.9751 2.95016C19.5088 1.68328 22.4912 1.68328 25.0249 2.95016L35.0249 7.95016C38.074 9.47468 40 12.5911 40 16V26C40 29.4089 38.074 32.5253 35.0249 34.0498L25.0249 39.0498C22.4912 40.3167 19.5088 40.3167 16.9751 39.0498L6.97508 34.0498C3.92602 32.5253 2 29.4089 2 26V16C2 12.5911 3.92602 9.47468 6.97508 7.95016L16.9751 2.95016ZM20.9975 7C17.5733 7 14.7975 9.77583 14.7975 13.2V28.8C14.7975 32.2242 17.5733 35 20.9975 35C24.4217 35 27.1975 32.2242 27.1975 28.8V13.2C27.1975 9.77583 24.4217 7 20.9975 7Z"
+            fill="url(#devtools_icon_gradient_3)"
+        />
+        <circle
+            cx={21}
+            cy={13.3301}
+            r={4}
+            fill="url(#devtools_icon_gradient_2)"
+            style={{
+                transition: "transform ease-in-out 0.2s",
+                transform: `translateY(${
+                    active ? "0" : hovered ? "15px" : "15px"
+                })`,
+            }}
+        />
+        <defs>
+            <linearGradient
+                id="devtools_icon_gradient_1"
+                x1={21}
+                y1={7}
+                x2={21}
+                y2={35}
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#47EBEB" />
+                <stop offset={1} stopColor="#47EBEB" stopOpacity={0.5} />
+            </linearGradient>
+            <linearGradient
+                id="devtools_icon_gradient_2"
+                x1={21}
+                y1={1}
+                x2={21}
+                y2={41}
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#47EBEB" />
+                <stop offset={0.5} stopColor="#47EBEB" stopOpacity={0.5} />
+                <stop offset={1} stopColor="#47EBEB" stopOpacity={0.5} />
+            </linearGradient>
+            <radialGradient
+                id="devtools_icon_gradient_3"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientUnits="userSpaceOnUse"
+                gradientTransform="translate(21 1) rotate(90) scale(40)"
+            >
+                <stop stopColor="#47EBEB" stopOpacity={0} />
+                <stop offset={0.5} stopColor="#47EBEB" stopOpacity={0.25} />
+                <stop offset={1} stopColor="#47EBEB" stopOpacity={0.5} />
+            </radialGradient>
+        </defs>
+    </svg>
+);

package/src/components/icons/resize-handle-icon.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+export const ResizeHandleIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg
+        width={10}
+        height={26}
+        viewBox="0 0 10 26"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+        <rect x={0.5} y={0.5} width={9} height={25} rx={4.5} fill="#1D1E30" />
+        <path
+            d="M7 5C7 6.10457 6.10457 7 5 7C3.89543 7 3 6.10457 3 5C3 3.89543 3.89543 3 5 3C6.10457 3 7 3.89543 7 5Z"
+            fill="#303450"
+        />
+        <path
+            d="M7 13C7 14.1046 6.10457 15 5 15C3.89543 15 3 14.1046 3 13C3 11.8954 3.89543 11 5 11C6.10457 11 7 11.8954 7 13Z"
+            fill="#303450"
+        />
+        <path
+            d="M7 21C7 22.1046 6.10457 23 5 23C3.89543 23 3 22.1046 3 21C3 19.8954 3.89543 19 5 19C6.10457 19 7 19.8954 7 21Z"
+            fill="#303450"
+        />
+        <rect x={0.5} y={0.5} width={9} height={25} rx={4.5} stroke="#303450" />
+    </svg>
+);

package/src/components/icons/selector-button.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+
+export const SelectorButtonIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={42}
+        height={42}
+        viewBox="0 0 42 42"
+        fill="none"
+        {...props}
+    >
+        <g clipPath="url(#selector-button-a)">
+            <path
+                fill="#1D1E30"
+                fillRule="evenodd"
+                d="M16.304 1.109a10.5 10.5 0 0 1 9.392 0l10.5 5.25A10.5 10.5 0 0 1 42 15.75v10.5a10.5 10.5 0 0 1-5.804 9.392l-10.5 5.25a10.5 10.5 0 0 1-9.392 0l-10.5-5.25A10.5 10.5 0 0 1 0 26.25v-10.5a10.5 10.5 0 0 1 5.804-9.391l10.5-5.25Z"
+                clipRule="evenodd"
+            />
+            <path
+                fill="url(#selector-button-b)"
+                fillRule="evenodd"
+                d="M16.528 2.056a10 10 0 0 1 8.944 0l10 5A10 10 0 0 1 41 16v10a10 10 0 0 1-5.528 8.944l-10 5a10 10 0 0 1-8.944 0l-10-5A10 10 0 0 1 1 26V16a10 10 0 0 1 5.528-8.944l10-5Zm.447.894a9 9 0 0 1 8.05 0l10 5A9 9 0 0 1 40 16v10a9 9 0 0 1-4.975 8.05l-10 5a9 9 0 0 1-8.05 0l-10-5A9 9 0 0 1 2 26V16a9 9 0 0 1 4.975-8.05l10-5Z"
+                clipRule="evenodd"
+            />
+            <path
+                fill="url(#selector-button-c)"
+                fillRule="evenodd"
+                d="M16.975 2.95a9 9 0 0 1 8.05 0l10 5A9 9 0 0 1 40 16v10a9 9 0 0 1-4.975 8.05l-10 5a9 9 0 0 1-8.05 0l-10-5A9 9 0 0 1 2 26V16a9 9 0 0 1 4.975-8.05l10-5Z"
+                clipRule="evenodd"
+            />
+            <path
+                stroke="url(#selector-button-d)"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M32 21c0 6.075-4.925 11-11 11m11-11c0-6.075-4.925-11-11-11m11 11h-4.4M21 32c-6.075 0-11-4.925-11-11m11 11v-4.4M10 21c0-6.075 4.925-11 11-11M10 21h4.4M21 10v4.4"
+            />
+        </g>
+        <defs>
+            <radialGradient
+                id="selector-button-c"
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="matrix(0 40 -40 0 21 1)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#47EBEB" stopOpacity={0} />
+                <stop offset={0.5} stopColor="#47EBEB" stopOpacity={0.25} />
+                <stop offset={1} stopColor="#47EBEB" stopOpacity={0.5} />
+            </radialGradient>
+            <linearGradient
+                id="selector-button-b"
+                x1={21}
+                x2={21}
+                y1={1}
+                y2={41}
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#47EBEB" />
+                <stop offset={0.5} stopColor="#47EBEB" stopOpacity={0.5} />
+                <stop offset={1} stopColor="#47EBEB" stopOpacity={0.5} />
+            </linearGradient>
+            <linearGradient
+                id="selector-button-d"
+                x1={21}
+                y1={1}
+                x2={21}
+                y2={41}
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#47EBEB" />
+                <stop offset={0.5} stopColor="#47EBEB" stopOpacity={0.75} />
+                <stop offset={1} stopColor="#47EBEB" stopOpacity={0.5} />
+            </linearGradient>
+            <clipPath id="selector-button-a">
+                <path fill="#fff" d="M0 0h42v42H0z" />
+            </clipPath>
+        </defs>
+    </svg>
+);

package/src/components/resizable-pane.tsx

@@ -0,0 +1,264 @@
+import React from "react";
+import { Placement } from "src/interfaces/placement";
+import {
+    MIN_PANEL_HEIGHT,
+    MIN_PANEL_WIDTH,
+    getDefaultPanelSize,
+    getMaxPanelHeight,
+    getMaxPanelWidth,
+    getPanelPosition,
+    getPanelToggleTransforms,
+} from "src/utilities";
+import { ResizeHandleIcon } from "./icons/resize-handle-icon";
+
+type Props = {
+    placement: Placement;
+    defaultWidth?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    defaultHeight?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    children: ({ resizing }: { resizing: string | null }) => React.ReactNode;
+    onResize?: (width: number, height: number) => void;
+    visible?: boolean;
+};
+
+export const ResizablePane = ({ placement, visible, children }: Props) => {
+    const [hover, setHover] = React.useState(false);
+    const [resizing, setResizing] = React.useState<
+        "lx" | "rx" | "ty" | "by" | null
+    >(null);
+    const [resizePosition, setResizePosition] = React.useState<{
+        x: number;
+        y: number;
+    } | null>(null);
+    const [panelSize, setPanelSize] = React.useState<
+        Record<"width" | "height", number>
+    >(getDefaultPanelSize(placement));
+
+    React.useEffect(() => {
+        const handleResize = () => {
+            setPanelSize((p) => getDefaultPanelSize(placement, p));
+        };
+
+        handleResize();
+
+        window.addEventListener("resize", handleResize);
+
+        return () => {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, [placement]);
+
+    React.useEffect(() => {
+        const handleMouseUp = () => {
+            setResizing(null);
+        };
+
+        if (resizing !== null) {
+            window.addEventListener("mouseup", handleMouseUp);
+
+            return () => {
+                window.removeEventListener("mouseup", handleMouseUp);
+            };
+        }
+
+        return;
+    }, [resizing]);
+
+    React.useEffect(() => {
+        const currentCursor = document.body.style.cursor;
+
+        if (resizing?.includes("x")) {
+            document.body.style.cursor = "col-resize";
+        } else if (resizing?.includes("y")) {
+            document.body.style.cursor = "row-resize";
+        }
+
+        return () => {
+            document.body.style.cursor = currentCursor;
+        };
+    }, [resizing]);
+
+    React.useEffect(() => {
+        const handleMouseMove = (e: MouseEvent) => {
+            if (resizing?.[1] === "x") {
+                const diff = e.clientX - (resizePosition?.x ?? e.clientX);
+                const newWidth =
+                    panelSize.width + (resizing === "lx" ? -diff : diff) * 2;
+
+                setPanelSize((p) => ({
+                    ...p,
+                    width: Math.min(
+                        getMaxPanelWidth(placement),
+                        Math.max(MIN_PANEL_WIDTH, newWidth),
+                    ),
+                }));
+            } else if (resizing?.[1] === "y") {
+                const diff = e.clientY - (resizePosition?.y ?? e.clientY);
+                const newHeight =
+                    panelSize.height + (resizing === "ty" ? -diff : diff) * 1;
+
+                setPanelSize((p) => ({
+                    ...p,
+                    height: Math.min(
+                        getMaxPanelHeight(placement),
+                        Math.max(MIN_PANEL_HEIGHT, newHeight),
+                    ),
+                }));
+            }
+        };
+
+        if (resizing !== null) {
+            window.addEventListener("mousemove", handleMouseMove);
+
+            return () => {
+                window.removeEventListener("mousemove", handleMouseMove);
+            };
+        }
+
+        return;
+    }, [resizing, placement]);
+
+    return (
+        <div
+            style={{
+                position: "absolute",
+                borderRadius: "8px",
+                boxShadow: "0 0 10px rgba(0, 0, 0, 0.5)",
+                border: "1px solid rgba(0, 0, 0, 0.5)",
+                transitionProperty: "transform, opacity",
+                transitionTimingFunction: "ease-in-out",
+                transitionDuration: "0.2s",
+                ...getPanelPosition(placement),
+                opacity: visible ? 1 : 0,
+                transform: `${
+                    getPanelPosition(placement).transform
+                } ${getPanelToggleTransforms(visible ?? false)}`,
+                ...panelSize,
+            }}
+            onMouseEnter={() => {
+                setHover(true);
+            }}
+            onMouseLeave={() => {
+                setHover(false);
+            }}
+        >
+            {children({ resizing })}
+            {/*  */}
+            <React.Fragment>
+                <div
+                    style={{
+                        position: "absolute",
+                        left: 0,
+                        top: "50%",
+                        width: "10px",
+                        height: "26px",
+                        transform: "translateY(-13px) translateX(-5px)",
+                        cursor: "col-resize",
+                        transition: "opacity ease-in-out 0.2s",
+                        pointerEvents: hover || resizing ? "auto" : "none",
+                        opacity: hover || resizing ? 1 : 0,
+                    }}
+                    onMouseDown={(event) => {
+                        setResizing("lx");
+                        setResizePosition({
+                            x: event.clientX,
+                            y: event.clientY,
+                        });
+
+                        event.preventDefault();
+                    }}
+                >
+                    <ResizeHandleIcon />
+                </div>
+                <div
+                    style={{
+                        position: "absolute",
+                        right: 0,
+                        top: "50%",
+                        width: "10px",
+                        height: "26px",
+                        transform: `translateY(-13px) translateX(5px)`,
+                        cursor: "col-resize",
+                        transition: "opacity ease-in-out 0.2s",
+                        pointerEvents: hover || resizing ? "auto" : "none",
+                        opacity: hover || resizing ? 1 : 0,
+                    }}
+                    onMouseDown={(event) => {
+                        setResizing("rx");
+                        setResizePosition({
+                            x: event.clientX,
+                            y: event.clientY,
+                        });
+
+                        event.preventDefault();
+                    }}
+                >
+                    <ResizeHandleIcon />
+                </div>
+                <div
+                    style={{
+                        position: "absolute",
+                        left: "50%",
+                        top: 0,
+                        width: "26px",
+                        height: "10px",
+                        transform: "translateY(-5px) translateX(-13px)",
+                        cursor: "row-resize",
+                        transition: "opacity ease-in-out 0.2s",
+                        pointerEvents: hover || resizing ? "auto" : "none",
+                        opacity: hover || resizing ? 1 : 0,
+                    }}
+                    onMouseDown={(event) => {
+                        setResizing("ty");
+                        setResizePosition({
+                            x: event.clientX,
+                            y: event.clientY,
+                        });
+
+                        event.preventDefault();
+                    }}
+                >
+                    <ResizeHandleIcon
+                        style={{
+                            transform: "rotate(90deg)",
+                            transformOrigin: "13px 13px",
+                        }}
+                    />
+                </div>
+                <div
+                    style={{
+                        position: "absolute",
+                        left: "50%",
+                        bottom: 0,
+                        width: "26px",
+                        height: "10px",
+                        transform: "translateY(5px) translateX(-13px)",
+                        cursor: "row-resize",
+                        transition: "opacity ease-in-out 0.2s",
+                        pointerEvents: hover || resizing ? "auto" : "none",
+                        opacity: hover || resizing ? 1 : 0,
+                    }}
+                    onMouseDown={(event) => {
+                        setResizing("by");
+                        setResizePosition({
+                            x: event.clientX,
+                            y: event.clientY,
+                        });
+
+                        event.preventDefault();
+                    }}
+                >
+                    <ResizeHandleIcon
+                        style={{
+                            transform: "rotate(90deg)",
+                            transformOrigin: "13px 13px",
+                        }}
+                    />
+                </div>
+            </React.Fragment>
+        </div>
+    );
+};