@berenjena/react-dev-panel 1.0.1 → 1.0.4

package/dist/utils/formatHotkey/formatHotkey.d.ts

@@ -1,4 +1,4 @@
-import { HotkeyConfig } from '../../types';
+import { HotkeyConfig } from '../../hooks/useHotkeys/types';
 /**
  * Utility function to format hotkey combination as a human-readable string
  *

package/dist/utils/getConstrainedPosition/getConstrainedPosition.d.ts

@@ -1,4 +1,4 @@
-import { Position } from '../../types';
+import { Position } from '../../components/DevPanel/types';
 /**
  * Calculates the constrained position within viewport boundaries
  * @param position - The desired position

package/dist/utils/getCurrentElementPosition/getCurrentElementPosition.d.ts

@@ -1,4 +1,4 @@
-import { Position } from '../../types';
+import { Position } from '../../components/DevPanel/types';
 /**
  * Gets the current position of an element relative to the viewport
  * @param element - The HTML element

package/dist/utils/getPositionAdjustment/getPositionAdjustment.d.ts

@@ -4,7 +4,7 @@
  * @returns Object containing the current position, constrained position, and whether adjustment is needed
  */
 export declare function getPositionAdjustment(element: HTMLElement): {
-    currentPosition: import('../../types').Position;
-    constrainedPosition: import('../../types').Position;
+    currentPosition: import('../../components/DevPanel/types').Position;
+    constrainedPosition: import('../../components/DevPanel/types').Position;
     needsAdjustment: boolean;
 };

package/dist/utils/hasControlChanged/hasControlChanged.js

