Viewport: Store viewport, rotation in globals

code/addons/essentials/package.json

@@ -103,6 +103,11 @@
       "require": "./dist/viewport/manager.js",
       "import": "./dist/viewport/manager.mjs"
     },
+    "./viewport/preview": {
+      "types": "./dist/viewport/preview.d.ts",
+      "require": "./dist/viewport/preview.js",
+      "import": "./dist/viewport/preview.mjs"
+    },
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -162,7 +167,8 @@
       "./src/outline/preview.ts",
       "./src/outline/manager.ts",
       "./src/toolbars/manager.ts",
-      "./src/viewport/manager.ts"
+      "./src/viewport/manager.ts",
+      "./src/viewport/preview.ts"
     ],
     "platform": "node"
   },

code/addons/essentials/src/viewport/preview.ts

@@ -0,0 +1,3 @@
+// TODO: We need to configure an eslint-import typescript resolver for export maps to be considered
+
+export * from '@storybook/addon-viewport/preview';

code/addons/viewport/preview.js

@@ -0,0 +1 @@
+export { globals } from './dist/preview';

code/addons/viewport/src/Tool.tsx

@@ -6,9 +6,9 @@ import { styled, Global, type Theme, withTheme } from '@storybook/theming';
 
 import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
-import { useStorybookApi, useParameter, useAddonState } from '@storybook/manager-api';
+import { useStorybookApi, useParameter, useGlobals } from '@storybook/manager-api';
 import { registerShortcuts } from './shortcuts';
-import { PARAM_KEY, ADDON_ID } from './constants';
+import { PARAM_KEY } from './constants';
 import { MINIMAL_VIEWPORTS } from './defaults';
 import type { ViewportAddonParameter, ViewportMap, ViewportStyles, Styles } from './models';
 
