Merge xpub-ui from xpub monorepo into pubsweet monorepo as pubsweet-ui

packages/pubsweet-ui/src/atoms/File.local.scss

+.root {
+  align-items: center;
+  display: inline-flex;
+  flex-direction: column;
+  margin-bottom: 2em;
+  margin-right: 3em;
+  position: relative;
+  width: 20ch;
+
+  &::before,
+  &::after {
+    cursor: pointer;
+    transition: transform 0.3s;
+  }
+
+  &::after {
+    background: var(--color-danger);
+    border: 1px solid white;
+    color: white;
+    content: 'remove';
+    cursor: pointer;
+    font-size: 0.8em;
+    left: 70%;
+    letter-spacing: 0.5px;
+    padding: 0.2em 0.4em;
+    position: absolute;
+    text-transform: uppercase;
+    top: 4em;
+    transform: scaleX(0);
+    transform-origin: 0 0;
+    z-index: 2;
+  }
+
+  &::before {
+    background: var(--color-primary);
+    border: 1px solid white;
+    color: white;
+    content: 'replace';
+    cursor: pointer;
+    font-size: 0.8em;
+    left: 70%;
+    letter-spacing: 0.5px;
+    padding: 0.2em 0.4em;
+    position: absolute;
+    text-transform: uppercase;
+    top: 6em;
+    transform: scaleX(0);
+    transform-origin: 0 0;
+    z-index: 3;
+  }
+
+  .icon {
+    background: #ddd;
+    height: 100px;
+    padding: 5px;
+    position: relative;
+    transition: transform 0.3s ease;
+    width: 70px;
+  }
+
+  .extension {
+    background: #888;
+    color: white;
+    font-size: 12px;
+    left: 20px;
+    padding: 2px;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    text-transform: uppercase;
+    top: 20px;
+  }
+
+  .name {
+    color: #aaa;
+    font-size: 0.9em;
+    font-style: italic;
+    margin: 5px;
+    max-width: 15ch;
+    text-align: center;
+    word-break: break-all; /* to divide into lines */
+  }
+
+  &:hover {
+    .extension {
+      background: white;
+      border-right: 2px solid #ddd;
+      color: var(--color-primary);
+    }
+
+    .icon {
+      background: var(--color-primary);
+      transform: skewY(6deg) rotate(-6deg);
+    }
+
+    &::after,
+    &::before {
+      transform: scaleX(1);
+    }
+  }
+}

packages/pubsweet-ui/src/atoms/File.md

+A file.
+
+```js
+const value = {
+  name: faker.system.commonFileName(),
+  // type: faker.system.commonFileType(),
+  // size: faker.random.number(),
+};
+
+<File value={value}/>
+```
+
+Upload progress is displayed as an overlay.
+
+```js
+const value = {
+  name: faker.system.commonFileName(),
+};
+
+<File value={value} progress={0.5}/>
+```
+
+An upload error is displayed above the file.
+
+```js
+const value = {
+  name: faker.system.commonFileName(),
+};
+
+<File value={value} error="There was an error"/>
+```

packages/pubsweet-ui/src/atoms/Icon.js

+import React from 'react'
+import { pascalize } from 'humps'
+import * as icons from 'react-feather'
+import classes from './Icon.local.scss'
+
+const Icon = ({ children, color = 'black', size = 24 }) => {
+  // convert `arrow_left` to `ArrowLeft`
+  const name = pascalize(children)
+
+  // select the icon
+  const icon = icons[name]
+
+  return <span className={classes.root}>{icon({ color, size })}</span>
+}
+
+export default Icon

packages/pubsweet-ui/src/atoms/Icon.local.scss

+.root {
+  display: inline-flex;
+}

packages/pubsweet-ui/src/atoms/Icon.md

