Merge branch 'texture' into 'master'

Texture

See merge request !53

app/components/dashboard/Dashboard.js

 import React from 'react'
+import { Link } from 'react-router-dom'
 import ButtonLink from '../ui/atoms/ButtonLink'
 
 const Dashboard = () => (
-  <div>
+  <React.Fragment>
     <h1>Dashboard Dummy Page</h1>
     <ButtonLink data-test-id="submit" primary to="/submit">
       Submit a manuscript
     </ButtonLink>
-  </div>
+
+    <h3>Sample manuscripts</h3>
+    <ul>
+      <li>
+        <Link to="/manuscript/blank">Blank</Link>
+      </li>
+      <li>
+        <Link to="/manuscript/elife-32671">eLife</Link>
+      </li>
+      <li>
+        <Link to="/manuscript/kitchen-sink">Kitchen sink</Link>
+      </li>
+      <li>
+        <Link to="/manuscript/plos">PLOS</Link>
+      </li>
+    </ul>
+  </React.Fragment>
 )
 
 export default Dashboard

app/components/dashboard/Dashboard.md

 ## Dashboard Component
 
-TODO this needs to be implemented
-
-This should provide a list of manuscripts.
+```js
+<Dashboard />
+```

app/components/manuscript/Manuscript.js

 import React from 'react'
-import { Heading } from '@pubsweet/ui'
-import { Box } from 'grid-styled'
-import styled from 'styled-components'
+import TextureEditor from '@pubsweet/texture/TextureEditor'
 
-const TitleBox = styled(Box)`
-  text-align: center;
-`
-
-const Manuscript = () => (
-  <Box mx={5}>
-    <TitleBox mb={5}>
-      <Heading level={1}>
-        Dynamic representation of 3D auditory space in the midbrain of the
-        free-flying echolocating bat
-      </Heading>
-      <p>Authors details here</p>
-    </TitleBox>
-
-    <Heading level={2}>Abstract</Heading>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus
-      justo, pharetra imperdiet vehicula a, semper eget sem. Proin euismod sem
-      elit, congue commodo lorem sodales nec. Sed at consequat orci, in
-      ullamcorper odio. Vivamus quis ipsum molestie, eleifend nunc quis,
-      imperdiet ante. Cras congue urna eu tincidunt ultricies. Phasellus mollis
-      magna eget felis ullamcorper, ac pellentesque magna euismod. Donec quis
-      felis vel mi tempor pulvinar. Etiam nec dolor eros.
-    </p>
-  </Box>
-)
+const Manuscript = ({ archiveId }) => <TextureEditor archiveId={archiveId} />
 
 export default Manuscript

app/components/manuscript/ManuscriptPage.js

 import React from 'react'
 import Manuscript from './Manuscript'
 
-export default () => <Manuscript />
+export default ({ match }) => <Manuscript archiveId={match.params.id} />

app/routes.js

