[docs] Add notistack demo to the snackbar page (#13685)

* [docs] Add notistack Snackbar live deme in complementary projects

* Fix peer dependecy issue with @material-ui/core

* let's merge

* add a comment about what next-plugin-transpile-modules is doing

docs/src/pages/demos/snackbars/IntegrationNotistack.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '@material-ui/core/Button';
+import { SnackbarProvider, withSnackbar } from 'notistack';
+
+class App extends React.Component {
+  handleClick = () => {
+    this.props.enqueueSnackbar('I love snacks.');
+  };
+
+  handleClickVariant = variant => () => {
+    // variant could be success, error, warning or info
+    this.props.enqueueSnackbar('This is a warning message!', { variant });
+  };
+
+  render() {
+    return (
+      <React.Fragment>
+        <Button onClick={this.handleClick}>Show snackbar</Button>
+        <Button onClick={this.handleClickVariant('warning')}>Show warning snackbar</Button>
+      </React.Fragment>
+    );
+  }
+}
+
+App.propTypes = {
+  enqueueSnackbar: PropTypes.func.isRequired,
+};
+
+const MyApp = withSnackbar(App);
+
+function IntegrationNotistack() {
+  return (
+    <SnackbarProvider maxSnack={3}>
+      <MyApp />
+    </SnackbarProvider>
+  );
+}
+
+export default IntegrationNotistack;

docs/src/pages/demos/snackbars/snackbars.md

@@ -72,4 +72,11 @@ Use a different transition all together.
 
 For more advanced use cases you might be able to take advantage of:
 
-- [notistack](https://github.com/iamhosseindhv/notistack) Highly customisable notification snackbars that can be stacked on top of each other.
+### notistack
+
+![stars](https://img.shields.io/github/stars/iamhosseindhv/notistack.svg?style=social&label=Stars)
+![npm downloads](https://img.shields.io/npm/dm/notistack.svg)
+
+In the following example, we demonstrate how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack makes it easy to display snackbars (so you don't have to deal with open/close state of them). It also enables you to stack them on top of one another.
+
+{{"demo": "pages/demos/snackbars/IntegrationNotistack.js"}}

next.config.js

@@ -1,12 +1,18 @@
 const webpack = require('webpack');
 const pkg = require('./package.json');
+const withTM = require('@weco/next-plugin-transpile-modules');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const { findPages } = require('./docs/src/modules/utils/find');
 
 process.env.LIB_VERSION = pkg.version;
 
 module.exports = {
-  webpack: config => {
+  webpack: (config, options) => {
+    // Alias @material-ui/core peer dependency imports form the following modules to our sources.
+    config = withTM({
+      transpileModules: ['notistack'],
+    }).webpack(config, options);
+
     const plugins = config.plugins.concat([
       new webpack.DefinePlugin({
         'process.env': {

package.json

@@ -68,6 +68,7 @@
     "@babel/register": "7.0.0",
     "@types/enzyme": "^3.1.4",
     "@types/react": "^16.3.14",
+    "@weco/next-plugin-transpile-modules": "0.0.2",
     "accept-language": "^3.0.18",
     "argos-cli": "^0.0.9",
     "autoprefixer": "^9.0.0",
@@ -123,6 +124,7 @@
     "material-ui-popup-state": "^1.0.1",
     "mocha": "^5.0.0",
     "next": "^7.0.0",
+    "notistack": "^0.3.9",
     "nyc": "^13.0.0",
     "postcss": "^7.0.0",
     "prettier": "^1.8.2",

pages/demos/snackbars.js

@@ -63,6 +63,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/snackbars/CustomizedSnackbars'), 'utf8')
+`,
+        },
+        'pages/demos/snackbars/IntegrationNotistack.js': {
+          js: require('docs/src/pages/demos/snackbars/IntegrationNotistack').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/snackbars/IntegrationNotistack'), 'utf8')
 `,
         },
       }}

yarn.lock

@@ -1869,6 +1869,11 @@
     "@webassemblyjs/wast-parser" "1.7.8"
     "@xtuc/long" "4.2.1"
 
+"@weco/[email protected]":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@weco/next-plugin-transpile-modules/-/next-plugin-transpile-modules-0.0.2.tgz#f8f8af6adc6a3c565ed6212ae82a383f18efc40e"
+  integrity sha1-+PivatxqPFZe1iEq6Co4PxjvxA4=
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -5637,7 +5642,7 @@ eslint-plugin-jsx-a11y@^6.0.3:
     jsx-ast-utils "^2.0.1"
 
 "eslint-plugin-material-ui@file:packages/eslint-plugin-material-ui":
-  version "1.0.0-beta.35"
+  version "3.0.0"
 
 eslint-plugin-mocha@^5.0.0:
   version "5.2.0"
@@ -9318,6 +9323,11 @@ normalize-scroll-left@^0.1.2:
   resolved "https://registry.yarnpkg.com/normalize-scroll-left/-/normalize-scroll-left-0.1.2.tgz#6b79691ba79eb5fb107fa5edfbdc06b55caee2aa"
   integrity sha512-F9YMRls0zCF6BFIE2YnXDRpHPpfd91nOIaNdDgrx5YMoPLo8Wqj+6jNXHQsYBavJeXP4ww8HCt0xQAKc5qk2Fg==
 
+notistack@^0.3.9:
+  version "0.3.9"
+  resolved "https://registry.yarnpkg.com/notistack/-/notistack-0.3.9.tgz#622d89c0038b7cdebba2897b3018f89ada03551d"
+  integrity sha512-Xt55Jn2kq+1o34wS6y8ydj/84UpZrJhpWFfFqY5YqxZPdSiu5RgxhUcoTeq6XLQ8Mwg/TdhH+kRgn21Pxb6IlA==
+
 npm-bundled@^1.0.1:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.5.tgz#3c1732b7ba936b3a10325aef616467c0ccbcc979"