eddev 0.3.35 → 2.0.0-beta.2

package/dist/app/lib/devtools/components/BreakpointIndicator.js

@@ -0,0 +1,79 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useTailwindConfig } from "../hooks/useTailwind.js";
+import { usePersistState } from "../hooks/usePersistState.js";
+function parseBreakpointMin(breakpoint) {
+    return parseInt(breakpoint);
+}
+const COLORS = [
+    ["#ff5555", "#ffffff"],
+    ["#55ff55", "#000000"],
+    ["#5555ff", "#ffffff"],
+    ["#ff55ff", "#ffffff"],
+    ["#ffff55", "#000000"],
+    ["#55ffff", "#000000"],
+];
+function getColors(index) {
+    const color = COLORS[index % COLORS.length] ?? ["#000", "#fff"];
+    return {
+        backgroundColor: color[0],
+        color: color[1],
+    };
+}
+export function BreakpointIndicator() {
+    const ref = useRef(null);
+    const tw = useTailwindConfig();
+    const [activeSize, setActiveSize] = useState(-1);
+    const [width, setWidth] = useState(window.innerWidth);
+    const [expanded, setExpanded] = usePersistState("breakpointIndicatorExpanded", false);
+    // Convert the screens into a list of breakpoints with a min
+    const screens = useMemo(() => {
+        if (!tw?.theme?.screens)
+            return [];
+        const definedScreens = Object.entries(tw?.theme?.screens)
+            .map(([key, value]) => ({
+            name: key,
+            min: parseBreakpointMin(value),
+        }))
+            .filter((screen) => screen.min > 0);
+        return [
+            {
+                name: "BASE",
+                min: 0,
+            },
+            ...definedScreens,
+        ]
+            .sort((a, b) => a.min - b.min)
+            .map((screen, i, arr) => ({
+            ...screen,
+            max: arr[i + 1] ? arr[i + 1].min - 1 : undefined,
+        }));
+    }, [tw?.theme?.screens]);
+    const maxSize = screens[screens.length - 1].min;
+    useEffect(() => {
+        const update = () => {
+            setWidth(window.innerWidth);
+            setActiveSize(screens.findLastIndex((screen) => window.innerWidth >= screen.min));
+        };
+        update();
+        window.addEventListener("resize", update);
+        return () => window.removeEventListener("resize", update);
+    }, [screens]);
+    const screen = screens[activeSize];
+    const globalProgress = width / maxSize;
+    return (_jsx("div", { ref: ref, "data-breakpoint": true, className: "fixed left-2 bottom-2 z-[999999999999999]", onClick: () => setExpanded(!expanded), children: !!screens && !!screen && (_jsx(_Fragment, { children: expanded ? (_jsx("div", { className: "btn w-[400px] bg-black px-2", children: _jsxs("div", { className: "relative w-full h-full cursor-pointer", children: [_jsxs("div", { className: "absolute bottom-[-3px] -translate-x-1/2 -translate-y-1/2 leading-none text-[8px] text-white", style: { left: `calc(min(${globalProgress},1) * 100%)` }, children: ["\u23F6 ", _jsxs("span", { className: globalProgress < 0.85 ? `absolute left-2` : `absolute right-2`, children: [width, "px"] })] }), screens.map((screen, i) => {
+                            const colors = getColors(i);
+                            const active = i === activeSize;
+                            const last = i === screens.length - 1;
+                            return (_jsxs("div", { className: "absolute flex-1 flex flex-col data-[disabled]:opacity-60 transition-opacity", "data-disabled": active ? undefined : "", style: last
+                                    ? {
+                                        right: 0,
+                                    }
+                                    : {
+                                        left: `${(screen.min / maxSize) * 100}%`,
+                                        width: `${(((screen.max ?? maxSize) - screen.min) / maxSize) * 100}%`,
+                                    }, children: [_jsx("span", { className: "text-[8px] text-neutral-300 leading-normal", style: { color: active ? colors.backgroundColor : undefined }, children: screen.name }), !last && _jsx("span", { className: "h-[1px]", style: colors })] }, screen.name));
+                        })] }) })) : (
+            // Condensed
+            _jsx("div", { className: "btn px-3 cursor-pointer", style: getColors(activeSize), children: screen.name })) })) }));
+}

package/{dev-ui → dist/app/lib/devtools}/components/DevUI.d.ts

@@ -1 +1,2 @@
+import "../../../../../css/devtools.css";
 export default function DevUI(): import("react/jsx-runtime").JSX.Element;

package/dist/app/lib/devtools/components/DevUI.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "../../../../../css/devtools.css";
+import { BreakpointIndicator } from "./BreakpointIndicator";
+export default function DevUI() {
+    return (_jsx("div", { className: "eddev-ui", children: _jsx(BreakpointIndicator, {}) }));
+}

package/dist/app/lib/devtools/hooks/usePersistState.js

@@ -0,0 +1,31 @@
+import { useState } from "react";
+const get = (id, fallback = undefined) => {
+    if (typeof localStorage === "undefined") {
+        return fallback;
+    }
+    const value = localStorage.getItem("devui_" + id);
+    if (value !== null) {
+        try {
+            return JSON.parse(value);
+        }
+        catch (err) {
+            return fallback;
+        }
+    }
+    else {
+        return fallback;
+    }
+};
+const set = (id, value) => {
+    localStorage.setItem("devui_" + id, JSON.stringify(value));
+};
+export function usePersistState(id, initial) {
+    const [value, setValue] = useState(() => get(id, initial));
+    return [
+        value,
+        (value) => {
+            set(id, value);
+            setValue(value);
+        },
+    ];
+}