[WIP] V11

.github/ISSUE_TEMPLATE.md

@@ -1,8 +1,8 @@
-**Do you want to request a *feature* or report a *bug*?**
+**Do you want to request a _feature_ or report a _bug_?**
 
 **What is the current behavior?**
 
-**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:**
+**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your [Stackblitz](https://stackblitz.com/edit/react-toastify-getting-started) example below:**
 
 **What is the expected behavior?**
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,13 +1,15 @@
 **Before submitting a pull request,** please make sure the following is done:
 
-1. Fork [the repository](https://github.com/fkhadra/react-toastify) and create your branch from `master`.
-2. Run `yarn` in the repository root.
+1. Fork [the repository](https://github.com/fkhadra/react-toastify) and create your branch from `main`.
+2. Run `pnpm i` in the repository root.
 3. If you've fixed a bug or added code that should be tested, add tests!
-4. Ensure the test suite passes (`yarn test`).
-5. Run `yarn start` to test your changes in the playground.
+4. Ensure the test suite passes (`pnpm test`).
+5. Run `pnpm start` to test your changes in the playground.
 6. Update the readme is needed
 7. Update the typescript definition is needed
-8. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier-all`).
-9. Make sure your code lints (`yarn lint:fix`).
+8. Format your code with [prettier](https://github.com/prettier/prettier) (`pnpm prettier`).
+9. Make sure your code lints (`pnpm lint:fix`).
 
-**Learn more about contributing [here](https://github.com/fkhadra/react-toastify/blob/master/CONTRIBUTING.md)** 
+For new features, please make sure that there is an issue related to it.
+
+**Learn more about contributing [here](https://github.com/fkhadra/react-toastify/blob/master/CONTRIBUTING.md)**

.github/workflows/build.yaml

@@ -7,19 +7,25 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4.2.2
       - name: Install node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4.1.0
         with:
-            node-version: '18.x'
+            node-version: '22.x'
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+            version: 9 
       - name: Install dependencies
-        run: yarn 
-      - name: Lint
-        run: yarn lint
+        run: pnpm i 
+      # - name: Lint
+      #   run: yarn lint
       - name: Setup
-        run: yarn setup
+        run: pnpm run setup
+      - name: Build
+        run: pnpm build
       - name: Test
-        run: yarn run test:run 
+        run: pnpm run test:run 
       - uses: actions/upload-artifact@v3
         if: failure()
         with:
@@ -31,6 +37,6 @@ jobs:
           name: cypress-videos
           path: cypress/videos
       - name: Coveralls GitHub Action
-        uses: coverallsapp/github-action@v1.1.2
+        uses: coverallsapp/github-action@v2.3.4
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -13,4 +13,5 @@ dist/
 /addons
 .nyc_output
 cypress/videos/*
-cypress/screenshots/*
+cypress/screenshots/*
+.husky

CONTRIBUTING.md

@@ -13,14 +13,14 @@ Please note we have a code of conduct, please follow it in all your interactions
 - Ensure that nothing get broke. You can use the playground for that
 - If applicable, update the [documentation](https://github.com/fkhadra/react-toastify-doc)
 - Use prettier before committing 😭
-- When solving a bug, please provide the steps to reproduce it(codesandbox is our best friend for that)
+- When solving a bug, please provide the steps to reproduce it(codesandbox or stackblitz are our best friends for that)
 - Tchill 👌
 
 ## Setup
 
 ### Pre-requisites
 
-- *Node:* `^16.0.0`
+- *Node:* `^18.0.0`
 - *Yarn*
 
 ### Install
@@ -37,43 +37,31 @@ git checkout -b my-branch
 Install dependencies:
 
 ```sh
-yarn install 
+pnpm install 
 // then
-yarn setup
+pnpm setup 
 ```
 
 ## Developing
 
-How it works ? The library don't use a state management library like redux or mobx to dispatch the notifications. Instead it uses a dead simple pubsub.
-
-
 ```sh
 # launch the playground
-yarn start
+pnpm start
 
 # Run tests 💩
-yarn test
+pnpm test
 
 # Prettify all the things
-yarn prettier
+pnpm prettier
 ```
 
-### Project structure
-
-#### Scss
-
-All the style rules lives in the `scss` directory. The filename are self-explanatory about their content. 
-
-#### Example dir
+### Playground dir
 
 The playground let you test your changes, it's like the demo of react-toastify. Most of the time you don't need to modify it unless you add new features.
 
-#### Src
+### Src
 
 - [toast:](https://github.com/fkhadra/react-toastify/blob/main/src/core/toast.ts) Contain the exposed api (`toast.success...`).
 
-- [eventManager:](https://github.com/fkhadra/react-toastify/blob/main/src/core/eventManager.ts) 
-This is the glue between `toast` and `ToastContainer`. In fact, it is just a dead simple pubsub.
-
 ## License
 By contributing, you agree that your contributions will be licensed under its [MIT License](https://github.com/fkhadra/react-toastify/blob/main/LICENSE).

README.md

@@ -11,8 +11,9 @@
 
 ![stacked](https://github.com/fkhadra/react-toastify/assets/5574267/975c7c01-b95e-43cf-9100-256fa8ef2760)
 
+![custom-style](https://github.com/user-attachments/assets/311672f7-f98a-46f3-a2ab-a9d1a05186a7)
 
-🎉 React-Toastify allows you to add notifications to your app with ease. No more nonsense!
+🎉 React-Toastify allows you to add notifications to your app with ease.
 
 ## Installation
 
@@ -21,6 +22,27 @@ $ npm install --save react-toastify
 $ yarn add react-toastify
 ```
 
+```jsx
+  import React from 'react';
+
+  import { ToastContainer, toast } from 'react-toastify';
+
+  function App(){
+    const notify = () => toast("Wow so easy!");
+
+    return (
+      <div>
+        <button onClick={notify}>Notify!</button>
+        <ToastContainer />
+      </div>
+    );
+  }
+```
+
+## Documentation
+
+Check the [documentation](https://fkhadra.github.io/react-toastify/introduction) to get you started!
+
 ## Features
 
 - Easy to set up for real, you can make it work in less than 10sec!
@@ -43,33 +65,10 @@ $ yarn add react-toastify
 - Stacked notifications!
 - 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>
-    );
-  }
-```
-
 ## Demo
 
 [A demo is worth a thousand words](https://fkhadra.github.io/react-toastify/introduction)
 
-## Documentation
-
-Check the [documentation](https://fkhadra.github.io/react-toastify/introduction) to get you started!
 
 ## Contribute
 

cypress/support/component.ts

@@ -17,8 +17,8 @@
 // cypress/support/e2e.js
 import '@cypress/code-coverage/support';
 import './commands';
-import '../../scss/main.scss';
 import './style.css';
+import '../../src/style.css';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

lefthook.yml

@@ -0,0 +1,6 @@
+ pre-commit:
+   parallel: true
+   commands:
+     lint-staged:
+       glob: "*.{js,ts,jsx,tsx,css}"
+       run: pnpm lint-staged