+An icon, from the [Feather](https://feathericons.com/) icon set.
+
+```js
+<Icon>arrow_right</Icon>
+```
+
+The color can be changed.
+
+```js
+<Icon color="red">arrow_right</Icon>
+``` 
+
+The size can be changed.
+
+```js
+<Icon size={48}>arrow_right</Icon>
+``` 

packages/pubsweet-ui/src/atoms/Menu.js

+import React from 'react'
+import classnames from 'classnames'
+import classes from './Menu.local.scss'
+
+// TODO: match the width of the container to the width of the widest option?
+// TODO: use a <select> element instead of divs?
+
+class Menu extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      open: false,
+      selected: props.value,
+    }
+  }
+
+  toggleMenu = () => {
+    this.setState({
+      open: !this.state.open,
+    })
+  }
+
+  handleSelect = selected => {
+    this.setState({
+      open: false,
+      selected,
+    })
+
+    this.props.onChange(selected)
+  }
+
+  optionLabel = value => {
+    const { options } = this.props
+
+    return options.find(option => option.value === value).label
+  }
+
+  render() {
+    const { label, options, placeholder = 'Choose in the list' } = this.props
+    const { open, selected } = this.state
+
+    return (
+      <div
+        className={classnames(classes.root, {
+          [classes.open]: open,
+        })}
+      >
+        {label && <span className={classes.label}>{label}</span>}
+
+        <div className={classes.main}>
+          <div className={classes.openerContainer}>
+            <button
+              className={classes.opener}
+              onClick={this.toggleMenu}
+              type="button"
+            >
+              {selected ? (
+                <span>{this.optionLabel(selected)}</span>
+              ) : (
+                <span className={classes.placeholder}>{placeholder}</span>
+              )}
+              <span className={classes.arrow}>▼</span>
+            </button>
+          </div>
+
+          <div className={classes.optionsContainer}>
+            {open && (
+              <div className={classes.options}>
+                {options.map(option => (
+                  <div
+                    className={classnames(classes.option, {
+                      [classes.active]: option.value === selected,
+                    })}
+                    key={option.value}
+                    onClick={() => this.handleSelect(option.value)}
+                  >
+                    {option.label || option.value}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Menu

packages/pubsweet-ui/src/atoms/Menu.local.scss

+.root {
+  align-items: center;
+  display: flex;
+}
+
+.label {
+  margin-right: 0.5em;
+}
+
+.main {
+  position: relative;
+}
+
+.optionsContainer {
+  position: absolute;
+}
+
+.opener {
+  align-items: center;
+  background: transparent;
+  border: none;
+  border-left: 2px solid transparent;
+  cursor: pointer;
+  display: flex;
+  font-family: var(--font-author);
+  font-size: inherit;
+  outline: none;
+}
+
+.opener:hover {
+  color: var(--color-primary);
+}
+
+.open .opener {
+  border-left: 2px solid var(--color-primary);
+  color: var(--color-primary);
+}
+
+.placeholder {
+  color: #aaa;
+  font-family: var(--font-interface);
+  font-weight: 400;
+}
+
+.opener:hover .placeholder {
+  color: var(--color-primary);
+}
+
+.arrow {
+  font-size: 50%;
+  margin-left: 10px;
+  transform: scaleY(1.2) scaleX(2.2);
+  transition: transform 0.2s;
+}
+
+.open .arrow {
+  transform: scaleX(2.2) scaleY(-1.2);
+}
+
+.options {
+  background-color: white;
+  border-bottom: 2px solid var(--color-primary);
+  border-left: 2px solid var(--color-primary);
+  // columns: 2 auto;
+  left: 0;
+  min-width: 10em;
+  opacity: 0;
+  padding-top: 0.5em;
+  position: absolute;
+  top: 0;
+  z-index: 10;
+}
+
+.open .options {
+  opacity: 1;
+}
+
+.option {
+  cursor: pointer;
+  font-family: var(--font-author);
+  padding: 10px;
+  white-space: nowrap;
+}
+
+.option:hover {
+  color: var(--color-primary);
+}
+
+.active {
+  color: black;
+  font-weight: 600; /* placeholder for the semibold */
+}

packages/pubsweet-ui/src/atoms/Menu.md

+A menu for selecting one of a list of options.
+
+```js
+const options = [
+  { value: 'foo', label: 'Foo' },
+  { value: 'bar', label: 'Bar' },
+  { value: 'baz', label: 'Baz' }
+];
+
+<Menu 
+  options={options}
+  onChange={value => console.log(value)}/>
+```
+
+When an option is selected, it replaces the placeholder.
+
+```js
+const options = [
+  { value: 'foo', label: 'Foo' },
+  { value: 'bar', label: 'Bar' },
+  { value: 'baz', label: 'Baz' }
+];
+
+<Menu 
+  options={options}
+  value="foo"
+  onChange={value => console.log(value)}/>
+```
+
+A menu can have a label
+
+```js
+const options = [
+  { value: 'foo', label: 'Foo' },
+  { value: 'bar', label: 'Bar' },
+  { value: 'baz', label: 'Baz' }
+];
+
+<Menu 
+  options={options}
+  label="Title"
+  value="foo"
+  onChange={value => console.log(value)}/>
+```

packages/pubsweet-ui/src/atoms/Radio.js

+import React from 'react'
+import classnames from 'classnames'
+import classes from './Radio.local.scss'
+
+const inputGradient = color =>
+  `radial-gradient(closest-corner at center, ${color} 0%, ${color} 45%,
+    white 45%, white 100%)`
+
+const Radio = ({
+  className,
+  color = 'black',
+  inline,
+  name,
+  value,
+  label,
+  checked,
+  required,
+  onChange,
+}) => (
+  <label
+    className={classnames(
+      classes.root,
+      {
+        [classes.inline]: inline,
+        [classes.checked]: checked,
+      },
+      className,
+    )}
+    style={{ color }}
+  >
+    <input
+      checked={checked}
+      className={classes.input}
+      name={name}
+      onChange={onChange}
+      required={required}
+      type="radio"
+      value={value}
+    />
+    <span
+      className={classes.pseudoInput}
+      style={{ background: checked ? inputGradient(color) : 'transparent' }}
+    >
+      {' '}
+    </span>
+    <span className={classes.label}>{label}</span>
+  </label>
+)
+
+export default Radio

packages/pubsweet-ui/src/atoms/Radio.local.scss

+.root {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  transition: all 2s;
+}
+
+.root.inline {
+  display: inline-flex;
+}
+
+.root.inline:not(:last-child) {
+  margin-right: 2.7em;
+}
+
+.root:not(.inline):not(:last-child) {
+  margin-bottom: 0.5rem;
+}
+
+/* label text */
+
+.label {
+  display: inline-block;
+  font-family: inherit;
+  font-size: 1em;
+  font-style: italic;
+  letter-spacing: 1px;
+}
+
+.checked .label {
+  font-weight: 600;
+}
+
+// hide the input
+
+.input {
+  display: none;
+}
+
+/* pseudo-input */
+
+.pseudoInput {
+  background-size: 0;
+  border-color: transparent;
+  border-radius: 10px;
+  box-shadow: 0 0 0 1px;
+  content: " ";
+  display: inline-block;
+  height: 10px;
+  margin-right: 0.3em;
+  transition: border 0.5s ease, background-size 0.3s ease;
+  vertical-align: center;
+  width: 10px;
+}
+
+.root:not(.checked):hover .pseudoInput {
+  background: radial-gradient(closest-corner at center, var(--color-primary) 0%, var(--color-primary) 30%, white 30%, white 100%);
+  box-shadow: 0 0 0 1px var(--color-primary);
+}

packages/pubsweet-ui/src/atoms/Radio.md

+A radio button.
+
+```js
+initialState = {
+  value: undefined
+};
+
+<Radio 
+  name="radio" 
+  checked={state.value === 'on'}
+  onChange={event => setState({ value: event.target.value })}/>
+```
+
+A checked radio button.
+
+```js
+initialState = {
+  value: 'on'
+};
+
+<Radio 
+  name="radio-checked" 
+  checked={state.value === 'on'}
+  onChange={event => setState({ value: event.target.value })}/>
+```
+
+A radio button with a label.
+
+```js
+initialState = {
+  value: undefined
+};
+
+<Radio 
+  name="radio-checked" 
+  label="Foo"
+  checked={state.value === 'on'}
+  onChange={event => setState({ value: event.target.value })}/>
+```
+
+A radio button with a color.
+
+```js
+initialState = {
+  value: undefined
+};
+
+<Radio 
+  name="radio-color" 
+  label="Foo"
+  color="red"
+  checked={state.value === 'on'}
+  onChange={event => setState({ value: event.target.value })}/>
+```

packages/pubsweet-ui/src/atoms/Tags.js

+import React from 'react'
+import ReactTags from 'react-tag-autocomplete'
+import './Tags.scss'
+
+// TODO: separate tags when pasted
+// TODO: allow tags to be edited
+
+class Tags extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      tags: props.value || [],
+    }
+  }
+
+  handleDelete = index => {
+    const { tags } = this.state
+
+    tags.splice(index, 1)
+
+    this.setState({ tags })
+
+    this.props.onChange(tags)
+  }
+
+  handleAddition = tag => {
+    const { tags } = this.state
+
+    tags.push(tag)
+
+    this.setState({ tags })
+
+    this.props.onChange(tags)
+  }
+
+  render() {
+    const { tags } = this.state
+    const { name, suggestions, placeholder } = this.props
+
+    return (
+      <ReactTags
+        allowNew
+        autofocus={false}
+        // TODO: enable these when react-tag-autocomplete update is released
+        // delimiters={[]}
+        // delimiterChars={[',', ';']}
+        handleAddition={this.handleAddition}
+        handleDelete={this.handleDelete}
+        name={name}
+        placeholder={placeholder}
+        suggestions={suggestions}
+        tags={tags}
+      />
+    )
+  }
+}
+
+export default Tags

packages/pubsweet-ui/src/atoms/Tags.md

+A form input for a list of tags.
+
+```js
+<Tags 
+  onChange={value => console.log(value)}/>
+```
+
+Existing values can be passed in, and the placeholder can be customized.
+
+```js
+const value = [
+  {name: 'foo'}, 
+  {name: 'bar'}, 
+  {name: 'baz'}
+];
+
+<Tags 
+  value={value}
+  placeholder="Add new keyword"
+  onChange={value => console.log(value)}/>
+```

packages/pubsweet-ui/src/atoms/Tags.scss

+/* stylelint-disable */
+
+/* trying to reuse some parts frome pubsweet website: the mixins for the underlines for the tags */
+
+$color: var(--color-primary);
+$color-back: white;
+
+@mixin realBorder($color, $colorback) {
+  background: linear-gradient($colorback 0, $colorback 1.2em, $color 1.2em, $color 1.25em, $colorback 1.25em, $colorback 2em) no-repeat;
+  text-shadow: 0.05em 0.05em 0 $colorback, -0.05em -0.05em 0 $colorback, -0.05em 0.05em 0 $colorback, 0.05em -0.05em 0 $colorback;
+}
+
+.root {
+  font-family: "Fira Sans Condensed", sans-serif;
+}
+
+.react-tags {
+  position: relative;
+  padding: 6px 0 0 6px;
+  font-size: 1em;
+  line-height: 1.2;
+
+  /* clicking anywhere will focus the input */
+  cursor: text;
+}
+
+.react-tags.is-focused {
+  border-color: var(--color-primary);
+}
+
+.react-tags__selected {
+  display: inline;
+}
+
+.react-tags__selected-tag {
+  font-family: "Vollkorn", serif;
+  display: inline-block;
+  box-sizing: border-box;
+  margin: 0 1em 1em 0;
+  padding: 0.1em 0.3em;
+  border: 0 solid transparent;
+  @include realBorder(#aaa, white);
+
+  /* match the font styles */
+  font-size: inherit;
+  line-height: inherit;
+  cursor: pointer;
+}
+
+.react-tags__selected-tag::after {
+  content: '\2715';
+  margin-left: 8px;
+  padding: 3px 0 0;
+  // margin: 0;
+  display: inline-block;
+  width: 13px;
+  height: 10px;
+  font-size: 0.9em;
+  background: white;
+  color: #aaa;
+  font-weight: 600;
+  text-shadow: none;
+
+  &:hover {
+    background: var(--color-primary);
+  }
+}
+
+.react-tags__selected-tag:hover,
+.react-tags__selected-tag:focus {
+  @include realBorder(transparent, white);
+
+  text-decoration: line-through;
+
+  &::after {
+    color: var(--color-danger);
+  }
+}
+
+.react-tags__search {
+  display: inline-block;
+
+  /* match tag layout */
+  margin: 0 1em 1em 0;
+  padding: 0.1em 0.3em;
+
+  /* prevent autoresize overflowing the container */
+  max-width: 100px;
+}
+
+@media screen and (min-width: 30em) {
+  .react-tags__search {
+    /* this will become the offsetParent for suggestions */
+    position: relative;
+  }
+}
+
+.react-tags__search input {
+  /* prevent autoresize overflowing the container */
+  max-width: 100%;
+
+  /* remove styles and layout from this element */
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: none;
+
+  /* match the font styles */
+  font-size: inherit;
+  line-height: inherit;
+  border-bottom: 1px dashed grey;
+  min-width: 15ch;
+  font-family: "Vollkorn", serif;
+  color: black; // color: red;
+
+  &::placeholder {
+    font-family: "Fira Sans Condensed", sans-serif;
+    opacity: 0.5;
+  }
+
+  &:focus,
+  &:hover {
+    border-bottom: 1px dashed var(--color-primary);
+  }
+}
+
+.react-tags__search input::-ms-clear {
+  display: none;
+}

packages/pubsweet-ui/src/atoms/TextField.js

+import React from 'react'
+import classes from './TextField.local.scss'
+
+const TextField = ({
+  label,
+  name,
+  placeholder,
+  required,
+  type = 'text',
+  value = '',
+  onBlur,
+  onChange,
+}) => (
+  <label className={classes.root}>
+    {label && <span className={classes.text}>{label}</span>}
+    <input
+      className={classes.input}
+      name={name}
+      onBlur={onBlur}
+      onChange={onChange}
+      placeholder={placeholder}
+      required={required}
+      type={type}
+      value={value}
+    />
+  </label>
+)
+
+export default TextField

packages/pubsweet-ui/src/atoms/TextField.local.scss

+.root {
+  align-items: center;
+  display: flex;
+}
+
+.text {
+  margin-right: 10px;
+}
+
+.input {
+  flex: 1;
+  font-size: inherit;
+  padding: 0.5em;
+}
+
+.root input {
+  border: 0 none;
+  border-bottom: 1px dashed #aaa;
+  font-family: "Vollkorn", serif;
+  padding: 0;
+
+  &:hover,
+  &:focus {
+    border-bottom: 1px dashed var(--color-primary);
+    border-color: transparent;
+    box-shadow: none;
+    outline-style: none;
+  }
+}
+
+.root input::placeholder {
+  color: #777;
+  font-family: var(--font-interface);
+  font-style: italic;
+}

packages/pubsweet-ui/src/atoms/TextField.md

+A form input for plain text.
+
+
+```js
+initialState = { value: '' };
+
+<TextField 
+  value={state.value} 
+  placeholder="so you can write some in here"
+  onChange={event => setState({ value: event.target.value })}/>
+```
+
+The input can have a label.
+
+```js
+initialState = { value: '' };
+
+<TextField 
+  label="Foo" 
+  value={state.value}
+  placeholder="so you can write some in here"
+  onChange={event => setState({ value: event.target.value })}/>
+```

packages/pubsweet-ui/src/atoms/UploadingFile.js

+import React from 'react'
+import classes from './UploadingFile.local.scss'
+
+// TODO: cancel button
+
+const extension = ({ name }) => name.replace(/^.+\./, '')
+
+const UploadingFile = ({ file, error, progress }) => (
+  <div className={classes.root}>
+    {!!error && <div className={classes.error}>{error}</div>}
+
+    <div className={classes.icon}>
+      {!!progress && (
+        <div
+          className={classes.progress}
+          style={{ top: `${progress * 100}%` }}
+        />
+      )}
+
+      <div className={classes.extension}>{extension(file)}</div>
+    </div>
+
+    <div className={classes.name}>{file.name}</div>
+  </div>
+)
+
+export default UploadingFile

packages/pubsweet-ui/src/atoms/UploadingFile.local.scss

+.root {
+  align-items: center;
+  display: inline-flex;
+  flex-direction: column;
+  margin-bottom: 2em;
+  margin-right: 3em;
+  position: relative;
+  width: 20ch;
+}
+
+.icon {
+  background: #ddd;
+  height: 100px;
+  margin: 5px;
+  opacity: 0.5;
+  position: relative;
+  width: 70px;
+}
+
+.progress {
+  background-image:
+    linear-gradient(
+      var(--color-primary-light) 50%,
+      var(--color-primary) 75%,
+      to top
+    );
+  bottom: 0;
+  content: '';
+  display: block;
+  left: 0;
+  opacity: 1;
+  position: absolute;
+  right: 0;
+  transform-origin: 0 0;
+
+  &::after {
+    /* we can use a data attribute for the numbering below */
+    bottom: 2px;
+    color: white;
+    content: "00%";
+    display: block;
+    position: absolute;
+    right: 2px;
+  }
+}
+
+.error {
+  background: var(--color-danger);
+  border: 2px solid white;
+  color: white;
+  font-size: 0.8em;
+  letter-spacing: 0.01em;
+  opacity: 1;
+  padding: 0.3em 0.5em;
+  position: absolute;
+  top: 25%;
+  z-index: 4;
+}
+
+.extension {
+  background: #888;
+  color: white;
+  font-size: 12px;
+  left: 20px;
+  padding: 2px;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  text-transform: uppercase;
+  top: 20px;
+}
+
+.name {
+  color: gray;
+  font-size: 90%;
+  font-style: italic;
+  margin: 5px;
+  max-width: 20ch;
+}
+
+// clock experiment, on hold.
+//.progress {
+//    opacity: 1;
+//    background: var(--color-primary);
+//    position: absolute;
+//    bottom: 10%;
+//    right: 10%;
+//    content: '';
+//    width: 3px;
+//    height: 1em;
+//    display: block;
+//    // margin-left: 30%;
+//    transform-origin: 0 0;
+//    animation: rotate 1s infinite ease-in-out ;
+//    background-image:
+//    &:after {
+//      content: "uploading";
+//      display: block;
+//      position: absolute;
+//      width: 1em;
+//      height:  1em;
+//    }
+//}
+//
+//
+//@keyframes rotate {
+//  0% {
+//    transform: rotate(0)
+//  }
+//  100% {
+//    transform: rotate(360deg);
+//  }
+//}

packages/pubsweet-ui/src/atoms/UploadingFile.md

+A file that's being uploaded.
+
+```js
+const file = {
+  name: faker.system.commonFileName()
+};
+
+<UploadingFile file={file}/>
+```
+
+Upload progress is displayed as an overlay.
+
+```js
+const file = {
+  name: faker.system.commonFileName(),
+};
+
+<UploadingFile file={file} progress={0.5}/>
+```
+
+An upload error is displayed above the file.
+
+```js
+const file = {
+  name: faker.system.commonFileName(),
+};
+
+<UploadingFile file={file} error="There was an error"/>
+```