Skip to content

Commit

Permalink
Merge pull request #21401 from Roel-t/remount--shortcut
Browse files Browse the repository at this point in the history
UI: Add remount story shortcut
  • Loading branch information
ndelangen authored and shilman committed Apr 11, 2023
1 parent 4f98ec9 commit 6e7ce0d
Show file tree
Hide file tree
Showing 5 changed files with 19 additions and 5 deletions.
9 changes: 8 additions & 1 deletion code/lib/manager-api/src/modules/shortcuts.ts
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 = {};
Expand Down Expand Up @@ -177,6 +179,7 @@ export const init: ModuleFn = ({ store, fullAPI }) => {
const {
layout: { isFullscreen, showNav, showPanel },
ui: { enableShortcuts },
storyId,
} = store.getState();
if (!enableShortcuts) {
return;
Expand Down Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions code/ui/manager/src/components/layout/app.mockdata.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
12 changes: 8 additions & 4 deletions code/ui/manager/src/components/preview/tools/remount.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const menuMapper = ({ api, state }: Combo) => {
return {
storyId,
remount: () => api.emit(FORCE_REMOUNT, { storyId: state.storyId }),
api,
};
};

Expand All @@ -33,19 +34,22 @@ export const remountTool: Addon = {
match: ({ viewMode }) => viewMode === 'story',
render: () => (
<Consumer filter={menuMapper}>
{({ 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 (
<StyledAnimatedIconButton
key="remount"
title="Remount component"
onClick={animateAndReplay}
onClick={remountComponent}
onAnimationEnd={() => setIsAnimating(false)}
animating={isAnimating}
disabled={!storyId}
Expand Down
1 change: 1 addition & 0 deletions code/ui/manager/src/settings/shortcuts.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
1 change: 1 addition & 0 deletions code/ui/manager/src/settings/shortcuts.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 6e7ce0d

Please sign in to comment.