From 600453dca0c4f93410ab75871344c468642914d2 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Tue, 14 Aug 2018 09:55:29 +0300
Subject: [PATCH] feat(hindawi-styleguide): setup styleguidist

---
 packages/component-faraday-ui/package.json    |  4 +-
 packages/component-faraday-ui/src/Label.js    | 25 ++++++++
 packages/component-faraday-ui/src/Label.md    | 11 ++++
 .../component-faraday-ui/src/PersonInfo.js    | 20 ++++++
 .../component-faraday-ui/src/PersonInfo.md    |  5 ++
 .../src/gridItems/Item.js                     |  5 ++
 .../src/gridItems/Item.md                     |  5 ++
 packages/component-manuscript/package.json    |  2 +-
 packages/component-modal/package.json         |  2 +-
 packages/component-sortable-list/package.json |  2 +-
 packages/component-wizard/package.json        |  4 +-
 packages/components-faraday/package.json      |  4 +-
 packages/hindawi-theme/package.json           |  2 +-
 .../hindawi-theme/src/elements/Heading.js     | 17 +++++
 packages/hindawi-theme/src/elements/index.js  |  3 +-
 packages/hindawi-theme/src/index.js           | 27 +++++---
 .../styleguide/src/{config => }/Wrapper.js    |  0
 packages/styleguide/src/components/Button.js  |  6 --
 packages/styleguide/src/components/Button.md  |  5 --
 packages/styleguide/src/webpack-config.js     |  1 -
 packages/styleguide/styleguide.config.js      | 13 +++-
 packages/xpub-faraday/package.json            |  2 +-
 yarn.lock                                     | 64 ++++++-------------
 23 files changed, 151 insertions(+), 78 deletions(-)
 create mode 100644 packages/component-faraday-ui/src/Label.js
 create mode 100644 packages/component-faraday-ui/src/Label.md
 create mode 100644 packages/component-faraday-ui/src/PersonInfo.js
 create mode 100644 packages/component-faraday-ui/src/PersonInfo.md
 create mode 100644 packages/component-faraday-ui/src/gridItems/Item.js
 create mode 100644 packages/component-faraday-ui/src/gridItems/Item.md
 create mode 100644 packages/hindawi-theme/src/elements/Heading.js
 rename packages/styleguide/src/{config => }/Wrapper.js (100%)
 delete mode 100644 packages/styleguide/src/components/Button.js
 delete mode 100644 packages/styleguide/src/components/Button.md

diff --git a/packages/component-faraday-ui/package.json b/packages/component-faraday-ui/package.json
index 7e3257b54..e7dd2ab38 100644
--- a/packages/component-faraday-ui/package.json
+++ b/packages/component-faraday-ui/package.json
@@ -6,7 +6,9 @@
   "dependencies": {
     "@pubsweet/ui": "^8.3.0",
     "@pubsweet/ui-toolkit": "^1.2.0",
+    "prop-types": "^15.6.2",
     "react": "^16.4.2",
-    "styled-components": "^3.4.2"
+    "styled-components": "^3.4.2",
+    "grid-styled": "5.0.2"
   }
 }
