graphql-form 0.1.6 → 0.1.8

package/lib/index.d.ts

@@ -1,7 +1,2 @@
 export * from "./models";
-export * from "./FormBuilder";
-export * from "./FormDisplayer";
-export * from "./createWidget";
-export * from "./renderer";
-export * from "./FormToCode";
-export * from "./outsideUse";
+export * from "./render";

package/lib/index.js

@@ -15,10 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./models"), exports);
-__exportStar(require("./FormBuilder"), exports);
-__exportStar(require("./FormDisplayer"), exports);
-__exportStar(require("./createWidget"), exports);
-__exportStar(require("./renderer"), exports);
-__exportStar(require("./FormToCode"), exports);
-__exportStar(require("./outsideUse"), exports);
+__exportStar(require("./render"), exports);
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,gDAA8B;AAC9B,kDAAgC;AAChC,iDAA+B;AAC/B,6CAA2B;AAC3B,+CAA6B;AAC7B,+CAA6B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,2CAAyB"}

package/lib/models.d.ts

@@ -1,17 +1,6 @@
 import { ParserField } from 'graphql-js-tree';
+import { VariableDefinitionWithoutLoc } from 'graphql-js-tree/lib/Models/GqlParserTree';
 import React from 'react';
-export declare type FieldComponent = React.FC<PassedFormProps>;
-export declare type FormLabelProps = React.FC<PassedFormProps & {
-    open?: boolean;
-    setOpen: (b: boolean) => void;
-}>;
-export declare type WidgetSavedData = {
-    widget: string;
-    [x: string]: unknown;
-};
-export declare type SavedWidgets = {
-    [selector: string]: WidgetSavedData | undefined;
-};
 export declare const enum Errs {
     REQUIRED = "REQUIRED",
     VALUE_IN_ARRAY_REQUIRED = "VALUE_IN_ARRAY_REQUIRED"
@@ -19,76 +8,44 @@ export declare const enum Errs {
 export declare type Errors = {
     [selector: string]: string;
 };
-export declare type SavedForms = {
-    [selector: string]: FormObject;
+export declare type VariableValue = {
+    [x: string]: VariableValue;
+} | string | boolean | number | null | undefined | Array<VariableValue>;
+export declare type VarValues = {
+    [variableName: string]: VariableValue;
 };
-export declare type ReturnedDictType = any;
-export declare type WidgetVariantType = {
-    name: string;
-    widget: string;
-    data: ReturnedDictType;
+export declare type VarFormFile = {
+    values: VarValues;
+    vars: VariableDefinitionWithoutLoc[];
+};
+export declare type VarFormProps = {
+    file: VarFormFile;
+    onChange: (file: VarFormFile) => void;
+    schema: string;
+    shared: Omit<SharedProps, 'nodes'>;
 };
-export declare type PassedFormProps<WidgetData = ReturnedDictType> = {
-    f: ParserField;
+declare type SharedProps = {
     nodes: ParserField[];
-    formObject: FormObject;
-    onChange: (formObject: FormObject) => void;
-    changeWidget: (widgetData: WidgetSavedData | undefined, path: string) => void;
-    required?: boolean;
-    runQuery: (q: string) => Promise<ReturnedDictType>;
-    widgetComponents: WidgetType[];
-    widgetVariants?: WidgetVariantType[];
-    currentPath: string;
-    presetValues?: Record<string, any>;
-    widgets?: SavedWidgets;
-    widgetData?: WidgetData;
-    errors?: Errors;
-    children?: React.ReactNode;
     components: {
-        ArrayField: FieldComponent;
-        ObjectField: FieldComponent;
-        BooleanField: FieldComponent;
-        UniversalField: FieldComponent;
-        NumberField: FieldComponent;
-        EnumField: FieldComponent;
-        NullField: FieldComponent;
-        FormLabel: FormLabelProps;
-        FormField: FieldComponent;
+        ArrayField: NewFieldComponent;
+        ObjectField: NewFieldComponent;
+        BooleanField: NewFieldComponent;
+        UniversalField: NewFieldComponent;
+        NumberField: NewFieldComponent;
+        EnumField: NewFieldComponent;
+        NullField: NewFieldComponent;
+        FormLabel: NewFormLabelProps;
+        FormField: NewFieldComponent;
     };
 };
-export declare type FormFile = {
-    widgets?: SavedWidgets;
-    forms?: SavedForms;
-};
-export declare type FormBuilderProps = Omit<PassedFormProps, 'formObject' | 'onChange' | 'f' | 'currentPath' | 'changeWidget' | 'widgets' | 'nodes'> & {
-    formFile: FormFile;
-    schema: string;
-    onChange: (o: FormFile, query: string) => void;
-};
-export declare type FormDisplayerProps = Omit<PassedFormProps, 'formObject' | 'onChange' | 'f' | 'currentPath' | 'changeWidget' | 'widgets' | 'nodes'> & {
-    formFile: FormFile;
-    schema: string;
-    onChange: (o: FormFile, query: string) => void;
-};
-export declare type FormLibraryProps = Omit<FormDisplayerProps, 'required' | 'components'>;
-export declare type CastToWidgetSettingsPassedForm<WidgetData = ReturnedDictType> = Partial<PassedFormProps<Partial<WidgetData>>> & {
-    widgetSettingsChange: (data: WidgetData) => void;
-};
-export declare type WidgetProps<Props> = {
-    Component: React.FC<PassedFormProps<Props>>;
-    Settings?: React.FC<CastToWidgetSettingsPassedForm<Props>> | undefined;
-    Description?: React.FC;
-    requirements: (props: PassedFormProps) => boolean;
-    displayName?: string;
-    name: string;
-};
-export declare type WidgetType = WidgetProps<ReturnedDictType>;
-export declare type FormValue = {
-    value: FormValue;
-} | {
-    [x: string]: FormValue;
-} | string | boolean | number | null | undefined | FormObject | Array<FormValue>;
-export declare type FormObject = {
-    value?: FormValue;
+export declare type NewFieldProps = {
     node: ParserField;
+    value: VariableValue;
+    shared: SharedProps;
+    mutate: (value: VariableValue) => void;
+    children?: React.ReactNode;
+    required?: boolean;
 };
+export declare type NewFieldComponent = React.FC<NewFieldProps>;
+export declare type NewFormLabelProps = React.FC<NewFieldProps>;
+export {};

package/lib/models.js.map

@@ -1 +1 @@
-{"version":3,"file":"models.js","sourceRoot":"","sources":["../src/models.ts"],"names":[],"mappings":";;;AAgBA,IAAkB,IAGjB;AAHD,WAAkB,IAAI;IAClB,6BAAqB,CAAA;IACrB,2DAAmD,CAAA;AACvD,CAAC,EAHiB,IAAI,GAAJ,YAAI,KAAJ,YAAI,QAGrB"}
+{"version":3,"file":"models.js","sourceRoot":"","sources":["../src/models.ts"],"names":[],"mappings":";;;AAIA,IAAkB,IAGjB;AAHD,WAAkB,IAAI;IAClB,6BAAqB,CAAA;IACrB,2DAAmD,CAAA;AACvD,CAAC,EAHiB,IAAI,GAAJ,YAAI,KAAJ,YAAI,QAGrB"}

package/lib/render/fields.d.ts

@@ -0,0 +1,3 @@
+import { NewFieldProps } from "../models";
+import React from 'react';
+export declare const Fields: React.FC<NewFieldProps>;

package/lib/{renderer → render}/fields.js

@@ -15,34 +15,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Fields = void 0;
-var outsideUse_1 = require("../outsideUse");
 var graphql_js_tree_1 = require("graphql-js-tree");
 var react_1 = __importDefault(require("react"));
 var Fields = function (props) {
-    var nodes = props.nodes, f = props.f, _a = props.components, ArrayField = _a.ArrayField, ObjectField = _a.ObjectField;
-    var seekNode = nodes.find(function (n) { return n.name === (0, graphql_js_tree_1.getTypeName)(f.type.fieldType); });
+    var node = props.node, _a = props.shared, nodes = _a.nodes, _b = _a.components, ArrayField = _b.ArrayField, ObjectField = _b.ObjectField;
+    var seekNode = nodes.find(function (n) { return n.name === (0, graphql_js_tree_1.getTypeName)(node.type.fieldType); });
     var isInput = (seekNode === null || seekNode === void 0 ? void 0 : seekNode.data.type) === graphql_js_tree_1.TypeDefinition.InputObjectTypeDefinition;
-    if (f.data.type === graphql_js_tree_1.TypeSystemDefinition.FieldDefinition) {
+    if (node.data.type === graphql_js_tree_1.TypeSystemDefinition.FieldDefinition ||
+        node.data.type === graphql_js_tree_1.TypeDefinition.InputObjectTypeDefinition) {
         return react_1.default.createElement(ObjectField, __assign({}, props));
     }
-    if (f.type.fieldType.type === graphql_js_tree_1.Options.array) {
+    if (node.type.fieldType.type === graphql_js_tree_1.Options.array) {
         return react_1.default.createElement(ArrayField, __assign({}, props));
     }
     if (isInput) {
-        return react_1.default.createElement(ObjectField, __assign({}, props, { f: seekNode }));
-    }
-    var w = (0, outsideUse_1.getWidgetFromProps)(props);
-    if (w) {
-        var data = w.data, Component = w.widget.Component;
-        return react_1.default.createElement(Component, __assign({}, props, { widgetData: data }));
+        return react_1.default.createElement(ObjectField, __assign({}, props, { node: seekNode }));
     }
     return react_1.default.createElement(ScalarField, __assign({}, props));
 };
 exports.Fields = Fields;
 var ScalarField = function (props) {
-    var f = props.f, nodes = props.nodes, children = props.children, _a = props.components, BooleanField = _a.BooleanField, NumberField = _a.NumberField, EnumField = _a.EnumField, UniversalField = _a.UniversalField;
-    var typeName = (0, graphql_js_tree_1.getTypeName)(f.type.fieldType);
-    var seekNode = nodes.find(function (n) { return n.name === (0, graphql_js_tree_1.getTypeName)(f.type.fieldType); });
+    var node = props.node, _a = props.shared, nodes = _a.nodes, _b = _a.components, BooleanField = _b.BooleanField, NumberField = _b.NumberField, EnumField = _b.EnumField, UniversalField = _b.UniversalField;
+    var typeName = (0, graphql_js_tree_1.getTypeName)(node.type.fieldType);
+    var seekNode = nodes.find(function (n) { return n.name === (0, graphql_js_tree_1.getTypeName)(node.type.fieldType); });
     if (typeName === graphql_js_tree_1.ScalarTypes.String ||
         typeName === graphql_js_tree_1.ScalarTypes.ID ||
         (seekNode === null || seekNode === void 0 ? void 0 : seekNode.data.type) === graphql_js_tree_1.TypeDefinition.ScalarTypeDefinition) {
@@ -57,6 +52,6 @@ var ScalarField = function (props) {
     if ((seekNode === null || seekNode === void 0 ? void 0 : seekNode.data.type) === graphql_js_tree_1.TypeDefinition.EnumTypeDefinition) {
         return react_1.default.createElement(EnumField, __assign({}, props));
     }
-    return react_1.default.createElement(react_1.default.Fragment, null, children);
+    return react_1.default.createElement(react_1.default.Fragment, null);
 };
 //# sourceMappingURL=fields.js.map

package/lib/render/fields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fields.js","sourceRoot":"","sources":["../../src/render/fields.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AACA,mDAA0G;AAC1G,gDAA0B;AAEnB,IAAM,MAAM,GAA4B,UAAC,KAAK;IAE7C,IAAA,IAAI,GAKJ,KAAK,KALD,EACJ,KAIA,KAAK,OADJ,EAFG,KAAK,WAAA,EACL,kBAAuC,EAAzB,UAAU,gBAAA,EAAE,WAAW,iBACxC,CACK;IACV,IAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,IAAI,KAAK,IAAA,6BAAW,EAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAA3C,CAA2C,CAAC,CAAC;IAChF,IAAM,OAAO,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,CAAC,IAAI,MAAK,gCAAc,CAAC,yBAAyB,CAAC;IACjF,IACI,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,sCAAoB,CAAC,eAAe;QACvD,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,gCAAc,CAAC,yBAAyB,EAC7D;QACE,OAAO,8BAAC,WAAW,eAAK,KAAK,EAAI,CAAC;KACrC;IACD,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,KAAK,yBAAO,CAAC,KAAK,EAAE;QAC5C,OAAO,8BAAC,UAAU,eAAK,KAAK,EAAI,CAAC;KACpC;IACD,IAAI,OAAO,EAAE;QACT,OAAO,8BAAC,WAAW,eAAK,KAAK,IAAE,IAAI,EAAE,QAAQ,IAAI,CAAC;KACrD;IACD,OAAO,8BAAC,WAAW,eAAK,KAAK,EAAI,CAAC;AACtC,CAAC,CAAC;AAvBW,QAAA,MAAM,UAuBjB;AAEF,IAAM,WAAW,GAA4B,UAAC,KAAK;IAE3C,IAAA,IAAI,GAKJ,KAAK,KALD,EACJ,KAIA,KAAK,OADJ,EAFG,KAAK,WAAA,EACL,kBAAoE,EAAtD,YAAY,kBAAA,EAAE,WAAW,iBAAA,EAAE,SAAS,eAAA,EAAE,cAAc,oBACrE,CACK;IACV,IAAM,QAAQ,GAAG,IAAA,6BAAW,EAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAClD,IAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,IAAI,KAAK,IAAA,6BAAW,EAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAA3C,CAA2C,CAAC,CAAC;IAChF,IACI,QAAQ,KAAK,6BAAW,CAAC,MAAM;QAC/B,QAAQ,KAAK,6BAAW,CAAC,EAAE;QAC3B,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,CAAC,IAAI,MAAK,gCAAc,CAAC,oBAAoB,EAC7D;QACE,OAAO,8BAAC,cAAc,eAAK,KAAK,EAAI,CAAC;KACxC;IAED,IAAI,QAAQ,KAAK,6BAAW,CAAC,KAAK,IAAI,QAAQ,KAAK,6BAAW,CAAC,GAAG,EAAE;QAChE,OAAO,8BAAC,WAAW,eAAK,KAAK,EAAI,CAAC;KACrC;IACD,IAAI,QAAQ,KAAK,6BAAW,CAAC,OAAO,EAAE;QAClC,OAAO,8BAAC,YAAY,eAAK,KAAK,EAAI,CAAC;KACtC;IACD,IAAI,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,CAAC,IAAI,MAAK,gCAAc,CAAC,kBAAkB,EAAE;QAC3D,OAAO,8BAAC,SAAS,eAAK,KAAK,EAAI,CAAC;KACnC;IACD,OAAO,6DAAK,CAAC;AACjB,CAAC,CAAC"}

package/lib/render/index.d.ts

@@ -0,0 +1,4 @@
+import { NewFieldProps, VarFormProps } from "../models";
+import React from 'react';
+export declare const Render: React.FC<NewFieldProps>;
+export declare const VariableForm: React.FC<VarFormProps>;

package/lib/render/index.js

@@ -0,0 +1,56 @@
+"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 });
+exports.VariableForm = exports.Render = void 0;
+var fields_1 = require("./fields");
+var graphql_js_tree_1 = require("graphql-js-tree");
+var react_1 = __importDefault(require("react"));
+var Render = function (props) {
+    var _a = props.shared.components, FormLabel = _a.FormLabel, FormField = _a.FormField;
+    return (react_1.default.createElement(FormField, __assign({}, props),
+        react_1.default.createElement(FormLabel, __assign({}, props)),
+        react_1.default.createElement(fields_1.Fields, __assign({}, props))));
+};
+exports.Render = Render;
+var VariableForm = function (props) {
+    var _a = props.file, values = _a.values, vars = _a.vars, onChange = props.onChange, schema = props.schema, shared = props.shared;
+    var nodes = graphql_js_tree_1.Parser.parseAddExtensions(schema).nodes;
+    return (react_1.default.createElement(react_1.default.Fragment, null, vars.map(function (v) {
+        var value = values[v.name];
+        var node = nodes.find(function (n) { return n.name === v.type; }) || {
+            name: v.name,
+            args: [],
+            data: {
+                type: v.type,
+            },
+            directives: [],
+            id: (0, graphql_js_tree_1.generateNodeId)(v.name, v.type, []),
+            interfaces: [],
+            type: {
+                fieldType: (0, graphql_js_tree_1.decompileType)(v.type),
+            },
+        };
+        return (react_1.default.createElement(exports.Render, { node: node, shared: __assign(__assign({}, shared), { nodes: nodes }), mutate: function (val) {
+                var _a;
+                return onChange({
+                    values: __assign(__assign({}, values), (_a = {}, _a[v.name] = val, _a)),
+                    vars: vars,
+                });
+            }, value: value, key: v.name }));
+    })));
+};
+exports.VariableForm = VariableForm;
+//# sourceMappingURL=index.js.map

package/lib/render/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/render/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AACA,mCAAyC;AACzC,mDAAqF;AACrF,gDAA0B;AAEnB,IAAM,MAAM,GAA4B,UAAC,KAAK;IAGzC,IAAA,KAEJ,KAAK,kBAFmC,EAAtB,SAAS,eAAA,EAAE,SAAS,eAAE,CAElC;IACV,OAAO,CACH,8BAAC,SAAS,eAAK,KAAK;QAChB,8BAAC,SAAS,eAAK,KAAK,EAAI;QACxB,8BAAC,eAAM,eAAK,KAAK,EAAI,CACb,CACf,CAAC;AACN,CAAC,CAAC;AAZW,QAAA,MAAM,UAYjB;AAEK,IAAM,YAAY,GAA2B,UAAC,KAAK;IAElD,IAAA,KAIA,KAAK,KAJiB,EAAd,MAAM,YAAA,EAAE,IAAI,UAAA,EACpB,QAAQ,GAGR,KAAK,SAHG,EACR,MAAM,GAEN,KAAK,OAFC,EACN,MAAM,GACN,KAAK,OADC,CACA;IACF,IAAA,KAAK,GAAK,wBAAM,CAAC,kBAAkB,CAAC,MAAM,CAAC,MAAtC,CAAuC;IACpD,OAAO,CACH,8DACK,IAAI,CAAC,GAAG,CAAC,UAAC,CAAC;QACR,IAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,EAAjB,CAAiB,CAAC,IAAI;YACjD,IAAI,EAAE,CAAC,CAAC,IAAI;YACZ,IAAI,EAAE,EAAE;YACR,IAAI,EAAE;gBACF,IAAI,EAAE,CAAC,CAAC,IAAmB;aAC9B;YACD,UAAU,EAAE,EAAE;YACd,EAAE,EAAE,IAAA,gCAAc,EAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,IAAmB,EAAE,EAAE,CAAC;YACrD,UAAU,EAAE,EAAE;YACd,IAAI,EAAE;gBACF,SAAS,EAAE,IAAA,+BAAa,EAAC,CAAC,CAAC,IAAI,CAAC;aACnC;SACJ,CAAC;QACF,OAAO,CACH,8BAAC,cAAM,IACH,IAAI,EAAE,IAAI,EACV,MAAM,wBACC,MAAM,KACT,KAAK,OAAA,KAET,MAAM,EAAE,UAAC,GAAG;;gBACR,OAAA,QAAQ,CAAC;oBACL,MAAM,wBAAO,MAAM,gBAAG,CAAC,CAAC,IAAI,IAAG,GAAG,MAAE;oBACpC,IAAI,MAAA;iBACP,CAAC;YAHF,CAGE,EAEN,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,CAAC,CAAC,IAAI,GACb,CACL,CAAC;IACN,CAAC,CAAC,CACH,CACN,CAAC;AACN,CAAC,CAAC;AA7CW,QAAA,YAAY,gBA6CvB"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "graphql-form",
-    "version": "0.1.6",
+    "version": "0.1.8",
     "description": "Easy form creation with GraphQL Editor and React",
     "main": "lib/index.js",
     "scripts": {
@@ -23,10 +23,10 @@
     "license": "MIT",
     "homepage": "https://form.graphqleditor.com",
     "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
     },
     "dependencies": {
-        "graphql-js-tree": "^0.2.5"
+        "graphql-js-tree": "^0.3.2"
     }
 }

package/src/index.tsx

@@ -1,7 +1,2 @@
 export * from '@/models';
-export * from '@/FormBuilder';
-export * from '@/FormDisplayer';
-export * from '@/createWidget';
-export * from '@/renderer';
-export * from '@/FormToCode';
-export * from '@/outsideUse';
+export * from '@/render';

package/src/models.ts

@@ -1,19 +1,7 @@
 import { ParserField } from 'graphql-js-tree';
+import { VariableDefinitionWithoutLoc } from 'graphql-js-tree/lib/Models/GqlParserTree';
 import React from 'react';
 
-export type FieldComponent = React.FC<PassedFormProps>;
-
-export type FormLabelProps = React.FC<PassedFormProps & { open?: boolean; setOpen: (b: boolean) => void }>;
-
-export type WidgetSavedData = {
-    widget: string;
-    [x: string]: unknown;
-};
-
-export type SavedWidgets = {
-    [selector: string]: WidgetSavedData | undefined;
-};
-
 export const enum Errs {
     REQUIRED = 'REQUIRED',
     VALUE_IN_ARRAY_REQUIRED = 'VALUE_IN_ARRAY_REQUIRED',
@@ -23,102 +11,57 @@ export type Errors = {
     [selector: string]: string;
 };
 
-export type SavedForms = {
-    [selector: string]: FormObject;
-};
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type ReturnedDictType = any;
+// New implementation
 
-export type WidgetVariantType = {
-    name: string;
-    widget: string;
-    data: ReturnedDictType;
-};
+export type VariableValue =
+    | {
+          [x: string]: VariableValue;
+      }
+    | string
+    | boolean
+    | number
+    | null
+    | undefined
+    | Array<VariableValue>;
 
-export type PassedFormProps<WidgetData = ReturnedDictType> = {
-    f: ParserField;
-    nodes: ParserField[];
-    formObject: FormObject;
-    onChange: (formObject: FormObject) => void;
-    changeWidget: (widgetData: WidgetSavedData | undefined, path: string) => void;
-    required?: boolean;
-    runQuery: (q: string) => Promise<ReturnedDictType>;
-    widgetComponents: WidgetType[];
-    widgetVariants?: WidgetVariantType[];
-    currentPath: string;
-    presetValues?: Record<string, any>;
-    widgets?: SavedWidgets;
-    widgetData?: WidgetData;
-    errors?: Errors;
-    children?: React.ReactNode;
-    components: {
-        ArrayField: FieldComponent;
-        ObjectField: FieldComponent;
-        BooleanField: FieldComponent;
-        UniversalField: FieldComponent;
-        NumberField: FieldComponent;
-        EnumField: FieldComponent;
-        NullField: FieldComponent;
-        FormLabel: FormLabelProps;
-        FormField: FieldComponent;
-    };
+export type VarValues = {
+    [variableName: string]: VariableValue;
 };
-export type FormFile = {
-    widgets?: SavedWidgets;
-    forms?: SavedForms;
+export type VarFormFile = {
+    values: VarValues;
+    vars: VariableDefinitionWithoutLoc[];
 };
 
-export type FormBuilderProps = Omit<
-    PassedFormProps,
-    'formObject' | 'onChange' | 'f' | 'currentPath' | 'changeWidget' | 'widgets' | 'nodes'
-> & {
-    formFile: FormFile;
+export type VarFormProps = {
+    file: VarFormFile;
+    onChange: (file: VarFormFile) => void;
     schema: string;
-    onChange: (o: FormFile, query: string) => void;
+    shared: Omit<SharedProps, 'nodes'>;
 };
 
-export type FormDisplayerProps = Omit<
-    PassedFormProps,
-    'formObject' | 'onChange' | 'f' | 'currentPath' | 'changeWidget' | 'widgets' | 'nodes'
-> & {
-    formFile: FormFile;
-    schema: string;
-    onChange: (o: FormFile, query: string) => void;
-};
-
-export type FormLibraryProps = Omit<FormDisplayerProps, 'required' | 'components'>;
-
-export type CastToWidgetSettingsPassedForm<WidgetData = ReturnedDictType> = Partial<
-    PassedFormProps<Partial<WidgetData>>
-> & {
-    widgetSettingsChange: (data: WidgetData) => void;
-};
-
-export type WidgetProps<Props> = {
-    Component: React.FC<PassedFormProps<Props>>;
-    Settings?: React.FC<CastToWidgetSettingsPassedForm<Props>> | undefined;
-    Description?: React.FC;
-    requirements: (props: PassedFormProps) => boolean;
-    displayName?: string;
-    name: string;
+type SharedProps = {
+    nodes: ParserField[];
+    components: {
+        ArrayField: NewFieldComponent;
+        ObjectField: NewFieldComponent;
+        BooleanField: NewFieldComponent;
+        UniversalField: NewFieldComponent;
+        NumberField: NewFieldComponent;
+        EnumField: NewFieldComponent;
+        NullField: NewFieldComponent;
+        FormLabel: NewFormLabelProps;
+        FormField: NewFieldComponent;
+    };
 };
 
-export type WidgetType = WidgetProps<ReturnedDictType>;
-
-export type FormValue =
-    | { value: FormValue }
-    | {
-          [x: string]: FormValue;
-      }
-    | string
-    | boolean
-    | number
-    | null
-    | undefined
-    | FormObject
-    | Array<FormValue>;
-
-export type FormObject = {
-    value?: FormValue;
+export type NewFieldProps = {
     node: ParserField;
+    value: VariableValue;
+    shared: SharedProps;
+    mutate: (value: VariableValue) => void;
+    children?: React.ReactNode;
+    required?: boolean;
 };
+export type NewFieldComponent = React.FC<NewFieldProps>;
+
+export type NewFormLabelProps = React.FC<NewFieldProps>;

package/src/render/fields.tsx

@@ -0,0 +1,58 @@
+import { NewFieldProps } from '@/models';
+import { getTypeName, Options, ScalarTypes, TypeDefinition, TypeSystemDefinition } from 'graphql-js-tree';
+import React from 'react';
+
+export const Fields: React.FC<NewFieldProps> = (props) => {
+    const {
+        node,
+        shared: {
+            nodes,
+            components: { ArrayField, ObjectField },
+        },
+    } = props;
+    const seekNode = nodes.find((n) => n.name === getTypeName(node.type.fieldType));
+    const isInput = seekNode?.data.type === TypeDefinition.InputObjectTypeDefinition;
+    if (
+        node.data.type === TypeSystemDefinition.FieldDefinition ||
+        node.data.type === TypeDefinition.InputObjectTypeDefinition
+    ) {
+        return <ObjectField {...props} />;
+    }
+    if (node.type.fieldType.type === Options.array) {
+        return <ArrayField {...props} />;
+    }
+    if (isInput) {
+        return <ObjectField {...props} node={seekNode} />;
+    }
+    return <ScalarField {...props} />;
+};
+
+const ScalarField: React.FC<NewFieldProps> = (props) => {
+    const {
+        node,
+        shared: {
+            nodes,
+            components: { BooleanField, NumberField, EnumField, UniversalField },
+        },
+    } = props;
+    const typeName = getTypeName(node.type.fieldType);
+    const seekNode = nodes.find((n) => n.name === getTypeName(node.type.fieldType));
+    if (
+        typeName === ScalarTypes.String ||
+        typeName === ScalarTypes.ID ||
+        seekNode?.data.type === TypeDefinition.ScalarTypeDefinition
+    ) {
+        return <UniversalField {...props} />;
+    }
+
+    if (typeName === ScalarTypes.Float || typeName === ScalarTypes.Int) {
+        return <NumberField {...props} />;
+    }
+    if (typeName === ScalarTypes.Boolean) {
+        return <BooleanField {...props} />;
+    }
+    if (seekNode?.data.type === TypeDefinition.EnumTypeDefinition) {
+        return <EnumField {...props} />;
+    }
+    return <></>;
+};

package/src/render/index.tsx

@@ -0,0 +1,65 @@
+import { NewFieldProps, VarFormProps } from '@/models';
+import { Fields } from '@/render/fields';
+import { Parser, ScalarTypes, generateNodeId, decompileType } from 'graphql-js-tree';
+import React from 'react';
+
+export const Render: React.FC<NewFieldProps> = (props) => {
+    const {
+        shared: {
+            components: { FormLabel, FormField },
+        },
+    } = props;
+    return (
+        <FormField {...props}>
+            <FormLabel {...props} />
+            <Fields {...props} />
+        </FormField>
+    );
+};
+
+export const VariableForm: React.FC<VarFormProps> = (props) => {
+    const {
+        file: { values, vars },
+        onChange,
+        schema,
+        shared,
+    } = props;
+    const { nodes } = Parser.parseAddExtensions(schema);
+    return (
+        <>
+            {vars.map((v) => {
+                const value = values[v.name];
+                const node = nodes.find((n) => n.name === v.type) || {
+                    name: v.name,
+                    args: [],
+                    data: {
+                        type: v.type as ScalarTypes,
+                    },
+                    directives: [],
+                    id: generateNodeId(v.name, v.type as ScalarTypes, []),
+                    interfaces: [],
+                    type: {
+                        fieldType: decompileType(v.type),
+                    },
+                };
+                return (
+                    <Render
+                        node={node}
+                        shared={{
+                            ...shared,
+                            nodes,
+                        }}
+                        mutate={(val) =>
+                            onChange({
+                                values: { ...values, [v.name]: val },
+                                vars,
+                            })
+                        }
+                        value={value}
+                        key={v.name}
+                    />
+                );
+            })}
+        </>
+    );
+};

package/tsconfig.json

@@ -16,5 +16,6 @@
         "skipLibCheck": true /* Skip type checking of declaration files. */,
         "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
         "composite": true
-    }
-}
+    },
+    "include": ["src/**/*"]
+}

package/lib/BuiltInFields/InjectedValue.d.ts

@@ -1,5 +0,0 @@
-import { PassedFormProps } from "../models";
-import React from 'react';
-export declare const InjectedValue: React.FC<PassedFormProps<{
-    value: any;
-}>>;