@webiny/react-properties 5.30.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Webiny
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Properties.js

@@ -0,0 +1,201 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Property = exports.Properties = void 0;
+exports.useParentProperty = useParentProperty;
+exports.useProperties = useProperties;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _utils = require("./utils");
+
+function removeByParent(id, properties) {
+  return properties.filter(function (prop) {
+    return prop.parent === id;
+  }).reduce(function (acc, item) {
+    return removeByParent(item.id, acc.filter(function (prop) {
+      return prop.id !== item.id;
+    }));
+  }, properties);
+}
+
+var PropertiesContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+
+var Properties = function Properties(_ref) {
+  var onChange = _ref.onChange,
+      children = _ref.children;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      properties = _useState2[0],
+      setProperties = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (onChange) {
+      onChange(properties);
+    }
+  }, [properties]);
+  var context = (0, _react.useMemo)(function () {
+    return {
+      properties: properties,
+      getObject: function getObject() {
+        return (0, _utils.toObject)(properties);
+      },
+      addProperty: function addProperty(property) {
+        var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        setProperties(function (properties) {
+          // If a property with this ID already exists, merge the two properties.
+          var index = properties.findIndex(function (prop) {
+            return prop.id === property.id;
+          });
+
+          if (index > -1) {
+            return [].concat((0, _toConsumableArray2.default)(properties.slice(0, index)), [(0, _objectSpread2.default)((0, _objectSpread2.default)({}, properties[index]), property)], (0, _toConsumableArray2.default)(properties.slice(index + 1)));
+          }
+
+          if (options.after) {
+            var _index = properties.findIndex(function (prop) {
+              return prop.id === options.after;
+            });
+
+            if (_index > -1) {
+              return [].concat((0, _toConsumableArray2.default)(properties.slice(0, _index + 1)), [property], (0, _toConsumableArray2.default)(properties.slice(_index + 1)));
+            }
+          }
+
+          if (options.before) {
+            var _index2 = properties.findIndex(function (prop) {
+              return prop.id === options.before;
+            });
+
+            if (_index2 > -1) {
+              return [].concat((0, _toConsumableArray2.default)(properties.slice(0, _index2)), [property], (0, _toConsumableArray2.default)(properties.slice(_index2)));
+            }
+          }
+
+          return [].concat((0, _toConsumableArray2.default)(properties), [property]);
+        });
+      },
+      removeProperty: function removeProperty(id) {
+        setProperties(function (properties) {
+          return removeByParent(id, properties.filter(function (prop) {
+            return prop.id !== id;
+          }));
+        });
+      },
+      replaceProperty: function replaceProperty(id, property) {
+        setProperties(function (properties) {
+          var toReplace = properties.findIndex(function (prop) {
+            return prop.id === id;
+          });
+
+          if (toReplace > -1) {
+            // Replace the property and remove all remaining child properties.
+            return removeByParent(id, [].concat((0, _toConsumableArray2.default)(properties.slice(0, toReplace)), [property], (0, _toConsumableArray2.default)(properties.slice(toReplace + 1))));
+          }
+
+          return properties;
+        });
+      }
+    };
+  }, [properties]);
+  return /*#__PURE__*/_react.default.createElement(PropertiesContext.Provider, {
+    value: context
+  }, children);
+};
+
+exports.Properties = Properties;
+
+function useProperties() {
+  var properties = (0, _react.useContext)(PropertiesContext);
+
+  if (!properties) {
+    throw Error("Properties context provider is missing!");
+  }
+
+  return properties;
+}
+
+var PropertyContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+
+function useParentProperty() {
+  return (0, _react.useContext)(PropertyContext);
+}
+
+var Property = function Property(_ref2) {
+  var id = _ref2.id,
+      name = _ref2.name,
+      value = _ref2.value,
+      children = _ref2.children,
+      _ref2$after = _ref2.after,
+      after = _ref2$after === void 0 ? undefined : _ref2$after,
+      _ref2$before = _ref2.before,
+      before = _ref2$before === void 0 ? undefined : _ref2$before,
+      _ref2$replace = _ref2.replace,
+      replace = _ref2$replace === void 0 ? undefined : _ref2$replace,
+      _ref2$remove = _ref2.remove,
+      remove = _ref2$remove === void 0 ? false : _ref2$remove,
+      _ref2$array = _ref2.array,
+      array = _ref2$array === void 0 ? false : _ref2$array;
+  var uniqueId = (0, _react.useMemo)(function () {
+    return id || (0, _utils.getUniqueId)();
+  }, []);
+  var parent = useParentProperty();
+  var properties = useProperties();
+
+  if (!properties) {
+    throw Error("<Properties> provider is missing higher in the hierarchy!");
+  }
+
+  var addProperty = properties.addProperty,
+      removeProperty = properties.removeProperty,
+      replaceProperty = properties.replaceProperty;
+  var property = {
+    id: uniqueId,
+    name: name,
+    value: value,
+    parent: parent ? parent.id : "",
+    array: array
+  };
+  (0, _react.useEffect)(function () {
+    if (remove) {
+      removeProperty(uniqueId);
+      return;
+    }
+
+    if (replace) {
+      replaceProperty(replace, property);
+      return;
+    }
+
+    addProperty(property, {
+      after: after,
+      before: before
+    });
+    return function () {
+      removeProperty(uniqueId);
+    };
+  }, []);
+
+  if (children) {
+    return /*#__PURE__*/_react.default.createElement(PropertyContext.Provider, {
+      value: property
+    }, children);
+  }
+
+  return null;
+};
+
+exports.Property = Property;