diff --git a/packages/component-faraday-ui/src/Label.js b/packages/component-faraday-ui/src/Label.js
new file mode 100644
index 000000000..ad71e206b
--- /dev/null
+++ b/packages/component-faraday-ui/src/Label.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import { H4 } from '@pubsweet/ui'
+import styled from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+
+const Label = ({ children, required = false }) => (
+  <Root>
+    <H4>{children}</H4>
+    {required && <Required>*</Required>}
+  </Root>
+)
+
+export default Label
+
+// #region styles
+const Required = styled.span`
+  color: ${th('colorError')};
+  margin-left: calc(${th('gridUnit')} / 4);
+`
+
+const Root = styled.div`
+  align-items: center;
+  display: flex;
+`
+// #endregion
diff --git a/packages/component-faraday-ui/src/Label.md b/packages/component-faraday-ui/src/Label.md
new file mode 100644
index 000000000..e70476a76
--- /dev/null
+++ b/packages/component-faraday-ui/src/Label.md
@@ -0,0 +1,11 @@
+A generic label.
+
+```js
+<Label>First name</Label>
+```
+
+A required label.
+
+```js
+<Label required>Email</Label>
+```
diff --git a/packages/component-faraday-ui/src/PersonInfo.js b/packages/component-faraday-ui/src/PersonInfo.js
new file mode 100644
index 000000000..5b1585c20
--- /dev/null
+++ b/packages/component-faraday-ui/src/PersonInfo.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import styled from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+import { Box } from 'grid-styled'
+
+import Text from './Text'
+import Label from './Label'
+
+const PersonInfo = () => (
+  <Box>
+    <Label>Email</Label>
+    <Text>alexandru.munt@gmail.com</Text>
+  </Box>
+)
+
+export default PersonInfo
+
+// #region styles
+
+// #endregion
diff --git a/packages/component-faraday-ui/src/PersonInfo.md b/packages/component-faraday-ui/src/PersonInfo.md
new file mode 100644
index 000000000..891b4445a
--- /dev/null
+++ b/packages/component-faraday-ui/src/PersonInfo.md
@@ -0,0 +1,5 @@
+Details of a person.
+
+```js
+<PersonInfo />
+```
diff --git a/packages/component-faraday-ui/src/gridItems/Item.js b/packages/component-faraday-ui/src/gridItems/Item.js
new file mode 100644
index 000000000..6c3e74574
--- /dev/null
+++ b/packages/component-faraday-ui/src/gridItems/Item.js
@@ -0,0 +1,5 @@
+import styled from 'styled-components'
+
+export default styled.div`
+  background-color: red;
+`
diff --git a/packages/component-faraday-ui/src/gridItems/Item.md b/packages/component-faraday-ui/src/gridItems/Item.md
new file mode 100644
index 000000000..bc3a2f4c6
--- /dev/null
+++ b/packages/component-faraday-ui/src/gridItems/Item.md
@@ -0,0 +1,5 @@
+An item.
+
+```js
+<Item>wai nebun</Item>
+```
diff --git a/packages/component-manuscript/package.json b/packages/component-manuscript/package.json
index abfb79dda..c2500a775 100644
--- a/packages/component-manuscript/package.json
+++ b/packages/component-manuscript/package.json
@@ -11,7 +11,7 @@
   },
   "peerDependencies": {
     "pubsweet-client": "^4.0.4",
-    "react": ">=16",
+    "react": "^16.4.2",
     "react-redux": ">=5.0.2",
     "react-router-dom": ">=4.2.2"
   }
diff --git a/packages/component-modal/package.json b/packages/component-modal/package.json
index d24ae2f41..ecb87e00a 100644
--- a/packages/component-modal/package.json
+++ b/packages/component-modal/package.json
@@ -4,7 +4,7 @@
   "main": "src",
   "license": "MIT",
   "dependencies": {
-    "react": "^16.2.0",
+    "react": "^16.4.2",
     "react-dom": "^16.2.0",
     "react-redux": "^5.0.7"
   }
