From 6bd85115729fffece760f66504a7d45b52807a69 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Thu, 7 Jun 2018 11:35:10 +0300
Subject: [PATCH] feat(ui): upgrade to pusweet v4
---
packages/component-wizard/package.json | 3 +-
.../src/components/WizardStep.js | 34 +++++++----
packages/components-faraday/package.json | 3 +-
.../src/components/Dashboard/DashboardCard.js | 5 +-
.../Dashboard/EditorInChiefActions.js | 1 +
.../Dashboard/HandlingEditorSection.js | 2 +-
.../components/MakeDecision/DecisionForm.js | 45 ++++----------
.../components/MakeRecommendation/StepOne.js | 17 ++++--
.../components/MakeRecommendation/StepTwo.js | 60 ++++++++++++-------
.../components/Reviewers/InviteReviewers.js | 1 +
.../src/components/UIComponents/FormItems.js | 38 +++++++++++-
.../app/config/journal/submit-wizard.js | 2 +-
packages/xpub-faraday/package.json | 3 +-
yarn.lock | 56 ++++++++++++++++-
14 files changed, 187 insertions(+), 83 deletions(-)
diff --git a/packages/component-wizard/package.json b/packages/component-wizard/package.json
index 72de7cfb3..0808310bd 100644
--- a/packages/component-wizard/package.json
+++ b/packages/component-wizard/package.json
@@ -9,7 +9,8 @@
"dist"
],
"dependencies": {
- "@pubsweet/ui": "^3.1.0",
+ "@pubsweet/ui": "4.1.3",
+ "@pubsweet/ui-toolkit": "latest",
"moment": "^2.20.1",
"react-dnd": "^2.5.4",
"react-dnd-html5-backend": "^2.5.4",
diff --git a/packages/component-wizard/src/components/WizardStep.js b/packages/component-wizard/src/components/WizardStep.js
index 869bbd53c..6846bee3f 100644
--- a/packages/component-wizard/src/components/WizardStep.js
+++ b/packages/component-wizard/src/components/WizardStep.js
@@ -50,18 +50,19 @@ export default ({
return null
}
return (
- <ValidatedField
- component={input => (
- <div data-test={fieldId}>
- <Comp {...rest} {...input} {...dispatchFns} />{' '}
- </div>
- )}
- format={format}
- key={fieldId}
- name={fieldId}
- parse={parse}
- validate={validate}
- />
+ <CustomValidatedField className="custom-field" key={fieldId}>
+ <ValidatedField
+ component={input => (
+ <div data-test={fieldId}>
+ <Comp {...rest} {...input} {...dispatchFns} />{' '}
+ </div>
+ )}
+ format={format}
+ name={fieldId}
+ parse={parse}
+ validate={validate}
+ />
+ </CustomValidatedField>
)
},
)}
@@ -90,6 +91,15 @@ export default ({
</Root>
)
// #region styles
+
+const CustomValidatedField = styled.div`
+ div {
+ div:last-child {
+ margin-top: 0;
+ }
+ }
+`
+
const Root = styled.div`
align-items: stretch;
background-color: ${th('colorTextReverse')};
diff --git a/packages/components-faraday/package.json b/packages/components-faraday/package.json
index e6e08d403..030679184 100644
--- a/packages/components-faraday/package.json
+++ b/packages/components-faraday/package.json
@@ -4,7 +4,8 @@
"main": "src",
"license": "MIT",
"dependencies": {
- "@pubsweet/ui": "^3.1.0",
+ "@pubsweet/ui": "4.1.3",
+ "@pubsweet/ui-toolkit": "latest",
"moment": "^2.22.1",
"prop-types": "^15.5.10",
"react": "^16.1.0",
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardCard.js b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
index 82f9a8698..f773064fb 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardCard.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
@@ -1,8 +1,9 @@
import React from 'react'
import { get } from 'lodash'
-import { connect } from 'react-redux'
import PropTypes from 'prop-types'
-import { Button, Icon, th } from '@pubsweet/ui'
+import { connect } from 'react-redux'
+import { th } from '@pubsweet/ui-toolkit'
+import { Button, Icon } from '@pubsweet/ui'
import styled, { css, withTheme } from 'styled-components'
import { compose, getContext, setDisplayName } from 'recompose'
import { DateParser } from 'pubsweet-components-faraday/src/components'
diff --git a/packages/components-faraday/src/components/Dashboard/EditorInChiefActions.js b/packages/components-faraday/src/components/Dashboard/EditorInChiefActions.js
index 342f530f1..271231414 100644
--- a/packages/components-faraday/src/components/Dashboard/EditorInChiefActions.js
+++ b/packages/components-faraday/src/components/Dashboard/EditorInChiefActions.js
@@ -170,6 +170,7 @@ const AssignButton = styled(Button)`
background-color: ${th('colorPrimary')};
color: ${th('colorTextReverse')};
height: calc(${th('subGridUnit')} * 5);
+ padding: 0;
text-align: center;
text-transform: uppercase;
`
diff --git a/packages/components-faraday/src/components/Dashboard/HandlingEditorSection.js b/packages/components-faraday/src/components/Dashboard/HandlingEditorSection.js
index b48d96eb0..0d9cd313f 100644
--- a/packages/components-faraday/src/components/Dashboard/HandlingEditorSection.js
+++ b/packages/components-faraday/src/components/Dashboard/HandlingEditorSection.js
@@ -37,7 +37,7 @@ const renderHE = (currentUser, project) => {
const HandlingEditorSection = ({ currentUser, project }) => (
<Root>
- <HEText>Handling Editor</HEText>
+ <HEText>Handling Editor?</HEText>
{renderHE(currentUser, project)}
</Root>
)
diff --git a/packages/components-faraday/src/components/MakeDecision/DecisionForm.js b/packages/components-faraday/src/components/MakeDecision/DecisionForm.js
index b7da20c1b..0ee253262 100644
--- a/packages/components-faraday/src/components/MakeDecision/DecisionForm.js
+++ b/packages/components-faraday/src/components/MakeDecision/DecisionForm.js
@@ -3,17 +3,10 @@ import { get } from 'lodash'
import { connect } from 'react-redux'
import { actions } from 'pubsweet-client'
import { required } from 'xpub-validators'
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
import { reduxForm, formValueSelector } from 'redux-form'
import { compose, setDisplayName, withProps } from 'recompose'
-import {
- th,
- Icon,
- Button,
- Spinner,
- RadioGroup,
- ValidatedField,
-} from '@pubsweet/ui'
+import { Icon, Button, Spinner, RadioGroup, ValidatedField } from '@pubsweet/ui'
import { FormItems } from '../UIComponents'
import {
@@ -34,6 +27,8 @@ const {
Subtitle,
RootContainer,
FormContainer,
+ CustomRadioGroup,
+ CustomValidatedField,
} = FormItems
const Form = RootContainer.withComponent(FormContainer)
@@ -70,6 +65,7 @@ const DecisionForm = ({
<ValidatedField
component={input => (
<CustomRadioGroup
+ className="custom-radio-group"
justify={reason ? 'space-between' : 'space-around'}
>
<RadioGroup
@@ -87,11 +83,13 @@ const DecisionForm = ({
<Row>
<RowItem vertical>
<Label>Comments for Handling Editor</Label>
- <ValidatedField
- component={input => <Textarea {...input} height={70} />}
- name="messageToHE"
- validate={[required]}
- />
+ <CustomValidatedField>
+ <ValidatedField
+ component={input => <Textarea {...input} height={70} />}
+ name="messageToHE"
+ validate={[required]}
+ />
+ </CustomValidatedField>
</RowItem>
</Row>
)}
@@ -163,12 +161,6 @@ export default compose(
)(DecisionForm)
// #region styled-components
-const defaultText = css`
- color: ${th('colorText')};
- font-family: ${th('fontReading')};
- font-size: ${th('fontSizeBaseSmall')};
-`
-
const IconButton = styled.div`
align-self: flex-end;
cursor: pointer;
@@ -185,17 +177,4 @@ const BoldSubtitle = Subtitle.extend`
font-weight: bold;
margin-left: 5px;
`
-
-const CustomRadioGroup = styled.div`
- div {
- flex-direction: row;
- justify-content: ${({ justify }) => justify || 'space-between'};
- label {
- span:last-child {
- font-style: normal;
- ${defaultText};
- }
- }
- }
-`
// #endregion
diff --git a/packages/components-faraday/src/components/MakeRecommendation/StepOne.js b/packages/components-faraday/src/components/MakeRecommendation/StepOne.js
index fc20adb61..6185a09a1 100644
--- a/packages/components-faraday/src/components/MakeRecommendation/StepOne.js
+++ b/packages/components-faraday/src/components/MakeRecommendation/StepOne.js
@@ -5,7 +5,7 @@ import { RadioGroup, ValidatedField, Button } from '@pubsweet/ui'
import { utils } from './'
import { FormItems } from '../UIComponents'
-const { RootContainer, Row, RowItem, Title } = FormItems
+const { Row, Title, RowItem, RootContainer, CustomRadioGroup } = FormItems
const StepOne = ({ hideModal, disabled, onSubmit }) => (
<RootContainer>
@@ -14,11 +14,16 @@ const StepOne = ({ hideModal, disabled, onSubmit }) => (
<RowItem>
<ValidatedField
component={input => (
- <RadioGroup
- name="decision"
- options={utils.recommendationOptions}
- {...input}
- />
+ <CustomRadioGroup
+ className="custom-radio-group"
+ justify="space-between"
+ >
+ <RadioGroup
+ name="decision"
+ options={utils.recommendationOptions}
+ {...input}
+ />
+ </CustomRadioGroup>
)}
name="decision"
/>
diff --git a/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js b/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js
index 2e554d6cc..ef6faf07e 100644
--- a/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js
+++ b/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js
@@ -26,6 +26,8 @@ const {
Textarea,
RootContainer,
FormContainer,
+ CustomRadioGroup,
+ CustomValidatedField,
} = FormItems
const Form = RootContainer.withComponent(FormContainer)
@@ -51,19 +53,23 @@ const StepTwo = ({
<Row>
<RowItem vertical>
<Label>Message for Editor in Chief (optional)</Label>
- <ValidatedField
- component={input => <Textarea {...input} height={70} />}
- name="message.eic"
- />
+ <CustomValidatedField>
+ <ValidatedField
+ component={input => <Textarea {...input} height={70} />}
+ name="message.eic"
+ />
+ </CustomValidatedField>
</RowItem>
</Row>
<Row>
<RowItem vertical>
<Label>Message for Author (optional)</Label>
- <ValidatedField
- component={input => <Textarea {...input} height={70} />}
- name="message.author"
- />
+ <CustomValidatedField>
+ <ValidatedField
+ component={input => <Textarea {...input} height={70} />}
+ name="message.author"
+ />
+ </CustomValidatedField>
</RowItem>
</Row>
{recommendationError && (
@@ -81,11 +87,13 @@ const StepTwo = ({
<Label>REVISION TYPE</Label>
<ValidatedField
component={input => (
- <RadioGroup
- name="revision.revision-type"
- {...input}
- options={utils.revisionOptions}
- />
+ <CustomRadioGroup justify="flex-start">
+ <RadioGroup
+ name="revision.revision-type"
+ {...input}
+ options={utils.revisionOptions}
+ />
+ </CustomRadioGroup>
)}
name="revision.revisionType"
validate={[required]}
@@ -98,11 +106,13 @@ const StepTwo = ({
REASON & DETAILS
<SubLabel>Required</SubLabel>
</Label>
- <ValidatedField
- component={input => <Textarea {...input} />}
- name="revision.reason"
- validate={[required]}
- />
+ <CustomValidatedField>
+ <ValidatedField
+ component={input => <Textarea {...input} />}
+ name="revision.reason"
+ validate={[required]}
+ />
+ </CustomValidatedField>
</RowItem>
</CustomRow>
{!hasNote ? (
@@ -130,10 +140,12 @@ const StepTwo = ({
</CustomRow>
<CustomRow>
<RowItem>
- <ValidatedField
- component={input => <Textarea {...input} height={70} />}
- name="revision.internal-note"
- />
+ <CustomValidatedField>
+ <ValidatedField
+ component={input => <Textarea {...input} height={70} />}
+ name="revision.internal-note"
+ />
+ </CustomValidatedField>
</RowItem>
</CustomRow>
</Fragment>
@@ -210,6 +222,10 @@ const IconButton = styled.div`
const CustomRowItem = RowItem.extend`
align-items: center;
justify-content: flex-end;
+
+ & > div {
+ flex: 0;
+ }
`
const CustomRow = Row.extend`
diff --git a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js b/packages/components-faraday/src/components/Reviewers/InviteReviewers.js
index bee6e98b5..97b238237 100644
--- a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js
+++ b/packages/components-faraday/src/components/Reviewers/InviteReviewers.js
@@ -193,6 +193,7 @@ const AssignButton = styled(Button)`
background-color: ${th('colorPrimary')};
color: ${th('colorTextReverse')};
height: calc(${th('subGridUnit')} * 5);
+ padding: 0;
text-align: center;
`
// #endregion
diff --git a/packages/components-faraday/src/components/UIComponents/FormItems.js b/packages/components-faraday/src/components/UIComponents/FormItems.js
index 844b841f2..09c1b2799 100644
--- a/packages/components-faraday/src/components/UIComponents/FormItems.js
+++ b/packages/components-faraday/src/components/UIComponents/FormItems.js
@@ -1,5 +1,11 @@
import { th } from '@pubsweet/ui'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
+
+const defaultText = css`
+ color: ${th('colorText')};
+ font-family: ${th('fontReading')};
+ font-size: ${th('fontSizeBaseSmall')};
+`
export const RootContainer = styled.div`
background-color: ${th('backgroundColorReverse')};
@@ -52,6 +58,10 @@ export const RowItem = styled.div`
flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')};
justify-content: ${({ centered }) => (centered ? 'center' : 'initial')};
margin: 0 ${th('subGridUnit')};
+
+ & > div {
+ flex: 1;
+ }
`
export const Label = styled.div`
@@ -76,7 +86,7 @@ export const Textarea = styled.textarea`
hasError ? th('colorError') : th('colorPrimary')};
font-size: ${th('fontSizeBaseSmall')};
font-family: ${th('fontWriting')};
- padding: calc(${th('subGridUnit')}*2);
+ padding: ${th('subGridUnit')};
outline: none;
transition: all 300ms linear;
@@ -92,3 +102,27 @@ export const Textarea = styled.textarea`
background-color: ${th('colorBackgroundHue')};
}
`
+
+export const CustomRadioGroup = styled.div`
+ div {
+ flex-direction: row;
+ justify-content: ${({ justify }) => justify || 'space-between'};
+ label {
+ span:last-child {
+ font-style: normal;
+ ${defaultText};
+ }
+ }
+ }
+ & ~ div {
+ margin-top: 0;
+ }
+`
+
+export const CustomValidatedField = styled.div`
+ div {
+ div:last-child {
+ margin-top: 0;
+ }
+ }
+`
diff --git a/packages/xpub-faraday/app/config/journal/submit-wizard.js b/packages/xpub-faraday/app/config/journal/submit-wizard.js
index 8654c6a2e..5d56d7f97 100644
--- a/packages/xpub-faraday/app/config/journal/submit-wizard.js
+++ b/packages/xpub-faraday/app/config/journal/submit-wizard.js
@@ -102,7 +102,7 @@ export default {
label: 'Manuscript & Authors Details',
title: '3. Manuscript & Authors Details',
subtitle:
- 'Please provide the details of all the authors of this manuscript, in the order that they appear on the manuscript. Your details are already pre-filled since, in order tu submit a manuscript you must be one of the authors',
+ 'Please provide the details of all the authors of this manuscript, in the order that they appear on the manuscript. Your details are already pre-filled since, in order tu submit a manuscript you must be one of the authors.',
children: [
{
fieldId: 'metadata.title',
diff --git a/packages/xpub-faraday/package.json b/packages/xpub-faraday/package.json
index ff555499c..af02408c9 100644
--- a/packages/xpub-faraday/package.json
+++ b/packages/xpub-faraday/package.json
@@ -8,7 +8,8 @@
"url": "https://gitlab.coko.foundation/xpub/xpub-faraday"
},
"dependencies": {
- "@pubsweet/ui": "^3.2.0",
+ "@pubsweet/ui": "4.1.3",
+ "@pubsweet/ui-toolkit": "latest",
"@pubsweet/component-aws-s3": "^1.0.4",
"aws-sdk": "^2.197.0",
"babel-core": "^6.26.0",
diff --git a/yarn.lock b/yarn.lock
index 50f540d30..13f78b9bf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -164,6 +164,14 @@
typeface-fira-sans-condensed "^0.0.43"
typeface-vollkorn "^0.0.43"
+"@pubsweet/ui-toolkit@latest":
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/@pubsweet/ui-toolkit/-/ui-toolkit-1.0.0.tgz#df05b54e7bbfabcb10c7afc2991752e1087d2298"
+ dependencies:
+ color "^3.0.0"
+ lodash "^4.17.4"
+ styled-components "^3.2.5"
+
"@pubsweet/ui@3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@pubsweet/ui/-/ui-3.0.0.tgz#b8915ce2b2729e66fd5628ecf7855f1d740270a5"
@@ -186,6 +194,28 @@
redux-form "^7.0.3"
styled-components "^2.4.0"
+"@pubsweet/ui@4.1.3":
+ version "4.1.3"
+ resolved "https://registry.yarnpkg.com/@pubsweet/ui/-/ui-4.1.3.tgz#a8c65aa69618505a1e3777f4d18c3d676b800ee9"
+ dependencies:
+ babel-jest "^21.2.0"
+ classnames "^2.2.5"
+ enzyme "^3.2.0"
+ enzyme-adapter-react-16 "^1.1.1"
+ invariant "^2.2.3"
+ lodash "^4.17.4"
+ prop-types "^15.5.10"
+ react "^16.2.0"
+ react-dom "^16.2.0"
+ react-feather "^1.0.8"
+ react-redux "^5.0.2"
+ react-router-dom "^4.2.2"
+ react-tag-autocomplete "^5.5.0"
+ recompose "^0.26.0"
+ redux "^3.6.0"
+ redux-form "^7.0.3"
+ styled-components "^3.2.5"
+
"@pubsweet/ui@^3.1.0":
version "3.1.0"
resolved "https://registry.yarnpkg.com/@pubsweet/ui/-/ui-3.1.0.tgz#24c25c29fc36e34b9f654fe4378502232f8204fa"
@@ -2145,7 +2175,7 @@ collapse-white-space@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.3.tgz#4b906f670e5a963a87b76b0e1689643341b6023c"
-color-convert@^1.3.0, color-convert@^1.9.0:
+color-convert@^1.3.0, color-convert@^1.9.0, color-convert@^1.9.1:
version "1.9.1"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
dependencies:
@@ -2161,6 +2191,13 @@ color-string@^0.3.0:
dependencies:
color-name "^1.0.0"
+color-string@^1.5.2:
+ version "1.5.2"
+ resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.2.tgz#26e45814bc3c9a7cbd6751648a41434514a773a9"
+ dependencies:
+ color-name "^1.0.0"
+ simple-swizzle "^0.2.2"
+
color@^0.11.0:
version "0.11.4"
resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764"
@@ -2169,6 +2206,13 @@ color@^0.11.0:
color-convert "^1.3.0"
color-string "^0.3.0"
+color@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/color/-/color-3.0.0.tgz#d920b4328d534a3ac8295d68f7bd4ba6c427be9a"
+ dependencies:
+ color-convert "^1.9.1"
+ color-string "^1.5.2"
+
colormin@^1.0.5:
version "1.1.2"
resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133"
@@ -4746,6 +4790,10 @@ is-arrayish@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+is-arrayish@^0.3.1:
+ version "0.3.1"
+ resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.1.tgz#c2dfc386abaa0c3e33c48db3fe87059e69065efd"
+
is-binary-path@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
@@ -8793,6 +8841,12 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+simple-swizzle@^0.2.2:
+ version "0.2.2"
+ resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+ dependencies:
+ is-arrayish "^0.3.1"
+
slash@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
--
GitLab