zeus-form-mui 0.1.1

package/Readme.md

@@ -0,0 +1,3 @@
+# Starter
+
+Copy this starter folder to start the new form library

package/lib/components/ArrayField.d.ts

@@ -0,0 +1,6 @@
+import { PassedFormProps } from 'zeus-form';
+import React from 'react';
+declare const ArrayField: React.FC<PassedFormProps & {
+    open?: boolean;
+}>;
+export default ArrayField;

package/lib/components/ArrayField.js

@@ -0,0 +1,67 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var material_1 = require("@mui/material");
+var zeus_form_1 = require("zeus-form");
+var graphql_js_tree_1 = require("graphql-js-tree");
+var react_1 = __importDefault(require("react"));
+var icons_material_1 = require("@mui/icons-material");
+var ArrayField = function (props) {
+    var formObject = props.formObject, onChange = props.onChange, f = props.f;
+    formObject.__form__value || (formObject.__form__value = []);
+    if (f.type.fieldType.type !== graphql_js_tree_1.Options.array) {
+        throw new Error('Invalid Array node');
+    }
+    var nodeWithoutArray = __assign(__assign({}, f), { type: __assign(__assign({}, f.type), { fieldType: __assign({}, f.type.fieldType.nest) }) });
+    var formValuePointer = formObject.__form__value;
+    return (react_1.default.createElement(material_1.Stack, null,
+        formValuePointer.map(function (v, i, all) {
+            formValuePointer[i] || (formValuePointer[i] = { __form__node: nodeWithoutArray });
+            return (react_1.default.createElement(material_1.Stack, { key: f.name + i },
+                react_1.default.createElement(zeus_form_1.Renderer, __assign({ key: i }, props, { f: __assign(__assign({}, nodeWithoutArray), { name: "".concat(nodeWithoutArray.name, "[").concat(i, "]") }), onChange: function (e) {
+                        formValuePointer[i] = e;
+                        onChange(__assign(__assign({}, formObject), { __form__value: formValuePointer }));
+                    }, formObject: v }),
+                    react_1.default.createElement(material_1.Stack, { direction: "row" },
+                        react_1.default.createElement(material_1.IconButton, { onClick: function () {
+                                onChange(__assign(__assign({}, formObject), { __form__value: formValuePointer.filter(function (_, index) { return i !== index; }) }));
+                            } },
+                            react_1.default.createElement(icons_material_1.Close, null)),
+                        i !== 0 && (react_1.default.createElement(material_1.IconButton, { onClick: function () {
+                                var switched = v;
+                                formValuePointer[i] = formValuePointer[i - 1];
+                                formValuePointer[i - 1] = switched;
+                                onChange(__assign(__assign({}, formObject), { __form__value: formValuePointer }));
+                            } },
+                            react_1.default.createElement(icons_material_1.ArrowUpward, null))),
+                        i !== all.length - 1 && (react_1.default.createElement(material_1.IconButton, { onClick: function () {
+                                var switched = v;
+                                formValuePointer[i] = formValuePointer[i + 1];
+                                formValuePointer[i + 1] = switched;
+                                onChange(__assign(__assign({}, formObject), { __form__value: formValuePointer }));
+                            } },
+                            react_1.default.createElement(icons_material_1.ArrowDownward, null)))))));
+        }),
+        react_1.default.createElement(material_1.Button, { onClick: function () {
+                formValuePointer.push({
+                    __form__node: nodeWithoutArray,
+                    __form__value: undefined,
+                });
+                onChange(__assign(__assign({}, formObject), { __form__value: formValuePointer }));
+            }, endIcon: react_1.default.createElement(icons_material_1.Add, null) }, "Add ".concat(f.name))));
+};
+exports.default = ArrayField;
+//# sourceMappingURL=ArrayField.js.map

package/lib/components/ArrayField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrayField.js","sourceRoot":"","sources":["../../src/components/ArrayField.tsx"],"names":[],"mappings":"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"}

package/lib/components/BooleanField.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PassedFormProps } from 'zeus-form';
+declare const _default: ({ f, formObject, onChange }: PassedFormProps) => JSX.Element;
+export default _default;

package/lib/components/BooleanField.js

@@ -0,0 +1,27 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var material_1 = require("@mui/material");
+var react_1 = __importDefault(require("react"));
+exports.default = (function (_a) {
+    var f = _a.f, formObject = _a.formObject, onChange = _a.onChange;
+    var value = formObject.__form__value;
+    return (react_1.default.createElement(material_1.FormGroup, null,
+        react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { value: value, onChange: function () {
+                    return onChange(__assign(__assign({}, formObject), { __form__value: value === true ? undefined : true }));
+                } }), label: f.name })));
+});
+//# sourceMappingURL=BooleanField.js.map

