Merge pull request #25460 from storybookjs/yann/remove-deprecated-sto…

…ry-block-props

Doc blocks: Remove deprecated props from Story block

MIGRATION.md

@@ -56,6 +56,7 @@
     - [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)
     - [`Primary` Doc block properties](#primary-doc-block-properties)
     - [`createChannel` from `@storybook/postmessage` and  `@storybook/channel-websocket`](#createchannel-from-storybookpostmessage-and--storybookchannel-websocket)
@@ -924,6 +925,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:

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/ui/blocks/src/blocks/Canvas.tsx

@@ -128,13 +128,6 @@ const useDeprecatedPreviewProps = (
 
   // if the user has specified a layout prop, use that...
   let layout = layoutProp;
-  // ...otherwise, try to infer it from the children 'parameters' prop
-  Children.forEach(children, (child) => {
-    if (layout) {
-      return;
-    }
-    layout = (child as ReactElement)?.props?.parameters?.layout;
-  });
   // ...otherwise, try to infer it from the story parameters
   stories.forEach((story) => {
     if (layout || !story) {

code/ui/blocks/src/blocks/Story.tsx

@@ -5,7 +5,6 @@ import type {
   ModuleExport,
   ModuleExports,
   PreparedStory,
-  StoryAnnotations,
   StoryId,
 } from '@storybook/types';
 
@@ -16,25 +15,10 @@ import { useStory } from './useStory';
 
 type PureStoryProps = ComponentProps<typeof PureStory>;
 
-/**
- * Props to define a story
- *
- * @deprecated Define stories in CSF files
- */
-type StoryDefProps = StoryAnnotations;
-
 /**
  * Props to reference another story
  */
 type StoryRefProps = {
-  /**
-   * @deprecated Use of={storyExport} instead
-   */
-  id?: string;
-  /**
-   * @deprecated Use of={storyExport} and define the story in the CSF file
-   */
-  story?: StoryAnnotations;
   /**
    * Pass the export defining a story to render that story
    *
@@ -83,16 +67,16 @@ type StoryParameters = {
   __primary?: boolean;
 };
 
-export type StoryProps = (StoryDefProps | StoryRefProps) & StoryParameters;
+export type StoryProps = StoryRefProps & StoryParameters;
 
 export const getStoryId = (props: StoryProps, context: DocsContextProps): StoryId => {
-  const { of, meta, story } = props as StoryRefProps;
+  const { of, meta } = props as StoryRefProps;
   if ('of' in props && of === undefined) {
     throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
   }
 
   if (meta) context.referenceMeta(meta, false);
-  const resolved = context.resolveOf(of || story || 'story', ['story']);
+  const resolved = context.resolveOf(of || 'story', ['story']);
   return resolved.story.id;
 };
 

code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx

@@ -109,7 +109,7 @@ export const LayoutAsChildProp: Story = {
   render: (args) => {
     return (
       <Canvas {...args}>
-        <StoryComponent of={ButtonStories.Primary} parameters={{ layout: 'fullscreen' }} />
+        <StoryComponent of={ButtonStories.Primary} />
       </Canvas>
     );
   },
@@ -122,7 +122,7 @@ export const LayoutAsChildPropMultiple: Story = {
       <Canvas {...args}>
         <h1>Fullscreen</h1>
         <StoryComponent of={ButtonStories.Secondary} />
-        <StoryComponent of={ButtonStories.Large} parameters={{ layout: 'fullscreen' }} />
+        <StoryComponent of={ButtonStories.Large} />
         <StoryComponent of={ButtonStories.Primary} />
       </Canvas>
     );

code/ui/blocks/src/typings.d.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable @typescript-eslint/naming-convention */
 declare module '*.md';
+declare module '*.md?raw';
 
 declare var __DOCS_CONTEXT__: any;
 declare var PREVIEW_URL: any;

docs/api/doc-block-story.md

@@ -133,83 +133,3 @@ Type: Story export
 Specifies which story is rendered by the `Story` block. If no `of` is defined and the MDX file is [attached](./doc-block-meta.md#attached-vs-unattached), the primary (first) story will be rendered.
 
 <YouTubeCallout id="uAA1JvLcl-w" title="Avoid Documentation Nightmares with Storybook's Story Doc Block configuration" params='start=160' />
-
-### `args`
-
-(⛔️ **Deprecated**)
-
-Type: `Partial<TArgs>`
-
-Defining and configuring stories in MDX is deprecated. See the [Migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mdx-docs-files) for details.
-
-### `argTypes`
-
-(⛔️ **Deprecated**)
-
-Type: `Partial<ArgTypes<TArgs>>`
-
-Defining and configuring stories in MDX is deprecated. See the [Migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mdx-docs-files) for details.
-
-### `decorators`
-
-(⛔️ **Deprecated**)
-
-Type: `DecoratorFunction<TRenderer, TArgs>[]`
-
-Defining and configuring stories in MDX is deprecated. See the [Migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mdx-docs-files) for details.
-
-### `loaders`
-
-(⛔️ **Deprecated**)
-
-Type: `LoaderFunction<TRenderer, TArgs>[]`
-
-Defining and configuring stories in MDX is deprecated. See the [Migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mdx-docs-files) for details.
-
-### `name`
-
-(⛔️ **Deprecated**)
-
-Type: `StoryName`
-
-Defining and configuring stories in MDX is deprecated. See the [Migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mdx-docs-files) for details.
-
-### `parameters`
-
-(⛔️ **Deprecated**)
-
-Type: `Parameters`
-
-Defining and configuring stories in MDX is deprecated. See the [Migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mdx-docs-files) for details.
-
-### `play`
-
-(⛔️ **Deprecated**)
-
-Type: `PlayFunction<TRenderer, TArgs>`
-
-Defining and configuring stories in MDX is deprecated. See the [Migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mdx-docs-files) for details.
-
-### `render`
-
-(⛔️ **Deprecated**)
-
-Type: `ArgsStoryFn<TRenderer, TArgs>`
-
-Defining and configuring stories in MDX is deprecated. See the [Migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mdx-docs-files) for details.
-
-### `story`
-
-(⛔️ **Deprecated**)
-
-Type: `Omit<StoryAnnotations<TRenderer, TArgs>, 'story'>`
-
-Defining and configuring stories in MDX is deprecated. See the [Migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mdx-docs-files) for details.
-
-### `storyName`
-
-(⛔️ **Deprecated**)
-
-Type: `StoryName`
-
-Defining and configuring stories in MDX is deprecated. See the [Migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mdx-docs-files) for details.