Register experimental DS addon

.storybook/manager.ts

@@ -1,6 +1,17 @@
-import { addons } from "@storybook/manager-api";
+import { addons, types } from "@storybook/manager-api";
 import { sbTheme } from "./theme";
-
+import { ExperimentalDsToggle } from "../stories/addons/ExperimentalDsToggle";
 addons.setConfig({
   theme: sbTheme
 });
+
+// Register the addon
+addons.register("EXPERIMENTAL_DS_ADDON", () => {
+  // Register the tool
+  addons.add("EXPERIMENTAL_DS_ADDON_ID", {
+    type: types.TOOL,
+    title: "Experimental DS Addon",
+    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    render: ExperimentalDsToggle
+  });
+});

.storybook/preview.tsx

@@ -1,14 +1,15 @@
 import React from "react";
 import type { Preview } from "@storybook/react";
 import { IOThemeLight, IOThemeDark } from "../src/core";
+import { withEperimentalDs } from "../stories/utils";
+import { EXPERIMENTAL_DS_PARAM_KEY } from "../stories/addons/ExperimentalDsToggle";
 
 const preview: Preview = {
+  decorators: [withEperimentalDs],
+  globals: {
+    [EXPERIMENTAL_DS_PARAM_KEY]: false
+  },
   parameters: {
-    options: {
-      storySort: {
-        order: ["Getting Started", ["Atoms", "Components"], "Changelog"]
-      }
-    },
     backgrounds: {
       default: "light",
       values: [

stories/addons/ExperimentalDsToggle.tsx

@@ -0,0 +1,40 @@
+import React, { memo, useCallback, useEffect } from "react";
+
+import { useGlobals, useStorybookApi } from "@storybook/manager-api";
+import { Icons, IconButton } from "@storybook/components";
+
+export const EXPERIMENTAL_DS_PARAM_KEY = "experimentalDs";
+
+export const ExperimentalDsToggle = memo(function ExperimentalDS() {
+  const [globals, updateGlobals] = useGlobals();
+  const api = useStorybookApi();
+
+  const isActive = [true, "true"].includes(globals[EXPERIMENTAL_DS_PARAM_KEY]);
+
+  const toggleMyTool = useCallback(() => {
+    updateGlobals({
+      [EXPERIMENTAL_DS_PARAM_KEY]: !isActive
+    });
+  }, [isActive, updateGlobals]);
+
+  useEffect(() => {
+    void api.setAddonShortcut("EXPERIMENTAL_DS_ADDON", {
+      label: "Toggle Addon [8]",
+      defaultShortcut: ["8"],
+      actionName: "ExperimentalDS",
+      showInMenu: false,
+      action: toggleMyTool
+    });
+  }, [toggleMyTool, api]);
+
+  return (
+    <IconButton
+      key={"EXPERIMENTAL_DS_ADDO_ID"}
+      active={isActive}
+      title="Apply the experimental DS"
+      onClick={toggleMyTool}
+    >
+      <Icons icon="lightning" />
+    </IconButton>
+  );
+});

stories/utils.tsx

@@ -1,12 +1,20 @@
 import React from "react";
 import { Decorator } from "@storybook/react";
+import { useGlobals } from "@storybook/preview-api";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { View } from "react-native";
-import { IOColors, IOThemeContext, IOThemes, hexToRgba } from "../src/core";
+import {
+  IOColors,
+  IODSExperimentalContextProvider,
+  IOThemeContext,
+  IOThemes,
+  hexToRgba
+} from "../src/core";
+import { EXPERIMENTAL_DS_PARAM_KEY } from "./addons/ExperimentalDsToggle";
 
 export const withTheme: Decorator = (StoryFn, context) => {
   const themeContext =
-    context.globals.backgrounds && context.globals.backgrounds.value === "dark"
+    context.globals.backgrounds && context.globals.backgrounds.value === "black"
       ? IOThemes.dark
       : IOThemes.light;
 
@@ -18,6 +26,19 @@ export const withTheme: Decorator = (StoryFn, context) => {
   );
 };
 
+export const withEperimentalDs: Decorator = StoryFn => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [globals] = useGlobals();
+
+  return (
+    <IODSExperimentalContextProvider
+      isExperimentaEnabled={globals[EXPERIMENTAL_DS_PARAM_KEY]}
+    >
+      <StoryFn />
+    </IODSExperimentalContextProvider>
+  );
+};
+
 export const withMaxWitdth: Decorator = StoryFn => (
   <div
     style={{