feat: backgrounds with globals

examples/expo-example/.rnstorybook/preview.tsx

@@ -1,4 +1,4 @@
 import { View, Appearance } from 'react-native';
 import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
 import type { Preview } from '@storybook/react-native';
 
@@ -29,15 +29,29 @@
     hideFullScreenButton: false,
     noSafeArea: false,
     my_param: 'anything',
+    // backgrounds: {
+    //   default: Appearance.getColorScheme() === 'dark' ? 'dark' : 'plain',
+    //   values: [
+    //     { name: 'plain', value: 'white' },
+    //     { name: 'dark', value: '#333' },
+    //     { name: 'app', value: '#eeeeee' },
+    //   ],
+    // },
     backgrounds: {
-      default: Appearance.getColorScheme() === 'dark' ? 'dark' : 'plain',
-      values: [
-        { name: 'plain', value: 'white' },
-        { name: 'dark', value: '#333' },
-        { name: 'app', value: '#eeeeee' },
-      ],
+      options: {
+        // 👇 Default options
+        dark: { name: 'Dark', value: '#333' },
+        light: { name: 'Light', value: '#F7F9F2' },
+        // 👇 Add your own
+        maroon: { name: 'Maroon', value: '#400' },
+      },
     },
   },
+
+  initialGlobals: {
+    // 👇 Set the initial background color
+    backgrounds: { value: 'light' },
+  },
 };
 
 export default preview;

packages/ondevice-backgrounds/src/BackgroundPanel.tsx

@@ -1,9 +1,9 @@
-import type { AddonStore, API } from 'storybook/internal/manager-api';
 import { StyleSheet, Text, View } from 'react-native';
+import type { AddonStore, API } from 'storybook/internal/manager-api';
 
+import { useGlobals } from 'storybook/internal/preview-api';
 import Swatch from './Swatch';
