UI: Add remount story shortcut

code/lib/manager-api/src/index.tsx

@@ -56,6 +56,7 @@ import * as settings from './modules/settings';
 import * as releaseNotes from './modules/release-notes';
 // eslint-disable-next-line import/no-cycle
 import * as stories from './modules/stories';
+import * as toolbar from './modules/toolbar';
 
 import * as refs from './modules/refs';
 import * as layout from './modules/layout';
@@ -92,6 +93,7 @@ export type State = layout.SubState &
   url.SubState &
   shortcuts.SubState &
   releaseNotes.SubState &
+  toolbar.SubState &
   settings.SubState &
   globals.SubState &
   RouterData &
@@ -109,6 +111,7 @@ export type API = addons.SubAPI &
   notifications.SubAPI &
   shortcuts.SubAPI &
   releaseNotes.SubAPI &
+  toolbar.SubAPI &
   settings.SubAPI &
   version.SubAPI &
   url.SubAPI &
@@ -216,6 +219,7 @@ class ManagerProvider extends Component<ManagerProviderProps, State> {
       releaseNotes,
       shortcuts,
       stories,
+      toolbar,
       refs,
       globals,
       url,

code/lib/manager-api/src/modules/shortcuts.ts

@@ -57,6 +57,7 @@ export interface API_Shortcuts {
   escape: API_KeyCollection;
   collapseAll: API_KeyCollection;
   expandAll: API_KeyCollection;
+  remount: API_KeyCollection;
 }
 
 export type API_Action = keyof API_Shortcuts;
@@ -91,6 +92,7 @@ export const defaultShortcuts: API_Shortcuts = Object.freeze({
   escape: ['escape'], // This one is not customizable
   collapseAll: [controlOrMetaKey(), 'shift', 'ArrowUp'],
   expandAll: [controlOrMetaKey(), 'shift', 'ArrowDown'],
+  remount: ['alt', 'R'],
 });
 
 const addonsShortcuts: API_AddonShortcuts = {};
@@ -320,6 +322,10 @@ export const init: ModuleFn = ({ store, fullAPI }) => {
           fullAPI.expandAll();
           break;
         }
+        case 'remount': {
+          fullAPI.remount();
+          break;
+        }
         default:
           addonsShortcuts[feature].action();
           break;

code/lib/manager-api/src/modules/toolbar.ts

@@ -0,0 +1,30 @@
+import { FORCE_REMOUNT } from '@storybook/core-events';
+import type { ModuleFn } from '../index';
+
+export interface SubState {
+  remount: { isAnimating: boolean };
+}
+
+export interface SubAPI {
+  remount: () => void;
+  remountEnd: () => void;
+}
+
+export const init: ModuleFn = ({ store, fullAPI }) => {
+  const api: SubAPI = {
+    remount: () => {
+      const { storyId, remount } = store.getState();
+      if (!storyId) return;
+      store.setState({ remount: { ...remount, isAnimating: true } });
+      fullAPI.emit(FORCE_REMOUNT, { storyId });
+    },
+    remountEnd: () => {
+      const { remount } = store.getState();
+      store.setState({ remount: { ...remount, isAnimating: false } });
+    },
+  };
+
+  const state: SubState = { remount: { isAnimating: false } };
+
+  return { api, state };
+};

code/lib/manager-api/src/tests/toolbar.test.js

@@ -0,0 +1,60 @@
+import { FORCE_REMOUNT } from '@storybook/core-events';
+import { init as initToolbar } from '../modules/toolbar';
+
+describe('toolbar API', () => {
+  function getValidMockedStore() {
+    const store = {
+      getState: () => ({
+        remount: { isAnimating: true },
+        storyId: 'primary-btn-test',
+      }),
+      setState: jest.fn(),
+    };
+    return store;
+  }
+
+  function getInvalidMockedStore() {
+    const store = {
+      getState: () => ({
+        remount: { isAnimating: false },
+        storyId: null,
+      }),
+      setState: jest.fn(),
+    };
+    return store;
+  }
+
+  it('does not remount component if storyId is null', () => {
+    const store = getInvalidMockedStore();
+
+    const { api } = initToolbar({ store });
+
+    api.remount();
+    expect(store.setState).not.toHaveBeenCalledWith();
+  });
+
+  it('remounts component and starts animation', () => {
+    const store = getValidMockedStore();
+    const { storyId } = store.getState();
+    const mockFullApi = { emit: jest.fn() };
+
+    const { api } = initToolbar({ store, fullAPI: mockFullApi });
+
+    api.remount();
+    expect(mockFullApi.emit).toHaveBeenCalledWith(FORCE_REMOUNT, { storyId });
+    expect(store.setState).toHaveBeenCalledWith({
+      remount: { isAnimating: true },
+    });
+  });
+
+  it('ends remount animation', () => {
+    const store = getValidMockedStore();
+
+    const { api } = initToolbar({ store });
+
+    api.remountEnd();
+    expect(store.setState).toHaveBeenCalledWith({
+      remount: { isAnimating: false },
+    });
+  });
+});

code/ui/manager/src/components/layout/app.mockdata.tsx

@@ -34,6 +34,7 @@ export const shortcuts: State['shortcuts'] = {
   escape: ['escape'],
   collapseAll: ['ctrl', 'shift', 'ArrowUp'],
   expandAll: ['ctrl', 'shift', 'ArrowDown'],
+  remount: ['alt', 'R'],
 };
 
 export const panels: Addon_Collection = {

code/ui/manager/src/components/preview/tools/remount.tsx

@@ -1,10 +1,9 @@
 import type { ComponentProps } from 'react';
-import React, { useState } from 'react';
+import React from 'react';
 import { IconButton, Icons } from '@storybook/components';
 import { Consumer } from '@storybook/manager-api';
 import type { Addon, Combo } from '@storybook/manager-api';
 import { styled } from '@storybook/theming';
-import { FORCE_REMOUNT } from '@storybook/core-events';
 
 interface AnimatedButtonProps {
   animating?: boolean;
@@ -20,10 +19,13 @@ const StyledAnimatedIconButton = styled(IconButton)<
 }));
 
 const menuMapper = ({ api, state }: Combo) => {
-  const { storyId } = state;
+  const { storyId, remount } = state;
+  const { isAnimating } = remount;
   return {
     storyId,
-    remount: () => api.emit(FORCE_REMOUNT, { storyId: state.storyId }),
+    remount: () => api.remount(),
+    remountEnd: () => api.remountEnd(),
+    isAnimating,
   };
 };
 
