@vuu-ui/vuu-layout 0.5.15 → 0.5.17

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 (181) hide show
  1. package/LICENSE +201 -0
  2. package/cjs/index.js +20 -0
  3. package/cjs/index.js.map +7 -0
  4. package/esm/index.js +20 -0
  5. package/esm/index.js.map +7 -0
  6. package/index.css +2 -0
  7. package/index.css.map +7 -0
  8. package/package.json +16 -10
  9. package/types/Component.d.ts +7 -0
  10. package/types/DraggableLayout.d.ts +6 -0
  11. package/types/chest-of-drawers/Chest.d.ts +10 -0
  12. package/types/chest-of-drawers/Drawer.d.ts +18 -0
  13. package/{src/chest-of-drawers/index.ts → types/chest-of-drawers/index.d.ts} +0 -0
  14. package/types/common-types.d.ts +8 -0
  15. package/types/debug.d.ts +2 -0
  16. package/types/drag-drop/BoxModel.d.ts +143 -0
  17. package/types/drag-drop/DragState.d.ts +46 -0
  18. package/types/drag-drop/Draggable.d.ts +23 -0
  19. package/types/drag-drop/DropMenu.d.ts +10 -0
  20. package/types/drag-drop/DropTarget.d.ts +61 -0
  21. package/types/drag-drop/DropTargetRenderer.d.ts +18 -0
  22. package/types/drag-drop/dragDropTypes.d.ts +51 -0
  23. package/{src/drag-drop/index.ts → types/drag-drop/index.d.ts} +0 -1
  24. package/types/editable-label/EditableLabel.d.ts +9 -0
  25. package/{src/editable-label/index.ts → types/editable-label/index.d.ts} +0 -0
  26. package/types/flexbox/Flexbox.d.ts +5 -0
  27. package/types/flexbox/FlexboxLayout.d.ts +6 -0
  28. package/types/flexbox/FluidGrid.d.ts +7 -0
  29. package/types/flexbox/FluidGridLayout.d.ts +6 -0
  30. package/types/flexbox/Splitter.d.ts +13 -0
  31. package/types/flexbox/flexbox-utils.d.ts +12 -0
  32. package/types/flexbox/flexboxTypes.d.ts +51 -0
  33. package/{src/flexbox/index.ts → types/flexbox/index.d.ts} +0 -1
  34. package/types/flexbox/useResponsiveSizing.d.ts +10 -0
  35. package/types/flexbox/useSplitterResizing.d.ts +2 -0
  36. package/{src/index.ts → types/index.d.ts} +0 -1
  37. package/types/layout-action.d.ts +21 -0
  38. package/types/layout-header/ActionButton.d.ts +8 -0
  39. package/types/layout-header/Header.d.ts +13 -0
  40. package/{src/layout-header/index.ts → types/layout-header/index.d.ts} +0 -0
  41. package/types/layout-provider/LayoutProvider.d.ts +14 -0
  42. package/types/layout-provider/LayoutProviderContext.d.ts +8 -0
  43. package/{src/layout-provider/index.ts → types/layout-provider/index.d.ts} +0 -1
  44. package/types/layout-provider/useLayoutDragDrop.d.ts +4 -0
  45. package/types/layout-reducer/flexUtils.d.ts +22 -0
  46. package/{src/layout-reducer/index.ts → types/layout-reducer/index.d.ts} +0 -1
  47. package/types/layout-reducer/insert-layout-element.d.ts +8 -0
  48. package/types/layout-reducer/layout-reducer.d.ts +3 -0
  49. package/types/layout-reducer/layoutTypes.d.ts +130 -0
  50. package/types/layout-reducer/layoutUtils.d.ts +28 -0
  51. package/types/layout-reducer/remove-layout-element.d.ts +3 -0
  52. package/types/layout-reducer/replace-layout-element.d.ts +6 -0
  53. package/types/layout-reducer/resize-flex-children.d.ts +3 -0
  54. package/types/layout-reducer/wrap-layout-element.d.ts +9 -0
  55. package/types/layout-view/View.d.ts +5 -0
  56. package/types/layout-view/ViewContext.d.ts +18 -0
  57. package/{src/layout-view/index.ts → types/layout-view/index.d.ts} +0 -1
  58. package/types/layout-view/useView.d.ts +21 -0
  59. package/types/layout-view/useViewActionDispatcher.d.ts +8 -0
  60. package/types/layout-view/useViewResize.d.ts +7 -0
  61. package/types/layout-view/viewTypes.d.ts +18 -0
  62. package/types/palette/Palette.d.ts +18 -0
  63. package/types/palette/PaletteSalt.d.ts +14 -0
  64. package/{src/palette/index.ts → types/palette/index.d.ts} +0 -1
  65. package/types/placeholder/Placeholder.d.ts +12 -0
  66. package/{src/placeholder/index.ts → types/placeholder/index.d.ts} +0 -0
  67. package/types/registry/ComponentRegistry.d.ts +14 -0
  68. package/{src/registry/index.ts → types/registry/index.d.ts} +0 -0
  69. package/types/responsive/breakpoints.d.ts +4 -0
  70. package/{src/responsive/index.ts → types/responsive/index.d.ts} +0 -0
  71. package/types/responsive/measureMinimumNodeSize.d.ts +1 -0
  72. package/types/responsive/overflowUtils.d.ts +2 -0
  73. package/types/responsive/use-breakpoints.d.ts +7 -0
  74. package/types/responsive/useResizeObserver.d.ts +12 -0
  75. package/types/responsive/utils.d.ts +6 -0
  76. package/types/stack/Stack.d.ts +4 -0
  77. package/types/stack/StackLayout.d.ts +7 -0
  78. package/{src/stack/index.ts → types/stack/index.d.ts} +0 -1
  79. package/types/stack/stackTypes.d.ts +20 -0
  80. package/types/tabs/TabPanel.d.ts +7 -0
  81. package/{src/tabs/index.ts → types/tabs/index.d.ts} +0 -0
  82. package/types/tools/config-wrapper/ConfigWrapper.d.ts +2 -0
  83. package/{src/tools/config-wrapper/index.ts → types/tools/config-wrapper/index.d.ts} +0 -0
  84. package/types/tools/devtools-box/layout-configurator.d.ts +31 -0
  85. package/types/tools/devtools-tree/layout-tree-viewer.d.ts +5 -0
  86. package/{src/tools/index.ts → types/tools/index.d.ts} +0 -1
  87. package/types/use-persistent-state.d.ts +11 -0
  88. package/{src/utils/index.ts → types/utils/index.d.ts} +0 -0
  89. package/types/utils/pathUtils.d.ts +18 -0
  90. package/types/utils/propUtils.d.ts +5 -0
  91. package/types/utils/refUtils.d.ts +2 -0
  92. package/types/utils/styleUtils.d.ts +3 -0
  93. package/types/utils/typeOf.d.ts +4 -0
  94. package/src/Component.css +0 -0
  95. package/src/Component.tsx +0 -20
  96. package/src/DraggableLayout.css +0 -18
  97. package/src/DraggableLayout.tsx +0 -26
  98. package/src/__tests__/flexbox-utils.spec.js +0 -90
  99. package/src/chest-of-drawers/Chest.css +0 -36
  100. package/src/chest-of-drawers/Chest.tsx +0 -42
  101. package/src/chest-of-drawers/Drawer.css +0 -159
  102. package/src/chest-of-drawers/Drawer.tsx +0 -118
  103. package/src/common-types.ts +0 -9
  104. package/src/debug.ts +0 -16
  105. package/src/drag-drop/BoxModel.ts +0 -551
  106. package/src/drag-drop/DragState.ts +0 -219
  107. package/src/drag-drop/Draggable.ts +0 -282
  108. package/src/drag-drop/DropMenu.css +0 -71
  109. package/src/drag-drop/DropMenu.tsx +0 -61
  110. package/src/drag-drop/DropTarget.ts +0 -393
  111. package/src/drag-drop/DropTargetRenderer.css +0 -40
  112. package/src/drag-drop/DropTargetRenderer.tsx +0 -277
  113. package/src/drag-drop/dragDropTypes.ts +0 -47
  114. package/src/editable-label/EditableLabel.css +0 -28
  115. package/src/editable-label/EditableLabel.tsx +0 -99
  116. package/src/flexbox/Flexbox.css +0 -45
  117. package/src/flexbox/Flexbox.tsx +0 -70
  118. package/src/flexbox/FlexboxLayout.tsx +0 -28
  119. package/src/flexbox/FluidGrid.css +0 -134
  120. package/src/flexbox/FluidGrid.tsx +0 -82
  121. package/src/flexbox/FluidGridLayout.tsx +0 -9
  122. package/src/flexbox/Splitter.css +0 -140
  123. package/src/flexbox/Splitter.tsx +0 -127
  124. package/src/flexbox/flexbox-utils.ts +0 -128
  125. package/src/flexbox/flexboxTypes.ts +0 -68
  126. package/src/flexbox/useResponsiveSizing.ts +0 -82
  127. package/src/flexbox/useSplitterResizing.ts +0 -270
  128. package/src/layout-action.ts +0 -21
  129. package/src/layout-header/ActionButton.tsx +0 -23
  130. package/src/layout-header/Header.css +0 -8
  131. package/src/layout-header/Header.tsx +0 -216
  132. package/src/layout-provider/LayoutProvider.tsx +0 -161
  133. package/src/layout-provider/LayoutProviderContext.ts +0 -17
  134. package/src/layout-provider/useLayoutDragDrop.ts +0 -210
  135. package/src/layout-reducer/flexUtils.ts +0 -276
  136. package/src/layout-reducer/insert-layout-element.ts +0 -365
  137. package/src/layout-reducer/layout-reducer.ts +0 -237
  138. package/src/layout-reducer/layoutTypes.ts +0 -159
  139. package/src/layout-reducer/layoutUtils.ts +0 -288
  140. package/src/layout-reducer/remove-layout-element.ts +0 -226
  141. package/src/layout-reducer/replace-layout-element.ts +0 -113
  142. package/src/layout-reducer/resize-flex-children.ts +0 -55
  143. package/src/layout-reducer/wrap-layout-element.ts +0 -307
  144. package/src/layout-view/View.css +0 -61
  145. package/src/layout-view/View.tsx +0 -143
  146. package/src/layout-view/ViewContext.ts +0 -30
  147. package/src/layout-view/useView.tsx +0 -104
  148. package/src/layout-view/useViewActionDispatcher.ts +0 -123
  149. package/src/layout-view/useViewResize.ts +0 -53
  150. package/src/layout-view/viewTypes.ts +0 -35
  151. package/src/palette/Palette.css +0 -33
  152. package/src/palette/Palette.tsx +0 -140
  153. package/src/palette/PaletteSalt.css +0 -9
  154. package/src/palette/PaletteSalt.tsx +0 -79
  155. package/src/placeholder/Placeholder.css +0 -10
  156. package/src/placeholder/Placeholder.tsx +0 -38
  157. package/src/registry/ComponentRegistry.ts +0 -44
  158. package/src/responsive/breakpoints.ts +0 -62
  159. package/src/responsive/measureMinimumNodeSize.ts +0 -23
  160. package/src/responsive/overflowUtils.js +0 -14
  161. package/src/responsive/use-breakpoints.ts +0 -101
  162. package/src/responsive/useResizeObserver.ts +0 -154
  163. package/src/responsive/utils.ts +0 -37
  164. package/src/stack/Stack.css +0 -39
  165. package/src/stack/Stack.tsx +0 -173
  166. package/src/stack/StackLayout.tsx +0 -119
  167. package/src/stack/stackTypes.ts +0 -22
  168. package/src/tabs/TabPanel.css +0 -12
  169. package/src/tabs/TabPanel.tsx +0 -17
  170. package/src/tools/config-wrapper/ConfigWrapper.tsx +0 -55
  171. package/src/tools/devtools-box/layout-configurator.css +0 -112
  172. package/src/tools/devtools-box/layout-configurator.jsx +0 -369
  173. package/src/tools/devtools-tree/layout-tree-viewer.css +0 -15
  174. package/src/tools/devtools-tree/layout-tree-viewer.jsx +0 -36
  175. package/src/use-persistent-state.ts +0 -112
  176. package/src/utils/pathUtils.ts +0 -283
  177. package/src/utils/propUtils.ts +0 -26
  178. package/src/utils/refUtils.ts +0 -16
  179. package/src/utils/styleUtils.ts +0 -13
  180. package/src/utils/typeOf.ts +0 -25
  181. package/tsconfig-emit-types.json +0 -11