-import BackgroundEvents, { PARAM_KEY } from './constants';
-import { Background } from './index';
+import { PARAM_KEY } from './constants';
 
 const codeSample = `
 import React from 'react';
@@ -24,13 +24,14 @@ const BackgroundMeta: ComponentMeta<typeof Background> = {
   component: Background,
   decorators: [withBackgrounds],
   parameters: {
-    backgrounds: {
-      default: 'plain',
-      values: [
-        { name: 'plain', value: 'white' },
-        { name: 'warm', value: 'hotpink' },
-        { name: 'cool', value: 'deepskyblue' },
-      ],
+     backgrounds: {
+      options: {
+        // 👇 Default options
+        dark: { name: 'Dark', value: '#333' },
+        light: { name: 'Light', value: '#F7F9F2' },
+        // 👇 Add your own
+        maroon: { name: 'Maroon', value: '#400' },
+      },
     },
   },
 };
@@ -60,27 +61,38 @@ const Instructions = () => (
 
 export type Channel = ReturnType<AddonStore['getChannel']>;
 interface BackgroundPanelProps {
-  channel: Channel;
   api: API;
   active: boolean;
 }
 
-const BackgroundPanel = ({ active, api, channel }: BackgroundPanelProps) => {
-  if (!active) {
-    return null;
-  }
+interface BackgroundOptions {
+  [key: string]: {
+    name: string;
+    value: string;
+  };
+}
 
+const BackgroundPanel = ({ active, api }: BackgroundPanelProps) => {
+  const [, updateGlobals] = useGlobals();
   const store = api.store();
   const storyId = store.getSelection().storyId;
   const story = store.fromId(storyId);
-  const backgrounds: { default?: string; values: Background[] } = story.parameters[PARAM_KEY];
+
+  if (!active) {
+    return null;
+  }
+
+  const backgrounds: BackgroundOptions = story.parameters[PARAM_KEY]?.options;
   const setBackgroundFromSwatch = (background: string) => {
-    channel.emit(BackgroundEvents.UPDATE_BACKGROUND, background);
+    updateGlobals({
+      [PARAM_KEY]: { value: background },
+    });
   };
+
   return (
     <View style={{ padding: 10 }}>
       {backgrounds ? (
-        backgrounds.values.map(({ value, name }) => (
+        Object.entries(backgrounds).map(([name, { value }]) => (
           <View key={`${name} ${value}`}>
             <Swatch value={value} name={name} setBackground={setBackgroundFromSwatch} />
           </View>

packages/ondevice-backgrounds/src/constants.ts

@@ -2,8 +2,8 @@ export const PARAM_KEY = 'backgrounds';
 export const ADDON_ID = 'storybook-addon-background';
 export const PANEL_ID = `${ADDON_ID}/background-panel`;
 
-export default {
-  SET: `${ADDON_ID}:set`,
-  UNSET: `${ADDON_ID}:unset`,
-  UPDATE_BACKGROUND: `${ADDON_ID}:update`,
-};
+// export default {
+//   SET: `${ADDON_ID}:set`,
+//   UNSET: `${ADDON_ID}:unset`,
+//   UPDATE_BACKGROUND: `${ADDON_ID}:update`,
+// };

packages/ondevice-backgrounds/src/container.tsx

@@ -1,23 +1,16 @@
-import React, { ReactNode, useState, useEffect } from 'react';
+import { ReactNode } from 'react';
 import { StyleSheet, View } from 'react-native';
-import Constants from './constants';
-import { Channel } from './BackgroundPanel';
+import { PARAM_KEY } from './constants';
+
+import { useGlobals } from 'storybook/internal/preview-api';
 
 interface ContainerProps {
-  initialBackground: string;
-  channel: Channel;
   children: ReactNode;
 }
 
-const Container = ({ initialBackground, channel, children }: ContainerProps) => {
-  const [background, setBackground] = useState(initialBackground || '');
-
-  useEffect(() => {
-    channel.on(Constants.UPDATE_BACKGROUND, setBackground);
-    return () => {
-      channel.removeListener(Constants.UPDATE_BACKGROUND, setBackground);
-    };
-  }, [channel]);
+const Container = ({ children }: ContainerProps) => {
+  const [globals] = useGlobals();
+  const background = globals[PARAM_KEY]?.value;
 
   return (
     <View

packages/ondevice-backgrounds/src/index.tsx

@@ -1,44 +1,8 @@
-import * as React from 'react';
-import { makeDecorator } from 'storybook/internal/preview-api';
-import { addons } from 'storybook/internal/manager-api';
-
-import Events from './constants';
 import Container from './container';
+import { DecoratorFunction } from 'storybook/internal/csf';
 
-export interface Background {
-  name: string;
-  value: string;
-}
-
-export const withBackgrounds = makeDecorator({
-  name: 'withBackgrounds',
-  parameterName: 'backgrounds',
-  skipIfNoParametersOrOptions: true,
-
-  wrapper: (getStory, context, { options, parameters }) => {
-    const data = (parameters || options || { values: [] }) as {
-      default?: string;
-      values: Background[];
-    };
-    const backgrounds: Background[] = data.values;
-
-    let background = 'transparent';
-    if (backgrounds.length !== 0) {
-      addons.getChannel().emit(Events.SET, backgrounds);
-      const defaultValue = data.default
-        ? backgrounds.find((b) => b.name === data.default)
-        : undefined;
-      const defaultOrFirst = defaultValue ? defaultValue : backgrounds[0];
-
-      if (defaultOrFirst) {
-        background = defaultOrFirst.value;
-      }
-    }
-
-    return (
-      <Container initialBackground={background} channel={addons.getChannel()}>
-        {getStory(context) as React.ReactNode}
-      </Container>
-    );
-  },
-});
+export const withBackgrounds: DecoratorFunction = (Story) => (
+  <Container>
+    <Story />
+  </Container>
+);

packages/ondevice-backgrounds/src/register.tsx

@@ -3,11 +3,10 @@ import BackgroundPanel from './BackgroundPanel';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 
 addons.register(ADDON_ID, (api) => {
-  const channel = addons.getChannel();
   addons.add(PANEL_ID, {
     type: types.PANEL,
     title: 'Backgrounds',
-    render: ({ active }) => <BackgroundPanel channel={channel} api={api} active={active} />,
+    render: ({ active }) => <BackgroundPanel api={api} active={active} />,
     paramKey: PARAM_KEY,
   });
 });