@berenjena/react-dev-panel 2.0.0 → 2.2.0

package/dist/components/ControlRenderer/controls/TextControl/TextControl.d.ts

@@ -1,40 +0,0 @@
-import { TextControlProps } from './types';
-/**
- * Component that renders a text input control with configurable event handling
- *
- * @param props - The component props
- * @param props.control - The text control configuration object
- * @param props.control.type - The control type, must be 'text'
- * @param props.control.value - The current string value of the text input
- * @param props.control.placeholder - Optional placeholder text displayed when input is empty
- * @param props.control.event - When to trigger onChange: "onChange" (real-time) or "onBlur" (on focus loss). Defaults to "onChange"
- * @param props.control.onChange - Callback function triggered when text value changes
- * @param props.control.disabled - Optional flag to disable the control
- * @returns JSX element representing the text input control
- *
- * @example
- * ```typescript
- * // Real-time updates (default behavior)
- * <TextControl control={{
- *   type: 'text',
- *   value: 'John Doe',
- *   placeholder: 'Enter your full name',
- *   event: 'onChange',
- *   onChange: (value) => setUserName(value),
- *   disabled: false
- * }} />
- * ```
- *
- * @example
- * ```typescript
- * // Updates only when losing focus
- * <TextControl control={{
- *   type: 'text',
- *   value: 'search query',
- *   placeholder: 'Type to search...',
- *   event: 'onBlur',
- *   onChange: (value) => console.log('Search term:', value)
- * }} />
- * ```
- */
-export declare function TextControl({ control }: TextControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ControlRenderer/controls/TextControl/TextControl.js

@@ -1,30 +0,0 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useState as h, useEffect as i } from "react";
-import { Input as s } from "../../../Input/Input.js";
-function v({ control: e }) {
-  const n = e.event || "onChange", [l, u] = h(e.value);
-  function o(t) {
-    const a = t.target.value;
-    u(a), n === "onChange" && e.onChange(a);
-  }
-  function r(t) {
-    const a = t.target.value;
-    n === "onBlur" && e.onChange(a);
-  }
-  return i(() => {
-    u(e.value);
-  }, [e.value]), /* @__PURE__ */ f(
-    s,
-    {
-      type: "text",
-      value: l,
-      placeholder: e.placeholder,
-      disabled: e.disabled,
-      onChange: o,
-      ...n === "onBlur" && { onBlur: r }
-    }
-  );
-}
-export {
-  v as TextControl
-};

package/dist/components/DevPanel/DevPanel.d.ts

