Release v3 (#546)

* Add goober * Use goober for SnackbarContainer * Use goober from SnackbarContent * Convert Snackbar component to Typescript * Add material design content * Process props and pass to custom snackbar * No spreading * Reuse enqueueSnackbar type * Add WIP migration guide * Add tslib to devDep * Remove duplicate eslintrc * Render SnackbarContainer children * Default content should forwardRef * Fix bug with collapse classes * Don't drop support for `content` prop just yet * Remove duplicate className * Use useSnackbar in the basic example * Update Migration md * Add links to the right section * No memo for SnackbarContent * Bump version to v2 * 2.0.1-alpha.0 * Update typedoc.json * No imports from outside in index.d.ts * 2.0.1-alpha.1 * Update typedoc.json * Ensure CustomSnackbarProps type is accurate * Use Generics for Variant * 2.0.1-alpha.2 * Minor * Add more strict types * 2.0.1-alpha.3 * Get message from options only * Move minWidth to snackbar for easier customisation * Add MIGRATION to npmignore * Make intellisense happy * Apply Collapse customisation in SnackbarContainer * Fix various issues with Container component * Add default background color * Add ComponentClasses * Update typedoc.json * 2.0.1-alpha.4 * [alpha] Add .bind(this) to method stored in provider state (#397) * Fix easy linting issues * Import types from types.ts file * Fix bind.this * Fix collapse selectors * Update package-lock * 2.0.1-alpha.5 * Fix ts-ignore * v3.0.0-alpha.1 * Use clickaway component * Add useForkRef * Rename class keys * Use internal svg icon * Use internal transition components * Fixes #396 #389 - Do not use css selectors for Collapse component * Add useCallbackNormaliser * Update SnackbarProvider types * Use internal Collapse component * Add transition utils * Rename close reason * Update types * Remove MUI dependency * Move transitions into their directory * Improve transition import paths * Add react-transition-group types * Update import paths for ui components * Add index export * Move useForkRef * Move SnackbarContainer * Update path to SnackbarProvider * Update possible transition components * Default to MaterialDesignContent in SnackbarItem * Move util functions to the relevant file * Move warning messages to the relevant file * Remove CloseReason constant * Improve merge helper function * Move merger into its own file * Rename file and update import paths * Update docs * Add np as publisher * Update published main path * Copy files to dist folder * Add np * No github drafter * Add npm scripts * Add custom component example * Update indentation from 4 to 2 spaces * Add readme * Add readme with codesandbox button * Remove react-transition-group dep * Add internal transition component * Fix bug with warning logger * SnackbarItem don't add snackbarid as arg to transition callbacks * Minor * Simplify transition logic by removing useCallbackNormaliser * Update migration guide * Add `id` to transition props * Update typedoc * 3.0.0-alpha.2 * Minor change * Update link codesandbox example * Export transitions * Remove fontFamily stylings * Update variant types * Regenerate doc defs * Move types in one file * Regenerate docs * Ignore prettier config * enforce node engine * Support react 18 * Remove yolo * Update np version * Update docs * Copy package.json before packing * Rename lifecycle script * Add postversion script * Fix typo * v3.0.0-alpha.3 * Minor * Update links to notistack website * Minor * Add second custom example * Add report complete example * Update report complete example * Update alpha engine versions (#497) Co-authored-by: Antti Ahti <[email protected]> * Update jsdocs * v3.0.0-alpha.4 * Fixes #495 - FIx all snackbars closing at the same time (#498) * v3.0.0-alpha.5 * Use a more simple Collapse * Remove getAutoHeightDuration as a file * Update eslint config * Run eslint fix * Remove ClickAway listener * Minor * Convert transition component to TS * Move TransitionStatus type * Remove transitions * Export Transition component * Update types to export Transition component * Address ts errors * Move cp commands to package.json * Update scripts * Add test script * Update np config * v3.0.0-alpha.6 * Update banner image to be served from docs website * Add support for displaying Snackbars outside of the component (#499) * Add support for displaying snackbars outside of the component * Update README instructions * Update MIGRATION.md * Remove withSnackbar HOC (#500) * Convert JS files to TS * v3.0.0-alpha.7 * Closes #501 - Remove clickaway from docs * Fixes #513 - Ensure MUI transitions continue to work (#518) * Update transition types * Ensure MUI transitions continue to work * Update typedocs * v3.0.0-alpha.8 * Add render function SnackbarProvider * v3.0.0-alpha.9 * Update typedocs * v3.0.0-alpha.10 * Closes #521 - Update SnackbarContent to accept ref type * v3.0.0-alpha.11 * Allow overriding styles of Material Snackbar (#545) * Pass className down to snackbar content * Add MuiContent-variant classname * Export MaterialDesignContent component * Update typedocs * Minor * v3.0.0-alpha.12 * v3.0.0-alpha.13 * Update CHANGELOG.md * Update README.md --------- Co-authored-by: Anthony Raymond <[email protected]> Co-authored-by: Antti Ahti <[email protected]> Co-authored-by: Antti Ahti <[email protected]>
iamhosseindhv · Mar 6, 2023 · 3421bad · 3421bad
1 parent 3277155
commit 3421bad
Show file tree

Hide file tree

Showing 80 changed files with 40,323 additions and 57,719 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,92 +1,39 @@
 {
-    "parser": "babel-eslint",
-    "extends": "airbnb",
     "env": {
         "browser": true,
-        "node": true
+        "es2020": true
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:prettier/recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "globals": {
+        "process": true
+    },
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 2022,
+        "sourceType": "module",
+        "project": "./tsconfig.json"
     },
     "rules": {
-        "indent": [
-            "error",
-            4,
-            {
-                "SwitchCase": 1
-            }
-        ],
-        "react/jsx-indent": [
-            "error",
-            4
-        ],
-        "react/jsx-indent-props": [
-            "error",
-            4
-        ],
-        "max-len": 0,
-        "object-curly-newline": 0,
-        "import/extensions": 0,
-        "react/prop-types": 0,
-        "react/destructuring-assignment": 0,
-        "react/jsx-closing-bracket-location": 0,
-        "react/sort-comp": 0,
-        "react/require-default-props": 0,
-        "react/jsx-filename-extension": [
-            1,
+        "prettier/prettier": "error",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-unused-vars": [
+            "warn",
             {
-                "extensions": [
-                    ".js",
-                    ".jsx",
-                    ".ts",
-                    ".tsx"
-                ]
-            }
-        ],
-        "jsx-a11y/anchor-is-valid": [
-            "error",
-            {
-                "aspects": [
-                    "invalidHref",
-                    "preferButton"
-                ]
+                "ignoreRestSiblings": true
             }
         ]
-    },
-    "overrides": [
-        {
-            "files": [
-                "*.ts",
-                "*.tsx"
-            ],
-            "extends": [
-                "plugin:@typescript-eslint/recommended"
-            ],
-            "parser": "@typescript-eslint/parser",
-            "parserOptions": {
-                "sourceType": "module",
-                "project": "./tsconfig.json"
-            },
-            "rules": {
-                "@typescript-eslint/ban-ts-ignore": "off",
-                "@typescript-eslint/no-explicit-any": "off",
-                "@typescript-eslint/explicit-function-return-type": "off",
-                "@typescript-eslint/no-unused-vars": [
-                    "warn",
-                    {
-                        "args": "after-used",
-                        "ignoreRestSiblings": true
-                    }
-                ]
-            }
-        }
-    ],
-    "settings": {
-        "import/resolver": {
-            "node": {
-                "extensions": [
-                    ".js",
-                    ".ts",
-                    ".tsx"
-                ]
-            }
-        }
     }
-}
+}
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.npmignore b/.npmignore
@@ -2,10 +2,12 @@ src
 examples
 .github
 .babelrc
-.eslintrc.js
+.eslintrc
 .eslintignore
 .gitignore
+.prettierrc
+.npmrc
 tsdx.config.js
-webpack.config.js
 typedoc.json
 tsconfig.json
+MIGRATION.md
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,8 @@
+{
+    "printWidth": 120,
+    "tabWidth": 4,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "semi": true,
+    "arrowParens": "always"
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,21 @@
 Thanks to all contributers who improved notistack by opening an issue/PR.
 
+### `[email protected]`
+###### March 6, 2023
+### New features
+* Notistack can now be used standalone and without requiring [@mui/core](https://mui.com) to be installed as a `peerDependency`.
+* Support for passing custom snackbar component. See [custom components](https://notistack.com/features/customization#custom-component) for more info.
+* Support for overriding styles using `styled`. See [overriding styles](https://notistack.com/features/customization#override-styles) for more info.
+* Allow displaying or closing Snackbars from outside a React component. See [getting started](https://notistack.com/getting-started) guide for more info.
+* Various typescript fix and imporvements
+* Exports `Transition` component to help with creating your own enter/close transitions. See [Transitions](https://notistack.com/features/transition) for more info.
+* Upgraded documentation website with docs and examples for both notistack `v2.x` and `v3.x`
+
+### Breaking changes
+* See [Migration guide](https://notistack.com/migration) for a full list of breaking changes with instruction on how to upgrade to v3.
+
+<br />
+
 ### `[email protected]`
 ###### Oct 15, 2022
 * **@jordansexton** Fix TypeScript bad import path [#485](https://github.com/iamhosseindhv/notistack/issues/485) 

diff --git a/MIGRATION.md b/MIGRATION.md
@@ -0,0 +1,100 @@
+
+
+# Migration from v0/v1 to v2
+
+# Motivation
+Notistack `v2` primarily focuses on flexibility, scalibity and customisation. There has been numerous issues and pull requests
+on the repository asking support for customising snackbars more easily.
+
+So far, customisation was only possible by overriding the existing styles, but this is not always enough. There is only so 
+much you can do by overriding styles. Since we can't cover everyone's requirements natively on notistack, in `v2`, we give 
+you the tools to build your own snackbars. This is achieved through [`Components`](#8-new-components-prop) prop.
+
+
+### Breaking changes
+
+* `content` prop is still supported but marked as deprecated and it will be removed in future releases. If you find yourself using this prop quite often, consider defining your own custom variant/content using [Components](#8-new-components-prop) props. 
+
+* Drop `ariaAttributes` from props. If you need to pass aria-attributes, use a [custom component](#8-new-components-prop).
+
+* HTML attributes applied to Snackbar root component should be passed inside `SnackbarProps` prop.
+```diff
+<SnackbarProvider
+-    data-test="test"
++    SnackbarProps={{
++        'data-test': 'test',
++    }}
+>
+</SnackbarProvider>
+
+enqueueSnackbar('message', {
+-    'data-test': 'test',
++    SnackbarProps: {
++       'data-test': 'test',
++    },
+})
+```
+
+* Drop support for `resumeHideDuration`, `onEntering` and `onExisting` transition callbacks due to the fact that they are rarely used. Get in touch if this decision affects you to potentially bring them back to life.
+
+* `onClose` won't be called with `reason: 'clickaway'` anymore. Get in touch if you need to detect clickaway's to potentially bring them back to life.
+
+* Drop Customisation through `classes.variant(Success|Error|Info|Warning)`. To customise snackbars according to their
+variant, use a [custom component](#8-new-components-prop). [`This example`](https://github.com/iamhosseindhv/notistack/tree/alpha/examples/custom-snackbar-example) demonstrates how this is done.
+
+* Any customisation through Material-UI theme is not applied to the elements. This would also mean toggling theme `mode` to **Dark**/**Light** would not affect the appearance of snackbars. You can easily use a [custom component](#8-new-components-prop) to have full control over your snackbars. [`This example`](https://github.com/iamhosseindhv/notistack/tree/alpha/examples/custom-snackbar-example) demonstrates how your snackbars can react to change of theme mode.
+
+* Drop support for `withSnackbar` Higher-order component (HOC). Consequently, exported type `WithSnackbarProps` was kept in type declerations for backwards compatibility and after over a year, it has been now deleted and you should use `ProviderContext` type instead. You have two options to migrate your code:
+  * Option 1: Migrate your code to be functional component and use `useSnackar`.
+  * Option 2: Remove `withSnackbar` and import the function(s) you need directly from `notistack`:
+```diff
+- import { withSnackbar } from 'notistack' 
++ import { enqueueSnackbar, closeSnackbar } from 'notistack' 
+
+class MyButton extends React.Component {
+    render() {
+-       const { enqueueSnackbar } = this.props
+    }
+}
+
+- export default withSnackbar(MyButton)
++ export default MyButton
+```
+
+
+####  New `Components` prop
+You can now define your own `variant`s and show entirely customsied snackbars. Your custom component accepts all props passed to `enqueueSnackbar` or `SnackbarProvider`, so you have full control over it. On top of that, you'll be able pass additional options in options parameter of `enqueueSnackbar. Example usage:
+
+```tsx
+<SnackbarProvider
+    Components={{
+        success: MyCustomSuccessNotification,
+        reportComplete: ReportComplete,
+    }}
+>
+</SnackbarProvider>
+
+interface ReportCompleteProps extends CustomContentProps {
+    allowDownload: boolean;
+}
+
+const ReportComplete = React.forwardRef((props: ReportCompleteProps, ref) => {
+    const {
+        // You have access to notistack props, options 👇🏼
+        variant,
+        message
+        // as well as your own custom props 👇🏼
+        allowDownload,
+    } = props;
+
+    // 
+})
+
+enqueueSnackbar('Your report is ready to download', {
+   variant: 'reportComplete',
+   persist: true,
+   allowDownload: true, // <-- pass any additional options
+})
+
+```
+