@@ -1,283 +0,0 @@
1
- import React, { ReactElement } from "react";
2
- import { LayoutModel } from "../layout-reducer";
3
- import { isContainer } from "../registry/ComponentRegistry";
4
- import { getProp, getProps } from "./propUtils";
5
- import { typeOf } from "./typeOf";
6
-
7
- const removeFinalPathSegment = (path: string) => {
8
- const pos = path.lastIndexOf(".");
9
- if (pos === -1) {
10
- return path;
11
- } else {
12
- return path.slice(0, pos);
13
- }
14
- };
15
-
16
- export function followPathToParent(
17
- source: ReactElement,
18
- path: string
19
- ): ReactElement | null {
20
- const { "data-path": dataPath, path: sourcePath = dataPath } =
21
- getProps(source);
22
-
23
- if (path === "0") return null;
24
- if (path === sourcePath) return null;
25
-
26
- return followPath(source, removeFinalPathSegment(path), true);
27
- }
28
-
29
- export function findTarget(
30
- source: LayoutModel,
31
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
32
- test: (props: any) => boolean
33
- ): LayoutModel | undefined {
34
- const { children, ...props } = getProps(source);
35
- if (test(props)) {
36
- return source;
37
- }
38
- if (React.Children.count(children) > 0) {
39
- const array = React.isValidElement(children) ? [children] : children;
40
- for (const child of array) {
41
- const target = findTarget(child, test);
42
- if (target) {
43
- return target;
44
- }
45
- }
46
- }
47
- }
48
-
49
- export function containerOf(
50
- source: LayoutModel,
51
- target: LayoutModel
52
- ): LayoutModel | null {
53
- if (target === source) {
54
- return null;
55
- }
56
- const { path: sourcePath, children } = getProps(source);
57
- const { idx, finalStep } = nextStep(sourcePath, getProp(target, "path"));
58
- if (finalStep) {
59
- return source;
60
- }
61
- if (children === undefined || children[idx] === undefined) {
62
- return null;
63
- }
64
- return containerOf(children[idx], target);
65
- }
66
-
67
- export const getChild = (
68
- children: ReactElement[],
69
- idx: number
70
- ): ReactElement | undefined => {
71
- if (React.isValidElement(children) && idx == 0) {
72
- return children;
73
- }
74
- if (Array.isArray(children)) {
75
- return children[idx];
76
- }
77
- };
78
-
79
- export function followPathToComponent(component: ReactElement, path: string) {
80
- const paths = path.split(".");
81
- let children = [component];
82
-
83
- const getChildren = (c: ReactElement) =>
84
- React.isValidElement(c.props.children)
85
- ? [c.props.children]
86
- : c.props.children;
87
-
88
- for (let i = 0; i < paths.length; i++) {
89
- const idx = parseInt(paths[i]);
90
- const child = children[idx];
91
- if (i === paths.length - 1) {
92
- return child;
93
- }
94
- children = getChildren(child);
95
- }
96
- }
97
-
98
- export function followPath(
99
- source: LayoutModel,
100
- path: string
101
- ): LayoutModel | undefined;
102
- export function followPath(
103
- source: ReactElement,
104
- path: string,
105
- throwIfNotFound: true
106
- ): ReactElement;
107
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
108
- export function followPath(source: any, path: any, throwIfNotFound = false) {
109
- const { "data-path": dataPath, path: sourcePath = dataPath } =
110
- getProps(source);
111
- if (path.indexOf(sourcePath) !== 0) {
112
- throw Error(
113
- `pathUtils.followPath path ${path} is not within source path ${sourcePath}`
114
- );
115
- }
116
- const route = path.slice(sourcePath.length + 1);
117
- if (route === "") {
118
- return source;
119
- }
120
-
121
- let target = source;
122
- const paths = route.split(".");
123
-
124
- for (let i = 0; i < paths.length; i++) {
125
- if (React.Children.count(target.props.children) === 0) {
126
- const message = `element at 0.${paths
127
- .slice(0, i)
128
- .join(".")} has no children, so cannot fulfill rest of path ${paths
129
- .slice(i)
130
- .join(".")}`;
131
-
132
- if (throwIfNotFound) {
133
- throw Error(message);
134
- } else {
135
- console.warn(message);
136
- return;
137
- }
138
- }
139
-
140
- target = getChild(target.props.children, parseInt(paths[i]));
141
-
142
- if (target === undefined) {
143
- const message = `model at 0.${paths
144
- .slice(0, i)
145
- .join(".")} has no children that fulfill next step of path ${paths
146
- .slice(i)
147
- .join(".")}`;
148
-
149
- if (throwIfNotFound) {
150
- throw Error(message);
151
- } else {
152
- console.warn(message);
153
- }
154
- }
155
- }
156
- return target;
157
- }
158
-
159
- export function nextLeaf(root: ReactElement, path: string) {
160
- const parent = followPathToParent(root, path);
161
- let pathIndices = path.split(".").map((idx) => parseInt(idx, 10));
162
- if (parent) {
163
- const lastIdx = pathIndices.pop();
164
- const { children } = parent.props;
165
- if (children.length - 1 > lastIdx!) {
166
- return firstLeaf(children[lastIdx! + 1]);
167
- } else {
168
- const parentIdx = pathIndices.pop();
169
- const nextParent = followPathToParent(root, getProp(parent, "path"));
170
- if (nextParent && typeof parentIdx === "number") {
171
- pathIndices = nextParent.props.path
172
- .split(".")
173
- .map((idx: string) => parseInt(idx, 10));
174
- if (nextParent.props.children.length - 1 > parentIdx) {
175
- const nextStep = nextParent.props.children[parentIdx + 1];
176
- if (isContainer(typeOf(nextStep) as string)) {
177
- return firstLeaf(nextStep);
178
- } else {
179
- return nextStep;
180
- }
181
- }
182
- }
183
- }
184
- }
185
-
186
- return firstLeaf(root);
187
- }
188
-
189
- export function previousLeaf(root: ReactElement, path: string) {
190
- const pathIndices = path.split(".").map((idx) => parseInt(idx, 10));
191
- let lastIdx = pathIndices.pop();
192
- let parent = followPathToParent(root, path);
193
- if (parent != null && typeof lastIdx === "number") {
194
- const { children } = parent.props;
195
- if (lastIdx > 0) {
196
- return lastLeaf(children[lastIdx - 1]);
197
- } else {
198
- while (pathIndices.length > 1) {
199
- lastIdx = pathIndices.pop() as number;
200
- parent = followPathToParent(
201
- root,
202
- getProp(parent, "path")
203
- ) as ReactElement;
204
- if (lastIdx > 0) {
205
- const nextStep = parent.props.children[lastIdx - 1];
206
- if (isContainer(typeOf(nextStep) as string)) {
207
- return lastLeaf(nextStep);
208
- }
209
- return nextStep;
210
- }
211
- }
212
- }
213
- }
214
- return lastLeaf(root);
215
- }
216
-
217
- function firstLeaf(layoutRoot: ReactElement): ReactElement {
218
- if (isContainer(typeOf(layoutRoot) as string)) {
219
- const { children } = layoutRoot.props || layoutRoot;
220
- return firstLeaf(children[0]);
221
- }
222
- return layoutRoot;
223
- }
224
-
225
- function lastLeaf(root: ReactElement): ReactElement {
226
- if (isContainer(typeOf(root) as string)) {
227
- const { children } = root.props || root;
228
- return lastLeaf(children[children.length - 1]);
229
- }
230
- return root;
231
- }
232
-
233
- type NextStepResult = {
234
- idx: number;
235
- finalStep: boolean;
236
- };
237
-
238
- export function nextStep(
239
- pathSoFar: string,
240
- targetPath: string,
241
- followPathToEnd = false
242
- ): NextStepResult {
243
- if (pathSoFar === targetPath) {
244
- return { idx: -1, finalStep: true };
245
- }
246
-
247
- const pathVisited = `${pathSoFar}.`;
248
- if (!targetPath.startsWith(pathVisited)) {
249
- throw Error("pathUtils nextStep has strayed from the path");
250
- }
251
-
252
- const endOfTheLine = followPathToEnd ? 0 : 1;
253
- const paths = targetPath
254
- .replace(pathVisited, "")
255
- .split(".")
256
- .map((n) => parseInt(n, 10));
257
- return { idx: paths[0], finalStep: paths.length === endOfTheLine };
258
- }
259
-
260
- export function resetPath(
261
- model: ReactElement,
262
- path: string,
263
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
264
- additionalProps?: any
265
- ): ReactElement {
266
- if (getProp(model, "path") === path) {
267
- return model;
268
- }
269
- const children: ReactElement[] = [];
270
- React.Children.forEach(model.props.children, (child, i) => {
271
- if (!getProp(child, "path")) {
272
- children.push(child);
273
- } else {
274
- children.push(resetPath(child, `${path}.${i}`));
275
- }
276
- });
277
- const pathPropName = model.props["data-path"] ? "data-path" : "path";
278
- return React.cloneElement(
279
- model,
280
- { [pathPropName]: path, ...additionalProps },
281
- children
282
- );
283
- }
@@ -1,26 +0,0 @@
1
- import { ReactElement } from "react";
2
- import { LayoutModel } from "../layout-reducer";
3
-
4
- const NO_PROPS = {};
5
- export const getProp = (component: LayoutModel, propName: string) => {
6
- const props = getProps(component);
7
- return props[propName] ?? props[`data-${propName}`];
8
- };
9
-
10
- export const getProps = (component?: LayoutModel) =>
11
- component?.props || component || NO_PROPS;
12
-
13
- export const getChildProp = (container: LayoutModel) => {
14
- const props = getProps(container);
15
- if (props.children) {
16
- const {
17
- children: [target, ...rest],
18
- } = props;
19
- if (rest.length > 0) {
20
- console.warn(
21
- `getChild expected a single child, found ${rest.length + 1}`
22
- );
23
- }
24
- return target as ReactElement;
25
- }
26
- };
@@ -1,16 +0,0 @@
1
- import { MutableRefObject } from "react";
2
-
3
- export function setRef<T>(
4
- ref:
5
- | MutableRefObject<T | null>
6
- | ((instance: T | null) => void)
7
- | null
8
- | undefined,
9
- value: T | null
10
- ): void {
11
- if (typeof ref === "function") {
12
- ref(value);
13
- } else if (ref) {
14
- ref.current = value;
15
- }
16
- }
@@ -1,13 +0,0 @@
1
- import { CSSProperties } from 'react';
2
- export type CSSFlexProperties = Pick<CSSProperties, 'flexBasis' | 'flexGrow' | 'flexShrink'>;
3
-
4
- export const expandFlex = (flex: number | CSSFlexProperties): CSSFlexProperties => {
5
- if (typeof flex !== 'number') {
6
- throw Error(`"no support yet for flex value ${flex}`);
7
- }
8
- return {
9
- flexBasis: 0,
10
- flexGrow: 1,
11
- flexShrink: 1
12
- };
13
- };
@@ -1,25 +0,0 @@
1
- import { ReactElement } from 'react';
2
- import { LayoutModel, WithType } from '../layout-reducer';
3
-
4
- export function typeOf(element?: LayoutModel | WithType): string | undefined {
5
- if (element) {
6
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
7
- const type = element.type as any;
8
- if (typeof type === 'function' || typeof type === 'object') {
9
- const elementName = type.displayName || type.name || type.type?.name;
10
- if (typeof elementName === 'string') {
11
- return elementName;
12
- }
13
- }
14
- if (typeof element.type === 'string') {
15
- return element.type;
16
- }
17
- if (element.constructor) {
18
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
19
- return (element.constructor as any).displayName as string;
20
- }
21
- throw Error(`typeOf unable to determine type of element`);
22
- }
23
- }
24
-
25
- export const isTypeOf = (element: ReactElement, type: string) => typeOf(element) === type;
@@ -1,11 +0,0 @@
1
- {
2
- "extends": "../../tsconfig-emit-types.json",
3
- "compilerOptions": {
4
- "outDir": "../../dist/vuu-layout/types"
5
- },
6
- "include": [
7
- "src"
8
- ]
9
- }
10
-
11
-