diff --git a/code/lib/manager-api/src/modules/shortcuts.ts b/code/lib/manager-api/src/modules/shortcuts.ts index 1e623123bde8..8c7af4f146ce 100644 --- a/code/lib/manager-api/src/modules/shortcuts.ts +++ b/code/lib/manager-api/src/modules/shortcuts.ts @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/naming-convention */ import { global } from '@storybook/global'; -import { PREVIEW_KEYDOWN } from '@storybook/core-events'; +import { FORCE_REMOUNT, PREVIEW_KEYDOWN } from '@storybook/core-events'; import type { ModuleFn } from '../index'; @@ -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 = {}; @@ -177,6 +179,7 @@ export const init: ModuleFn = ({ store, fullAPI }) => { const { layout: { isFullscreen, showNav, showPanel }, ui: { enableShortcuts }, + storyId, } = store.getState(); if (!enableShortcuts) { return; @@ -320,6 +323,10 @@ export const init: ModuleFn = ({ store, fullAPI }) => { fullAPI.expandAll(); break; } + case 'remount': { + fullAPI.emit(FORCE_REMOUNT, { storyId }); + break; + } default: addonsShortcuts[feature].action(); break; diff --git a/code/ui/manager/src/components/layout/app.mockdata.tsx b/code/ui/manager/src/components/layout/app.mockdata.tsx index 6f5b2657aeee..fc87fd64d17e 100644 --- a/code/ui/manager/src/components/layout/app.mockdata.tsx +++ b/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 = { diff --git a/code/ui/manager/src/components/preview/tools/remount.tsx b/code/ui/manager/src/components/preview/tools/remount.tsx index af57f73bd45f..b095c6f431c1 100644 --- a/code/ui/manager/src/components/preview/tools/remount.tsx +++ b/code/ui/manager/src/components/preview/tools/remount.tsx @@ -24,6 +24,7 @@ const menuMapper = ({ api, state }: Combo) => { return { storyId, remount: () => api.emit(FORCE_REMOUNT, { storyId: state.storyId }), + api, }; }; @@ -33,19 +34,22 @@ export const remountTool: Addon = { match: ({ viewMode }) => viewMode === 'story', render: () => ( - {({ remount, storyId }) => { + {({ remount, storyId, api }) => { const [isAnimating, setIsAnimating] = useState(false); - const animateAndReplay = () => { + const remountComponent = () => { if (!storyId) return; - setIsAnimating(true); remount(); }; + api.on(FORCE_REMOUNT, () => { + setIsAnimating(true); + }); + return ( setIsAnimating(false)} animating={isAnimating} disabled={!storyId} diff --git a/code/ui/manager/src/settings/shortcuts.stories.tsx b/code/ui/manager/src/settings/shortcuts.stories.tsx index cf8a2bce3088..e3260e43bf8e 100644 --- a/code/ui/manager/src/settings/shortcuts.stories.tsx +++ b/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( diff --git a/code/ui/manager/src/settings/shortcuts.tsx b/code/ui/manager/src/settings/shortcuts.tsx index 5504c8495092..57de523eb8b7 100644 --- a/code/ui/manager/src/settings/shortcuts.tsx +++ b/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;