package/lib/components/BooleanField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BooleanField.js","sourceRoot":"","sources":["../../src/components/BooleanField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAsE;AAEtE,gDAA0B;AAC1B,mBAAe,UAAC,EAA4C;QAA1C,CAAC,OAAA,EAAE,UAAU,gBAAA,EAAE,QAAQ,cAAA;IACrC,IAAM,KAAK,GAAG,UAAU,CAAC,aAAoC,CAAC;IAC9D,OAAO,CACH,8BAAC,oBAAS;QACN,8BAAC,2BAAgB,IACb,OAAO,EACH,8BAAC,mBAAQ,IACL,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE;oBACN,OAAA,QAAQ,uBACD,UAAU,KACb,aAAa,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,IAClD;gBAHF,CAGE,GAER,EAEN,KAAK,EAAE,CAAC,CAAC,IAAI,GACf,CACM,CACf,CAAC;AACN,CAAC,EAAC"}

package/lib/components/EnumField.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PassedFormProps } from 'zeus-form';
+declare const _default: ({ nodes, onChange, formObject, f }: PassedFormProps) => JSX.Element;
+export default _default;

package/lib/components/EnumField.js

@@ -0,0 +1,38 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var material_1 = require("@mui/material");
+var graphql_js_tree_1 = require("graphql-js-tree");
+var react_1 = __importDefault(require("react"));
+exports.default = (function (_a) {
+    var _b;
+    var nodes = _a.nodes, onChange = _a.onChange, formObject = _a.formObject, f = _a.f;
+    var seekNode = nodes.find(function (n) { return n.name === (0, graphql_js_tree_1.getTypeName)(f.type.fieldType); });
+    if (!seekNode) {
+        throw new Error('Invalid enum field');
+    }
+    var options = ((_b = seekNode.args) === null || _b === void 0 ? void 0 : _b.map(function (_a) {
+        var label = _a.name;
+        return ({
+            label: label,
+            value: label,
+        });
+    })) || [];
+    return (react_1.default.createElement(material_1.Select, { placeholder: f.name, value: formObject.__form__value, onChange: function (e) {
+            onChange(__assign(__assign({}, formObject), { __form__value: e.target.value }));
+        } }, options.map(function (o) { return (react_1.default.createElement(material_1.MenuItem, { key: o.value, value: o.value }, o.label)); })));
+});
+//# sourceMappingURL=EnumField.js.map

package/lib/components/EnumField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnumField.js","sourceRoot":"","sources":["../../src/components/EnumField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAiD;AAEjD,mDAA8C;AAC9C,gDAA0B;AAC1B,mBAAe,UAAC,EAAmD;;QAAjD,KAAK,WAAA,EAAE,QAAQ,cAAA,EAAE,UAAU,gBAAA,EAAE,CAAC,OAAA;IAC5C,IAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,IAAI,KAAK,IAAA,6BAAW,EAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,EAAxC,CAAwC,CAAC,CAAC;IAC7E,IAAI,CAAC,QAAQ,EAAE;QACX,MAAM,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAC;KACzC;IACD,IAAM,OAAO,GACT,CAAA,MAAA,QAAQ,CAAC,IAAI,0CAAE,GAAG,CAAC,UAAC,EAAe;YAAP,KAAK,UAAA;QAAO,OAAA,CAAC;YACrC,KAAK,OAAA;YACL,KAAK,EAAE,KAAK;SACf,CAAC;IAHsC,CAGtC,CAAC,KAAI,EAAE,CAAC;IACd,OAAO,CACH,8BAAC,iBAAM,IACH,WAAW,EAAE,CAAC,CAAC,IAAI,EACnB,KAAK,EAAE,UAAU,CAAC,aAAmC,EACrD,QAAQ,EAAE,UAAC,CAAC;YACR,QAAQ,uBACD,UAAU,KACb,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAC/B,CAAC;QACP,CAAC,IAEA,OAAO,CAAC,GAAG,CAAC,UAAC,CAAC,IAAK,OAAA,CAChB,8BAAC,mBAAQ,IAAC,GAAG,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,IACjC,CAAC,CAAC,KAAK,CACD,CACd,EAJmB,CAInB,CAAC,CACG,CACZ,CAAC;AACN,CAAC,EAAC"}

package/lib/components/FormField.d.ts

@@ -0,0 +1,4 @@
+import { PassedFormProps } from 'zeus-form';
+import React from 'react';
+declare const FormField: React.FC<PassedFormProps>;
+export default FormField;

package/lib/components/FormField.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var material_1 = require("@mui/material");
+var zeus_form_1 = require("zeus-form");
+var react_1 = __importDefault(require("react"));
+var FormField = function (props) {
+    var children = props.children;
+    var errors = (0, zeus_form_1.getErrorFromProps)(props);
+    return (react_1.default.createElement(material_1.FormControl, { fullWidth: true, error: !!errors },
+        children,
+        errors && react_1.default.createElement(material_1.FormHelperText, null, errors)));
+};
+exports.default = FormField;
+//# sourceMappingURL=FormField.js.map

