feat(notifications): add notify and NotificationsProvider

.storybook/preview.tsx

@@ -11,6 +11,7 @@ const SORT_ORDER = {
     "Getting Started",
     "Design System",
     "Responsive Design",
+    "Notifications",
     "Contributing",
   ],
   Recipes: [],

docs/introduction/notifications.stories.mdx

@@ -0,0 +1,26 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Introduction/Notifications" />
+
+# Notifications
+
+Notifications are an integral part of any application. Patches uses
+[react-toastify](https://github.com/fkhadra/react-toastify) under the hood. We
+reexport some parts of react-toastify and apply our own styling.
+
+You need to wrap your application in a PatchesProvider, which you already should
+have. Then you can use the `notify` object and dispatch notifications like so:
+
+```
+import { notify } from "@openpatch/patches"
+
+notify.info("Info")
+notify.warn("Warn")
+notify.error("Error")
+notify.success("Success")
+```
+
+If you want to overwrite the default behaviour of the Notifications, you can
+pass an option object to the different functions. Take a look at the
+[react-toastify Repository](https://fkhadra.github.io/react-toastify/api/toast)
+for more information about that.

package.json

@@ -104,6 +104,7 @@
     "react-modal": "^3.12.1",
     "react-syntax-highlighter": "^15.4.4",
     "react-tabs": "^3.2.1",
+    "react-toastify": "^8.0.3",
     "remark-gfm": "^1.0.0",
     "styled-system": "^5.1.5"
   },

src/NotificationsProvider.stories.tsx

@@ -0,0 +1,37 @@
+import { Meta } from "@storybook/react/types-6-0";
+import { ButtonPrimary } from "./ButtonPrimary";
+import { NotificationsProvider, notify } from "./NotificationsProvider";
+
+export default {
+  title: "Components/NotificationsProvider",
+  component: NotificationsProvider,
+  argTypes: {},
+} as Meta;
+
+export const Info = () => {
+  const dispatch = () => {
+    notify.info("Info");
+  };
+  return <ButtonPrimary onClick={dispatch}>Dispatch</ButtonPrimary>;
+};
+
+export const Warn = () => {
+  const dispatch = () => {
+    notify.warn("Warn");
+  };
+  return <ButtonPrimary onClick={dispatch}>Dispatch</ButtonPrimary>;
+};
+
+export const Success = () => {
+  const dispatch = () => {
+    notify.success("Success");
+  };
+  return <ButtonPrimary onClick={dispatch}>Dispatch</ButtonPrimary>;
+};
+
+export const Error = () => {
+  const dispatch = () => {
+    notify.error("Error");
+  };
+  return <ButtonPrimary onClick={dispatch}>Dispatch</ButtonPrimary>;
+};