diff --git a/packages/component-sortable-list/package.json b/packages/component-sortable-list/package.json
index 3ff0d8c6b..8914a5d0f 100644
--- a/packages/component-sortable-list/package.json
+++ b/packages/component-sortable-list/package.json
@@ -4,7 +4,7 @@
   "main": "src",
   "license": "MIT",
   "dependencies": {
-    "react": "^15.6.1",
+    "react": "^16.4.2",
     "react-dnd": "^2.5.4",
     "react-dom": "^15.6.1",
     "recompose": "^0.26.0"
diff --git a/packages/component-wizard/package.json b/packages/component-wizard/package.json
index 376527af6..830db5fae 100644
--- a/packages/component-wizard/package.json
+++ b/packages/component-wizard/package.json
@@ -24,12 +24,12 @@
     "xpub-connect": "1.0.0",
     "xpub-journal": "^0.0.6",
     "xpub-selectors": "^0.1.0",
-    "styled-components": "^3.1.6"
+    "styled-components": "^3.4.2"
   },
   "peerDependencies": {
     "prop-types": "^15.5.10",
     "pubsweet-client": "^4.0.4",
-    "react": "^15.6.1",
+    "react": "^16.4.2",
     "react-dom": "^15.6.1",
     "react-redux": "^5.0.2",
     "react-router-dom": "^4.2.2"
diff --git a/packages/components-faraday/package.json b/packages/components-faraday/package.json
index 6adc655e1..5e7fe0068 100644
--- a/packages/components-faraday/package.json
+++ b/packages/components-faraday/package.json
@@ -9,7 +9,7 @@
     "@pubsweet/styleguide": "3.1.4",
     "moment": "^2.22.1",
     "prop-types": "^15.5.10",
-    "react": "^16.1.0",
+    "react": "^16.4.2",
     "react-dnd": "^2.5.4",
     "react-dnd-html5-backend": "^2.5.4",
     "react-dom": "^16.1.0",
@@ -18,7 +18,7 @@
     "recompose": "^0.26.0",
     "redux": "^3.6.0",
     "redux-form": "7.0.3",
-    "styled-components": "^3.1.6"
+    "styled-components": "^3.4.2"
   },
   "scripts": {
     "test": "jest"
diff --git a/packages/hindawi-theme/package.json b/packages/hindawi-theme/package.json
index 00fd5bb9d..be7b255ec 100644
--- a/packages/hindawi-theme/package.json
+++ b/packages/hindawi-theme/package.json
@@ -5,6 +5,6 @@
   "license": "MIT",
   "dependencies": {
     "@pubsweet/ui-toolkit": "^1.1.3",
-    "styled-components": "^3.2.5"
+    "styled-components": "^3.4.2"
   }
 }
diff --git a/packages/hindawi-theme/src/elements/Heading.js b/packages/hindawi-theme/src/elements/Heading.js
new file mode 100644
index 000000000..ec5cf96c3
--- /dev/null
+++ b/packages/hindawi-theme/src/elements/Heading.js
@@ -0,0 +1,17 @@
+import { css } from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+
+export default {
+  H1: css`
+    color: ${th('heading.h1Color')};
+  `,
+  H2: css`
+    color: ${th('heading.h2Color')};
+  `,
+  H3: css`
+    color: ${th('heading.h3Color')};
+  `,
+  H4: css`
+    color: ${th('heading.h4Color')};
+  `,
+}
diff --git a/packages/hindawi-theme/src/elements/index.js b/packages/hindawi-theme/src/elements/index.js
index ea8f3a3da..05d4a577f 100644
--- a/packages/hindawi-theme/src/elements/index.js
+++ b/packages/hindawi-theme/src/elements/index.js
@@ -1,8 +1,9 @@
 import Icon from './Icon'
 import Menu from './Menu'
 import Button from './Button'
+import Heading from './Heading'
 import Checkbox from './Checkbox'
 import TextField from './TextField'
 import ValidatedTextField from './ValidatedTextField'
 