@@ -1,11 +0,0 @@
-import { DevPanelProps } from './types';
-/**
- * Development panel component
- * @returns The development panel component, if the environment is not development, it will return null
- *
- * @example
- * ```typescript
- * <DevPanel />
- * ```
- */
-export declare function DevPanel({ panelTitle, ...props }: DevPanelProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/DevPanel/DevPanel.js

@@ -1,72 +0,0 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { useCallback as D, useEffect as y } from "react";
-import { useDragAndDrop as b } from "../../hooks/useDragAndDrop/useDragAndDrop.js";
-import { useHotkey as w } from "../../hooks/useHotkeys/useHotkey.js";
-import { useDevPanelSections as K } from "../../store/SectionsStore.js";
-import { useDevPanelThemeActions as N } from "../../store/ThemeStore.js";
-import { useDevPanelUI as k } from "../../store/UIStore.js";
-import { className as x } from "../../utils/className/className.js";
-import { EmptyContent as E } from "../EmptyContent/EmptyContent.js";
-import { Icon as f } from "../Icon/index.js";
-import { Section as j } from "../Section/Section.js";
-import '../../assets/DevPanel.css';const A = "_devPanelContainer_vacct_132", S = "_header_vacct_171", H = "_title_vacct_186", I = "_button_vacct_197", T = "_collapsed_vacct_233", V = "_content_vacct_240", t = {
-  devPanelContainer: A,
-  header: S,
-  title: H,
-  button: I,
-  collapsed: T,
-  content: V
-}, O = {
-  ctrlKey: !0,
-  shiftKey: !0,
-  key: "a",
-  altKey: !1,
-  metaKey: !1
-};
-function Q({ panelTitle: h = "Dev panel", ...o }) {
-  const { isVisible: s, isCollapsed: n, position: a, setVisible: l, setCollapsed: u, setPosition: c } = k(), { setTheme: r } = N(), v = K(), p = D(
-    (i) => {
-      c(i);
-    },
-    [c]
-  ), { isDragging: _, elementRef: C, handlePointerDown: g } = b({
-    onPositionChange: p
-  });
-  if (w({
-    description: "Show Dev Panel",
-    preventDefault: !0,
-    action: () => l(!s),
-    ...O,
-    ...o.hotKeyConfig,
-    target: window
-  }), y(() => {
-    o.theme && r(o.theme);
-  }, [o.theme, r]), !s)
-    return null;
-  const m = Object.entries(v);
-  return /* @__PURE__ */ d(
-    "div",
-    {
-      ref: C,
-      ...x(t.devPanelContainer, {
-        [t.dragging]: _
-      }),
-      style: {
-        left: a.x,
-        top: a.y,
-        height: n ? "auto" : void 0
-      },
-      children: [
-        /* @__PURE__ */ d("div", { className: t.header, onPointerDown: g, children: [
-          /* @__PURE__ */ e("button", { className: t.button, onClick: () => u(!n), title: n ? "Expand" : "Collapse", children: /* @__PURE__ */ e(f, { name: "ArrowDown", className: n ? t.collapsed : void 0 }) }),
-          /* @__PURE__ */ e("div", { className: t.title, children: h }),
-          /* @__PURE__ */ e("button", { className: t.button, onClick: () => l(!1), title: "Close", children: /* @__PURE__ */ e(f, { name: "Close" }) })
-        ] }),
-        !n && /* @__PURE__ */ e("div", { className: t.content, children: m.length ? m.map(([i, P]) => /* @__PURE__ */ e(j, { sectionName: i, section: P }, `section-${i}`)) : /* @__PURE__ */ e(E, {}) })
-      ]
-    }
-  );
-}
-export {
-  Q as DevPanel
-};

package/dist/components/DevPanelPortal/DevPanelPortal.d.ts

@@ -1,8 +0,0 @@
-/**
- * Portal component that renders DevPanel using React's createPortal.
- * Automatically subscribes to DevPanelManager prop changes and renders
- * the DevPanel with merged props into document.body.
- *
- * @returns DevPanel rendered as a portal in document.body
- */
-export declare const DevPanelPortal: () => import('react').ReactPortal;

package/dist/components/DevPanelPortal/DevPanelPortal.js

@@ -1,17 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useState as a, useEffect as m } from "react";
-import { createPortal as c } from "react-dom";
-import { DevPanelManager as r } from "../../managers/DevPanelManager.js";
-import { DevPanel as p } from "../DevPanel/DevPanel.js";
-const b = () => {
-  const [t, e] = a({});
-  return m(() => {
-    const o = r.getInstance().getAllProps();
-    return e(o), r.getInstance().onPropsChange((n) => {
-      e(n);
-    });
-  }, []), c(/* @__PURE__ */ s(p, { ...t }), document.body);
-};
-export {
-  b as DevPanelPortal
-};

package/dist/components/EmptyContent/EmptyContent.d.ts

@@ -1 +0,0 @@
-export declare function EmptyContent(): import("react/jsx-runtime").JSX.Element;

package/dist/components/EmptyContent/EmptyContent.js

@@ -1,18 +0,0 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import '../../assets/EmptyContent.css';const s = "_empty_1bkns_1", o = {
-  empty: s
-};
-function r() {
-  return /* @__PURE__ */ t("div", { className: o.empty, children: [
-    "No controls registered yet.",
-    /* @__PURE__ */ e("br", {}),
-    " ",
-    /* @__PURE__ */ e("br", {}),
-    "Use ",
-    /* @__PURE__ */ e("code", { children: "useDevPanel()" }),
-    " to add controls."
-  ] });
-}
-export {
-  r as EmptyContent
-};

package/dist/components/Input/Input.d.ts

