Merge master

.gitignore

+node_modules
+*.log
 
 # Created by https://www.gitignore.io/api/osx,linux
 

README.md

@@ -26,7 +26,7 @@ It's a modular and flexible framework consisting of a **server** and **client**
 
 ## PubSweet packages (managed with Lerna)
 
-| repository | description |
+| package | description |
 | :-------- | :-------- |
 | [![pubsweet-server](https://img.shields.io/badge/PubSweet-server-51c1bc.svg?style=flat&colorA=84509d) pubsweet/pubsweet-server](https://gitlab.coko.foundation/pubsweet/packages/pubsweet-server) | an extensible RESTful API that runs on the server |
 | [![pubsweet-client](https://img.shields.io/badge/PubSweet-client-51c1bc.svg?style=flat&colorA=84509d) pubsweet/pubsweet-client](https://gitlab.coko.foundation/pubsweet/packages/pubsweet-client) | an extensible frontend app that runs in the browser |

package.json

 {
+  "name": "pubsweet-monorepo",
   "private": true,
   "license": "MIT",
   "devDependencies": {
@@ -35,5 +36,9 @@
     ],
     "*.css": "stylelint",
     "*.scss": "stylelint"
-  }
+  },
+  "workspaces": [
+    "packages/*",
+    "packages/components/packages/*"
+  ]
 }

packages/styleguide/package.json

+{
+  "name": "@pubsweet/styleguide",
+  "version": "0.1.0",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "main": "src",
+  "dependencies": {
+    "@pubsweet/theme": "^0.1.0",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-redux": "^5.0.2",
+    "react-router-dom": "^4.2.2",
+    "recompose": "^0.26.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-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "css-loader": "^0.28.4",
+    "node-sass": "^4.5.3",
+    "rimraf": "^2.6.1",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.19.0",
+    "webpack": "^3.8.1",
+    "webpack-node-externals": "^1.6.0"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "prebuild": "npm run clean && npm run lint",
+    "build": "webpack --progress --profile"
+  }
+}

packages/styleguide/src/components/StyleGuideRenderer.js

+import React from 'react'
+import classes from './StyleGuideRenderer.local.scss'
+
+const StyleGuideRenderer = ({ title, children, toc }) => (
+  <div className={classes.root}>
+    <div className={classes.sidebar}>
+      <header className={classes.header}>
+        <h1 className={classes.title}>{title}</h1>
+      </header>
+
+      <nav className={classes.nav}>{toc}</nav>
+    </div>
+
+    <div className={classes.content}>{children}</div>
+  </div>
+)
+
+export default StyleGuideRenderer

packages/styleguide/src/components/StyleGuideRenderer.local.scss

+.root {
+  display: grid;
+  grid-template-areas: "side content";
+  grid-template-columns: 1fr 3fr;
+  height: 100vh;
+  width: 100vw;
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  grid-area: side;
+  overflow-y: hidden;
+}
+
+.content {
+  grid-area: content;
+  overflow-y: auto;
+  padding: 1rem;
+}
+
+.header {
+  padding: 0.5rem;
+}
+
+.nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+
+.title {
+  font-family: "Fira Sans", sans-serif;
+  font-size: 1rem;
+  margin-bottom: 0;
+  padding: 0 1rem;
+}

packages/styleguide/src/components/Wrapper.js

+import React from 'react'
+import { Provider } from 'react-redux'
+import { BrowserRouter as Router } from 'react-router-dom'
+import { reducer as formReducer } from 'redux-form'
+import { createStore, combineReducers } from 'redux'
+
+import "@pubsweet/theme"
+
+import classes from './Wrapper.local.scss'
+
+const rootReducer = combineReducers({
+  form: formReducer,
+})
+
+const store = createStore(
+  rootReducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
+)
+
+const Wrapper = ({ children }) => (
+  <Provider store={store}>
+    <Router>
+      <div className={classes.root}>{children}</div>
+    </Router>
+  </Provider>
+)
+
+export default Wrapper

packages/styleguide/src/components/Wrapper.local.scss

+:global(body) {
+  overflow: hidden;
+}
+
+.root {
+  font-family: 'Fira Sans', sans-serif;
+}

packages/styleguide/src/components/index.js

+module.exports = {
+  StyleGuideRenderer: require('./StyleGuideRenderer'),
+  Wrapper: require('./Wrapper'),
+}

packages/styleguide/src/index.js

+module.exports = require('./components')

packages/styleguide/src/webpack-config.js

+process.env.BABEL_ENV = 'development'
+process.env.NODE_ENV = 'development'
+
+const path = require('path')
+const webpack = require('webpack')
+// const nodeExternals = require('webpack-node-externals')
+
+module.exports = dir => {
+  const include = [
+    path.join(dir, 'src'),
+    /pubsweet-[^/]+\/src/,
+    /xpub-[^/]+\/src/,
+    /wax-[^/]+\/src/,
+    /@pubsweet\/[^/]+\/src/,
+    /styleguide\/src/,
+    /ui\/src/
+  ]
+
+  return {
+    devtool: 'cheap-module-source-map',
+    entry: './src/index.js',
+    // externals: [nodeExternals({
+    //   whitelist: [/\.(?!js$).{1,5}$/i]
+    // })],
+    module: {
+      rules: [
+        {
+          oneOf: [
+            // ES6 modules
+            {
+              test: /\.js$/,
+              include,
+              loader: 'babel-loader',
+              options: {
+                presets: [
+                  [require('babel-preset-env'), { modules: false }],
+                  require('babel-preset-react'),
+                  require('babel-preset-stage-2'),
+                ],
+                cacheDirectory: true,
+              },
+            },
+
+            // CSS modules
+            {
+              test: /\.local\.css$/,
+              include,
+              use: [
+                'style-loader',
+                {
+                  loader: 'css-loader',
+                  options: {
+                    modules: true,
+                    // sourceMap: true,
+                    localIdentName: '[name]_[local]-[hash:base64:8]',
+                  },
+                },
+              ],
+            },
+
+            // SCSS modules
+            {
+              test: /\.local\.scss$/,
+              include,
+              use: [
+                'style-loader',
+                {
+                  loader: 'css-loader',
+                  options: {
+                    modules: true,
+                    importLoaders: 1,
+                    // sourceMap: true,
+                    localIdentName: '[name]_[local]-[hash:base64:8]',
+                  },
+                },
+                'sass-loader',
+              ],
+            },
+
+            // global CSS
+            {
+              test: /\.css$/,
+              use: ['style-loader', 'css-loader'],
+            },
+
+            // global SCSS
+            {
+              test: /\.scss$/,
+              use: [
+                'style-loader',
+                'css-loader',
+                // {
+                //   loader: 'css-loader',
+                //   options: {
+                //     importLoaders: 1,
+                //   }
+                // },
+                'sass-loader',
+              ],
+            },
+
+            // Files
+            {
+              exclude: [/\.js$/, /\.html$/, /\.json$/],
+              loader: 'file-loader',
+              options: {
+                name: 'static/media/[name].[hash:8].[ext]',
+              },
+            },
+          ],
+        },
+      ],
+    },
+    output: {
+      filename: 'index.js',
+      path: path.join(dir, 'dist'),
+    },
+    plugins: [
+      // mock constants
+      new webpack.DefinePlugin({
+        PUBSWEET_COMPONENTS: '[]',
+      }),
+    ],
+    watch: true,
+  }
+}

packages/styleguide/webpack.config.js

+const webpackConfig = require('./src/webpack-config')
+
+module.exports = webpackConfig(__dirname)

packages/theme/package.json

+{
+  "name": "@pubsweet/theme",
+  "version": "0.1.0",
+  "description": "CSS for PubSweet apps and styleguides",
+  "main": "src",
+  "license": "MIT",
+  "dependencies": {
+    "cokourier-prime-sans": "git+https://gitlab.coko.foundation/julientaq/cokourier-sans-prime.git",
+    "typeface-fira-mono": "^0.0.43",
+    "typeface-fira-sans": "^0.0.43",
+    "typeface-fira-sans-condensed": "^0.0.43",
+    "typeface-vollkorn": "^0.0.43"
+  },
+  "dependencies_disabled": {
+    "pubsweet-fira": "^0.0.3"
+  }
+}

packages/theme/src/index.js

+import 'typeface-fira-mono'
+import 'typeface-fira-sans'
+import 'typeface-fira-sans-condensed'
+import 'typeface-vollkorn'
+// import 'pubsweet-fira'
+import 'cokourier-prime-sans'
+
+import './variables.css'

packages/theme/src/variables.css

+:root {
+  /* brand colors */
+  --color-primary: #0d78f2;
+
+  /* colors for interactions */
+  --color-danger: #ff2d1a;
+  --color-warning: #ee7600;
+  --color-valid: #00bf05;
+  --color-pending: #aaa;
+
+  /* fonts for the different views */
+  --font-author: 'Vollkorn', serif;
+  --font-reviewer: 'Kocourier Prime Sans', monospace;
+  --font-interface: 'Fira Sans Condensed', sans-serif;
+  --font-mono: 'Fira Mono', monospace;
+}

packages/ui/.eslintrc

+{
+  "globals": {
+    "initialState": true,
+    "state": false,
+    "setState": false
+  }
+}

packages/ui/docs/colors.md

+CSS variables are used to define the theme's color scheme.
+
+## Brand colors
+
+`--color-primary`
+
+```js
+<div style={{ color: 'var(--color-primary)' }}>
+{faker.lorem.sentence(5)}
+</div>
+```
+
+## Colors for interactions
+
+`--color-danger`
+
+```js
+<div style={{ color: 'var(--color-danger)' }}>
+{faker.lorem.sentence(5)}
+</div>
+```
+
+`--color-valid`
+
+```js
+<div style={{ color: 'var(--color-valid)' }}>
+{faker.lorem.sentence(5)}
+</div>
+```
+
+`--color-warning`
+
+```js
+<div style={{ color: 'var(--color-warning)' }}>
+{faker.lorem.sentence(5)}
+</div>
+```
+
+`--color-pending`
+
+```js
+<div style={{ color: 'var(--color-pending)' }}>
+{faker.lorem.sentence(5)}
+</div>
+```

packages/ui/docs/fonts.md

+CSS variables are used to define font families.
+
+`--font-author`
+
+```js
+<div style={{ fontFamily: 'var(--font-author)' }}>
+{faker.lorem.sentence(5)}
+</div>
+```
+
+`--font-reviewer`
+
+```js
+<div style={{ fontFamily: 'var(--font-reviewer)' }}>
+{faker.lorem.sentence(5)}
+</div>
+```
+
+`--font-interface`
+
+```js
+<div style={{ fontFamily: 'var(--font-interface)' }}>
+{faker.lorem.sentence(5)}
+</div>
+```
+
+`--font-mono`
+
+```js
+<div style={{ fontFamily: 'var(--font-mono)' }}>
+{faker.lorem.sentence(5)}
+</div>
+```

packages/ui/package.json

+{
+  "name": "@pubsweet/ui",
+  "version": "0.1.0",
+  "files": [
+    "docs",
+    "dist",
+    "src"
+  ],
+  "main": "src",
+  "jsnext:main": "src",
+  "dependencies": {
+    "babel-jest": "^21.2.0",
+    "classnames": "^2.2.5",
+    "enzyme": "^3.2.0",
+    "enzyme-adapter-react-15": "^1.0.5",
+    "lodash": "^4.17.4",
+    "humps": "^2.0.1",
+    "prop-types": "^15.5.10",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-feather": "^1.0.7",
+    "react-redux": "^5.0.2",
+    "react-router-dom": "^4.2.2",
+    "react-tag-autocomplete": "^5.4.1",
+    "recompose": "^0.26.0",
+    "redux": "^3.6.0",
+    "redux-form": "^7.0.3"
+  },
+  "devDependencies": {
+    "@pubsweet/styleguide": "^0.1.0",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.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": "^1.1.5",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^21.2.1",
+    "node-sass": "^4.5.3",
+    "react-styleguidist": "^6.0.8",
+    "react-test-renderer": "^15.6.1",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.19.0",
+    "webpack": "^3.8.1",
+    "webpack-node-externals": "^1.6.0"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "\\.s?css$": "identity-obj-proxy"
+    },
+    "setupTestFrameworkScriptFile": "<rootDir>/test/setup/enzyme.js",
+    "transform": {
+      "\\.js$": "<rootDir>/test/config/transform.js"
+    }
+  },
+  "scripts": {
+    "styleguide": "styleguidist server",
+    "styleguide:build": "styleguidist build",
+    "clean": "rimraf dist",
+    "prebuild": "npm run clean && npm run lint",
+    "build": "webpack --progress --profile",
+    "test": "jest",
+    "test:watch": "npm test -- --watch",
+    "test:cover": "npm test -- --coverage",
+    "test:u": "npm test -- --updateSnapshot"
+  }
+}

packages/ui/src/atoms/Attachment.js

+import React from 'react'
+import Icon from './Icon'
+import classes from './Attachment.local.scss'
+
+const Attachment = ({ value }) => (
+  <a download={value.name} href={value.url}>
+    <span className={classes.icon}>
+      <Icon color="var(--color-primary)">paperclip</Icon>
+    </span>
+    <span className={classes.filename}>{value.name}</span>
+  </a>
+)
+
+export default Attachment