packages/component-faraday-ui/src/Label.js

@@ -2,16 +2,25 @@ import React from 'react'
 import { H4 } from '@pubsweet/ui'
 import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
+import PropTypes from 'prop-types'
 
 import { marginHelper } from './'
 
-const Label = ({ children, required = false, ...rest }) => (
+const Label = ({ children, required, ...rest }) => (
   <Root {...rest}>
     <H4>{children}</H4>
     {required && <Required>*</Required>}
   </Root>
 )
 
+Label.propTypes = {
+  /** If true the label is required. */
+  required: PropTypes.bool,
+}
+
+Label.defaultProps = {
+  required: false,
+}
 export default Label
 
 // #region styles

packages/component-faraday-ui/src/Logo.js

@@ -2,8 +2,9 @@
 
 import React from 'react'
 import { get } from 'lodash'
+import PropTypes from 'prop-types'
 
-const Logo = ({ src, onClick, title, height = 36, ...rest }) => (
+const Logo = ({ src, onClick, title, height, ...rest }) => (
   <img
     alt={title}
     data-test-id={get(rest, 'data-test-id', 'journal-logo')}
@@ -14,4 +15,12 @@ const Logo = ({ src, onClick, title, height = 36, ...rest }) => (
   />
 )
 
+Logo.propTypes = {
+  /** Height of the logo. */
+  height: PropTypes.number,
+}
+
+Logo.defaultProps = {
+  height: 36,
+}
 export default Logo

packages/component-faraday-ui/src/ManuscriptCard.js

@@ -4,8 +4,8 @@ import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 import { withJournal } from 'xpub-journal'
 import { H3, H4, DateParser } from '@pubsweet/ui'
+import PropTypes from 'prop-types'
 import { compose, withHandlers, setDisplayName, withProps } from 'recompose'
-
 import {
   Tag,
   Text,
@@ -18,7 +18,6 @@ import {
   AuthorTagList,
   ReviewerBreakdown,
 } from './'
-
 import { OpenModal } from './modals'
 
 const ManuscriptCard = ({
@@ -27,7 +26,7 @@ const ManuscriptCard = ({
   isFetching,
   onCardClick,
   canViewReports,
-  fragment = {},
+  fragment,
   manuscriptType = {},
   collection: { visibleStatus = 'Draft', handlingEditor, customId, id: collId },
 }) => {
@@ -54,7 +53,7 @@ const ManuscriptCard = ({
             <AuthorTagList authors={authors} withTooltip />
           </Row>
         )}
-        <Row alignItems="center" justify="flex-start" mb={1}>
+        <Row alignItems="center" justify="flex-start">
           {customId && <Text customId mr={1}>{`ID ${customId}`}</Text>}
           {submitted && (
             <DateParser humanizeThreshold={0} timestamp={submitted}>
@@ -73,7 +72,7 @@ const ManuscriptCard = ({
               </Text>
             )}
         </Row>
-        <Row alignItems="center" justify="flex-start" mb={1}>
+        <Row alignItems="center" justify="flex-start">
           <H4>Handling editor</H4>
           <Text ml={1} mr={3} whiteSpace="nowrap">
             {get(handlingEditor, 'name', 'Unassigned')}
@@ -94,17 +93,15 @@ const ManuscriptCard = ({
                 title="Are you sure you want to delete this submission?"
               >
                 {showModal => (
-                  <ActionLink>
-                    <DeleteIcon
-                      fontIcon="deleteIcon"
-                      onClick={showModal}
-                      paddingBottom={2}
-                      paddingRight={0}
-                      size={1.6}
-                    >
-                      DELETE
-                    </DeleteIcon>
-                  </ActionLink>
+                  <DeleteIcon
+                    fontIcon="deleteIcon"
+                    onClick={showModal}
+                    paddingBottom={2}
+                    paddingRight={0}
+                    size={1.65}
+                  >
+                    Delete
+                  </DeleteIcon>
                 )}
               </OpenModal>
             </Item>
@@ -117,7 +114,6 @@ const ManuscriptCard = ({
     </Root>
   )
 }
-
 export default compose(
   withJournal,
   withHandlers({
@@ -139,8 +135,27 @@ export default compose(
   ),
   setDisplayName('ManuscriptCard'),
 )(ManuscriptCard)
-
 // #region styles
+
+ManuscriptCard.propTypes = {
+  fragment: PropTypes.shape({
+    authors: PropTypes.arrayOf(PropTypes.object),
+    created: PropTypes.string,
+    submitted: PropTypes.number,
+    metadata: PropTypes.object,
+  }), // eslint-disable-line
+  collection: PropTypes.shape({
+    customId: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    visibleStatus: PropTypes.string,
+    handlingEditor: PropTypes.object,
+  }), // eslint-disable-line
+}
+
+ManuscriptCard.defaultProps = {
+  fragment: {},
+  collection: {},
+}
+
 const MainContainer = styled.div`
   justify-content: flex-start;
   display: flex;
@@ -150,7 +165,6 @@ const MainContainer = styled.div`
   padding-bottom: ${th('gridUnit')};
   width: calc(100% - (${th('gridUnit')} * 5 / 2));
   overflow: hidden;
-
   ${Row} {
     [data-tooltipped] {
       overflow: hidden;
@@ -168,7 +182,10 @@ const MainContainer = styled.div`
     }
   }
 `
-const DeleteIcon = styled(ActionLink)``
+const DeleteIcon = styled(ActionLink)`
+  cursor: default;
+  color: ${th('colorWarning')};
+`
 
 const SideNavigation = styled.div`
   align-items: center;
@@ -180,7 +197,6 @@ const SideNavigation = styled.div`
   display: flex;
   width: calc(${th('gridUnit')} * 5 / 2);
 `
-
 const Root = styled.div`
   background-color: #fff;
   border-radius: ${th('borderRadius')};
@@ -189,14 +205,11 @@ const Root = styled.div`
   display: flex;
   margin: calc(${th('gridUnit')} / 4) calc(${th('gridUnit')} / 4)
     ${th('gridUnit')} calc(${th('gridUnit')} / 4);
-
   &:hover {
     box-shadow: ${th('dashboardCard.hoverShadow')};
   }
-
   ${H3} {
     margin: 0;
     margin-bottom: ${th('gridUnit')};
   }
 `
-// #endregion

packages/component-faraday-ui/src/ManuscriptCard.md

@@ -3,12 +3,14 @@ A manuscript card.
 ```js
 const authors = [
   {
+    id:1,
     email: 'john.doe@gmail.com',
     firstName: 'John',
     lastName: 'Doe',
     isSubmitting: true,
   },
   {
+    id:2,
     email: 'michael.felps@gmail.com',
     firstName: 'Michael',
     lastName: 'Felps',
@@ -16,70 +18,35 @@ const authors = [
     isCorresponding: true,
   },
   {
+    id:3,
     email: 'barrack.obama@gmail.com',
     firstName: 'Barrack',
     lastName: 'Obama',
   },
   {
+    id:5,
     email: 'barrack.obama@gmail1.com',
     firstName: 'Barrack 1',
     lastName: 'Obama',
   },
   {
+    id:6,
     email: 'barrack.obama@gmail2.com',
     firstName: 'Barrack 2',
     lastName: 'Obama',
   },
   {
+    id:7,
     email: 'barrack.obama@gmail3.com',
     firstName: 'Barrack 3',
     lastName: 'Obama',
   },
   {
+    id:8,
     email: 'barrack.obama@gmail4.com',
     firstName: 'Barrack 4',
     lastName: 'Obama',
   },
-  {
-    email: 'barrack.obama@gmail5.com',
-    firstName: 'Barrack 5',
-    lastName: 'Obama',
-  },
-  {
-    email: 'barrack.obama@gmail6.com',
-    firstName: 'Barrack 6',
-    lastName: 'Obama',
-  },
-  {
-    email: 'barrack.obama@gmail7.com',
-    firstName: 'Barrack 7',
-    lastName: 'Obama',
-  },
-  {
-    email: 'barrack.obama@gmail8.com',
-    firstName: 'Barrack 8',
-    lastName: 'Obama',
-  },
-  {
-    email: 'barrack.obama@gmail9.com',
-    firstName: 'Barrack 9',
-    lastName: 'Obama',
-  },
-  {
-    email: 'barrack.obama@gmail10.com',
-    firstName: 'Barrack 10',
-    lastName: 'Obama',
-  },
-  {
-    email: 'barrack.obama@gmail11.com',
-    firstName: 'Barrack 11',
-    lastName: 'Obama',
-  },
-  {
-    email: 'barrack.obama@gmail12.com',
-    firstName: 'Barrack 12',
-    lastName: 'Obama',
-  },
 ]
 
 const collection = {

packages/component-faraday-ui/src/Pagination.js

 import React, { Fragment } from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { TextField } from '@pubsweet/ui'
 import { th } from '@pubsweet/ui-toolkit'
@@ -60,13 +61,33 @@ const PaginationComponent = ({
   </Root>
 )
 
-export const Pagination = ({ paginatedItems, children, ...props }) => (
+export const Pagination = ({ Items, children, ...props }) => (
   <Fragment>
     <PaginationComponent {...props} />
-    {typeof children === 'function' && children(paginatedItems, props)}
+    {typeof children === 'function' && children(Items, props)}
   </Fragment>
 )
 
+Pagination.propTypes = {
+  /** Page current number. */
+  page: PropTypes.number,
+  /** Indicates if there are more pages to be displayed. */
+  hasMore: PropTypes.bool,
+  /** Maximum items displayed. */
+  maxItems: PropTypes.number,
+  /** Items displayed per page. */
+  itemsPerPage: PropTypes.number,
+  /** Change how many items should be displayed per page. */
+  changeItemsPerPage: PropTypes.func,
+}
+Pagination.defaultProps = {
+  page: 1,
+  hasMore: false,
+  maxItems: 23,
+  itemsPerPage: 10,
+  changeItemsPerPage: () => {},
+}
+
 export default PaginationComponent
 
 // #region styles

packages/component-faraday-ui/src/PasswordValidation.js

@@ -127,14 +127,14 @@ PasswordValidation.propTypes = {
   atLeastOnePunctuation: PropTypes.bool,
 }
 PasswordValidation.defaultProps = {
-  formName: undefined,
-  formLabel: undefined,
+  formName: '',
+  formLabel: '',
   submitFailed: false,
-  minLength: undefined,
-  atLeastOneDigit: undefined,
-  atLeastOneUppercase: undefined,
-  atLeastOneLowerrcase: undefined,
-  atLeastOnePunctuation: undefined,
+  minLength: false,
+  atLeastOneDigit: false,
+  atLeastOneUppercase: false,
+  atLeastOneLowerrcase: false,
+  atLeastOnePunctuation: false,
 }
 
 export default compose(

packages/component-faraday-ui/src/PersonInfo.js

 import React from 'react'
-import PropTypes from 'prop-types'
 import { withCountries } from 'pubsweet-component-faraday-ui'
-
+import PropTypes from 'prop-types'
 import { Text, Row, Label, Item } from './'
 
-const defaultPerson = {
-  email: '',
-  firstName: '',
-  lastName: '',
-  affiliation: '',
-  country: '',
-}
-
 const PersonInfo = ({
-  person: { email, firstName, lastName, affiliation, country } = defaultPerson,
+  person: { email, firstName, lastName, affiliation, country },
   countryLabel,
 }) => (
   <Row>
@@ -39,8 +30,8 @@ const PersonInfo = ({
     </Item>
   </Row>
 )
-
-PersonInfo.proTypes = {
+PersonInfo.propTypes = {
+  /** Person with information */
   person: PropTypes.shape({
     email: PropTypes.string,
     firstName: PropTypes.string,
@@ -50,4 +41,14 @@ PersonInfo.proTypes = {
   }),
 }
 
+PersonInfo.defaultProps = {
+  person: {
+    email: '',
+    firstName: '',
+    lastName: '',
+    affiliation: '',
+    country: '',
+  },
+}
+
 export default withCountries(PersonInfo)

packages/component-faraday-ui/src/PersonInvitation.js

-import React, { Fragment } from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
+import React, { Fragment } from 'react'
 import { compose, withHandlers, defaultProps, setDisplayName } from 'recompose'
 
 import { Text, OpenModal, IconButton, marginHelper, withFetching } from './'
@@ -84,6 +85,44 @@ const PersonInvitation = ({
   </Root>
 )
 
+PersonInvitation.propTypes = {
+  /** Id of invitation. */
+  id: PropTypes.string,
+  /** Type of invitation. */
+  type: PropTypes.string,
+  /** Role of user. */
+  role: PropTypes.string,
+  /** Reason written for review. */
+  reason: PropTypes.string,
+  /** Id of user. */
+  userId: PropTypes.string,
+  /** If user has left an answer or not. */
+  hasAnswer: PropTypes.bool,
+  /** Date of invite. */
+  invitedOn: PropTypes.number,
+  /** If user was accepted or not. */
+  isAccepted: PropTypes.bool,
+  /** Date of user response. */
+  respondedOn: PropTypes.number,
+  /** Details of person. */
+  person: PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string,
+  }),
+}
+PersonInvitation.defaultProps = {
+  id: '',
+  role: '',
+  type: '',
+  reason: '',
+  userId: '',
+  hasAnswer: false,
+  invitedOn: Date.now(),
+  isAccepted: false,
+  respondedOn: Date.now(),
+  person: {},
+}
+
 export default compose(
   defaultProps({
     person: {

packages/component-faraday-ui/src/PublonsTable.js

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 import { Button, Spinner } from '@pubsweet/ui'
 import { compose, withHandlers, withProps } from 'recompose'
-
+import PropTypes from 'prop-types'
 import { Label, OpenModal, Text, withFetching, ActionLink } from '../'
 
 const TableView = ({
@@ -100,6 +100,17 @@ export default compose(
   }),
 )(PublonsTable)
 
+TableView.propTypes = {
+  reviewers: PropTypes.arrayOf(PropTypes.object),
+  /** Sends an invitation to the reviewer. */
+  onInviteReviewer: PropTypes.func,
+}
+
+TableView.defaultProps = {
+  reviewers: [],
+  onInviteReviewer: () => {},
+}
+
 // #region styles
 const Table = styled.table`
   border-collapse: collapse;

packages/component-faraday-ui/src/PublonsTable.md

@@ -3,37 +3,26 @@ A list of publon reviewers.
 ```js
 const reviewers = [
   {
-    id: 0,
-    email: 'email1@email.com',
-    publishingName: 'Name1',
-    recentOrganizations: {
-      name: 'Org1'
-    },
-    numVerifiedReviews: '100'
+    name: 'Ursachi Anca',
+    email: 'anca@thinslices.com',
+    profileUrl: '',
+    affiliation: 'ts',
+    reviews: 10,
   },
   {
-    id: 1,
-    email: 'email2@email.com',
-    publishingName: 'Name2',
-    recentOrganizations: {
-      name: 'Org2'
-    },
-    numVerifiedReviews: '200'
+    name: 'Josh',
+    email: 'josh@thinslices.com',
+    profileUrl: '',
+    affiliation: 'ts',
+    reviews: 8,
   },
-  {
-    id: 2,
-    email: 'email3@email.com',
-    publishingName: 'Name3',
-    recentOrganizations: {
-      name: 'Org3'
-    },
-    numVerifiedReviews: '300'
-  },
-];
+]
+;<PublonsTable
+  reviewers={reviewers}
+  onInviteReviwer={(reviewer, modalProps) => {
+    console.log('the reviewer', reviewer)
 
-<PublonsTable reviewers={reviewers} onInviteReviwer={(reviewer, modalProps) => {
-  console.log('the reviewer', reviewer)
-  
-  modalProps.setModalError('avem eroare boss')
-}}/>
+    modalProps.setModalError('avem eroare boss')
+  }}
+/>
 ```

packages/component-faraday-ui/src/RadioWithComments.js

 import React from 'react'
+import PropTypes from 'prop-types'
 import { get } from 'lodash'
 import { Field } from 'redux-form'
 import styled from 'styled-components'
@@ -75,6 +76,32 @@ const RadioWithComments = ({
   </Root>
 )
 
+RadioWithComments.propTypes = {
+  /** Defines if a fragment is required or not. */
+  required: PropTypes.bool,
+  /** Values taken by form. */
+  formValues: PropTypes.object, //eslint-disable-line
+  /** Name of field selected after using radio buttons. */
+  radioFieldName: PropTypes.string,
+  /** Name of comments field after radio buttons choice. */
+  commentsFieldName: PropTypes.string,
+  /** Name of field that was commented on. */
+  commentsOn: PropTypes.string,
+  /** Label name of the field that was commented on. */
+  commentsLabel: PropTypes.string,
+  /** Name of radio label field on witch it was commented. */
+  radioLabel: PropTypes.string,
+}
+RadioWithComments.defaultProps = {
+  required: false,
+  formValues: {},
+  radioFieldName: '',
+  commentsFieldName: '',
+  commentsOn: '',
+  commentsLabel: '',
+  radioLabel: '',
+}
+
 export default RadioWithComments
 
 // #region styles

packages/component-faraday-ui/src/RemoteOpener.js

+import PropTypes from 'prop-types'
 import { withStateHandlers } from 'recompose'
 
 const RemoteOpener = ({ expanded, toggle, children }) =>
@@ -11,3 +12,15 @@ export default withStateHandlers(
     }),
   },
 )(RemoteOpener)
+
+RemoteOpener.propTypes = {
+  /** Prop used together with toggle. */
+  expanded: PropTypes.bool,
+  /** Callback function used to control the state of the component.
+   * To be used together with the `expanded` prop.
+   */ toggle: PropTypes.func,
+}
+RemoteOpener.defaultProps = {
+  expanded: false,
+  toggle: () => {},
+}

packages/component-faraday-ui/src/ReviewerBreakdown.js

 import React from 'react'
-import { get } from 'lodash'
-import { compose, withHandlers, withProps } from 'recompose'
+import PropTypes from 'prop-types'
 
 import { Text, Row } from './'
 
-const ReviewerBreakdown = ({ getReportBreakdown }) => getReportBreakdown()
-
 const roleFilter = role => i => i.role === role
 const submittedFilter = r => r.review && r.review.submittedOn
 const acceptedFilter = i => i.hasAnswer && i.isAccepted
@@ -17,48 +14,58 @@ const reviewerReduce = (acc, r) => ({
   submitted: submittedFilter(r) ? acc.submitted + 1 : acc.submitted,
 })
 
-export default compose(
-  withProps(({ fragment }) => ({
-    invitations: get(fragment, 'invitations', []),
-    recommendations: get(fragment, 'recommendations', []),
-  })),
-  withHandlers({
-    getReportBreakdown: ({ invitations, recommendations, ...rest }) => () => {
-      const reviewerInvitations = invitations.filter(roleFilter('reviewer'))
-      const invitationsWithRecommendations = reviewerInvitations.map(r => ({
-        ...r,
-        review: recommendations.find(rec => rec.userId === r.userId),
-      }))
-      const report = invitationsWithRecommendations.reduce(reviewerReduce, {
-        accepted: 0,
-        declined: 0,
-        submitted: 0,
-      })
-      return reviewerInvitations.length ? (
-        <Row fitContent justify="flex-end" {...rest}>
-          <Text customId mr={1 / 2}>
-            {reviewerInvitations.length}
-          </Text>
-          <Text mr={1 / 2}> invited,</Text>
+const ReviewerBreakdown = ({
+  fragment: { invitations = [], recommendations = [] },
+  ...rest
+}) => {
+  const reviewerInvitations = invitations.filter(roleFilter('reviewer'))
+  const invitationsWithRecommendations = reviewerInvitations.map(r => ({
+    ...r,
+    review: recommendations.find(rec => rec.userId === r.userId),
+  }))
+  const report = invitationsWithRecommendations.reduce(reviewerReduce, {
+    accepted: 0,
+    declined: 0,
+    submitted: 0,
+  })
+  return reviewerInvitations.length ? (
+    <Row fitContent justify="flex-end" {...rest}>
+      <Text customId mr={1 / 2}>
+        {reviewerInvitations.length}
+      </Text>
+      <Text mr={1 / 2}> invited,</Text>
+
+      <Text customId mr={1 / 2}>
+        {report.accepted}
+      </Text>
+      <Text mr={1 / 2}> agreed,</Text>
 
-          <Text customId mr={1 / 2}>
-            {report.accepted}
-          </Text>
-          <Text mr={1 / 2}> agreed,</Text>
+      <Text customId mr={1 / 2}>
+        {report.declined}
+      </Text>
+      <Text mr={1 / 2}> declined,</Text>
 
-          <Text customId mr={1 / 2}>
-            {report.declined}
-          </Text>
-          <Text mr={1 / 2}> declined,</Text>
+      <Text customId mr={1 / 2}>
+        {report.submitted}
+      </Text>
+      <Text mr={1 / 2}> submitted</Text>
+    </Row>
+  ) : (
+    <Text mr={1}>{`${reviewerInvitations.length} invited`}</Text>
+  )
+}
 
-          <Text customId mr={1 / 2}>
-            {report.submitted}
-          </Text>
-          <Text mr={1 / 2}> submitted</Text>
-        </Row>
-      ) : (
-        <Text mr={1}>{`${reviewerInvitations.length} invited`}</Text>
-      )
-    },
+ReviewerBreakdown.propTypes = {
+  fragment: PropTypes.shape({
+    invitations: PropTypes.arrayOf(PropTypes.object),
+    recommendations: PropTypes.arrayOf(PropTypes.object),
   }),
-)(ReviewerBreakdown)
+}
+ReviewerBreakdown.defaultProps = {
+  fragment: {
+    invitations: [],
+    recommendations: [],
+  },
+}
+
+export default ReviewerBreakdown

packages/component-faraday-ui/src/ReviewerReport.js

 import React, { Fragment } from 'react'
 import { get } from 'lodash'
+import PropTypes from 'prop-types'
 import { withProps } from 'recompose'
 import styled from 'styled-components'
-import { th } from '@pubsweet/ui-toolkit'
 import { DateParser } from '@pubsweet/ui'
+import { th } from '@pubsweet/ui-toolkit'
 
 import { Label, Item, FileItem, Row, Text } from './'
 
 const ReviewerReport = ({
+  journal,
+  showOwner,
   onPreview,
   onDownload,
   reportFile,
@@ -17,7 +20,6 @@ const ReviewerReport = ({
   reviewerName,
   reviewerNumber,
   recommendation,
-  showOwner = false,
   report: { submittedOn },
 }) => (
   <Root>
@@ -92,6 +94,39 @@ export default withProps(
   }),
 )(ReviewerReport)
 
+ReviewerReport.propTypes = {
+  /** True when you want to show reviewer name. */
+  showOwner: PropTypes.bool,
+  /** Pass object with informations about the report. */
+  report: PropTypes.shape({
+    /** Unique id for report. */
+    id: PropTypes.string,
+    /** Unique id for user. */
+    userId: PropTypes.string,
+    /** Comments by reviewers. */
+    comments: PropTypes.arrayOf(PropTypes.object),
+    /** When the comment was created. */
+    createdOn: PropTypes.number,
+    /** When the comment was updated. */
+    updatedOn: PropTypes.number,
+    /** When the comment was submited. */
+    submittedOn: PropTypes.number,
+    /** The recommendation given by reviewer. */
+    recommendation: PropTypes.string,
+    /** Type of recommendation. */
+    recommendationType: PropTypes.string,
+  }),
+  /** Pass object with informations about recommendation.  */
+  journal: PropTypes.shape({
+    recommendations: PropTypes.arrayOf(PropTypes.object),
+  }),
+}
+
+ReviewerReport.defaultProps = {
+  showOwner: false,
+  report: {},
+  journal: { recommendation: [] },
+}
 // #region styles
 const Root = styled.div`
   background-color: ${th('colorBackgroundHue')};

packages/component-faraday-ui/src/ReviewerReport.md

@@ -29,6 +29,7 @@ const report = {
   submittedOn: 1538053600624,
   recommendation: 'publish',
   recommendationType: 'review',
+  reviewerIndex: 1
 }
 
 const journal = {

packages/component-faraday-ui/src/ReviewerReportAuthor.js

 import React, { Fragment } from 'react'
 import { get } from 'lodash'
-import { withProps, compose } from 'recompose'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 import { DateParser } from '@pubsweet/ui'
+import { withProps, compose } from 'recompose'
 
 import {
-  Label,
-  Item,
-  FileItem,
   Row,
   Text,
+  Item,
+  Label,
+  FileItem,
   withFilePreview,
   withFileDownload,
 } from './'
 
 const ReviewerReportAuthor = ({
+  journal,
+  showOwner,
   reviewFile,
   previewFile,
   downloadFile,
@@ -23,7 +26,6 @@ const ReviewerReportAuthor = ({
   reviewerName,
   reviewerNumber,
   recommendation,
-  showOwner = false,
   report: { submittedOn },
 }) => (
   <Root>
@@ -82,6 +84,40 @@ export default compose(
   })),
 )(ReviewerReportAuthor)
 
+ReviewerReportAuthor.propTypes = {
+  /** True when you want to show reviewer name. */
+  showOwner: PropTypes.bool,
+  /** Pass object with informations about the report. */
+  report: PropTypes.shape({
+    /** Unique id for report. */
+    id: PropTypes.string,
+    /** Unique id for user. */
+    userId: PropTypes.string,
+    /** Comments by reviewers. */
+    comments: PropTypes.arrayOf(PropTypes.object),
+    /** When the comment was created. */
+    createdOn: PropTypes.number,
+    /** When the comment was updated. */
+    updatedOn: PropTypes.number,
+    /** When the comment was submited. */
+    submittedOn: PropTypes.number,
+    /** The recommendation given by reviewer. */
+    recommendation: PropTypes.string,
+    /** Type of recommendation. */
+    recommendationType: PropTypes.string,
+  }),
+  /** Pass object with informations about recommendation.  */
+  journal: PropTypes.shape({
+    recommendations: PropTypes.arrayOf(PropTypes.object),
+  }),
+}
+
+ReviewerReportAuthor.defaultProps = {
+  showOwner: false,
+  report: {},
+  journal: { recommendation: [] },
+}
+
 // #region styles
 const Root = styled.div`
   background-color: ${th('colorBackgroundHue')};

packages/component-faraday-ui/src/ReviewersTable.js

+import PropTypes from 'prop-types'
 import React, { Fragment } from 'react'
 import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
@@ -5,10 +6,10 @@ import { DateParser } from '@pubsweet/ui'
 import { get, isEqual, orderBy } from 'lodash'
 import { compose, shouldUpdate, withHandlers, withProps } from 'recompose'
 
-import { Label, PersonInvitation, Text } from '../'
+import { Label, PersonInvitation, Text } from './'
 
 const ReviewersTable = ({
-  invitations,
+  invitations = [],
   getInvitationStatus,
   renderAcceptedLabel,
   onResendReviewerInvite,
@@ -94,6 +95,34 @@ const orderInvitations = i => {
   return 1
 }
 
+ReviewersTable.propTypes = {
+  /** Passes properties for invited reviewwers. */
+  invitations: PropTypes.arrayOf(
+    PropTypes.shape({
+      /** Reviewers unique id. */
+      id: PropTypes.string,
+      /** Reviewers role. */
+      role: PropTypes.string,
+      /** Type of invitation. */
+      type: PropTypes.string,
+      /** Users unique id. */
+      userId: PropTypes.string,
+      /** Reviewer has responded. */
+      hasAnswer: PropTypes.bool,
+      /** Date of invite. */
+      invitedOn: PropTypes.number,
+      /** Reviewer has accepted. */
+      isAccepted: PropTypes.bool,
+      /** Date of the response. */
+      respondedOn: PropTypes.number,
+    }),
+  ),
+}
+
+ReviewersTable.defaultProps = {
+  invitations: [],
+}
+
 export default compose(
   shouldUpdate(
     ({ invitations }, { invitations: nextInvitations }) =>

packages/component-faraday-ui/src/Tabs.js

+import PropTypes from 'prop-types'
 import { compose, withStateHandlers } from 'recompose'
 
-const Tabs = ({ items, selectedTab, changeTab, children }) =>
+const Tabs = ({ items, selectedTab = 2, changeTab, children }) =>
   children({ selectedTab, changeTab })
 
+Tabs.propTypes = {
+  /** The selected tab. */
+  selectedTab: PropTypes.number,
+  /** Handler to change the tab. */
+  changeTab: PropTypes.func,
+}
+
+Tabs.defaultProps = {
+  selectedTab: 0,
+  changeTab: () => {},
+}
+
 export default compose(
   withStateHandlers(({ selectedTab = 0 }) => ({ selectedTab }), {
     changeTab: () => selectedTab => ({

packages/component-faraday-ui/src/Tag.js

-import { has } from 'lodash'
+import { get } from 'lodash'
+import PropTypes from 'prop-types'
 import { th } from '@pubsweet/ui-toolkit'
 import styled, { css } from 'styled-components'
 
 import { marginHelper } from './styledHelpers'
 
 const tagCSS = props => {
-  if (has(props, 'oldStatus')) {
+  if (get(props, 'oldStatus')) {
     return css`
       background-color: ${th('colorFurnitureHue')};
       height: calc(${th('gridUnit')} * 3)
@@ -15,7 +16,7 @@ const tagCSS = props => {
     `
   }
 
-  if (has(props, `status`)) {
+  if (get(props, `status`)) {
     return css`
       background-color: ${th('tag.statusBackgroundColor')};
       padding: calc(${th('gridUnit')} / 4) ${th('gridUnit')};
@@ -35,7 +36,7 @@ const tagCSS = props => {
 }
 
 /** @component */
-export default styled.div`
+const Tag = styled.div`
   border-radius: ${th('tag.borderRadius')
     ? th('tag.borderRadius')
     : th('borderRadius')};
@@ -52,3 +53,17 @@ export default styled.div`
   ${tagCSS};
   ${marginHelper};
 `
+
+Tag.propTypes = {
+  /** Old status of the corresponding user. */
+  oldStatus: PropTypes.bool,
+  /** New status of the corresponding user. */
+  status: PropTypes.bool,
+}
+
+Tag.defaultProps = {
+  oldStatus: false,
+  status: false,
+}
+
+export default Tag

packages/component-faraday-ui/src/Text.js

 import React from 'react'
-import { has, get } from 'lodash'
+import { get } from 'lodash'
+import PropTypes from 'prop-types'
 import { th } from '@pubsweet/ui-toolkit'
 import styled, { css } from 'styled-components'
 
 import { paddingHelper, marginHelper } from './styledHelpers'
 
 const textHelper = props => {
-  if (has(props, 'secondary')) {
+  if (get(props, 'secondary')) {
     return css`
       color: ${th('colorSecondary')};
       font-family: ${th('fontReading')};
     `
   }
-  if (has(props, 'error')) {
+  if (get(props, 'error')) {
     return css`
       color: ${th('colorError')};
       font-family: ${th('fontReading')};
     `
   }
-  if (has(props, 'customId')) {
+  if (get(props, 'customId')) {
     return css`
       color: ${th('colorPrimary')};
       font-family: ${th('fontInterface')};
     `
   }
-  if (has(props, 'labelLine')) {
+  if (get(props, 'labelLine')) {
     return css`
       color: ${th('colorFurnitureHue')};
       font-family: ${th('fontInterface')};
@@ -38,7 +39,7 @@ const textHelper = props => {
       }
     `
   }
-  if (has(props, 'journal')) {
+  if (get(props, 'journal')) {
     return css`
       color: ${th('colorSecondary')};
       font-family: ${th('fontReading')};
@@ -88,7 +89,7 @@ const Root = styled.div`
   display: flex;
 `
 
-export default ({ bullet, children, ...rest }) =>
+const Text = ({ bullet, children, ...rest }) =>
   bullet ? (
     <Root>
       <Bullet>{'\u2022'}</Bullet>
@@ -97,3 +98,29 @@ export default ({ bullet, children, ...rest }) =>
   ) : (
     <StyledText {...rest}>{children}</StyledText>
   )
+
+Text.propTypes = {
+  /** Default color for non-primary actions. */
+  secondary: PropTypes.bool,
+  /** Default color for error actions. */
+  error: PropTypes.bool,
+  /** Default style for the customId text. */
+  customId: PropTypes.bool,
+  /** Default style for text used as a label Line. */
+  labelLine: PropTypes.bool,
+  /** Default style used for journal text. */
+  journal: PropTypes.bool,
+  /** Default style used for small text. */
+  small: PropTypes.bool,
+}
+
+Text.defaultProps = {
+  secondary: false,
+  error: false,
+  customId: false,
+  labelLine: false,
+  journal: false,
+  small: false,
+}
+
+export default Text