Use property for component mapping instead of ComponentRegistry

package.json

@@ -1,6 +1,6 @@
 {
   "name": "s-forms-smart-components",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": true,
   "scripts": {
     "dev": "parcel serve ./test/index.html --port 8080",

src/SmartComponents.js

@@ -0,0 +1,48 @@
+import CompositeQuestion from "./components/CompositeQuestion";
+import JsonLdUtils from "jsonld-utils";
+import Constants from "./Constants";
+import QuestionWithAdvanced from "./components/QuestionWithAdvanced";
+import {Constants as SConstants, FormUtils} from "s-forms";
+import WizardStepWithAdvanced from "./components/WizardStepWithAdvanced";
+
+export default class SmartComponents {
+
+  static getComponentMapping() {
+    return [
+      {
+        component: CompositeQuestion,
+        mapRule: q => JsonLdUtils.getJsonAttValue(q, Constants.COMPOSITE_PATTERN)
+      },
+      {
+        component: QuestionWithAdvanced,
+        mapRule: q => {
+          return SmartComponents._hasAdvancedQuestion(q) && !FormUtils.isWizardStep(q);
+        }
+      },
+      {
+        component: WizardStepWithAdvanced,
+        mapRule: q => {
+          return SmartComponents._hasAdvancedQuestion(q) && FormUtils.isWizardStep(q);
+        }
+      }
+    ];
+  }
+
+  static _hasAdvancedQuestion(q) {
+
+    if (!FormUtils.isSection(q) && !FormUtils.isAnswerable(q)) {
+      return false;
+    }
+    let subQuestions = q[SConstants.HAS_SUBQUESTION];
+    if (subQuestions && subQuestions.length) {
+      for (let subQuestion of subQuestions) {
+        if (JsonLdUtils.hasValue(subQuestion, Constants.SHOW_ADVANCED_QUESTION, true)) {
+          return true;
+        }
+      }
+    }
+    return false;
+
+  };
+
+}

src/lib.js

@@ -1,10 +1,13 @@
+import SmartComponents from "./SmartComponents";
 import Constants from "./Constants";
 
 import CompositeQuestion from "./components/CompositeQuestion";
 import QuestionWithAdvanced from "./components/QuestionWithAdvanced";
 import WizardStepWithAdvanced from "./components/WizardStepWithAdvanced";
 
 
+export default SmartComponents;
+
 export {
   Constants,
 

test/TestApp.jsx

@@ -1,48 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import SForms from 's-forms';
-import JsonLdUtils from 'jsonld-utils';
-import {ComponentRegistry, Constants as SConstants, FormUtils} from "s-forms";
-import Constants from "../src/Constants";
-import CompositeQuestion from "../src/components/CompositeQuestion";
-import QuestionWithAdvanced from "../src/components/QuestionWithAdvanced";
-import WizardStepWithAdvanced from "../src/components/WizardStepWithAdvanced";
-
-ComponentRegistry.registerComponent(
-  CompositeQuestion,
-  q => JsonLdUtils.getJsonAttValue(q, Constants.COMPOSITE_PATTERN)
-);
-
-const hasAdvancedQuestion = q => {
-
-  if (!FormUtils.isSection(q) && !FormUtils.isAnswerable(q)) {
-    return false;
-  }
-  let subQuestions = q[SConstants.HAS_SUBQUESTION];
-  if (subQuestions && subQuestions.length) {
-    for (let subQuestion of subQuestions) {
-      if (JsonLdUtils.hasValue(subQuestion, Constants.SHOW_ADVANCED_QUESTION, true)) {
-        return true;
-      }
-    }
-  }
-  return false;
-
-};
-
-ComponentRegistry.registerComponent(QuestionWithAdvanced, q => {
-  return hasAdvancedQuestion(q) && !FormUtils.isWizardStep(q);
-});
-ComponentRegistry.registerComponent(WizardStepWithAdvanced, q => {
-  return hasAdvancedQuestion(q) && FormUtils.isWizardStep(q);
-});
-
+import queryString from 'query-string';
+import SmartComponents from "../src/SmartComponents";
 
 import 's-forms/css/s-forms.min.css';
 import '../src/styles/components.css';
-
 import 'react-datepicker/dist/react-datepicker.css';
-import queryString from 'query-string';
+
+const componentMapping = SmartComponents.getComponentMapping();
 
 const form1 = require('./form1.json'); // form with wizard steps
 const form2 = require('./form2.json'); // form without wizard steps (proudly assembled in Semantic Form Web Editor)
@@ -111,6 +77,7 @@ class TestApp extends React.Component {
                     options={options}
                     fetchTypeAheadValues={this.fetchTypeAheadValues}
                     isFormValid={(isFormValid) => this.setState({isFormValid})}
+                    componentMapRules={componentMapping}
                 />
                 <button
                     disabled={!this.state.isFormValid}