add plugins

.gitignore

@@ -16,5 +16,5 @@ coverage/
 .tags1
 
 # remove plugin folders
-plugins
-plugins.json
+# plugins
+# plugins.json

client/.babelrc

@@ -1,6 +1,6 @@
 {
   "extends": "../.babelrc",
   "plugins": [
-    "transform-async-to-generator",
+    "transform-async-to-generator"
   ]
 }

client/coral-docs/src/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import {render} from 'react-dom';
 import {GraphQLDocs} from 'graphql-docs';
 
 import fetcher from './services/fetcher';
 
 // Render the application into the DOM
-ReactDOM.render(<GraphQLDocs fetcher={fetcher} />, document.querySelector('#root'));
+render(<GraphQLDocs fetcher={fetcher} />, document.querySelector('#root'));

client/coral-embed-stream/src/Embed.js

@@ -34,6 +34,7 @@ import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStream
 import Comment from './Comment';
 import LoadMore from './LoadMore';
 import NewCount from './NewCount';
+import {Slot} from 'coral-framework';
 
 class Embed extends Component {
 
@@ -119,6 +120,7 @@ class Embed extends Component {
     return (
       <div style={expandForLogin}>
         <div className="commentStream">
+          <Slot fill="Stream"/>
           <TabBar onChange={this.changeTab} activeTab={activeTab}>
             <Tab><Count count={asset.commentCount}/></Tab>
             <Tab>{lang.t('profile')}</Tab>

client/coral-framework/components/Slot.js

@@ -6,9 +6,10 @@ class Slot extends Component {
     console.log('Slot Mounted');
   }
   render() {
+    const {fill} = this.props;
     return (
       <div>
-        {injectedPlugins}
+        {injectedPlugins(fill)}
       </div>
     );
   }

client/coral-framework/helpers/importer.js

@@ -1,6 +1,6 @@
 import {client as clientPlugins} from 'pluginsConfig';
 
-function importer () {
+function importer (fill) {
   let context,
     importedFiles;
 
@@ -55,6 +55,15 @@ function importer () {
       .filter(plugin => clientPlugins.indexOf(plugin.name) > -1);
   }
 
+  function addProps (plugin) {
+    plugin.props = getConfig(plugin.name);
+    return plugin;
+  }
+
+  function filterBySlot (plugin) {
+    return plugin.props.slot === fill;
+  }
+
   function init() {
 
     /**
@@ -65,8 +74,10 @@ function importer () {
 
     return filterByUserConfig(importedFiles)
       .filter(key => key.format === 'js')
-      .reduce((entry, plugin) => {
-        entry.push(context(plugin.key)(getConfig(plugin.name)));
+      .map(addProps)
+      .filter(filterBySlot)
+      .reduce((entry, plugin, i) => {
+        entry.push(context(plugin.key)(plugin.props));
         return entry;
       }, []);
   }
@@ -74,5 +85,5 @@ function importer () {
   return init();
 }
 
-export default importer();
+export default importer;
 

client/coral-framework/index.js

@@ -6,6 +6,11 @@ import * as assetActions from './actions/asset';
 import * as notificationActions from './actions/notification';
 import Slot from './components/Slot';
 
+const context = require.context('plugins', true, /\.\/(.*)\/client\/actions.js$/);
+const pluginsActions = context
+  .keys()
+  .reduce(entry, key => entry[key] = context(key), {});
+
 export {
   pym,
   Slot,
@@ -13,5 +18,6 @@ export {
   store,
   authActions,
   assetActions,
-  notificationActions
+  notificationActions,
+  pluginsActions
 };

package.json

@@ -50,34 +50,34 @@
   "homepage": "https://github.com/coralproject/talk#readme",
   "dependencies": {
     "bcrypt": "^1.0.2",
-    "body-parser": "^1.15.2",
+    "body-parser": "^1.17.1",
     "cli-table": "^0.3.1",
     "commander": "^2.9.0",
     "connect-redis": "^3.1.0",
     "csurf": "^1.9.0",
-    "dataloader": "^1.2.0",
-    "debug": "^2.2.0",
+    "dataloader": "^1.3.0",
+    "debug": "^2.6.3",
     "dotenv": "^4.0.0",
-    "ejs": "^2.5.2",
+    "ejs": "^2.5.6",
     "env-rewrite": "^1.0.2",
-    "express": "^4.14.0",
-    "express-session": "^1.14.2",
-    "gql-merge": "^0.0.4",
+    "express": "^4.15.2",
+    "express-session": "^1.15.1",
     "form-data": "^2.1.2",
+    "gql-merge": "^0.0.4",
     "graphql": "^0.8.2",
     "graphql-errors": "^2.1.0",
     "graphql-server-express": "^0.5.0",
     "graphql-tools": "^0.9.0",
-    "helmet": "^3.1.0",
-    "inquirer": "^3.0.1",
-    "jsonwebtoken": "^7.1.9",
+    "helmet": "^3.5.0",
+    "inquirer": "^3.0.6",
+    "jsonwebtoken": "^7.3.0",
     "kue": "^0.11.5",
     "linkify-it": "^2.0.3",
     "lodash": "^4.16.6",
     "metascraper": "^1.0.6",
     "minimist": "^1.2.0",
-    "mongoose": "^4.6.5",
-    "morgan": "^1.7.0",
+    "mongoose": "^4.9.1",
+    "morgan": "^1.8.1",
     "natural": "^0.4.0",
     "node-fetch": "^1.6.3",
     "nodemailer": "^2.6.4",
@@ -87,32 +87,31 @@
     "passport-local": "^1.0.0",
     "react-apollo": "^0.10.0",
     "react-recaptcha": "^2.2.6",
-    "redis": "^2.6.5",
+    "redis": "^2.7.1",
     "uuid": "^2.0.3"
   },
   "devDependencies": {
     "apollo-client": "^0.8.3",
     "autoprefixer": "^6.5.2",
-    "babel-core": "^6.21.0",
-    "babel-eslint": "^7.1.0",
-    "babel-jest": "^15.0.0",
-    "babel-loader": "^6.2.7",
+    "babel-core": "^6.24.0",
+    "babel-eslint": "^7.2.1",
+    "babel-jest": "^19.0.0",
+    "babel-loader": "^6.4.1",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-transform-async-to-generator": "^6.16.0",
-    "babel-plugin-transform-class-properties": "^6.18.0",
+    "babel-plugin-transform-class-properties": "^6.23.0",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-object-assign": "^6.8.0",
-    "babel-plugin-transform-object-rest-spread": "^6.16.0",
-    "babel-plugin-transform-react-jsx": "^6.8.0",
-    "babel-polyfill": "^6.16.0",
-    "babel-preset-es2015": "^6.18.0",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-plugin-transform-react-jsx": "^6.23.0",
+    "babel-polyfill": "^6.23.0",
+    "babel-preset-es2015": "^6.24.0",
     "babel-preset-stage-0": "^6.16.0",
     "chai": "^3.5.0",
     "chai-as-promised": "^6.0.0",
     "chai-http": "^3.0.0",
-    "contents-loader": "^1.0.0",
     "copy-webpack-plugin": "^4.0.0",
-    "css-loader": "^0.25.0",
+    "css-loader": "^0.27.3",
     "dialog-polyfill": "^0.4.4",
     "enzyme": "^2.6.0",
     "eslint": "^3.12.1",
@@ -125,14 +124,14 @@
     "eslint-plugin-promise": "^3.3.1",
     "eslint-plugin-react": "^6.6.0",
     "eslint-plugin-standard": "^2.0.1",
-    "exports-loader": "^0.6.3",
+    "exports-loader": "^0.6.4",
     "fetch-mock": "^5.5.0",
     "graphql-docs": "^0.2.0",
     "graphql-tag": "^1.2.3",
     "hammerjs": "^2.0.8",
     "ignore-styles": "^5.0.1",
     "immutable": "^3.8.1",
-    "imports-loader": "^0.6.5",
+    "imports-loader": "^0.7.1",
     "istanbul": "^1.1.0-alpha.1",
     "jsdom": "^9.8.3",
     "json-loader": "^0.5.4",
@@ -143,7 +142,7 @@
     "mocha-junit-reporter": "^1.12.1",
     "nightwatch": "^0.9.11",
     "nodemon": "^1.11.0",
-    "postcss-loader": "^1.1.0",
+    "postcss-loader": "^1.3.3",
     "postcss-modules": "^0.5.2",
     "postcss-smart-import": "^0.5.1",
     "pre-git": "^3.10.0",
@@ -165,10 +164,10 @@
     "redux-thunk": "^2.1.0",
     "regenerator": "^0.8.46",
     "selenium-standalone": "^5.11.2",
-    "style-loader": "^0.13.1",
+    "style-loader": "^0.16.0",
     "supertest": "^2.0.1",
     "timeago.js": "^2.0.3",
-    "webpack": "^2.2.1"
+    "webpack": "^2.3.1"
   },
   "engines": {
     "node": "^7.7.0"

plugins.json

@@ -0,0 +1,8 @@
+{
+  "server": [],
+  "client": [
+    "coral-plugin-respect",
+    "coral-plugin-love",
+    "coral-plugin-monitor"
+  ]
+}

plugins/coral-plugin-love/client/config.json

@@ -0,0 +1,4 @@
+{
+  "name": "Coral Plugin Love",
+  "slot": "Comment.InfoBar"
+}

plugins/coral-plugin-love/client/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import styles from './style.css';
+
+export default (props) => (
+  <div className={styles.Love}>
+    <button>Love</button>
+  </div>
+);

plugins/coral-plugin-love/client/style.css

@@ -0,0 +1,9 @@
+.Love {
+    display: inline-block;
+    button {
+        padding: 10px 2px;
+        border-radius: 3px;
+        background: deepskyblue;
+        color: #161616;
+    }
+}

plugins/coral-plugin-monitor/client/config.json

@@ -0,0 +1,4 @@
+{
+  "name": "Coral Plugin Tab Monitor",
+  "slot": "Stream"
+}

plugins/coral-plugin-monitor/client/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import {TabBar, Tab} from 'coral-ui';
+
+console.log('exported');
+
+export default (props) => (
+  <TabBar>
+    <Tab>
+      Monitor
+    </Tab>
+  </TabBar>
+);

plugins/coral-plugin-respect/client/config.json

@@ -0,0 +1,4 @@
+{
+  "name": "Coral Plugin Respect",
+  "slot": "Comment.Detail"
+}

plugins/coral-plugin-respect/client/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styles from './style.css';
+
+export default (props) => (
+  <div className={styles.Respect}>
+    <button>Respect</button>
+  </div>
+);
+

plugins/coral-plugin-respect/client/style.css

@@ -0,0 +1,9 @@
+.Respect {
+    display: inline-block;
+    button {
+        padding: 10px 2px;
+        border-radius: 3px;
+        background: #ffa16e;
+        color: #161616;
+    }
+}

plugins/coral-plugin-sideview/client/actions.js

@@ -0,0 +1 @@
+export const SomeAction = () => ({type: 'SomeAction'});

plugins/coral-plugin-sideview/client/config.json

@@ -0,0 +1,3 @@
+{
+  "name": "Coral Plugin"
+}