-export { Icon, Menu, Checkbox, Button, TextField, ValidatedTextField }
+export { Icon, Menu, Checkbox, Heading, Button, TextField, ValidatedTextField }
diff --git a/packages/hindawi-theme/src/index.js b/packages/hindawi-theme/src/index.js
index 11ba6efc6..55aab9148 100644
--- a/packages/hindawi-theme/src/index.js
+++ b/packages/hindawi-theme/src/index.js
@@ -6,6 +6,7 @@ import {
   Icon,
   Menu,
   Button,
+  Heading,
   Checkbox,
   TextField,
   ValidatedTextField,
@@ -36,6 +37,13 @@ const hindawiTheme = {
   colorTextPlaceholder: '#595959',
   colorWarning: '#FC6A4B',
 
+  heading: {
+    h1Color: '#589eb8',
+    h2Color: '#007e92',
+    h3Color: '#242424',
+    h4Color: '#003049',
+  },
+
   button: {
     borderActive: 'rgba(0,0,0,0.34)',
     borderDefault: 'rgba(0,0,0,0.14)',
@@ -124,14 +132,17 @@ const hindawiTheme = {
   modalIndex: 10000,
 
   cssOverrides: {
-    ui: {
-      Icon,
-      Menu,
-      Button,
-      Checkbox,
-      TextField,
-      ValidatedTextField,
-    },
+    ui: Object.assign(
+      {
+        Icon,
+        Menu,
+        Button,
+        Checkbox,
+        TextField,
+        ValidatedTextField,
+      },
+      Heading,
+    ),
   },
 }
 
diff --git a/packages/styleguide/src/config/Wrapper.js b/packages/styleguide/src/Wrapper.js
similarity index 100%
rename from packages/styleguide/src/config/Wrapper.js
rename to packages/styleguide/src/Wrapper.js
diff --git a/packages/styleguide/src/components/Button.js b/packages/styleguide/src/components/Button.js
deleted file mode 100644
index 978fbbffa..000000000
--- a/packages/styleguide/src/components/Button.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-import { Button } from '@pubsweet/ui'
-
-const B = () => <Button primary>ceva aici</Button>
-
-export default B
diff --git a/packages/styleguide/src/components/Button.md b/packages/styleguide/src/components/Button.md
deleted file mode 100644
index 0da8866ab..000000000
--- a/packages/styleguide/src/components/Button.md
+++ /dev/null
@@ -1,5 +0,0 @@
-Button example
-
-```js
-<B />
-```
diff --git a/packages/styleguide/src/webpack-config.js b/packages/styleguide/src/webpack-config.js
index dc1e10097..145c5eddf 100644
--- a/packages/styleguide/src/webpack-config.js
+++ b/packages/styleguide/src/webpack-config.js
@@ -62,7 +62,6 @@ module.exports = dir => {
     ],
     resolve: {
       alias: {
-        joi: 'joi-browser',
         'styled-components': path.resolve(
           '../../',
           'node_modules',
diff --git a/packages/styleguide/styleguide.config.js b/packages/styleguide/styleguide.config.js
index 98c42dfba..db2e28491 100644
--- a/packages/styleguide/styleguide.config.js
+++ b/packages/styleguide/styleguide.config.js
@@ -1,8 +1,17 @@
 const path = require('path')
 
 module.exports = {
-  components: ['src/components/**/*.js', '../component-faraday-ui/src/**/*.js'],
+  sections: [
+    {
+      name: 'Hinadwi UI',
+      components: ['../component-faraday-ui/src/*.js'],
+    },
+    {
+      name: 'Grid Items',
+      components: ['../component-faraday-ui/src/gridItems/*.js'],
+    },
+  ],
   styleguideComponents: {
-    Wrapper: path.join(__dirname, 'src/config/Wrapper'),
+    Wrapper: path.join(__dirname, 'src/Wrapper'),
   },
 }
diff --git a/packages/xpub-faraday/package.json b/packages/xpub-faraday/package.json
index 64179782c..3cc0c2dc9 100644
--- a/packages/xpub-faraday/package.json
+++ b/packages/xpub-faraday/package.json
@@ -31,7 +31,7 @@
     "pubsweet-server": "2.0.3",
     "pubsweet-component-login": "^1.1.0",
     "pubsweet-component-signup": "^1.0.0",
-    "react": "^16.2.0",
+    "react": "^16.4.2",
     "react-dnd": "^2.5.4",
     "react-dnd-html5-backend": "^2.5.4",
     "react-dom": "^16.2.0",
diff --git a/yarn.lock b/yarn.lock
index 206e105ff..c8427675f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2862,14 +2862,6 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-class@^15.6.0:
-  version "15.6.3"
-  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
-  dependencies:
-    fbjs "^0.8.9"
-    loose-envify "^1.3.1"
-    object-assign "^4.1.1"
-
 cross-spawn@5.1.0, cross-spawn@^5.0.1, cross-spawn@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -4921,6 +4913,12 @@ graphql@^0.13.0:
   dependencies:
     iterall "^1.2.1"
 
+grid-styled@5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/grid-styled/-/grid-styled-5.0.2.tgz#1e81d7d5bde50a9b43d81cf111b81399126fe595"
+  dependencies:
+    system-components "^3.0.0"
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -5137,10 +5135,6 @@ hoek@5.x.x:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-5.0.3.tgz#b71d40d943d0a95da01956b547f83c4a5b4a34ac"
 
-hoist-non-react-statics@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
-
 hoist-non-react-statics@^2.1.0, hoist-non-react-statics@^2.3.0, hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40"
@@ -9511,17 +9505,7 @@ react-transition-group@^2.0.0, react-transition-group@^2.2.0:
     prop-types "^15.5.8"
     warning "^3.0.0"
 
-react@^15.6.1:
-  version "15.6.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"
-  dependencies:
-    create-react-class "^15.6.0"
-    fbjs "^0.8.9"
-    loose-envify "^1.1.0"
-    object-assign "^4.1.0"
-    prop-types "^15.5.10"
-
-react@^16.1.0, react@^16.2.0:
+react@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
   dependencies:
@@ -10942,20 +10926,6 @@ style-search@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
 
-styled-components@^3.1.6:
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.1.6.tgz#9c443146fa82c6659a9f64dd493bf2202480342e"
-  dependencies:
-    buffer "^5.0.3"
-    css-to-react-native "^2.0.3"
-    fbjs "^0.8.9"
-    hoist-non-react-statics "^1.2.0"
-    is-plain-object "^2.0.1"
-    prop-types "^15.5.4"
-    stylis "^3.4.0"
-    stylis-rule-sheet "^0.0.7"
-    supports-color "^3.2.3"
-
 styled-components@^3.2.5:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.2.6.tgz#99e6e75a746bdedd295a17e03dd1493055a1cc3b"
@@ -10989,6 +10959,12 @@ styled-normalize@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/styled-normalize/-/styled-normalize-3.0.1.tgz#217efb96598690addd04699ca71af0db3473fea2"
 
+styled-system@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-3.0.2.tgz#2189a6d829117d212fb6ac8ebc4260fdb75d1109"
+  dependencies:
+    prop-types "^15.6.2"
+
 stylelint-config-pubsweet@^0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/stylelint-config-pubsweet/-/stylelint-config-pubsweet-0.0.3.tgz#1f2284a5ffca26dcfa6bfee225b6f65bbcb2d2f5"
@@ -11063,14 +11039,6 @@ stylis-rule-sheet@^0.0.10:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
 
-stylis-rule-sheet@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.7.tgz#5c51dc879141a61821c2094ba91d2cbcf2469c6c"
-
-stylis@^3.4.0:
-  version "3.4.10"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.10.tgz#a135cab4b9ff208e327fbb5a6fde3fa991c638ee"
-
 stylis@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.0.tgz#016fa239663d77f868fef5b67cf201c4b7c701e1"
@@ -11163,6 +11131,12 @@ symbol-tree@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
 
+system-components@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/system-components/-/system-components-3.0.0.tgz#073e7c6712012c3c17375bae3ae986cb81866347"
+  dependencies:
+    styled-system "^3.0.1"
+
 table@4.0.2, table@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36"
-- 
GitLab