Merge pull request #25469 from storybookjs/yann/remove-deprecated-doc…

…s-parameters Addon docs: Remove deprecated parameters
storybookjs · Jan 5, 2024 · 4a3639c · 4a3639c
2 parents 03215bb + 64a8709
commit 4a3639c
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 131 deletions.
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -37,6 +37,7 @@
     - ["Framework" TypeScript types](#framework-typescript-types)
     - [`navigateToSettingsPage` method from Storybook's manager-api](#navigatetosettingspage-method-from-storybooks-manager-api)
     - [storyIndexers](#storyindexers)
+    - [Deprecated docs parameters](#deprecated-docs-parameters)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
     - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
     - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
@@ -656,6 +657,20 @@ export const Component = () => {
 
 The Storybook's main.js configuration property `storyIndexers` is now removed in favor of `experimental_indexers`. [More info](#storyindexers-is-replaced-with-experimental_indexers).
 
+#### Deprecated docs parameters
+
+The following story and meta parameters are now removed:
+
+```ts
+parameters.docs.iframeHeight           // becomes docs.story.iframeHeight
+parameters.docs.inlineStories          // becomes docs.story.inline
+parameters.jsx.transformSource         // becomes parameters.docs.source.transform
+parameters.docs.transformSource        // becomes parameters.docs.source.transform
+parameters.docs.source.transformSource // becomes parameters.docs.source.transform
+```
+
+More info [here](#autodocs-changes) and [here](#source-block).
+
 ## From version 7.5.0 to 7.6.0
 
 #### CommonJS with Vite is deprecated

diff --git a/code/addons/docs/docs/docspage.md b/code/addons/docs/docs/docspage.md
@@ -154,7 +154,7 @@ addParameters({
 });
 ```
 
-With that function, anyone using the docs addon for `@storybook/vue` can make their stories render inline, either globally with the `inlineStories` docs parameter, or on a per-story-basis using the `inline` prop on the `<Story>` doc block. If you come up with an elegant and flexible implementation for the `prepareForInline` function for your own framework, let us know! We'd love to make it the default configuration, to make inline stories more accessible for a larger variety of frameworks!
+With that function, anyone using the docs addon for `@storybook/vue` can make their stories render inline, either globally with the `docs.story.inline` parameter, or on a per-story-basis using the `inline` prop on the `<Story>` doc block. If you come up with an elegant and flexible implementation for the `prepareForInline` function for your own framework, let us know! We'd love to make it the default configuration, to make inline stories more accessible for a larger variety of frameworks!
 
 ## Show/Hide code
 

diff --git a/code/lib/csf-tools/src/enrichCsf.test.ts b/code/lib/csf-tools/src/enrichCsf.test.ts
@@ -641,7 +641,7 @@ describe('enrichCsf', () => {
           title: 'Button',
           parameters: {
             foo: 'bar',
-            docs: { inlineStories: true }
+            docs: { story: { inline: true } }
           }
         }
         export const Basic = () => React.createElement(Button);
@@ -652,7 +652,7 @@ describe('enrichCsf', () => {
             title: 'Button',
             parameters: {
               foo: 'bar',
-              docs: { inlineStories: true }
+              docs: { story: { inline: true } }
             }
           }
           export const Basic = () => <Button />
@@ -665,7 +665,9 @@ describe('enrichCsf', () => {
           parameters: {
             foo: 'bar',
             docs: {
-              inlineStories: true,
+              story: {
+                inline: true
+              },
               description: {
                 component: "The most basic button"
               }

diff --git a/code/ui/blocks/src/blocks/Source.tsx b/code/ui/blocks/src/blocks/Source.tsx
@@ -31,12 +31,6 @@ type SourceParameters = SourceCodeProps & {
    * Where to read the source code from, see `SourceType`
    */
   type?: SourceType;
-  /**
-   * Transform the detected source for display
-   *
-   * @deprecated use `transform` prop instead
-   */
-  transformSource?: (code: string, storyContext: StoryContextForLoaders) => string;
   /**
    * Transform the detected source for display
    */
@@ -126,31 +120,7 @@ const getSnippet = ({
 
   const code = useSnippet ? snippet : sourceParameters.originalSource || '';
 
-  if (sourceParameters.transformSource) {
-    deprecate(dedent`The \`transformSource\` parameter at \`parameters.docs.source.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead. 
-    
-    Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
-  `);
-  }
-  if (storyContext.parameters.docs?.transformSource) {
-    deprecate(dedent`The \`transformSource\` parameter at \`parameters.docs.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead. 
-    
-    Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
-  `);
-  }
-  if (storyContext.parameters.jsx?.transformSource) {
-    deprecate(dedent`The \`transformSource\` parameter at \`parameters.jsx.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead. 
-    
-    Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
-  `);
-  }
-
-  const transformer =
-    transformFromProps ??
-    sourceParameters.transform ??
-    sourceParameters.transformSource ?? // deprecated
-    storyContext.parameters.docs?.transformSource ?? // deprecated
-    storyContext.parameters.jsx?.transformSource; // deprecated - used to be implemented in the React renderer's jsxDecorator
+  const transformer = transformFromProps ?? sourceParameters.transform;
 
   return transformer?.(code, storyContext) || code;
 };

diff --git a/code/ui/blocks/src/blocks/Story.tsx b/code/ui/blocks/src/blocks/Story.tsx
@@ -8,9 +8,7 @@ import type {
   StoryAnnotations,
   StoryId,
 } from '@storybook/types';
-import { deprecate } from '@storybook/client-logger';
 
-import dedent from 'ts-dedent';
 import { Story as PureStory, StorySkeleton } from '../components';
 import type { DocsContextProps } from './DocsContext';
 import { DocsContext } from './DocsContext';
@@ -114,25 +112,7 @@ export const getStoryProps = <TFramework extends Renderer>(
   // prefer block props, then story parameters defined by the framework-specific settings
   // and optionally overridden by users
 
-  // Deprecated parameters
-  const { inlineStories, iframeHeight } = docs as {
-    inlineStories?: boolean;
-    iframeHeight?: string;
-    autoplay?: boolean;
-  };
-  if (typeof inlineStories !== 'undefined')
-    deprecate(dedent`The \`docs.inlineStories\` parameter is deprecated, use \`docs.story.inline\` instead. 
-    
-      Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
-    `);
-  const inline = props.inline ?? storyParameters.inline ?? inlineStories ?? false;
-
-  if (typeof iframeHeight !== 'undefined') {
-    deprecate(dedent`The \`docs.iframeHeight\` parameter is deprecated, use \`docs.story.iframeHeight\` instead. 
-    
-      Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
-    `);
-  }
+  const inline = props.inline ?? storyParameters.inline ?? false;
 
   if (inline) {
     const height = props.height ?? storyParameters.height;
@@ -150,12 +130,7 @@ export const getStoryProps = <TFramework extends Renderer>(
     };
   }
 
-  const height =
-    props.height ??
-    storyParameters.height ??
-    storyParameters.iframeHeight ??
-    iframeHeight ??
-    '100px';
+  const height = props.height ?? storyParameters.height ?? storyParameters.iframeHeight ?? '100px';
   return {
     story,
     inline: false,

diff --git a/code/ui/blocks/src/blocks/internal/InternalSource.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalSource.stories.tsx
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import * as ParametersStories from '../../examples/SourceParameters.stories';
 
 import { Source } from '../Source';
 
@@ -29,21 +28,3 @@ export const Ids: Story = {
     ],
   },
 };
-
-export const SourceTransformSourceParameter: Story = {
-  args: {
-    of: ParametersStories.SourceTransformSource,
-  },
-};
-
-export const DocsTransformSourceParameter: Story = {
-  args: {
-    of: ParametersStories.DocsTransformSource,
-  },
-};
-
-export const JsxTransformSourceParameter: Story = {
-  args: {
-    of: ParametersStories.JsxTransformSource,
-  },
-};
diff --git a/code/ui/blocks/src/examples/SourceParameters.stories.tsx b/code/ui/blocks/src/examples/SourceParameters.stories.tsx
@@ -50,56 +50,6 @@ export const Transform = {
   },
 };
 
-// deprecated
-export const SourceTransformSource = {
-  args: { something: 'else' },
-  parameters: {
-    docs: {
-      source: {
-        transformSource: (
-          src: string,
-          storyContext: StoryContext
-        ) => dedent`// this comment has been added via parameters.docs.source.transformSource!
-        // this is the story id: ${storyContext.id}
-        // these are the current args: ${JSON.stringify(storyContext.args)}
-        ${src}`,
-      },
-    },
-  },
-};
-
-// deprecated
-export const DocsTransformSource = {
-  args: { something: 'else' },
-  parameters: {
-    docs: {
-      transformSource: (
-        src: string,
-        storyContext: StoryContext
-      ) => dedent`// this comment has been added via parameters.docs.transformSource!
-      // this is the story id: ${storyContext.id}
-      // these are the current args: ${JSON.stringify(storyContext.args)}
-      ${src}`,
-    },
-  },
-};
-
-// deprecated
-export const JsxTransformSource = {
-  args: { something: 'else' },
-  parameters: {
-    jsx: {
-      transformSource: (
-        src: string,
-        storyContext: StoryContext
-      ) => dedent`// this comment has been added via parameters.jsx.transformSource!
-      // this is the story id: ${storyContext.id}
-      // these are the current args: ${JSON.stringify(storyContext.args)}
-      ${src}`,
-    },
-  },
-};
-
 export const Code = {
   parameters: { docs: { source: { code } } },
 };