@@ -1,14 +1,14 @@
-function s(n, r) {
+function a(n, r) {
   if (!r) return !0;
-  const i = Object.keys(n), l = Object.keys(r);
-  if (i.length !== l.length) return !0;
+  const i = Object.keys(n), s = Object.keys(r);
+  if (i.length !== s.length) return !0;
   for (const u of i) {
     const t = n[u], e = r[u];
-    if (!e || t.type !== e.type || t.label !== e.label || t.disabled !== e.disabled || "value" in t && "value" in e && t.value !== e.value || t.type === "number" && e.type === "number" && (t.min !== e.min || t.max !== e.max || t.step !== e.step) || t.type === "select" && e.type === "select" && JSON.stringify(t.options) !== JSON.stringify(e.options) || t.type === "text" && e.type === "text" && t.placeholder !== e.placeholder)
+    if (!e || t.type !== e.type || t.label !== e.label || t.disabled !== e.disabled || "value" in t && "value" in e && t.value !== e.value || t.type === "number" && e.type === "number" && (t.min !== e.min || t.max !== e.max || t.step !== e.step) || t.type === "range" && e.type === "range" && (t.min !== e.min || t.max !== e.max || t.step !== e.step) || t.type === "date" && e.type === "date" && (t.min !== e.min || t.max !== e.max) || t.type === "select" && e.type === "select" && JSON.stringify(t.options) !== JSON.stringify(e.options) || t.type === "text" && e.type === "text" && t.placeholder !== e.placeholder)
       return !0;
   }
   return !1;
 }
 export {
-  s as hasControlsChanged
+  a as hasControlsChanged
 };

package/dist/utils/index.d.ts

@@ -7,4 +7,3 @@ export * from './getCurrentElementPosition';
 export * from './getPositionAdjustment';
 export * from './hasControlChanged';
 export * from './isMacOS';
-export * from './store';

package/dist/utils/index.js

@@ -1,27 +1,20 @@
 import { className as t } from "./className/className.js";
-import { createHotkey as s } from "./createHotkey/createHotkey.js";
-import { debounce as a } from "./debounce/debounce.js";
-import { formatHotkey as m } from "./formatHotkey/formatHotkey.js";
-import { getConstrainedPosition as f } from "./getConstrainedPosition/getConstrainedPosition.js";
-import { getCurrentElementPosition as x } from "./getCurrentElementPosition/getCurrentElementPosition.js";
-import { getPositionAdjustment as u } from "./getPositionAdjustment/getPositionAdjustment.js";
-import { hasControlsChanged as v } from "./hasControlChanged/hasControlChanged.js";
-import { isMacOS as d } from "./isMacOS/isMacOS.js";
-import { useDevPanelActions as g, useDevPanelCollapsed as S, useDevPanelPosition as b, useDevPanelSections as h, useDevPanelStore as k, useDevPanelVisible as y } from "./store/store.js";
+import { createHotkey as m } from "./createHotkey/createHotkey.js";
+import { debounce as f } from "./debounce/debounce.js";
+import { formatHotkey as p } from "./formatHotkey/formatHotkey.js";
+import { getConstrainedPosition as a } from "./getConstrainedPosition/getConstrainedPosition.js";
+import { getCurrentElementPosition as c } from "./getCurrentElementPosition/getCurrentElementPosition.js";
+import { getPositionAdjustment as g } from "./getPositionAdjustment/getPositionAdjustment.js";
+import { hasControlsChanged as l } from "./hasControlChanged/hasControlChanged.js";
+import { isMacOS as P } from "./isMacOS/isMacOS.js";
 export {
   t as className,
-  s as createHotkey,
-  a as debounce,
-  m as formatHotkey,
-  f as getConstrainedPosition,
-  x as getCurrentElementPosition,
-  u as getPositionAdjustment,
-  v as hasControlsChanged,
-  d as isMacOS,
-  g as useDevPanelActions,
-  S as useDevPanelCollapsed,
-  b as useDevPanelPosition,
-  h as useDevPanelSections,
-  k as useDevPanelStore,
-  y as useDevPanelVisible
+  m as createHotkey,
+  f as debounce,
+  p as formatHotkey,
+  a as getConstrainedPosition,
+  c as getCurrentElementPosition,
+  g as getPositionAdjustment,
+  l as hasControlsChanged,
+  P as isMacOS
 };

package/package.json

@@ -1,4 +1,8 @@
 {
+	"private": false,
+	"version": "1.0.4",
+	"type": "module",
+	"module": "./dist/index.js",
 	"name": "@berenjena/react-dev-panel",
 	"description": "A React development panel with various tools and utilities.",
 	"keywords": [
@@ -14,24 +18,19 @@
 		"type": "git",
 		"url": "git+https://github.com/Berenjenas/react-dev-panel.git"
 	},
-	"private": false,
-	"version": "1.0.1",
-	"type": "module",
-	"files": [
-		"dist"
-	],
-	"main": "./dist/index.umd.js",
-	"module": "./dist/index.js",
 	"exports": {
 		".": {
 			"import": "./dist/index.js",
-			"require": "./dist/index.umd.js"
-		},
-		"./styles.css": "./dist/styles.css"
+			"types": "./dist/index.d.ts"
+		}
 	},
 	"sideEffects": [
-		"*.css"
+		"**/*.css"
+	],
+	"files": [
+		"dist"
 	],
+	"types": "./dist/index.d.ts",
 	"license": "MIT",
 	"contributors": [
 		{
@@ -51,21 +50,28 @@
 		}
 	],
 	"scripts": {
-		"dev": "vite",
 		"build": "tsc -b && vite build",
-		"lint": "eslint .",
-		"preview": "vite preview",
+		"lint": "eslint . --ext ts,tsx",
+		"lint:fix": "eslint . --ext ts,tsx --fix",
+		"format": "prettier --check .",
+		"format:fix": "prettier --write .",
+		"stylelint": "stylelint **/*.css",
+		"stylelint:fix": "stylelint **/*.css --fix",
 		"storybook": "storybook dev -p 6006",
-		"build-storybook": "storybook build",
-		"test": "vitest"
+		"build-storybook": "storybook build  --output-dir docs",
+		"deploy-storybook": "npm run build-storybook && gh-pages -d docs",
+		"test": "vitest",
+		"test:ui": "vitest --ui",
+		"coverage": "vitest run --coverage",
+		"prepublishOnly": "vitest run && npm run build"
 	},
 	"peerDependencies": {
 		"react": ">=18.0.0",
-		"react-dom": ">=18.0.0",
-		"zustand": "^5.0.6"
+		"react-dom": ">=18.0.0"
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.30.1",
+		"@rollup/plugin-terser": "^0.4.4",
 		"@storybook/addon-docs": "^9.0.17",
 		"@storybook/react-vite": "^9.0.17",
 		"@types/node": "^24.0.15",
@@ -79,6 +85,7 @@
 		"eslint-plugin-react-refresh": "^0.4.20",
 		"eslint-plugin-simple-import-sort": "^12.1.1",
 		"eslint-plugin-storybook": "^9.0.17",
+		"gh-pages": "^6.3.0",
 		"glob": "^11.0.3",
 		"globals": "^16.3.0",
 		"happy-dom": "^18.0.1",
@@ -91,7 +98,6 @@
 		"vite": "^7.0.4",
 		"vite-plugin-dts": "^4.5.4",
 		"vite-plugin-lib-inject-css": "^2.2.2",
-		"vitest": "^3.2.4",
-		"zustand": "^5.0.6"
+		"vitest": "^3.2.4"
 	}
 }

