docs(cokponent-faraday-ui):

packages/component-faraday-ui/package.json

@@ -12,5 +12,6 @@
     "querystring": "^0.2.0",
     "react": "^16.4.2",
     "styled-components": "^3.4.2"
-  }
+  },
+  "devDependencies": {}
 }

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

@@ -18,7 +18,7 @@ const autosave = {
 const HindawiLogo = () => (
   <Logo
     onClick={() => console.log('Hindawi best publish!')}
-    title="Hindawi"
+    title="Anca"
     src="https://upload.wikimedia.org/wikipedia/en/thumb/c/ca/Hindawi.svg/1200px-Hindawi.svg.png"
   />
 )

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

+## Hindawi Helpers
+
+_Utility HOCs_
+
+* [withCountries](#withcountries)
+* [withFetching](#withfetching)
+* [withFileDownload](#withfiledownload)
+* [withFilePreview](#withfilepreview)
+* [withPagination](#withpagination)
+* [withRoles](#withroles)
+* [withZipDownload](#withzipdownload)
+
+_HOCs used for files drag and drop_
+
+* [withFileSectionDrop](#withfilesectiondrop)
+* [withNativeFileDrop](#withnativefiledrop)
+
+_Utility functions_
+
+* [handleError](#handleerror)
+
+# Utility HOCs
+
+## withCountries
+
+Injects `countries` and `countryLabel` as props.
+
+### withCountries props
+
+* `countries: [{value: string, label: string}]`: the list of countries
+* `countryLabel: (code: string) => string`: get the name of the country with the specified code
+
+```js
+import { Menu } from '@pubsweet/ui'
+import { withCountries } from 'pubsweet-component-faraday-ui'
+
+const Wrapped = ({ countries, countryLabel }) => (
+  <div>
+    <Menu options={countries} placeholder="Select a country" />
+
+    <span>Selected country: {countryLabel('RO')}</span>
+  </div>
+)
+
+export default withCountries(Wrapped)
+```
+
+## withFetching
+
+Injects `isFetching`, `fetchingError`, `setFetching`, `toggleFetching`, `setError` and `clearError` as props.
+
+### withFetching props
+
+* `isFetching: bool`: value representing a pending async operation
+* `fetchingError: string`: value representing the error
+* `setFetching: (value: bool) => any`: function for setting the `isFetching` value
+* `toggleFetching: () => any`: function that toggle the current value of `isFetching`
+* `setError: (error: string) => any`: function that sets `fetchingError`
+* `clearError: () => any`: function that resets `fetchingError` to it's original value
+
+```js
+import { withFetching } from 'pubsweet-component-faraday-ui'
+
+const Wrapped = ({ isFetching, fetchingError, setFetching, toggleFetching }) => (
+  <div>
+    {isFetching && <span>I am fetching</span>}
+    <span>{`The error: ${fetchingError}`</span>
+    <button onClick={() => setFetching(true)}>Set fetching true</button>
+    <button onClick={() => setFetching(false)}>Set fetching false</button>
+    <button onClick={toggleFetching}>Toggle fetching</button>
+  </div>
+)
+
+export default withFetching(Wrapped)
+```
+
+## withFileDownload
+
+Injects `downloadFile` as a prop.
+
+### withFileDownload props
+
+* `downloadFile: (file: {id: string, name: string}) => any`: downloads the file specified as a parameter. The wrapped component should have the authentication token in a prop called `token` in order for this to work.
+
+```js
+import { FileItem, withFileDownload } from 'pubsweet-component-faraday-ui'
+
+const file = {
+  id: 'myfile',
+  name: 'myfile.pdf',
+  size: 100231,
+}
+
+const Wrapped = ({ downloadFile }) => (
+  <div>
+    <FileItem item={file} onDownload={downloadfile} />
+  </div>
+)
+
+export default withFileDownload(Wrapped)
+```
+
+## withFilePreview
+
+Generate a securized file URL and preview it in a new tab. Injects `previewFile` as a prop.
+
+This HOC assumes the following props are present on the wrapped component:
+
+* `getSignedURL: (id: string) => Promise({signedURL: string})`: an async call that returns the securized S3 file url
+
+### withFilePreviewProps
+
+* `previewFile: (file: {id: string, ...}) => any`: opens the file preview in a new tab (only possible for PDF files and images)
+
+```javascript
+import { withProps } from 'recompose'
+import { FileItem, withFilePreview Wrapped} from 'pubsweet-component-faraday-ui'
+
+const file = {
+  id: 'myfile',
+  name: 'myfile.pdf',
+  size: 100231,
+}
+
+const Wrapped = ({ previewFile }) => (
+  <div>
+    <FileItem item={file} onPreview={previewFile} />
+  </div>
+)
+
+export default withFilePreview(Wrapped)
+```
+
+## withPagination
+
+Injects `page`, `itemsPerPage`, `toFirst`, `nextPage`, `toLast`, `prevPage`, `changeItemsPerPage`, `hasMore`, `maxItems` and `paginatedItems` as props.
+
+### withPagination props
+
+* `page: number`: the current page
+* `itemsPerPage: number`: number of items to be shown per page
+* `maxItems: number`: the total number of items
+* `hasMore: bool`: if we're not at the last page yet
+* `paginatedItems: [any]`: slice of the original items
+* `toFirst: () => { page: number }`: go to the first page
+* `toLast: () => {page: number}`: go to the last page
+* `nextPage: () => {page: number}`: move to the next page
+* `prevPage: () => {page: number}`: move to the previous page
+* `changeItemsPerPage: e: HTMLInputEvent => {page: number, itemsPerPage: number}`: change the number of items per page
+
+```js
+import { withPagination } from 'pubsweet-component-faraday-ui'
+
+const Wrapped = ({ page, nextPage, prevPage, paginatedItems, changeItemsPerPage }) => (
+  <div>
+    <span>Page {page}</span>
+    <button onClick={prevPage}>Prev page</button>
+    <button onClick={nextPage}>Next page</button>
+    <input type="text" onChange={changeItemsPerPage} />
+    <div>
+    {
+      paginatedItems.map(p => <span>{p}<span>)
+    }
+    </div>
+  </div>
+)
+
+export default withPagination(Wrapped)
+```
+
+## withRoles
+
+Injects the `roles` array as a prop. The roles are parsed from the journal config files.
+
+### withRoles props
+
+* `roles: [{value: string, label: string}]`: an array of user roles
+
+```js
+import { Menu } from '@pubsweet/ui'
+import { withRoles } from 'pubsweet-component-faraday-ui'
+
+const Wrapped = ({ roles }) => <Menu options={roles} />
+
+export default withRoles(Wrapped)
+```
+
+## withZipDownload
+
+Downloads all the files of a fragment as a zip archive. Injects the `downloadFiles` function as a prop.
+
+This HOCs assumes the following props are present on the wrapped component:
+
+* `token: string`: authentication token (used to authorize this request)
+* `isReview: bool`: if the user is reviewer
+* `fragmentId: string`: id of the fragment whose files we want to download
+* `setFetching: (value: bool) => any`: a callback to set a fetching status
+* `archiveName: string`: the name of the outputted archive file
+
+### withZipDownload props
+
+* `downloadFiles: () => any`: download all the fragment's file as a zip
+
+# Files drag and drop
+
+## withFileSectionDrop
+
+HOC used to provide drop functionality to the `FileSection` component. It's main purpose is to change a file from one list to another. This is usually done in a callback called `changeList` that should be provided to the wrapped component.
+
+This HOC assumes the wrapped component has the following props:
+
+* `files: [{id: string, ...}]`: the list of files passed to the wrapped component
+* `setError: (error: string) => any`: error setting callback
+* `listId: string`: the current list id
+* `allowedFileExtensions: [string]`: the allowed files
+* `maxFiles: number`: the maximum number of files allowed
+* `changeList: (fromListId: string, toListId: string: fileId: string)`: callback called if all the conditions are met (allowed files, number of files, etc)
+
+```js
+import { compose, withHandler, withProps } from 'recompose'
+import { FileSection, withFileSectionDrop } from 'pubsweet-component-faraday-ui'
+
+const Wrapped = compose(
+  withProps({
+    files: [...],
+    listId: 'CoverLetter',
+    maxFiles: 3,
+    allowedFileExtensions: ['pdf'],
+  }),
+  withHandlers({
+    changeList: () => (fromListId, toListId, fileId) => {
+      // do the actual change here
+    }
+  }),
+  withFileSectionDrop,
+)(FileSection)
+
+export default Wrapped
+```
+
+## withNativeFileDrop
+
+HOC used to provide native file drop functionality to the `FileSection` component. It's purpose is to do something when dragging files from the computer's hard drive into the app. _This HOC allows only single items! Dragging multiple items into the wrapped component will only handle the first item!_
+
+This HOC assumes the wrapped component has the following props:
+
+* `files: [{id: string, ...}]`: the list of files passed to the wrapped component
+* `setError: (error: string) => any`: error setting callback
+* `allowedFileExtensions: [string]`: the allowed files
+* `maxFiles: number`: the maximum number of files allowed
+* `onFileDrop: (file: File)`: callback called when a valid file is dropped
+
+```js
+import { compose, withHandler, withProps } from 'recompose'
+import { FileSection, withNativeFileDrop } from 'pubsweet-component-faraday-ui'
+
+const Wrapped = compose(
+  withProps({
+    files: [...],
+    listId: 'CoverLetter',
+    maxFiles: 3,
+    allowedFileExtensions: ['pdf'],
+  }),
+  withHandlers({
+    onFileDrop: () => file => {
+      // do something with the dropped file
+    }
+  }),
+  withNativeFileDrop,
+)(FileSection)
+
+export default Wrapped
+```
+
+# Utility functions
+
+## handleError
+
+Function that parses the server error. Calls the passed function with the parsed error.
+
+Has the following signature:
+`(callbackFn: (parsedError) => any) => (e: Error) => any`
+
+```js
+const customErrorLogger = parsedError =>
+  console.error(`This is very handled: ${parsedError}`)
+
+// point free notation
+anAsyncOperation().catch(handleError(customErrorLogger))
+
+// can be used besides other function calls
+
+anAsyncOperation().catch(err => {
+  setFetching(false)
+  handleError(customErrorLogger)(err)
+})
+```