package/Properties.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["removeByParent","id","properties","filter","prop","parent","reduce","acc","item","PropertiesContext","createContext","undefined","Properties","onChange","children","useState","setProperties","useEffect","context","useMemo","getObject","toObject","addProperty","property","options","index","findIndex","slice","after","before","removeProperty","replaceProperty","toReplace","useProperties","useContext","Error","PropertyContext","useParentProperty","Property","name","value","replace","remove","array","uniqueId","getUniqueId"],"sources":["Properties.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo, useState } from \"react\";\nimport { getUniqueId, toObject } from \"./utils\";\n\nexport interface Property {\n    id: string;\n    parent: string;\n    name: string;\n    value: unknown;\n    array?: boolean;\n}\n\nfunction removeByParent(id: string, properties: Property[]): Property[] {\n    return properties\n        .filter(prop => prop.parent === id)\n        .reduce((acc, item) => {\n            return removeByParent(\n                item.id,\n                acc.filter(prop => prop.id !== item.id)\n            );\n        }, properties);\n}\n\ninterface AddPropertyOptions {\n    after?: string;\n    before?: string;\n}\n\ninterface PropertiesContext {\n    properties: Property[];\n    getObject<T = unknown>(): T;\n    addProperty(property: Property, options?: AddPropertyOptions): void;\n    removeProperty(id: string): void;\n    replaceProperty(id: string, property: Property): void;\n}\n\nconst PropertiesContext = createContext<PropertiesContext | undefined>(undefined);\n\ninterface PropertiesProps {\n    onChange?(properties: Property[]): void;\n}\n\nexport const Properties: React.FC<PropertiesProps> = ({ onChange, children }) => {\n    const [properties, setProperties] = useState<Property[]>([]);\n\n    useEffect(() => {\n        if (onChange) {\n            onChange(properties);\n        }\n    }, [properties]);\n\n    const context: PropertiesContext = useMemo(\n        () => ({\n            properties,\n            getObject<T>() {\n                return toObject(properties) as T;\n            },\n            addProperty(property, options = {}) {\n                setProperties(properties => {\n                    // If a property with this ID already exists, merge the two properties.\n                    const index = properties.findIndex(prop => prop.id === property.id);\n                    if (index > -1) {\n                        return [\n                            ...properties.slice(0, index),\n                            { ...properties[index], ...property },\n                            ...properties.slice(index + 1)\n                        ];\n                    }\n\n                    if (options.after) {\n                        const index = properties.findIndex(prop => prop.id === options.after);\n                        if (index > -1) {\n                            return [\n                                ...properties.slice(0, index + 1),\n                                property,\n                                ...properties.slice(index + 1)\n                            ];\n                        }\n                    }\n\n                    if (options.before) {\n                        const index = properties.findIndex(prop => prop.id === options.before);\n                        if (index > -1) {\n                            return [\n                                ...properties.slice(0, index),\n                                property,\n                                ...properties.slice(index)\n                            ];\n                        }\n                    }\n\n                    return [...properties, property];\n                });\n            },\n            removeProperty(id) {\n                setProperties(properties => {\n                    return removeByParent(\n                        id,\n                        properties.filter(prop => prop.id !== id)\n                    );\n                });\n            },\n            replaceProperty(id, property) {\n                setProperties(properties => {\n                    const toReplace = properties.findIndex(prop => prop.id === id);\n\n                    if (toReplace > -1) {\n                        // Replace the property and remove all remaining child properties.\n                        return removeByParent(id, [\n                            ...properties.slice(0, toReplace),\n                            property,\n                            ...properties.slice(toReplace + 1)\n                        ]);\n                    }\n                    return properties;\n                });\n            }\n        }),\n        [properties]\n    );\n\n    return <PropertiesContext.Provider value={context}>{children}</PropertiesContext.Provider>;\n};\n\nexport function useProperties() {\n    const properties = useContext(PropertiesContext);\n    if (!properties) {\n        throw Error(\"Properties context provider is missing!\");\n    }\n\n    return properties;\n}\n\ninterface PropertyProps {\n    id?: string;\n    name: string;\n    value?: unknown;\n    array?: boolean;\n    after?: string;\n    before?: string;\n    replace?: string;\n    remove?: boolean;\n}\n\nconst PropertyContext = createContext<Property | undefined>(undefined);\n\nexport function useParentProperty() {\n    return useContext(PropertyContext);\n}\n\nexport const Property: React.FC<PropertyProps> = ({\n    id,\n    name,\n    value,\n    children,\n    after = undefined,\n    before = undefined,\n    replace = undefined,\n    remove = false,\n    array = false\n}) => {\n    const uniqueId = useMemo(() => id || getUniqueId(), []);\n    const parent = useParentProperty();\n    const properties = useProperties();\n\n    if (!properties) {\n        throw Error(\"<Properties> provider is missing higher in the hierarchy!\");\n    }\n\n    const { addProperty, removeProperty, replaceProperty } = properties;\n    const property = { id: uniqueId, name, value, parent: parent ? parent.id : \"\", array };\n\n    useEffect(() => {\n        if (remove) {\n            removeProperty(uniqueId);\n            return;\n        }\n\n        if (replace) {\n            replaceProperty(replace, property);\n            return;\n        }\n\n        addProperty(property, { after, before });\n\n        return () => {\n            removeProperty(uniqueId);\n        };\n    }, []);\n\n    if (children) {\n        return <PropertyContext.Provider value={property}>{children}</PropertyContext.Provider>;\n    }\n\n    return null;\n};\n"],"mappings":"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"}