package/lib/components/FormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../src/components/FormField.tsx"],"names":[],"mappings":";;;;;AAAA,0CAA4D;AAC5D,uCAA+D;AAC/D,gDAA0B;AAC1B,IAAM,SAAS,GAA8B,UAAC,KAAK;IACvC,IAAA,QAAQ,GAAK,KAAK,SAAV,CAAW;IAC3B,IAAM,MAAM,GAAG,IAAA,6BAAiB,EAAC,KAAK,CAAC,CAAC;IACxC,OAAO,CACH,8BAAC,sBAAW,IAAC,SAAS,QAAC,KAAK,EAAE,CAAC,CAAC,MAAM;QACjC,QAAQ;QACR,MAAM,IAAI,8BAAC,yBAAc,QAAE,MAAM,CAAkB,CAC1C,CACjB,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/lib/components/FormLabel.d.ts

@@ -0,0 +1,7 @@
+import { PassedFormProps } from 'zeus-form';
+import React from 'react';
+declare const FormLabel: React.FC<PassedFormProps & {
+    open?: boolean;
+    setOpen: (b: boolean) => void;
+}>;
+export default FormLabel;

package/lib/components/FormLabel.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var material_1 = require("@mui/material");
+var icons_material_1 = require("@mui/icons-material");
+var graphql_js_tree_1 = require("graphql-js-tree");
+var react_1 = __importDefault(require("react"));
+var FormLabel = function (props) {
+    var f = props.f, open = props.open, setOpen = props.setOpen, nodes = props.nodes;
+    var seekNode = nodes.find(function (n) { return n.name === (0, graphql_js_tree_1.getTypeName)(f.type.fieldType); });
+    var isInput = (seekNode === null || seekNode === void 0 ? void 0 : seekNode.data.type) === graphql_js_tree_1.TypeDefinition.InputObjectTypeDefinition;
+    return (react_1.default.createElement(material_1.Stack, { direction: 'row', alignItems: "center", spacing: 1 },
+        react_1.default.createElement(material_1.Stack, { direction: "row", alignItems: "center" },
+            react_1.default.createElement(material_1.Typography, null, props.f.name.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
+                return str.toUpperCase();
+            })),
+            props.required && react_1.default.createElement(material_1.Typography, { color: 'red' }, "*"),
+            props.children),
+        (f.data.type === graphql_js_tree_1.TypeSystemDefinition.FieldDefinition ||
+            isInput ||
+            f.type.fieldType.type === graphql_js_tree_1.Options.array) && (react_1.default.createElement(material_1.IconButton, { onClick: function () { return setOpen(!open); } },
+            open && react_1.default.createElement(icons_material_1.ExpandLess, null),
+            !open && react_1.default.createElement(icons_material_1.ExpandMore, null)))));
+};
+exports.default = FormLabel;
+//# sourceMappingURL=FormLabel.js.map

package/lib/components/FormLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLabel.js","sourceRoot":"","sources":["../../src/components/FormLabel.tsx"],"names":[],"mappings":";;;;;AAAA,0CAA8D;AAC9D,sDAA6D;AAE7D,mDAA6F;AAC7F,gDAA0B;AAC1B,IAAM,SAAS,GAAkF,UAAC,KAAK;IAC3F,IAAA,CAAC,GAA2B,KAAK,EAAhC,EAAE,IAAI,GAAqB,KAAK,KAA1B,EAAE,OAAO,GAAY,KAAK,QAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IAE1C,IAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,IAAI,KAAK,IAAA,6BAAW,EAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,EAAxC,CAAwC,CAAC,CAAC;IAC7E,IAAM,OAAO,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,CAAC,IAAI,MAAK,gCAAc,CAAC,yBAAyB,CAAC;IAEjF,OAAO,CACH,8BAAC,gBAAK,IAAC,SAAS,EAAE,KAAK,EAAE,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC;QACnD,8BAAC,gBAAK,IAAC,SAAS,EAAC,KAAK,EAAC,UAAU,EAAC,QAAQ;YACtC,8BAAC,qBAAU,QACN,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG;gBAChE,OAAO,GAAG,CAAC,WAAW,EAAE,CAAC;YAC7B,CAAC,CAAC,CACO;YACZ,KAAK,CAAC,QAAQ,IAAI,8BAAC,qBAAU,IAAC,KAAK,EAAE,KAAK,QAAgB;YAC1D,KAAK,CAAC,QAAQ,CACX;QACP,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,sCAAoB,CAAC,eAAe;YAClD,OAAO;YACP,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,KAAK,yBAAO,CAAC,KAAK,CAAC,IAAI,CAC5C,8BAAC,qBAAU,IAAC,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,CAAC,IAAI,CAAC,EAAd,CAAc;YACpC,IAAI,IAAI,8BAAC,2BAAU,OAAG;YACtB,CAAC,IAAI,IAAI,8BAAC,2BAAU,OAAG,CACf,CAChB,CACG,CACX,CAAC;AACN,CAAC,CAAC;AACF,kBAAe,SAAS,CAAC"}