@@ -13,7 +13,7 @@ const Routes = () => (
       <Layout>
         <Switch>
           <Route component={SubmissionPage} path="/submit" />
-          <Route component={ManuscriptPage} path="/manuscript" />
+          <Route component={ManuscriptPage} path="/manuscript/:id" />
           <Route component={Dashboard} />
         </Switch>
       </Layout>

client/texture/TextureContainer.js

+import styled from 'styled-components'
+
+const TextureContainer = styled.div`
+  // TODO size this properly - 85px is the height of the navbar
+  height: calc(100vh - 85px);
+
+  .sc-app {
+    height: 100%;
+  }
+
+  /* variables from texture-pagestyle.css
+  ---------------------------------------*/
+
+  /* Layout */
+  --small-layout-width: 300px;
+  --medium-layout-width: 620px;
+  --large-layout-width: 960px;
+
+  /* Normalized heights (used by buttons and inputs) */
+  --base-height: 40px;
+  --short-height: 20px;
+  --border-radius: 5px;
+
+  /* Colors */
+  --dark-bg-color: #2e2e2e;
+  --border-color: #e0e4e4;
+  --dark-border-color: #777;
+
+  /* Used by Button component */
+  --button-color: rgba(0, 0, 0, 0.75);
+
+  --fill-white-color: #fff;
+  --fill-light-color: #f7f9f9; /* #f8f8f8; */
+  --fill-dark-color: #404040;
+
+  --default-box-shadow: 0 0 0 0.75pt #d1d1d1, 0 0 3pt 0.75pt #aaa;
+
+  /* Depending on a base-color */
+  --darken-color-1: rgba(0, 0, 0, 0.05);
+  --darken-color-2: rgba(0, 0, 0, 0.1);
+  --darken-color-3: rgba(0, 0, 0, 0.25);
+  --darken-color-4: rgba(0, 0, 0, 0.5);
+  --darken-color-5: rgba(0, 0, 0, 0.75);
+
+  --lighten-color-1: rgba(0, 0, 0, 0.05);
+  --lighten-color-2: rgba(0, 0, 0, 0.1);
+  --lighten-color-3: rgba(0, 0, 0, 0.25);
+  --lighten-color-4: rgba(0, 0, 0, 0.5);
+  --lighten-color-5: rgba(0, 0, 0, 0.75);
+
+  --link-color: #1795cd;
+
+  --text-action-color: #2e72ea;
+  --border-action-color: #2e72ea;
+  --light-bg-color: #f7f7f9; /* light grey */
+  --active-color: #2e72ea;
+  --active-light-bg-color: #2e72ea0a;
+  --separator-color: rgba(0, 0, 0, 0.05);
+
+  /* We disable this for now, as accessibility needs more discussion */
+  --focus-outline-color: transparent; /* #1795CD;/* #5BE3FF;
+
+  /* Font colors */
+  --default-text-color: rgba(0, 0, 0, 0.75);
+  --light-text-color: rgba(0, 0, 0, 0.4);
+
+  /* Default padding */
+  --default-padding: 20px;
+
+  /* Prose font sizes */
+  --default-font-size: 16px;
+  --small-font-size: 13px;
+
+  --large-font-size: 20px;
+  --xlarge-font-size: 25px;
+  /* Title font sizes */
+  --title-font-size: 38px;
+  /* Heading font sizes */
+  --h1-font-size: 26px;
+  --h2-font-size: 22px;
+  --h3-font-size: 18px;
+  --h4-font-size: 16px;
+
+  --strong-font-weight: 600;
+  --highlight-color-1: #0b9dd9;
+  --highlight-color-2: #91bb04;
+  --heading-letterspacing: -0.5px;
+
+  /* code-font */
+  --font-family-code: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  --font-size-code: 14px;
+
+  /* RGB #A3CDFD = HSB 209,29,80 */
+  --local-selection-color: #2a8cff;
+
+  /* adapted from texture-reset.css
+  ------------------------------------------------ */
+
+  ol,
+  ul {
+    /*list-style:none;*/
+    margin: 0;
+  }
+
+  blockquote,
+  q {
+    quotes: none;
+  }
+
+  blockquote:before,
+  blockquote:after,
+  q:before,
+  q:after {
+    content: none;
+  }
+
+  /* tables still need 'cellspacing="0"' in the markup */
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  /* remember to define focus styles. */
+
+  & :focus {
+    outline: 0;
+  }
+
+  *,
+  *:after,
+  *:before {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+
+  /* Reset \`button\` and button-style \`input\` default styles */
+
+  input[type='submit'],
+  input[type='reset'],
+  input[type='button'],
+  button {
+    background: none;
+    border: 0;
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+    line-height: normal;
+    overflow: visible;
+    padding: 0;
+    display: block;
+    text-align: left;
+    -webkit-appearance: button; /* for input */
+    -webkit-user-select: none; /* for button */
+    -moz-user-select: none;
+    -ms-user-select: none;
+  }
+
+  input::-moz-focus-inner,
+  button::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+  }
+`
+
+export default TextureContainer

client/texture/TextureEditor.js

+import React from 'react'
+import { TextureWebApp } from 'substance-texture'
+
+import 'substance/dist/substance.css'
+import 'substance-texture/dist/texture.css'
+import 'substance-texture/dist/font-awesome/css/font-awesome.css'
+import TextureContainer from './TextureContainer'
+
+class TextureEditor extends React.Component {
+  componentDidMount() {
+    TextureWebApp.mount(this.state, this.ref)
+  }
+
+  setRef = ref => (this.ref = ref)
+
+  static getDerivedStateFromProps(nextProps) {
+    return {
+      storageUrl: `/api/dar`,
+      ...nextProps,
+    }
+  }
+
+  render() {
+    return <TextureContainer innerRef={this.setRef} />
+  }
+}
+
+export default TextureEditor

client/texture/TextureEditor.md

+A Texture editor for authoring JATS XML
+
+```js
+// Use staging deployment to serve DARs
+;<TextureEditor
+  storageUrl="https://xpub-elife-staging.gateway.xpub.semioticsquares.com/api/dar"
+  archiveId="elife-32671"
+/>
+```

client/texture/index.js

+module.exports = {
+  frontend: { components: [() => require('./TextureEditor')] },
+}

client/texture/package.json

+{
+  "name": "@pubsweet/texture",
+  "version": "1.0.0",
+  "description": "",
+  "license": "ISC",
+  "author": "",
+  "main": "index.js",
+  "keywords": [],
+  "dependencies": {
+    "substance": "^1.0.0-preview.53",
+    "substance-texture": "^1.0.0-preview.1.11"
+  }
+}

config/components.json

-["./server/auth", "./server/submission"]
+["./server/auth", "./server/submission", "./server/dar-server"]

config/default.js

@@ -27,19 +27,8 @@ module.exports = {
       sendmail: true,
     },
   },
