Merge branch 'next' into valentin/try-to-fix-angular-test

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 7.6.10
+
+- CLI: Fix existing version detection in `upgrade` - [#25642](https://github.com/storybookjs/storybook/pull/25642), thanks [@JReinhold](https://github.com/JReinhold)!
+- React: Fix acorn ecma version warning - [#25634](https://github.com/storybookjs/storybook/pull/25634), thanks [@dannyhw](https://github.com/dannyhw)!
+
 ## 7.6.9
 
 - ConfigFile: Fix export specifiers - [#25590](https://github.com/storybookjs/storybook/pull/25590), thanks [@shilman](https://github.com/shilman)!

MIGRATION.md

@@ -1,6 +1,7 @@
 <h1>Migration</h1>
 
 - [From version 7.x to 8.0.0](#from-version-7x-to-800)
+  - [Default keyboard shortcuts changed](#default-keyboard-shortcuts-changed)
   - [Manager addons are now rendered with React 18](#manager-addons-are-now-rendered-with-react-18)
   - [Removal of `storiesOf`-API](#removal-of-storiesof-api)
   - [Removed deprecated shim packages](#removed-deprecated-shim-packages)
@@ -62,25 +63,26 @@
     - [Description Doc block properties](#description-doc-block-properties)
     - [Story Doc block properties](#story-doc-block-properties)
     - [Manager API expandAll and collapseAll methods](#manager-api-expandall-and-collapseall-methods)
-    - [Source Doc block properties](#source-doc-block-properties)
-    - [Canvas Doc block properties](#canvas-doc-block-properties)
+    - [`ArgsTable` Doc block removed](#argstable-doc-block-removed)
+    - [`Source` Doc block properties](#source-doc-block-properties)
+    - [`Canvas` Doc block properties](#canvas-doc-block-properties)
     - [`Primary` Doc block properties](#primary-doc-block-properties)
     - [`createChannel` from `@storybook/postmessage` and `@storybook/channel-websocket`](#createchannel-from-storybookpostmessage-and-storybookchannel-websocket)
     - [StoryStore and methods deprecated](#storystore-and-methods-deprecated)
   - [Addon author changes](#addon-author-changes)
     - [Removed `config` preset](#removed-config-preset-1)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
-    - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
-    - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
-    - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
-    - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
-    - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
+  - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
+  - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
+  - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
+  - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
+  - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
 - [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
-    - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
-    - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
+  - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
+  - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
 - [From version 7.0.0 to 7.2.0](#from-version-700-to-720)
-    - [Addon API is more type-strict](#addon-api-is-more-type-strict)
-    - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated)
+  - [Addon API is more type-strict](#addon-api-is-more-type-strict)
+  - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated)
 - [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
   - [7.0 breaking changes](#70-breaking-changes)
     - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below)
@@ -384,6 +386,10 @@
 
 ## From version 7.x to 8.0.0
 
+### Default keyboard shortcuts changed
+
+The default keyboard shortcuts have changed to avoid any conflicts with the browser's default shortcuts or when you are directly typing in the Manager. If you want to get the new default shortcuts, you can reset your shortcuts in the keyboard shortcuts panel by pressing the `Restore default` button.
+
 ### Manager addons are now rendered with React 18
 
 The UI added to the manager via addons is now rendered with React 18.
@@ -1002,11 +1008,17 @@ api.collapseAll(); // becomes api.emit(STORIES_COLLAPSE_ALL)
 api.expandAll(); // becomes api.emit(STORIES_EXPAND_ALL)
 ```
 
-#### Source Doc block properties
+#### `ArgsTable` Doc block removed
+
+The `ArgsTable` doc block has been removed in favor of `ArgTypes` and `Controls`. [More info](#argstable-block).
+
+With this removal we've reintroduced `subcomponents` support to `ArgTypes`, `Controls`, and autodocs. We've also undeprecated `subcomponents`, by popular demand.
+
+#### `Source` Doc block properties
 
 `id` and `ids` are now removed in favor of the `of` property. [More info](#doc-blocks).
 
-#### Canvas Doc block properties
+#### `Canvas` Doc block properties
 
 The following properties were removed from the Canvas Doc block:
 

code/addons/docs/template/stories/docspage/description.stories.ts

@@ -2,7 +2,6 @@ import { global as globalThis } from '@storybook/global';
 
 export default {
   component: globalThis.Components.Button,
-  // FIXME: remove array subcomponents in 7.0?
   subcomponents: {
     Pre: globalThis.Components.Pre,
   },

code/addons/outline/src/OutlineSelector.tsx

@@ -20,8 +20,8 @@ export const OutlineSelector = memo(function OutlineSelector() {
 
   useEffect(() => {
     api.setAddonShortcut(ADDON_ID, {
-      label: 'Toggle Outline [O]',
-      defaultShortcut: ['O'],
+      label: 'Toggle Outline',
+      defaultShortcut: ['alt', 'O'],
       actionName: 'outline',
       showInMenu: false,
       action: toggleOutline,

code/addons/viewport/src/shortcuts.ts

@@ -1,4 +1,4 @@
-import type { API } from '@storybook/manager-api';
+import { type API } from '@storybook/manager-api';
 import { ADDON_ID } from './constants';
 import { globals as defaultGlobals } from './preview';
 
@@ -27,7 +27,7 @@ export const registerShortcuts = async (
 ) => {
   await api.setAddonShortcut(ADDON_ID, {
     label: 'Previous viewport',
-    defaultShortcut: ['shift', 'V'],
+    defaultShortcut: ['alt', 'shift', 'V'],
     actionName: 'previous',
     action: () => {
       updateGlobals({
@@ -38,7 +38,7 @@ export const registerShortcuts = async (
 
   await api.setAddonShortcut(ADDON_ID, {
     label: 'Next viewport',
-    defaultShortcut: ['V'],
+    defaultShortcut: ['alt', 'V'],
     actionName: 'next',
     action: () => {
       updateGlobals({
@@ -49,7 +49,7 @@ export const registerShortcuts = async (
 
   await api.setAddonShortcut(ADDON_ID, {
     label: 'Reset viewport',
-    defaultShortcut: ['alt', 'V'],
+    defaultShortcut: ['alt', 'control', 'V'],
     actionName: 'reset',
     action: () => {
       updateGlobals(defaultGlobals);

code/e2e-tests/manager.spec.ts

@@ -21,9 +21,9 @@ test.describe('Manager UI', () => {
       await expect(sbPage.page.locator('.sidebar-container')).toBeVisible();
 
       // toggle with keyboard shortcut
-      await sbPage.page.locator('html').press('s');
+      await sbPage.page.locator('html').press('Alt+s');
       await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible();
-      await sbPage.page.locator('html').press('s');
+      await sbPage.page.locator('html').press('Alt+s');
       await expect(sbPage.page.locator('.sidebar-container')).toBeVisible();
 
       // toggle with menu item
@@ -51,9 +51,9 @@ test.describe('Manager UI', () => {
       await expectToolbarVisibility(true);
 
       // toggle with keyboard shortcut
-      await sbPage.page.locator('html').press('t');
+      await sbPage.page.locator('html').press('Alt+t');
       await expectToolbarVisibility(false);
-      await sbPage.page.locator('html').press('t');
+      await sbPage.page.locator('html').press('Alt+t');
       await expectToolbarVisibility(true);
 
       // toggle with menu item
@@ -75,9 +75,9 @@ test.describe('Manager UI', () => {
         await expect(sbPage.page.locator('#storybook-panel-root')).not.toBeVisible();
 
         // toggle with keyboard shortcut
-        await sbPage.page.locator('html').press('a');
+        await sbPage.page.locator('html').press('Alt+a');
         await expect(sbPage.page.locator('#storybook-panel-root')).not.toBeVisible();
-        await sbPage.page.locator('html').press('a');
+        await sbPage.page.locator('html').press('Alt+a');
         await expect(sbPage.page.locator('#storybook-panel-root')).not.toBeVisible();
       });
 
@@ -90,9 +90,9 @@ test.describe('Manager UI', () => {
         await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible();
 
         // toggle with keyboard shortcut
-        await sbPage.page.locator('html').press('a');
+        await sbPage.page.locator('html').press('Alt+a');
         await expect(sbPage.page.locator('#storybook-panel-root')).not.toBeVisible();
-        await sbPage.page.locator('html').press('a');
+        await sbPage.page.locator('html').press('Alt+a');
         await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible();
 
         // toggle with menu item
@@ -114,16 +114,16 @@ test.describe('Manager UI', () => {
         await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible();
 
         // toggle position with keyboard shortcut
-        await sbPage.page.locator('html').press('d');
+        await sbPage.page.locator('html').press('Alt+d');
         await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible();
         // TODO: how to assert panel position?
 
         // hide with keyboard shortcut
-        await sbPage.page.locator('html').press('a');
+        await sbPage.page.locator('html').press('Alt+a');
         await expect(sbPage.page.locator('#storybook-panel-root')).not.toBeVisible();
 
         // toggling position should also show the panel again
-        await sbPage.page.locator('html').press('d');
+        await sbPage.page.locator('html').press('Alt+d');
         await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible();
       });
     });
@@ -138,11 +138,11 @@ test.describe('Manager UI', () => {
       await expect(sbPage.page.locator('.sidebar-container')).toBeVisible();
 
       // toggle with keyboard shortcut
-      await sbPage.page.locator('html').press('f');
+      await sbPage.page.locator('html').press('Alt+f');
       await expect(sbPage.page.locator('#storybook-panel-root')).not.toBeVisible();
       await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible();
 
-      await sbPage.page.locator('html').press('f');
+      await sbPage.page.locator('html').press('Alt+f');
       await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible();
       await expect(sbPage.page.locator('.sidebar-container')).toBeVisible();
 

code/e2e-tests/preview-web.spec.ts

@@ -32,7 +32,7 @@ test.describe('preview-web', () => {
 
     // click outside, to remove focus from the input of the story, then press S to toggle sidebar
     await sbPage.previewRoot().click();
-    await sbPage.previewRoot().press('s');
+    await sbPage.previewRoot().press('Alt+s');
     await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible();
   });
 
@@ -47,7 +47,7 @@ test.describe('preview-web', () => {
 
     await expect(sbPage.page.locator('.sidebar-container')).toBeVisible();
 
-    await sbPage.previewRoot().getByRole('button').getByText('Submit').first().press('s');
+    await sbPage.previewRoot().getByRole('button').getByText('Submit').first().press('Alt+s');
     await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible();
   });
 });

code/lib/cli/src/upgrade.ts

@@ -110,7 +110,8 @@ export const doUpgrade = async ({
 }: UpgradeOptions) => {
   const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr });
 
-  const beforeVersion = await getStorybookCoreVersion();
+  // If we can't determine the existing version (Yarn PnP), fallback to v0.0.0 to not block the upgrade
+  const beforeVersion = (await getStorybookCoreVersion()) ?? '0.0.0';
   const currentVersion = versions['@storybook/cli'];
   const isCanary = currentVersion.startsWith('0.0.0');
 

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

@@ -125,12 +125,12 @@ type API_AddonShortcutLabels = Record<string, string>;
 type API_AddonShortcutDefaults = Record<string, API_KeyCollection>;
 
 export const defaultShortcuts: API_Shortcuts = Object.freeze({
-  fullScreen: ['F'],
-  togglePanel: ['A'],
-  panelPosition: ['D'],
-  toggleNav: ['S'],
-  toolbar: ['T'],
-  search: ['/'],
+  fullScreen: ['alt', 'F'],
+  togglePanel: ['alt', 'A'],
+  panelPosition: ['alt', 'D'],
+  toggleNav: ['alt', 'S'],
+  toolbar: ['alt', 'T'],
+  search: [controlOrMetaKey(), 'K'],
   focusNav: ['1'],
   focusIframe: ['2'],
   focusPanel: ['3'],
@@ -139,7 +139,7 @@ export const defaultShortcuts: API_Shortcuts = Object.freeze({
   prevStory: ['alt', 'ArrowLeft'],
   nextStory: ['alt', 'ArrowRight'],
   shortcutsPage: [controlOrMetaKey(), 'shift', ','],
-  aboutPage: [','],
+  aboutPage: [controlOrMetaKey(), ','],
   escape: ['escape'], // This one is not customizable
   collapseAll: [controlOrMetaKey(), 'shift', 'ArrowUp'],
   expandAll: [controlOrMetaKey(), 'shift', 'ArrowDown'],

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

@@ -54,7 +54,7 @@ describe('shortcuts api', () => {
     const { api, state } = initShortcuts({ store });
     store.setState(state);
 
-    expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['F']);
+    expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['alt', 'F']);
   });
 
   it('gets defaults including addon ones', async () => {
@@ -67,7 +67,7 @@ describe('shortcuts api', () => {
     await api.setAddonShortcut(mockAddonSecondShortcut.addon, mockAddonSecondShortcut.shortcut);
     await api.setAddonShortcut(mockSecondAddonShortcut.addon, mockSecondAddonShortcut.shortcut);
 
-    expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['F']);
+    expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['alt', 'F']);
     expect(api.getDefaultShortcuts()).toHaveProperty(
       `${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}`,
       mockAddonShortcut.shortcut.defaultShortcut
@@ -148,7 +148,7 @@ describe('shortcuts api', () => {
     const { api, state } = initShortcuts({ store });
     store.setState(state);
 
-    expect(api.getShortcutKeys().fullScreen).toEqual(['F']);
+    expect(api.getShortcutKeys().fullScreen).toEqual(['alt', 'F']);
   });
 
   it('sets addon shortcut with default value', async () => {
@@ -161,7 +161,7 @@ describe('shortcuts api', () => {
     await api.setAddonShortcut(mockAddonSecondShortcut.addon, mockAddonSecondShortcut.shortcut);
     await api.setAddonShortcut(mockSecondAddonShortcut.addon, mockSecondAddonShortcut.shortcut);
 
-    expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['F']);
+    expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['alt', 'F']);
     expect(api.getDefaultShortcuts()).toHaveProperty(
       `${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}`,
       mockAddonShortcut.shortcut.defaultShortcut
@@ -184,7 +184,7 @@ describe('shortcuts api', () => {
     store.setState(state);
 
     expect(api.getShortcutKeys().fullScreen).toEqual(['Z']);
-    expect(api.getShortcutKeys().togglePanel).toEqual(['A']);
+    expect(api.getShortcutKeys().togglePanel).toEqual(['alt', 'A']);
   });
 
   it('sets defaults, ignoring anything persisted that is out of date', () => {
@@ -234,8 +234,8 @@ describe('shortcuts api', () => {
     await api.setShortcut(`${addon}-${shortcut.actionName}`, ['I']);
 
     await api.restoreAllDefaultShortcuts();
-    expect(api.getShortcutKeys().fullScreen).toEqual(['F']);
-    expect(api.getShortcutKeys().togglePanel).toEqual(['A']);
+    expect(api.getShortcutKeys().fullScreen).toEqual(['alt', 'F']);
+    expect(api.getShortcutKeys().togglePanel).toEqual(['alt', 'A']);
     expect(api.getShortcutKeys()[`${addon}-${shortcut.actionName}`]).toEqual(
       shortcut.defaultShortcut
     );
@@ -269,7 +269,7 @@ describe('shortcuts api', () => {
       `${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}`
     );
 
-    expect(api.getShortcutKeys().fullScreen).toEqual(['F']);
+    expect(api.getShortcutKeys().fullScreen).toEqual(['alt', 'F']);
     expect(api.getShortcutKeys().togglePanel).toEqual(['B']);
     expect(
       api.getShortcutKeys()[`${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}`]

code/lib/preview-api/src/modules/store/csf/processCSFFile.ts

@@ -8,9 +8,8 @@ import type {
   NormalizedComponentAnnotations,
 } from '@storybook/types';
 import { isExportStory } from '@storybook/csf';
-import { deprecate, logger } from '@storybook/client-logger';
+import { logger } from '@storybook/client-logger';
 
-import dedent from 'ts-dedent';
 import { normalizeStory } from './normalizeStory';
 import { normalizeComponentAnnotations } from './normalizeComponentAnnotations';
 
@@ -39,15 +38,6 @@ const checkDisallowedParameters = (parameters?: Parameters) => {
   checkStorySort(parameters);
 };
 
-const checkSubcomponents = (meta: ModuleExports) => {
-  if (meta.subcomponents) {
-    deprecate(dedent`The \`subcomponents\` annotation is deprecated. 
-    
-      Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#argstable-block'
-    `);
-  }
-};
-
 // Given the raw exports of a CSF file, check and normalize it.
 export function processCSFFile<TRenderer extends Renderer>(
   moduleExports: ModuleExports,
@@ -63,7 +53,6 @@ export function processCSFFile<TRenderer extends Renderer>(
     importPath
   );
   checkDisallowedParameters(meta.parameters);
-  checkSubcomponents(meta);
 
   const csfFile: CSFFile<TRenderer> = { meta, stories: {}, moduleExports };
 

code/lib/telemetry/src/package-json.ts

@@ -28,10 +28,8 @@ export const getActualPackageJson = async (packageName: string) => {
   return packageJson;
 };
 
-// Note that this probably doesn't work in PNPM mode
+// Note that this probably doesn't work in Yarn PNP mode because @storybook/telemetry doesn't depend on @storybook/cli
 export const getStorybookCoreVersion = async () => {
-  const coreVersions = await Promise.all(
-    ['@storybook/core-common', '@storybook/core-server'].map(getActualPackageVersion)
-  );
-  return coreVersions.find((v) => v.version)?.version;
+  const { version } = await getActualPackageVersion('@storybook/cli');
+  return version;
 };