adds named exports for components

refactors common components into common package
adds minimal app build to e2e tests and removes dist binary

packages/mirador3-app/.eslintrc → .eslintrc

@@ -11,6 +11,9 @@
   "plugins": ["jest"],
   "rules": {
     "no-console": "off",
+    "import/no-named-export": 0,
+    "import/no-named-as-default": 0,
+    "import/prefer-default-export": 0,
     "global-require": "off",
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "require-jsdoc": ["error", {

.travis.yml

@@ -1,10 +1,12 @@
 language: node_js
 node_js:
-  - "8"
+  - "node"
 before_script:
   - npm install
   - cd packages/mirador3-core
   - npm install
+  - cd ../mirador3-common
+    npm install
   - cd ../mirador3-app
   - npm install
   - cd ../..

package.json

@@ -2,6 +2,16 @@
   "name": "root",
   "private": true,
   "devDependencies": {
+    "babel-eslint": "9.0.0",
+    "eslint": "^5.9.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-react-app": "^3.0.5",
+    "eslint-loader": "^2.1.1",
+    "eslint-plugin-flowtype": "2.50.1",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jest": "^22.1.0",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-react": "^7.11.1",
     "lerna": "^3.4.3"
   }
 }

packages/mirador3-app-base/.eslintignore

@@ -0,0 +1,5 @@
+build/
+config/
+dist/
+scripts/
+coverage/

packages/mirador3-app/package.json → packages/mirador3-app-base/package.json

@@ -1,15 +1,10 @@
 {
-  "name": "mirador3-app",
+  "name": "mirador3-app-base",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "css-ns": "^1.2.2",
-    "enzyme": "^3.7.0",
-    "jest": "23.6.0",
-    "jest-fetch-mock": "^2.0.1",
     "mirador3-core": "file:../mirador3-core",
-    "node-fetch": "2.1.1",
-    "openseadragon": "^2.4.0",
+    "mirador3-common": "file:../mirador3-common",
     "prop-types": "^15.6.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",

packages/mirador3-app/src/components/App.js → packages/mirador3-app-base/src/components/App.jsx

@@ -2,11 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { actions } from 'mirador3-core';
-import Display from './Display';
-import ManifestForm from './ManifestForm';
-import ManifestListItem from './ManifestListItem';
-import Workspace from './Workspace';
-import ns from '../config/css-ns';
+import { Display, ManifestForm, ManifestListItem, Workspace, ns } from 'mirador3-common'
 
 /**
  * This is the top level Mirador component.

packages/mirador3-common/.eslintignore

@@ -0,0 +1,4 @@
+config/
+lib/
+scripts/
+coverage/

packages/mirador3-common/config/jest/cssTransform.js

@@ -0,0 +1,12 @@
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process() {
+    return 'module.exports = {};';
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return 'cssTransform';
+  },
+};

packages/mirador3-common/config/jest/fileTransform.js

@@ -0,0 +1,28 @@
+const path = require('path');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+
+    if (filename.match(/\.svg$/)) {
+      return `module.exports = {
+        __esModule: true,
+        default: ${assetFilename},
+        ReactComponent: (props) => ({
+          $$typeof: Symbol.for('react.element'),
+          type: 'svg',
+          ref: null,
+          key: null,
+          props: Object.assign({}, props, {
+            children: ${assetFilename}
+          })
+        }),
+      };`;
+    }
+
+    return `module.exports = ${assetFilename};`;
+  },
+};

packages/mirador3-common/jest.json

@@ -0,0 +1,44 @@
+{
+  "collectCoverageFrom": [
+    "src/**/*.{js,jsx,ts,tsx}",
+    "!src/**/*.d.ts"
+  ],
+  "coverageDirectory": "<rootDir>/coverage",
+  "coverageReporters": ["html"],
+  "resolver": "jest-pnp-resolver",
+  "setupFiles": [
+    "jest-canvas-mock"
+  ],
+  "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js",
+  "testMatch": [
+    "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
+    "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
+  ],
+  "testEnvironment": "jsdom",
+  "testURL": "http://localhost",
+  "transform": {
+    "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
+    "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+    "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+  },
+  "transformIgnorePatterns": [
+    "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
+    "^.+\\.module\\.(css|sass|scss)$"
+  ],
+  "moduleNameMapper": {
+    "^react-native$": "react-native-web",
+    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
+  },
+  "moduleFileExtensions": [
+    "web.js",
+    "js",
+    "web.ts",
+    "ts",
+    "web.tsx",
+    "tsx",
+    "json",
+    "web.jsx",
+    "jsx",
+    "node"
+  ]
+}

packages/mirador3-common/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "mirador3-common",
+  "version": "0.1.0",
+  "description": "",
+  "license": "Apache-2.0",
+  "main": "lib/index.js",
+  "repository": "https://github.com/ProjectMirador/research-and-demos/mirador3-common",
+  "scripts": {
+    "lint": "node_modules/.bin/eslint ./",
+    "test": "npm run lint && jest -c jest.json",
+    "test:watch": "jest -c jest.json --watch",
+    "test:coverage": "jest -c jest.json --coverage",
+    "build": "webpack --mode production",
+    "build:watch": "node_modules/.bin/webpack --watch"
+  },
+  "dependencies": {
+    "css-ns": "^1.2.2",
+    "enzyme": "^3.7.0",
+    "jest": "23.6.0",
+    "jest-fetch-mock": "^2.0.1",
+    "mirador3-core": "file:../mirador3-core",
+    "node-fetch": "2.1.1",
+    "openseadragon": "^2.4.0",
+    "prop-types": "^15.6.2",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "redux": "3.7.2",
+    "react-redux": "^5.0.7"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.1.6",
+    "@babel/preset-env": "^7.1.6",
+    "@babel/plugin-proposal-class-properties": "^7.2.1",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "9.0.0",
+    "babel-jest": "23.6.0",
+    "babel-loader": "^8.0.4",
+    "babel-plugin-named-asset-import": "^0.2.3",
+    "@babel/preset-react": "7.0.0",
+    "enzyme": "^3.7.0",
+    "enzyme-adapter-react-16": "^1.7.0",
+    "eslint": "^5.9.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-loader": "^2.1.1",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jest": "^22.1.0",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-react": "^7.11.1",
+    "jest": "23.6.0",
+    "jest-canvas-mock": "^1.1.0",
+    "jest-pnp-resolver": "1.0.1",
+    "jest-resolve": "23.6.0",
+    "jsdom": "^13.0.0",
+    "react-app-polyfill": "^0.1.3",
+    "react-dev-utils": "^6.1.1",
+    "redux-mock-store": "^1.5.3",
+    "webpack": "^4.24.0",
+    "webpack-cli": "^3.1.2"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ],
+    "plugins": [
+      "@babel/plugin-proposal-class-properties"
+    ]
+  }
+}

