Rebase origin master of reacr toastify

.gitignore

@@ -9,4 +9,6 @@ yarn-error.log
 cjs/
 esm/
 dist/
-.cache
+.cache
+
+/example/.parcel-cache/

README.md

@@ -1,64 +1,124 @@
-# React-Toastify
+# [material-react-toastify](https://www.npmjs.com/package/material-react-toastify)
 
-[![Financial Contributors on Open Collective](https://opencollective.com/react-toastify/all/badge.svg?label=financial+contributors)](https://opencollective.com/react-toastify) ![React-toastify CI](https://github.com/fkhadra/react-toastify/workflows/React-toastify%20CI/badge.svg)
-![npm](https://img.shields.io/npm/dm/react-toastify.svg?label=%E2%8F%ACdownloads&style=for-the-badge)
-![npm](https://img.shields.io/npm/v/react-toastify.svg?style=for-the-badge)
+### You can try the [demo here](https://material-react-toastify.surge.sh).
+
+<h4>v1 is out 🎉 🎉</h5>
+
+This is a fork from [react-toastify](https://www.npmjs.com/package/react-toastify) v6.1.0, all its props and documentation will work with this module too.
+
+<!--![Financial Contributors on Open Collective](https://opencollective.com/react-toastify/all/badge.svg?label=financial+contributors)](https://opencollective.com/react-toastify)-->
+<!--![material-react-toastify CI](https://github.com/fkhadra/react-toastify/workflows/React-toastify%20CI/badge.svg)--->
+
+![npm](https://img.shields.io/npm/dm/material-react-toastify.svg?label=%E2%8F%ACdownloads&style=for-the-badge)
+![npm](https://img.shields.io/npm/v/material-react-toastify.svg?style=for-the-badge)
 ![NPM](https://img.shields.io/npm/l/react-toastify.svg?label=%F0%9F%93%9Clicense&style=for-the-badge)
-![Coveralls github](https://img.shields.io/coveralls/github/fkhadra/react-toastify.svg?label=%E2%9B%B1coverage&style=for-the-badge)
-![React toastify](https://user-images.githubusercontent.com/5574267/35336500-e58f35b6-0118-11e8-800b-2da6594fc700.gif "React toastify")
+![Coveralls github](https://img.shields.io/coveralls/github/fkhadra/react-toastify?label=%E2%9B%B1coverage&style=for-the-badge)
+[![downloads](https://img.shields.io/npm/dt/material-react-toastify.svg?style=for-the-badge)](https://www.npmjs.com/package/material-react-toastify)
 
+<!--![React toastify](https://user-images.githubusercontent.com/5574267/35336500-e58f35b6-0118-11e8-800b-2da6594fc700.gif "React toastify")--->
 
-🎉 React-Toastify allows you to add notifications to your app with ease. No more nonsense!
+<div style="text-align:center; margin-bottom:10px; max-height:100px">
+  <img 
+    src="https://user-images.githubusercontent.com/35040146/100596753-851b5e00-3322-11eb-9073-1a50e5adcb53.png"
+  />
+</div>
+
+🎉 material-react-toastify allows you to add notification snackbars to your app with ease. No need to maintain multiple states anymore!
+
+This component has been made in compliance with Material.io design spec-sheet. You can check it out [here](https://material.io/components/snackbars/)
 
 ## Installation
 
 ```
-$ npm install --save react-toastify
-$ yarn add react-toastify
+$ npm install --save material-react-toastify
+$ yarn add material-react-toastify
 ```
 
+## Features
+
+- Easy to set up for real, you can make it work in less than 10sec!
+- Super easy to customize
+- RTL support
+- Swipe to close 👌
+- Can choose swipe direction
+- Super easy to use an animation of your choice. Works well with animate.css for example
+- Can display a react component inside the toast!
+- Has `onOpen` and `onClose` hooks. Both can access the props passed to the react component rendered inside the toast
+- Can remove a toast programmatically
+- Define behavior per toast
+- Pause toast when the window loses focus 👁
+- Fancy progress bar to display the remaining time
+- Possibility to update a toast
+- You can control the progress bar a la `nprogress` 😲
+- You can limit the number of toast displayed at the same time
+- Dark mode 🌒
+- And much more !
+
 ## The gist
 
 ```jsx
-  import React from 'react';
-
-  import { ToastContainer, toast } from 'react-toastify';
-  import 'react-toastify/dist/ReactToastify.css';
-
-  function App(){
-    const notify = () => toast("Wow so easy !");
-
-    return (
-      <div>
-        <button onClick={notify}>Notify !</button>
-        <ToastContainer />
-      </div>
-    );
-  }
+import React from 'react';
+
+import { ToastContainer, toast } from 'material-react-toastify';
+import 'material-react-toastify/dist/ReactToastify.css';
+
+function App() {
+  const notify = () => toast('Wow so easy!');
+
+  return (
+    <div>
+      <button onClick={notify}>Notify!</button>
+      <ToastContainer />
+    </div>
+  );
+}
+```
+
+### Example:
+
+<div style="text-align:center; margin-bottom:10px; max-height:100px">
+  <img 
+    src="https://user-images.githubusercontent.com/35040146/100720655-54036200-33e4-11eb-9b08-357077675ff2.png"
+  />
+</div>
+
+```js
+toast("It's that easy"); // or toast.default()
+toast.success('to create');
+toast.error('different types');
+toast.dark('of notifications.');
+toast.warning('You just need to');
+toast.info('execute one of these functions');
 ```
 
 ## Demo
 
-[A demo is worth a thousand words](https://fkhadra.github.io/react-toastify/introduction)
+[A demo is worth a thousand words](https://material-react-toastify.surge.sh)
 
 ## Documentation
 
-Check the [documentation](https://fkhadra.github.io/react-toastify/introduction) to get you started !
+Here's the [documentation](https://material-react-toastify.netlify.app/introduction) to get you started !
+
+\*\*I edited the original documentation to change it according to material-react-toastify
+
+You can also check-out the original react-toastify documentation [here](https://fkhadra.github.io/react-toastify/introduction) for further reference.
 
 ## Contribute
 
 Show your ❤️ and support by giving a ⭐. Any suggestions are welcome! Take a look at the contributing guide.
 
-You can also find me on [reactiflux](https://www.reactiflux.com/). My pseudo is Fadi.
+You can also find me on [reactiflux](https://www.reactiflux.com/). My pseudo is shivanshBTW.
 
 ## Contributors
 
 ### Code Contributors
 
 This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
-<a href="https://github.com/fkhadra/react-toastify/graphs/contributors"><img src="https://opencollective.com/react-toastify/contributors.svg?width=890&button=false" /></a>
+<a href="https://github.com/shivanshBTW/material-react-toastify/graphs/contributors">
+    <img src="https://opencollective.com/react-toastify/contributors.svg?width=890&button=false" />
+</a>
 
-### Financial Contributors
+<!--### Financial Contributors
 
 Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/react-toastify/contribute)]
 
@@ -83,9 +143,10 @@ Support this project with your organization. Your logo will show up here with a
 
 ## Release Notes
 
-You can find the release note for the latest release [here](https://github.com/fkhadra/react-toastify/releases/latest)
+You can find the release note for the latest release [here](https://github.com/shivanshBTW/material-react-toastify/releases/latest)
 
-You can browse them all [here](https://github.com/fkhadra/react-toastify/releases)
+You can browse them all [here](https://github.com/shivanshBTW/material-react-toastify/releases)
+-->
 
 ## License
 

package.json

@@ -1,25 +1,44 @@
 {
-  "version": "6.1.0",
-  "license": "MIT",
+  "name": "material-react-toastify",
+  "version": "1.0.3",
+  "description": "React Material-UI Snackbars made easy",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
-  "description": "React notification made easy",
-  "keywords": [
-    "react",
-    "notification",
-    "toast",
-    "react-component",
-    "react-toastify",
-    "push",
-    "alert"
-  ],
-  "files": [
-    "dist",
-    "scss"
-  ],
-  "sideEffects": [
-    "*.css"
-  ],
+  "directories": {
+    "example": "example",
+    "test": "test"
+  },
+  "dependencies": {
+    "caniuse-lite": "^1.0.30001439",
+    "clsx": "^1.1.1",
+    "prop-types": "^15.7.2",
+    "react-transition-group": "^4.4.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/preset-env": "^7.8.4",
+    "@babel/preset-react": "^7.8.3",
+    "@testing-library/react": "^9.4.0",
+    "@types/jest": "^24.9.0",
+    "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.6",
+    "@types/react-transition-group": "^4.2.4",
+    "coveralls": "^3.0.9",
+    "cssnano": "^4.1.10",
+    "cssnano-cli": "^1.0.5",
+    "husky": "^4.2.0",
+    "parcel": "^2.0.0-beta.1",
+    "postcss": "^7.0.27",
+    "postcss-cli": "^7.1.0",
+    "react": "^16.13.1",
+    "react-app-polyfill": "^2.0.0",
+    "react-dom": "^16.13.1",
+    "sass": "^1.26.0",
+    "tsdx": "^0.12.3",
+    "tslib": "^1.10.0",
+    "typescript": "^3.7.5"
+  },
   "scripts": {
     "start": "cd example && npm run start",
     "build": "npm run prepare",
@@ -33,9 +52,36 @@
     "postsass-minimal": "cssnano dist/ReactToastify.minimal.css dist/ReactToastify.minimal.css --no-zindex --no-reduceIdents",
     "style": "npm run sass && npm run sass-minimal && cssnano dist/ReactToastify.css dist/ReactToastify.min.css --no-zindex --no-reduceIdents"
   },
-  "peerDependencies": {
-    "react": ">=16"
+  "keywords": [
+    "react",
+    "notification",
+    "toast",
+    "material ui snackbars",
+    "material ui toast",
+    "react-component",
+    "material-react-toastify",
+    "material-ui-snackbars",
+    "material-design-snackbars",
+    "material-design-notifications",
+    "material-io-snackbars",
+    "material-snackbars",
+    "snackbars",
+    "material-ui-toast",
+    "material-toast",
+    "react-toastify",
+    "push",
+    "alert"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shivanshBTW/material-react-toastify.git"
   },
+  "author": "Shivansh Tyagi <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/shivanshBTW/material-react-toastify/issues"
+  },
+  "homepage": "https://github.com/shivanshBTW/material-react-toastify#readme",
   "husky": {
     "hooks": {
       "pre-commit": "npm run lint"
@@ -57,43 +103,14 @@
       "/src/index.tsx"
     ]
   },
-  "name": "react-toastify",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/fkhadra/react-toastify.git"
-  },
-  "author": "Fadi Khadra  <[email protected]> (https://fkhadra.github.io)",
-  "bugs": {
-    "url": "https://github.com/fkhadra/react-toastify/issues"
-  },
-  "homepage": "https://github.com/fkhadra/react-toastify#readme",
-  "module": "dist/react-toastify.esm.js",
-  "devDependencies": {
-    "@babel/core": "^7.0.0-0",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/preset-env": "^7.8.4",
-    "@babel/preset-react": "^7.8.3",
-    "@testing-library/react": "^9.4.0",
-    "@types/jest": "^24.9.0",
-    "@types/react": "^16.9.34",
-    "@types/react-dom": "^16.9.6",
-    "@types/react-transition-group": "^4.2.4",
-    "coveralls": "^3.0.9",
-    "cssnano": "^4.1.10",
-    "cssnano-cli": "^1.0.5",
-    "husky": "^4.2.0",
-    "postcss": "^7.0.27",
-    "postcss-cli": "^7.1.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "sass": "^1.26.0",
-    "tsdx": "^0.12.3",
-    "tslib": "^1.10.0",
-    "typescript": "^3.7.5"
-  },
-  "dependencies": {
-    "clsx": "^1.1.1",
-    "prop-types": "^15.7.2",
-    "react-transition-group": "^4.4.1"
+  "files": [
+    "dist",
+    "scss"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "peerDependencies": {
+    "react": ">=16"
   }
 }

scss/_closeButton.scss

@@ -7,7 +7,7 @@
   cursor: pointer;
   opacity: 0.7;
   transition: 0.3s ease;
-  align-self: flex-start;
+  align-self: center;
 
   &--default {
     color: #000;

scss/_toast.scss

@@ -1,16 +1,19 @@
 .#{$rt-namespace}__toast {
-    position: relative;
     min-height: $rt-toast-min-height;
+    max-height: $rt-toast-max-height;
+    padding: $rt-toast-top-bottom-padding $rt-toast-left-right-padding;
+    border-radius: $rt-toast-border-radius;
+    font-family: $rt-font-family;
+    font-size: $rt-font-size;
+    line-height: $rt-line-height;
+
+    position: relative;
     box-sizing: border-box;
     margin-bottom: 1rem;
-    padding: 8px;
-    border-radius: 1px;
     box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .1), 0 2px 15px 0 rgba(0, 0, 0, .05);
     display: flex;
     justify-content: space-between;
-    max-height: $rt-toast-max-height;
     overflow: hidden;
-    font-family: $rt-font-family;
     cursor: pointer;
     direction: ltr;
     &--rtl {
@@ -26,15 +29,19 @@
     }
     &--info {
         background: $rt-color-info;
+        color: $rt-text-color-info;
     }
     &--success {
         background: $rt-color-success;
+        color: $rt-text-color-success;
     }
     &--warning {
         background: $rt-color-warning;
+        color: $rt-text-color-warning;
     }
     &--error {
         background: $rt-color-error;
+        color: $rt-text-color-error;
     }
     &-body {
         margin: auto 0;