File picker component

package.json

@@ -34,7 +34,7 @@
   "homepage": "https://mavenlink.github.io/design-system",
   "jest": {
     "moduleNameMapper": {
-      "\\.css$": "identity-obj-proxy"
+      "\\.(css|svg)$": "identity-obj-proxy"
     },
     "setupTestFrameworkScriptFile": "<rootDir>/setup-enzyme.js",
     "testPathIgnorePatterns": [
@@ -48,35 +48,37 @@
     "@babel/polyfill": "^7.4.4",
     "@babel/preset-env": "^7.2.3",
     "@babel/preset-react": "^7.0.0",
+    "@testing-library/react": "^9.1.1",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
     "babel-loader": "^8.0.5",
     "css-loader": "^2.1.0",
     "cypress": "^3.1.4",
-    "enzyme": "^3.8.0",
-    "enzyme-adapter-react-16": "^1.7.1",
-    "eslint": "^4.3.0",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
+    "eslint": "^6.1.0",
     "eslint-config-mavenlint-react": "^2.0.0",
     "eslint-plugin-cypress": "^2.2.0",
     "file-loader": "^3.0.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^23.6.0",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.5.0",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
     "react-ga": "^2.5.6",
-    "react-styleguidist": "^8.0.6",
+    "react-styleguidist": "9.0.4",
+    "react-test-renderer": "^16.9.0",
     "react-transition-group": "^2.5.3",
     "style-loader": "^0.23.1",
-    "svg-sprite-loader": "^3.8.0",
-    "svgo": "^1.3,0",
-    "svgo-loader": "^2.1.0",
     "stylelint": "^10.1.0",
     "stylelint-config-css-modules": "^1.4.0",
     "stylelint-config-standard": "^18.3.0",
     "stylelint-css-modules": "^0.9.0",
+    "svg-sprite-loader": "^3.8.0",
+    "svgo": "^1.3,0",
+    "svgo-loader": "^2.1.0",
     "url-loader": "^1.1.2",
     "wait-on": "^3.2.0",
     "webpack": "^4.28.3"

src/components/file-picker/.eslintrc

@@ -0,0 +1,14 @@
+{
+  "rules": {
+    // Override: role button for file-picker's label allows it to
+    // behave as a file dialog open button in my VoiceOver testing
+    "jsx-a11y/no-noninteractive-element-to-interactive-role": [
+      'error',
+      {
+        label: [
+          'button',
+        ],
+      },
+    ]
+  }
+}

src/components/file-picker/file-picker.css

@@ -0,0 +1,110 @@
+@import "../../styles/colors.css";
+@import "../../styles/spacing.css";
+@import "../../styles/typography.css";
+
+.title,
+.label,
+.filename,
+.remove {
+  font-family: var(--mavenlink-type-font-family);
+}
+
+.dropzone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  text-align: center;
+  background: var(--palette-neutral-x-light);
+  min-height: 100px;
+  vertical-align: middle;
+  border: 2px dashed var(--palette-grey-light);
+}
+
+.highlight-dropzone {
+  border: 2px solid var(--palette-grey-base);
+  opacity: 0.4;
+}
+
+.label-base {
+  display: block;
+  flex: 1;
+  margin: 0 0 var(--spacing-small);
+  color: var(--palette-grey-dark);
+  cursor: pointer;
+}
+
+.label {
+  composes: label-base;
+  line-height: 100px;
+}
+
+.filename,
+.label {
+  font-size: var(--mavenlink-type-base-size);
+}
+
+.title {
+  composes: label-base;
+  font-size: var(--mavenlink-type-small-size);
+}
+
+.file {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  border: 0;
+  padding: 0;
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+}
+
+.label:focus {
+  outline: 1px dotted var(--palette-grey-dark);
+  outline: -webkit-focus-ring-color auto 5px;
+}
+
+.file-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.file-list-button {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid var(--palette-grey-light);
+  line-height: var(--spacing-x-large);
+}
+
+.icon {
+  align-self: center;
+  margin-right: var(--spacing-medium);
+}
+
+.upload {
+  color: var(--palette-grey-dark);
+  vertical-align: middle;
+}
+
+.upload-icon {
+  margin-top: -1px;
+  margin-right: var(--spacing-small);
+}
+
+.filename {
+  flex-grow: 1;
+  text-align: left;
+  color: var(--palette-grey-x-dark);
+}
+
+.remove {
+  flex: 0 0 50px;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  font-weight: bold;
+  color: var(--palette-grey-base);
+  text-align: center;
+  font-size: 18px;
+}

src/components/file-picker/file-picker.jsx

@@ -0,0 +1,162 @@
+import PropTypes from 'prop-types';
+import React, { useState, useRef } from 'react';
+import Icon from '../icon/icon';
+import useError from '../../hooks/useError';
+import styles from './file-picker.css';
+import iconUpload from '../../svgs/icon-cloud-upload-negative.svg';
+import iconFileDefault from '../../svgs/icon-file-default.svg';
+
+const FilePicker = (props) => {
+  const {
+    dropzoneClasses,
+    labelClasses,
+    fileClasses,
+    fileListClasses,
+    id,
+    title,
+    receiveFilesChanged,
+    validator,
+    ...rest
+  } = props;
+
+  const [files, setFiles] = useState([]);
+  const [getError, setError, validate] = useError(validator);
+  const [highlight, setHighlight] = useState(false);
+  const inputFile = useRef(null);
+
+  const setFilesChanged = (selectedFiles) => {
+    // Accounts for case where User's clicked 'Cancel' on native file dialog
+    if (selectedFiles.length) {
+      const currentFiles = [];
+      Array.from(selectedFiles).map(file => currentFiles.push(file));
+      const errMsg = validate(currentFiles);
+      if (errMsg.length) {
+        setError(errMsg);
+      } else {
+        setError('');
+        setFiles(currentFiles);
+        if (props.receiveFilesChanged) {
+          props.receiveFilesChanged.call(this, currentFiles);
+        }
+      }
+    }
+  };
+
+  const onFilesChanged = (e) => {
+    const selectedFiles = e.currentTarget.files;
+    setFilesChanged(selectedFiles);
+  };
+
+  const onRemoveFile = (e, file) => {
+    e.preventDefault();
+    const currentFiles = files.filter(f => f.name !== file.name);
+    setFiles(currentFiles);
+    if (props.receiveFilesChanged) {
+      props.receiveFilesChanged.call(this, currentFiles);
+    }
+  };
+
+  const onLabelKeypress = (e) => {
+    e.preventDefault();
+    if (e.key === 'Enter') {
+      inputFile.current.click();
+    }
+  };
+
+  // This prevents the dropEffect going from "copy" to "none"
+  // (in chrome, cursor turns from a green plus to an arrow)
+  // https://github.com/react-dropzone/react-dropzone/blob/master/src/index.js#L533
+  const fixDropEffect = (e) => {
+    e.stopPropagation();
+    if (e.dataTransfer) {
+      try {
+        e.dataTransfer.dropEffect = 'copy';
+      } catch {} /* eslint-disable-line no-empty */
+    }
+  };
+
+  const onDragOver = (e) => {
+    e.preventDefault();
+    fixDropEffect(e);
+  };
+
+  const onDragLeave = () => {
+    setHighlight(false);
+  };
+
+  const onDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const droppedFiles = e.dataTransfer.files;
+    setFilesChanged(droppedFiles);
+    setHighlight(false);
+  };
+
+  const getFilesList = () => {
+    if (files.length) {
+      return files.map((file) => {
+        return (
+          <section className={styles['file-list-button']} key={file.name}>
+            <Icon className={styles.icon} name={iconFileDefault.id} size="medium" stroke="grey-base" fill="none" title="Upload file icon" />
+            <span className={styles.filename}>{file.name}</span>
+            <button onClick={e => onRemoveFile(e, file)} className={styles.remove}>&times;</button>
+          </section>
+        );
+      });
+    }
+    return '';
+  };
+
+  const getDropzoneClasses = () => {
+    const highlightClasses = highlight ? ` ${styles['highlight-dropzone']}` : '';
+    return `${props.dropzoneClasses}${highlightClasses}`;
+  };
+
+  return (
+    <React.Fragment>
+      <span className={styles.title}>{props.title}</span>{getError()}
+      <section className={props.fileListClasses}>
+        {getFilesList()}
+      </section>
+      <section
+        className={getDropzoneClasses()}
+        draggable
+        onDragOver={onDragOver}
+        onDragLeave={onDragLeave}
+        onDrop={onDrop}
+      >
+        <label onKeyDown={onLabelKeypress} htmlFor={props.id} className={props.labelClasses} tabIndex="0" role="button" aria-controls={props.id}>
+          <Icon className={styles['upload-icon']} name={iconUpload.id} size="medium" fill="grey-dark" stroke="none" title="Upload file icon" />
+          <span className={styles.upload}>Upload Files</span>
+          <input onChange={e => onFilesChanged(e)} type="file" id={props.id} className={props.fileClasses} ref={inputFile} {...rest} />
+        </label>
+      </section>
+    </React.Fragment>
+  );
+};
+
+FilePicker.propTypes = {
+  dropzoneClasses: PropTypes.string,
+  fileClasses: PropTypes.string,
+  fileListClasses: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  labelClasses: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  multiple: PropTypes.string,
+  receiveFilesChanged: PropTypes.func,
+  validator: PropTypes.func,
+};
+
+FilePicker.defaultProps = {
+  dropzoneClasses: styles.dropzone,
+  fileClasses: styles.file,
+  fileListClasses: styles['file-list'],
+  id: undefined,
+  labelClasses: styles.label,
+  title: undefined,
+  multiple: undefined,
+  receiveFilesChanged: undefined,
+  validator: undefined,
+};
+
+export default FilePicker;

