feat(dependency): do not require peer deps (#288)

* feat(dependencies): peer to actual

* fix(mui): updates require patching

* test(node): unpin node version

* fix(react): must be a peer dep for create-react-app

Author: redgeoff

.circleci/config.yml

@@ -6,9 +6,7 @@ jobs:
     working_directory: ~/mson-react
 
     docker:
-      # TODO: restore after https://github.com/facebook/jest/issues/8069 has been resolved
-      # - image: circleci/node:stretch-browsers
-      - image: circleci/node:10-stretch-browsers
+      - image: circleci/node:stretch-browsers
 
     steps:
       - checkout

README.md

@@ -15,8 +15,7 @@ Implementing great forms can be a real time-waster. With just a few lines of JSO
 
 ### Adding MSON-React to Your Existing React Project
 
-  - `yarn add @date-io/date-fns @material-ui/core date-fns @material-ui/pickers mson mson-react typeface-roboto`
-    - Note: this is needed as MSON and MSON-React are libraries that work in conjunction with React, Material UI and Date-IO. As such, these dependencies are peer dependencies.
+  - `yarn add mson-react` or `npm install mson-react`
   - Add the following to the head section of your index.html:
     ```html
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

package.json

@@ -7,19 +7,16 @@
   "main": "lib/bundle.js",
   "homepage": "https://redgeoff.github.io/mson-react",
   "peerDependencies": {
-    "@date-io/date-fns": "^1.3.13",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/pickers": "^3.2.10",
-    "date-fns": "^2.15.0",
-    "mson": "^2.9.0",
-    "prop-types": "^15.6.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react": ">= 16"
   },
   "dependencies": {
+    "@date-io/date-fns": "^1.3.13",
+    "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "classnames": "^2.2.6",
+    "date-fns": "^2.15.0",
     "lodash": "^4.17.20",
+    "mson": "^2.9.0",
     "react-beautiful-dnd": "^13.0.0",
     "react-google-recaptcha": "^2.1.0",
     "react-markdown": "^5.0.3",
@@ -35,8 +32,6 @@
     "@babel/plugin-transform-runtime": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
-    "@date-io/date-fns": "^1.3.13",
-    "@material-ui/core": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "babel-loader": "8.1.0",
@@ -46,16 +41,14 @@
     "css-loader": "^5.0.1",
     "css-mediaquery": "^0.1.2",
     "cz-conventional-changelog": "^3.3.0",
-    "date-fns": "^2.16.1",
     "gh-pages": "^3.1.0",
     "jest-environment-jsdom-fourteen": "^1.0.1",
     "lint-staged": "^10.5.3",
-    "mson": "^2.9.0",
     "prettier": "^2.2.1",
     "prop-types": "^15.6.2",
     "react": "^17.0.1",
-    "react-beautiful-dnd-test-utils": "^3.2.1",
     "react-dom": "^17.0.1",
+    "react-beautiful-dnd-test-utils": "^3.2.1",
     "react-scripts": "^4.0.1",
     "semantic-release": "^17.3.0",
     "style-loader": "^2.0.0",

src/app-container.js

@@ -2,14 +2,14 @@ import React from 'react';
 import AppUI from './app';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
-import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
+import { createTheme } from '@material-ui/core/styles';
 import blueGrey from '@material-ui/core/colors/blueGrey';
 import lightBlue from '@material-ui/core/colors/lightBlue';
 import { BrowserRouter, Prompt } from 'react-router-dom';
 import globals from 'mson/lib/globals';
 import attach from './attach';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   palette: {
     primary: blueGrey,
     // primary: blue,

src/fields/url-field.js

@@ -4,13 +4,8 @@ import attach from '../attach';
 
 class URLField extends React.PureComponent {
   render() {
-    const {
-      component,
-      value,
-      editable,
-      useDisplayValue,
-      newWindow,
-    } = this.props;
+    const { component, value, editable, useDisplayValue, newWindow } =
+      this.props;
 
     let displayValue = null;
 
@@ -20,8 +15,11 @@ class URLField extends React.PureComponent {
       if (href.indexOf('http') !== 0) {
         href = 'http://' + href;
       }
+
+      // Using target=_blank without rel=noreferrer is a security risk:
+      // https://html.spec.whatwg.org/multipage/links.html#link-type-noopener
       displayValue = (
-        <a href={href} target={newWindow ? '_blank' : '_self'}>
+        <a href={href} rel="noreferrer" target={newWindow ? '_blank' : '_self'}>
           {value}
         </a>
       );