package/README.md

@@ -0,0 +1,65 @@
+# React Properties
+
+[![](https://img.shields.io/npm/dw/@webiny/react-properties.svg)](https://www.npmjs.com/package/@webiny/react-properties)
+[![](https://img.shields.io/npm/v/@webiny/react-properties.svg)](https://www.npmjs.com/package/@webiny/react-properties)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+
+A tiny React properties framework, to build dynamic data objects using React components, which can be customized after initial creation. The usage is very similar to how you write XML data structures, but in this case you're using actual React.
+
+## Basic Example
+
+```jsx
+import React, { useCallback } from "react";
+import { Properties, Property, toObject } from "@webiny/react-properties";
+
+const View = () => {
+  const onChange = useCallback(properties => {
+    console.log(toObject(properties));
+  }, []);
+
+  return (
+    <Properties onChange={onChange}>
+      <Property name={"group"}>
+        <Property name={"name"} value={"layout"} />
+        <Property name={"label"} value={"Layout"} />
+        <Property name={"toolbar"}>
+          <Property name={"name"} value={"basic"} />
+        </Property>
+      </Property>
+      <Property name={"group"}>
+        <Property name={"name"} value={"heroes"} />
+        <Property name={"label"} value={"Heroes"} />
+        <Property name={"toolbar"}>
+          <Property name={"name"} value={"heroes"} />
+        </Property>
+      </Property>
+    </Properties>
+  );
+};
+```
+
+Output:
+
+```json
+{
+  "group": [
+    {
+      "name": "layout",
+      "label": "Layout",
+      "toolbar": {
+        "name": "basic"
+      }
+    },
+    {
+      "name": "heroes",
+      "label": "Heroes",
+      "toolbar": {
+        "name": "heroes"
+      }
+    }
+  ]
+}
+```
+
+For more examples, check out the test files.

package/__tests__/cases/dashboard/App.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { Property } from "../../../src/index";
+interface AddWidgetProps {
+    name: string;
+    type: string;
+}
+declare const AddWidget: <T extends Record<string, unknown>>(props: T & AddWidgetProps) => JSX.Element;
+export interface CardWidget extends Record<string, unknown> {
+    title: string;
+    description: string;
+    button: React.ReactElement;
+}
+interface DashboardConfig extends React.FC<unknown> {
+    AddWidget: typeof AddWidget;
+    DashboardRenderer: typeof DashboardRenderer;
+}
+export declare const DashboardConfig: DashboardConfig;
+declare const DashboardRenderer: import("@webiny/react-composition").ComposableFC<unknown>;
+interface DashboardViewProps {
+    onProperties(properties: Property[]): void;
+}
+export declare const App: React.FC<DashboardViewProps>;
+export {};

package/__tests__/cases/dashboard/dashboard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/__tests__/cases/pbEditorSettings/PbEditorSettingsView.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+interface SettingsGroupProps {
+    name: string;
+    title?: string;
+    icon?: string;
+    remove?: boolean;
+    replace?: string;
+}
+interface FormFieldProps extends Record<string, unknown> {
+    name: string;
+    component?: string;
+    after?: string;
+    remove?: boolean;
+    replace?: string;
+}
+declare const PageSettingsView: React.FC<import("./createConfigurableView").ViewProps>;
+declare const PageSettingsConfig: React.FC<{}> & {
+    FormField: React.FC<FormFieldProps>;
+    SettingsGroup: React.FC<SettingsGroupProps>;
+};
+export { PageSettingsView, PageSettingsConfig };

package/__tests__/cases/pbEditorSettings/createConfigurableView.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { Property } from "../../../src/index";
+export interface ViewProps {
+    onProperties?(properties: Property[]): void;
+}
+export declare function createConfigurableView(name: string): {
+    View: React.FC<ViewProps>;
+    Config: React.FC<{}>;
+};

package/__tests__/cases/pbEditorSettings/pbEditorSettings.test.d.ts

@@ -0,0 +1 @@
+export {};

package/__tests__/properties.test.d.ts

@@ -0,0 +1 @@
+export {};

package/__tests__/setupEnv.d.ts

@@ -0,0 +1 @@
+declare const randomFillSync: any;

package/__tests__/utils.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="jest" />
+export declare function getLastCall(callable: jest.Mock): any;

package/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _utils = require("./utils");
+
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _utils[key];
+    }
+  });
+});
+
+var _Properties = require("./Properties");
+
+Object.keys(_Properties).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Properties[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Properties[key];
+    }
+  });
+});

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./utils\";\nexport * from \"./Properties\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/package.json