src/components/file-picker/file-picker.md

@@ -0,0 +1,49 @@
+Default usage
+
+You can either select files via the file dialog picker, or, drop
+the files onto the "dropzone".
+
+```jsx
+<FilePicker id="le-picker-single" title="Attach Files" />
+```
+
+Multiple
+
+```jsx
+<FilePicker id="le-picker-multi" title="Attach Multiple Files" multiple='multiple' />
+```
+
+The `receiveFilesChanged` prop allows you to receive notifications when
+the _FileList_ has changed. (see
+[File API](https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API))
+You can then iteract with these files using the [File API](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL)
+per file. For example, you may wish to do something like
+`FileReader.readAsDataURL(someFile)` before uploading to a server endpoint.
+
+Interact with the following example component and view the console output.
+
+```jsx
+const callback = filelist => { filelist.forEach(file => console.log('file: ', file)) }
+<FilePicker receiveFilesChanged={callback}  id="le-picker-notify" title="Attach" multiple='multiple' />
+```
+
+Errors
+
+Pass a `validator` function that verifies each of the files and returns an
+error message. The component will then take care of displaying these returned
+errors properly. To see this, pick a file greater then 10MB:
+
+```jsx
+const fileSizeError = 'The file size cannot exceed 10MB.';
+const validateFileSize = (files) => {
+  const max = 10240000;
+  const errors = files.reduce((acc, file) => {
+    if (file.size > max) {
+      acc.push(`${file.name} too big. ${fileSizeError}`);
+    }
+    return acc;
+  }, []);
+  return errors.join(' ');
+}
+<FilePicker validator={validateFileSize} id="validator-example" title="Attach Files" />
+```