package/dist/assets/SelectControl.css

@@ -1 +0,0 @@
-._select_1w3k9_1{background-color:#1e2233;border:none;color:#fff;padding:4px}

package/dist/components/logger.d.ts

@@ -1,5 +0,0 @@
-type LoggerProps = {
-    items: object;
-};
-export declare function Logger({ items }: LoggerProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/logger.js

@@ -1,7 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-function i({ items: e }) {
-  return /* @__PURE__ */ r("pre", { children: /* @__PURE__ */ r("code", { children: JSON.stringify(e, null, 2) }) });
-}
-export {
-  i as Logger
-};

package/dist/types.d.ts

@@ -1,18 +0,0 @@
-export interface Position {
-	x: number;
-	y: number;
-}
-
-export interface HotkeyConfig {
-	key: string;
-	description?: string;
-	ctrlKey?: boolean;
-	shiftKey?: boolean;
-	altKey?: boolean;
-	metaKey?: boolean;
-	preventDefault?: boolean;
-	stopPropagation?: boolean;
-	enabled?: boolean;
-	target?: HTMLElement | Window | Document;
-	action: (event: KeyboardEvent) => void;
-}

package/dist/utils/store/index.d.ts

@@ -1 +0,0 @@
-export * from './store';

package/dist/utils/store/index.js

@@ -1,9 +0,0 @@
-import { useDevPanelActions as l, useDevPanelCollapsed as n, useDevPanelPosition as o, useDevPanelSections as a, useDevPanelStore as P, useDevPanelVisible as i } from "./store.js";
-export {
-  l as useDevPanelActions,
-  n as useDevPanelCollapsed,
-  o as useDevPanelPosition,
-  a as useDevPanelSections,
-  P as useDevPanelStore,
-  i as useDevPanelVisible
-};

package/dist/utils/store/store.d.ts

@@ -1,40 +0,0 @@
-import { ControlsGroup } from '../../components/ControlRenderer/controls/types';
-import { DevPanelStore } from '../../components/DevPanel/types';
-export declare const useDevPanelStore: import('zustand').UseBoundStore<Omit<import('zustand').StoreApi<DevPanelStore>, "persist"> & {
-    persist: {
-        setOptions: (options: Partial<import('zustand/middleware').PersistOptions<DevPanelStore, {
-            isVisible: boolean;
-            isCollapsed: boolean;
-            position: import('../../types').Position;
-            sectionCollapseState: {
-                [k: string]: boolean | undefined;
-            };
-        }>>) => void;
-        clearStorage: () => void;
-        rehydrate: () => Promise<void> | void;
-        hasHydrated: () => boolean;
-        onHydrate: (fn: (state: DevPanelStore) => void) => () => void;
-        onFinishHydration: (fn: (state: DevPanelStore) => void) => () => void;
-        getOptions: () => Partial<import('zustand/middleware').PersistOptions<DevPanelStore, {
-            isVisible: boolean;
-            isCollapsed: boolean;
-            position: import('../../types').Position;
-            sectionCollapseState: {
-                [k: string]: boolean | undefined;
-            };
-        }>>;
-    };
-}>;
-export declare const useDevPanelVisible: () => boolean;
-export declare const useDevPanelCollapsed: () => boolean;
-export declare const useDevPanelPosition: () => import('../../types').Position;
-export declare const useDevPanelSections: () => Record<string, import('../../components/DevPanel/types').DevPanelSection>;
-export declare const useDevPanelActions: () => {
-    setVisible: (visible: boolean) => void;
-    setCollapsed: (collapsed: boolean) => void;
-    setPosition: (position: import('../../types').Position) => void;
-    registerSection: (name: string, controls: ControlsGroup) => void;
-    unregisterSection: (name: string) => void;
-    toggleSectionCollapse: (name: string) => void;
-    reset: () => void;
-};

package/dist/utils/store/store.js

@@ -1,103 +0,0 @@
-import { create as a } from "zustand";
-import { persist as d } from "zustand/middleware";
-import { useShallow as C } from "zustand/react/shallow";
-const c = { x: 20, y: 20 }, t = a()(
-  d(
-    (e) => ({
-      // State
-      isVisible: !1,
-      isCollapsed: !1,
-      sections: {},
-      position: c,
-      // Actions
-      setVisible: (s) => {
-        e({ isVisible: s });
-      },
-      setCollapsed: (s) => {
-        e({ isCollapsed: s });
-      },
-      setPosition: (s) => {
-        e({ position: s });
-      },
-      registerSection: (s, i) => {
-        e((o) => {
-          const l = o.sections[s];
-          let n = !1;
-          try {
-            const r = localStorage.getItem("berenjena-dev-panel-storage");
-            r && (n = JSON.parse(r).state?.sectionCollapseState?.[s] ?? !1);
-          } catch {
-          }
-          const p = l?.isCollapsed ?? n;
-          return {
-            sections: {
-              ...o.sections,
-              [s]: {
-                name: s,
-                controls: i,
-                isCollapsed: p
-              }
-            }
-          };
-        });
-      },
-      unregisterSection: (s) => {
-        e((i) => {
-          const { [s]: o, ...l } = i.sections;
-          return { sections: l };
-        });
-      },
-      toggleSectionCollapse: (s) => {
-        e((i) => {
-          const o = i.sections[s];
-          return o ? {
-            sections: {
-              ...i.sections,
-              [s]: {
-                ...o,
-                isCollapsed: !o.isCollapsed
-              }
-            }
-          } : i;
-        });
-      },
-      reset: () => {
-        e({
-          isVisible: !1,
-          isCollapsed: !1,
-          sections: {},
-          position: c
-        });
-      }
-    }),
-    {
-      name: "dev-panel-storage",
-      partialize: (e) => ({
-        isVisible: e.isVisible,
-        isCollapsed: e.isCollapsed,
-        position: e.position,
-        // DO NOT persist sections - they are dynamic and are recreated on mount
-        // Only save the collapse state of each section
-        sectionCollapseState: Object.fromEntries(Object.entries(e.sections).map(([s, i]) => [s, i.isCollapsed]))
-      })
-    }
-  )
-), f = () => t((e) => e.isVisible), P = () => t((e) => e.isCollapsed), V = () => t((e) => e.position), v = () => t((e) => e.sections), m = () => t(
-  C((e) => ({
-    setVisible: e.setVisible,
-    setCollapsed: e.setCollapsed,
-    setPosition: e.setPosition,
-    registerSection: e.registerSection,
-    unregisterSection: e.unregisterSection,
-    toggleSectionCollapse: e.toggleSectionCollapse,
-    reset: e.reset
-  }))
-);
-export {
-  m as useDevPanelActions,
-  P as useDevPanelCollapsed,
-  V as useDevPanelPosition,
-  v as useDevPanelSections,
-  t as useDevPanelStore,
-  f as useDevPanelVisible
-};

package/dist/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />