Merge branch 'next' into shilman/add-tag-exclusion

.circleci/config.yml

@@ -124,7 +124,7 @@ jobs:
             yarn docs:prettier:check
   build:
     executor:
-      class: large
+      class: xlarge
       name: sb_node_16_classic
     steps:
       - git-shallow-clone/checkout_advanced:

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 8.0.10
+
+- MDX: Don't transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!
+- React: Support v19 in `react-dom-shim` - [#26898](https://github.com/storybookjs/storybook/pull/26898), thanks @Tobbe!
+- Vite: Merge assetsInclude property with Storybook default values - [#26860](https://github.com/storybookjs/storybook/pull/26860), thanks @yuemori!
+
 ## 8.0.9
 
 - Addon-docs: Fix MDX compilation when using `@vitejs/plugin-react-swc` with plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold!

CHANGELOG.prerelease.md

@@ -1,3 +1,33 @@
+## 8.1.0-alpha.8
+
+- Addon-actions: Fix falsy args printing as object - 22163 - [#26917](https://github.com/storybookjs/storybook/pull/26917), thanks @Fatcat560!
+- Addon-docs: Fix MDX compilation with `@vitejs/plugin-react-swc` and plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold!
+- Automigration: Fix name of VTA addon - [#26816](https://github.com/storybookjs/storybook/pull/26816), thanks @valentinpalkovic!
+- Blocks: Add `of` prop to `Subtitle` - [#22552](https://github.com/storybookjs/storybook/pull/22552), thanks @joaonunomota!
+- Blocks: Add `of` prop to `Title` - [#23728](https://github.com/storybookjs/storybook/pull/23728), thanks @Sidnioulz!
+- CSF: Fix typings for control and other properties of argTypes - [#26824](https://github.com/storybookjs/storybook/pull/26824), thanks @kasperpeulen!
+- Controls: Added server channel to create a new story - [#26769](https://github.com/storybookjs/storybook/pull/26769), thanks @valentinpalkovic!
+- Controls: Fix crashing when docgen extraction partially fails - [#26862](https://github.com/storybookjs/storybook/pull/26862), thanks @yannbf!
+- Controls: Add UI to create new story files - [#26875](https://github.com/storybookjs/storybook/pull/26875), thanks @valentinpalkovic!
+- Core: Drop unneeded `UPDATE_STORY_ARGS` which was for SSv6 - [#25993](https://github.com/storybookjs/storybook/pull/25993), thanks @tmeasday!
+- Core: Ensure that simultaneous onStoriesChanged don't clobber each other - [#26882](https://github.com/storybookjs/storybook/pull/26882), thanks @tmeasday!
+- Core: Fix filters not being applied in WebKit - [#26949](https://github.com/storybookjs/storybook/pull/26949), thanks @JReinhold!
+- Core: Implement file formatter - [#26809](https://github.com/storybookjs/storybook/pull/26809), thanks @valentinpalkovic!
+- Core: Save from controls - [#26827](https://github.com/storybookjs/storybook/pull/26827), thanks @ndelangen!
+- Dependencies: Upgrade @storybook/csf to 0.1.5 - [#26958](https://github.com/storybookjs/storybook/pull/26958), thanks @Cherry!
+- Doc Tools: Signature Type Error Handling - [#26774](https://github.com/storybookjs/storybook/pull/26774), thanks @ethriel3695!
+- Docs: Fix providerImportSource extension - [#26868](https://github.com/storybookjs/storybook/pull/26868), thanks @bashmish!
+- MDX: Don't transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!
+- Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13!
+- Next.js: Support v14.2 useParams functionality - [#26874](https://github.com/storybookjs/storybook/pull/26874), thanks @yannbf!
+- Portable Stories: Warn when rendering stories without cleaning up first - [#27008](https://github.com/storybookjs/storybook/pull/27008), thanks @JReinhold!
+- React: Support v19 in `react-dom-shim` - [#26898](https://github.com/storybookjs/storybook/pull/26898), thanks @Tobbe!
+- Test: Remove chai as dependency of @storybook/test - [#26852](https://github.com/storybookjs/storybook/pull/26852), thanks @kasperpeulen!
+- Test: Support module mocking with conditional subpath imports in `package.json`  - [#26688](https://github.com/storybookjs/storybook/pull/26688), thanks @kasperpeulen!
+- UI: Fix not re-rendering tabs on state change - [#26899](https://github.com/storybookjs/storybook/pull/26899), thanks @lifeiscontent!
+- UI: Fix sidebar search hanging when selecting a story in touch mode - [#26807](https://github.com/storybookjs/storybook/pull/26807), thanks @JReinhold!
+- Vite: Merge assetsInclude property with Storybook default values - [#26860](https://github.com/storybookjs/storybook/pull/26860), thanks @yuemori!
+
 ## 8.1.0-alpha.7
 
 - CLI: Add --config-dir flag to add command - [#26771](https://github.com/storybookjs/storybook/pull/26771), thanks @eric-blue!

MIGRATION.md

@@ -1,12 +1,14 @@
 <h1>Migration</h1>
 
-- [From version 8.0 to 8.1.0](#from-version-80-to-810)
+- [From version 8.0.x to 8.1.x](#from-version-80x-to-81x)
+  - [Portable stories](#portable-stories)
+    - [@storybook/nextjs requires specific path aliases to be setup](#storybooknextjs-requires-specific-path-aliases-to-be-setup)
   - [main.js `docs.autodocs` is deprecated](#mainjs-docsautodocs-is-deprecated)
   - [`docs` and `story` system tags removed](#docs-and-story-system-tags-removed)
   - [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle)
   - [Title block `of` prop](#title-block-of-prop)
 - [From version 7.x to 8.0.0](#from-version-7x-to-800)
-  - [Portable stories](#portable-stories)
+  - [Portable stories](#portable-stories-1)
     - [Project annotations are now merged instead of overwritten in composeStory](#project-annotations-are-now-merged-instead-of-overwritten-in-composestory)
     - [Type change in `composeStories` API](#type-change-in-composestories-api)
     - [Composed Vue stories are now components instead of functions](#composed-vue-stories-are-now-components-instead-of-functions)
@@ -408,7 +410,27 @@
   - [Packages renaming](#packages-renaming)
   - [Deprecated embedded addons](#deprecated-embedded-addons)
 
-## From version 8.0 to 8.1.0
+## From version 8.0.x to 8.1.x
+
+### Portable stories
+
+#### @storybook/nextjs requires specific path aliases to be setup
+
+In order to properly mock the `next/router`, `next/header`, `next/navigation` and `next/cache` APIs, the `@storybook/nextjs` framework includes internal Webpack aliases to those modules. If you use portable stories in your Jest tests, you should set the aliases in your Jest config files `moduleNameMapper` property using the `getPackageAliases` helper from `@storybook/nextjs/export-mocks`:
+
+```js
+const nextJest = require("next/jest.js");
+const { getPackageAliases } = require("@storybook/nextjs/export-mocks");
+const createJestConfig = nextJest();
+const customJestConfig = {
+  moduleNameMapper: {
+    ...getPackageAliases(), // Add aliases for @storybook/nextjs mocks
+  },
+};
+module.exports = createJestConfig(customJestConfig);
+```
+
+This will make sure you end using the correct implementation of the packages and avoid having issues in your tests.
 
 ### main.js `docs.autodocs` is deprecated
 
@@ -5106,7 +5128,7 @@ SB 5.1.0 added [support for project root `babel.config.js` files](https://github
 
 ### React native server
 
-Storybook 5.1 contains a major overhaul of `@storybook/react-native` as compared to 4.1 (we didn't ship a version of RN in 5.0 due to timing constraints). Storybook for RN consists of an an UI for browsing stories on-device or in a simulator, and an optional webserver which can also be used to browse stories and web addons.
+Storybook 5.1 contains a major overhaul of `@storybook/react-native` as compared to 4.1 (we didn't ship a version of RN in 5.0 due to timing constraints). Storybook for RN consists of an UI for browsing stories on-device or in a simulator, and an optional webserver which can also be used to browse stories and web addons.
 
 5.1 refactors both pieces:
 

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.1.0-alpha.7",
+  "version": "8.1.0-alpha.8",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.1.0-alpha.7",
+  "version": "8.1.0-alpha.8",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

code/addons/actions/src/components/ActionLogger/index.tsx

@@ -1,22 +1,23 @@
-import type { FC, PropsWithChildren } from 'react';
-import React, { Fragment } from 'react';
-import { styled, withTheme } from '@storybook/theming';
+import type { ElementRef, ReactNode } from 'react';
+import React, { forwardRef, Fragment, useEffect, useRef } from 'react';
 import type { Theme } from '@storybook/theming';
+import { styled, withTheme } from '@storybook/theming';
 
 import { Inspector } from 'react-inspector';
 import { ActionBar, ScrollArea } from '@storybook/components';
 
-import { Action, InspectorContainer, Counter } from './style';
+import { Action, Counter, InspectorContainer } from './style';
 import type { ActionDisplay } from '../../models';
 
-const UnstyledWrapped: FC<PropsWithChildren<{ className?: string }>> = ({
-  children,
-  className,
-}) => (
-  <ScrollArea horizontal vertical className={className}>
-    {children}
-  </ScrollArea>
+const UnstyledWrapped = forwardRef<HTMLDivElement, { children: ReactNode; className?: string }>(
+  ({ children, className }, ref) => (
+    <ScrollArea ref={ref} horizontal vertical className={className}>
+      {children}
+    </ScrollArea>
+  )
 );
+UnstyledWrapped.displayName = 'UnstyledWrapped';
+
 export const Wrapper = styled(UnstyledWrapped)({
   margin: 0,
   padding: '10px 5px 20px',
@@ -39,24 +40,34 @@ interface ActionLoggerProps {
   onClear: () => void;
 }
 
-export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => (
-  <Fragment>
-    <Wrapper>
-      {actions.map((action: ActionDisplay) => (
-        <Action key={action.id}>
-          {action.count > 1 && <Counter>{action.count}</Counter>}
-          <InspectorContainer>
-            <ThemedInspector
-              sortObjectKeys
-              showNonenumerable={false}
-              name={action.data.name}
-              data={action.data.args || action.data}
-            />
-          </InspectorContainer>
-        </Action>
-      ))}
-    </Wrapper>
-
-    <ActionBar actionItems={[{ title: 'Clear', onClick: onClear }]} />
-  </Fragment>
-);
+export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => {
+  const wrapperRef = useRef<ElementRef<typeof Wrapper>>(null);
+  const wrapper = wrapperRef.current;
+  const wasAtBottom = wrapper && wrapper.scrollHeight - wrapper.scrollTop === wrapper.clientHeight;
+
+  useEffect(() => {
+    // Scroll to bottom, when the action panel was already scrolled down
+    if (wasAtBottom) wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
+  }, [wasAtBottom, actions.length]);
+
+  return (
+    <Fragment>
+      <Wrapper ref={wrapperRef}>
+        {actions.map((action: ActionDisplay) => (
+          <Action key={action.id}>
+            {action.count > 1 && <Counter>{action.count}</Counter>}
+            <InspectorContainer>
+              <ThemedInspector
+                sortObjectKeys
+                showNonenumerable={false}
+                name={action.data.name}
+                data={action.data.args ?? action.data}
+              />
+            </InspectorContainer>
+          </Action>
+        ))}
+      </Wrapper>
+      <ActionBar actionItems={[{ title: 'Clear', onClick: onClear }]} />
+    </Fragment>
+  );
+};

code/addons/actions/src/containers/ActionLogger/index.tsx

@@ -63,12 +63,12 @@ export default class ActionLogger extends Component<ActionLoggerProps, ActionLog
   addAction = (action: ActionDisplay) => {
     this.setState((prevState: ActionLoggerState) => {
       const actions = [...prevState.actions];
-      const previous = actions.length && actions[0];
+      const previous = actions.length && actions[actions.length - 1];
       if (previous && safeDeepEqual(previous.data, action.data)) {
         previous.count++;
       } else {
         action.count = 1;
-        actions.unshift(action);
+        actions.push(action);
       }
       return { actions: actions.slice(0, action.options.limit) };
     });

code/addons/actions/src/loaders.ts

@@ -18,7 +18,26 @@ const logActionsWhenMockCalled: LoaderFunction = (context) => {
     typeof global.__STORYBOOK_TEST_ON_MOCK_CALL__ === 'function'
   ) {
     const onMockCall = global.__STORYBOOK_TEST_ON_MOCK_CALL__ as typeof onMockCallType;
-    onMockCall((mock, args) => action(mock.getMockName())(args));
+    onMockCall((mock, args) => {
+      const name = mock.getMockName();
+
+      // TODO: Make this a configurable API in 8.2
+      if (
+        !/^next\/.*::/.test(name) ||
+        [
+          'next/router::useRouter()',
+          'next/navigation::useRouter()',
+          'next/navigation::redirect',
+          'next/cache::',
+          'next/headers::cookies().set',
+          'next/headers::cookies().delete',
+          'next/headers::headers().set',
+          'next/headers::headers().delete',
+        ].some((prefix) => name.startsWith(prefix))
+      ) {
+        action(name)(args);
+      }
+    });
     subscribed = true;
   }
 };

code/addons/actions/template/stories/spies.stories.ts

@@ -1,24 +1,27 @@
 import { global as globalThis } from '@storybook/global';
 import { spyOn } from '@storybook/test';
 
-export default {
+const meta = {
   component: globalThis.Components.Button,
-  loaders() {
+  beforeEach() {
     spyOn(console, 'log').mockName('console.log');
-  },
-  args: {
-    label: 'Button',
-  },
-  parameters: {
-    chromatic: { disable: true },
+    console.log('first');
   },
 };
 
+export default meta;
+
 export const ShowSpyOnInActions = {
+  parameters: {
+    chromatic: { disable: true },
+  },
+  beforeEach() {
+    console.log('second');
+  },
   args: {
+    label: 'Button',
     onClick: () => {
-      console.log('first');
-      console.log('second');
+      console.log('third');
     },
   },
 };

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.1.0-alpha.7",
+  "version": "8.1.0-alpha.8",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.1.0-alpha.7",
+  "version": "8.1.0-alpha.8",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",
@@ -52,13 +52,15 @@
   },
   "dependencies": {
     "@storybook/blocks": "workspace:*",
+    "dequal": "^2.0.2",
     "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/core-common": "workspace:*",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/preview-api": "workspace:*",