Release: Prerelease 8.2.0-alpha.1

.github/workflows/publish.yml

@@ -154,18 +154,6 @@ jobs:
           git merge ${{ github.ref_name }}
           git push origin ${{ steps.target.outputs.target }}
 
-      - name: Ensure `next` is a minor version ahead of `main`
-        if: steps.target.outputs.target == 'main'
-        run: |
-          git checkout next
-          git pull
-
-          yarn release:ensure-next-ahead --main-version "${{ steps.version.outputs.current-version }}"
-
-          git add ..
-          git diff --staged --quiet || git commit -m "Bump next to be one minor ahead of main [skip ci]"
-          git push origin next
-
       - name: Sync CHANGELOG.md from `main` to `next`
         if: steps.target.outputs.target == 'main'
         working-directory: .

CHANGELOG.prerelease.md

@@ -1,3 +1,16 @@
+## 8.2.0-alpha.1
+
+- CLI: Add optional `--dev` and `--no-dev` options to `storybook init` CLI - [#26918](https://github.com/storybookjs/storybook/pull/26918), thanks @fastfrwrd!
+- CLI: Include `@storybook/addon-svelte-csf` when initializing new projects - [#27070](https://github.com/storybookjs/storybook/pull/27070), thanks @benmccann!
+- Dependency: Upgrade `webpack-virtual-modules` to 0.6.0 - [#27102](https://github.com/storybookjs/storybook/pull/27102), thanks @fyodorovandrei!
+- Dependency: bump `markdown-to-jsx` to v7.4.5 - [#26694](https://github.com/storybookjs/storybook/pull/26694), thanks @xyy94813!
+- Docgen: Only add react-docgen info when a component is defined in the file - [#26967](https://github.com/storybookjs/storybook/pull/26967), thanks @glenjamin!
+- Docs: Fix MDX Stories block tag-filtering behavior - [#27144](https://github.com/storybookjs/storybook/pull/27144), thanks @shilman!
+- Docs: Fix Subtitle block when no `of` prop passed - [#27147](https://github.com/storybookjs/storybook/pull/27147), thanks @JReinhold!
+- Next.js: Add typing for NextImage to main framework options type - [#27105](https://github.com/storybookjs/storybook/pull/27105), thanks @valentinpalkovic!
+- Next.js: Avoid conflicts with the raw loader - [#27093](https://github.com/storybookjs/storybook/pull/27093), thanks @seanparmelee!
+- Types: Fix typing for main.framework/builder fields - [#27088](https://github.com/storybookjs/storybook/pull/27088), thanks @valentinpalkovic!
+
 ## 8.2.0-alpha.0
 
 

code/addons/docs/docs/docspage.md

@@ -165,10 +165,10 @@ You can override this default behavior in `.storybook/preview.js` (or in any of
 ```js
 export const parameters = {
   docs: {
-    source: {
-      state: 'open',
-    },
-  },
+    canvas: {
+      sourceState: 'shown'
+    }
+  }
 };
 ```
 

code/addons/docs/src/preview.ts

@@ -22,9 +22,7 @@ export const parameters: any = {
       filter: (story: PreparedStory) => {
         const tags = story.tags || [];
         return (
-          tags.includes('autodocs') &&
-          tags.filter((tag) => excludeTags[tag]).length === 0 &&
-          !story.parameters.docs?.disable
+          tags.filter((tag) => excludeTags[tag]).length === 0 && !story.parameters.docs?.disable
         );
       },
     },

code/builders/builder-webpack5/package.json

@@ -96,13 +96,12 @@
     "webpack": "5",
     "webpack-dev-middleware": "^6.1.2",
     "webpack-hot-middleware": "^2.25.1",
-    "webpack-virtual-modules": "^0.5.0"
+    "webpack-virtual-modules": "^0.6.0"
   },
   "devDependencies": {
     "@types/pretty-hrtime": "^1.0.0",
     "@types/terser-webpack-plugin": "^5.2.0",
     "@types/webpack-hot-middleware": "^2.25.6",
-    "@types/webpack-virtual-modules": "^0.1.1",
     "pretty-hrtime": "^1.0.3",
     "slash": "^5.0.0",
     "typescript": "^5.3.2"

code/frameworks/angular/src/types.ts

@@ -7,9 +7,10 @@ import {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import { CompatibleString } from '@storybook/types';
 
-type FrameworkName = '@storybook/angular';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/angular'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = AngularOptions & {
   builder?: BuilderOptions;

code/frameworks/ember/src/types.ts

@@ -7,9 +7,10 @@ import type {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';
 
-type FrameworkName = '@storybook/ember-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/ember-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;

code/frameworks/html-vite/package.json

@@ -51,6 +51,7 @@
     "@storybook/core-server": "workspace:*",
     "@storybook/html": "workspace:*",
     "@storybook/node-logger": "workspace:*",
+    "@storybook/types": "workspace:*",
     "magic-string": "^0.30.0"
   },
   "devDependencies": {

code/frameworks/html-vite/src/types.ts

@@ -1,8 +1,8 @@
-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { StorybookConfig as StorybookConfigBase, CompatibleString } from '@storybook/types';
 import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
 
-type FrameworkName = '@storybook/html-vite';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/html-vite'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;

code/frameworks/html-webpack5/package.json

@@ -52,6 +52,7 @@
     "@storybook/global": "^5.0.0",
     "@storybook/html": "workspace:*",
     "@storybook/preset-html-webpack": "workspace:*",
+    "@storybook/types": "workspace:*",
     "@types/node": "^18.0.0"
   },
   "devDependencies": {

code/frameworks/html-webpack5/src/types.ts

@@ -7,9 +7,10 @@ import type {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';
 
-type FrameworkName = '@storybook/html-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/html-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;

code/frameworks/nextjs/src/swc/loader.ts

@@ -4,9 +4,10 @@ import type { Options } from '@storybook/types';
 import type { NextConfig } from 'next';
 import path from 'path';
 import loadJsConfig from 'next/dist/build/load-jsconfig';
+import type { Configuration as WebpackConfig } from 'webpack';
 
 export const configureSWCLoader = async (
-  baseConfig: any,
+  baseConfig: WebpackConfig,
   options: Options,
   nextConfig: NextConfig
 ) => {
@@ -18,33 +19,38 @@ export const configureSWCLoader = async (
 
   const { jsConfig } = await loadJsConfig(dir, nextConfig as any);
 
-  baseConfig.module.rules = [
-    ...baseConfig.module.rules,
-    {
-      test: /\.((c|m)?(j|t)sx?)$/,
-      include: [getProjectRoot()],
-      exclude: [/(node_modules)/, ...Object.keys(virtualModules)],
-      enforce: 'post',
-      use: {
-        // we use our own patch because we need to remove tracing from the original code
-        // which is not possible otherwise
-        loader: require.resolve('./swc/next-swc-loader-patch.js'),
-        options: {
-          isServer: false,
-          rootDir: dir,
-          pagesDir: `${dir}/pages`,
-          appDir: `${dir}/apps`,
-          hasReactRefresh: isDevelopment,
-          jsConfig,
-          nextConfig,
-          supportedBrowsers: require('next/dist/build/utils').getSupportedBrowsers(
-            dir,
-            isDevelopment
-          ),
-          swcCacheDir: path.join(dir, nextConfig?.distDir ?? '.next', 'cache', 'swc'),
-          bundleTarget: 'default',
-        },
+  const rawRule = baseConfig.module?.rules?.find(
+    (rule) => typeof rule === 'object' && rule?.resourceQuery?.toString() === '/raw/'
+  );
+
+  if (rawRule && typeof rawRule === 'object') {
+    rawRule.test = /^(?!__barrel_optimize__)/;
+  }
+
+  baseConfig.module?.rules?.push({
+    test: /\.((c|m)?(j|t)sx?)$/,
+    include: [getProjectRoot()],
+    exclude: [/(node_modules)/, ...Object.keys(virtualModules)],
+    enforce: 'post',
+    use: {
+      // we use our own patch because we need to remove tracing from the original code
+      // which is not possible otherwise
+      loader: require.resolve('./swc/next-swc-loader-patch.js'),
+      options: {
+        isServer: false,
+        rootDir: dir,
+        pagesDir: `${dir}/pages`,
+        appDir: `${dir}/apps`,
+        hasReactRefresh: isDevelopment,
+        jsConfig,
+        nextConfig,
+        supportedBrowsers: require('next/dist/build/utils').getSupportedBrowsers(
+          dir,
+          isDevelopment
+        ),
+        swcCacheDir: path.join(dir, nextConfig?.distDir ?? '.next', 'cache', 'swc'),
+        bundleTarget: 'default',
       },
     },
-  ];
+  });
 };

code/frameworks/nextjs/src/types.ts

@@ -8,13 +8,15 @@ import type {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';
+import type * as NextImage from 'next/image';
 
-type FrameworkName = '@storybook/nextjs';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/nextjs'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = ReactOptions & {
   nextConfigPath?: string;
-
+  image?: Partial<NextImage.ImageProps>;
   builder?: BuilderOptions;
 };
 

code/frameworks/preact-vite/package.json

@@ -48,7 +48,8 @@
   },
   "dependencies": {
     "@storybook/builder-vite": "workspace:*",
-    "@storybook/preact": "workspace:*"
+    "@storybook/preact": "workspace:*",
+    "@storybook/types": "workspace:*"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",

code/frameworks/preact-vite/src/types.ts

@@ -1,8 +1,8 @@
-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { CompatibleString, StorybookConfig as StorybookConfigBase } from '@storybook/types';
 import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
 
-type FrameworkName = '@storybook/preact-vite';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/preact-vite'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;

code/frameworks/preact-webpack5/package.json

@@ -51,6 +51,7 @@
     "@storybook/core-common": "workspace:*",
     "@storybook/preact": "workspace:*",
     "@storybook/preset-preact-webpack": "workspace:*",
+    "@storybook/types": "workspace:*",
     "@types/node": "^18.0.0"
   },
   "devDependencies": {

code/frameworks/preact-webpack5/src/types.ts

@@ -7,9 +7,10 @@ import type {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';
 
-type FrameworkName = '@storybook/preact-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/preact-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;

code/frameworks/react-vite/package.json

@@ -52,6 +52,7 @@
     "@storybook/builder-vite": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/react": "workspace:*",
+    "@storybook/types": "workspace:*",
     "find-up": "^5.0.0",
     "magic-string": "^0.30.0",
     "react-docgen": "^7.0.0",

code/frameworks/react-vite/src/plugins/docgen-handlers/actualNameHandler.ts

@@ -15,6 +15,8 @@ import { utils } from 'react-docgen';
 const { getNameOrValue, isReactForwardRefCall } = utils;
 
 const actualNameHandler: Handler = function actualNameHandler(documentation, componentDefinition) {
+  documentation.set('definedInFile', componentDefinition.hub.file.opts.filename);
+
   if (
     (componentDefinition.isClassDeclaration() || componentDefinition.isFunctionDeclaration()) &&
     componentDefinition.has('id')

code/frameworks/react-vite/src/plugins/react-docgen.ts

@@ -20,7 +20,7 @@ import {
 } from './docgen-resolver';
 import { logger } from '@storybook/node-logger';
 
-type DocObj = Documentation & { actualName: string };
+type DocObj = Documentation & { actualName: string; definedInFile: string };
 
 // TODO: None of these are able to be overridden, so `default` is aspirational here.
 const defaultHandlers = Object.values(docgenHandlers).map((handler) => handler);
@@ -71,8 +71,8 @@ export async function reactDocgen({
         const s = new MagicString(src);
 
         docgenResults.forEach((info) => {
-          const { actualName, ...docgenInfo } = info;
-          if (actualName) {
+          const { actualName, definedInFile, ...docgenInfo } = info;
+          if (actualName && definedInFile == id) {
             const docNode = JSON.stringify(docgenInfo);
             s.append(`;${actualName}.__docgenInfo=${docNode}`);
           }

code/frameworks/react-vite/src/types.ts

@@ -1,12 +1,13 @@
 import type {
+  CompatibleString,
   StorybookConfig as StorybookConfigBase,
   TypescriptOptions as TypescriptOptionsBase,
 } from '@storybook/types';
 import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
 import type docgenTypescript from '@joshwooding/vite-plugin-react-docgen-typescript';
 
-type FrameworkName = '@storybook/react-vite';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/react-vite'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;

code/frameworks/react-webpack5/package.json

@@ -50,6 +50,7 @@
     "@storybook/builder-webpack5": "workspace:*",
     "@storybook/preset-react-webpack": "workspace:*",
     "@storybook/react": "workspace:*",
+    "@storybook/types": "workspace:*",
     "@types/node": "^18.0.0"
   },
   "peerDependencies": {

code/frameworks/react-webpack5/src/types.ts

@@ -8,9 +8,10 @@ import type {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';
 
-type FrameworkName = '@storybook/react-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/react-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = ReactOptions & {
   builder?: BuilderOptions;

code/frameworks/server-webpack5/package.json

@@ -51,6 +51,7 @@
     "@storybook/core-common": "workspace:*",
     "@storybook/preset-server-webpack": "workspace:*",
     "@storybook/server": "workspace:*",
+    "@storybook/types": "workspace:*",
     "@types/node": "^18.0.0"
   },
   "devDependencies": {

code/frameworks/server-webpack5/src/types.ts

@@ -7,9 +7,10 @@ import type {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';
 
-type FrameworkName = '@storybook/server-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/server-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;

code/frameworks/svelte-vite/package.json

@@ -50,6 +50,7 @@
     "@storybook/builder-vite": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/svelte": "workspace:*",
+    "@storybook/types": "workspace:*",
     "magic-string": "^0.30.0",
     "svelte-preprocess": "^5.1.1",
     "sveltedoc-parser": "^4.2.1",

code/frameworks/svelte-vite/src/types.ts

@@ -1,8 +1,8 @@
-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { CompatibleString, StorybookConfig as StorybookConfigBase } from '@storybook/types';
 import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
 
-type FrameworkName = '@storybook/svelte-vite';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/svelte-vite'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;