@vuu-ui/grid-layout 4.0.0-alpha.1

package/src/grid-snapshot-adapters.js

@@ -0,0 +1,435 @@
+import { GridSnapshotValidationError } from "./GridSnapshot.js";
+import { normalizeGridStackState } from "./GridStack.js";
+const TRACK_PATTERN = /^(?:\d+(?:\.\d+)?|\.\d+)(?:fr|px)$/;
+const isRecord = (value)=>"object" == typeof value && null !== value;
+const validateKnownFields = (value, fields, path, issues)=>{
+    const knownFields = new Set(fields);
+    for (const field of Object.keys(value))if (!knownFields.has(field)) issues.push({
+        code: "UNEXPECTED_FIELD",
+        message: `unexpected field "${field}"`,
+        path: "$" === path ? field : `${path}.${field}`
+    });
+};
+const cloneTrack = ({ size })=>({
+        size
+    });
+const cloneSpan = ({ span, start })=>({
+        span,
+        start
+    });
+const cloneItem = ({ column, componentInstanceId, contentVisible, dropTarget, header, id, minHeight, minWidth, resizeable, row, title })=>({
+        column: cloneSpan(column),
+        componentInstanceId,
+        contentVisible,
+        dropTarget,
+        header,
+        id,
+        minHeight,
+        minWidth,
+        resizeable,
+        row: cloneSpan(row),
+        title
+    });
+const cloneStack = ({ id, itemIds, selectedItemId })=>({
+        id,
+        itemIds: [
+            ...itemIds
+        ],
+        selectedItemId
+    });
+const validateSpan = (span, trackCount, path, issues)=>{
+    if (!isRecord(span)) return void issues.push({
+        code: "INVALID_STRUCTURE",
+        message: "span must be an object",
+        path
+    });
+    validateKnownFields(span, [
+        "span",
+        "start"
+    ], path, issues);
+    const { span: length, start } = span;
+    if (!Number.isInteger(start) || !Number.isInteger(length) || "number" != typeof length || length <= 0) return void issues.push({
+        code: "INVALID_SPAN",
+        message: "start and span must be integers and span must be positive",
+        path
+    });
+    if ("number" == typeof start && (start <= 0 || start + length - 1 > trackCount)) issues.push({
+        code: "INVALID_TRACK_REFERENCE",
+        message: `range ${start}/${length} exceeds ${trackCount} tracks`,
+        path
+    });
+};
+const validateGridSnapshot = (value)=>{
+    const issues = [];
+    if (!isRecord(value)) return [
+        {
+            code: "INVALID_STRUCTURE",
+            message: "snapshot must be an object",
+            path: "$"
+        }
+    ];
+    const { columns, gridId, items, revision, rows, stacks } = value;
+    validateKnownFields(value, [
+        "columns",
+        "gridId",
+        "items",
+        "revision",
+        "rows",
+        "stacks"
+    ], "$", issues);
+    if ("string" != typeof gridId || !gridId) issues.push({
+        code: "EMPTY_ID",
+        message: "grid id must not be empty",
+        path: "gridId"
+    });
+    if ("number" != typeof revision || !Number.isInteger(revision) || revision < 0) issues.push({
+        code: "INVALID_REVISION",
+        message: "revision must be a non-negative integer",
+        path: "revision"
+    });
+    const validateTracks = (tracks, path)=>{
+        if (!Array.isArray(tracks)) {
+            issues.push({
+                code: "INVALID_STRUCTURE",
+                message: "tracks must be an array",
+                path
+            });
+            return [];
+        }
+        tracks.forEach((track, index)=>{
+            const size = isRecord(track) ? track.size : void 0;
+            if (isRecord(track)) validateKnownFields(track, [
+                "size"
+            ], `${path}[${index}]`, issues);
+            if ("string" != typeof size || !TRACK_PATTERN.test(size)) issues.push({
+                code: "MALFORMED_TRACK",
+                message: `unsupported track size "${String(size)}"`,
+                path: `${path}[${index}].size`
+            });
+        });
+        return tracks;
+    };
+    const validatedColumns = validateTracks(columns, "columns");
+    const validatedRows = validateTracks(rows, "rows");
+    const ids = new Map();
+    const addId = (id, path)=>{
+        if ("string" != typeof id || !id) return void issues.push({
+            code: "EMPTY_ID",
+            message: "id must not be empty",
+            path
+        });
+        const firstPath = ids.get(id);
+        if (firstPath) issues.push({
+            code: "DUPLICATE_ID",
+            message: `id "${id}" is already used at ${firstPath}`,
+            path
+        });
+        else ids.set(id, path);
+    };
+    const itemIds = new Set();
+    const itemById = new Map();
+    const validatedItems = Array.isArray(items) ? items : [];
+    if (!Array.isArray(items)) issues.push({
+        code: "INVALID_STRUCTURE",
+        message: "items must be an array",
+        path: "items"
+    });
+    validatedItems.forEach((item, index)=>{
+        const path = `items[${index}]`;
+        if (!isRecord(item)) return void issues.push({
+            code: "INVALID_STRUCTURE",
+            message: "item must be an object",
+            path
+        });
+        validateKnownFields(item, [
+            "column",
+            "componentInstanceId",
+            "contentVisible",
+            "dropTarget",
+            "header",
+            "id",
+            "minHeight",
+            "minWidth",
+            "resizeable",
+            "row",
+            "title"
+        ], path, issues);
+        addId(item.id, `${path}.id`);
+        if ("string" == typeof item.id) {
+            itemIds.add(item.id);
+            itemById.set(item.id, item);
+        }
+        validateSpan(item.column, validatedColumns.length, `${path}.column`, issues);
+        validateSpan(item.row, validatedRows.length, `${path}.row`, issues);
+        const optionalFields = [
+            [
+                "componentInstanceId",
+                (field)=>"string" == typeof field
+            ],
+            [
+                "contentVisible",
+                (field)=>"boolean" == typeof field
+            ],
+            [
+                "dropTarget",
+                (field)=>"boolean" == typeof field || "string" == typeof field
+            ],
+            [
+                "header",
+                (field)=>"boolean" == typeof field
+            ],
+            [
+                "minHeight",
+                (field)=>"number" == typeof field && Number.isFinite(field) && field >= 0
+            ],
+            [
+                "minWidth",
+                (field)=>"number" == typeof field && Number.isFinite(field) && field >= 0
+            ],
+            [
+                "resizeable",
+                (field)=>false === field || "h" === field || "v" === field || "hv" === field
+            ],
+            [
+                "title",
+                (field)=>"string" == typeof field
+            ]
+        ];
+        for (const [fieldName, isValid] of optionalFields){
+            const field = item[fieldName];
+            if (void 0 !== field && !isValid(field)) issues.push({
+                code: "INVALID_FIELD",
+                message: `invalid ${fieldName}`,
+                path: `${path}.${fieldName}`
+            });
+        }
+    });
+    const stackedItemIds = new Set();
+    const validatedStacks = Array.isArray(stacks) ? stacks : [];
+    if (!Array.isArray(stacks)) issues.push({
+        code: "INVALID_STRUCTURE",
+        message: "stacks must be an array",
+        path: "stacks"
+    });
+    validatedStacks.forEach((stack, stackIndex)=>{
+        const path = `stacks[${stackIndex}]`;
+        if (!isRecord(stack)) return void issues.push({
+            code: "INVALID_STRUCTURE",
+            message: "stack must be an object",
+            path
+        });
+        validateKnownFields(stack, [
+            "id",
+            "itemIds",
+            "selectedItemId"
+        ], path, issues);
+        addId(stack.id, `${path}.id`);
+        if (!Array.isArray(stack.itemIds)) return void issues.push({
+            code: "INVALID_STRUCTURE",
+            message: "stack item ids must be an array",
+            path: `${path}.itemIds`
+        });
+        if (stack.itemIds.length < 2) issues.push({
+            code: "INVALID_STACK_MEMBERSHIP",
+            message: "a stack must contain at least two items",
+            path: `${path}.itemIds`
+        });
+        const members = new Set();
+        stack.itemIds.forEach((itemId, itemIndex)=>{
+            const itemPath = `${path}.itemIds[${itemIndex}]`;
+            if ("string" != typeof itemId) issues.push({
+                code: "INVALID_STACK_MEMBERSHIP",
+                message: "stack item id must be a string",
+                path: itemPath
+            });
+            else if (!itemIds.has(itemId) || members.has(itemId) || stackedItemIds.has(itemId)) issues.push({
+                code: "INVALID_STACK_MEMBERSHIP",
+                message: `item "${itemId}" is missing, duplicated, or belongs to another stack`,
+                path: itemPath
+            });
+            if ("string" == typeof itemId) {
+                members.add(itemId);
+                stackedItemIds.add(itemId);
+            }
+        });
+        if ("string" != typeof stack.selectedItemId || !members.has(stack.selectedItemId)) issues.push({
+            code: "INVALID_STACK_SELECTION",
+            message: `selected item "${String(stack.selectedItemId)}" is not a stack member`,
+            path: `${path}.selectedItemId`
+        });
+        const [firstItemId, ...otherItemIds] = members;
+        const firstItem = itemById.get(firstItemId);
+        const hasSameSpan = (left, right)=>isRecord(left) && isRecord(right) && left.start === right.start && left.span === right.span;
+        if (firstItem && otherItemIds.some((itemId)=>{
+            const item = itemById.get(itemId);
+            return !item || !hasSameSpan(firstItem.column, item.column) || !hasSameSpan(firstItem.row, item.row);
+        })) issues.push({
+            code: "INVALID_STACK_POSITION",
+            message: "all stack members must occupy the same grid area",
+            path: `${path}.itemIds`
+        });
+    });
+    return issues;
+};
+const assertValidSnapshot = (snapshot)=>{
+    const issues = validateGridSnapshot(snapshot);
+    if (issues.length > 0) throw new GridSnapshotValidationError(issues);
+};
+const normalizeGridSnapshot = (snapshot)=>{
+    assertValidSnapshot(snapshot);
+    return {
+        columns: snapshot.columns.map(cloneTrack),
+        gridId: snapshot.gridId,
+        items: snapshot.items.map(cloneItem),
+        revision: snapshot.revision,
+        rows: snapshot.rows.map(cloneTrack),
+        stacks: snapshot.stacks.map(cloneStack)
+    };
+};
+const parseGridArea = (gridArea, path, issues)=>{
+    const lines = gridArea.split("/").map((value)=>Number(value));
+    if (4 !== lines.length || lines.some((value)=>!Number.isInteger(value))) {
+        issues.push({
+            code: "MALFORMED_GRID_AREA",
+            message: `grid area "${gridArea}" must contain four integer grid lines`,
+            path
+        });
+        return {
+            column: {
+                span: 0 / 0,
+                start: 0 / 0
+            },
+            row: {
+                span: 0 / 0,
+                start: 0 / 0
+            }
+        };
+    }
+    const [rowStart, columnStart, rowEnd, columnEnd] = lines;
+    return {
+        column: {
+            span: columnEnd - columnStart,
+            start: columnStart
+        },
+        row: {
+            span: rowEnd - rowStart,
+            start: rowStart
+        }
+    };
+};
+const gridLayoutDescriptorToSnapshot = (descriptor, { gridId, revision = 0 })=>{
+    const issues = [];
+    const stackMembers = new Map();
+    const items = Object.entries(descriptor.gridLayoutItems ?? {}).map(([id, item])=>{
+        const { componentId, gridArea, stackId, ...metadata } = item;
+        const snapshotItem = {
+            ...metadata,
+            componentInstanceId: componentId,
+            id,
+            ...parseGridArea(gridArea, `gridLayoutItems.${id}.gridArea`, issues)
+        };
+        if (stackId) {
+            const members = stackMembers.get(stackId) ?? [];
+            members.push(snapshotItem);
+            stackMembers.set(stackId, members);
+        }
+        return snapshotItem;
+    });
+    const stacks = [
+        ...stackMembers
+    ].map(([id, members])=>({
+            id,
+            itemIds: members.map(({ id: itemId })=>itemId),
+            selectedItemId: members.find(({ contentVisible })=>contentVisible)?.id ?? members[0]?.id ?? ""
+        }));
+    const stackedItemIds = new Set(stacks.flatMap(({ itemIds })=>itemIds));
+    const snapshot = {
+        columns: descriptor.cols.map((size)=>({
+                size
+            })),
+        gridId,
+        items: items.map((item)=>{
+            if (stackedItemIds.has(item.id)) {
+                const { contentVisible: _contentVisible, ...stackedItem } = item;
+                return stackedItem;
+            }
+            return item;
+        }),
+        revision,
+        rows: descriptor.rows.map((size)=>({
+                size
+            })),
+        stacks
+    };
+    issues.push(...validateGridSnapshot(snapshot));
+    if (issues.length > 0) throw new GridSnapshotValidationError(issues);
+    return normalizeGridSnapshot(snapshot);
+};
+const toDescriptorItem = (item, stack)=>({
+        ...void 0 === item.componentInstanceId ? {} : {
+            componentId: item.componentInstanceId
+        },
+        contentVisible: stack ? stack.selectedItemId === item.id : item.contentVisible,
+        dropTarget: item.dropTarget,
+        gridArea: `${item.row.start}/${item.column.start}/${item.row.start + item.row.span}/${item.column.start + item.column.span}`,
+        header: item.header,
+        minHeight: item.minHeight,
+        minWidth: item.minWidth,
+        resizeable: item.resizeable,
+        stackId: stack?.id,
+        title: item.title
+    });
+const gridSnapshotToGridLayoutDescriptor = (snapshot)=>{
+    const normalized = normalizeGridSnapshot(snapshot);
+    const stackByItemId = new Map(normalized.stacks.flatMap((stack)=>stack.itemIds.map((itemId)=>[
+                itemId,
+                stack
+            ])));
+    return {
+        cols: normalized.columns.map(({ size })=>size),
+        gridLayoutItems: Object.fromEntries(normalized.items.map((item)=>[
+                item.id,
+                toDescriptorItem(item, stackByItemId.get(item.id))
+            ])),
+        rows: normalized.rows.map(({ size })=>size)
+    };
+};
+const gridSnapshotToGridStackStates = (snapshot)=>{
+    const normalized = normalizeGridSnapshot(snapshot);
+    const itemById = new Map(normalized.items.map((item)=>[
+            item.id,
+            item
+        ]));
+    return normalized.stacks.map((stack)=>{
+        const [firstItemId] = stack.itemIds;
+        const firstItem = itemById.get(firstItemId);
+        return normalizeGridStackState({
+            area: {
+                column: firstItem?.column ?? {
+                    span: 1,
+                    start: 1
+                },
+                row: firstItem?.row ?? {
+                    span: 1,
+                    start: 1
+                }
+            },
+            id: stack.id,
+            members: stack.itemIds.map((itemId)=>{
+                const item = itemById.get(itemId);
+                return {
+                    id: itemId,
+                    label: item?.title ?? itemId,
+                    title: item?.title
+                };
+            }),
+            metadata: {
+                minHeight: firstItem?.minHeight,
+                minWidth: firstItem?.minWidth,
+                resizeable: firstItem?.resizeable
+            },
+            selectedItemId: stack.selectedItemId
+        });
+    });
+};
+export { gridLayoutDescriptorToSnapshot, gridSnapshotToGridLayoutDescriptor, gridSnapshotToGridStackStates, normalizeGridSnapshot, validateGridSnapshot };

