@berenjena/react-dev-panel 1.0.0 → 1.0.3

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.
Files changed (73) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +444 -1
  3. package/dist/assets/ButtonControl.css +1 -1
  4. package/dist/assets/ControlRenderer.css +1 -0
  5. package/dist/assets/DevPanel.css +1 -1
  6. package/dist/assets/EmptyContent.css +1 -1
  7. package/dist/assets/Input.css +1 -1
  8. package/dist/assets/RangeControl.css +1 -0
  9. package/dist/assets/Section.css +1 -1
  10. package/dist/assets/SeparatorControl.css +1 -0
  11. package/dist/assets/index.css +1 -1
  12. package/dist/assets/index2.css +1 -0
  13. package/dist/components/ControlRenderer/ControlRenderer.js +30 -6
  14. package/dist/components/ControlRenderer/controls/BooleanControl/BooleanControl.js +9 -10
  15. package/dist/components/ControlRenderer/controls/ButtonControl/ButtonControl.js +3 -3
  16. package/dist/components/ControlRenderer/controls/DateControl/DateControl.d.ts +29 -0
  17. package/dist/components/ControlRenderer/controls/DateControl/DateControl.js +31 -0
  18. package/dist/components/ControlRenderer/controls/DateControl/index.d.ts +1 -0
  19. package/dist/components/ControlRenderer/controls/DateControl/index.js +4 -0
  20. package/dist/components/ControlRenderer/controls/DateControl/types.d.ts +12 -0
  21. package/dist/components/ControlRenderer/controls/NumberControl/NumberControl.js +8 -8
  22. package/dist/components/ControlRenderer/controls/RangeControl/RangeControl.d.ts +30 -0
  23. package/dist/components/ControlRenderer/controls/RangeControl/RangeControl.js +40 -0
  24. package/dist/components/ControlRenderer/controls/RangeControl/index.d.ts +1 -0
  25. package/dist/components/ControlRenderer/controls/RangeControl/index.js +4 -0
  26. package/dist/components/ControlRenderer/controls/RangeControl/types.d.ts +13 -0
  27. package/dist/components/ControlRenderer/controls/SelectControl/SelectControl.js +6 -9
  28. package/dist/components/ControlRenderer/controls/SeparatorControl/SeparatorControl.d.ts +30 -0
  29. package/dist/components/ControlRenderer/controls/SeparatorControl/SeparatorControl.js +14 -0
  30. package/dist/components/ControlRenderer/controls/SeparatorControl/index.d.ts +1 -0
  31. package/dist/components/ControlRenderer/controls/SeparatorControl/index.js +4 -0
  32. package/dist/components/ControlRenderer/controls/SeparatorControl/types.d.ts +10 -0
  33. package/dist/components/ControlRenderer/controls/TextControl/TextControl.js +7 -7
  34. package/dist/components/ControlRenderer/controls/index.d.ts +3 -1
  35. package/dist/components/ControlRenderer/controls/index.js +13 -38
  36. package/dist/components/ControlRenderer/controls/types.d.ts +6 -0
  37. package/dist/components/ControlRenderer/index.js +1 -1
  38. package/dist/components/DevPanel/DevPanel.js +43 -41
  39. package/dist/components/DevPanel/types.d.ts +7 -4
  40. package/dist/components/EmptyContent/EmptyContent.js +2 -2
  41. package/dist/components/Input/Input.js +3 -3
  42. package/dist/components/Logger/index.d.ts +20 -0
  43. package/dist/components/Logger/index.js +85 -0
  44. package/dist/components/Section/Section.js +17 -16
  45. package/dist/components/index.d.ts +1 -0
  46. package/dist/components/index.js +6 -5
  47. package/dist/hooks/useDevPanel/useDevPanel.js +10 -10
  48. package/dist/hooks/useDragAndDrop/useDragAndDrop.d.ts +1 -1
  49. package/dist/hooks/useHotkeys/types.d.ts +14 -0
  50. package/dist/hooks/useHotkeys/useHotkey.d.ts +1 -2
  51. package/dist/hooks/useHotkeys/useHotkeys.d.ts +1 -2
  52. package/dist/index.d.ts +2 -0
  53. package/dist/index.js +9 -8
  54. package/dist/store/store.d.ts +106 -0
  55. package/dist/store/store.js +239 -0
  56. package/dist/utils/createHotkey/createHotkey.d.ts +1 -1
  57. package/dist/utils/formatHotkey/formatHotkey.d.ts +1 -1
  58. package/dist/utils/getConstrainedPosition/getConstrainedPosition.d.ts +1 -1
  59. package/dist/utils/getCurrentElementPosition/getCurrentElementPosition.d.ts +1 -1
  60. package/dist/utils/getPositionAdjustment/getPositionAdjustment.d.ts +2 -2
  61. package/dist/utils/hasControlChanged/hasControlChanged.js +5 -5
  62. package/dist/utils/index.d.ts +0 -1
  63. package/dist/utils/index.js +16 -23
  64. package/package.json +27 -21
  65. package/dist/assets/SelectControl.css +0 -1
  66. package/dist/components/logger.d.ts +0 -5
  67. package/dist/components/logger.js +0 -7
  68. package/dist/types.d.ts +0 -18
  69. package/dist/utils/store/store.d.ts +0 -40
  70. package/dist/utils/store/store.js +0 -103
  71. package/dist/vite-env.d.ts +0 -1
  72. /package/dist/{utils/store → store}/index.d.ts +0 -0
  73. /package/dist/{utils/store → store}/index.js +0 -0
