Move components to authentication component and add styleguide

README.md

@@ -13,8 +13,8 @@ Note: this monorepo uses Lerna, which works best with npm v4 when linking unpubl
 * `component-app`: a PubSweet component that provides an app container with nav bar.
 * `component-authentication`: a PubSweet component that provides authentication-related client pages.
 * `component-dashboard`: a PubSweet component that provides a Dashboard page.
-* `component-submit`: a PubSweet component that provides a Submit page.
 * `component-manuscript`: a PubSweet component that provides a Manuscript page.
+* `component-submit`: a PubSweet component that provides a Submit page.
 
 ## PubSweet applications
 
@@ -24,5 +24,6 @@ Note: this monorepo uses Lerna, which works best with npm v4 when linking unpubl
 
 * `xpub-fonts`: fonts for use in xpub applications
 * `xpub-selectors`: some useful redux selectors
+* `xpub-styleguide`: components for use in react-styleguidist
 * `xpub-ui`: a library of user interface elements for use in PubSweet components.
 

packages/component-authentication/package.json

@@ -9,7 +9,35 @@
     "dist"
   ],
   "dependencies": {
-    "xpub-ui": "^0.0.2"
+    "classnames": "^2.2.5",
+    "prop-types": "^15.5.10",
+    "pubsweet-client": "^1.0.0-alpha.1",
+    "pubsweet-component-login": "^0.3.0",
+    "pubsweet-component-signup": "^0.2.0",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-redux": "^5.0.6",
+    "react-router": "^3.0.5",
+    "react-router-redux": "^4.0.7",
+    "recompose": "^0.25.0",
+    "redux": "^3.6.0",
+    "redux-form": "^7.0.3"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-minify": "^0.2.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "css-loader": "^0.28.4",
+    "faker": "^4.1.0",
+    "file-loader": "^0.11.2",
+    "xpub-styleguide": "^0.0.2",
+    "react-styleguidist": "^6.0.8",
+    "style-loader": "^0.18.2",
+    "webpack": "^3.5.5",
+    "webpack-node-externals": "^1.6.0"
   },
   "peerDependencies": {
     "prop-types": "^15.5.10",
@@ -19,5 +47,9 @@
     "react-redux": "^5.0.2",
     "react-router": "^3.0.5",
     "react-router-redux": "^4.0.7"
+  },
+  "scripts": {
+    "styleguide": "styleguidist server",
+    "styleguide:build": "styleguidist build"
   }
 }

packages/component-authentication/src/components/LoginPage.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux'
 import { loginUser } from 'pubsweet-component-login/actions'
 import { reduxForm } from 'redux-form'
 import { compose } from 'recompose'
-import { Login } from 'xpub-ui'
+import { Login } from './Login'
 
 // TODO: const redirect = this.props.location.query.next | CONFIG['pubsweet-client']['login-redirect']
 

packages/component-authentication/src/components/SignupPage.js

@@ -2,7 +2,7 @@ import { compose } from 'recompose'
 import { connect } from 'react-redux'
 import { reduxForm } from 'redux-form'
 import { signupUser } from 'pubsweet-component-signup/actions'
-import { Signup } from 'xpub-ui'
+import { Signup } from './Signup'
 
 export default compose(
   reduxForm({

packages/component-authentication/styleguide.config.js

+const styleguideComponents = require('xpub-styleguide')
+
+module.exports = {
+  title: 'xpub authentication style guide',
+  styleguideComponents,
+  components: './src/*.js',
+  skipComponentsWithoutExample: true,
+  webpackConfig: require('./webpack.config.js'),
+  serverPort: 6061,
+  theme: {
+    fontFamily: {
+      base: '"Fira Sans", sans-serif'
+    },
+    color: {
+      link: 'cornflowerblue'
+    }
+  }
+}

packages/component-authentication/webpack.config.js

+process.env.BABEL_ENV = 'development'
+process.env.NODE_ENV = 'development'
+
+const path = require('path')
+const nodeExternals = require('webpack-node-externals')
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    filename: 'index.js',
+    path: path.join(__dirname, 'dist'),
+    library: 'xpub-authentication',
+    libraryTarget: 'commonjs2'
+  },
+  devtool: 'cheap-module-source-map',
+  externals: [nodeExternals({
+    whitelist: [/\.(?!js$).{1,5}$/i]
+  })],
+  resolve: {
+    symlinks: false
+  },
+  module: {
+    rules: [
+      {
+        oneOf: [
+          // ES6 modules
+          {
+            test: /\.js$/,
+            include: [
+              path.join(__dirname, 'src'),
+              /xpub-[^/]+\/src/,
+            ],
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                ['env', {
+                  modules: false,
+                }],
+                'react',
+                'stage-2'
+              ],
+              cacheDirectory: true,
+            },
+          },
+
+          // CSS modules
+          {
+            test: /\.local\.css$/,
+            include: [
+              path.join(__dirname, 'src'),
+              /xpub-[^/]+\/src/,
+            ],
+            use: [
+              'style-loader',
+              {
+                loader: 'css-loader',
+                options: {
+                  modules: true,
+                }
+              }
+            ],
+          },
+
+          // CSS
+          {
+            test: /\.css$/,
+            use: [
+              'style-loader',
+              'css-loader'
+            ],
+          },
+
+          // Files
+          {
+            exclude: [/\.js$/, /\.html$/, /\.json$/],
+            loader: 'file-loader',
+            options: {
+              name: 'static/media/[name].[hash:8].[ext]',
+            }
+          }
+        ]
+      }
+    ]
+  }
+}