package/lib/components/NullField.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/lib/components/NullField.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+exports.default = (function () { return react_1.default.createElement("div", null, "No value"); });
+//# sourceMappingURL=NullField.js.map

package/lib/components/NullField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NullField.js","sourceRoot":"","sources":["../../src/components/NullField.tsx"],"names":[],"mappings":";;;;;AAAA,gDAA0B;AAC1B,mBAAe,cAAM,OAAA,sDAAmB,EAAnB,CAAmB,EAAC"}

package/lib/components/NumberField.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PassedFormProps } from 'zeus-form';
+declare const _default: (props: PassedFormProps) => JSX.Element;
+export default _default;

package/lib/components/NumberField.js

@@ -0,0 +1,22 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var material_1 = require("@mui/material");
+var react_1 = __importDefault(require("react"));
+exports.default = (function (props) { return (react_1.default.createElement(material_1.TextField, { type: "number", value: props.formObject.__form__value || '', onChange: function (e) {
+        props.onChange(__assign(__assign({}, props.formObject), { __form__value: e.target.value }));
+    } })); });
+//# sourceMappingURL=NumberField.js.map

package/lib/components/NumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../src/components/NumberField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAA0C;AAE1C,gDAA0B;AAC1B,mBAAe,UAAC,KAAsB,IAAK,OAAA,CACvC,8BAAC,oBAAS,IACN,IAAI,EAAC,QAAQ,EACb,KAAK,EAAG,KAAK,CAAC,UAAU,CAAC,aAAoC,IAAI,EAAE,EACnE,QAAQ,EAAE,UAAC,CAAC;QACR,KAAK,CAAC,QAAQ,uBACP,KAAK,CAAC,UAAU,KACnB,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAC/B,CAAC;IACP,CAAC,GACH,CACL,EAX0C,CAW1C,EAAC"}

package/lib/components/ObjectField.d.ts

@@ -0,0 +1,4 @@
+import { PassedFormProps } from 'zeus-form';
+import React from 'react';
+declare const ObjectField: React.FC<PassedFormProps>;
+export default ObjectField;

package/lib/components/ObjectField.js

@@ -0,0 +1,37 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var material_1 = require("@mui/material");
+var zeus_form_1 = require("zeus-form");
+var react_1 = __importDefault(require("react"));
+var ObjectField = function (props) {
+    var _a;
+    var formObject = props.formObject, f = props.f;
+    formObject.__form__value || (formObject.__form__value = {});
+    var fV = formObject.__form__value;
+    return (react_1.default.createElement(material_1.Stack, { pl: 2, spacing: 2 }, (_a = f.args) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) {
+        return b.name > a.name ? -1 : 1;
+    }).map(function (a) {
+        var _a;
+        fV[_a = a.name] || (fV[_a] = { __form__node: a });
+        return (react_1.default.createElement(zeus_form_1.Renderer, __assign({}, props, { currentPath: "".concat(props.currentPath, ".").concat(a.name), key: a.name, formObject: fV[a.name], required: false, onChange: function (fv) {
+                var _a;
+                props.onChange(__assign(__assign({}, formObject), { __form__value: __assign(__assign({}, fV), (_a = {}, _a[a.name] = fv, _a)) }));
+            }, f: a, children: undefined })));
+    })));
+};
+exports.default = ObjectField;
+//# sourceMappingURL=ObjectField.js.map

