@berenjena/react-dev-panel 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/DevPanel.css +1 -1
- package/dist/assets/Section.css +1 -1
- package/dist/assets/index.css +1 -1
- package/dist/components/ControlRenderer/controls/NumberControl/NumberControl.js +8 -8
- package/dist/components/ControlRenderer/controls/TextControl/TextControl.js +7 -7
- package/dist/components/ControlRenderer/controls/index.js +29 -28
- package/dist/components/DevPanel/DevPanel.js +20 -19
- package/dist/components/Section/Section.js +3 -3
- package/package.json +1 -1
package/dist/assets/DevPanel.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--dev-panel-font-family: Helvetica, Arial, Sans-Serif;--dev-panel-font-size-xs: 12px;--dev-panel-font-size-sm: 14px;--dev-panel-font-size-md: 16px;--dev-panel-font-size-lg: 18px;--dev-panel-accent-color: #6663fd;--dev-panel-primary-color: #6663fd;--dev-panel-secondary-color: #1c1c1c;--dev-panel-background-color: #3e3d40;--dev-panel-highlight-color: #f0f0f0;--dev-panel-foreground-color: #313133;--dev-panel-border-color: #a1a1a1;--dev-panel-text-color: #e0e0e0;--dev-panel-text-color-muted: #b0b0b0;--dev-panel-input-background-color: #302f32;--dev-panel-text-color-highlight: #fbfffa;--dev-panel-spacing-xs: 4px;--dev-panel-spacing-sm: 8px;--dev-panel-spacing-md: 10px;--dev-panel-spacing-lg: 14px;--dev-panel-shadow: 0 8px 24px rgba(0, 0, 0, .2);--dev-panel-max-width: 320px;--dev-panel-max-height: 80vh;--dev-panel-inputs-height: 24px;--dev-panel-border-radius: 6px;--dev-panel-transition: all .2s cubic-bezier(.4, 0, .2, 1)}.
|
|
1
|
+
:root{--dev-panel-font-family: Helvetica, Arial, Sans-Serif;--dev-panel-font-size-xs: 12px;--dev-panel-font-size-sm: 14px;--dev-panel-font-size-md: 16px;--dev-panel-font-size-lg: 18px;--dev-panel-accent-color: #6663fd;--dev-panel-primary-color: #6663fd;--dev-panel-secondary-color: #1c1c1c;--dev-panel-background-color: #3e3d40;--dev-panel-highlight-color: #f0f0f0;--dev-panel-foreground-color: #313133;--dev-panel-border-color: #a1a1a1;--dev-panel-text-color: #e0e0e0;--dev-panel-text-color-muted: #b0b0b0;--dev-panel-input-background-color: #302f32;--dev-panel-text-color-highlight: #fbfffa;--dev-panel-spacing-xs: 4px;--dev-panel-spacing-sm: 8px;--dev-panel-spacing-md: 10px;--dev-panel-spacing-lg: 14px;--dev-panel-shadow: 0 8px 24px rgba(0, 0, 0, .2);--dev-panel-max-width: 320px;--dev-panel-max-height: 80vh;--dev-panel-inputs-height: 24px;--dev-panel-border-radius: 6px;--dev-panel-transition: all .2s cubic-bezier(.4, 0, .2, 1)}._devPanelContainer_1rv6u_30{position:fixed;z-index:9998;border-radius:var(--dev-panel-border-radius);box-shadow:0 8px 24px #0003;width:var(--dev-panel-max-width);max-height:var(--dev-panel-max-height);overflow:hidden;-webkit-user-select:none;user-select:none;font-family:var(--dev-panel-font-family)}._devPanelContainer_1rv6u_30 ._header_1rv6u_41{display:flex;align-items:center;justify-content:space-between;padding:var(--dev-panel-spacing-xs);background:var(--dev-panel-foreground-color);cursor:move;color:var(--dev-panel-text-color)}._devPanelContainer_1rv6u_30 ._title_1rv6u_50{font-size:var(--dev-panel-font-size-xs);font-weight:600;display:flex;align-items:center;gap:var(--dev-panel-spacing-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._devPanelContainer_1rv6u_30 ._button_1rv6u_60{background:none;border:none;color:inherit;font-size:var(--dev-panel-font-size-sm);cursor:pointer;padding:var(--dev-panel-spacing-xs) var(--dev-panel-spacing-sm);border-radius:4px;transition:all .2s ease}._devPanelContainer_1rv6u_30 ._button_1rv6u_60:hover{background:var(--dev-panel-highlight-color);color:#333}._devPanelContainer_1rv6u_30 ._button_1rv6u_60:active{transform:scale(.95)}._content_1rv6u_78{max-height:calc(var(--dev-panel-max-height) - 48px);overflow-y:auto;background-color:var(--dev-panel-background-color)}._content_1rv6u_78::-webkit-scrollbar{width:6px}._content_1rv6u_78::-webkit-scrollbar-track{background:#f1f1f1}._content_1rv6u_78::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}._content_1rv6u_78::-webkit-scrollbar-thumb:hover{background:#a8a8a8}
|
package/dist/assets/Section.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._section_19u37_1{padding:var(--dev-panel-spacing-sm);overflow:hidden}._section_19u37_1:last-child{margin-bottom:0}._section_19u37_1 ._header_19u37_8{display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background .2s ease}._section_19u37_1 ._header_19u37_8 ._title_19u37_15{font-size:11px;font-weight:600;color:var(--dev-panel-text-color)}._section_19u37_1 ._header_19u37_8 ._toggle_19u37_20{font-size:10px;color:var(--dev-panel-border-color);transition:transform .2s ease}._section_19u37_1 ._content_19u37_25{position:relative;padding:var(--dev-panel-spacing-sm) 0 0 var(--dev-panel-spacing-sm);display:grid;grid-template-columns:100%;gap:var(--dev-panel-spacing-sm);transition:opacity .25s}._section_19u37_1 ._content_19u37_25:after{content:"";position:absolute;left:0;bottom:0;width:2px;height:calc(100% - var(--dev-panel-spacing-sm));background-color:var(--dev-panel-border-color);transform:translate(-50%)}@media (prefers-color-scheme: dark){._section_19u37_1,._section_19u37_1 ._header_19u37_8{border-color:#555}._section_19u37_1 ._header_19u37_8 ._title_19u37_15{color:#e0e0e0}._section_19u37_1 ._toggle_19u37_20{color:#b0b0b0}}
|
package/dist/assets/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._controlRendererContainer_eix3y_1{gap:var(--dev-panel-spacing-xs);display:grid}._controlRendererContainer_eix3y_1 ._controlContainer_eix3y_5{gap:var(--dev-panel-spacing-sm);display:grid;height:100%;align-items:center;overflow:hidden;color:var(--dev-panel-text-color)}._controlRendererContainer_eix3y_1 ._controlContainer_eix3y_5:not(._fullWidth_eix3y_13){grid-template-columns:100px 1fr}._controlRendererContainer_eix3y_1 ._controlContainer_eix3y_5 ._controlWrapper_eix3y_16{display:flex;justify-content:flex-end}._controlRendererContainer_eix3y_1 ._controlContainer_eix3y_5 ._label_eix3y_20{text-align:start;font-weight:500;font-size:var(--dev-panel-font-size-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._controlRendererContainer_eix3y_1 ._description_eix3y_28,._controlRendererContainer_eix3y_1 ._loading_eix3y_29{font-size:var(--dev-panel-font-size-xs);color:var(--dev-panel-text-color-muted)}._controlRendererContainer_eix3y_1 ._description_eix3y_28{text-align:right}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { useState as i, useEffect as p } from "react";
|
|
3
3
|
import { Input as f } from "../../../Input/Input.js";
|
|
4
|
-
function
|
|
5
|
-
const n = e.event || "
|
|
4
|
+
function v({ control: e }) {
|
|
5
|
+
const n = e.event || "onChange", [m, t] = i(e.value);
|
|
6
6
|
p(() => {
|
|
7
7
|
t(e.value);
|
|
8
8
|
}, [e.value]);
|
|
9
|
-
const
|
|
9
|
+
const s = (u) => {
|
|
10
10
|
const a = Number(u.target.value);
|
|
11
11
|
t(a), n === "onChange" && e.onChange(a);
|
|
12
|
-
},
|
|
12
|
+
}, l = (u) => {
|
|
13
13
|
const a = Number(u.target.value);
|
|
14
14
|
n === "onBlur" && e.onChange(a);
|
|
15
15
|
};
|
|
@@ -17,16 +17,16 @@ function h({ control: e }) {
|
|
|
17
17
|
f,
|
|
18
18
|
{
|
|
19
19
|
type: "number",
|
|
20
|
-
value:
|
|
20
|
+
value: m,
|
|
21
21
|
min: e.min,
|
|
22
22
|
max: e.max,
|
|
23
23
|
step: e.step,
|
|
24
24
|
disabled: e.disabled,
|
|
25
|
-
onChange:
|
|
26
|
-
...n === "onBlur" && { onBlur:
|
|
25
|
+
onChange: s,
|
|
26
|
+
...n === "onBlur" && { onBlur: l }
|
|
27
27
|
}
|
|
28
28
|
);
|
|
29
29
|
}
|
|
30
30
|
export {
|
|
31
|
-
|
|
31
|
+
v as NumberControl
|
|
32
32
|
};
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { useState as h, useEffect as p } from "react";
|
|
3
3
|
import { Input as d } from "../../../Input/Input.js";
|
|
4
|
-
function
|
|
5
|
-
const n = e.event || "
|
|
4
|
+
function v({ control: e }) {
|
|
5
|
+
const n = e.event || "onChange", [u, l] = h(e.value);
|
|
6
6
|
p(() => {
|
|
7
7
|
l(e.value);
|
|
8
8
|
}, [e.value]);
|
|
9
9
|
const o = (t) => {
|
|
10
10
|
const a = t.target.value;
|
|
11
11
|
l(a), n === "onChange" && e.onChange(a);
|
|
12
|
-
},
|
|
12
|
+
}, s = (t) => {
|
|
13
13
|
const a = t.target.value;
|
|
14
14
|
n === "onBlur" && e.onChange(a);
|
|
15
15
|
};
|
|
16
|
-
return /* @__PURE__ */
|
|
16
|
+
return /* @__PURE__ */ r(
|
|
17
17
|
d,
|
|
18
18
|
{
|
|
19
19
|
type: "text",
|
|
@@ -21,10 +21,10 @@ function g({ control: e }) {
|
|
|
21
21
|
placeholder: e.placeholder,
|
|
22
22
|
disabled: e.disabled,
|
|
23
23
|
onChange: o,
|
|
24
|
-
...n === "onBlur" && { onBlur:
|
|
24
|
+
...n === "onBlur" && { onBlur: s }
|
|
25
25
|
}
|
|
26
26
|
);
|
|
27
27
|
}
|
|
28
28
|
export {
|
|
29
|
-
|
|
29
|
+
v as TextControl
|
|
30
30
|
};
|
|
@@ -1,41 +1,42 @@
|
|
|
1
|
-
import { Suspense as
|
|
2
|
-
import { jsxs as i,
|
|
3
|
-
import { className as
|
|
1
|
+
import { Suspense as d, lazy as r } from "react";
|
|
2
|
+
import { jsxs as i, jsx as o } from "react/jsx-runtime";
|
|
3
|
+
import { className as s } from "../../../utils/className/className.js";
|
|
4
4
|
import "../../../utils/store/store.js";
|
|
5
|
-
import '../../../assets/index.css';const u = "
|
|
5
|
+
import '../../../assets/index.css';const p = "_controlRendererContainer_eix3y_1", u = "_controlContainer_eix3y_5", m = "_fullWidth_eix3y_13", C = "_controlWrapper_eix3y_16", f = "_label_eix3y_20", _ = "_description_eix3y_28", h = "_loading_eix3y_29", t = {
|
|
6
|
+
controlRendererContainer: p,
|
|
6
7
|
controlContainer: u,
|
|
7
8
|
fullWidth: m,
|
|
8
|
-
controlWrapper:
|
|
9
|
-
label:
|
|
10
|
-
description:
|
|
11
|
-
loading:
|
|
9
|
+
controlWrapper: C,
|
|
10
|
+
label: f,
|
|
11
|
+
description: _,
|
|
12
|
+
loading: h
|
|
12
13
|
}, b = ["button", "buttonGroup"];
|
|
13
|
-
function
|
|
14
|
-
const
|
|
15
|
-
function
|
|
16
|
-
if (!
|
|
17
|
-
return /* @__PURE__ */
|
|
18
|
-
const l = y[
|
|
19
|
-
return l ? /* @__PURE__ */
|
|
14
|
+
function g({ name: e, control: n }) {
|
|
15
|
+
const a = n?.label || e;
|
|
16
|
+
function c() {
|
|
17
|
+
if (!n || !n.type)
|
|
18
|
+
return /* @__PURE__ */ o("div", { className: t.error, children: "Control type is not defined" });
|
|
19
|
+
const l = y[n.type];
|
|
20
|
+
return l ? /* @__PURE__ */ o(d, { fallback: /* @__PURE__ */ o("div", { className: t.loading, children: "Loading control..." }), children: /* @__PURE__ */ o(l, { control: n }) }) : /* @__PURE__ */ o("div", { children: "Unknown control type" });
|
|
20
21
|
}
|
|
21
|
-
return /* @__PURE__ */ i(
|
|
22
|
-
/* @__PURE__ */ i("div", { ...
|
|
23
|
-
|
|
24
|
-
/* @__PURE__ */
|
|
22
|
+
return /* @__PURE__ */ i("div", { className: t.controlRendererContainer, children: [
|
|
23
|
+
/* @__PURE__ */ i("div", { ...s(t.controlContainer, { [t.fullWidth]: b.includes(n.type) }), children: [
|
|
24
|
+
n?.type !== "button" && /* @__PURE__ */ o("label", { className: t.label, children: a }),
|
|
25
|
+
/* @__PURE__ */ o("div", { className: t.controlWrapper, children: c() })
|
|
25
26
|
] }),
|
|
26
|
-
|
|
27
|
+
n?.description && /* @__PURE__ */ o("span", { className: t.description, children: n.description })
|
|
27
28
|
] });
|
|
28
29
|
}
|
|
29
30
|
const y = Object.freeze({
|
|
30
|
-
boolean:
|
|
31
|
-
button:
|
|
32
|
-
color:
|
|
33
|
-
number:
|
|
34
|
-
select:
|
|
35
|
-
text:
|
|
36
|
-
buttonGroup:
|
|
31
|
+
boolean: r(() => import("./BooleanControl/index.js").then((e) => ({ default: e.BooleanControl }))),
|
|
32
|
+
button: r(() => import("./ButtonControl/index.js").then((e) => ({ default: e.ButtonControl }))),
|
|
33
|
+
color: r(() => import("./ColorControl/index.js").then((e) => ({ default: e.ColorControl }))),
|
|
34
|
+
number: r(() => import("./NumberControl/index.js").then((e) => ({ default: e.NumberControl }))),
|
|
35
|
+
select: r(() => import("./SelectControl/index.js").then((e) => ({ default: e.SelectControl }))),
|
|
36
|
+
text: r(() => import("./TextControl/index.js").then((e) => ({ default: e.TextControl }))),
|
|
37
|
+
buttonGroup: r(() => import("./ButtonGroupControl/index.js").then((e) => ({ default: e.ButtonGroupControl })))
|
|
37
38
|
});
|
|
38
39
|
export {
|
|
39
|
-
|
|
40
|
+
g as ControlRenderer,
|
|
40
41
|
y as controls
|
|
41
42
|
};
|
|
@@ -3,46 +3,47 @@ import { useCallback as C } from "react";
|
|
|
3
3
|
import { useDragAndDrop as _ } from "../../hooks/useDragAndDrop/useDragAndDrop.js";
|
|
4
4
|
import { useHotkey as D } from "../../hooks/useHotkeys/useHotkey.js";
|
|
5
5
|
import { className as P } from "../../utils/className/className.js";
|
|
6
|
-
import { useDevPanelVisible as
|
|
6
|
+
import { useDevPanelVisible as g, useDevPanelCollapsed as b, useDevPanelPosition as y, useDevPanelSections as N, useDevPanelActions as K } from "../../utils/store/store.js";
|
|
7
7
|
import { EmptyContent as k } from "../EmptyContent/EmptyContent.js";
|
|
8
|
-
import { Section as
|
|
9
|
-
import '../../assets/DevPanel.css';const
|
|
10
|
-
devPanelContainer:
|
|
8
|
+
import { Section as w } from "../Section/Section.js";
|
|
9
|
+
import '../../assets/DevPanel.css';const x = "_devPanelContainer_1rv6u_30", E = "_header_1rv6u_41", V = "_title_1rv6u_50", j = "_button_1rv6u_60", S = "_content_1rv6u_78", e = {
|
|
10
|
+
devPanelContainer: x,
|
|
11
11
|
header: E,
|
|
12
12
|
title: V,
|
|
13
13
|
button: j,
|
|
14
|
-
content:
|
|
15
|
-
},
|
|
16
|
-
|
|
14
|
+
content: S
|
|
15
|
+
}, A = {
|
|
16
|
+
ctrlKey: !0,
|
|
17
17
|
shiftKey: !0,
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
key: "a",
|
|
19
|
+
altKey: !1,
|
|
20
20
|
metaKey: !1
|
|
21
21
|
};
|
|
22
|
-
function F({ panelTitle: c = "Dev panel", ...
|
|
23
|
-
const i =
|
|
22
|
+
function F({ panelTitle: c = "Dev panel", ...u }) {
|
|
23
|
+
const i = g(), n = b(), l = y(), d = N(), o = K(), m = C(
|
|
24
24
|
(s) => {
|
|
25
25
|
o.setPosition(s);
|
|
26
26
|
},
|
|
27
27
|
[o]
|
|
28
|
-
), { isDragging:
|
|
29
|
-
onPositionChange:
|
|
28
|
+
), { isDragging: v, elementRef: p, handleMouseDown: f } = _({
|
|
29
|
+
onPositionChange: m
|
|
30
30
|
});
|
|
31
31
|
if (D({
|
|
32
32
|
description: "Show Dev Panel",
|
|
33
33
|
preventDefault: !0,
|
|
34
34
|
action: () => o.setVisible(!i),
|
|
35
|
-
...
|
|
36
|
-
...
|
|
35
|
+
...A,
|
|
36
|
+
...u.hotKeyConfig,
|
|
37
|
+
target: window
|
|
37
38
|
}), process.env.NODE_ENV !== "development" || !i)
|
|
38
39
|
return null;
|
|
39
40
|
const a = Object.entries(d);
|
|
40
41
|
return /* @__PURE__ */ r(
|
|
41
42
|
"div",
|
|
42
43
|
{
|
|
43
|
-
ref:
|
|
44
|
+
ref: p,
|
|
44
45
|
...P(e.devPanelContainer, {
|
|
45
|
-
[e.dragging]:
|
|
46
|
+
[e.dragging]: v
|
|
46
47
|
}),
|
|
47
48
|
style: {
|
|
48
49
|
left: l.x,
|
|
@@ -50,12 +51,12 @@ function F({ panelTitle: c = "Dev panel", ...m }) {
|
|
|
50
51
|
height: n ? "auto" : void 0
|
|
51
52
|
},
|
|
52
53
|
children: [
|
|
53
|
-
/* @__PURE__ */ r("div", { className: e.header, onMouseDown:
|
|
54
|
+
/* @__PURE__ */ r("div", { className: e.header, onMouseDown: f, children: [
|
|
54
55
|
/* @__PURE__ */ t("button", { className: e.button, onClick: () => o.setCollapsed(!n), title: n ? "Expand" : "Collapse", children: n ? "▼" : "▲" }),
|
|
55
56
|
/* @__PURE__ */ t("div", { className: e.title, children: c }),
|
|
56
57
|
/* @__PURE__ */ t("button", { className: e.button, onClick: () => o.setVisible(!1), title: "Close", children: "✕" })
|
|
57
58
|
] }),
|
|
58
|
-
!n && /* @__PURE__ */ t("div", { className: e.content, children: a.length ? a.map(([s,
|
|
59
|
+
!n && /* @__PURE__ */ t("div", { className: e.content, children: a.length ? a.map(([s, h]) => /* @__PURE__ */ t(w, { sectionName: s, section: h }, `section-${s}`)) : /* @__PURE__ */ t(k, {}) })
|
|
59
60
|
]
|
|
60
61
|
}
|
|
61
62
|
);
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { jsxs as s, jsx as n } from "react/jsx-runtime";
|
|
2
2
|
import { ControlRenderer as a } from "../ControlRenderer/controls/index.js";
|
|
3
3
|
import { useDevPanelActions as r } from "../../utils/store/store.js";
|
|
4
|
-
import '../../assets/Section.css';const d = "
|
|
4
|
+
import '../../assets/Section.css';const d = "_section_19u37_1", _ = "_header_19u37_8", m = "_title_19u37_15", g = "_toggle_19u37_20", p = "_content_19u37_25", e = {
|
|
5
5
|
section: d,
|
|
6
6
|
header: _,
|
|
7
7
|
title: m,
|
|
8
8
|
toggle: g,
|
|
9
9
|
content: p
|
|
10
10
|
};
|
|
11
|
-
function
|
|
11
|
+
function f({ sectionName: c, section: t }) {
|
|
12
12
|
const l = r();
|
|
13
13
|
return /* @__PURE__ */ s("div", { className: e.section, children: [
|
|
14
14
|
/* @__PURE__ */ s("div", { className: e.header, onClick: () => l.toggleSectionCollapse(c), children: [
|
|
@@ -19,5 +19,5 @@ function C({ sectionName: c, section: t }) {
|
|
|
19
19
|
] });
|
|
20
20
|
}
|
|
21
21
|
export {
|
|
22
|
-
|
|
22
|
+
f as Section
|
|
23
23
|
};
|