package/src/index.js

@@ -0,0 +1,24 @@
+import * as __rspack_external__GridLayoutLegacyCompatibility_js_8810c272 from "./GridLayoutLegacyCompatibility.js";
+var createLegacyGridLayoutReader = __rspack_external__GridLayoutLegacyCompatibility_js_8810c272.createLegacyGridLayoutReader;
+var decodeLegacySerializedGridLayout = __rspack_external__GridLayoutLegacyCompatibility_js_8810c272.decodeLegacySerializedGridLayout;
+export { DragDropProviderNext, useOptionalDragContext } from "./drag-drop-next/DragDropProviderNext.js";
+export { GridLayout } from "./GridLayout.js";
+export { GridDragCoordinator, createGridDropPlan } from "./GridDragCoordinator.js";
+export { GridController } from "./GridController.js";
+export { GridCommandExecutionError, throwForGridCommandFailure } from "./GridCommand.js";
+export { useGridController, useGridLayoutDispatch, useGridLayoutDragStartHandler, useGridModel, useGridSnapshot } from "./GridLayoutContext.js";
+export { useGridControllerSnapshot } from "./useGridControllerSnapshot.js";
+export { GridLayoutItem } from "./GridLayoutItem.js";
+export { GridLayoutDocumentController, GridLayoutProvider } from "./GridLayoutProvider.js";
+export { createSequentialGridLayoutIdAllocator, remapGridLayoutDocumentIds } from "./GridLayoutDocumentIds.js";
+export { GridComponentRendererRegistry, GridComponentSettingsRegistry, GridLayoutContentRegistry } from "./GridComponentSettings.js";
+export { GRID_LAYOUT_DOCUMENT_KIND, GRID_LAYOUT_DOCUMENT_VERSION, GridLayoutDocumentCodecError, decodeGridLayoutDocument, encodeGridLayoutDocument, immutableGridLayoutDocument } from "./GridLayoutDocument.js";
+export { toJsonValue } from "./json-value.js";
+export { GridLayoutStackedItem } from "./GridLayoutStackedtem.js";
+export { gridLayoutDescriptorToSnapshot, gridSnapshotToGridLayoutDescriptor, gridSnapshotToGridStackStates, normalizeGridSnapshot, validateGridSnapshot } from "./grid-snapshot-adapters.js";
+export { GridSnapshotValidationError } from "./GridSnapshot.js";
+export { MIN_GRID_STACK_MEMBERS, addGridStackItem, assertValidGridStackState, cloneGridStackState, createGridStack, findGridStackMember, gridStackItemIds, gridStackMemberIndex, gridStackSelectedIndex, isSameGridStackState, normalizeGridStackState, removeGridStackItem, renameGridStackItem, reorderGridStackItem, selectGridStackItem, toGridStackSnapshot, validateGridStackState } from "./GridStack.js";
+export { layoutFromJson } from "./layoutFromJson.js";
+export { useDraggable } from "./useDraggable.js";
+export { GridPlaceholder } from "./GridPlaceholder.js";
+export { __rspack_external__GridLayoutLegacyCompatibility_js_8810c272 as GridLayoutLegacyCompatibility, createLegacyGridLayoutReader, decodeLegacySerializedGridLayout };