package/lib/components/ObjectField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectField.js","sourceRoot":"","sources":["../../src/components/ObjectField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAsC;AACtC,uCAAkE;AAClE,gDAA0B;AAE1B,IAAM,WAAW,GAA8B,UAAC,KAAK;;IACzC,IAAA,UAAU,GAAQ,KAAK,WAAb,EAAE,CAAC,GAAK,KAAK,EAAV,CAAW;IAChC,UAAU,CAAC,aAAa,KAAxB,UAAU,CAAC,aAAa,GAAK,EAAE,EAAC;IAChC,IAAM,EAAE,GAAG,UAAU,CAAC,aAA4C,CAAC;IACnE,OAAO,CACH,8BAAC,gBAAK,IAAC,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,IACnB,MAAA,CAAC,CAAC,IAAI,0CACD,IAAI,CAAC,UAAC,CAAC,EAAE,CAAC;QACR,OAAO,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,CAAC,EACA,GAAG,CAAC,UAAC,CAAC;;QACH,EAAE,MAAC,CAAC,CAAC,IAAI,MAAT,EAAE,OAAa,EAAE,YAAY,EAAE,CAAC,EAAE,EAAC;QACnC,OAAO,CACH,8BAAC,oBAAQ,eACD,KAAK,IACT,WAAW,EAAE,UAAG,KAAK,CAAC,WAAW,cAAI,CAAC,CAAC,IAAI,CAAE,EAC7C,GAAG,EAAE,CAAC,CAAC,IAAI,EACX,UAAU,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EACtB,QAAQ,EAAE,KAAK,EACf,QAAQ,EAAE,UAAC,EAAE;;gBACT,KAAK,CAAC,QAAQ,uBACP,UAAU,KACb,aAAa,wBACN,EAAE,gBACJ,CAAC,CAAC,IAAI,IAAG,EAAE,UAElB,CAAC;YACP,CAAC,EACD,CAAC,EAAE,CAAC,EACJ,QAAQ,EAAE,SAAS,IACrB,CACL,CAAC;IACN,CAAC,CAAC,CACF,CACX,CAAC;AACN,CAAC,CAAC;AACF,kBAAe,WAAW,CAAC"}

package/lib/components/UniversalField.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PassedFormProps } from 'zeus-form';
+declare const _default: (props: PassedFormProps) => JSX.Element;
+export default _default;

package/lib/components/UniversalField.js

@@ -0,0 +1,27 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var material_1 = require("@mui/material");
+var react_1 = __importDefault(require("react"));
+exports.default = (function (props) {
+    console.log(props.f.name, props.formObject);
+    return (react_1.default.createElement(material_1.TextField, { value: props.formObject.__form__value || '', placeholder: props.f.name.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
+            return str.toUpperCase();
+        }), onChange: function (e) {
+            props.onChange(__assign(__assign({}, props.formObject), { __form__value: e.target.value }));
+        } }));
+});
+//# sourceMappingURL=UniversalField.js.map

package/lib/components/UniversalField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UniversalField.js","sourceRoot":"","sources":["../../src/components/UniversalField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAA0C;AAE1C,gDAA0B;AAC1B,mBAAe,UAAC,KAAsB;IAClC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC5C,OAAO,CACH,8BAAC,oBAAS,IACN,KAAK,EAAG,KAAK,CAAC,UAAU,CAAC,aAAoC,IAAI,EAAE,EACnE,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG;YAC5E,OAAO,GAAG,CAAC,WAAW,EAAE,CAAC;QAC7B,CAAC,CAAC,EACF,QAAQ,EAAE,UAAC,CAAC;YACR,KAAK,CAAC,QAAQ,uBACP,KAAK,CAAC,UAAU,KACnB,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAC/B,CAAC;QACP,CAAC,GACH,CACL,CAAC;AACN,CAAC,EAAC"}

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { InputFormLibraryProps } from 'zeus-form';
+declare function MuiInputForm<T>(props: InputFormLibraryProps<T>): JSX.Element;
+export default MuiInputForm;

package/lib/index.js

@@ -0,0 +1,42 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var ArrayField_1 = __importDefault(require("./components/ArrayField"));
+var BooleanField_1 = __importDefault(require("./components/BooleanField"));
+var EnumField_1 = __importDefault(require("./components/EnumField"));
+var FormField_1 = __importDefault(require("./components/FormField"));
+var FormLabel_1 = __importDefault(require("./components/FormLabel"));
+var NullField_1 = __importDefault(require("./components/NullField"));
+var NumberField_1 = __importDefault(require("./components/NumberField"));
+var ObjectField_1 = __importDefault(require("./components/ObjectField"));
+var UniversalField_1 = __importDefault(require("./components/UniversalField"));
+var zeus_form_1 = require("zeus-form");
+var react_1 = __importDefault(require("react"));
+function MuiInputForm(props) {
+    return (react_1.default.createElement(zeus_form_1.InputForm, __assign({}, props, { components: {
+            ArrayField: ArrayField_1.default,
+            BooleanField: BooleanField_1.default,
+            EnumField: EnumField_1.default,
+            FormField: FormField_1.default,
+            FormLabel: FormLabel_1.default,
+            NullField: NullField_1.default,
+            NumberField: NumberField_1.default,
+            ObjectField: ObjectField_1.default,
+            UniversalField: UniversalField_1.default,
+        } })));
+}
+exports.default = MuiInputForm;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uEAAiD;AACjD,2EAAqD;AACrD,qEAA+C;AAC/C,qEAA+C;AAC/C,qEAA+C;AAC/C,qEAA+C;AAC/C,yEAAmD;AACnD,yEAAmD;AACnD,+EAAyD;AACzD,uCAA6D;AAC7D,gDAA0B;AAE1B,SAAS,YAAY,CAAI,KAA+B;IACpD,OAAO,CACH,8BAAC,qBAAS,eACF,KAAK,IACT,UAAU,EAAE;YACR,UAAU,EAAE,oBAAU;YACtB,YAAY,EAAE,sBAAY;YAC1B,SAAS,EAAE,mBAAS;YACpB,SAAS,EAAE,mBAAS;YACpB,SAAS,EAAE,mBAAS;YACpB,SAAS,EAAE,mBAAS;YACpB,WAAW,EAAE,qBAAW;YACxB,WAAW,EAAE,qBAAW;YACxB,cAAc,EAAE,wBAAc;SACjC,IACH,CACL,CAAC;AACN,CAAC;AAED,kBAAe,YAAY,CAAC"}

