docs: notifications addon PoC

packages/core/.storybook/main.ts

@@ -20,7 +20,8 @@ const getAddons = () => {
     },
     "storybook-addon-playground",
     "@chromatic-com/storybook",
-    "@storybook/addon-storysource"
+    "@storybook/addon-storysource",
+    "./notifications-addon"
   ];
 
   if (process.env.NODE_ENV !== "production") {

packages/core/.storybook/notifications-addon/NotificationLink.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const NotificationLink = ({ href, children }) => {
+  return (
+    <a href={href} style={{ color: "inherit" }}>
+      {children}
+    </a>
+  );
+};
+
+export default NotificationLink;

packages/core/.storybook/notifications-addon/NotificationText.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const NotificationText = ({ href, children }) => {
+  return <span style={{ color: "inherit" }}>{children}</span>;
+};
+
+export default NotificationText;

packages/core/.storybook/notifications-addon/consts.js

@@ -0,0 +1,2 @@
+export const ADDON_ID = "@vibe/storybook-addon-notifications";
+export const STORAGE_KEY = `${ADDON_ID}-dismissed`;

packages/core/.storybook/notifications-addon/index.js

@@ -0,0 +1,7 @@
+function managerEntries(entry = []) {
+  return [...entry, require.resolve("./manager.js")];
+}
+
+module.exports = {
+  managerEntries
+};

packages/core/.storybook/notifications-addon/manager.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { addons } from "@storybook/manager-api";
+import { ADDON_ID, STORAGE_KEY } from "./consts";
+import NotificationLink from "./NotificationLink";
+import NotificationText from "./NotificationText";
+
+addons.register(ADDON_ID, api => {
+  const notifications = [
+    {
+      id: "welcome-v3",
+      content: {
+        headline: "Welcome to Vibe 3!",
+        subHeadline: (
+          <NotificationText>
+            This is our new major. If you're looking for Vibe v2 docs, please{" "}
+            <NotificationLink href="/v2">click here</NotificationLink>
+          </NotificationText>
+        )
+      }
+    },
+    {
+      id: "new-modal",
+      content: {
+        headline: "Did you got to check our new Modal?",
+        subHeadline: "Click here to go to the documentation"
+      },
+      link: "/docs/feedback-modal-new"
+    }
+  ];
+
+  const dismissedNotifications = JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]");
+
+  notifications
+    .filter(({ id }) => !dismissedNotifications.includes(id))
+    .reverse()
+    .forEach(({ id, content, link }) => {
+      api.addNotification({
+        id,
+        content,
+        link,
+        onClear: options => {
+          if (!options.dismissed) return;
+          localStorage.setItem(STORAGE_KEY, JSON.stringify([...dismissedNotifications, id]));
+        }
+      });
+    });
+});