@@ -1,27 +1,20 @@
1
1
  import { className as t } from "./className/className.js";
2
- import { createHotkey as s } from "./createHotkey/createHotkey.js";
3
- import { debounce as a } from "./debounce/debounce.js";
4
- import { formatHotkey as m } from "./formatHotkey/formatHotkey.js";
5
- import { getConstrainedPosition as f } from "./getConstrainedPosition/getConstrainedPosition.js";
6
- import { getCurrentElementPosition as x } from "./getCurrentElementPosition/getCurrentElementPosition.js";
7
- import { getPositionAdjustment as u } from "./getPositionAdjustment/getPositionAdjustment.js";
8
- import { hasControlsChanged as v } from "./hasControlChanged/hasControlChanged.js";
9
- import { isMacOS as d } from "./isMacOS/isMacOS.js";
10
- import { useDevPanelActions as g, useDevPanelCollapsed as S, useDevPanelPosition as b, useDevPanelSections as h, useDevPanelStore as k, useDevPanelVisible as y } from "./store/store.js";
2
+ import { createHotkey as m } from "./createHotkey/createHotkey.js";
3
+ import { debounce as f } from "./debounce/debounce.js";
4
+ import { formatHotkey as p } from "./formatHotkey/formatHotkey.js";
5
+ import { getConstrainedPosition as a } from "./getConstrainedPosition/getConstrainedPosition.js";
6
+ import { getCurrentElementPosition as c } from "./getCurrentElementPosition/getCurrentElementPosition.js";
7
+ import { getPositionAdjustment as g } from "./getPositionAdjustment/getPositionAdjustment.js";
8
+ import { hasControlsChanged as l } from "./hasControlChanged/hasControlChanged.js";
9
+ import { isMacOS as P } from "./isMacOS/isMacOS.js";
11
10
  export {
12
11
  t as className,
13
- s as createHotkey,
14
- a as debounce,
15
- m as formatHotkey,
16
- f as getConstrainedPosition,
17
- x as getCurrentElementPosition,
18
- u as getPositionAdjustment,
19
- v as hasControlsChanged,
20
- d as isMacOS,
21
- g as useDevPanelActions,
22
- S as useDevPanelCollapsed,
23
- b as useDevPanelPosition,
24
- h as useDevPanelSections,
25
- k as useDevPanelStore,
26
- y as useDevPanelVisible
12
+ m as createHotkey,
13
+ f as debounce,
14
+ p as formatHotkey,
15
+ a as getConstrainedPosition,
16
+ c as getCurrentElementPosition,
17
+ g as getPositionAdjustment,
18
+ l as hasControlsChanged,
19
+ P as isMacOS
27
20
  };
package/package.json CHANGED
@@ -1,4 +1,8 @@
1
1
  {
2
+ "private": false,
3
+ "version": "1.0.3",
4
+ "type": "module",
5
+ "module": "./dist/index.js",
2
6
  "name": "@berenjena/react-dev-panel",
3
7
  "description": "A React development panel with various tools and utilities.",
4
8
  "keywords": [
@@ -14,24 +18,19 @@
14
18
  "type": "git",
15
19
  "url": "git+https://github.com/Berenjenas/react-dev-panel.git"
16
20
  },
17
- "private": false,
18
- "version": "1.0.0",
19
- "type": "module",
20
- "files": [
21
- "dist"
22
- ],
23
- "main": "./dist/index.umd.js",
24
- "module": "./dist/index.js",
25
21
  "exports": {
26
22
  ".": {
27
23
  "import": "./dist/index.js",
28
- "require": "./dist/index.umd.js"
29
- },
30
- "./styles.css": "./dist/styles.css"
24
+ "types": "./dist/index.d.ts"
25
+ }
31
26
  },
32
27
  "sideEffects": [
33
- "*.css"
28
+ "**/*.css"
29
+ ],
30
+ "files": [
31
+ "dist"
34
32
  ],