package/src/json-value.js

@@ -0,0 +1,56 @@
+const error = (code, message, path)=>({
+        error: {
+            code,
+            message,
+            path
+        },
+        ok: false
+    });
+const toJsonValue = (value, path = "$")=>{
+    const ancestors = new Set();
+    const visit = (candidate, candidatePath)=>{
+        if (null === candidate || "string" == typeof candidate || "boolean" == typeof candidate) return {
+            ok: true,
+            value: candidate
+        };
+        if ("number" == typeof candidate) return Number.isFinite(candidate) ? {
+            ok: true,
+            value: candidate
+        } : error("INVALID_NUMBER", "numbers must be finite", candidatePath);
+        if ("object" != typeof candidate) return error("UNSUPPORTED_VALUE", `${typeof candidate} values are not valid JSON`, candidatePath);
+        if (ancestors.has(candidate)) return error("CYCLE", "cyclic values are not valid JSON", candidatePath);
+        const prototype = Object.getPrototypeOf(candidate);
+        if (!Array.isArray(candidate) && prototype !== Object.prototype && null !== prototype) return error("NON_PLAIN_OBJECT", "only arrays and plain objects are valid JSON", candidatePath);
+        if (Object.getOwnPropertySymbols(candidate).length > 0) return error("UNSUPPORTED_VALUE", "symbol-keyed properties are not valid JSON", candidatePath);
+        ancestors.add(candidate);
+        if (Array.isArray(candidate)) {
+            const propertyNames = Object.getOwnPropertyNames(candidate);
+            const unexpectedProperty = propertyNames.find((key)=>"length" !== key && (!/^(?:0|[1-9]\d*)$/.test(key) || Number(key) >= candidate.length));
+            if (unexpectedProperty) return error("UNSUPPORTED_VALUE", `array property "${unexpectedProperty}" is not valid JSON`, `${candidatePath}.${unexpectedProperty}`);
+            const result = [];
+            for(let index = 0; index < candidate.length; index += 1){
+                const item = visit(candidate[index], `${candidatePath}[${index}]`);
+                if (!item.ok) return item;
+                result.push(item.value);
+            }
+            ancestors.delete(candidate);
+            return {
+                ok: true,
+                value: result
+            };
+        }
+        const result = {};
+        for (const key of Object.getOwnPropertyNames(candidate).sort()){
+            const item = visit(candidate[key], "$" === candidatePath ? `$.${key}` : `${candidatePath}.${key}`);
+            if (!item.ok) return item;
+            result[key] = item.value;
+        }
+        ancestors.delete(candidate);
+        return {
+            ok: true,
+            value: result
+        };
+    };
+    return visit(value, path);
+};
+export { toJsonValue };

