mui-layout - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

package.json

 {
   "name": "mui-layout",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Instantly build dynamic and responsive layout based on React Material-UI",
@@ -41,2 +41,3 @@ "main": "dist/index.js",
     "babel-plugin-module-resolver": "^3.2.0",
+    "color": "^3.1.2",
     "eslint": "^5.12.0",
@@ -55,5 +56,8 @@ "eslint-config-airbnb": "^17.1.0",
     "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react-dom": "^16.8.6",
+    "react-gist": "^1.2.1",
+    "react-router-dom": "^5.0.1",
+    "storybook-react-router": "^1.0.5"
   },
   "dependencies": {}
 }

stories/components.stories.js

 import React from 'react';
-
 import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
 
-import { Button, Welcome } from '@storybook/react/demo';
 import ChevronLeft from '@material-ui/icons/ChevronLeft';
@@ -27,3 +23,8 @@ import ChevronRight from '@material-ui/icons/ChevronRight';
 storiesOf('Components', module)
-  .add('Root', () => <Root />)
+  .add('Root', () => (
+    <Root>
+      <code>Root</code> is just a Provider, it does not return any DOM on the
+      screen.
+    </Root>
+  ))
   .add('Header', () => (
@@ -30,0 +31,0 @@ <Root>

stories/mock/ContentEx.js

 /* eslint-disable */
-import React from "react";
-import { withStyles } from "@material-ui/core/styles";
-import Typography from "@material-ui/core/Typography";
-import Link from "@material-ui/core/Link";
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Link from '@material-ui/core/Link';
 
-const styles = ({ breakpoints }) => ({
+const styles = ({ breakpoints, transitions }) => ({
   root: {
     padding: 16,
-    [breakpoints.up("sm")]: {
+    transition: transitions.create(),
+    [breakpoints.up('sm')]: {
       padding: 24,
-      maxWidth: 500,
-      margin: "auto"
+      maxWidth: 700,
+      margin: 'auto',
     },
-    [breakpoints.up("md")]: {
-      maxWidth: 700
-    }
-  }
+    [breakpoints.up('md')]: {
+      maxWidth: 960,
+    },
+  },
 });
@@ -23,5 +24,5 @@
   <div className={classes.root}>
-    <Typography variant={"overline"}>INTRODUCING</Typography>
-    <Typography weight={"bold"} variant={"h4"} gutterBottom>
-      Material UI <Link underline={"none"}>Layout</Link>
+    <Typography variant={'overline'}>INTRODUCING</Typography>
+    <Typography weight={'bold'} variant={'h4'} gutterBottom>
+      Material UI <Link underline={'none'}>Layout</Link>
     </Typography>
@@ -31,3 +32,3 @@ <Typography gutterBottom>
     </Typography>
-    <Typography indent={"small"}>
+    <Typography indent={'small'}>
       Layout is a group of Material-UI components that are enhanced and combined
@@ -39,3 +40,3 @@ to create dynamic, easy-to-maintain and easy-to-code as much as possible.
     <br />
-    <Typography weight={"bold"} variant={"h5"} gutterBottom>
+    <Typography weight={'bold'} variant={'h5'} gutterBottom>
       {"Let's start with Why?"}
@@ -47,3 +48,3 @@ </Typography>
     </Typography>
-    <Typography component={"div"}>
+    <Typography component={'div'}>
       <ol>
@@ -70,3 +71,3 @@ <li>
     <br />
-    <Typography weight={"bold"} variant={"h5"} gutterBottom>
+    <Typography weight={'bold'} variant={'h5'} gutterBottom>
       Objectives
@@ -76,11 +77,11 @@ </Typography>
       It must be easy enough to use, however still be able to adjust to compat
-      with real word examples and usages. More importantly, it need to follow{" "}
+      with real word examples and usages. More importantly, it need to follow{' '}
       <Link
-        target={"_blank"}
+        target={'_blank'}
         rel="noopener"
-        href={"https://material.io/design/components/navigation-drawer.html#"}
-        underline={"none"}
+        href={'https://material.io/design/components/navigation-drawer.html#'}
+        underline={'none'}
       >
         Material specs
-      </Link>{" "}
+      </Link>{' '}
       since we are 100% based on Material-UI with no other styling libraries.
@@ -92,7 +93,7 @@ Last but not least, responsive is a must.
     <br />
-    <Typography weight={"bold"} variant={"h5"} gutterBottom>
+    <Typography weight={'bold'} variant={'h5'} gutterBottom>
       Solution
     </Typography>
     <Typography>Separate layout into 5 components</Typography>
-    <Typography component={"div"}>
+    <Typography component={'div'}>
       <ul>
@@ -116,6 +117,6 @@ <li>Root</li>
       <b>Presets</b> is a set of predefined config that I can come up with after
-      researching a lot of the real world websites and also the{" "}
+      researching a lot of the real world websites and also the{' '}
       <Link
         href={
-          "https://material.io/design/components/navigation-drawer.html#usage"
+          'https://material.io/design/components/navigation-drawer.html#usage'
         }
@@ -122,0 +123,0 @@ >

stories/presets.stories.js

@@ -1,4 +0,3 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { storiesOf } from '@storybook/react';
-import Box from '@material-ui/core/Box';
 import ChevronLeft from '@material-ui/icons/ChevronLeft';
@@ -27,20 +26,5 @@ import ChevronRight from '@material-ui/icons/ChevronRight';
 
-const Component = () => {
-  const [hidden, setHidden] = useState(false);
-  const handleScroll = () => {
-    if (window.scrollY >= 64 && !hidden) {
-      setHidden(true);
-    }
-    if (window.scrollY < 64 && hidden) {
-      setHidden(false);
-    }
-  };
-  useEffect(() => {
-    window.addEventListener('scroll', handleScroll);
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  });
-  return (
-    <Root config={createMuiTreasuryLayout()}>
+storiesOf('Presets', module)
+  .add('Default', () => (
+    <Root>
       <Header
@@ -57,12 +41,3 @@ renderMenuIcon={open => (open ? <ChevronLeft /> : <MenuRounded />)}
         }
-        header={({ collapsed }) => (
-          <>
-            <Box
-              height={hidden ? 0 : 64}
-              flexShrink={0}
-              css={{ transition: '0.3s' }}
-            />
-            <NavHeaderEx collapsed={collapsed} />
-          </>
-        )}
+        header={({ collapsed }) => <NavHeaderEx collapsed={collapsed} />}
       >
@@ -78,8 +53,5 @@ <NavContentEx />
     </Root>
-  );
-};
-
-storiesOf('Presets', module)
-  .add('Default', () => (
-    <Root>
+  ))
+  .add('Standard', () => (
+    <Root config={createStandardLayout()}>
       <Header
@@ -108,4 +80,4 @@ renderMenuIcon={open => (open ? <ChevronLeft /> : <MenuRounded />)}
   ))
-  .add('Standard', () => (
-    <Root config={createStandardLayout()}>
+  .add('Fixed', () => (
+    <Root config={createFixedLayout()}>
       <Header
@@ -134,4 +106,4 @@ renderMenuIcon={open => (open ? <ChevronLeft /> : <MenuRounded />)}
   ))
-  .add('Fixed', () => (
-    <Root config={createFixedLayout()}>
+  .add('Content Based', () => (
+    <Root config={createContentBasedLayout()}>
       <Header
@@ -148,10 +120,3 @@ renderMenuIcon={open => (open ? <ChevronLeft /> : <MenuRounded />)}
         }
-        header={({ collapsed, screen }) => (
-          <>
-            {screen !== 'xs' && screen !== 'sm' && (
-              <Box height={64} flexShrink={0} />
-            )}
-            <NavHeaderEx collapsed={collapsed} />
-          </>
-        )}
+        header={({ collapsed }) => <NavHeaderEx collapsed={collapsed} />}
       >
@@ -168,4 +133,4 @@ <NavContentEx />
   ))
-  .add('Content Based', () => (
-    <Root config={createContentBasedLayout()}>
+  .add('Cozy', () => (
+    <Root config={createCozyLayout()}>
       <Header
@@ -194,4 +159,4 @@ renderMenuIcon={open => (open ? <ChevronLeft /> : <MenuRounded />)}
   ))
-  .add('Cozy', () => (
-    <Root config={createCozyLayout()}>
+  .add('Mui Treasury', () => (
+    <Root config={createMuiTreasuryLayout()}>
       <Header
@@ -219,3 +184,2 @@ renderMenuIcon={open => (open ? <ChevronLeft /> : <MenuRounded />)}
     </Root>
-  ))
-  .add('Mui Treasury', () => <Component />);
+  ));

No alert changes

Improved metrics

Total package byte prevSize

122809

increased by20.32%

Number of package files

46

increased by9.52%

Lines of code

2146

increased by38.18%

Worsened metrics

Dev dependency count

33

increased by13.79%

No dependency changes