@@ -1 +0,0 @@
-export declare function Input(props: React.InputHTMLAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Input/Input.js

@@ -1,10 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import '../../assets/Input.css';const p = "_input_pspvf_132", s = {
-  input: p
-};
-function i(t) {
-  return /* @__PURE__ */ n("input", { ...t, className: s.input });
-}
-export {
-  i as Input
-};

package/dist/components/Section/Section.d.ts

@@ -1,7 +0,0 @@
-import { DevPanelSection } from '../DevPanel/types';
-type SectionProps = {
-    sectionName: string;
-    section: DevPanelSection;
-};
-export declare function Section({ sectionName, section }: SectionProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Section/Section.js

@@ -1,25 +0,0 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import { ControlRenderer as i } from "../ControlRenderer/ControlRenderer.js";
-import { useDevPanelSectionActions as r } from "../../store/SectionsStore.js";
-import { Icon as p } from "../Icon/index.js";
-import '../../assets/Section.css';const d = "_section_plx7y_1", _ = "_header_plx7y_9", m = "_title_plx7y_28", g = "_toggle_plx7y_35", h = "_collapsed_plx7y_45", x = "_content_plx7y_54", e = {
-  section: d,
-  header: _,
-  title: m,
-  toggle: g,
-  collapsed: h,
-  content: x
-};
-function N({ sectionName: s, section: t }) {
-  const { toggleSectionCollapse: c } = r();
-  return /* @__PURE__ */ n("div", { className: e.section, children: [
-    /* @__PURE__ */ n("div", { className: e.header, onClick: () => c(s), children: [
-      /* @__PURE__ */ o("span", { className: e.title, children: t.name }),
-      /* @__PURE__ */ o("span", { className: e.toggle, children: /* @__PURE__ */ o(p, { name: "ArrowDown", className: t.isCollapsed ? e.collapsed : void 0 }) })
-    ] }),
-    !t.isCollapsed && /* @__PURE__ */ o("div", { className: e.content, children: Object.entries(t.controls).map(([l, a]) => /* @__PURE__ */ o(i, { name: l, control: a }, l)) })
-  ] });
-}
-export {
-  N as Section
-};

package/dist/components/Select/Select.d.ts

@@ -1 +0,0 @@
-export declare function Select(props: React.SelectHTMLAttributes<HTMLSelectElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/Select.js

@@ -1,10 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import '../../assets/Select.css';const s = "_select_ia86w_132", c = {
-  select: s
-};
-function o(e) {
-  return /* @__PURE__ */ t("select", { ...e, className: c.select });
-}
-export {
-  o as Select
-};

package/dist/hooks/useDebounceCallback/useDebounceCallback.d.ts

@@ -1,8 +0,0 @@
-/**
- * Creates a debounced version of a callback.
- *
- * @param callback - Function to debounce
- * @param delay - Delay in ms before calling the callback
- * @returns A debounced version of the callback
- */
-export declare function useDebouncedCallback<T extends (...args: Parameters<T>) => void>(callback: T, delay: number): (...args: Parameters<T>) => void;

package/dist/hooks/useDebounceCallback/useDebounceCallback.js

@@ -1,17 +0,0 @@
-import { useRef as n, useEffect as c, useCallback as o } from "react";
-function f(r, t) {
-  const e = n(null);
-  return c(() => () => {
-    e.current && clearTimeout(e.current);
-  }, []), o(
-    (...u) => {
-      e.current && clearTimeout(e.current), e.current = window.setTimeout(() => {
-        r(...u);
-      }, t);
-    },
-    [r, t]
-  );
-}
-export {
-  f as useDebouncedCallback
-};

package/dist/hooks/useDevPanel/useDevPanel.d.ts

@@ -1,29 +0,0 @@
-import { ControlsGroup } from '../../components/ControlRenderer/controls/types';
-import { DevPanelProps } from '../../components/DevPanel/types';
-/**
- * Hook to register controls in the dev panel with auto-mounting
- * @param sectionName - Section name (e.g: 'Global', 'HomePage')
- * @param controls - Controls configuration object
- * @param devPanelProps - Optional DevPanel configuration (title, hotkey, theme)
- *
- * @example
- * ```typescript
- * useDevPanel('Global', {
- *   theme: {
- *     type: 'select',
- *     value: 'light',
- *     options: ['light', 'dark'],
- *     onChange: setTheme
- *   },
- *   debugMode: {
- *     type: 'boolean',
- *     value: false,
- *     onChange: setDebugMode
- *   }
- * }, {
- *   panelTitle: 'My App Controls',
- *   theme: 'dark'
- * });
- * ```
- */
-export declare function useDevPanel(sectionName: string, controls: ControlsGroup, devPanelProps?: DevPanelProps): void;