Merge branch 'cli-versioned-upgrade' of github.com:storybookjs/storyb…

…ook into cli-versioned-upgrade

MIGRATION.md

@@ -46,6 +46,7 @@
     - [Methods and properties from PreviewAPI](#methods-and-properties-from-previewapi)
     - [Removals in @storybook/types](#removals-in-storybooktypes)
     - [--use-npm flag in storybook CLI](#--use-npm-flag-in-storybook-cli)
+    - [hideNoControlsWarning parameter from addon controls](#hidenocontrolswarning-parameter-from-addon-controls)
     - [`setGlobalConfig` from `@storybook/react`](#setglobalconfig-from-storybookreact)
     - [StorybookViteConfig type from @storybook/builder-vite](#storybookviteconfig-type-from-storybookbuilder-vite)
     - [props from WithTooltipComponent from @storybook/components](#props-from-withtooltipcomponent-from-storybookcomponents)
@@ -56,7 +57,10 @@
     - [storyIndexers](#storyindexers)
     - [Deprecated docs parameters](#deprecated-docs-parameters)
     - [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)
     - [`Primary` Doc block properties](#primary-doc-block-properties)
     - [`createChannel` from `@storybook/postmessage` and  `@storybook/channel-websocket`](#createchannel-from-storybookpostmessage-and--storybookchannel-websocket)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
@@ -70,6 +74,7 @@
     - [`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)
 - [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)
@@ -831,6 +836,10 @@ The following exports from `@storybook/types` are now removed:
 
 The `--use-npm` is now removed. Use `--package-manager=npm` instead. [More info here](#cli-option---use-npm-deprecated).
 
+#### hideNoControlsWarning parameter from addon controls
+
+The `hideNoControlsWarning` parameter is now removed. [More info here](#addon-controls-hidenocontrolswarning-parameter-is-deprecated).
+
 #### `setGlobalConfig` from `@storybook/react`
 
 The `setGlobalConfig` (used for reusing stories in your tests) is now removed in favor of `setProjectAnnotations`.
@@ -924,6 +933,12 @@ More info [here](#autodocs-changes) and [here](#source-block).
 
 `children`, `markdown` and `type` are now removed in favor of the `of` property. [More info](#doc-blocks).
 
+#### Story Doc block properties
+
+The `story` prop is now removed in favor of the `of` property. [More info](#doc-blocks).
+
+Additionally, given that CSF in MDX is not supported anymore, the following props are also removed: `args`, `argTypes`, `decorators`, `loaders`, `name`, `parameters`, `play`, `render`, and `storyName`. [More info](#dropping-support-for-storiesmdx-csf-in-mdx-format-and-mdx1-support).
+
 #### Manager API expandAll and collapseAll methods
 
 The `collapseAll` and `expandAll` APIs (possibly used by addons) are now removed. Please emit events for these actions instead:
@@ -937,6 +952,22 @@ api.collapseAll() // becomes api.emit(STORIES_COLLAPSE_ALL)
 api.expandAll() // becomes api.emit(STORIES_EXPAND_ALL)
 ```
 
+#### Source Doc block properties
+
+`id` and `ids` are now removed in favor of the `of` property. [More info](#doc-blocks).
+
+#### Canvas Doc block properties
+
+The following properties were removed from the Canvas Doc block:
+
+- children
+- isColumn
+- columns
+- withSource
+- mdxSource
+
+[More info](#doc-blocks).
+
 #### `Primary` Doc block properties
 
 The `name` prop is now removed in favor of the `of` property. [More info](#doc-blocks).
@@ -1127,6 +1158,18 @@ The API: `addons.addPanel()` is now deprecated, and will be removed in 8.0. Plea
 
 The `render` method can now be a `React.FunctionComponent` (without the `children` prop). Storybook will now render it, rather than calling it as a function.
 
+#### Addon-controls hideNoControlsWarning parameter is deprecated
+
+The `hideNoControlsWarning` parameter is now unused and deprecated, given that the UI of the Controls addon changed in a way that does not display that message anymore.
+
+```ts
+export const Primary = {
+  parameters: {
+    controls: { hideNoControlsWarning: true }, // this parameter is now unnecessary
+  },
+};
+```
+
 ## From version 6.5.x to 7.0.0
 
 A number of these changes can be made automatically by the Storybook CLI. To take advantage of these "automigrations", run `npx storybook@latest upgrade --prerelease` or `pnpx dlx storybook@latest upgrade --prerelease`.

code/addons/controls/src/ControlsPanel.tsx

@@ -16,9 +16,6 @@ interface ControlsParameters {
   sort?: SortType;
   expanded?: boolean;
   presetColors?: PresetColor[];
-
-  /** @deprecated No longer used, will be removed in Storybook 8.0 */
-  hideNoControlsWarning?: boolean;
 }
 
 export const ControlsPanel: FC = () => {

code/addons/docs/docs/props-tables.md

@@ -12,7 +12,6 @@ Storybook Docs automatically generates props tables for components in supported
 - [Controls](#controls)
 - [Customization](#customization)
   - [Customizing ArgTypes](#customizing-argtypes)
-  - [Custom ArgTypes in MDX](#custom-argtypes-in-mdx)
 - [Reporting a bug](#reporting-a-bug)
 - [Known limitations](#known-limitations)
 - [More resources](#more-resources)
@@ -60,7 +59,7 @@ Starting in SB 6.0, the `ArgsTable` block has built-in `Controls` (formerly know
 
 <br/>
 
-These controls are implemented appear automatically in the props table when your story accepts [Storybook Args](https://storybook.js.org/docs/react/api/csf#args-story-inputs) as its input. This is done slightly differently depending on whether you're using `DocsPage` or `MDX`.
+These controls are implemented to appear automatically in the props table when your story accepts [Storybook Args](https://storybook.js.org/docs/react/api/csf#args-story-inputs) as its input. This is done slightly differently depending on whether you're using `DocsPage` or `MDX`.
 
 **DocsPage.** In [DocsPage](./docspage.md), simply write your story to consume args and the auto-generated props table will display controls in the right-most column:
 
@@ -202,32 +201,6 @@ Here are the possible customizations for the rest of the prop table:
 | `table.defaultValue.detail`  | A longer version of the default value (if it's a complex value)                                      |
 | `control`                    | See [`addon-controls` README](https://storybook.js.org/docs/react/essentials/controls#configuration) |
 
-### Custom ArgTypes in MDX
-
-To do the equivalent of the above customization [in MDX](./mdx.md), use the following.
-
-Overriding at the component level:
-
-```jsx
-<Meta
-  title="MyComponent"
-  component={MyComponent}
-  argTypes={{
-    label: { name: 'label' /* ... */ },
-  }}
-/>
-```
-
-And at the story level:
-
-```jsx
-<Story name="some story" argTypes={{
-  label: { name: 'label', ... }
-}}>
-  {/* story contents */}
-</Story>
-```
-
 ## Reporting a bug
 
 Extracting component properties from source is a tricky problem with thousands of corner cases. We've designed this package and its tests to accurately isolate problems, since the cause could either be in this package or (likely) one of the packages it depends on.

code/addons/gfm/package.json

@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@storybook/node-logger": "workspace:*",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {

code/addons/gfm/src/index.ts

@@ -11,7 +11,7 @@ export const mdxLoaderOptions = async (config: any) => {
 };
 
 deprecate(dedent`
-  The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Storybook 7.0; and will likely be removed in a future version.
+  The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Storybook 8.0; and will likely be removed in a future version.
   It's recommended you read this document:
   https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm
 

code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts

@@ -2,14 +2,11 @@ import * as webpackReal from 'webpack';
 import { logger } from '@storybook/node-logger';
 import type { Options } from '@storybook/types';
 import type { Configuration } from 'webpack';
-import deprecate from 'util-deprecate';
-import { dedent } from 'ts-dedent';
 import { loadCustomWebpackConfig } from '@storybook/core-webpack';
 import { createDefaultWebpackConfig } from '../preview/base-webpack.config';
 
 export async function webpack(config: Configuration, options: Options) {
-  // @ts-expect-error (Converted from ts-ignore)
-  const { configDir, configType, presets, webpackConfig } = options;
+  const { configDir, configType, presets } = options;
 
   const coreOptions = await presets.apply('core');
 
@@ -20,16 +17,6 @@ export async function webpack(config: Configuration, options: Options) {
 
   const finalDefaultConfig = await presets.apply('webpackFinal', defaultConfig, options);
 
-  // through standalone webpackConfig option
-  if (webpackConfig) {
-    return deprecate(
-      webpackConfig,
-      dedent`
-      You've provided a webpack config directly in CallOptions, this is not recommended. Please use presets instead. This feature will be removed in 7.0
-      `
-    )(finalDefaultConfig);
-  }
-
   // Check whether user has a custom webpack config file and
   // return the (extended) base configuration if it's not available.
   const customConfig = loadCustomWebpackConfig(configDir);

code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -215,6 +215,7 @@ export default async (
       rules: [
         {
           test: /\.stories\.([tj])sx?$|(stories|story)\.mdx$/,
+          exclude: /node_modules/,
           enforce: 'post',
           use: [
             {

code/frameworks/angular/src/client/public-types.ts

@@ -37,17 +37,6 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<AngularRenderer, TransformE
  */
 export type StoryObj<TArgs = Args> = StoryAnnotations<AngularRenderer, TransformEventType<TArgs>>;
 
-/**
- * @deprecated Use `StoryFn` instead.
- * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
- * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
- *
- * Story function that represents a CSFv2 component example.
- *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- */
-export type Story<TArgs = Args> = StoryFn<TArgs>;
-
 export type Decorator<TArgs = StrictArgs> = DecoratorFunction<AngularRenderer, TArgs>;
 export type Loader<TArgs = StrictArgs> = LoaderFunction<AngularRenderer, TArgs>;
 export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<AngularRenderer, TArgs>;

code/lib/codemod/package.json

@@ -71,15 +71,15 @@
   "devDependencies": {
     "@types/jscodeshift": "^0.11.10",
     "ansi-regex": "^5.0.1",
-    "mdast-util-mdx-jsx": "^2.1.2",
-    "mdast-util-mdxjs-esm": "^1.3.1",
-    "remark": "^14.0.2",
-    "remark-mdx": "^2.3.0",
+    "mdast-util-mdx-jsx": "^3.0.0",
+    "mdast-util-mdxjs-esm": "^2.0.1",
+    "remark": "^15.0.1",
+    "remark-mdx": "^3.0.0",
     "ts-dedent": "^2.2.0",
     "typescript": "^5.3.2",
-    "unist-util-is": "^5.2.0",
-    "unist-util-select": "^4.0.3",
-    "unist-util-visit": "^4.1.2",
+    "unist-util-is": "^6.0.0",
+    "unist-util-select": "^5.1.0",
+    "unist-util-visit": "^5.0.0",
     "util": "^0.12.4",
     "vfile": "^5.3.7"
   },

code/lib/codemod/src/transforms/mdx-to-csf.ts

@@ -2,7 +2,6 @@
 import type { FileInfo } from 'jscodeshift';
 import { babelParse, babelParseExpression } from '@storybook/csf-tools';
 import { remark } from 'remark';
-import type { Root } from 'remark-mdx';
 import remarkMdx from 'remark-mdx';
 import { SKIP, visit } from 'unist-util-visit';
 import { is } from 'unist-util-is';
@@ -79,11 +78,8 @@ export function transform(source: string, baseName: string): [string, string] {
 
   const file = getEsmAst(root);
 
-  // @ts-ignore
-  visit(
-    root,
-    ['mdxJsxFlowElement', 'mdxJsxTextElement'],
-    (node: MdxJsxFlowElement | MdxJsxTextElement, index, parent) => {
+  visit(root, ['mdxJsxFlowElement', 'mdxJsxTextElement'], (node, index, parent) => {
+    if (node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement') {
       if (is(node, { name: 'Meta' })) {
         metaAttributes.push(...node.attributes);
         node.attributes = [
@@ -136,7 +132,6 @@ export function transform(source: string, baseName: string): [string, string] {
             value: `/* ${nodeString} is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */`,
           };
           storiesMap.set(idAttribute.value as string, { type: 'id' });
-          // @ts-expect-error issue with mdast types
           parent?.children.splice(index as number, 0, newNode);
           // current index is the new comment, and index + 1 is current node
           // SKIP traversing current node, and continue with the node after that
@@ -168,9 +163,9 @@ export function transform(source: string, baseName: string): [string, string] {
           return [SKIP, index];
         }
       }
-      return undefined;
     }
-  );
+    return undefined;
+  });
 
   const metaProperties = metaAttributes.flatMap((attribute) => {
     if (attribute.type === 'mdxJsxAttribute') {
@@ -309,10 +304,9 @@ export function transform(source: string, baseName: string): [string, string] {
   return [newMdx, output];
 }
 
-function getEsmAst(root: Root) {
+function getEsmAst(root: ReturnType<typeof mdxProcessor.parse>) {
   const esm: string[] = [];
-  // @ts-expect-error (not valid BuildVisitor)
-  visit(root, ['mdxjsEsm'], (node: MdxjsEsm) => {
+  visit(root, 'mdxjsEsm', (node) => {
     esm.push(node.value);
   });
   const esmSource = `${esm.join('\n\n')}`;
@@ -325,10 +319,13 @@ function getEsmAst(root: Root) {
   return file;
 }
 
-function addStoriesImport(root: Root, baseName: string, storyNamespaceName: string): void {
+function addStoriesImport(
+  root: ReturnType<typeof mdxProcessor.parse>,
+  baseName: string,
+  storyNamespaceName: string
+): void {
   let found = false;
-  // @ts-expect-error (not valid BuildVisitor)
-  visit(root, ['mdxjsEsm'], (node: MdxjsEsm) => {
+  visit(root, 'mdxjsEsm', (node) => {
     if (!found) {
       node.value += `\nimport * as ${storyNamespaceName} from './${baseName}.stories';`;
       found = true;

code/lib/core-webpack/src/to-importFn.ts

@@ -4,6 +4,20 @@ import { globToRegexp } from '@storybook/core-common';
 
 import { importPipeline } from './importPipeline';
 
+function adjustRegexToExcludeNodeModules(originalRegex: RegExp) {
+  const originalRegexString = originalRegex.source;
+  const startsWithCaret = originalRegexString.startsWith('^');
+  const excludeNodeModulesPattern = startsWithCaret ? '(?!.*node_modules)' : '^(?!.*node_modules)';
+
+  // Combine the new exclusion pattern with the original regex
+  const adjustedRegexString = startsWithCaret
+    ? `^${excludeNodeModulesPattern}${originalRegexString.substring(1)}`
+    : excludeNodeModulesPattern + originalRegexString;
+
+  // Create and return the new regex
+  return new RegExp(adjustedRegexString);
+}
+
 export function webpackIncludeRegexp(specifier: NormalizedStoriesSpecifier) {
   const { directory, files } = specifier;
 
@@ -17,7 +31,9 @@ export function webpackIncludeRegexp(specifier: NormalizedStoriesSpecifier) {
   const webpackIncludeGlob = ['.', '..'].includes(directory)
     ? files
     : `${directoryWithoutLeadingDots}/${files}`;
-  const webpackIncludeRegexpWithCaret = globToRegexp(webpackIncludeGlob);
+  const webpackIncludeRegexpWithCaret = webpackIncludeGlob.includes('node_modules')
+    ? globToRegexp(webpackIncludeGlob)
+    : adjustRegexToExcludeNodeModules(globToRegexp(webpackIncludeGlob));
   // picomatch is creating an exact match, but we are only matching the end of the filename
   return new RegExp(webpackIncludeRegexpWithCaret.source.replace(/^\^/, ''));
 }

code/lib/csf-plugin/src/index.ts

@@ -5,7 +5,8 @@ import type { EnrichCsfOptions } from '@storybook/csf-tools';
 
 export type CsfPluginOptions = EnrichCsfOptions;
 
-const STORIES_REGEX = /\.(story|stories)\.[tj]sx?$/;
+// Ignore node_modules
+const STORIES_REGEX = /(?<!node_modules.*)\.(story|stories)\.[tj]sx?$/;
 
 const logger = console;