Merge branch 'kasper/csf-factories' into yann/csf-factories-docs-codemod

.nvmrc

@@ -1 +1,2 @@
-22.6.0
+22.13.1
+

.yarnrc.yml

@@ -8,4 +8,4 @@ nodeLinker: node-modules
 
 npmPublishAccess: public
 
-yarnPath: .yarn/releases/yarn-4.3.0.cjs
+yarnPath: .yarn/releases/yarn-4.6.0.cjs

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 8.5.2
+
+- Addon Test: Support Vitest 3 browser.test.instances field - [#30309](https://github.com/storybookjs/storybook/pull/30309), thanks @valentinpalkovic!
+- CLI: Corrected Next.js createScript for pnpm. - [#30304](https://github.com/storybookjs/storybook/pull/30304), thanks @zhyd1997!
+
 ## 8.5.1
 
 - Addon Test: Replace `interaction test` -> `component test` - [#30333](https://github.com/storybookjs/storybook/pull/30333), thanks @kylegach!

CHANGELOG.prerelease.md

@@ -1,3 +1,9 @@
+## 8.6.0-alpha.2
+
+- Addon Test: Support Vitest 3 browser.test.instances field - [#30309](https://github.com/storybookjs/storybook/pull/30309), thanks @valentinpalkovic!
+- Bun: Add support for text lock file - [#30160](https://github.com/storybookjs/storybook/pull/30160), thanks @Arctomachine!
+- CLI: Corrected Next.js createScript for pnpm. - [#30304](https://github.com/storybookjs/storybook/pull/30304), thanks @zhyd1997!
+
 ## 8.6.0-alpha.1
 
 - Addon Test: Replace `interaction test` -> `component test` - [#30333](https://github.com/storybookjs/storybook/pull/30333), thanks @kylegach!

MIGRATION.md

@@ -433,7 +433,7 @@
 
 Storybook now supports [Angular's experimental zoneless mode](https://angular.dev/guide/experimental/zoneless). This mode is intended to improve performance by removing Angular's zone.js dependency. To enable zoneless mode in your Angular Storybook, set the `experimentalZoneless` config in your `angular.json` file:
 
-````diff
+```diff
 {
   "projects": {
     "your-project": {

code/.storybook/preview.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/namespace */
 import * as React from 'react';
 import { Fragment, useEffect } from 'react';
 
@@ -23,12 +22,11 @@ import { definePreview } from '@storybook/react';
 // TODO add empty preview
 // import * as storysource from '@storybook/addon-storysource';
 // import * as designs from '@storybook/addon-designs/preview';
-// import * as test from '@storybook/experimental-addon-test/preview';
-import * as a11y from '@storybook/addon-a11y/preview';
-// @ts-expect-error Must be typed
-import * as essentials from '@storybook/addon-essentials/entry-preview';
-// @ts-expect-error Must be typed
-import * as addonThemes from '@storybook/addon-themes/preview';
+import addonTest from '@storybook/experimental-addon-test';
+
+import addonA11y from '@storybook/addon-a11y';
+import addonEssentials from '@storybook/addon-essentials';
+import addonThemes from '@storybook/addon-themes';
 
 import * as addonsPreview from '../addons/toolbars/template/stories/preview';
 import * as templatePreview from '../core/template/stories/preview';
@@ -376,7 +374,14 @@ const parameters = {
 };
 
 export const config = definePreview({
-  addons: [addonThemes, essentials, a11y, addonsPreview, templatePreview],
+  addons: [
+    addonThemes(),
+    addonEssentials(),
+    addonA11y(),
+    addonTest(),
+    addonsPreview,
+    templatePreview,
+  ],
   parameters,
   decorators,
   loaders,

code/.yarnrc.yml

@@ -22,7 +22,6 @@ plugins:
   - path: ../.yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
     spec: '@yarnpkg/plugin-workspace-tools'
 
-# See https://github.com/nrwl/nx/issues/22177
 supportedArchitectures:
   cpu:
     - current
@@ -36,6 +35,4 @@ supportedArchitectures:
 unsafeHttpWhitelist:
   - localhost
 
-yarnPath: ../.yarn/releases/yarn-4.3.0.cjs
-# Sometimes you get a "The remote archive doesn't match the expected checksum" error, uncommenting this line will fix it
-# checksumBehavior: 'update'
+yarnPath: .yarn/releases/yarn-4.6.0.cjs

code/addons/a11y/package.json

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

code/addons/a11y/src/components/VisionSimulator.tsx

@@ -42,13 +42,13 @@ const getFilter = (filterName: string) => {
   return `url('#${filterName}')`;
 };
 
-const Hidden = styled.div(() => ({
+const Hidden = styled.div({
   '&, & svg': {
     position: 'absolute',
     width: 0,
     height: 0,
   },
-}));
+});
 
 const ColorIcon = styled.span<{ filter: string }>(
   {

code/addons/a11y/src/index.ts

@@ -1,2 +1,8 @@
+import { definePreview } from 'storybook/internal/preview-api';
+
+import * as addonAnnotations from './preview';
+
 export { PARAM_KEY } from './constants';
 export * from './params';
+
+export default () => definePreview(addonAnnotations);

code/addons/actions/package.json

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

code/addons/actions/src/index.ts

@@ -1,3 +1,9 @@
+import { definePreview } from 'storybook/internal/preview-api';
+
+import * as addonAnnotations from './preview';
+
 export * from './constants';
 export * from './models';
 export * from './runtime';
+
+export default () => definePreview(addonAnnotations);

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.6.0-alpha.1",
+  "version": "8.6.0-alpha.2",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
@@ -43,6 +43,16 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "preview": [
+        "dist/preview.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist/**/*",
     "README.md",

code/addons/backgrounds/src/decorator.ts

@@ -1,9 +1,5 @@
 import { useEffect } from 'storybook/internal/preview-api';
-import type {
-  Renderer,
-  StoryContext,
-  PartialStoryFn as StoryFunction,
-} from 'storybook/internal/types';
+import type { DecoratorFunction } from 'storybook/internal/types';
 
 import { PARAM_KEY as KEY } from './constants';
 import { DEFAULT_BACKGROUNDS } from './defaults';
@@ -21,10 +17,7 @@ const GRID_SELECTOR_BASE = 'addon-backgrounds-grid';
 
 const transitionStyle = isReduceMotionEnabled() ? '' : 'transition: background-color 0.3s;';
 
-export const withBackgroundAndGrid = (
-  StoryFn: StoryFunction<Renderer>,
-  context: StoryContext<Renderer>
-) => {
+export const withBackgroundAndGrid: DecoratorFunction = (StoryFn, context) => {
   const { globals, parameters, viewMode, id } = context;
   const {
     options = DEFAULT_BACKGROUNDS,

code/addons/backgrounds/src/index.ts

@@ -1,2 +1,5 @@
-// make it work with --isolatedModules
-export default {};
+import { definePreview } from 'storybook/internal/preview-api';
+
+import * as addonAnnotations from './preview';
+
+export default () => definePreview(addonAnnotations);

code/addons/backgrounds/src/legacy/withBackgroundLegacy.ts

@@ -1,18 +1,11 @@
 import { useEffect, useMemo } from 'storybook/internal/preview-api';
-import type {
-  Renderer,
-  StoryContext,
-  PartialStoryFn as StoryFunction,
-} from 'storybook/internal/types';
+import type { DecoratorFunction } from 'storybook/internal/types';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import { addBackgroundStyle, clearStyles, isReduceMotionEnabled } from '../utils';
 import { getBackgroundColorByName } from './getBackgroundColorByName';
 
-export const withBackground = (
-  StoryFn: StoryFunction<Renderer>,
-  context: StoryContext<Renderer>
-) => {
+export const withBackground: DecoratorFunction = (StoryFn, context) => {
   const { globals, parameters } = context;
   const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value;
   const backgroundsConfig = parameters[BACKGROUNDS_PARAM_KEY];

code/addons/backgrounds/src/legacy/withGridLegacy.ts

@@ -1,14 +1,10 @@
 import { useEffect, useMemo } from 'storybook/internal/preview-api';
-import type {
-  Renderer,
-  StoryContext,
-  PartialStoryFn as StoryFunction,
-} from 'storybook/internal/types';
+import type { DecoratorFunction } from 'storybook/internal/types';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import { addGridStyle, clearStyles } from '../utils';
 
-export const withGrid = (StoryFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => {
+export const withGrid: DecoratorFunction = (StoryFn, context) => {
   const { globals, parameters } = context;
   const gridParameters = parameters[BACKGROUNDS_PARAM_KEY].grid;
   const isActive = globals[BACKGROUNDS_PARAM_KEY]?.grid === true && gridParameters.disable !== true;

code/addons/backgrounds/src/preview.ts

@@ -1,13 +1,11 @@
-import type { Addon_DecoratorFunction } from 'storybook/internal/types';
-
 import { PARAM_KEY as KEY } from './constants';
 import { withBackgroundAndGrid } from './decorator';
 import { DEFAULT_BACKGROUNDS } from './defaults';
 import { withBackground } from './legacy/withBackgroundLegacy';
 import { withGrid } from './legacy/withGridLegacy';
 import type { Config, GlobalState } from './types';
 
-export const decorators: Addon_DecoratorFunction[] = globalThis.FEATURES?.backgroundsStoryGlobals
+export const decorators = globalThis.FEATURES?.backgroundsStoryGlobals
   ? [withBackgroundAndGrid]
   : [withGrid, withBackground];
 

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.6.0-alpha.1",
+  "version": "8.6.0-alpha.2",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

code/addons/controls/src/index.ts

@@ -1 +1,5 @@
+import { definePreview } from 'storybook/internal/preview-api';
+
 export { PARAM_KEY } from './constants';
+
+export default () => definePreview({});

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.6.0-alpha.1",
+  "version": "8.6.0-alpha.2",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -81,6 +81,16 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "preview": [
+        "dist/preview.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist/**/*",
     "angular/**/*",

code/addons/docs/src/index.ts

@@ -1,2 +1,8 @@
+import { definePreview } from 'storybook/internal/preview-api';
+
+import * as addonAnnotations from './preview';
+
 export * from '@storybook/blocks';
 export { DocsRenderer } from './DocsRenderer';
+
+export default () => definePreview(addonAnnotations);

code/addons/essentials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.6.0-alpha.1",
+  "version": "8.6.0-alpha.2",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",
@@ -27,7 +27,7 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
-    "./entry-preview": {
+    "./preview": {
       "types": "./dist/preview.d.ts",
       "import": "./dist/preview.mjs",
       "require": "./dist/preview.js"
@@ -77,11 +77,22 @@
       "import": "./dist/viewport/preview.mjs",
       "require": "./dist/viewport/preview.js"
     },
+    "./preset": "./dist/preset.js",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "preview": [
+        "dist/preview.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -116,10 +127,13 @@
   },
   "bundler": {
     "nodeEntries": [
-      "./src/index.ts",
+      "./src/preset.ts",
       "./src/docs/preset.ts",
       "./src/docs/mdx-react-shim.ts"
     ],
+    "exportEntries": [
+      "./src/index.ts"
+    ],
     "entries": [
       "./src/docs/manager.ts"
     ],

code/addons/essentials/src/backgrounds/preview.ts

@@ -1,2 +1 @@
-// @ts-expect-error (no types needed for this)
 export * from '@storybook/addon-backgrounds/preview';

code/addons/essentials/src/highlight/preview.ts

@@ -1,2 +1 @@
-// @ts-expect-error (no types needed for this)
 export * from '@storybook/addon-highlight/preview';