graphql-form-mui 0.0.2

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 'graphql-form';
+import React from 'react';
+declare const ArrayField: React.FC<PassedFormProps & {
+    open?: boolean;
+}>;
+export default ArrayField;

package/lib/components/ArrayField.js

@@ -0,0 +1,64 @@
+"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_form_1 = require("graphql-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.value || (formObject.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.value;
+    return (react_1.default.createElement(material_1.Stack, null,
+        formValuePointer.map(function (v, i, all) {
+            formValuePointer[i] || (formValuePointer[i] = { node: nodeWithoutArray });
+            return (react_1.default.createElement(material_1.Stack, { key: f.name + i },
+                react_1.default.createElement(graphql_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), { 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), { 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), { 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), { value: formValuePointer }));
+                            } },
+                            react_1.default.createElement(icons_material_1.ArrowDownward, null)))))));
+        }),
+        react_1.default.createElement(material_1.Button, { onClick: function () {
+                formValuePointer.push({});
+                onChange(__assign(__assign({}, formObject), { value: formValuePointer }));
+            }, endIcon: react_1.default.createElement(icons_material_1.PlusOne, 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 'graphql-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.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), { 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,KAA4B,CAAC;IACtD,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,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,IAC1C;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 'graphql-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.value, onChange: function (e) {
+            onChange(__assign(__assign({}, formObject), { value: e.target.value }));
+        } }, options.map(function (o) { return (react_1.default.createElement(material_1.MenuItem, { 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,KAA2B,EAC7C,QAAQ,EAAE,UAAC,CAAC;YACR,QAAQ,uBACD,UAAU,KACb,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IACvB,CAAC;QACP,CAAC,IAEA,OAAO,CAAC,GAAG,CAAC,UAAC,CAAC,IAAK,OAAA,CAChB,8BAAC,mBAAQ,IAAC,KAAK,EAAE,CAAC,CAAC,KAAK,IAAG,CAAC,CAAC,KAAK,CAAY,CACjD,EAFmB,CAEnB,CAAC,CACG,CACZ,CAAC;AACN,CAAC,EAAC"}

package/lib/components/FormField.d.ts

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

package/lib/components/FormField.js

@@ -0,0 +1,12 @@
+"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"));
+var FormField = function (_a) {
+    var children = _a.children;
+    return react_1.default.createElement("div", null, children);
+};
+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":";;;;;AACA,gDAA0B;AAC1B,IAAM,SAAS,GAA8B,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,2CAAM,QAAQ,CAAO;AAArB,CAAqB,CAAC;AAErF,kBAAe,SAAS,CAAC"}

package/lib/components/FormLabel.d.ts

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

package/lib/components/FormLabel.js

@@ -0,0 +1,12 @@
+"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"));
+var FormLabel = function (props) { return (react_1.default.createElement("div", null,
+    props.f.name,
+    " ",
+    props.children)); };
+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":";;;;;AACA,gDAA0B;AAC1B,IAAM,SAAS,GAA8B,UAAC,KAAK,IAAK,OAAA,CACpD;IACK,KAAK,CAAC,CAAC,CAAC,IAAI;;IAAG,KAAK,CAAC,QAAQ,CAC5B,CACT,EAJuD,CAIvD,CAAC;AAEF,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 'graphql-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.value || '', onChange: function (e) {
+        props.onChange(__assign(__assign({}, props.formObject), { 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,KAA4B,IAAI,EAAE,EAC3D,QAAQ,EAAE,UAAC,CAAC;QACR,KAAK,CAAC,QAAQ,uBACP,KAAK,CAAC,UAAU,KACnB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IACvB,CAAC;IACP,CAAC,GACH,CACL,EAX0C,CAW1C,EAAC"}

package/lib/components/ObjectField.d.ts

@@ -0,0 +1,4 @@
+import { PassedFormProps } from 'graphql-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 graphql_form_1 = require("graphql-form");
+var react_1 = __importDefault(require("react"));
+var ObjectField = function (props) {
+    var _a;
+    var formObject = props.formObject, f = props.f;
+    formObject.value || (formObject.value = {});
+    var fV = formObject.value;
+    return (react_1.default.createElement(material_1.Stack, { pl: 4 }, (_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] = { node: a });
+        return (react_1.default.createElement(graphql_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), { 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,6CAAqE;AACrE,gDAA0B;AAE1B,IAAM,WAAW,GAA8B,UAAC,KAAK;;IACzC,IAAA,UAAU,GAAQ,KAAK,WAAb,EAAE,CAAC,GAAK,KAAK,EAAV,CAAW;IAChC,UAAU,CAAC,KAAK,KAAhB,UAAU,CAAC,KAAK,GAAK,EAAE,EAAC;IACxB,IAAM,EAAE,GAAG,UAAU,CAAC,KAAoC,CAAC;IAC3D,OAAO,CACH,8BAAC,gBAAK,IAAC,EAAE,EAAE,CAAC,IACP,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,IAAI,EAAE,CAAC,EAAE,EAAC;QAC3B,OAAO,CACH,8BAAC,uBAAQ,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,KAAK,wBACE,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 'graphql-form';
+declare const _default: (props: PassedFormProps) => JSX.Element;
+export default _default;

package/lib/components/UniversalField.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, { value: props.formObject.value || '', onChange: function (e) {
+        props.onChange(__assign(__assign({}, props.formObject), { 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,IAAK,OAAA,CACvC,8BAAC,oBAAS,IACN,KAAK,EAAG,KAAK,CAAC,UAAU,CAAC,KAA4B,IAAI,EAAE,EAC3D,QAAQ,EAAE,UAAC,CAAC;QACR,KAAK,CAAC,QAAQ,uBACP,KAAK,CAAC,UAAU,KACnB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IACvB,CAAC;IACP,CAAC,GACH,CACL,EAV0C,CAU1C,EAAC"}

package/lib/index.d.ts

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

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 graphql_form_1 = require("graphql-form");
+var react_1 = __importDefault(require("react"));
+var MuiForm = function (props) {
+    return (react_1.default.createElement(graphql_form_1.FormDisplayer, __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 = MuiForm;
+//# 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,6CAA+D;AAC/D,gDAA0B;AAE1B,IAAM,OAAO,GAA+B,UAAC,KAAK;IAC9C,OAAO,CACH,8BAAC,4BAAa,eACN,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,CAAC;AAEF,kBAAe,OAAO,CAAC"}

package/package.json

@@ -0,0 +1,36 @@
+{
+    "name": "graphql-form-mui",
+    "version": "0.0.2",
+    "description": "Easy form creation with GraphQL Editor and React",
+    "main": "lib/index.js",
+    "scripts": {
+        "test": "jest",
+        "test:watch": "jest --watch",
+        "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,111 @@
+import { Button, IconButton, Stack } from '@mui/material';
+import { FormObject, FormValue, PassedFormProps, Renderer } from 'graphql-form';
+import { Options, ParserField } from 'graphql-js-tree';
+import React from 'react';
+import { ArrowDownward, ArrowUpward, Close, PlusOne } from '@mui/icons-material';
+
+const ArrayField: React.FC<
+    PassedFormProps & {
+        open?: boolean;
+    }
+> = (props) => {
+    const { formObject, onChange, f } = props;
+    formObject.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.value as Array<FormValue>;
+    return (
+        <Stack>
+            {formValuePointer.map((v, i: number, all) => {
+                formValuePointer[i] ||= { 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,
+                                    value: formValuePointer,
+                                });
+                            }}
+                            formObject={v as FormObject}
+                        >
+                            <Stack direction="row">
+                                <IconButton
+                                    onClick={() => {
+                                        onChange({
+                                            ...formObject,
+                                            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,
+                                                value: formValuePointer,
+                                            });
+                                        }}
+                                    >
+                                        <ArrowUpward />
+                                    </IconButton>
+                                )}
+                                {i !== all.length - 1 && (
+                                    <IconButton
+                                        onClick={() => {
+                                            const switched = v;
+                                            formValuePointer[i] = formValuePointer[i + 1];
+                                            formValuePointer[i + 1] = switched;
+                                            onChange({
+                                                ...formObject,
+                                                value: formValuePointer,
+                                            });
+                                        }}
+                                    >
+                                        <ArrowDownward />
+                                    </IconButton>
+                                )}
+                            </Stack>
+                        </Renderer>
+                    </Stack>
+                );
+            })}
+
+            <Button
+                onClick={() => {
+                    formValuePointer.push({});
+                    onChange({
+                        ...formObject,
+                        value: formValuePointer,
+                    });
+                }}
+                endIcon={<PlusOne />}
+            >
+                {`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 'graphql-form';
+import React from 'react';
+export default ({ f, formObject, onChange }: PassedFormProps) => {
+    const value = formObject.value as boolean | undefined;
+    return (
+        <FormGroup>
+            <FormControlLabel
+                control={
+                    <Checkbox
+                        value={value}
+                        onChange={() =>
+                            onChange({
+                                ...formObject,
+                                value: value === true ? undefined : true,
+                            })
+                        }
+                    />
+                }
+                label={f.name}
+            />
+        </FormGroup>
+    );
+};

package/src/components/EnumField.tsx

@@ -0,0 +1,31 @@
+import { MenuItem, Select } from '@mui/material';
+import { PassedFormProps } from 'graphql-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.value as string | undefined}
+            onChange={(e) => {
+                onChange({
+                    ...formObject,
+                    value: e.target.value,
+                });
+            }}
+        >
+            {options.map((o) => (
+                <MenuItem value={o.value}>{o.label}</MenuItem>
+            ))}
+        </Select>
+    );
+};

package/src/components/FormField.tsx

@@ -0,0 +1,5 @@
+import { PassedFormProps } from 'graphql-form';
+import React from 'react';
+const FormField: React.FC<PassedFormProps> = ({ children }) => <div>{children}</div>;
+
+export default FormField;

package/src/components/FormLabel.tsx

@@ -0,0 +1,9 @@
+import { PassedFormProps } from 'graphql-form';
+import React from 'react';
+const FormLabel: React.FC<PassedFormProps> = (props) => (
+    <div>
+        {props.f.name} {props.children}
+    </div>
+);
+
+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 'graphql-form';
+import React from 'react';
+export default (props: PassedFormProps) => (
+    <TextField
+        type="number"
+        value={(props.formObject.value as string | undefined) || ''}
+        onChange={(e) => {
+            props.onChange({
+                ...props.formObject,
+                value: e.target.value,
+            });
+        }}
+    />
+);

package/src/components/ObjectField.tsx

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

package/src/components/UniversalField.tsx

@@ -0,0 +1,14 @@
+import { TextField } from '@mui/material';
+import { PassedFormProps } from 'graphql-form';
+import React from 'react';
+export default (props: PassedFormProps) => (
+    <TextField
+        value={(props.formObject.value as string | undefined) || ''}
+        onChange={(e) => {
+            props.onChange({
+                ...props.formObject,
+                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 { FormDisplayer, FormLibraryProps } from 'graphql-form';
+import React from 'react';
+
+const MuiForm: React.FC<FormLibraryProps> = (props) => {
+    return (
+        <FormDisplayer
+            {...props}
+            components={{
+                ArrayField: ArrayField,
+                BooleanField: BooleanField,
+                EnumField: EnumField,
+                FormField: FormField,
+                FormLabel: FormLabel,
+                NullField: NullField,
+                NumberField: NumberField,
+                ObjectField: ObjectField,
+                UniversalField: UniversalField,
+            }}
+        />
+    );
+};
+
+export default MuiForm;

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
+    }
+}