feat(demo): custom components (#276)

* feat(demo): custom components * refactor(demo): move contact-no-mson * refactor(custom-component): rename to react component * feat(demo): custom component no props * chore(mson): upgrade to v2.7.0 * fix(demo): compile path
redgeoff · Aug 8, 2021 · 7cc4be9 · 7cc4be9
1 parent 023631c
commit 7cc4be9
Show file tree

Hide file tree

Showing 8 changed files with 145 additions and 75 deletions.
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "date-fns": "^2.15.0",
-    "mson": "^2.5.0",
+    "mson": "^2.7.0",
     "prop-types": "^15.6.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
@@ -50,7 +50,7 @@
     "gh-pages": "^3.1.0",
     "jest-environment-jsdom-fourteen": "^1.0.1",
     "lint-staged": "^10.5.3",
-    "mson": "^2.5.0",
+    "mson": "^2.7.0",
     "prettier": "^2.2.1",
     "prop-types": "^15.6.2",
     "react": "^17.0.1",

diff --git a/src/demo/app.js b/src/demo/app.js
@@ -7,10 +7,19 @@ 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,
+  ReactCustomComponent,
 } from './components/custom-component';
+import {
+  CustomComponentJS,
+  ReactCustomComponentJS,
+} from './components/custom-component-js';
+import {
+  CustomComponentNoProps,
+  ReactCustomComponentNoProps,
+} from './components/custom-component-no-props';
 
 // Set the site key when using the ReCAPTCHAField
 globals.set({ reCAPTCHASiteKey: '6LdIbGMUAAAAAJnipR9t-SnWzCbn0ZX2myXBIauh' });
@@ -24,7 +33,11 @@ compiler.registerComponent('FormBuilder', FormBuilder);
 
 // Register any custom components written in JS and not MSON
 compiler.registerComponent('CustomComponent', CustomComponent);
-uiComponents.CustomComponent = CustomComponentUI;
+uiComponents.CustomComponent = ReactCustomComponent;
+compiler.registerComponent('CustomComponentJS', CustomComponentJS);
+uiComponents.CustomComponentJS = ReactCustomComponentJS;
+compiler.registerComponent('CustomComponentNoProps', CustomComponentNoProps);
+uiComponents.CustomComponentNoProps = ReactCustomComponentNoProps;
 
 // Register all the components
 for (let name in components) {

diff --git a/src/demo/components/app.js b/src/demo/components/app.js
@@ -74,13 +74,6 @@ const app = {
           component: 'app.EditContact',
         },
       },
-      {
-        path: '/contact-no-mson',
-        label: 'Contact No MSON',
-        content: {
-          component: 'app.ContactNoMSON',
-        },
-      },
       {
         path: '/grid',
         label: 'Grid',
@@ -124,13 +117,42 @@ 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',
-        },
+        path: '/custom-components',
+        label: 'Custom Components',
+        items: [
+          {
+            path: '/custom-components/mson',
+            label: 'Custom Component',
+            content: {
+              component: 'CustomComponent',
+              name: 'my-custom-component',
+              label: 'My Custom Component',
+            },
+          },
+          {
+            path: '/custom-components/js',
+            label: 'Custom Component JS',
+            content: {
+              component: 'CustomComponentJS',
+              name: 'my-custom-component-js',
+              label: 'My Custom Component JS',
+            },
+          },
+          {
+            path: '/custom-components/no-props',
+            label: 'Custom Component No Props',
+            content: {
+              component: 'CustomComponentNoProps',
+            },
+          },
+          {
+            path: '/custom-components/contact-no-mson',
+            label: 'Contact No MSON',
+            content: {
+              component: 'app.ContactNoMSON',
+            },
+          },
+        ],
       },
     ],
   },