package/src/layoutFromJson.js

@@ -0,0 +1,15 @@
+import { getLayoutComponent, uuid } from "@vuu-ui/vuu-utils";
+import react from "react";
+const childFromJson = (child)=>"object" == typeof child ? layoutFromJson(child) : child;
+function layoutFromJson({ active, id = uuid(), type, children, props }) {
+    const componentType = type.match(/^[a-z]/) ? type : getLayoutComponent(type);
+    if (void 0 === componentType) throw Error(`layoutUtils unable to create component from JSON, unknown type ${type}`);
+    const componentProps = {
+        active,
+        id,
+        ...props,
+        key: id
+    };
+    return children?.length ? react.createElement(componentType, componentProps, children.map(childFromJson)) : react.createElement(componentType, componentProps);
+}
+export { layoutFromJson };

package/src/layoutToJson.js

@@ -0,0 +1,5 @@
+import { componentToJson } from "./componentToJson.js";
+function layoutToJSON(component) {
+    return componentToJson(component);
+}
+export { layoutToJSON };

package/src/propUtils.js

@@ -0,0 +1,15 @@
+const NO_PROPS = {};
+const getProp = (component, propName)=>{
+    const props = getProps(component);
+    return props[propName] ?? props[`data-${propName}`];
+};
+const getProps = (component)=>component?.props || component || NO_PROPS;
+const getChildProp = (container)=>{
+    const props = getProps(container);
+    if (props.children) {
+        const { children: [target, ...rest] } = props;
+        if (rest.length > 0) console.warn(`getChild expected a single child, found ${rest.length + 1}`);
+        return target;
+    }
+};
+export { getChildProp, getProp, getProps };

