refactor: Create component class in main.

.eslintrc

@@ -16,7 +16,6 @@ rules:
   quotes: [1, single]
   space-after-keywords: 2
   space-before-blocks: 2
-  spaced-comment: [2, always]
 
   ## React
   jsx-quotes: [2, prefer-double]

README.md

@@ -43,7 +43,7 @@ This component targets the styling in the Pearson Elements SDK.
 
 ## Usage for Consuming Application
 
-See the demo in /node_modules in the component /demo directory for example usage.
+See the demo directory for example usage.
 
 ### Bundle (Simplest)
 
@@ -152,6 +152,8 @@ Shoot for 100% code coverage.
 
 #### Translations
 
+It is expected that applications will pass in translated text for dynamic content.
+
 For text inherent to the component (e.g. button text or input placeholder), add JSON translations for each supported 
 locale to the translations folder. 
 

__tests__/component-owner.js

@@ -2,7 +2,7 @@
 
 jest.dontMock('../src/js/component-owner.js');
 
-import React, { PropTypes } from 'react';
+import React from 'react';
 import ComponentOwner from '../src/js/component-owner';
 import {IntlProvider} from 'react-intl';
 import {shallow} from 'enzyme';

demo/demo.js

@@ -1,37 +1,24 @@
 'use strict';
 
-import initInstance, {removeInstance} from '../main'; // for direct API usage
+import MyComponent from '../main'; // for direct API usage
 
 function init() {
 
-  // Demo both the use of eventing and direct API
-
+  // Demo eventing API
   document.body.dispatchEvent(new CustomEvent('o.InitMyComponent', {
     detail: {
       elementId: 'demo-target1',
       greeting: 'Hello world!'
     }
   }));
 
-  document.body.dispatchEvent(new CustomEvent('o.InitMyComponent', {
-    detail: {
-      elementId: 'demo-target2',
-      greeting: 'Bonjour le monde!',
-      locale: 'fr-CA'
-    }
-  }));
-
-  initInstance({
-    elementId: 'demo-target3',
+  // Demo direct API
+  new MyComponent({
+    elementId: 'demo-target2',
     greeting: 'Bonjour le monde!',
     locale: 'fr-CA'
   });
 
-  // Remove after some delay
-  setTimeout(function() {
-    removeInstance('demo-target3');
-  }, 3000);
-
 }
 
 window.onload = init;

demo/index.html

@@ -11,8 +11,6 @@ <h2>This demo is styled using the Elements SDK.</h2>
         <div id="demo-target1"></div>
         <br />
         <div id="demo-target2"></div>
-        <br />
-        <div id="demo-target3"></div>
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>

main.js

@@ -1,44 +1,45 @@
+//
+// Change all references to 'MyComponent' in this file to your real component name!
+//
+
 // bundled component styling
 import './main.scss';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ComponentOwner from './src/js/component-owner';
 
-// i18n, set up for French out of the box
+// i18n, set up for French out-of-the-box
 import {addLocaleData, IntlProvider} from 'react-intl';
 import frLocaleData from 'react-intl/locale-data/fr';
 import frJson from './translations/fr.json';
 const translations = {
   'fr-CA' : frJson
 };
-addLocaleData(frLocaleData);
 
-//
-// Change initInstance to initYourComponentName
-//
-export default function initInstance(config) {
+export default class MyComponent {
 
-  const locale = config.locale ? config.locale : 'en';
+  constructor(config) {
 
-  ReactDOM.render(
-    <IntlProvider locale={locale} messages={translations[locale]}>
-      <ComponentOwner data={config} />
-    </IntlProvider>,
-    document.getElementById(config.elementId)
-  );
-}
+    addLocaleData(frLocaleData);
+    this.init(config);
+  }
+
+  init(config) {
+
+    const locale = config.locale ? config.locale : 'en';
+
+    ReactDOM.render(
+      <IntlProvider locale={locale} messages={translations[locale]}>
+        <ComponentOwner data={config}/>
+      </IntlProvider>,
+      document.getElementById(config.elementId)
+    );
+  }
 
-//
-// Change removeInstance to initYourComponentName
-//
-export function removeInstance(elementId) {
-  ReactDOM.unmountComponentAtNode(document.getElementById(elementId))
 }
 
-// Event Listeners for evented interface
 //
-// Change any reference to 'MyComponent' to your real component name!
+// For events, use the Origami naming convention of pre-pending with 'o.'
 //
-document.body.addEventListener('o.InitMyComponent', e => initInstance(e.detail));
-document.body.addEventListener('o.UnmountMyComponent', e => removeInstance(e.detail));
+document.body.addEventListener('o.InitMyComponent', e => new MyComponent(e.detail));

src/js/component-owner.js

@@ -1,12 +1,13 @@
 //
-// Change any reference to 'MyClassName' to your real class name!
+// In React, an owner is the component that sets the props of other components, if desired.
+// See https://facebook.github.io/react/docs/multiple-components.html for composability.
 //
 
 import React, { PropTypes } from 'react';
 import {intlShape, injectIntl, defineMessages} from 'react-intl';
 
 //
-// Default messages are en-US
+// Default messages are 'en'
 //
 const messages = defineMessages({
   buttonText: {
@@ -22,7 +23,7 @@ const messages = defineMessages({
 });
 
 
-class MyClassName extends React.Component {
+class ComponentOwner extends React.Component {
 
   //
   // Modify or add prop types to validate the properties passed to this component!
@@ -42,7 +43,6 @@ class MyClassName extends React.Component {
 
     //
     // FOR DEMO - use state when you need to respond to user input, a server request or the passage of time
-    // See https://facebook.github.io/react/docs/thinking-in-react.html
     //
     this.state = {
       text: ''
@@ -80,4 +80,4 @@ class MyClassName extends React.Component {
 
 }
 
-export default injectIntl(MyClassName); // Inject this.props.intl into the component context
+export default injectIntl(ComponentOwner); // Inject this.props.intl into the component context