graphql-form 0.0.4 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/lib/FormBuilder.js +8 -4
  2. package/lib/FormBuilder.js.map +1 -1
  3. package/lib/FormDisplayer.js +6 -3
  4. package/lib/FormDisplayer.js.map +1 -1
  5. package/lib/createWidget.d.ts +6 -4
  6. package/lib/createWidget.js +2 -1
  7. package/lib/createWidget.js.map +1 -1
  8. package/lib/models.d.ts +8 -8
  9. package/package.json +1 -1
  10. package/src/FormBuilder.tsx +17 -9
  11. package/src/FormDisplayer.tsx +7 -3
  12. package/src/createWidget.tsx +4 -0
  13. package/src/models.ts +8 -8
package/lib/FormBuilder.js CHANGED
@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
26
26
  };
27
27
  Object.defineProperty(exports, "__esModule", { value: true });
28
28
  exports.FormBuilder = void 0;
29
+ var FormToCode_1 = require("./FormToCode");
29
30
  var renderer_1 = require("./renderer");
30
31
  var graphql_js_tree_1 = require("graphql-js-tree");
31
32
  var react_1 = __importDefault(require("react"));
@@ -38,12 +39,15 @@ var FormBuilder = function (_a) {
38
39
  return !!((_b = v.node.args) === null || _b === void 0 ? void 0 : _b.length) && v.node.data.type === graphql_js_tree_1.TypeSystemDefinition.FieldDefinition;
39
40
  }));
