Viewport: Store viewport rotated in globals

storybookjs · Jul 14, 2023 · afebe5b · afebe5b
1 parent 182c799
commit afebe5b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 38 deletions.
diff --git a/code/addons/viewport/src/Tool.tsx b/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, useGlobals } 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';
 
@@ -98,10 +98,6 @@ const IconButtonLabel = styled.div(({ theme }) => ({
   marginLeft: 10,
 }));
 
-interface ViewportToolState {
-  isRotated: boolean;
-}
-
 const getStyles = (
   prevStyles: ViewportStyles | undefined,
   styles: Styles,
@@ -118,15 +114,13 @@ const getStyles = (
 export const ViewportTool: FC = memo(
   withTheme(({ theme }: { theme: Theme }) => {
     const [globals, updateGlobals] = useGlobals();
+
     const {
       viewports = MINIMAL_VIEWPORTS,
       defaultOrientation = 'portrait',
       defaultViewport = globals.viewport || responsiveViewport.id,
       disable,
     } = useParameter<ViewportAddonParameter>(PARAM_KEY, {});
-    const [state, setState] = useAddonState<ViewportToolState>(ADDON_ID, {
-      isRotated: defaultOrientation === 'landscape',
-    });
 
     const list = toList(viewports);
     const api = useStorybookApi();
@@ -140,8 +134,8 @@ export const ViewportTool: FC = memo(
     }
 
     useEffect(() => {
-      registerShortcuts(api, setState, Object.keys(viewports));
-    }, [viewports]);
+      registerShortcuts(api, globals, updateGlobals, Object.keys(viewports));
+    }, [viewports, globals.viewport]);
 
     useEffect(() => {
       updateGlobals({
@@ -150,13 +144,10 @@ export const ViewportTool: FC = memo(
           (globals.viewport && viewports[globals.viewport]
             ? globals.viewport
             : responsiveViewport.id),
-      });
-      setState({
-        isRotated: defaultOrientation === 'landscape',
+        viewportRotated: defaultOrientation === 'landscape',
       });
     }, [defaultOrientation, defaultViewport]);
 
-    const { isRotated } = state;
     const item =
       list.find((i) => i.id === globals.viewport) ||
       list.find((i) => i.id === defaultViewport) ||
@@ -165,7 +156,7 @@ export const ViewportTool: FC = memo(
 
     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;
@@ -196,7 +187,7 @@ export const ViewportTool: FC = memo(
             <Icons icon="grow" />
             {styles ? (
               <IconButtonLabel>
-                {isRotated ? `${item.title} (L)` : `${item.title} (P)`}
+                {globals.viewportRotated ? `${item.title} (L)` : `${item.title} (P)`}
               </IconButtonLabel>
             ) : null}
           </IconButtonWithLabel>
@@ -236,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" />

diff --git a/code/addons/viewport/src/preview.ts b/code/addons/viewport/src/preview.ts
@@ -1,2 +1,2 @@
 export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT, MINIMAL_VIEWPORTS } from './defaults';
-export const globals = { viewport: 'reset' };
+export const globals = { viewport: 'reset', viewportRotated: false };
diff --git a/code/addons/viewport/src/shortcuts.ts b/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);
     },
   });
 };