package/package.json

@@ -0,0 +1,34 @@
+{
+    "name": "zeus-form-mui",
+    "version": "0.1.1",
+    "description": "Easy form creation with GraphQL Editor and React",
+    "main": "lib/index.js",
+    "scripts": {
+        "build": "ttsc --build tsconfig.build.json",
+        "start": "ttsc --build tsconfig.build.json --watch",
+        "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix"
+    },
+    "types": "lib/index.d.ts",
+    "private": false,
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/graphql-editor/graphql-form.git"
+    },
+    "author": "Aexol <aexol@aexol.com> (http://aexol.com)",
+    "license": "MIT",
+    "homepage": "https://form.graphqleditor.com",
+    "peerDependencies": {
+        "graphql-form": "*",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+    },
+    "dependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/icons-material": "^5.8.0",
+        "@mui/material": "^5.8.0"
+    }
+}

package/src/components/ArrayField.tsx

@@ -0,0 +1,114 @@
+import { Button, IconButton, Stack } from '@mui/material';
+import { FormObject, FormValue, PassedFormProps, Renderer } from 'zeus-form';
+import { Options, ParserField } from 'graphql-js-tree';
+import React from 'react';
+import { Add, ArrowDownward, ArrowUpward, Close } from '@mui/icons-material';
+
+const ArrayField: React.FC<
+    PassedFormProps & {
+        open?: boolean;
+    }
+> = (props) => {
+    const { formObject, onChange, f } = props;
+    formObject.__form__value ||= [];
+    if (f.type.fieldType.type !== Options.array) {
+        throw new Error('Invalid Array node');
+    }
+    const nodeWithoutArray: ParserField = {
+        ...f,
+        type: {
+            ...f.type,
+            fieldType: {
+                ...f.type.fieldType.nest,
+            },
+        },
+    };
+    const formValuePointer = formObject.__form__value as Array<FormValue>;
+    return (
+        <Stack>
+            {formValuePointer.map((v, i: number, all) => {
+                formValuePointer[i] ||= { __form__node: nodeWithoutArray };
+                return (
+                    <Stack key={f.name + i}>
+                        <Renderer
+                            key={i}
+                            {...props}
+                            f={{
+                                ...nodeWithoutArray,
+                                name: `${nodeWithoutArray.name}[${i}]`,
+                            }}
+                            onChange={(e) => {
+                                formValuePointer[i] = e;
+                                onChange({
+                                    ...formObject,
+                                    __form__value: formValuePointer,
+                                });
+                            }}
+                            formObject={v as FormObject}
+                        >
+                            <Stack direction="row">
+                                <IconButton
+                                    onClick={() => {
+                                        onChange({
+                                            ...formObject,
+                                            __form__value: formValuePointer.filter((_, index) => i !== index),
+                                        });
+                                    }}
+                                >
+                                    <Close />
+                                </IconButton>
+                                {i !== 0 && (
+                                    <IconButton
+                                        onClick={() => {
+                                            const switched = v;
+                                            formValuePointer[i] = formValuePointer[i - 1];
+                                            formValuePointer[i - 1] = switched;
+                                            onChange({
+                                                ...formObject,
+                                                __form__value: formValuePointer,
+                                            });
+                                        }}
+                                    >
+                                        <ArrowUpward />
+                                    </IconButton>
+                                )}
+                                {i !== all.length - 1 && (
+                                    <IconButton
+                                        onClick={() => {
+                                            const switched = v;
+                                            formValuePointer[i] = formValuePointer[i + 1];
+                                            formValuePointer[i + 1] = switched;
+                                            onChange({
+                                                ...formObject,
+                                                __form__value: formValuePointer,
+                                            });
+                                        }}
+                                    >
+                                        <ArrowDownward />
+                                    </IconButton>
+                                )}
+                            </Stack>
+                        </Renderer>
+                    </Stack>
+                );
+            })}
+
+            <Button
+                onClick={() => {
+                    formValuePointer.push({
+                        __form__node: nodeWithoutArray,
+                        __form__value: undefined,
+                    });
+                    onChange({
+                        ...formObject,
+                        __form__value: formValuePointer,
+                    });
+                }}
+                endIcon={<Add />}
+            >
+                {`Add ${f.name}`}
+            </Button>
+        </Stack>
+    );
+};
+export default ArrayField;

