graphql-form-mui 0.0.5 → 0.0.8

package/lib/components/ArrayField.js

@@ -58,7 +58,7 @@ var ArrayField = function (props) {
         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))));
+            }, 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

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

package/lib/components/EnumField.js

@@ -33,6 +33,6 @@ exports.default = (function (_a) {
     })) || [];
     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)); })));
+        } }, 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

@@ -1 +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"}
+{"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,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.js

@@ -3,10 +3,11 @@ 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"));
 var FormField = function (_a) {
     var children = _a.children;
-    return react_1.default.createElement("div", null, children);
+    return react_1.default.createElement(material_1.FormControl, { fullWidth: true }, children);
 };
 exports.default = FormField;
 //# sourceMappingURL=FormField.js.map

package/lib/components/FormField.js.map

@@ -1 +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"}
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../src/components/FormField.tsx"],"names":[],"mappings":";;;;;AAAA,0CAA4C;AAE5C,gDAA0B;AAC1B,IAAM,SAAS,GAA8B,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,8BAAC,sBAAW,IAAC,SAAS,UAAE,QAAQ,CAAe;AAA/C,CAA+C,CAAC;AAE/G,kBAAe,SAAS,CAAC"}

package/lib/components/FormLabel.d.ts

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

package/lib/components/FormLabel.js

@@ -3,10 +3,26 @@ 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) { return (react_1.default.createElement("div", null,
-    props.f.name,
-    " ",
-    props.children)); };
+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

@@ -1 +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"}
+{"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/ObjectField.js

@@ -22,7 +22,7 @@ var ObjectField = function (props) {
     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 (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;

package/lib/components/ObjectField.js.map

@@ -1 +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"}
+{"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,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,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.js

@@ -16,7 +16,9 @@ var __importDefault = (this && this.__importDefault) || function (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) {
+exports.default = (function (props) { return (react_1.default.createElement(material_1.TextField, { value: props.formObject.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), { value: e.target.value }));
     } })); });
 //# sourceMappingURL=UniversalField.js.map

package/lib/components/UniversalField.js.map

@@ -1 +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"}
+{"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,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG;QAC5E,OAAO,GAAG,CAAC,WAAW,EAAE,CAAC;IAC7B,CAAC,CAAC,EACF,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,EAb0C,CAa1C,EAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "graphql-form-mui",
-    "version": "0.0.5",
+    "version": "0.0.8",
     "description": "Easy form creation with GraphQL Editor and React",
     "main": "lib/index.js",
     "scripts": {

package/src/components/ArrayField.tsx

@@ -2,7 +2,7 @@ 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';
+import { Add, ArrowDownward, ArrowUpward, Close } from '@mui/icons-material';
 
 const ArrayField: React.FC<
     PassedFormProps & {
@@ -101,7 +101,7 @@ const ArrayField: React.FC<
                         value: formValuePointer,
                     });
                 }}
-                endIcon={<PlusOne />}
+                endIcon={<Add />}
             >
                 {`Add ${f.name}`}
             </Button>

package/src/components/EnumField.tsx

@@ -24,7 +24,9 @@ export default ({ nodes, onChange, formObject, f }: PassedFormProps) => {
             }}
         >
             {options.map((o) => (
-                <MenuItem value={o.value}>{o.label}</MenuItem>
+                <MenuItem key={o.value} value={o.value}>
+                    {o.label}
+                </MenuItem>
             ))}
         </Select>
     );

package/src/components/FormField.tsx

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

package/src/components/FormLabel.tsx

@@ -1,9 +1,34 @@
+import { IconButton, Stack, Typography } from '@mui/material';
+import { ExpandLess, ExpandMore } from '@mui/icons-material';
 import { PassedFormProps } from 'graphql-form';
+import { TypeSystemDefinition, Options, getTypeName, TypeDefinition } from 'graphql-js-tree';
 import React from 'react';
-const FormLabel: React.FC<PassedFormProps> = (props) => (
-    <div>
-        {props.f.name} {props.children}
-    </div>
-);
+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/ObjectField.tsx

@@ -7,7 +7,7 @@ const ObjectField: React.FC<PassedFormProps> = (props) => {
     formObject.value ||= {};
     const fV = formObject.value as { [x: string]: FormObject };
     return (
-        <Stack pl={4}>
+        <Stack pl={2} spacing={2}>
             {f.args
                 ?.sort((a, b) => {
                     return b.name > a.name ? -1 : 1;

package/src/components/UniversalField.tsx

@@ -4,6 +4,9 @@ import React from 'react';
 export default (props: PassedFormProps) => (
     <TextField
         value={(props.formObject.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,