From 4123adec31bd5171e09fdd17475af06ffa6636f7 Mon Sep 17 00:00:00 2001 From: Alf Eaton <eaton.alf@gmail.com> Date: Tue, 22 Aug 2017 12:01:50 +0100 Subject: [PATCH] Move components to authentication component and add styleguide --- README.md | 3 +- .../component-authentication/package.json | 34 +++++++- .../src/components}/Login.js | 0 .../src/components}/Login.local.css | 0 .../src/components}/Login.md | 0 .../src/components/LoginPage.js | 2 +- .../src/components}/Signup.js | 0 .../src/components}/Signup.local.css | 0 .../src/components}/Signup.md | 0 .../src/components/SignupPage.js | 2 +- .../styleguide.config.js | 18 ++++ .../webpack.config.js | 85 +++++++++++++++++++ packages/component-dashboard/package.json | 1 + packages/component-manuscript/package.json | 3 +- .../component-manuscript/webpack.config.js | 7 +- packages/xpub-collabra/app/routes.js | 4 +- packages/xpub-collabra/package.json | 3 +- packages/xpub-styleguide/package.json | 37 ++++++++ .../src/components}/StyleGuideRenderer.js | 0 .../components}/StyleGuideRenderer.local.css | 0 .../src/components}/Wrapper.js | 11 --- .../src/components}/Wrapper.local.css | 0 .../xpub-styleguide/src/components/index.js | 4 + packages/xpub-styleguide/src/index.js | 1 + packages/xpub-styleguide/webpack.config.js | 63 ++++++++++++++ packages/xpub-ui/package.json | 18 ++-- packages/xpub-ui/src/index.js | 2 - packages/xpub-ui/styleguide.config.js | 7 +- packages/xpub-ui/webpack.config.js | 11 ++- 29 files changed, 277 insertions(+), 39 deletions(-) rename packages/{xpub-ui/src/molecules => component-authentication/src/components}/Login.js (100%) rename packages/{xpub-ui/src/molecules => component-authentication/src/components}/Login.local.css (100%) rename packages/{xpub-ui/src/molecules => component-authentication/src/components}/Login.md (100%) rename packages/{xpub-ui/src/molecules => component-authentication/src/components}/Signup.js (100%) rename packages/{xpub-ui/src/molecules => component-authentication/src/components}/Signup.local.css (100%) rename packages/{xpub-ui/src/molecules => component-authentication/src/components}/Signup.md (100%) create mode 100644 packages/component-authentication/styleguide.config.js create mode 100644 packages/component-authentication/webpack.config.js create mode 100644 packages/xpub-styleguide/package.json rename packages/{xpub-ui/lib/styleguide => xpub-styleguide/src/components}/StyleGuideRenderer.js (100%) rename packages/{xpub-ui/lib/styleguide => xpub-styleguide/src/components}/StyleGuideRenderer.local.css (100%) rename packages/{xpub-ui/lib/styleguide => xpub-styleguide/src/components}/Wrapper.js (64%) rename packages/{xpub-ui/lib/styleguide => xpub-styleguide/src/components}/Wrapper.local.css (100%) create mode 100644 packages/xpub-styleguide/src/components/index.js create mode 100644 packages/xpub-styleguide/src/index.js create mode 100644 packages/xpub-styleguide/webpack.config.js diff --git a/README.md b/README.md index 45a0e6c22..9b98e3dcc 100644 --- a/README.md +++ b/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. diff --git a/packages/component-authentication/package.json b/packages/component-authentication/package.json index 04d6ba489..2d04a00b4 100644 --- a/packages/component-authentication/package.json +++ b/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" } } diff --git a/packages/xpub-ui/src/molecules/Login.js b/packages/component-authentication/src/components/Login.js similarity index 100% rename from packages/xpub-ui/src/molecules/Login.js rename to packages/component-authentication/src/components/Login.js diff --git a/packages/xpub-ui/src/molecules/Login.local.css b/packages/component-authentication/src/components/Login.local.css similarity index 100% rename from packages/xpub-ui/src/molecules/Login.local.css rename to packages/component-authentication/src/components/Login.local.css diff --git a/packages/xpub-ui/src/molecules/Login.md b/packages/component-authentication/src/components/Login.md similarity index 100% rename from packages/xpub-ui/src/molecules/Login.md rename to packages/component-authentication/src/components/Login.md diff --git a/packages/component-authentication/src/components/LoginPage.js b/packages/component-authentication/src/components/LoginPage.js index 8f71b7daa..7807ab8f5 100644 --- a/packages/component-authentication/src/components/LoginPage.js +++ b/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'] diff --git a/packages/xpub-ui/src/molecules/Signup.js b/packages/component-authentication/src/components/Signup.js similarity index 100% rename from packages/xpub-ui/src/molecules/Signup.js rename to packages/component-authentication/src/components/Signup.js diff --git a/packages/xpub-ui/src/molecules/Signup.local.css b/packages/component-authentication/src/components/Signup.local.css similarity index 100% rename from packages/xpub-ui/src/molecules/Signup.local.css rename to packages/component-authentication/src/components/Signup.local.css diff --git a/packages/xpub-ui/src/molecules/Signup.md b/packages/component-authentication/src/components/Signup.md similarity index 100% rename from packages/xpub-ui/src/molecules/Signup.md rename to packages/component-authentication/src/components/Signup.md diff --git a/packages/component-authentication/src/components/SignupPage.js b/packages/component-authentication/src/components/SignupPage.js index 8770eba2c..ff4c3b0cd 100644 --- a/packages/component-authentication/src/components/SignupPage.js +++ b/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({ diff --git a/packages/component-authentication/styleguide.config.js b/packages/component-authentication/styleguide.config.js new file mode 100644 index 000000000..d1037b424 --- /dev/null +++ b/packages/component-authentication/styleguide.config.js @@ -0,0 +1,18 @@ +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' + } + } +} diff --git a/packages/component-authentication/webpack.config.js b/packages/component-authentication/webpack.config.js new file mode 100644 index 000000000..62d213e0b --- /dev/null +++ b/packages/component-authentication/webpack.config.js @@ -0,0 +1,85 @@ +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]', + } + } + ] + } + ] + } +} diff --git a/packages/component-dashboard/package.json b/packages/component-dashboard/package.json index 5b502a3d7..e02e298ba 100644 --- a/packages/component-dashboard/package.json +++ b/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", diff --git a/packages/component-manuscript/package.json b/packages/component-manuscript/package.json index 7f8de775e..e396dd668 100644 --- a/packages/component-manuscript/package.json +++ b/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", diff --git a/packages/component-manuscript/webpack.config.js b/packages/component-manuscript/webpack.config.js index 2fb4f5258..6efd1e71a 100644 --- a/packages/component-manuscript/webpack.config.js +++ b/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' + ], } }, diff --git a/packages/xpub-collabra/app/routes.js b/packages/xpub-collabra/app/routes.js index 7678bccb9..e2e0ed4b8 100644 --- a/packages/xpub-collabra/app/routes.js +++ b/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}/> diff --git a/packages/xpub-collabra/package.json b/packages/xpub-collabra/package.json index 0cf316569..28e19b2b1 100644 --- a/packages/xpub-collabra/package.json +++ b/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", diff --git a/packages/xpub-styleguide/package.json b/packages/xpub-styleguide/package.json new file mode 100644 index 000000000..d21c82cd7 --- /dev/null +++ b/packages/xpub-styleguide/package.json @@ -0,0 +1,37 @@ +{ + "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" + } +} diff --git a/packages/xpub-ui/lib/styleguide/StyleGuideRenderer.js b/packages/xpub-styleguide/src/components/StyleGuideRenderer.js similarity index 100% rename from packages/xpub-ui/lib/styleguide/StyleGuideRenderer.js rename to packages/xpub-styleguide/src/components/StyleGuideRenderer.js diff --git a/packages/xpub-ui/lib/styleguide/StyleGuideRenderer.local.css b/packages/xpub-styleguide/src/components/StyleGuideRenderer.local.css similarity index 100% rename from packages/xpub-ui/lib/styleguide/StyleGuideRenderer.local.css rename to packages/xpub-styleguide/src/components/StyleGuideRenderer.local.css diff --git a/packages/xpub-ui/lib/styleguide/Wrapper.js b/packages/xpub-styleguide/src/components/Wrapper.js similarity index 64% rename from packages/xpub-ui/lib/styleguide/Wrapper.js rename to packages/xpub-styleguide/src/components/Wrapper.js index a1569989f..211b2dcb3 100644 --- a/packages/xpub-ui/lib/styleguide/Wrapper.js +++ b/packages/xpub-styleguide/src/components/Wrapper.js @@ -1,5 +1,4 @@ import React from 'react' -// import { Router, createMemoryHistory } from 'react-router' import { Provider } from 'react-redux' import { reducer as formReducer } from 'redux-form' import { createStore, combineReducers } from 'redux' @@ -21,14 +20,4 @@ const Wrapper = ({ children }) => ( </Provider> ) -/*const Wrapper = ({ children }) => ( - <Provider store={store}> - <Router history={createMemoryHistory()}> - <div className={classes.root}> - {children} - </div> - </Router> - </Provider> -)*/ - export default Wrapper diff --git a/packages/xpub-ui/lib/styleguide/Wrapper.local.css b/packages/xpub-styleguide/src/components/Wrapper.local.css similarity index 100% rename from packages/xpub-ui/lib/styleguide/Wrapper.local.css rename to packages/xpub-styleguide/src/components/Wrapper.local.css diff --git a/packages/xpub-styleguide/src/components/index.js b/packages/xpub-styleguide/src/components/index.js new file mode 100644 index 000000000..51df89d74 --- /dev/null +++ b/packages/xpub-styleguide/src/components/index.js @@ -0,0 +1,4 @@ +module.exports = { + StyleGuideRenderer: require('./StyleGuideRenderer'), + Wrapper: require('./Wrapper') +} diff --git a/packages/xpub-styleguide/src/index.js b/packages/xpub-styleguide/src/index.js new file mode 100644 index 000000000..88b6ebcdd --- /dev/null +++ b/packages/xpub-styleguide/src/index.js @@ -0,0 +1 @@ +module.exports = require('./components') diff --git a/packages/xpub-styleguide/webpack.config.js b/packages/xpub-styleguide/webpack.config.js new file mode 100644 index 000000000..bf63bd473 --- /dev/null +++ b/packages/xpub-styleguide/webpack.config.js @@ -0,0 +1,63 @@ +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-styleguide', + 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'), + ], + loader: 'babel-loader', + options: { + presets: [ + ['env', { modules: false }], + 'react', + 'stage-2' + ], + cacheDirectory: true, + }, + }, + + // CSS modules + { + test: /\.local\.css$/, + include: [ + path.join(__dirname, 'src'), + ], + use: [ + 'style-loader', + { + loader: 'css-loader', + options: { + modules: true, + } + } + ], + } + ] + } + ] + } +} diff --git a/packages/xpub-ui/package.json b/packages/xpub-ui/package.json index 6e9ae95ff..5e0804513 100644 --- a/packages/xpub-ui/package.json +++ b/packages/xpub-ui/package.json @@ -9,26 +9,28 @@ "main": "src", "jsnext:main": "src", "dependencies": { - "babel-core": "^6.26.0", - "babel-loader": "^7.1.2", "classnames": "^2.2.5", - "css-loader": "^0.28.5", - "file-loader": "^0.11.2", - "lodash": "^4.17.4", "prop-types": "^15.5.10", "react": "^15.6.1", "react-dom": "^15.6.1", "react-redux": "^5.0.6", "react-router": "^3.0.5", "redux": "^3.6.0", - "redux-form": "^7.0.3", - "style-loader": "^0.18.2", "xpub-fonts": "^0.0.2" }, "devDependencies": { - "babel-preset-react-app": "^3.0.2", + "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" }, diff --git a/packages/xpub-ui/src/index.js b/packages/xpub-ui/src/index.js index c11202f70..b90319f98 100644 --- a/packages/xpub-ui/src/index.js +++ b/packages/xpub-ui/src/index.js @@ -1,4 +1,2 @@ export { default as AppBar } from './molecules/AppBar' -export { default as Login } from './molecules/Login' -export { default as Signup } from './molecules/Signup' export { default as YesOrNo } from './molecules/YesOrNo' diff --git a/packages/xpub-ui/styleguide.config.js b/packages/xpub-ui/styleguide.config.js index 905c4b294..fc12e711a 100644 --- a/packages/xpub-ui/styleguide.config.js +++ b/packages/xpub-ui/styleguide.config.js @@ -1,11 +1,8 @@ -const path = require('path') +const styleguideComponents = require('xpub-styleguide') module.exports = { title: 'xpub-ui style guide', - styleguideComponents: { - StyleGuideRenderer: path.join(__dirname, 'lib/styleguide/StyleGuideRenderer'), - Wrapper: path.join(__dirname, 'lib/styleguide/Wrapper'), - }, + styleguideComponents, context: { faker: 'faker', }, diff --git a/packages/xpub-ui/webpack.config.js b/packages/xpub-ui/webpack.config.js index eb924224b..842d4ee1c 100644 --- a/packages/xpub-ui/webpack.config.js +++ b/packages/xpub-ui/webpack.config.js @@ -16,6 +16,9 @@ module.exports = { externals: [nodeExternals({ whitelist: [/\.(?!js$).{1,5}$/i] })], + resolve: { + symlinks: false + }, module: { rules: [ { @@ -25,12 +28,14 @@ module.exports = { test: /\.js$/, include: [ path.join(__dirname, 'src'), - path.join(__dirname, 'lib'), + /xpub-[^/]+\/src/, ], loader: 'babel-loader', options: { presets: [ - 'react-app', + ['env', { modules: false }], + 'react', + 'stage-2' ], cacheDirectory: true, }, @@ -41,7 +46,7 @@ module.exports = { test: /\.local\.css$/, include: [ path.join(__dirname, 'src'), - path.join(__dirname, 'lib'), + /xpub-[^/]+\/src/, ], use: [ 'style-loader', -- GitLab