react-demo-one - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/index.js

@@ -5,2 +5,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 var core = require('@material-ui/core');
+var reactRouterDom = require('react-router-dom');
 
@@ -10,2 +11,80 @@ var useStyles = core.makeStyles(function (theme) {
     root: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    card: {
+      width: 390,
+      background: theme.palette.primary.main
+    },
+    content: {
+      color: theme.palette.getContrastText(theme.palette.primary.main)
+    },
+    header: {
+      textAlign: 'center'
+    },
+    subHeader: {
+      marginTop: theme.spacing(-3)
+    },
+    button: {
+      marginTop: theme.spacing(8),
+      display: 'flex',
+      justifyContent: 'center'
+    },
+    largeDisplay: {
+      fontSize: '4rem',
+      color: theme.palette.getContrastText(theme.palette.primary.main)
+    },
+    message: {
+      marginTop: theme.spacing(3)
+    }
+  };
+});
+var PageNotFound = function PageNotFound(props) {
+  var classes = useStyles();
+  var title = props.title,
+      subheader = props.subheader,
+      message = props.message,
+      to = props.to,
+      buttonLabel = props.buttonLabel;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.root
+  }, /*#__PURE__*/React.createElement(core.Card, {
+    className: classes.card
+  }, /*#__PURE__*/React.createElement(core.CardContent, null, /*#__PURE__*/React.createElement("div", {
+    className: classes.content
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.header
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(core.Typography, {
+    className: classes.largeDisplay
+  }, "404")), /*#__PURE__*/React.createElement("div", {
+    className: classes.subHeader
+  }, /*#__PURE__*/React.createElement(core.Typography, {
+    variant: "h6"
+  }, title))), /*#__PURE__*/React.createElement("div", {
+    className: classes.message
+  }, /*#__PURE__*/React.createElement(core.Typography, {
+    variant: "overline",
+    style: {
+      fontWeight: 700
+    }
+  }, subheader), /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: 'left'
+    }
+  }, /*#__PURE__*/React.createElement(core.Typography, {
+    variant: "caption"
+  }, message))), /*#__PURE__*/React.createElement("div", {
+    className: classes.button
+  }, /*#__PURE__*/React.createElement(core.Button, {
+    component: reactRouterDom.Link,
+    to: to,
+    variant: "contained",
+    color: "secondary"
+  }, buttonLabel))))));
+};
+
+var useStyles$1 = core.makeStyles(function (theme) {
+  return {
+    root: {
       width: 300,
@@ -18,3 +97,3 @@ height: 300,
 var ReactDemoOne = function ReactDemoOne(props) {
-  var classes = useStyles();
+  var classes = useStyles$1();
   var text = props.text;
@@ -26,3 +105,4 @@ return /*#__PURE__*/React.createElement("div", {
 
+exports.PageNotFound = PageNotFound;
 exports.ReactDemoOne = ReactDemoOne;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

 import React from 'react';
-import { makeStyles, Button } from '@material-ui/core';
+import { makeStyles, Card, CardContent, Typography, Button } from '@material-ui/core';
+import { Link } from 'react-router-dom';
 
@@ -7,2 +8,80 @@ var useStyles = makeStyles(function (theme) {
     root: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    card: {
+      width: 390,
+      background: theme.palette.primary.main
+    },
+    content: {
+      color: theme.palette.getContrastText(theme.palette.primary.main)
+    },
+    header: {
+      textAlign: 'center'
+    },
+    subHeader: {
+      marginTop: theme.spacing(-3)
+    },
+    button: {
+      marginTop: theme.spacing(8),
+      display: 'flex',
+      justifyContent: 'center'
+    },
+    largeDisplay: {
+      fontSize: '4rem',
+      color: theme.palette.getContrastText(theme.palette.primary.main)
+    },
+    message: {
+      marginTop: theme.spacing(3)
+    }
+  };
+});
+var PageNotFound = function PageNotFound(props) {
+  var classes = useStyles();
+  var title = props.title,
+      subheader = props.subheader,
+      message = props.message,
+      to = props.to,
+      buttonLabel = props.buttonLabel;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.root
+  }, /*#__PURE__*/React.createElement(Card, {
+    className: classes.card
+  }, /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement("div", {
+    className: classes.content
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.header
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+    className: classes.largeDisplay
+  }, "404")), /*#__PURE__*/React.createElement("div", {
+    className: classes.subHeader
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "h6"
+  }, title))), /*#__PURE__*/React.createElement("div", {
+    className: classes.message
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "overline",
+    style: {
+      fontWeight: 700
+    }
+  }, subheader), /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: 'left'
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption"
+  }, message))), /*#__PURE__*/React.createElement("div", {
+    className: classes.button
+  }, /*#__PURE__*/React.createElement(Button, {
+    component: Link,
+    to: to,
+    variant: "contained",
+    color: "secondary"
+  }, buttonLabel))))));
+};
+
+var useStyles$1 = makeStyles(function (theme) {
+  return {
+    root: {
       width: 300,
@@ -15,3 +94,3 @@ height: 300,
 var ReactDemoOne = function ReactDemoOne(props) {
-  var classes = useStyles();
+  var classes = useStyles$1();
   var text = props.text;
@@ -23,3 +102,3 @@ return /*#__PURE__*/React.createElement("div", {
 
-export { ReactDemoOne };
+export { PageNotFound, ReactDemoOne };
 //# sourceMappingURL=index.modern.js.map

package.json

 {
   "name": "react-demo-one",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "This is a test package not intended for use",
@@ -30,3 +30,2 @@ "author": "tototaba",
   "devDependencies": {
-    "microbundle-crl": "^0.13.10",
     "babel-eslint": "^10.0.3",
@@ -45,2 +44,3 @@ "cross-env": "^7.0.2",
     "gh-pages": "^2.2.0",
+    "microbundle-crl": "^0.13.10",
     "npm-run-all": "^4.1.5",
@@ -54,3 +54,6 @@ "prettier": "^2.0.4",
     "dist"
-  ]
+  ],
+  "dependencies": {
+    "react-router-dom": "^5.2.0"
+  }
 }

No alert changes

Improved metrics

Total package byte prevSize

20147

increased by247%

Lines of code

206

increased by320.41%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addedreact-router-dom@^5.2.0

• + Added@babel/runtime@7.26.9(transitive)

• + Addedhistory@4.10.1(transitive)

• + Addedhoist-non-react-statics@3.3.2(transitive)

• + Addedisarray@0.0.1(transitive)

• + Addedpath-to-regexp@1.9.0(transitive)

• + Addedreact-router@5.3.4(transitive)

• + Addedreact-router-dom@5.3.4(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedresolve-pathname@3.0.0(transitive)

• + Addedtiny-invariant@1.3.3(transitive)

• + Addedtiny-warning@1.0.3(transitive)

• + Addedvalue-equal@1.0.1(transitive)