@@ -0,0 +1,33 @@
+{
+	"name": "@webiny/react-properties",
+	"version": "5.30.0-beta.0",
+	"main": "index.js",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/webiny/webiny-js.git"
+	},
+	"description": "Build pluggable data objects using React components.",
+	"author": "Webiny Ltd",
+	"license": "MIT",
+	"dependencies": {
+		"@babel/runtime": "7.18.6",
+		"@types/react": "16.14.2",
+		"nanoid": "3.3.4",
+		"react": "16.14.0"
+	},
+	"devDependencies": {
+		"@testing-library/react": "^12.1.5",
+		"@webiny/cli": "^5.30.0-beta.0",
+		"@webiny/project-utils": "^5.30.0-beta.0",
+		"@webiny/react-composition": "^5.30.0-beta.0"
+	},
+	"publishConfig": {
+		"access": "public",
+		"directory": "dist"
+	},
+	"scripts": {
+		"build": "yarn webiny run build",
+		"watch": "yarn webiny run watch"
+	},
+	"gitHead": "622d120f5637e3ca807b8bfc9ed2cd034ac85fb7"
+}

package/src/Properties.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+export interface Property {
+    id: string;
+    parent: string;
+    name: string;
+    value: unknown;
+    array?: boolean;
+}
+interface AddPropertyOptions {
+    after?: string;
+    before?: string;
+}
+interface PropertiesContext {
+    properties: Property[];
+    getObject<T = unknown>(): T;
+    addProperty(property: Property, options?: AddPropertyOptions): void;
+    removeProperty(id: string): void;
+    replaceProperty(id: string, property: Property): void;
+}
+declare const PropertiesContext: React.Context<PropertiesContext | undefined>;
+interface PropertiesProps {
+    onChange?(properties: Property[]): void;
+}
+export declare const Properties: React.FC<PropertiesProps>;
+export declare function useProperties(): PropertiesContext;
+interface PropertyProps {
+    id?: string;
+    name: string;
+    value?: unknown;
+    array?: boolean;
+    after?: string;
+    before?: string;
+    replace?: string;
+    remove?: boolean;
+}
+export declare function useParentProperty(): Property | undefined;
+export declare const Property: React.FC<PropertyProps>;
+export {};