diff --git a/src/demo/components/contact-no-mson.js b/src/demo/components/contact-no-mson.js
@@ -7,8 +7,8 @@ import globals from 'mson/lib/globals';
 // const Form = compiler.getCompiledComponent('Form');
 
 class ContactNoMSON extends Form {
-  _create(props) {
-    super._create(props);
+  create(props) {
+    super.create(props);
 
     this.set({
       fields: [

diff --git a/src/demo/components/custom-component-js.js b/src/demo/components/custom-component-js.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import attach from '../../attach';
+import Typography from '@material-ui/core/Typography';
+
+import UIComponent from 'mson/lib/ui-component';
+import Form from 'mson/lib/form';
+import TextField from 'mson/lib/fields/text-field';
+
+class CustomComponentJS extends UIComponent {
+  // className is needed as JS minification strips the constructor name
+  className = 'CustomComponentJS';
+
+  create(props) {
+    super.create(props);
+
+    this.set({
+      schema: new Form({
+        fields: [
+          new TextField({
+            name: 'name',
+          }),
+          new TextField({
+            name: 'label',
+          }),
+        ],
+      }),
+    });
+  }
+}
+
+let ReactCustomComponentJS = (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
+ReactCustomComponentJS = attach(['name', 'label'])(ReactCustomComponentJS);
+
+export { CustomComponentJS, ReactCustomComponentJS };
diff --git a/src/demo/components/custom-component-no-props.js b/src/demo/components/custom-component-no-props.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import compile from 'mson/lib/compiler/compile';
+
+const CustomComponentNoProps = compile({
+  component: 'UIComponent',
+  name: 'CustomComponentNoProps',
+});
+
+const ReactCustomComponentNoProps = (/* props */) => {
+  const text = 'This text is private to the React component';
+  return (
+    <div>
+      <Typography variant="h5">Text: {text}</Typography>
+    </div>
+  );
+};
+
+export { CustomComponentNoProps, ReactCustomComponentNoProps };
diff --git a/src/demo/components/custom-component.js b/src/demo/components/custom-component.js
@@ -1,55 +1,27 @@
 import React from 'react';
 import attach from '../../attach';
 import Typography from '@material-ui/core/Typography';
-
-import UIComponent from 'mson/lib/ui-component';
-import Form from 'mson/lib/form';
-import TextField from 'mson/lib/fields/text-field';
-
-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',
-          }),
-        ],
-      }),
-    });
-  }
-}
-
-// Or, you can use MSON instead of JS
-//
-// import compiler from 'mson/lib/compiler';
-//
-// const CustomComponent = compiler.compile({
-//   component: 'UIComponent',
-//   name: 'CustomComponent',
-//   schema: {
-//     component: 'Form',
-//     fields: [
-//       {
-//         component: 'TextField',
-//         name: 'name'
-//       },
-//       {
-//         component: 'TextField',
-//         name: 'label'
-//       }
-//     ]
-//   }
-// });
-
-let CustomComponentUI = (props) => {
+import compile from 'mson/lib/compiler/compile';
+
+const CustomComponent = compile({
+  component: 'UIComponent',
+  name: 'CustomComponent',
+  schema: {
+    component: 'Form',
+    fields: [
+      {
+        component: 'TextField',
+        name: 'name',
+      },
+      {
+        component: 'TextField',
+        name: 'label',
+      },
+    ],
+  },
+});
+
+let ReactCustomComponent = (props) => {
   const { name, label } = props;
   return (
     <div>
@@ -60,6 +32,6 @@ let CustomComponentUI = (props) => {
 };
 
 // Bind React props to MSON component props
-CustomComponentUI = attach(['name', 'label'])(CustomComponentUI);
+ReactCustomComponent = attach(['name', 'label'])(ReactCustomComponent);
 
-export { CustomComponent, CustomComponentUI };
+export { CustomComponent, ReactCustomComponent };
diff --git a/yarn.lock b/yarn.lock
@@ -10218,10 +10218,10 @@ ms@^2.0.0, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-mson@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/mson/-/mson-2.5.0.tgz#9db555b97db9904a11f6177667298272c0922653"
-  integrity sha512-9BZTT41FXxh4cPzGkb+HTfaO+nYbRuIkr7KC6X7NGakRZ0EnFF1PR+2LewmPEWCc1B7N2I14hJtXq+jv9qPgZg==
+mson@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/mson/-/mson-2.7.0.tgz#1753cc60970f8eff0f96b806ae9a1adda8f2071c"
+  integrity sha512-sOY+qls0Xe0Xf/Vd/wcCtG9oE2iNHto182zYofcZ3HQ9sAgGbkaVSGEDK92Tw0Ov8svucrA6p1q8Foz5weQl2g==
   dependencies:
     "@babel/runtime" "^7.12.5"
     country-telephone-data "^0.6.3"