From a6738bc93ec8c14837c643b0e1a20bc6690d14f8 Mon Sep 17 00:00:00 2001
From: Geoff Cox <redgeoff@gmail.com>
Date: Sat, 7 Aug 2021 13:52:58 -0700
Subject: [PATCH 1/2] feat(demo): custom component

---
 src/demo/app.js                         |  8 +++++
 src/demo/components/app.js              |  9 ++++++
 src/demo/components/custom-component.js | 42 +++++++++++++++++++++++++
 3 files changed, 59 insertions(+)
 create mode 100644 src/demo/components/custom-component.js

diff --git a/src/demo/app.js b/src/demo/app.js
index 2ec73085..0e7e4909 100644
--- a/src/demo/app.js
+++ b/src/demo/app.js
@@ -7,6 +7,10 @@ import FieldEditorFormUI from '../field-editor-form';
 import FormEditor from 'mson/lib/form/form-editor';
 import FormEditorUI from '../form-editor';
 import FormBuilder from 'mson/lib/form/form-builder';
+import {
+  CustomComponent,
+  CustomComponentUI,
+} from './components/custom-component';
 
 // Set the site key when using the ReCAPTCHAField
 globals.set({ reCAPTCHASiteKey: '6LdIbGMUAAAAAJnipR9t-SnWzCbn0ZX2myXBIauh' });
@@ -18,6 +22,10 @@ compiler.registerComponent('FormEditor', FormEditor);
 uiComponents.FormEditor = FormEditorUI;
 compiler.registerComponent('FormBuilder', FormBuilder);
 
+// Register any custom components written in JS and not MSON
+compiler.registerComponent('CustomComponent', CustomComponent);
+uiComponents.CustomComponent = CustomComponentUI;
+
 // Register all the components
 for (let name in components) {
   let component = components[name];
diff --git a/src/demo/components/app.js b/src/demo/components/app.js
index a9d42e94..426e76c4 100644
--- a/src/demo/components/app.js
+++ b/src/demo/components/app.js
@@ -123,6 +123,15 @@ const app = {
         },
         hidden: true, // Register route, but don't expose it in the menu
       },
+      {
+        path: '/custom-component',
+        label: 'Custom Component',
+        content: {
+          component: 'CustomComponent',
+          name: 'my-custom-component',
+          label: 'My Custom Component',
+        },
+      },
     ],
   },
 };
diff --git a/src/demo/components/custom-component.js b/src/demo/components/custom-component.js
new file mode 100644
index 00000000..7f6912e9
--- /dev/null
+++ b/src/demo/components/custom-component.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import UIComponent from 'mson/lib/ui-component';
+import Form from 'mson/lib/form';
+import TextField from 'mson/lib/fields/text-field';
+import attach from '../../attach';
+import Typography from '@material-ui/core/Typography';
+
+class CustomComponent extends UIComponent {
+  _className = 'CustomComponent';
+
+  _create(props) {
+    super._create(props);
+
+    this.set({
+      schema: new Form({
+        fields: [
+          new TextField({
+            name: 'name',
+          }),
+          new TextField({
+            name: 'label',
+          }),
+        ],
+      }),
+    });
+  }
+}
+
+let CustomComponentUI = (props) => {
+  const { name, label } = props;
+  return (
+    <div>
+      <Typography variant="h3">Name: {name}</Typography>
+      <Typography variant="h4">Label: {label}</Typography>
+    </div>
+  );
+};
+
+// Bind React props to MSON component props
+CustomComponentUI = attach(['name', 'label'])(CustomComponentUI);
+
+export { CustomComponent, CustomComponentUI };

From c44050f2cbb1672f041fe437e6fda360792dc415 Mon Sep 17 00:00:00 2001
From: Geoff Cox <redgeoff@gmail.com>
Date: Sat, 7 Aug 2021 14:03:06 -0700
Subject: [PATCH 2/2] feat(custom-component): functional form

---
 src/demo/components/custom-component.js | 68 ++++++++++++++++++-------
 1 file changed, 49 insertions(+), 19 deletions(-)

diff --git a/src/demo/components/custom-component.js b/src/demo/components/custom-component.js
index 7f6912e9..fc5abff3 100644
--- a/src/demo/components/custom-component.js
+++ b/src/demo/components/custom-component.js
@@ -4,27 +4,57 @@ import Form from 'mson/lib/form';
 import TextField from 'mson/lib/fields/text-field';
 import attach from '../../attach';
 import Typography from '@material-ui/core/Typography';
+// import MSONComponent from 'mson/lib/component/mson-component';
 
-class CustomComponent extends UIComponent {
-  _className = 'CustomComponent';
-
-  _create(props) {
-    super._create(props);
-
-    this.set({
-      schema: new Form({
-        fields: [
-          new TextField({
-            name: 'name',
-          }),
-          new TextField({
-            name: 'label',
-          }),
-        ],
+// class CustomComponent extends UIComponent {
+//   _className = 'CustomComponent';
+
+//   _create(props) {
+//     super._create(props);
+
+//     this.set({
+//       schema: new Form({
+//         fields: [
+//           new TextField({
+//             name: 'name',
+//           }),
+//           new TextField({
+//             name: 'label',
+//           }),
+//         ],
+//       }),
+//     });
+//   }
+// }
+
+// const CustomComponent = new MSONComponent({
+//   name: 'CustomComponent',
+//   schema: new Form({
+//     fields: [
+//       new TextField({
+//         name: 'name',
+//       }),
+//       new TextField({
+//         name: 'label',
+//       }),
+//     ],
+//   })
+// })
+
+const CustomComponent = () => ({
+  component: UIComponent,
+  name: 'CustomComponent',
+  schema: new Form({
+    fields: [
+      new TextField({
+        name: 'name',
+      }),
+      new TextField({
+        name: 'label',
       }),
-    });
-  }
-}
+    ],
+  }),
+});
 
 let CustomComponentUI = (props) => {
   const { name, label } = props;