@@ -34,19 +34,21 @@ const responsiveViewport: ViewportItem = {
 
 const baseViewports: ViewportItem[] = [responsiveViewport];
 
-const toLinks = memoize(50)((list: ViewportItem[], active: LinkBase, set, state, close): Link[] => {
-  return list
-    .filter((i) => i.id !== responsiveViewport.id || active.id !== i.id)
-    .map((i) => {
-      return {
-        ...i,
-        onClick: () => {
-          set({ ...state, selected: i.id });
-          close();
-        },
-      };
-    });
-});
+const toLinks = memoize(50)(
+  (list: ViewportItem[], active: LinkBase, updateGlobals, close): Link[] => {
+    return list
+      .filter((i) => i.id !== responsiveViewport.id || active.id !== i.id)
+      .map((i) => {
+        return {
+          ...i,
+          onClick: () => {
+            updateGlobals({ viewport: i.id });
+            close();
+          },
+        };
+      });
+  }
+);
 
 const wrapperId = 'storybook-preview-wrapper';
 
@@ -96,11 +98,6 @@ const IconButtonLabel = styled.div(({ theme }) => ({
   marginLeft: 10,
 }));
 
-interface ViewportToolState {
-  isRotated: boolean;
-  selected: string | null;
-}
-
 const getStyles = (
   prevStyles: ViewportStyles | undefined,
   styles: Styles,
@@ -116,16 +113,14 @@ const getStyles = (
 
 export const ViewportTool: FC = memo(
   withTheme(({ theme }: { theme: Theme }) => {
+    const [globals, updateGlobals] = useGlobals();
+
     const {
       viewports = MINIMAL_VIEWPORTS,
       defaultOrientation = 'portrait',
-      defaultViewport = responsiveViewport.id,
+      defaultViewport = globals.viewport || responsiveViewport.id,
       disable,
     } = useParameter<ViewportAddonParameter>(PARAM_KEY, {});
-    const [state, setState] = useAddonState<ViewportToolState>(ADDON_ID, {
-      selected: defaultViewport,
-      isRotated: defaultOrientation === 'landscape',
-    });
 
     const list = toList(viewports);
     const api = useStorybookApi();
@@ -139,28 +134,29 @@ export const ViewportTool: FC = memo(
     }
 
     useEffect(() => {
-      registerShortcuts(api, setState, Object.keys(viewports));
-    }, [viewports]);
+      registerShortcuts(api, globals, updateGlobals, Object.keys(viewports));
+    }, [viewports, globals.viewport]);
 
     useEffect(() => {
-      setState({
-        selected:
+      updateGlobals({
+        viewport:
           defaultViewport ||
-          (state.selected && viewports[state.selected] ? state.selected : responsiveViewport.id),
-        isRotated: defaultOrientation === 'landscape',
+          (globals.viewport && viewports[globals.viewport]
+            ? globals.viewport
+            : responsiveViewport.id),
+        viewportRotated: defaultOrientation === 'landscape',
       });
     }, [defaultOrientation, defaultViewport]);
 
-    const { selected, isRotated } = state;
     const item =
-      list.find((i) => i.id === selected) ||
+      list.find((i) => i.id === globals.viewport) ||
       list.find((i) => i.id === defaultViewport) ||
       list.find((i) => i.default) ||
       responsiveViewport;
 
     const ref = useRef<ViewportStyles>();
 
-    const styles = getStyles(ref.current, item.styles, isRotated);
+    const styles = getStyles(ref.current, item.styles, globals.viewportRotated);
 
     useEffect(() => {
       ref.current = styles;
@@ -175,7 +171,7 @@ export const ViewportTool: FC = memo(
         <WithTooltip
           placement="top"
           tooltip={({ onHide }) => (
-            <TooltipLinkList links={toLinks(list, item, setState, state, onHide)} />
+            <TooltipLinkList links={toLinks(list, item, updateGlobals, onHide)} />
           )}
           closeOnOutsideClick
           onVisibleChange={setIsTooltipVisible}
@@ -185,13 +181,13 @@ export const ViewportTool: FC = memo(
             title="Change the size of the preview"
             active={isTooltipVisible || !!styles}
             onDoubleClick={() => {
-              setState({ ...state, selected: responsiveViewport.id });
+              updateGlobals({ viewport: responsiveViewport.id });
             }}
           >
             <Icons icon="grow" />
             {styles ? (
               <IconButtonLabel>
-                {isRotated ? `${item.title} (L)` : `${item.title} (P)`}
+                {globals.viewportRotated ? `${item.title} (L)` : `${item.title} (P)`}
               </IconButtonLabel>
             ) : null}
           </IconButtonWithLabel>
@@ -231,7 +227,7 @@ export const ViewportTool: FC = memo(
               key="viewport-rotate"
               title="Rotate viewport"
               onClick={() => {
-                setState({ ...state, isRotated: !isRotated });
+                updateGlobals({ viewportRotated: !globals.viewportRotated });
               }}
             >
               <Icons icon="transfer" />

code/addons/viewport/src/preview.ts

@@ -1 +1,2 @@
 export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT, MINIMAL_VIEWPORTS } from './defaults';
+export const globals = { viewport: 'reset', viewportRotated: false };

code/addons/viewport/src/shortcuts.ts

@@ -1,10 +1,6 @@
 import type { API } from '@storybook/manager-api';
 import { ADDON_ID } from './constants';
-
-type State = {
-  selected: string;
-  isRotated: boolean;
-};
+import { globals as defaultGlobals } from './preview';
 
 const getCurrentViewportIndex = (viewportsKeys: string[], current: string): number =>
   viewportsKeys.indexOf(current);
@@ -23,16 +19,19 @@ const getPreviousViewport = (viewportsKeys: string[], current: string): string =
     : viewportsKeys[currentViewportIndex - 1];
 };
 
-export const registerShortcuts = async (api: API, setState: any, viewportsKeys: string[]) => {
+export const registerShortcuts = async (
+  api: API,
+  globals: any,
+  updateGlobals: any,
+  viewportsKeys: string[]
+) => {
   await api.setAddonShortcut(ADDON_ID, {
     label: 'Previous viewport',
     defaultShortcut: ['shift', 'V'],
     actionName: 'previous',
     action: () => {
-      const { selected, isRotated } = api.getAddonState<State>(ADDON_ID);
-      setState({
-        selected: getPreviousViewport(viewportsKeys, selected),
-        isRotated,
+      updateGlobals({
+        viewport: getPreviousViewport(viewportsKeys, globals.viewport),
       });
     },
   });
@@ -42,10 +41,8 @@ export const registerShortcuts = async (api: API, setState: any, viewportsKeys:
     defaultShortcut: ['V'],
     actionName: 'next',
     action: () => {
-      const { selected, isRotated } = api.getAddonState<State>(ADDON_ID);
-      setState({
-        selected: getNextViewport(viewportsKeys, selected),
-        isRotated,
+      updateGlobals({
+        viewport: getNextViewport(viewportsKeys, globals.viewport),
       });
     },
   });
@@ -55,11 +52,7 @@ export const registerShortcuts = async (api: API, setState: any, viewportsKeys:
     defaultShortcut: ['alt', 'V'],
     actionName: 'reset',
     action: () => {
-      const { isRotated } = api.getAddonState<State>(ADDON_ID);
-      setState({
-        selected: 'reset',
-        isRotated,
-      });
+      updateGlobals(defaultGlobals);
     },
   });
 };