Merge branch 'next' of github.com:storybookjs/storybook into next

MIGRATION.md

@@ -543,6 +543,7 @@ In 7.0, frameworks also specify the builder to be used. For example, The current
 
 - `@storybook/angular`
 - `@storybook/html-webpack5`
+- `@storybook/nextjs`
 - `@storybook/preact-webpack5`
 - `@storybook/react-webpack5`
 - `@storybook/react-vite`

code/lib/cli/src/automigrate/fixes/mdx-1-to-2.ts

@@ -55,12 +55,10 @@ export const mdx1to2: Fix<Mdx1to2Options> = {
       We've found ${chalk.yellow(storiesMdxFiles.length)} '.stories.mdx' files in your project.
       
       Storybook has upgraded to MDX2 (https://mdxjs.com/blog/v2/), which contains breaking changes from V1.
-
       We can try to automatically upgrade your MDX files to MDX2 format using some common patterns.
       
-      For a full guide for how to manually upgrade your files, see the MDX2 migration guide:
-      
-      ${chalk.cyan('https://mdxjs.com/migrating/v2/#update-mdx-files')}
+      Some steps might require manual intervention. You can find a full guide for how to manually upgrade your files here:
+      ${chalk.cyan('https://storybook.js.org/docs/7.0/react/writing-docs/mdx#breaking-changes')}
     `;
   },
 

code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts

@@ -2,13 +2,7 @@
 
 import { global } from '@storybook/global';
 import { expect } from '@jest/globals';
-import type {
-  Renderer,
-  ArgsEnhancer,
-  PlayFunctionContext,
-  SBObjectType,
-  SBScalarType,
-} from '@storybook/types';
+import type { Renderer, ArgsEnhancer, PlayFunctionContext, SBScalarType } from '@storybook/types';
 import { addons, HooksContext } from '../../addons';
 
 import { NO_TARGET_NAME } from '../args';
@@ -32,20 +26,6 @@ const moduleExport = {};
 const stringType: SBScalarType = { name: 'string' };
 const numberType: SBScalarType = { name: 'number' };
 const booleanType: SBScalarType = { name: 'boolean' };
-const complexType: SBObjectType = {
-  name: 'object',
-  value: {
-    complex: {
-      name: 'object',
-      value: {
-        object: {
-          name: 'array',
-          value: { name: 'string' },
-        },
-      },
-    },
-  },
-};
 
 beforeEach(() => {
   global.FEATURES = { breakingChangesV7: true };
@@ -195,44 +175,6 @@ describe('prepareStory', () => {
       expect(initialArgs).toEqual({});
     });
 
-    it('are initialized to argTypes[x].defaultValue if unset', () => {
-      const { initialArgs } = prepareStory(
-        {
-          id,
-          name,
-          args: {
-            arg2: 3,
-            arg4: 'foo',
-            arg7: false,
-          },
-          argTypes: {
-            arg1: { name: 'arg1', type: stringType, defaultValue: 'arg1' },
-            arg2: { name: 'arg2', type: numberType, defaultValue: 2 },
-            arg3: {
-              name: 'arg3',
-              type: complexType,
-              defaultValue: { complex: { object: ['type'] } },
-            },
-            arg4: { name: 'arg4', type: stringType },
-            arg5: { name: 'arg5', type: stringType },
-            arg6: { name: 'arg6', type: numberType, defaultValue: 0 }, // See https://github.com/storybookjs/storybook/issues/12767 }
-          },
-          moduleExport,
-        },
-        { id, title },
-        { render: () => {} }
-      );
-
-      expect(initialArgs).toEqual({
-        arg1: 'arg1',
-        arg2: 3,
-        arg3: { complex: { object: ['type'] } },
-        arg4: 'foo',
-        arg6: 0,
-        arg7: false,
-      });
-    });
-
     describe('argsEnhancers', () => {
       it('are applied in the right order', () => {
         const run: number[] = [];

code/lib/preview-api/src/modules/store/csf/prepareStory.ts

@@ -1,5 +1,3 @@
-import { dedent } from 'ts-dedent';
-import deprecate from 'util-deprecate';
 import { global } from '@storybook/global';
 
 import type {
@@ -28,15 +26,6 @@ import { applyHooks } from '../../addons';
 import { combineParameters } from '../parameters';
 import { defaultDecorateStory } from '../decorators';
 import { groupArgsByTarget, NO_TARGET_NAME } from '../args';
-import { getValuesFromArgTypes } from './getValuesFromArgTypes';
-
-const argTypeDefaultValueWarning = deprecate(
-  () => {},
-  dedent`
-  \`argType.defaultValue\` is deprecated and will be removed in Storybook 7.0.
-
-  https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#no-longer-inferring-default-values-of-args`
-);
 
 // Combine all the metadata about a story (both direct and inherited from the component/global scope)
 // into a "renderable" story function, with all decorators applied, parameters passed as context etc
@@ -234,15 +223,7 @@ function preparePartialAnnotations<TRenderer extends Renderer>(
     contextForEnhancers.argTypes
   );
 
-  // Add argTypes[X].defaultValue to initial args (note this deprecated)
-  // We need to do this *after* the argTypesEnhancers as they may add defaultValues
-  const defaultArgs = getValuesFromArgTypes(contextForEnhancers.argTypes);
-
-  if (Object.keys(defaultArgs).length > 0) {
-    argTypeDefaultValueWarning();
-  }
-
-  const initialArgsBeforeEnhancers = { ...defaultArgs, ...passedArgs };
+  const initialArgsBeforeEnhancers = { ...passedArgs };
 
   contextForEnhancers.initialArgs = argsEnhancers.reduce(
     (accumulatedArgs: Args, enhancer) => ({

code/renderers/react/src/__test__/__snapshots__/internals.test.tsx.snap

@@ -5,7 +5,6 @@ exports[`Renders CSF2Secondary story 1`] = `
   <div>
     <button
       class="storybook-button storybook-button--medium storybook-button--secondary"
-      label="Button"
       type="button"
     >
       Children coming from story args!
@@ -32,7 +31,6 @@ exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
   <div>
     <button
       class="storybook-button storybook-button--medium storybook-button--secondary"
-      label="Button"
       type="button"
     >
       foo
@@ -46,7 +44,6 @@ exports[`Renders CSF3Button story 1`] = `
   <div>
     <button
       class="storybook-button storybook-button--medium storybook-button--secondary"
-      label="Button"
       type="button"
     >
       foo
@@ -66,7 +63,6 @@ exports[`Renders CSF3ButtonWithRender story 1`] = `
       </p>
       <button
         class="storybook-button storybook-button--medium storybook-button--secondary"
-        label="Button"
         type="button"
       >
         foo
@@ -91,7 +87,6 @@ exports[`Renders CSF3Primary story 1`] = `
   <div>
     <button
       class="storybook-button storybook-button--large storybook-button--primary"
-      label="Button"
       type="button"
     >
       foo

code/renderers/react/src/__test__/internals.test.tsx

@@ -13,7 +13,6 @@ const { CSF2StoryWithParamsAndDecorator } = composeStories(stories);
 test('returns composed args including default values from argtypes', () => {
   expect(CSF2StoryWithParamsAndDecorator.args).toEqual({
     ...stories.CSF2StoryWithParamsAndDecorator.args,
-    label: stories.default.argTypes!.label!.defaultValue,
   });
 });
 

code/renderers/vue3/template/stories/OverrideArgs.stories.js

@@ -20,13 +20,12 @@ export default {
         type: 'select',
         options: Object.keys(icons),
       },
-      defaultValue: 'Primary',
     },
   },
   render: (args) => {
     // Individual properties can be overridden by spreading the args
     // and the replacing the key-values that need to be updated
-    args = { ...args, icon: icons[args.icon] }; // eslint-disable-line no-param-reassign
+    args = { ...args, icon: icons[args.icon || 'Primary'] }; // eslint-disable-line no-param-reassign
     return {
       // Components used in your story `template` are defined in the `components` object
       components: { OverrideArgs },

docs/writing-docs/mdx.md

@@ -188,6 +188,12 @@ paths={[
 
 <!-- prettier-ignore-end -->
 
+<div class="aside">
+
+💡 The [`remark-gfm`](https://github.com/remarkjs/remark-gfm) package isn't provided by default during migration. We recommend installing it as a development dependency if you use its features.
+
+</div>
+
 ### Automigration
 
 To help you transition to the new version, we've created a migration helper in our CLI. We recommend using it and reaching out to the maintainers using the default communication channels (e.g., [Discord server](https://discord.com/channels/486522875931656193/570426522528382976), [GitHub issues](https://github.com/storybookjs/storybook/issues)) for problems you encounter.