33
+ "types": "./dist/index.d.ts",
35
34
  "license": "MIT",
36
35
  "contributors": [
37
36
  {
@@ -51,21 +50,28 @@
51
50
  }
52
51
  ],
53
52
  "scripts": {
54
- "dev": "vite",
55
53
  "build": "tsc -b && vite build",
56
- "lint": "eslint .",
57
- "preview": "vite preview",
54
+ "lint": "eslint . --ext ts,tsx",
55
+ "lint:fix": "eslint . --ext ts,tsx --fix",
56
+ "format": "prettier --check .",
57
+ "format:fix": "prettier --write .",
58
+ "stylelint": "stylelint **/*.css",
59
+ "stylelint:fix": "stylelint **/*.css --fix",
58
60
  "storybook": "storybook dev -p 6006",
59
- "build-storybook": "storybook build",
60
- "test": "vitest"
61
+ "build-storybook": "storybook build --output-dir docs",
62
+ "deploy-storybook": "npm run build-storybook && gh-pages -d docs",
63
+ "test": "vitest",
64
+ "test:ui": "vitest --ui",
65
+ "coverage": "vitest run --coverage",
66
+ "prepublishOnly": "vitest run && npm run build"
61
67
  },
62
68
  "peerDependencies": {
63
69
  "react": ">=18.0.0",
64
- "react-dom": ">=18.0.0",
65
- "zustand": "^5.0.6"
70
+ "react-dom": ">=18.0.0"
66
71
  },
67
72
  "devDependencies": {
68
73
  "@eslint/js": "^9.30.1",
74
+ "@rollup/plugin-terser": "^0.4.4",
69
75
  "@storybook/addon-docs": "^9.0.17",
70
76
  "@storybook/react-vite": "^9.0.17",
71
77
  "@types/node": "^24.0.15",
@@ -79,6 +85,7 @@
79
85
  "eslint-plugin-react-refresh": "^0.4.20",
80
86
  "eslint-plugin-simple-import-sort": "^12.1.1",
81
87
  "eslint-plugin-storybook": "^9.0.17",
88
+ "gh-pages": "^6.3.0",
82
89
  "glob": "^11.0.3",
83
90
  "globals": "^16.3.0",
84
91
  "happy-dom": "^18.0.1",
@@ -91,7 +98,6 @@
91
98
  "vite": "^7.0.4",
92
99
  "vite-plugin-dts": "^4.5.4",
93
100
  "vite-plugin-lib-inject-css": "^2.2.2",
94
- "vitest": "^3.2.4",
95
- "zustand": "^5.0.6"
101
+ "vitest": "^3.2.4"
96
102
  }
97
103
  }