packages/mirador3-app/src/components/Display.js → packages/mirador3-common/src/components/Display.jsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
-import ManifestMetadata from './ManifestMetadata';
-import ns from '../config/css-ns';
+import { ManifestMetadata } from './ManifestMetadata';
+import { ns } from '../config/css-ns';
 
 /**
  * Determines how to best display the content (or lack thereof) the manifest
@@ -45,7 +45,7 @@ const stateClass = (manifest) => {
  * @param {object} props
  * @param {object} [props.manifest = undefined]
  */
-const Display = ({ manifest }) => (
+export const Display = ({ manifest }) => (
   <div className="Display">
     <div id="exampleManifest" className={ns(stateClass(manifest))}>
       {displayContent(manifest)}
@@ -60,5 +60,3 @@ Display.propTypes = {
 Display.defaultProps = {
   manifest: undefined,
 };
-
-export default Display;

packages/mirador3-app/src/components/ManifestForm.js → packages/mirador3-common/src/components/ManifestForm.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import * as React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { actions } from 'mirador3-core';
@@ -8,7 +8,7 @@ import { actions } from 'mirador3-core';
  * @prop {Function} fetchManifest
  * @prop {Function} setLastRequested
  */
-class ManifestForm extends Component {
+class ManifestFormComponent extends React.Component {
   /**
    * constructor -
    */
@@ -62,7 +62,7 @@ class ManifestForm extends Component {
   }
 }
 
-ManifestForm.propTypes = {
+ManifestFormComponent.propTypes = {
   fetchManifest: PropTypes.func.isRequired,
   setLastRequested: PropTypes.func.isRequired,
 };
@@ -87,7 +87,7 @@ const mapDispatchToProps = dispatch => ({
   ),
 });
 
-export default connect(
+export const ManifestForm = connect(
   mapStateToProps,
   mapDispatchToProps,
-)(ManifestForm);
+)(ManifestFormComponent);

packages/mirador3-app/src/components/ManifestListItem.js → packages/mirador3-common/src/components/ManifestListItem.jsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import * as React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { actions } from 'mirador3-core';
-import ns from '../config/css-ns';
+import { ns } from '../config/css-ns';
 
 
 /**
@@ -23,15 +23,15 @@ const handleOpenButtonClick = (event, manifest, addWindow) => {
  * @memberof ManifestListItem
  * @private
  */
-const ManifestListItem = ({ manifest, addWindow }) => (
+const ManifestListItemComponent = ({ manifest, addWindow }) => (
   <li className={ns('manifest-list-item')}>
     <button type="button" onClick={event => handleOpenButtonClick(event, manifest, addWindow)}>
       {manifest}
     </button>
   </li>
 );
 
-ManifestListItem.propTypes = {
+ManifestListItemComponent.propTypes = {
   manifest: PropTypes.string.isRequired, // eslint-disable-line react/forbid-prop-types
   addWindow: PropTypes.func.isRequired,
 };
@@ -56,7 +56,7 @@ const mapDispatchToProps = dispatch => ({
   ),
 });
 
-export default connect(
+export const ManifestListItem = connect(
   mapStateToProps,
   mapDispatchToProps,
-)(ManifestListItem);
+)(ManifestListItemComponent);

packages/mirador3-app/src/components/ManifestMetadata.js → packages/mirador3-common/src/components/ManifestMetadata.jsx

@@ -1,12 +1,12 @@
-import React, { Component } from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
-import ns from '../config/css-ns';
+import { ns } from '../config/css-ns';
 
 /**
  * ManifestMetadata
  * @param {object} window
  */
-export default class ManifestMetadata extends Component {
+export class ManifestMetadata extends React.Component {
   /**
    * Renders things
    * @param {object} props

packages/mirador3-app/src/components/Window.js → packages/mirador3-common/src/components/Window.jsx

@@ -1,15 +1,15 @@
-import React, { Component } from 'react';
+import * as React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import fetch from 'node-fetch';
 import OpenSeaDragon from 'openseadragon';
-import ns from '../config/css-ns';
+import { ns } from '../config/css-ns';
 
 /**
  * Represents a Window in the mirador workspace
  * @param {object} window
  */
-class Window extends Component {
+class WindowComponent extends React.Component {
   /**
    * @param {Object} props [description]
    */
@@ -124,12 +124,12 @@ class Window extends Component {
   }
 }
 
-Window.propTypes = {
+WindowComponent.propTypes = {
   window: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   manifest: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 };
 
-Window.defaultProps = {
+WindowComponent.defaultProps = {
   manifest: null,
 };
 
@@ -146,4 +146,4 @@ const mapStateToProps = ({ windows, manifests }, props) => {
   };
 };
 
-export default connect(mapStateToProps)(Window);
+export const Window = connect(mapStateToProps)(WindowComponent);