40
41
  return (react_1.default.createElement(react_1.default.Fragment, null, Object.keys(formFields).map(function (key) {
41
- return (react_1.default.createElement(renderer_1.Renderer, __assign({}, props, { changeWidget: function (widgetData, path) {
42
+ return (react_1.default.createElement(renderer_1.Renderer, __assign({}, props, { key: key, changeWidget: function (widgetData, path) {
42
43
  var _a;
43
- onChange(__assign(__assign({}, formFile), { widgets: __assign(__assign({}, widgets), (_a = {}, _a[path] = widgetData, _a)) }));
44
- }, widgets: widgets, currentPath: '', formObject: formFields[key], onChange: function (changedForm) {
44
+ var query = (0, FormToCode_1.formToGql)({ fields: forms, nodes: props.nodes });
45
+ onChange(__assign(__assign({}, formFile), { widgets: __assign(__assign({}, widgets), (_a = {}, _a[path] = widgetData, _a)) }), query);
46
+ }, widgets: widgets, currentPath: key, formObject: formFields[key], onChange: function (changedForm) {
45
47
  var _a;
46
- onChange(__assign(__assign({}, formFile), { forms: __assign(__assign({}, forms), (_a = {}, _a[key] = changedForm, _a)) }));
48
+ var updatedFile = __assign(__assign({}, formFile), { forms: __assign(__assign({}, forms), (_a = {}, _a[key] = changedForm, _a)) });
49
+ var query = (0, FormToCode_1.formToGql)({ fields: updatedFile.forms, nodes: props.nodes });
50
+ onChange(updatedFile, query);
47
51
  }, f: formFields[key].node })));
48
52
  })));
49
53
  };
package/lib/FormBuilder.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FormBuilder.js","sourceRoot":"","sources":["../src/FormBuilder.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,uCAAsC;AACtC,mDAAuD;AACvD,gDAA0B;AAEnB,IAAM,WAAW,GAA+B,UAAC,EAAgC;IAA9B,IAAA,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAK,KAAK,cAA9B,wBAAgC,CAAF;IAC1E,IAAA,KAA6B,QAAQ,QAAzB,EAAZ,OAAO,mBAAG,EAAE,KAAA,EAAE,KAAe,QAAQ,MAAb,EAAV,KAAK,mBAAG,EAAE,KAAA,CAAc;IAC9C,IAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CACjC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CACxB,UAAC,EAAK;;YAAF,CAAC,QAAA;QAAM,OAAA,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAA,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,sCAAoB,CAAC,eAAe,CAAA;KAAA,CAChG,CACJ,CAAC;IACF,OAAO,CACH,8DACK,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,UAAC,GAAG;QAC7B,OAAO,CACH,8BAAC,mBAAQ,eACD,KAAK,IACT,YAAY,EAAE,UAAC,UAAU,EAAE,IAAI;;gBAC3B,QAAQ,uBACD,QAAQ,KACX,OAAO,wBACA,OAAO,gBACT,IAAI,IAAG,UAAU,UAExB,CAAC;YACP,CAAC,EACD,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,EAAE,EACf,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,EAC3B,QAAQ,EAAE,UAAC,WAAuB;;gBAC9B,QAAQ,uBACD,QAAQ,KACX,KAAK,wBACE,KAAK,gBACP,GAAG,IAAG,WAAW,UAExB,CAAC;YACP,CAAC,EACD,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,IACzB,CACL,CAAC;IACN,CAAC,CAAC,CACH,CACN,CAAC;AACN,CAAC,CAAC;AAxCW,QAAA,WAAW,eAwCtB"}
1
+ {"version":3,"file":"FormBuilder.js","sourceRoot":"","sources":["../src/FormBuilder.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAAyC;AAEzC,uCAAsC;AACtC,mDAAuD;AACvD,gDAA0B;AAEnB,IAAM,WAAW,GAA+B,UAAC,EAAgC;IAA9B,IAAA,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAK,KAAK,cAA9B,wBAAgC,CAAF;IAC1E,IAAA,KAA6B,QAAQ,QAAzB,EAAZ,OAAO,mBAAG,EAAE,KAAA,EAAE,KAAe,QAAQ,MAAb,EAAV,KAAK,mBAAG,EAAE,KAAA,CAAc;IAC9C,IAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CACjC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CACxB,UAAC,EAAK;;YAAF,CAAC,QAAA;QAAM,OAAA,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAA,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,sCAAoB,CAAC,eAAe,CAAA;KAAA,CAChG,CACJ,CAAC;IACF,OAAO,CACH,8DACK,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,UAAC,GAAG;QAC7B,OAAO,CACH,8BAAC,mBAAQ,eACD,KAAK,IACT,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,UAAC,UAAU,EAAE,IAAI;;gBAC3B,IAAM,KAAK,GAAG,IAAA,sBAAS,EAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;gBAC/D,QAAQ,uBAEG,QAAQ,KACX,OAAO,wBACA,OAAO,gBACT,IAAI,IAAG,UAAU,WAG1B,KAAK,CACR,CAAC;YACN,CAAC,EACD,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,GAAG,EAChB,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,EAC3B,QAAQ,EAAE,UAAC,WAAuB;;gBAC9B,IAAM,WAAW,yBACV,QAAQ,KACX,KAAK,wBACE,KAAK,gBACP,GAAG,IAAG,WAAW,SAEzB,CAAC;gBACF,IAAM,KAAK,GAAG,IAAA,sBAAS,EAAC,EAAE,MAAM,EAAE,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;gBAC3E,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;YACjC,CAAC,EACD,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,IACzB,CACL,CAAC;IACN,CAAC,CAAC,CACH,CACN,CAAC;AACN,CAAC,CAAC;AA/CW,QAAA,WAAW,eA+CtB"}
package/lib/FormDisplayer.js CHANGED
@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
26
26
  };
27
27
  Object.defineProperty(exports, "__esModule", { value: true });
28
28
  exports.FormDisplayer = void 0;
29
+ var FormToCode_1 = require("./FormToCode");
29
30
  var renderer_1 = require("./renderer");
30
31
  var graphql_js_tree_1 = require("graphql-js-tree");
31
32
  var react_1 = __importDefault(require("react"));
@@ -38,11 +39,13 @@ var FormDisplayer = function (_a) {
38
39
  return !!((_b = v.node.args) === null || _b === void 0 ? void 0 : _b.length) && v.node.data.type === graphql_js_tree_1.TypeSystemDefinition.FieldDefinition;
39
40
  }));
40
41
  return (react_1.default.createElement(react_1.default.Fragment, null, Object.keys(formFields).map(function (key) {
41
- return (react_1.default.createElement(renderer_1.Renderer, __assign({}, props, { widgets: widgets, changeWidget: function () {
42
+ return (react_1.default.createElement(renderer_1.Renderer, __assign({}, props, { key: key, widgets: widgets, changeWidget: function () {
42
43
  return;
43
- }, currentPath: '', formObject: formFields[key], onChange: function (changedForm) {
44
+ }, currentPath: key, formObject: formFields[key], onChange: function (changedForm) {
44
45
  var _a;
45
- onChange(__assign(__assign({}, formFile), { forms: __assign(__assign({}, forms), (_a = {}, _a[key] = changedForm, _a)) }));
46
+ var updatedFile = __assign(__assign({}, formFile), { forms: __assign(__assign({}, forms), (_a = {}, _a[key] = changedForm, _a)) });
47
+ var query = (0, FormToCode_1.formToGql)({ fields: updatedFile.forms, nodes: props.nodes });
48
+ onChange(updatedFile, query);
46
49
  }, f: formFields[key].node })));
47
50
  })));
48
51
  };
package/lib/FormDisplayer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FormDisplayer.js","sourceRoot":"","sources":["../src/FormDisplayer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,uCAAsC;AACtC,mDAAuD;AACvD,gDAA0B;AAEnB,IAAM,aAAa,GAAiC,UAAC,EAAgC;IAA9B,IAAA,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAK,KAAK,cAA9B,wBAAgC,CAAF;IAC9E,IAAA,KAA6B,QAAQ,QAAzB,EAAZ,OAAO,mBAAG,EAAE,KAAA,EAAE,KAAe,QAAQ,MAAb,EAAV,KAAK,mBAAG,EAAE,KAAA,CAAc;IAC9C,IAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CACjC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CACxB,UAAC,EAAK;;YAAF,CAAC,QAAA;QAAM,OAAA,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAA,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,sCAAoB,CAAC,eAAe,CAAA;KAAA,CAChG,CACJ,CAAC;IACF,OAAO,CACH,8DACK,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,UAAC,GAAG;QAC7B,OAAO,CACH,8BAAC,mBAAQ,eACD,KAAK,IACT,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE;gBACV,OAAO;YACX,CAAC,EACD,WAAW,EAAE,EAAE,EACf,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,EAC3B,QAAQ,EAAE,UAAC,WAAuB;;gBAC9B,QAAQ,uBACD,QAAQ,KACX,KAAK,wBACE,KAAK,gBACP,GAAG,IAAG,WAAW,UAExB,CAAC;YACP,CAAC,EACD,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,IACzB,CACL,CAAC;IACN,CAAC,CAAC,CACH,CACN,CAAC;AACN,CAAC,CAAC;AAlCW,QAAA,aAAa,iBAkCxB"}
1
+ {"version":3,"file":"FormDisplayer.js","sourceRoot":"","sources":["../src/FormDisplayer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAAyC;AAEzC,uCAAsC;AACtC,mDAAuD;AACvD,gDAA0B;AAEnB,IAAM,aAAa,GAAiC,UAAC,EAAgC;IAA9B,IAAA,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAK,KAAK,cAA9B,wBAAgC,CAAF;IAC9E,IAAA,KAA6B,QAAQ,QAAzB,EAAZ,OAAO,mBAAG,EAAE,KAAA,EAAE,KAAe,QAAQ,MAAb,EAAV,KAAK,mBAAG,EAAE,KAAA,CAAc;IAC9C,IAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CACjC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CACxB,UAAC,EAAK;;YAAF,CAAC,QAAA;QAAM,OAAA,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAA,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,sCAAoB,CAAC,eAAe,CAAA;KAAA,CAChG,CACJ,CAAC;IACF,OAAO,CACH,8DACK,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,UAAC,GAAG;QAC7B,OAAO,CACH,8BAAC,mBAAQ,eACD,KAAK,IACT,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE;gBACV,OAAO;YACX,CAAC,EACD,WAAW,EAAE,GAAG,EAChB,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,EAC3B,QAAQ,EAAE,UAAC,WAAuB;;gBAC9B,IAAM,WAAW,yBACV,QAAQ,KACX,KAAK,wBACE,KAAK,gBACP,GAAG,IAAG,WAAW,SAEzB,CAAC;gBACF,IAAM,KAAK,GAAG,IAAA,sBAAS,EAAC,EAAE,MAAM,EAAE,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;gBAC3E,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;YACjC,CAAC,EACD,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,IACzB,CACL,CAAC;IACN,CAAC,CAAC,CACH,CACN,CAAC;AACN,CAAC,CAAC;AArCW,QAAA,aAAa,iBAqCxB"}
package/lib/createWidget.d.ts CHANGED
@@ -1,13 +1,15 @@
1
- /// <reference types="react" />
2
1
  import { PassedFormProps, CastToWidgetSettingsPassedForm } from "./models";
3
- export declare function createWidget<Props>({ name, Component, Settings, requirements, }: {
2
+ import React from 'react';
3
+ export declare function createWidget<Props>({ name, Component, Settings, Description, requirements, }: {
4
4
  name: string;
5
5
  Component: React.FC<PassedFormProps<Props>>;
6
6
  Settings?: React.FC<CastToWidgetSettingsPassedForm<Props>>;
7
+ Description?: React.FC;
7
8
  requirements: (props: PassedFormProps) => boolean;
8
9
  }): {
9
- Component: import("react").FC<PassedFormProps<Props>>;
10
- Settings: import("react").FC<CastToWidgetSettingsPassedForm<Props>> | undefined;
10
+ Component: React.FC<PassedFormProps<Props>>;
11
+ Settings: React.FC<CastToWidgetSettingsPassedForm<Props>> | undefined;
12
+ Description: React.FC<{}> | undefined;
11
13
  requirements: (props: PassedFormProps) => boolean;
12
14
  props: Props;
13
15
  name: string;
package/lib/createWidget.js CHANGED
@@ -2,10 +2,11 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.createWidget = void 0;
4
4
  function createWidget(_a) {
5
- var name = _a.name, Component = _a.Component, Settings = _a.Settings, requirements = _a.requirements;
5
+ var name = _a.name, Component = _a.Component, Settings = _a.Settings, Description = _a.Description, requirements = _a.requirements;
6
6
  return {
7
7
  Component: Component,
8
8
  Settings: Settings,
9
+ Description: Description,
9
10
  requirements: requirements,
10
11
  props: {},
11
12
  name: name,
package/lib/createWidget.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"createWidget.js","sourceRoot":"","sources":["../src/createWidget.tsx"],"names":[],"mappings":";;;AAEA,SAAgB,YAAY,CAAQ,EAUnC;QATG,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,YAAY,kBAAA;IAOZ,OAAO;QACH,SAAS,WAAA;QACT,QAAQ,UAAA;QACR,YAAY,cAAA;QACZ,KAAK,EAAE,EAAW;QAClB,IAAI,MAAA;KACP,CAAC;AACN,CAAC;AAlBD,oCAkBC"}
1
+ {"version":3,"file":"createWidget.js","sourceRoot":"","sources":["../src/createWidget.tsx"],"names":[],"mappings":";;;AAGA,SAAgB,YAAY,CAAQ,EAYnC;QAXG,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,YAAY,kBAAA;IAQZ,OAAO;QACH,SAAS,WAAA;QACT,QAAQ,UAAA;QACR,WAAW,aAAA;QACX,YAAY,cAAA;QACZ,KAAK,EAAE,EAAW;QAClB,IAAI,MAAA;KACP,CAAC;AACN,CAAC;AArBD,oCAqBC"}
package/lib/models.d.ts CHANGED
@@ -7,7 +7,7 @@ export declare type FormLabelProps = React.FC<PassedFormProps & {
7
7
  }>;
8
8
  export declare type WidgetSavedData = {
9
9
  widget: string;
10
- [x: string]: any;
10
+ [x: string]: unknown;
11
11
  };
12
12
  export declare type SavedWidgets = {
13
13
  [selector: string]: WidgetSavedData | undefined;
@@ -15,14 +15,14 @@ export declare type SavedWidgets = {
15
15
  export declare type SavedForms = {
16
16
  [selector: string]: FormObject;
17
17
  };
18
- export declare type PassedFormProps<WidgetData = any> = {
18
+ export declare type PassedFormProps<WidgetData = unknown> = {
19
19
  f: ParserField;
20
20
  nodes: ParserField[];
21
21
  formObject: FormObject;
22
22
  onChange: (formObject: FormObject) => void;
23
23
  changeWidget: (widgetData: WidgetSavedData | undefined, path: string) => void;
24
24
  required?: boolean;
25
- runQuery: (q: string) => Promise<any>;
25
+ runQuery: (q: string) => Promise<unknown>;
26
26
  widgetComponents: WidgetType[];
27
27
  currentPath: string;
28
28
  widgets?: SavedWidgets;
@@ -45,21 +45,21 @@ export declare type FormFile = {
45
45
  };
46
46
  export declare type FormBuilderProps = Omit<PassedFormProps, 'formObject' | 'onChange' | 'f' | 'currentPath' | 'changeWidget' | 'widgets'> & {
47
47
  formFile: FormFile;
48
- onChange: (o: FormFile) => void;
48
+ onChange: (o: FormFile, query: string) => void;
49
49
  };
50
50
  export declare type FormDisplayerProps = Omit<PassedFormProps, 'formObject' | 'onChange' | 'f' | 'currentPath' | 'changeWidget' | 'widgets'> & {
51
51
  formFile: FormFile;
52
- onChange: (o: FormFile) => void;
52
+ onChange: (o: FormFile, query: string) => void;
53
53
  };
54
54
  export declare type FormLibraryProps = Omit<FormDisplayerProps, 'required' | 'components'>;
55
55
  export declare type CastToWidgetSettingsPassedForm<WidgetData> = PassedFormProps<Partial<WidgetData>> & {
56
- close: () => void;
56
+ widgetSettingsChange: (data: WidgetData) => void;
57
57
  };
58
58
  export declare type WidgetType = {
59
59
  Component: React.FC<PassedFormProps>;
60
- Settings: React.FC<CastToWidgetSettingsPassedForm<any>> | undefined;
60
+ Settings: React.FC<CastToWidgetSettingsPassedForm<unknown>> | undefined;
61
61
  requirements: (props: PassedFormProps) => boolean;
62
- props?: Record<string, any>;
62
+ props?: Record<string, unknown>;
63
63
  name: string;
64
64
  };
65
65
  export declare type FormValue = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "graphql-form",
3
- "version": "0.0.4",
3
+ "version": "0.0.7",
4
4
  "description": "Easy form creation with GraphQL Editor and React",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
package/src/FormBuilder.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ import { formToGql } from '@/FormToCode';
1
2
  import { FormBuilderProps, FormObject } from '@/models';
2
3
  import { Renderer } from '@/renderer';
3
4
  import { TypeSystemDefinition } from 'graphql-js-tree';
@@ -16,26 +17,33 @@ export const FormBuilder: React.FC<FormBuilderProps> = ({ formFile, onChange, ..
16
17
  return (
17
18
  <Renderer
18
19
  {...props}
20
+ key={key}
19
21
  changeWidget={(widgetData, path) => {
20
- onChange({
21
- ...formFile,
22
- widgets: {
23
- ...widgets,
24
- [path]: widgetData,
22
+ const query = formToGql({ fields: forms, nodes: props.nodes });
23
+ onChange(
24
+ {
25
+ ...formFile,
26
+ widgets: {
27
+ ...widgets,
28
+ [path]: widgetData,
29
+ },
25
30
  },
26
- });
31
+ query,
32
+ );
27
33
  }}
28
34
  widgets={widgets}
29
- currentPath={''}
35
+ currentPath={key}
30
36
  formObject={formFields[key]}
31
37
  onChange={(changedForm: FormObject) => {
32
- onChange({
38
+ const updatedFile = {
33
39
  ...formFile,
34
40
  forms: {
35
41
  ...forms,
36
42
  [key]: changedForm,
37
43
  },
38
- });
44
+ };
45
+ const query = formToGql({ fields: updatedFile.forms, nodes: props.nodes });
46
+ onChange(updatedFile, query);
39
47
  }}
40
48
  f={formFields[key].node}
41
49
  />
package/src/FormDisplayer.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ import { formToGql } from '@/FormToCode';
1
2
  import { FormDisplayerProps, FormObject } from '@/models';
2
3
  import { Renderer } from '@/renderer';
3
4
  import { TypeSystemDefinition } from 'graphql-js-tree';
@@ -16,20 +17,23 @@ export const FormDisplayer: React.FC<FormDisplayerProps> = ({ formFile, onChange
16
17
  return (
17
18
  <Renderer
18
19
  {...props}
20
+ key={key}
19
21
  widgets={widgets}
20
22
  changeWidget={() => {
21
23
  return;
22
24
  }}
23
- currentPath={''}
25
+ currentPath={key}
24
26
  formObject={formFields[key]}
25
27
  onChange={(changedForm: FormObject) => {
26
- onChange({
28
+ const updatedFile = {
27
29
  ...formFile,
28
30
  forms: {
29
31
  ...forms,
30
32
  [key]: changedForm,
31
33
  },
32
- });
34
+ };
35
+ const query = formToGql({ fields: updatedFile.forms, nodes: props.nodes });
36
+ onChange(updatedFile, query);
33
37
  }}
34
38
  f={formFields[key].node}
35
39
  />
package/src/createWidget.tsx CHANGED
@@ -1,19 +1,23 @@
1
1
  import { PassedFormProps, CastToWidgetSettingsPassedForm } from '@/models';
2
+ import React from 'react';
2
3
 
3
4
  export function createWidget<Props>({
4
5
  name,
5
6
  Component,
6
7
  Settings,
8
+ Description,
7
9
  requirements,
8
10
  }: {
9
11
  name: string;
10
12
  Component: React.FC<PassedFormProps<Props>>;
11
13
  Settings?: React.FC<CastToWidgetSettingsPassedForm<Props>>;
14
+ Description?: React.FC;
12
15
  requirements: (props: PassedFormProps) => boolean;
13
16
  }) {
14
17
  return {
15
18
  Component,
16
19
  Settings,
20
+ Description,
17
21
  requirements,
18
22
  props: {} as Props,
19
23
  name,
package/src/models.ts CHANGED
@@ -7,7 +7,7 @@ export type FormLabelProps = React.FC<PassedFormProps & { open?: boolean; setOpe
7
7
 
8
8
  export type WidgetSavedData = {
9
9
  widget: string;
10
- [x: string]: any;
10
+ [x: string]: unknown;
11
11
  };
12
12
 
13
13
  export type SavedWidgets = {
@@ -17,14 +17,14 @@ export type SavedForms = {
17
17
  [selector: string]: FormObject;
18
18
  };
19
19
 
20
- export type PassedFormProps<WidgetData = any> = {
20
+ export type PassedFormProps<WidgetData = unknown> = {
21
21
  f: ParserField;
22
22
  nodes: ParserField[];
23
23
  formObject: FormObject;
24
24
  onChange: (formObject: FormObject) => void;
25
25
  changeWidget: (widgetData: WidgetSavedData | undefined, path: string) => void;
26
26
  required?: boolean;
27
- runQuery: (q: string) => Promise<any>;
27
+ runQuery: (q: string) => Promise<unknown>;
28
28
  widgetComponents: WidgetType[];
29
29
  currentPath: string;
30
30
  widgets?: SavedWidgets;
@@ -51,7 +51,7 @@ export type FormBuilderProps = Omit<
51
51
  'formObject' | 'onChange' | 'f' | 'currentPath' | 'changeWidget' | 'widgets'
52
52
  > & {
53
53
  formFile: FormFile;
54
- onChange: (o: FormFile) => void;
54
+ onChange: (o: FormFile, query: string) => void;
55
55
  };
56
56
 
57
57
  export type FormDisplayerProps = Omit<
@@ -59,20 +59,20 @@ export type FormDisplayerProps = Omit<
59
59
  'formObject' | 'onChange' | 'f' | 'currentPath' | 'changeWidget' | 'widgets'
60
60
  > & {
61
61
  formFile: FormFile;
62
- onChange: (o: FormFile) => void;
62
+ onChange: (o: FormFile, query: string) => void;
63
63
  };
64
64
 
65
65
  export type FormLibraryProps = Omit<FormDisplayerProps, 'required' | 'components'>;
66
66
 
67
67
  export type CastToWidgetSettingsPassedForm<WidgetData> = PassedFormProps<Partial<WidgetData>> & {
68
- close: () => void;
68
+ widgetSettingsChange: (data: WidgetData) => void;
69
69
  };
70
70
 
71
71
  export type WidgetType = {
72
72
  Component: React.FC<PassedFormProps>;
73
- Settings: React.FC<CastToWidgetSettingsPassedForm<any>> | undefined;
73
+ Settings: React.FC<CastToWidgetSettingsPassedForm<unknown>> | undefined;
74
74
  requirements: (props: PassedFormProps) => boolean;
75
- props?: Record<string, any>;
75
+ props?: Record<string, unknown>;
76
76
  name: string;
77
77
  };
78
78