package/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./utils";
+export * from "./Properties";

package/src/utils.d.ts

@@ -0,0 +1,3 @@
+import { Property } from "./Properties";
+export declare function toObject<T = unknown>(properties: Property[]): T;
+export declare function getUniqueId(): string;

package/utils.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getUniqueId = getUniqueId;
+exports.toObject = toObject;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _nanoid = require("nanoid");
+
+var nanoid = (0, _nanoid.customAlphabet)("1234567890abcdef", 6);
+
+function buildRoots(roots, properties) {
+  var obj = roots.reduce(function (acc, item) {
+    var isArray = item.array === true || roots.filter(function (r) {
+      return r.name === item.name;
+    }).length > 1;
+    return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, acc), {}, (0, _defineProperty2.default)({}, item.name, isArray ? [] : {}));
+  }, {});
+  roots.forEach(function (root) {
+    var isArray = root.array === true || Array.isArray(obj[root.name]);
+
+    if (root.value !== undefined) {
+      obj[root.name] = isArray ? [].concat((0, _toConsumableArray2.default)(obj[root.name]), [root.value]) : root.value;
+      return;
+    }
+
+    var nextRoots = properties.filter(function (p) {
+      return p.parent === root.id;
+    });
+    var value = buildRoots(nextRoots, properties);
+    obj[root.name] = isArray ? [].concat((0, _toConsumableArray2.default)(obj[root.name]), [value]) : value;
+  });
+  return obj;
+}
+
+function toObject(properties) {
+  var roots = properties.filter(function (prop) {
+    return prop.parent === "";
+  });
+  return buildRoots(roots, properties);
+}
+
+function getUniqueId() {
+  return nanoid();
+}