@@ -33,20 +35,13 @@ export const remountTool: Addon = {
   match: ({ viewMode }) => viewMode === 'story',
   render: () => (
     <Consumer filter={menuMapper}>
-      {({ remount, storyId }) => {
-        const [isAnimating, setIsAnimating] = useState(false);
-        const animateAndReplay = () => {
-          if (!storyId) return;
-          setIsAnimating(true);
-          remount();
-        };
-
+      {({ remount, storyId, remountEnd, isAnimating }) => {
         return (
           <StyledAnimatedIconButton
             key="remount"
             title="Remount component"
-            onClick={animateAndReplay}
-            onAnimationEnd={() => setIsAnimating(false)}
+            onClick={remount}
+            onAnimationEnd={remountEnd}
             animating={isAnimating}
             disabled={!storyId}
           >

code/ui/manager/src/settings/shortcuts.stories.tsx

@@ -23,6 +23,7 @@ const defaultShortcuts = {
   escape: ['escape'], // This one is not customizable
   collapseAll: ['ctrl', 'shift', 'ArrowUp'],
   expandAll: ['ctrl', 'shift', 'ArrowDown'],
+  remount: ['alt', 'R'],
 };
 
 const actions = makeActions(

code/ui/manager/src/settings/shortcuts.tsx

@@ -124,6 +124,7 @@ const shortcutLabels = {
   aboutPage: 'Go to about page',
   collapseAll: 'Collapse all items on sidebar',
   expandAll: 'Expand all items on sidebar',
+  remount: 'Remount component',
 };
 
 export type Feature = keyof typeof shortcutLabels;