Release: Patch 9.0.16

.circleci/config.yml

@@ -880,23 +880,23 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 14
+          parallelism: 13
           requires:
             - build
       - chromatic-sandboxes:
-          parallelism: 11
+          parallelism: 10
           requires:
             - create-sandboxes
       - e2e-production:
-          parallelism: 9
+          parallelism: 8
           requires:
             - create-sandboxes
       - e2e-dev:
           parallelism: 1
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 9
+          parallelism: 8
           requires:
             - create-sandboxes
       - vitest-integration:
@@ -956,23 +956,23 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 18
+          parallelism: 17
           requires:
             - build
       - chromatic-sandboxes:
-          parallelism: 15
+          parallelism: 14
           requires:
             - create-sandboxes
       - e2e-production:
-          parallelism: 13
+          parallelism: 12
           requires:
             - create-sandboxes
       - e2e-dev:
           parallelism: 1
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 13
+          parallelism: 12
           requires:
             - create-sandboxes
       - vitest-integration:
@@ -1030,26 +1030,26 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 31
+          parallelism: 30
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 28
+          parallelism: 27
           requires:
             - create-sandboxes
       - e2e-production:
-          parallelism: 26
+          parallelism: 25
           requires:
             - create-sandboxes
       - e2e-dev:
           parallelism: 1
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 26
+          parallelism: 25
           requires:
             - create-sandboxes
       - vitest-integration:

CHANGELOG.md

