Consumes component from demo folder (#712)

* Consumes component from demo folder

* add demo-index as direct dependency

samples/demo-component/demo-app/archetype/config/webpack/webpack.config.dev.js

@@ -5,7 +5,8 @@ const repoPackagesDir = Path.join(__dirname, "../../../../packages");
 module.exports = {
   resolve: {
     alias: {
-      "demo-component": Path.join(repoPackagesDir, "demo-component/src"),
+      "demo-component": Path.join(repoPackagesDir, "demo-component/demo/demo.jsx"),
+      "demo-component-style": Path.join(repoPackagesDir, "demo-component/demo/demo.css"),
       react: Path.dirname(require.resolve("react/package.json")),
       "react-dom": Path.dirname(require.resolve("react-dom/package.json"))
     },

samples/demo-component/demo-app/archetype/config/webpack/webpack.config.js

@@ -6,7 +6,8 @@ const repoPackagesDir = Path.join(__dirname, "../../../../packages");
 module.exports = {
   resolve: {
     alias: {
-      "demo-component": Path.join(repoPackagesDir, "demo-component/src"),
+      "demo-component": Path.join(repoPackagesDir, "demo-component/demo/demo.jsx"),
+      "demo-component-style": Path.join(repoPackagesDir, "demo-component/demo/demo.css"),
       react: Path.dirname(require.resolve("react/package.json")),
       "react-dom": Path.dirname(require.resolve("react-dom/package.json"))
     },

samples/demo-component/demo-app/src/client/app.jsx

@@ -10,6 +10,7 @@ import {createStore} from "redux";
 import {Provider} from "react-redux";
 /*  */
 import "./styles/base.css";
+import "demo-component-style";
 import rootReducer from "./reducers";
 
 // Add the client app start up code to a function as window.webappStart.

samples/demo-component/demo-app/src/client/components/home.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import { IntlProvider } from "react-intl";
 
-import { DemoComponent } from "demo-component";
+import DemoComponent from "demo-component";
 
 const locale = "en";
 

samples/demo-component/packages/demo-component/demo/demo.css

@@ -0,0 +1,3 @@
+@import url("https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.min.css");
+@import url("https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/theme/monokai.min.css");
+@import "../src/styles/demo-component.css";

samples/demo-component/packages/demo-component/demo/demo.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { addLocaleData, IntlProvider } from "react-intl";
+import * as libraryScope from "../src/index";
+
+import Demo from "electrode-demo-index";
+
+const locale = "en";
+const messages = require(`../src/lang/${locale}.json`);
+const localeData = require(`react-intl/locale-data/${locale}`);
+
+addLocaleData(localeData);
+
+const components = [
+  {
+    examples: [
+      {
+        type: "playground",
+        code: require("raw-loader!./examples/demo-component.example"),
+        noRender: true
+      } // any additional examples here
+    ]
+  } // any additional components here
+];
+
+const localScope = { IntlProvider, messages, locale };
+const demo = () => <Demo scope={localScope} libraryScope={libraryScope} components={components} />;
+
+export default demo;

samples/demo-component/packages/demo-component/demo/examples/demo-component.example

@@ -0,0 +1 @@
+<DemoComponent />

samples/demo-component/packages/demo-component/package.json

@@ -16,7 +16,8 @@
   },
   "homepage": "https://github.com/electrode-io/electrode",
   "dependencies": {
-    "material-ui": "^0.20.0"
+    "material-ui": "^0.20.0",
+    "electrode-demo-index": "^2.0.0"
   },
   "devDependencies": {
     "electrode-archetype-react-component": "../../../../packages/electrode-archetype-react-component",