From 7812b4aa717fa4ddcbf72f6e70c6ffa038837262 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Mon, 10 Apr 2023 20:25:36 +0100 Subject: [PATCH 1/5] Merge pull request #21997 from storybookjs/kylegach/dx-641-update-babelmodev7-docs Update Babel configuration docs for v7 --- docs/configure/babel.md | 103 +++++------------- .../storybook-main-babel-mode-v7.js.mdx | 11 -- .../storybook-main-custom-babel-config.js.mdx | 12 -- 3 files changed, 28 insertions(+), 98 deletions(-) delete mode 100644 docs/snippets/common/storybook-main-babel-mode-v7.js.mdx delete mode 100644 docs/snippets/common/storybook-main-custom-babel-config.js.mdx diff --git a/docs/configure/babel.md b/docs/configure/babel.md index f27a81b32f78..78f077000c03 100644 --- a/docs/configure/babel.md +++ b/docs/configure/babel.md @@ -2,81 +2,27 @@ title: 'Babel' --- -Storybook’s webpack config by [default](#default-configuration) sets up [Babel](https://babeljs.io/) for ES6 transpiling. +As of version 7.0, Storybook now re-uses your project’s Babel configuration to apply the same Babel plugins and presets in your Storybook stories as you do in your app. This makes it simpler, less buggy, easier to troubleshoot, and more consistent with other tools in the JS ecosystem. -It has three different modes: - -- [**CRA**](#cra-mode) - the mode for Create React App apps specifically -- [**V6**](#v6-mode) - the default mode for version 6.x and below -- [**V7**](#v7-mode) - a new mode slated to become the default in SB7.x - -## CRA mode - -[CRA](https://create-react-app.dev/) apps configured with `@storybook/preset-create-react-app` use CRA's babel handling to behave as close as possible to your actual application. None of the other documentation on this page applies. - -## V6 mode - -Storybook works with evergreen browsers by default. - -If you want to run Storybook in IE11, make sure to [disable](../essentials/introduction.md#disabling-addons) the docs-addon that is part of `@storybook/addon-essentials`, as this currently [causes issues in IE11](https://github.com/storybookjs/storybook/issues/8884). - -Here are some key features of Storybook's Babel configurations. - -### Default configuration - -We have added ES2016 support with Babel for transpiling your JS code. - -In addition to that, we've added a few additional features, like [object spreading](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) and [`async` `await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). - -Check out our [source](https://github.com/storybookjs/storybook/blob/main/lib/core-common/src/utils/babel.ts) to learn more about these plugins. - -### Custom config file - -If your project has a `.babelrc` file, we'll use that instead of the default config file. - -You can also place a `.storybook/.babelrc` file to use a unique configuration for Storybook only. - -### Custom configuration - -If you need, you can customize the default Babel configuration used by Storybook. Update your [`.storybook/main.js`](./overview.md#configure-your-storybook-project) and add the `babel` field with the options you want to use: - - - - - - - -## V7 Mode - -V7 mode is a new option available in Storybook 6.4+ behind a feature flag. - -Its goal is to make the Babel configuration simpler, less buggy, easier to troubleshoot, and more consistent with the rest of the JS ecosystem. +
-In V7 mode, you are responsible for configuring Babel using your `.babelrc` file, and Storybook does not provide any default. Storybook's frameworks and addons may provide minor programmatic modifications to the babel configuration. +If you're not using Storybook 7, please reference the previous documentation for guidance on configuring your Babel setup. -### How it works +
-To activate V7 mode, set the feature flag in your `.storybook/main.js` config: +## CRA (Create React App) - +[CRA](https://create-react-app.dev/) apps using `@storybook/react-webpack5` with the `@storybook/preset-create-react-app` package use CRA's Babel handling to behave as close as possible to your actual application. None of the other documentation on this page applies. - +## Configuring - +In Storybook 7, you are responsible for configuring Babel using your `.babelrc` file, and Storybook does not provide any default. Storybook's frameworks and addons may provide minor programmatic modifications to the Babel configuration. -### Migrating from V6 +## Migrating from V6 -For detailed instructions on migrating from `V6` mode, please see [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#babel-mode-v7). +For detailed instructions on migrating from `V6` mode, please see [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#babel-mode-v7-exclusively). -### Generate a babelrc +## Generate a babelrc If your app does not include a babelrc file, and you need one, you can create it by running the following command in your project directory: @@ -86,6 +32,9 @@ npx storybook@latest babelrc Once the command completes, you should have a `.babelrc.json` file created in the root directory of your project, similar to the following example: +
+Example Babel configuration + ```json { "sourceType": "unambiguous", @@ -150,30 +99,34 @@ Once the command completes, you should have a `.babelrc.json` file created in th } ``` +
+ Depending on your environment, you may need to install additional package dependencies. -### Babelrc vs. babel config +### Babelrc vs. Babel config -Babel has two different configuration modes: babelrc and babel config. As explained in more detail [in the docs](https://babeljs.io/docs/en/config-files): +Babel has two different configuration modes: babelrc and Babel config. As explained in more detail [in Babel's docs](https://babeljs.io/docs/en/config-files): -- **babelrc** configures babel for files in the same folder (or descendant folders) of the location of the babelrc -- **babel config** configures babel globally +- **babelrc** configures Babel for files in the same folder (or descendant folders) of the location of the babelrc +- **Babel config** configures Babel globally -Babel recommends to use babelrc, and it's what Storybook generates when you run `npx storybook babelrc` to migrate from v6 mode. If your stories are located in the current project directory (e.g., `stories: ['../src/**/*.stories.js']`) this approach will work well. -However, when your Storybook refers to files outside of the current project directory (e.g., `stories: ['../../some-other-directory/**/*.stories.js']`), the babelrc will not apply to those files. However, a babel config will, and is the recommended approach in that situation. +Babel recommends to use babelrc, and it's what Storybook generates when you run `npx storybook babelrc`. If your stories are located in the current project directory (e.g., `stories: ['../src/**/*.stories.js']`) this approach will work well. +However, when your Storybook refers to files outside of the current project directory (e.g., `stories: ['../../some-other-directory/**/*.stories.js']`), the babelrc will not apply to those files. However, a Babel config will, and is the recommended approach in that situation. -### Troubleshooting +## Troubleshooting -To troubleshoot your babel configuration, set the `BABEL_SHOW_CONFIG_FOR` environment variable. For example, to see how Storybook is transpiling your `.storybook/preview.js` file, add the following environment variable: +To troubleshoot your Babel configuration, set the `BABEL_SHOW_CONFIG_FOR` environment variable. For example, to see how Storybook is transpiling your `.storybook/preview.js` file, add the following environment variable: ```sh BABEL_SHOW_CONFIG_FOR=.storybook/preview.js yarn storybook ``` -When the command finishes running, it will display the available babel configuration for the `.storybook/preview.js` file. You can use this information to debug issues with transpilation. +When the command finishes running, it will display the available Babel configuration for the `.storybook/preview.js` file. You can use this information to debug issues with transpilation.
-💡 Due to what appears to be a Babel bug, setting this flag causes Babel transpilation to fail on the file provided. Thus you cannot actually run Storybook using this command. However, it will print out the configuration information as advertised, and therefore you can use this to debug your Storybook. You'll need to remove the flag to actually run your Storybook. + +💡 Due to what appears to be a Babel bug, setting this flag causes Babel transpilation to fail on the file provided. Thus you cannot actually **run** Storybook using this command. However, it will print out the configuration information as advertised, and therefore you can use this to debug your Storybook. You'll need to remove the flag to actually run your Storybook. +
For more info, please refer to the [Babel documentation](https://babeljs.io/docs/en/configuration#print-effective-configs). diff --git a/docs/snippets/common/storybook-main-babel-mode-v7.js.mdx b/docs/snippets/common/storybook-main-babel-mode-v7.js.mdx deleted file mode 100644 index 95c4026d8aaf..000000000000 --- a/docs/snippets/common/storybook-main-babel-mode-v7.js.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```js -// .storybook/main.js - -export default { - stories: [], - addons: [], - features: { - babelModeV7: true, - }, -}; -``` diff --git a/docs/snippets/common/storybook-main-custom-babel-config.js.mdx b/docs/snippets/common/storybook-main-custom-babel-config.js.mdx deleted file mode 100644 index 6fe0cf90d9bd..000000000000 --- a/docs/snippets/common/storybook-main-custom-babel-config.js.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```js -// .storybook/main.js - -export default { - stories: [], - addons: [], - babel: async (options) => ({ - ...options, - // any extra options you want to set - }), -}; -``` From 919c54887b88c86c793fe301d0d83deae17d3043 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 11 Apr 2023 12:26:33 +0200 Subject: [PATCH 2/5] Merge pull request #21963 from storybookjs/jpzwarte/fix-viewport-remove-transitions Viewport: Remove transitions when switching viewports --- code/addons/viewport/src/Tool.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/viewport/src/Tool.tsx b/code/addons/viewport/src/Tool.tsx index 615878d2cc28..608a98576bcc 100644 --- a/code/addons/viewport/src/Tool.tsx +++ b/code/addons/viewport/src/Tool.tsx @@ -211,7 +211,7 @@ export const ViewportTool: FC = memo( styles={{ [`iframe[data-is-storybook="true"]`]: { margin: `auto`, - transition: 'width .3s, height .3s', + transition: 'none', position: 'relative', border: `1px solid black`, boxShadow: '0 0 100px 100vw rgba(0,0,0,0.5)', From bb6a4c67c48d0d89ea0ca9942a9a273994b481bc Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 11 Apr 2023 21:45:16 +0800 Subject: [PATCH 3/5] Merge pull request #22024 from storybookjs/kasper/react-docgen-fix React: Fix default export docgen for React.FC and forwardRef --- code/presets/create-react-app/package.json | 3 +-- code/presets/react-webpack/package.json | 2 +- code/yarn.lock | 15 +++++++-------- 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 2c6eb99fa3ea..73addd709988 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -49,7 +49,7 @@ }, "dependencies": { "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1", - "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.630821.0", + "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0", "@storybook/types": "7.0.2", "@types/babel__core": "^7.1.7", "babel-plugin-react-docgen": "^4.1.0", @@ -59,7 +59,6 @@ "devDependencies": { "@storybook/node-logger": "7.0.2", "@types/node": "^16.0.0", - "@types/semver": "^7.3.6", "typescript": "~4.9.3" }, "peerDependencies": { diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 51ef5303a1c8..a25f6afcd96e 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -70,7 +70,7 @@ "@storybook/docs-tools": "7.0.2", "@storybook/node-logger": "7.0.2", "@storybook/react": "7.0.2", - "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.630821.0", + "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0", "@types/node": "^16.0.0", "@types/semver": "^7.3.4", "babel-plugin-add-react-displayname": "^0.0.5", diff --git a/code/yarn.lock b/code/yarn.lock index b121189fe1a6..7fcbb5af7da2 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6663,11 +6663,10 @@ __metadata: dependencies: "@pmmmwh/react-refresh-webpack-plugin": ^0.5.1 "@storybook/node-logger": 7.0.2 - "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.630821.0 + "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.0c3f3b7.0 "@storybook/types": 7.0.2 "@types/babel__core": ^7.1.7 "@types/node": ^16.0.0 - "@types/semver": ^7.3.6 babel-plugin-react-docgen: ^4.1.0 pnp-webpack-plugin: ^1.7.0 semver: ^7.3.5 @@ -6719,7 +6718,7 @@ __metadata: "@storybook/docs-tools": 7.0.2 "@storybook/node-logger": 7.0.2 "@storybook/react": 7.0.2 - "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.630821.0 + "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.0c3f3b7.0 "@types/node": ^16.0.0 "@types/semver": ^7.3.4 babel-plugin-add-react-displayname: ^0.0.5 @@ -6894,9 +6893,9 @@ __metadata: languageName: unknown linkType: soft -"@storybook/react-docgen-typescript-plugin@npm:1.0.6--canary.9.630821.0": - version: 1.0.6--canary.9.630821.0 - resolution: "@storybook/react-docgen-typescript-plugin@npm:1.0.6--canary.9.630821.0" +"@storybook/react-docgen-typescript-plugin@npm:1.0.6--canary.9.0c3f3b7.0": + version: 1.0.6--canary.9.0c3f3b7.0 + resolution: "@storybook/react-docgen-typescript-plugin@npm:1.0.6--canary.9.0c3f3b7.0" dependencies: debug: ^4.1.1 endent: ^2.0.1 @@ -6908,7 +6907,7 @@ __metadata: peerDependencies: typescript: ">= 4.x" webpack: ">= 4" - checksum: e444a6f2ef67a631ebd35f78a1637c2adbb964d5063a4a088ccf3027c65ca2430826906c70e4972049ef1603aa01ce9c38393704fc2d6de293a627cc40ddc3b2 + checksum: 505a728f36df3f519f4985bdf18f2078ea18a1a8f7f837fc831f971363fb7643a182f01a6857a9729ac5a1246d370526fca5a19017f82e7493af4ca945cb7235 languageName: node linkType: hard @@ -8689,7 +8688,7 @@ __metadata: languageName: node linkType: hard -"@types/semver@npm:^7.3.12, @types/semver@npm:^7.3.4, @types/semver@npm:^7.3.6": +"@types/semver@npm:^7.3.12, @types/semver@npm:^7.3.4": version: 7.3.13 resolution: "@types/semver@npm:7.3.13" checksum: 73295bb1fee46f8c76c7a759feeae5a3022f5bedfdc17d16982092e4b33af17560234fb94861560c20992a702a1e1b9a173bb623a96f95f80892105f5e7d25e3 From 4f98ec9a66a39e9dc14338e3a18ab2eab1955751 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 11 Apr 2023 22:11:03 +0800 Subject: [PATCH 4/5] Merge pull request #21999 from storybookjs/shilman/cli-version-telemetry Telemetry: Add CLI version to context --- code/frameworks/angular/package.json | 1 + .../src/builders/build-storybook/index.ts | 5 ++++- .../src/builders/start-storybook/index.ts | 6 ++++-- code/lib/cli/src/generate.ts | 4 ++++ code/lib/cli/src/index.ts | 4 ++++ code/lib/telemetry/src/index.ts | 2 ++ code/lib/telemetry/src/telemetry.ts | 17 ++++++++++++++--- code/yarn.lock | 1 + scripts/event-log-checker.ts | 7 +++++++ 9 files changed, 41 insertions(+), 6 deletions(-) diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 909c211f732d..25de35335a33 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -49,6 +49,7 @@ "@storybook/manager-api": "7.0.2", "@storybook/node-logger": "7.0.2", "@storybook/preview-api": "7.0.2", + "@storybook/telemetry": "7.0.2", "@storybook/types": "7.0.2", "@types/node": "^16.0.0", "@types/react": "^16.14.34", diff --git a/code/frameworks/angular/src/builders/build-storybook/index.ts b/code/frameworks/angular/src/builders/build-storybook/index.ts index 7619866636d7..b2479d37c772 100644 --- a/code/frameworks/angular/src/builders/build-storybook/index.ts +++ b/code/frameworks/angular/src/builders/build-storybook/index.ts @@ -13,7 +13,8 @@ import { sync as readUpSync } from 'read-pkg-up'; import { BrowserBuilderOptions, StylePreprocessorOptions } from '@angular-devkit/build-angular'; import { CLIOptions } from '@storybook/types'; -import { getEnvConfig } from '@storybook/cli'; +import { getEnvConfig, versions } from '@storybook/cli'; +import { addToGlobalContext } from '@storybook/telemetry'; import { buildStaticStandalone, withTelemetry } from '@storybook/core-server'; import { @@ -24,6 +25,8 @@ import { StandaloneOptions } from '../utils/standalone-options'; import { runCompodoc } from '../utils/run-compodoc'; import { errorSummary, printErrorDetails } from '../utils/error-handler'; +addToGlobalContext('cliVersion', versions.storybook); + export type StorybookBuilderOptions = JsonObject & { browserTarget?: string | null; tsConfig?: string; diff --git a/code/frameworks/angular/src/builders/start-storybook/index.ts b/code/frameworks/angular/src/builders/start-storybook/index.ts index f0408d6daba4..eadf73377246 100644 --- a/code/frameworks/angular/src/builders/start-storybook/index.ts +++ b/code/frameworks/angular/src/builders/start-storybook/index.ts @@ -13,8 +13,8 @@ import { sync as findUpSync } from 'find-up'; import { sync as readUpSync } from 'read-pkg-up'; import { CLIOptions } from '@storybook/types'; -import { getEnvConfig } from '@storybook/cli'; - +import { getEnvConfig, versions } from '@storybook/cli'; +import { addToGlobalContext } from '@storybook/telemetry'; import { buildDevStandalone, withTelemetry } from '@storybook/core-server'; import { AssetPattern, @@ -24,6 +24,8 @@ import { StandaloneOptions } from '../utils/standalone-options'; import { runCompodoc } from '../utils/run-compodoc'; import { printErrorDetails, errorSummary } from '../utils/error-handler'; +addToGlobalContext('cliVersion', versions.storybook); + export type StorybookBuilderOptions = JsonObject & { browserTarget?: string | null; tsConfig?: string; diff --git a/code/lib/cli/src/generate.ts b/code/lib/cli/src/generate.ts index c6cd389a4223..b501dcff1fa2 100644 --- a/code/lib/cli/src/generate.ts +++ b/code/lib/cli/src/generate.ts @@ -6,6 +6,7 @@ import leven from 'leven'; import { sync as readUpSync } from 'read-pkg-up'; import { logger } from '@storybook/node-logger'; +import { addToGlobalContext } from '@storybook/telemetry'; import type { CommandOptions } from './generators/types'; import { initiate } from './initiate'; @@ -20,6 +21,9 @@ import { generateStorybookBabelConfigInCWD } from './babel-config'; import { dev } from './dev'; import { build } from './build'; import { parseList, getEnvConfig } from './utils'; +import versions from './versions'; + +addToGlobalContext('cliVersion', versions.storybook); const pkg = readUpSync({ cwd: __dirname }).packageJson; const consoleLogger = console; diff --git a/code/lib/cli/src/index.ts b/code/lib/cli/src/index.ts index 0ca0fe529a21..4e4dd42c3a4f 100644 --- a/code/lib/cli/src/index.ts +++ b/code/lib/cli/src/index.ts @@ -1,2 +1,6 @@ +import versions from './versions'; + +export { versions }; + export * from './js-package-manager'; export * from './utils'; diff --git a/code/lib/telemetry/src/index.ts b/code/lib/telemetry/src/index.ts index ab82cad7c2e0..cd5e81dd83c2 100644 --- a/code/lib/telemetry/src/index.ts +++ b/code/lib/telemetry/src/index.ts @@ -15,6 +15,8 @@ export { getStorybookCoreVersion } from './package-json'; export { getPrecedingUpgrade } from './event-cache'; +export { addToGlobalContext } from './telemetry'; + export const telemetry = async ( eventType: EventType, payload: Payload = {}, diff --git a/code/lib/telemetry/src/telemetry.ts b/code/lib/telemetry/src/telemetry.ts index 4ae1364a5836..15b1c9b1d6d9 100644 --- a/code/lib/telemetry/src/telemetry.ts +++ b/code/lib/telemetry/src/telemetry.ts @@ -16,6 +16,18 @@ let tasks: Promise[] = []; // send telemetry const sessionId = nanoid(); +export const addToGlobalContext = (key: string, value: any) => { + globalContext[key] = value; +}; + +// context info sent with all events, provided +// by the app. currently: +// - cliVersion +const globalContext = { + inCI: Boolean(process.env.CI), + isTTY: process.stdout.isTTY, +} as Record; + export async function sendTelemetry( data: TelemetryData, options: Partial = { retryDelay: 1000, immediate: false } @@ -27,11 +39,10 @@ export async function sendTelemetry( // flatten the data before we send it const { eventType, payload, metadata, ...rest } = data; const context = options.stripMetadata - ? {} + ? globalContext : { + ...globalContext, anonymousId: getAnonymousProjectId(), - inCI: Boolean(process.env.CI), - isTTY: process.stdout.isTTY, }; const eventId = nanoid(); const body = { ...rest, eventType, eventId, sessionId, metadata, payload, context }; diff --git a/code/yarn.lock b/code/yarn.lock index 7fcbb5af7da2..10761ca6af2c 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5636,6 +5636,7 @@ __metadata: "@storybook/manager-api": 7.0.2 "@storybook/node-logger": 7.0.2 "@storybook/preview-api": 7.0.2 + "@storybook/telemetry": 7.0.2 "@storybook/types": 7.0.2 "@types/node": ^16.0.0 "@types/react": ^16.14.34 diff --git a/scripts/event-log-checker.ts b/scripts/event-log-checker.ts index a19c4047d33c..bc2056998664 100644 --- a/scripts/event-log-checker.ts +++ b/scripts/event-log-checker.ts @@ -3,6 +3,7 @@ import chalk from 'chalk'; import assert from 'assert'; import fetch from 'node-fetch'; import { allTemplates } from '../code/lib/cli/src/sandbox-templates'; +import versions from '../code/lib/cli/src/versions'; import { oneWayHash } from '../code/lib/telemetry/src/one-way-hash'; const PORT = process.env.PORT || 6007; @@ -48,6 +49,12 @@ async function run() { const [bootEvent, mainEvent] = events; + test(`both events should have cliVersion in context`, () => { + const cliVersion = versions.storybook; + assert.equal(bootEvent.context.cliVersion, cliVersion); + assert.equal(mainEvent.context.cliVersion, cliVersion); + }); + test(`Should log a boot event with a payload of type ${eventType}`, () => { assert.equal(bootEvent.eventType, 'boot'); assert.equal(bootEvent.payload?.eventType, eventType); From 6e7ce0d117341cc09251bfc07d6a30d6cf23353e Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 11 Apr 2023 16:34:56 +0200 Subject: [PATCH 5/5] Merge pull request #21401 from Roel-t/remount--shortcut UI: Add remount story shortcut --- code/lib/manager-api/src/modules/shortcuts.ts | 9 ++++++++- .../manager/src/components/layout/app.mockdata.tsx | 1 + .../manager/src/components/preview/tools/remount.tsx | 12 ++++++++---- code/ui/manager/src/settings/shortcuts.stories.tsx | 1 + code/ui/manager/src/settings/shortcuts.tsx | 1 + 5 files changed, 19 insertions(+), 5 deletions(-) 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;