package/src/react-element-utils.js

@@ -0,0 +1,15 @@
+import react from "react";
+const getGridItemChild = (gridItems, gridItemId)=>{
+    const targetGridItem = gridItems.find((gridItem)=>gridItem.props?.id === gridItemId);
+    if (targetGridItem) return targetGridItem;
+    throw Error(`getGridItemChild #${gridItemId} not found`);
+};
+const addChildToStackedGridItem = (stackElement, childElement)=>{
+    const stackProps = stackElement.props;
+    if (Array.isArray(stackProps.children)) console.log("children is an array");
+    const stackChildren = stackProps.children;
+    return react.cloneElement(stackElement, {
+        active: stackChildren.length
+    }, stackChildren.concat(childElement));
+};
+export { addChildToStackedGridItem, getGridItemChild };

package/src/typeOf.js

@@ -0,0 +1,15 @@
+function typeOf(element) {
+    if (element) {
+        const type = element.type;
+        if ("function" == typeof type || "object" == typeof type) {
+            const elementName = type.displayName || type.name || type.type?.name;
+            if ("string" == typeof elementName) return elementName;
+        }
+        if ("string" == typeof element.type) return element.type;
+        if (element.constructor) return element.constructor.displayName;
+        throw Error("typeOf unable to determine type of element");
+    }
+}
+const isTypeOf = (element, type)=>typeOf(element) === type;
+const isLayoutJSON = (layout)=>void 0 !== layout && "type" in layout;
+export { isLayoutJSON, isTypeOf, typeOf };