packages/component-dashboard/package.json

@@ -10,6 +10,7 @@
   ],
   "dependencies": {
     "classnames": "^2.2.5",
+    "lodash": "^4.17.4",
     "pubsweet-component-ink-frontend": "^0.1.0",
     "react-dropzone": "^3.13.3",
     "react-moment": "^0.6.1",

packages/component-manuscript/package.json

@@ -22,7 +22,8 @@
     "babel-loader": "^7.1.1",
     "babel-preset-env": "^1.6.0",
     "babel-preset-minify": "^0.2.0",
-    "babel-preset-react-app": "^3.0.2",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
     "css-loader": "^0.28.4",
     "eslint": "^4.4.1",
     "extract-text-webpack-plugin": "^2.1.2",

packages/component-manuscript/webpack.config.js

@@ -32,7 +32,12 @@ module.exports = {
             ],
             loader: 'babel-loader',
             options: {
-              presets: ['minify', 'react-app']
+              presets: [
+                'minify',
+                ['env', { modules: false }],
+                'react',
+                'stage-2'
+              ],
             }
           },
 

packages/xpub-collabra/app/routes.js

@@ -13,11 +13,11 @@ export default (
     <Redirect from="/" to="/dashboard"/>
 
     <Route path="/" component={App}>
-      <Route component={AuthenticatedPage}>
+      {/*<Route component={AuthenticatedPage}>*/}
         <Route path="dashboard" component={DashboardPage}/>
         <Route path="projects/:project/submit" component={SubmitPage}/>
         <Route path="projects/:project/manuscript" component={ManuscriptPage}/>
-      </Route>
+      {/*</Route>*/}
 
       <Route path="signup" component={SignupPage}/>
       <Route path="login" component={LoginPage}/>

packages/xpub-collabra/package.json

@@ -11,11 +11,10 @@
     "font-awesome": "^4.7.0",
     "joi": "^10.4.1",
     "loadable-components": "^0.2.1",
-    "lodash": "^4.17.4",
     "moment": "^2.18.1",
     "prop-types": "^15.5.10",
     "pubsweet": "1.0.0-alpha.4",
-    "pubsweet-client": "^1.0.0-alpha.3",
+    "pubsweet-client": "^1.0.0-alpha.1",
     "pubsweet-component-ink-backend": "0.0.10",
     "pubsweet-component-ink-frontend": "^0.1.0",
     "pubsweet-component-login": "^0.3.0",

packages/xpub-styleguide/package.json

+{
+  "name": "xpub-styleguide",
+  "version": "0.0.2",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "main": "src",
+  "dependencies": {
+    "xpub-fonts": "^0.0.2",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-redux": "^5.0.2",
+    "redux": "^3.6.0",
+    "redux-form": "^7.0.3"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-minify": "^0.2.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "css-loader": "^0.28.4",
+    "eslint": "^4.4.1",
+    "rimraf": "^2.6.1",
+    "style-loader": "^0.18.2",
+    "webpack": "^3.5.5",
+    "webpack-node-externals": "^1.6.0"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "lint": "eslint src",
+    "prebuild": "npm run clean && npm run lint",
+    "build": "webpack --progress --profile"
+  }
+}