Table updates

src/App.css

@@ -66,17 +66,18 @@
 }
 
 .btn {
-  margin-left: auto;
   font-size: 16px;
   padding: 15px;
   background-color: #FB310A;
   color: white;
   border: none;
   border-radius: 40px;
   cursor: pointer;
+  margin-top: 40px;
+  margin-bottom: 40px;
 }
 
 
 .code {
  width: 100%;
-}
+}

src/DynamicJsonformsV4.tsx

@@ -2,43 +2,36 @@ import React, { useState } from "react";
 import { JsonForms } from "@jsonforms/react";
 import {
   materialRenderers,
-  materialCells
+  materialCells,
 } from "@jsonforms/material-renderers";
 import { MonacoEditorControl } from "@fusebit/monaco-jsonforms";
-import dot from "dot-object";
+import { DynamicControl } from "./customRenderer/customRenderer";
 
 interface Props {
-  title: string;
-  description: string;
   schema: any;
   uischema: any;
-  sourceToTransformation: any;
   onSubmit?: (data: any) => void;
   data?: any;
 }
 
-const DynamicJsonformsV4 = ({
-  title,
-  description,
-  uischema,
-  data,
-  schema,
-  sourceToTransformation,
-  onSubmit
-}: Props) => {
-  const [submitData, setSubmitData] = useState();
+const DynamicJsonformsV4 = ({ uischema, data, schema, onSubmit }: Props) => {
+  const [submitData, setSubmitData] = useState<any>();
 
   return (
     <div>
       {schema && uischema && (
         <>
           <JsonForms
-            data={data}
+            data={submitData || data}
             schema={schema}
             uischema={uischema}
             cells={materialCells}
-            renderers={[...materialRenderers, MonacoEditorControl]}
-            onChange={data => {
+            renderers={[
+              ...materialRenderers,
+              MonacoEditorControl,
+              DynamicControl,
+            ]}
+            onChange={(data) => {
               if ((data?.errors || []).length > 0) {
                 return;
               }
@@ -56,26 +49,6 @@ const DynamicJsonformsV4 = ({
           >
             Create Recipe
           </button>
-          {submitData && (
-            <>
-              <h4>This is the source data</h4>
-              <div style={{ marginBottom: "40px" }}>
-                {JSON.stringify(sourceToTransformation, null, "\t")}
-              </div>
-              <h4>This is the submitData:</h4>
-              <div style={{ marginBottom: "40px" }}>
-                {JSON.stringify(dot.dot(submitData), null, "\t")}
-              </div>
-              <h4>This is the transformed data</h4>
-              <div>
-                {JSON.stringify(
-                  dot.transform(dot.dot(submitData), sourceToTransformation),
-                  null,
-                  "\t"
-                )}
-              </div>
-            </>
-          )}
         </>
       )}
     </div>

src/ExampleDynamic.tsx

@@ -1,45 +1,90 @@
 import React from "react";
+import { useState } from "react";
 import {
   leadJsonSchema,
   customerJsonSchema,
-  sourceToTransformation
+  sourceToTransformation,
 } from "./constants";
 import DynamicJsonformsV4 from "./DynamicJsonformsV4";
-import { generateJsonform } from "./utils/generateJsonform";
 import * as sdk from "./utils/sdk";
+import dot from "dot-object";
+import { MonacoEditor } from "@fusebit/monaco-jsonforms";
 
 const uischema = {
   type: "VerticalLayout",
   elements: [
     {
-      type: "Control",
-      scope: "#/properties/keys"
-    }
-  ]
+      type: "Dynamic",
+      scope: "#/properties/keys",
+    },
+  ],
 };
 
-const { keys, schema } = sdk.createSchema({
-  source: customerJsonSchema,
-  target: leadJsonSchema
-});
-
 const ExampleDynamic = () => {
+  const [recipe, setRecipe] = useState();
+
   const handleSubmit = (data: any) => {
     const recipe = sdk.createRecipe(data);
-    console.log("recipe", recipe);
+    setRecipe(recipe);
   };
 
+  const { data, schema } = sdk.createSchema({
+    source: customerJsonSchema,
+    target: leadJsonSchema,
+    dataToTransform: sourceToTransformation,
+  });
+
   return (
-    <div>
+    <div style={{ paddingBottom: "100px" }}>
       <DynamicJsonformsV4
         onSubmit={handleSubmit}
-        data={{ keys }}
+        data={data}
         uischema={uischema}
-        title="Example"
-        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
         schema={schema}
-        sourceToTransformation={sourceToTransformation}
       />
+      {recipe && (
+        <>
+          <h4>This is the schema</h4>
+          <div style={{ marginBottom: "40px" }}>
+            <MonacoEditor
+              value={JSON.stringify(schema, null, "\t")}
+              onChange={() => {}}
+              language="json"
+            />
+          </div>
+          <h4>This is the source data</h4>
+          <div style={{ marginBottom: "40px" }}>
+            <MonacoEditor
+              value={JSON.stringify(sourceToTransformation, null, "\t")}
+              onChange={() => {}}
+              isExpandable
+              language="json"
+            />
+          </div>
+          <h4>This is the submitData:</h4>
+          <div style={{ marginBottom: "40px" }}>
+            <MonacoEditor
+              value={JSON.stringify(dot.dot(recipe), null, "\t")}
+              onChange={() => {}}
+              isExpandable
+              language="json"
+            />
+          </div>
+          <h4>This is the transformed data</h4>
+          <div>
+            <MonacoEditor
+              value={JSON.stringify(
+                dot.transform(dot.dot(recipe), sourceToTransformation),
+                null,
+                "\t"
+              )}
+              onChange={() => {}}
+              isExpandable
+              language="json"
+            />
+          </div>
+        </>
+      )}
     </div>
   );
 };

src/constants.ts

@@ -1,10 +1,11 @@
-// this schema is read only
+// this schema is the source
 export const customerJsonSchema = {
   type: "object",
   title: "Budgetly Customer",
   properties: {
     Title: {
       type: "string",
+      label: "Budgetly Title",
     },
     First: {
       type: "string",
@@ -15,16 +16,29 @@ export const customerJsonSchema = {
     Organization: {
       type: "string",
     },
+    Nested: {
+      Object: {
+        Is: {
+          properties: {
+            here: {
+              type: "string",
+              label: "Budgetly Nested Property",
+            },
+          },
+        },
+      },
+    },
   },
 };
 
-// this schema gets mapped
+// this schema is the target
 export const leadJsonSchema = {
   type: "object",
   title: "Salesforce Lead",
   properties: {
     Salutation: {
       type: "string",
+      label: "Salesforce Salutation",
     },
     FirstName: {
       type: "string",
@@ -35,71 +49,45 @@ export const leadJsonSchema = {
     Company: {
       type: "string",
     },
-  },
-};
-
-
-const _schema = {
-  type: "object",
-  properties: {
-    keys: {
-      type: "array",
-      items: {
-        type: "object",
+    Nested: {
+      Keys: {
         properties: {
-          source: {
+          oneNestedKey: {
             type: "string",
-            enum: ["first.name", "last.name"]
           },
-          target: {
-            type: "string",
-            enum: ["firstName", "lastName"]
-          }
-        }
-      }
-    }
-  }
-};
-
-
-export const magicFunction = (schema1: any, schema2: any) => {
-  return {
-    type: "object",
-    properties: {
-      keys: {
-        type: "array",
-        items: {
-          type: "object",
-          properties: {
-            left: {
-              type: "string",
-              enum: Object.keys(schema1.properties)
-            },
-            right: {
-              type: "string",
-              enum: Object.keys(schema2.properties)
+          anotherNestedKey: {
+            type: "object",
+            NestedInsideNestedKey: {
+              moreNesting: {
+                properties: {
+                  superNestedFirstKey: {
+                    type: "string",
+                  },
+                  superNestedSecondKey: {
+                    type: "string",
+                    label: "Salesforce Nested Label",
+                  },
+                },
+              },
             },
           },
         },
-      }
-    }
-  }
-}
-
-magicFunction(customerJsonSchema, leadJsonSchema)
-
-
-
-
-
-
-
-
+      },
+    },
+  },
+};
 
 // this is some sample data that will get transformed
 export const sourceToTransformation = {
   Title: "Mr",
   First: "Shehzad",
   Last: "Akbar",
   Organization: "Fusebit",
+  Nested: {
+    Object: {
+      Is: {
+        here: "Nesting Objects Worked!",
+      },
+    },
+  },
 };