package/src/components/BooleanField.tsx

@@ -0,0 +1,24 @@
+import { Checkbox, FormControlLabel, FormGroup } from '@mui/material';
+import { PassedFormProps } from 'zeus-form';
+import React from 'react';
+export default ({ f, formObject, onChange }: PassedFormProps) => {
+    const value = formObject.__form__value as boolean | undefined;
+    return (
+        <FormGroup>
+            <FormControlLabel
+                control={
+                    <Checkbox
+                        value={value}
+                        onChange={() =>
+                            onChange({
+                                ...formObject,
+                                __form__value: value === true ? undefined : true,
+                            })
+                        }
+                    />
+                }
+                label={f.name}
+            />
+        </FormGroup>
+    );
+};

package/src/components/EnumField.tsx

@@ -0,0 +1,33 @@
+import { MenuItem, Select } from '@mui/material';
+import { PassedFormProps } from 'zeus-form';
+import { getTypeName } from 'graphql-js-tree';
+import React from 'react';
+export default ({ nodes, onChange, formObject, f }: PassedFormProps) => {
+    const seekNode = nodes.find((n) => n.name === getTypeName(f.type.fieldType));
+    if (!seekNode) {
+        throw new Error('Invalid enum field');
+    }
+    const options =
+        seekNode.args?.map(({ name: label }) => ({
+            label,
+            value: label,
+        })) || [];
+    return (
+        <Select
+            placeholder={f.name}
+            value={formObject.__form__value as string | undefined}
+            onChange={(e) => {
+                onChange({
+                    ...formObject,
+                    __form__value: e.target.value,
+                });
+            }}
+        >
+            {options.map((o) => (
+                <MenuItem key={o.value} value={o.value}>
+                    {o.label}
+                </MenuItem>
+            ))}
+        </Select>
+    );
+};

package/src/components/FormField.tsx

@@ -0,0 +1,15 @@
+import { FormControl, FormHelperText } from '@mui/material';
+import { getErrorFromProps, PassedFormProps } from 'zeus-form';
+import React from 'react';
+const FormField: React.FC<PassedFormProps> = (props) => {
+    const { children } = props;
+    const errors = getErrorFromProps(props);
+    return (
+        <FormControl fullWidth error={!!errors}>
+            {children}
+            {errors && <FormHelperText>{errors}</FormHelperText>}
+        </FormControl>
+    );
+};
+
+export default FormField;

package/src/components/FormLabel.tsx

@@ -0,0 +1,34 @@
+import { IconButton, Stack, Typography } from '@mui/material';
+import { ExpandLess, ExpandMore } from '@mui/icons-material';
+import { PassedFormProps } from 'zeus-form';
+import { TypeSystemDefinition, Options, getTypeName, TypeDefinition } from 'graphql-js-tree';
+import React from 'react';
+const FormLabel: React.FC<PassedFormProps & { open?: boolean; setOpen: (b: boolean) => void }> = (props) => {
+    const { f, open, setOpen, nodes } = props;
+
+    const seekNode = nodes.find((n) => n.name === getTypeName(f.type.fieldType));
+    const isInput = seekNode?.data.type === TypeDefinition.InputObjectTypeDefinition;
+
+    return (
+        <Stack direction={'row'} alignItems="center" spacing={1}>
+            <Stack direction="row" alignItems="center">
+                <Typography>
+                    {props.f.name.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
+                        return str.toUpperCase();
+                    })}
+                </Typography>
+                {props.required && <Typography color={'red'}>*</Typography>}
+                {props.children}
+            </Stack>
+            {(f.data.type === TypeSystemDefinition.FieldDefinition ||
+                isInput ||
+                f.type.fieldType.type === Options.array) && (
+                <IconButton onClick={() => setOpen(!open)}>
+                    {open && <ExpandLess />}
+                    {!open && <ExpandMore />}
+                </IconButton>
+            )}
+        </Stack>
+    );
+};
+export default FormLabel;

package/src/components/NullField.tsx

@@ -0,0 +1,2 @@
+import React from 'react';
+export default () => <div>No value</div>;

package/src/components/NumberField.tsx

@@ -0,0 +1,15 @@
+import { TextField } from '@mui/material';
+import { PassedFormProps } from 'zeus-form';
+import React from 'react';
+export default (props: PassedFormProps) => (
+    <TextField
+        type="number"
+        value={(props.formObject.__form__value as string | undefined) || ''}
+        onChange={(e) => {
+            props.onChange({
+                ...props.formObject,
+                __form__value: e.target.value,
+            });
+        }}
+    />
+);