@@ -1,3 +1,16 @@
+## 9.0.16
+
+- Automigration: Fail with non-zero exit code on migration failure - [#31923](https://github.com/storybookjs/storybook/pull/31923), thanks @mrginglymus!
+- CLI: Fix `sb` CLI by explicitly exporting `bin/index.cjs` from `storybook` package - [#31922](https://github.com/storybookjs/storybook/pull/31922), thanks @ghengeveld!
+- Core: Fix issue where collapsed test controls can be tabbed into - [#31921](https://github.com/storybookjs/storybook/pull/31921), thanks @zenocross!
+- Core: Various fixes - [#31870](https://github.com/storybookjs/storybook/pull/31870), thanks @ghengeveld!
+- Docs: Prevent JSON tree control from swallowing keyboard events when not in focus - [#31841](https://github.com/storybookjs/storybook/pull/31841), thanks @takashi-kasajima!
+- Ember: Allow ember v5 as peer deps - [#25893](https://github.com/storybookjs/storybook/pull/25893), thanks @gossi!
+- Next.js: upgrade sass-loader to 16.0.5 - [#31855](https://github.com/storybookjs/storybook/pull/31855), thanks @terrymun!
+- NextJs-Vite: Enable next/font loading when using next-vite - [#31906](https://github.com/storybookjs/storybook/pull/31906), thanks @k35o!
+- Portable stories: Fix playwright CT to allow functions to be passed as props - [#31335](https://github.com/storybookjs/storybook/pull/31335), thanks @adamscybot!
+- UI: Set color scheme to sync scrollbar color with user-selected theme - [#28666](https://github.com/storybookjs/storybook/pull/28666), thanks @elisezhg!
+
 ## 9.0.15
 
 - CLI: Do not fail incompatible package check in doctor if only core packages used - [#31886](https://github.com/storybookjs/storybook/pull/31886), thanks @mrginglymus!

code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const meta = {
+  title: 'Controls/JsonNodes',
+  tags: ['autodocs'],
+  argTypes: {
+    value: { control: { type: 'object' } },
+    function: { control: { type: 'object' } },
+  },
+  args: {
+    value: { any: 'value' },
+    function: { value: () => {} },
+  },
+  parameters: {
+    // This story exists only to verify proper behavior on its docs page, the snapshot is irrelevant
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+export default meta;
+
+export const JsonNodes = {
+  render: () => (
+    <a href="https://www.google.com/" target="_blank" rel="noreferrer">
+      Confirm the link works by pressing enter key
+    </a>
+  ),
+};

code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx

@@ -49,13 +49,21 @@ export class JsonAddValue extends Component<JsonAddValueProps, JsonAddValueState
     if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat) {
       return;
     }
+    const { inputRefKey, inputRefValue } = this.state;
+    const { addButtonElement, handleCancel } = this.props;
+    const isFormFocused = [inputRefKey, inputRefValue, addButtonElement].some(
+      (elm) => elm === event.target
+    );
+    if (!isFormFocused) {
+      return;
+    }
     if (event.code === 'Enter' || event.key === 'Enter') {
       event.preventDefault();
       this.onSubmit();
     }
     if (event.code === 'Escape' || event.key === 'Escape') {
       event.preventDefault();
-      this.props.handleCancel();
+      handleCancel();
     }
   }
 
@@ -551,7 +559,15 @@ export class JsonFunctionValue extends Component<JsonFunctionValueProps, JsonFun
   }
 
   onKeydown(event: KeyboardEvent) {
-    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat) {
+    const { inputRef } = this.state;
+    if (
+      event.altKey ||
+      event.ctrlKey ||
+      event.metaKey ||
+      event.shiftKey ||
+      event.repeat ||
+      inputRef !== event.target
+    ) {
       return;
     }
     if (event.code === 'Enter' || event.key === 'Enter') {
@@ -1463,7 +1479,15 @@ export class JsonValue extends Component<JsonValueProps, JsonValueState> {
   }
 
   onKeydown(event: KeyboardEvent) {
-    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat) {
+    const { inputRef } = this.state;
+    if (
+      event.altKey ||
+      event.ctrlKey ||
+      event.metaKey ||
+      event.shiftKey ||
+      event.repeat ||
+      inputRef !== event.target
+    ) {
       return;
     }
     if (event.code === 'Enter' || event.key === 'Enter') {

code/core/package.json

@@ -274,6 +274,7 @@
     "./internal/manager/globals-runtime": {
       "import": "./dist/manager/globals-runtime.js"
     },
+    "./bin/index.cjs": "./bin/index.cjs",
     "./package.json": "./package.json",
     "./internal/package.json": "./package.json"
   },

code/core/scripts/helpers/generatePackageJsonFile.ts

@@ -68,6 +68,9 @@ export async function generatePackageJsonFile(entries: ReturnType<typeof getEntr
     return acc;
   }, {});
 
+  // Add CLI entry so `sb` can require it.
+  pkgJson.exports['./bin/index.cjs'] = './bin/index.cjs';
+
   // Add the package.json file to the exports, so we can use it to `require.resolve` the package's root easily
   pkgJson.exports['./package.json'] = './package.json';
   pkgJson.exports['./internal/package.json'] = './package.json';

code/core/src/components/components/Modal/Modal.styled.tsx

@@ -64,7 +64,7 @@ export const Container = styled.div<{ width?: number; height?: number }>(
 
 export const CloseButton = (props: React.ComponentProps<typeof IconButton>) => (
   <Dialog.Close asChild>
-    <IconButton {...props}>
+    <IconButton aria-label="Close" {...props}>
       <CrossIcon />
     </IconButton>
   </Dialog.Close>

code/core/src/components/components/tooltip/Tooltip.tsx

@@ -96,6 +96,7 @@ const Wrapper = styled.div<WrapperProps>(
   ({ hidden }) => ({
     display: hidden ? 'none' : 'inline-block',
     zIndex: 2147483647,
+    colorScheme: 'light dark',
   }),
   ({ theme, color, hasChrome }) =>
     hasChrome

code/core/src/manager/components/layout/Layout.tsx

@@ -210,6 +210,7 @@ const LayoutContainer = styled.div<LayoutState & { showPanel: boolean }>(
       overflow: 'hidden',
       display: 'flex',
       flexDirection: 'column',
+      colorScheme: 'light dark',
 
       [MEDIA_DESKTOP_BREAKPOINT]: {
         display: 'grid',

code/core/src/manager/components/sidebar/Sidebar.tsx

@@ -176,6 +176,7 @@ export const Sidebar = React.memo(function Sidebar({
                     tooltip={<TooltipNoteWrapper note="Create a new story" />}
                   >
                     <CreateNewStoryButton
+                      aria-label="Create a new story"
                       isMobile={isMobile}
                       onClick={() => {
                         setIsFileSearchModalOpen(true);

code/core/src/manager/components/sidebar/TestingModule.tsx

@@ -68,6 +68,8 @@ const Card = styled.div(({ theme }) => ({
   zIndex: 1,
   borderRadius: theme.appBorderRadius,
   backgroundColor: theme.background.content,
+  display: 'flex',
+  flexDirection: 'column-reverse',
 
   '&:hover #testing-module-collapse-toggle': {
     opacity: 1,
@@ -76,7 +78,6 @@ const Card = styled.div(({ theme }) => ({
 
 const Collapsible = styled.div(({ theme }) => ({
   overflow: 'hidden',
-
   willChange: 'auto',
   boxShadow: `inset 0 -1px 0 ${theme.appBorderColor}`,
 }));
@@ -270,34 +271,6 @@ export const TestingModule = ({
       data-updated={isUpdated}
     >
       <Card>
-        {hasTestProviders && (
-          <Collapsible
-            data-testid="collapse"
-            style={{
-              transition: isChangingCollapse ? 'max-height 250ms' : 'max-height 0ms',
-              display: hasTestProviders ? 'block' : 'none',
-              maxHeight: isCollapsed ? 0 : maxHeight,
-            }}
-          >
-            <Content ref={contentRef}>
-              {Object.values(registeredTestProviders).map((registeredTestProvider) => {
-                const { render: Render, id } = registeredTestProvider;
-                if (!Render) {
-                  once.warn(
-                    `No render function found for test provider with id '${id}', skipping...`
-                  );
-                  return null;
-                }
-                return (
-                  <TestProvider key={id} data-module-id={id}>
-                    <Render />
-                  </TestProvider>
-                );
-              })}
-            </Content>
-          </Collapsible>
-        )}
-
         <Bar {...(hasTestProviders ? { onClick: (e) => toggleCollapsed(e) } : {})}>
           <Action>
             {hasTestProviders && (
@@ -432,6 +405,35 @@ export const TestingModule = ({
             )}
           </Filters>
         </Bar>
+
+        {hasTestProviders && (
+          <Collapsible
+            data-testid="collapse"
+            {...(isCollapsed && { inert: '' })}
+            style={{
+              transition: isChangingCollapse ? 'max-height 250ms' : 'max-height 0ms',
+              display: hasTestProviders ? 'block' : 'none',
+              maxHeight: isCollapsed ? 0 : maxHeight,
+            }}
+          >
+            <Content ref={contentRef}>
+              {Object.values(registeredTestProviders).map((registeredTestProvider) => {
+                const { render: Render, id } = registeredTestProvider;
+                if (!Render) {
+                  once.warn(
+                    `No render function found for test provider with id '${id}', skipping...`
+                  );
+                  return null;
+                }
+                return (
+                  <TestProvider key={id} data-module-id={id}>
+                    <Render />
+                  </TestProvider>
+                );
+              })}
+            </Content>
+          </Collapsible>
+        )}
       </Card>
     </Outline>
   );

code/core/src/manager/utils/tree.ts

@@ -40,8 +40,10 @@ export const getDescendantIds = memoize(1000)((
   skipLeafs: boolean
 ): string[] => {
   const entry = data[id];
-  const children = entry.type === 'story' || entry.type === 'docs' ? [] : entry.children;
-  return children.reduce((acc, childId) => {
+  if (!entry || entry.type === 'story' || entry.type === 'docs' || !entry.children) {
+    return [];
+  }
+  return entry.children.reduce((acc, childId) => {
     const child = data[childId];
 
     if (!child || (skipLeafs && (child.type === 'story' || child.type === 'docs'))) {

code/core/src/preview-api/modules/store/csf/portable-stories.ts

@@ -301,7 +301,9 @@ export function composeStories<TModule extends Store_CSFExports>(
   return composedStories;
 }
 
-type WrappedStoryRef = { __pw_type: 'jsx' | 'importRef' };
+type WrappedStoryRef =
+  | { __pw_type: 'jsx'; props: Record<string, any> }
+  | { __pw_type: 'importRef' };
 type UnwrappedJSXStoryRef = {
   __pw_type: 'jsx';
   type: UnwrappedImportStoryRef;
@@ -341,12 +343,16 @@ export function createPlaywrightTest<TFixture extends { extend: any }>(
             `);
         }
 
+        // Props are not necessarily serialisable and so can't be passed to browser via
+        // `page.evaluate`. Regardless they are not needed for storybook load/play steps.
+        const { props, ...storyRefWithoutProps } = storyRef;
+
         await page.evaluate(async (wrappedStoryRef: WrappedStoryRef) => {
           const unwrappedStoryRef = await globalThis.__pwUnwrapObject?.(wrappedStoryRef);
           const story =
             '__pw_type' in unwrappedStoryRef ? unwrappedStoryRef.type : unwrappedStoryRef;
           return story?.load?.();
-        }, storyRef);
+        }, storyRefWithoutProps);
 
         // mount the story
         const mountResult = await mount(storyRef, ...restArgs);
@@ -358,7 +364,7 @@ export function createPlaywrightTest<TFixture extends { extend: any }>(
             '__pw_type' in unwrappedStoryRef ? unwrappedStoryRef.type : unwrappedStoryRef;
           const canvasElement = document.querySelector('#root');
           return story?.play?.({ canvasElement });
-        }, storyRef);
+        }, storyRefWithoutProps);
 
         return mountResult;
       });

code/frameworks/ember/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@storybook/ember",
   "version": "9.0.15",
-  "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
+  "description": "Storybook for Ember: Develop, document, and test Ember components in isolation",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
@@ -62,7 +62,7 @@
     "@babel/core": "*",
     "babel-plugin-ember-modules-api-polyfill": "^3.5.0",
     "babel-plugin-htmlbars-inline-precompile": "^5.3.1",
-    "ember-source": "~3.28.1 || ^4.0.0",
+    "ember-source": "~3.28.1 || >=4.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "storybook": "workspace:^"