diff --git a/packages/core/.storybook/main.ts b/packages/core/.storybook/main.ts index 1821352210..9c23acc95e 100644 --- a/packages/core/.storybook/main.ts +++ b/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") { diff --git a/packages/core/.storybook/notifications-addon/NotificationLink.jsx b/packages/core/.storybook/notifications-addon/NotificationLink.jsx new file mode 100644 index 0000000000..d857893422 --- /dev/null +++ b/packages/core/.storybook/notifications-addon/NotificationLink.jsx @@ -0,0 +1,11 @@ +import React from "react"; + +const NotificationLink = ({ href, children }) => { + return ( + + {children} + + ); +}; + +export default NotificationLink; diff --git a/packages/core/.storybook/notifications-addon/NotificationText.jsx b/packages/core/.storybook/notifications-addon/NotificationText.jsx new file mode 100644 index 0000000000..6d9714e851 --- /dev/null +++ b/packages/core/.storybook/notifications-addon/NotificationText.jsx @@ -0,0 +1,7 @@ +import React from "react"; + +const NotificationText = ({ href, children }) => { + return {children}; +}; + +export default NotificationText; diff --git a/packages/core/.storybook/notifications-addon/consts.js b/packages/core/.storybook/notifications-addon/consts.js new file mode 100644 index 0000000000..b0b1724e8b --- /dev/null +++ b/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`; diff --git a/packages/core/.storybook/notifications-addon/index.js b/packages/core/.storybook/notifications-addon/index.js new file mode 100644 index 0000000000..1faf7628c5 --- /dev/null +++ b/packages/core/.storybook/notifications-addon/index.js @@ -0,0 +1,7 @@ +function managerEntries(entry = []) { + return [...entry, require.resolve("./manager.js")]; +} + +module.exports = { + managerEntries +}; diff --git a/packages/core/.storybook/notifications-addon/manager.jsx b/packages/core/.storybook/notifications-addon/manager.jsx new file mode 100644 index 0000000000..bf9841cbcc --- /dev/null +++ b/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: ( + + This is our new major. If you're looking for Vibe v2 docs, please{" "} + click here + + ) + } + }, + { + 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])); + } + }); + }); +});