-  'password-reset': {
-    url: 'http://localhost:3000/password-reset',
-    sender: 'dev@example.com',
-  },
-  'pubsweet-component-ink-backend': {
-    inkEndpoint:
-      process.env.INK_ENDPOINT || 'http://inkdemo-api.coko.foundation',
-    email: process.env.INK_USERNAME,
-    password: process.env.INK_PASSWORD,
-    maxRetries: 500,
-    recipes: {
-      'editoria-typescript': '2',
-    },
+  darServer: {
+    basePath: path.join(__dirname, '..', 'manuscripts'),
   },
   publicKeys: ['pubsweet-client', 'authsome', 'validations'],
 }

manuscripts/blank/manifest.xml

+<dar>
+  <documents>
+    <document id="manuscript" type="article" path="manuscript.xml" />
+  </documents>
+  <assets>
+  </assets>
+</dar>

manuscripts/blank/manuscript.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE article PUBLIC "DarArticle 0.1.0" "http://darformat.org/DarArticle-0.1.0.dtd">
+<article xmlns:xlink="http://www.w3.org/1999/xlink">
+  <front>
+    <article-meta>
+      <title-group>
+        <article-title></article-title>
+      </title-group>
+      <abstract>
+      </abstract>
+    </article-meta>
+  </front>
+  <body>
+  </body>
+  <back>
+  </back>
+</article>

manuscripts/elife-32671/manifest.xml

+<dar>
+  <documents>
+    <document id="manuscript" type="article" path="manuscript.xml" />
+  </documents>
+  <assets>
+    <asset id="fig1" type="image/jpg" path="fig1.jpg"/>
+    <asset id="fig2" type="image/jpg" path="fig2.jpg"/>
+    <asset id="fig3" type="image/jpg" path="fig3.jpg"/>
+    <asset id="fig4" type="image/jpg" path="fig4.jpg"/>
+    <asset id="fig5" type="image/jpg" path="fig5.jpg"/>
+  </assets>
+</dar>