@berenjena/react-dev-panel 1.0.1 → 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 (71) 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/RangeControl/RangeControl.d.ts +30 -0
  22. package/dist/components/ControlRenderer/controls/RangeControl/RangeControl.js +40 -0
  23. package/dist/components/ControlRenderer/controls/RangeControl/index.d.ts +1 -0
  24. package/dist/components/ControlRenderer/controls/RangeControl/index.js +4 -0
  25. package/dist/components/ControlRenderer/controls/RangeControl/types.d.ts +13 -0
  26. package/dist/components/ControlRenderer/controls/SelectControl/SelectControl.js +6 -9
  27. package/dist/components/ControlRenderer/controls/SeparatorControl/SeparatorControl.d.ts +30 -0
  28. package/dist/components/ControlRenderer/controls/SeparatorControl/SeparatorControl.js +14 -0
  29. package/dist/components/ControlRenderer/controls/SeparatorControl/index.d.ts +1 -0
  30. package/dist/components/ControlRenderer/controls/SeparatorControl/index.js +4 -0
  31. package/dist/components/ControlRenderer/controls/SeparatorControl/types.d.ts +10 -0
  32. package/dist/components/ControlRenderer/controls/index.d.ts +3 -1
  33. package/dist/components/ControlRenderer/controls/index.js +13 -39
  34. package/dist/components/ControlRenderer/controls/types.d.ts +6 -0
  35. package/dist/components/ControlRenderer/index.js +1 -1
  36. package/dist/components/DevPanel/DevPanel.js +38 -37
  37. package/dist/components/DevPanel/types.d.ts +7 -4
  38. package/dist/components/EmptyContent/EmptyContent.js +2 -2
  39. package/dist/components/Input/Input.js +3 -3
  40. package/dist/components/Logger/index.d.ts +20 -0
  41. package/dist/components/Logger/index.js +85 -0
  42. package/dist/components/Section/Section.js +17 -16
  43. package/dist/components/index.d.ts +1 -0
  44. package/dist/components/index.js +6 -5
  45. package/dist/hooks/useDevPanel/useDevPanel.js +10 -10
  46. package/dist/hooks/useDragAndDrop/useDragAndDrop.d.ts +1 -1
  47. package/dist/hooks/useHotkeys/types.d.ts +14 -0
  48. package/dist/hooks/useHotkeys/useHotkey.d.ts +1 -2
  49. package/dist/hooks/useHotkeys/useHotkeys.d.ts +1 -2
  50. package/dist/index.d.ts +2 -0
  51. package/dist/index.js +9 -8
  52. package/dist/store/store.d.ts +106 -0
  53. package/dist/store/store.js +239 -0
  54. package/dist/utils/createHotkey/createHotkey.d.ts +1 -1
  55. package/dist/utils/formatHotkey/formatHotkey.d.ts +1 -1
  56. package/dist/utils/getConstrainedPosition/getConstrainedPosition.d.ts +1 -1
  57. package/dist/utils/getCurrentElementPosition/getCurrentElementPosition.d.ts +1 -1
  58. package/dist/utils/getPositionAdjustment/getPositionAdjustment.d.ts +2 -2
  59. package/dist/utils/hasControlChanged/hasControlChanged.js +5 -5
  60. package/dist/utils/index.d.ts +0 -1
  61. package/dist/utils/index.js +16 -23
  62. package/package.json +27 -21
  63. package/dist/assets/SelectControl.css +0 -1
  64. package/dist/components/logger.d.ts +0 -5
  65. package/dist/components/logger.js +0 -7
  66. package/dist/types.d.ts +0 -18
  67. package/dist/utils/store/store.d.ts +0 -40
  68. package/dist/utils/store/store.js +0 -103
  69. package/dist/vite-env.d.ts +0 -1
  70. /package/dist/{utils/store → store}/index.d.ts +0 -0
  71. /package/dist/{utils/store → store}/index.js +0 -0
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.1",
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