package/src/components/ObjectField.tsx

@@ -0,0 +1,41 @@
+import { Stack } from '@mui/material';
+import { PassedFormProps, FormObject, Renderer } from 'zeus-form';
+import React from 'react';
+
+const ObjectField: React.FC<PassedFormProps> = (props) => {
+    const { formObject, f } = props;
+    formObject.__form__value ||= {};
+    const fV = formObject.__form__value as { [x: string]: FormObject };
+    return (
+        <Stack pl={2} spacing={2}>
+            {f.args
+                ?.sort((a, b) => {
+                    return b.name > a.name ? -1 : 1;
+                })
+                .map((a) => {
+                    fV[a.name] ||= { __form__node: a };
+                    return (
+                        <Renderer
+                            {...props}
+                            currentPath={`${props.currentPath}.${a.name}`}
+                            key={a.name}
+                            formObject={fV[a.name]}
+                            required={false}
+                            onChange={(fv) => {
+                                props.onChange({
+                                    ...formObject,
+                                    __form__value: {
+                                        ...fV,
+                                        [a.name]: fv,
+                                    },
+                                });
+                            }}
+                            f={a}
+                            children={undefined}
+                        />
+                    );
+                })}
+        </Stack>
+    );
+};
+export default ObjectField;

package/src/components/UniversalField.tsx

@@ -0,0 +1,20 @@
+import { TextField } from '@mui/material';
+import { PassedFormProps } from 'zeus-form';
+import React from 'react';
+export default (props: PassedFormProps) => {
+    console.log(props.f.name, props.formObject);
+    return (
+        <TextField
+            value={(props.formObject.__form__value as string | undefined) || ''}
+            placeholder={props.f.name.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
+                return str.toUpperCase();
+            })}
+            onChange={(e) => {
+                props.onChange({
+                    ...props.formObject,
+                    __form__value: e.target.value,
+                });
+            }}
+        />
+    );
+};

package/src/index.tsx

@@ -0,0 +1,32 @@
+import ArrayField from '@/components/ArrayField';
+import BooleanField from '@/components/BooleanField';
+import EnumField from '@/components/EnumField';
+import FormField from '@/components/FormField';
+import FormLabel from '@/components/FormLabel';
+import NullField from '@/components/NullField';
+import NumberField from '@/components/NumberField';
+import ObjectField from '@/components/ObjectField';
+import UniversalField from '@/components/UniversalField';
+import { InputForm, InputFormLibraryProps } from 'zeus-form';
+import React from 'react';
+
+function MuiInputForm<T>(props: InputFormLibraryProps<T>) {
+    return (
+        <InputForm
+            {...props}
+            components={{
+                ArrayField: ArrayField,
+                BooleanField: BooleanField,
+                EnumField: EnumField,
+                FormField: FormField,
+                FormLabel: FormLabel,
+                NullField: NullField,
+                NumberField: NumberField,
+                ObjectField: ObjectField,
+                UniversalField: UniversalField,
+            }}
+        />
+    );
+}
+
+export default MuiInputForm;

package/tsconfig.build.json

@@ -0,0 +1,36 @@
+{
+    "compilerOptions": {
+        "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+        "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+        "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
+        "declaration": true /* Generates corresponding '.d.ts' file. */,
+
+        "sourceMap": true /* Generates corresponding '.map' file. */,
+
+        "outDir": "./lib" /* Redirect output structure to the directory. */,
+        "rootDir": "./src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
+
+        "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
+
+        "strict": true /* Enable all strict type-checking options. */,
+
+        "baseUrl": "./src" /* Base directory to resolve non-absolute module names. */,
+        "paths": {
+            "@/*": ["./*"]
+        } /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */,
+
+        "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+        "skipLibCheck": true /* Skip type checking of declaration files. */,
+        "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
+        "plugins": [
+            {
+                "transform": "typescript-transform-paths"
+            },
+            {
+                "transform": "typescript-transform-paths",
+                "afterDeclarations": true
+            }
+        ]
+    },
+    "exclude": ["**/__tests__/*", "**/__sandbox__/*", "./lib", "node_modules"]
+}

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+        "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+        "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+        "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
+        "sourceMap": true /* Generates corresponding '.map' file. */,
+        "rootDir": "./src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
+        "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
+        "strict": true /* Enable all strict type-checking options. */,
+        "baseUrl": "./src" /* Base directory to resolve non-absolute module names. */,
+        "outDir": "./lib",
+        "paths": {
+            "@/*": ["./*"]
+        } /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */,
+        "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+        "skipLibCheck": true /* Skip type checking of declaration files. */,
+        "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
+        "composite": true
+    }
+}