package/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nanoid","customAlphabet","buildRoots","roots","properties","obj","reduce","acc","item","isArray","array","filter","r","name","length","forEach","root","Array","value","undefined","nextRoots","p","parent","id","toObject","prop","getUniqueId"],"sources":["utils.ts"],"sourcesContent":["import { customAlphabet } from \"nanoid\";\nconst nanoid = customAlphabet(\"1234567890abcdef\", 6);\nimport { Property } from \"./Properties\";\n\nfunction buildRoots(roots: Property[], properties: Property[]) {\n    const obj: Record<string, unknown> = roots.reduce((acc, item) => {\n        const isArray = item.array === true || roots.filter(r => r.name === item.name).length > 1;\n        return { ...acc, [item.name]: isArray ? [] : {} };\n    }, {});\n\n    roots.forEach(root => {\n        const isArray = root.array === true || Array.isArray(obj[root.name]);\n        if (root.value !== undefined) {\n            obj[root.name] = isArray ? [...(obj[root.name] as Array<any>), root.value] : root.value;\n            return;\n        }\n\n        const nextRoots = properties.filter(p => p.parent === root.id);\n        const value = buildRoots(nextRoots, properties);\n        obj[root.name] = isArray ? [...(obj[root.name] as Property[]), value] : value;\n    });\n\n    return obj;\n}\n\nexport function toObject<T = unknown>(properties: Property[]): T {\n    const roots = properties.filter(prop => prop.parent === \"\");\n    return buildRoots(roots, properties) as T;\n}\n\nexport function getUniqueId() {\n    return nanoid();\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;;AACA,IAAMA,MAAM,GAAG,IAAAC,sBAAA,EAAe,kBAAf,EAAmC,CAAnC,CAAf;;AAGA,SAASC,UAAT,CAAoBC,KAApB,EAAuCC,UAAvC,EAA+D;EAC3D,IAAMC,GAA4B,GAAGF,KAAK,CAACG,MAAN,CAAa,UAACC,GAAD,EAAMC,IAAN,EAAe;IAC7D,IAAMC,OAAO,GAAGD,IAAI,CAACE,KAAL,KAAe,IAAf,IAAuBP,KAAK,CAACQ,MAAN,CAAa,UAAAC,CAAC;MAAA,OAAIA,CAAC,CAACC,IAAF,KAAWL,IAAI,CAACK,IAApB;IAAA,CAAd,EAAwCC,MAAxC,GAAiD,CAAxF;IACA,mEAAYP,GAAZ,yCAAkBC,IAAI,CAACK,IAAvB,EAA8BJ,OAAO,GAAG,EAAH,GAAQ,EAA7C;EACH,CAHoC,EAGlC,EAHkC,CAArC;EAKAN,KAAK,CAACY,OAAN,CAAc,UAAAC,IAAI,EAAI;IAClB,IAAMP,OAAO,GAAGO,IAAI,CAACN,KAAL,KAAe,IAAf,IAAuBO,KAAK,CAACR,OAAN,CAAcJ,GAAG,CAACW,IAAI,CAACH,IAAN,CAAjB,CAAvC;;IACA,IAAIG,IAAI,CAACE,KAAL,KAAeC,SAAnB,EAA8B;MAC1Bd,GAAG,CAACW,IAAI,CAACH,IAAN,CAAH,GAAiBJ,OAAO,8CAAQJ,GAAG,CAACW,IAAI,CAACH,IAAN,CAAX,IAAuCG,IAAI,CAACE,KAA5C,KAAqDF,IAAI,CAACE,KAAlF;MACA;IACH;;IAED,IAAME,SAAS,GAAGhB,UAAU,CAACO,MAAX,CAAkB,UAAAU,CAAC;MAAA,OAAIA,CAAC,CAACC,MAAF,KAAaN,IAAI,CAACO,EAAtB;IAAA,CAAnB,CAAlB;IACA,IAAML,KAAK,GAAGhB,UAAU,CAACkB,SAAD,EAAYhB,UAAZ,CAAxB;IACAC,GAAG,CAACW,IAAI,CAACH,IAAN,CAAH,GAAiBJ,OAAO,8CAAQJ,GAAG,CAACW,IAAI,CAACH,IAAN,CAAX,IAAuCK,KAAvC,KAAgDA,KAAxE;EACH,CAVD;EAYA,OAAOb,GAAP;AACH;;AAEM,SAASmB,QAAT,CAA+BpB,UAA/B,EAA0D;EAC7D,IAAMD,KAAK,GAAGC,UAAU,CAACO,MAAX,CAAkB,UAAAc,IAAI;IAAA,OAAIA,IAAI,CAACH,MAAL,KAAgB,EAApB;EAAA,CAAtB,CAAd;EACA,OAAOpB,UAAU,CAACC,KAAD,EAAQC,UAAR,CAAjB;AACH;;AAEM,SAASsB,WAAT,GAAuB;EAC1B,OAAO1B,MAAM,EAAb;AACH"}