@@ -1 +0,0 @@
1
- ._select_1w3k9_1{background-color:#1e2233;border:none;color:#fff;padding:4px}
@@ -1,5 +0,0 @@
1
- type LoggerProps = {
2
- items: object;
3
- };
4
- export declare function Logger({ items }: LoggerProps): import("react/jsx-runtime").JSX.Element;
5
- export {};
@@ -1,7 +0,0 @@
1
- import { jsx as r } from "react/jsx-runtime";
2
- function i({ items: e }) {
3
- return /* @__PURE__ */ r("pre", { children: /* @__PURE__ */ r("code", { children: JSON.stringify(e, null, 2) }) });
4
- }
5
- export {
6
- i as Logger
7
- };
package/dist/types.d.ts DELETED
@@ -1,18 +0,0 @@
1
- export interface Position {
2
- x: number;
3
- y: number;
4
- }
5
-
6
- export interface HotkeyConfig {
7
- key: string;
8
- description?: string;
9
- ctrlKey?: boolean;
10
- shiftKey?: boolean;
11
- altKey?: boolean;
12
- metaKey?: boolean;
13
- preventDefault?: boolean;
14
- stopPropagation?: boolean;
15
- enabled?: boolean;
16
- target?: HTMLElement | Window | Document;
17
- action: (event: KeyboardEvent) => void;
18
- }
@@ -1,40 +0,0 @@
1
- import { ControlsGroup } from '../../components/ControlRenderer/controls/types';
2
- import { DevPanelStore } from '../../components/DevPanel/types';
3
- export declare const useDevPanelStore: import('zustand').UseBoundStore<Omit<import('zustand').StoreApi<DevPanelStore>, "persist"> & {
4
- persist: {
5
- setOptions: (options: Partial<import('zustand/middleware').PersistOptions<DevPanelStore, {
6
- isVisible: boolean;
7
- isCollapsed: boolean;
8
- position: import('../../types').Position;
9
- sectionCollapseState: {
10
- [k: string]: boolean | undefined;
11
- };
12
- }>>) => void;
13
- clearStorage: () => void;
14
- rehydrate: () => Promise<void> | void;
15
- hasHydrated: () => boolean;
16
- onHydrate: (fn: (state: DevPanelStore) => void) => () => void;
17
- onFinishHydration: (fn: (state: DevPanelStore) => void) => () => void;
18
- getOptions: () => Partial<import('zustand/middleware').PersistOptions<DevPanelStore, {
19
- isVisible: boolean;
20
- isCollapsed: boolean;
21
- position: import('../../types').Position;
22
- sectionCollapseState: {
23
- [k: string]: boolean | undefined;
24
- };
25
- }>>;
26
- };
27
- }>;
28
- export declare const useDevPanelVisible: () => boolean;
29
- export declare const useDevPanelCollapsed: () => boolean;
30
- export declare const useDevPanelPosition: () => import('../../types').Position;
31
- export declare const useDevPanelSections: () => Record<string, import('../../components/DevPanel/types').DevPanelSection>;
32
- export declare const useDevPanelActions: () => {
33
- setVisible: (visible: boolean) => void;
34
- setCollapsed: (collapsed: boolean) => void;
35
- setPosition: (position: import('../../types').Position) => void;
36
- registerSection: (name: string, controls: ControlsGroup) => void;
37
- unregisterSection: (name: string) => void;
38
- toggleSectionCollapse: (name: string) => void;
39
- reset: () => void;
40
- };
@@ -1,103 +0,0 @@
1
- import { create as a } from "zustand";
2
- import { persist as d } from "zustand/middleware";
3
- import { useShallow as C } from "zustand/react/shallow";
4
- const c = { x: 20, y: 20 }, t = a()(
5
- d(
6
- (e) => ({
7
- // State
8
- isVisible: !1,
9
- isCollapsed: !1,
10
- sections: {},
11
- position: c,
12
- // Actions
13
- setVisible: (s) => {
14
- e({ isVisible: s });
15
- },
16
- setCollapsed: (s) => {
17
- e({ isCollapsed: s });
18
- },
19
- setPosition: (s) => {
20
- e({ position: s });
21
- },
22
- registerSection: (s, i) => {
23
- e((o) => {
24
- const l = o.sections[s];
25
- let n = !1;
26
- try {
27
- const r = localStorage.getItem("berenjena-dev-panel-storage");
28
- r && (n = JSON.parse(r).state?.sectionCollapseState?.[s] ?? !1);
29
- } catch {
30
- }
31
- const p = l?.isCollapsed ?? n;
32
- return {
33
- sections: {
34
- ...o.sections,
35
- [s]: {
36
- name: s,
37
- controls: i,
38
- isCollapsed: p
39
- }
40
- }
41
- };
42
- });
43
- },
44
- unregisterSection: (s) => {
45
- e((i) => {
46
- const { [s]: o, ...l } = i.sections;
47
- return { sections: l };
48
- });
49
- },
50
- toggleSectionCollapse: (s) => {
51
- e((i) => {
52
- const o = i.sections[s];
53
- return o ? {
54
- sections: {
55
- ...i.sections,
56
- [s]: {
57
- ...o,
58
- isCollapsed: !o.isCollapsed
59
- }
60
- }
61
- } : i;
62
- });
63
- },
64
- reset: () => {
65
- e({
66
- isVisible: !1,
67
- isCollapsed: !1,
68
- sections: {},
69
- position: c
70
- });
71
- }
72
- }),
73
- {
74
- name: "dev-panel-storage",
75
- partialize: (e) => ({
76
- isVisible: e.isVisible,
77
- isCollapsed: e.isCollapsed,
78
- position: e.position,
79
- // DO NOT persist sections - they are dynamic and are recreated on mount
80
- // Only save the collapse state of each section
81
- sectionCollapseState: Object.fromEntries(Object.entries(e.sections).map(([s, i]) => [s, i.isCollapsed]))
82
- })
83
- }
84
- )
85
- ), f = () => t((e) => e.isVisible), P = () => t((e) => e.isCollapsed), V = () => t((e) => e.position), v = () => t((e) => e.sections), m = () => t(
86
- C((e) => ({
87
- setVisible: e.setVisible,
88
- setCollapsed: e.setCollapsed,
89
- setPosition: e.setPosition,
90
- registerSection: e.registerSection,
91
- unregisterSection: e.unregisterSection,
92
- toggleSectionCollapse: e.toggleSectionCollapse,
93
- reset: e.reset
94
- }))
95
- );
96
- export {
97
- m as useDevPanelActions,
98
- P as useDevPanelCollapsed,
99
- V as useDevPanelPosition,
100
- v as useDevPanelSections,
101
- t as useDevPanelStore,
102
- f as useDevPanelVisible
103
- };
@@ -1 +0,0 @@
1
- /// <reference types="vite/client" />
File without changes
File without changes