Addon-docs: Restore docs.components overrides for doc blocks

code/.storybook/main.ts

@@ -55,10 +55,6 @@ const config = defineMain({
       directory: '../core/src/highlight',
       titlePrefix: 'highlight',
     },
-    {
-      directory: '../addons/docs/src/blocks',
-      titlePrefix: 'addons/docs/blocks',
-    },
     {
       directory: '../addons/a11y/src',
       titlePrefix: 'addons/accessibility',
@@ -71,6 +67,10 @@ const config = defineMain({
       directory: '../addons/docs/template/stories',
       titlePrefix: 'addons/docs',
     },
+    {
+      directory: '../addons/docs/src',
+      titlePrefix: 'addons/docs',
+    },
     {
       directory: '../addons/links/template/stories',
       titlePrefix: 'addons/links',

code/addons/docs/src/blocks/blocks/ArgTypes.tsx

@@ -13,6 +13,7 @@ import type { SortType } from '../components';
 import { ArgsTableError, ArgsTable as PureArgsTable, TabbedArgsTable } from '../components';
 import { useOf } from './useOf';
 import { getComponentName } from './utils';
+import { withMdxComponentOverride } from './with-mdx-component-override';
 
 type ArgTypesParameters = {
   include?: PropDescriptor;
@@ -62,7 +63,7 @@ function getArgTypesFromResolved(resolved: ReturnType<typeof useOf>) {
   return { argTypes, parameters, component, subcomponents };
 }
 
-export const ArgTypes: FC<ArgTypesProps> = (props) => {
+const ArgTypesImpl: FC<ArgTypesProps> = (props) => {
   const { of } = props;
   if ('of' in props && of === undefined) {
     throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
@@ -103,3 +104,5 @@ export const ArgTypes: FC<ArgTypesProps> = (props) => {
   };
   return <TabbedArgsTable tabs={tabs as any} sort={sort} />;
 };
+
+export const ArgTypes = withMdxComponentOverride('ArgTypes', ArgTypesImpl);

code/addons/docs/src/blocks/blocks/Canvas.tsx

@@ -13,6 +13,7 @@ import { SourceContext } from './SourceContainer';
 import type { StoryProps } from './Story';
 import { Story } from './Story';
 import { useOf } from './useOf';
+import { withMdxComponentOverride } from './with-mdx-component-override';
 
 type CanvasProps = Pick<PurePreviewProps, 'withToolbar' | 'additionalActions' | 'className'> & {
   /**
@@ -60,7 +61,7 @@ type CanvasProps = Pick<PurePreviewProps, 'withToolbar' | 'additionalActions' |
   story?: Pick<StoryProps, 'inline' | 'height' | 'autoplay' | '__forceInitialArgs' | '__primary'>;
 };
 
-export const Canvas: FC<CanvasProps> = (props) => {
+const CanvasImpl: FC<CanvasProps> = (props) => {
   const docsContext = useContext(DocsContext);
   const sourceContext = useContext(SourceContext);
   const { of, source } = props;
@@ -95,3 +96,5 @@ export const Canvas: FC<CanvasProps> = (props) => {
     </PurePreview>
   );
 };
+
+export const Canvas = withMdxComponentOverride('Canvas', CanvasImpl);

code/addons/docs/src/blocks/blocks/Controls.tsx

@@ -16,6 +16,7 @@ import { useArgs } from './useArgs';
 import { useGlobals } from './useGlobals';
 import { usePrimaryStory } from './usePrimaryStory';
 import { getComponentName } from './utils';
+import { withMdxComponentOverride } from './with-mdx-component-override';
 
 type ControlsParameters = {
   include?: PropDescriptor;
@@ -38,7 +39,7 @@ function extractComponentArgTypes(
   return extractArgTypes(component) as StrictArgTypes;
 }
 
-export const Controls: FC<ControlsProps> = (props) => {
+const ControlsImpl: FC<ControlsProps> = (props) => {
   const { of } = props;
   const context = useContext(DocsContext);
   const primaryStory = usePrimaryStory();
@@ -104,3 +105,5 @@ export const Controls: FC<ControlsProps> = (props) => {
     />
   );
 };
+
+export const Controls = withMdxComponentOverride('Controls', ControlsImpl);

code/addons/docs/src/blocks/blocks/Description.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { Markdown } from './Markdown';
 import type { Of } from './useOf';
 import { useOf } from './useOf';
+import { withMdxComponentOverride } from './with-mdx-component-override';
 
 export enum DescriptionType {
   INFO = 'info',
@@ -58,7 +59,7 @@ const getDescriptionFromResolvedOf = (resolvedOf: ReturnType<typeof useOf>): str
   }
 };
 
-const DescriptionContainer: FC<DescriptionProps> = (props) => {
+const DescriptionImpl: FC<DescriptionProps> = (props) => {
   const { of } = props;
 
   if ('of' in props && of === undefined) {
@@ -70,4 +71,4 @@ const DescriptionContainer: FC<DescriptionProps> = (props) => {
   return markdown ? <Markdown>{markdown}</Markdown> : null;
 };
 
-export { DescriptionContainer as Description };
+export const Description = withMdxComponentOverride('Description', DescriptionImpl);

code/addons/docs/src/blocks/blocks/DocsStory.tsx

@@ -7,8 +7,9 @@ import { Description } from './Description';
 import { Subheading } from './Subheading';
 import type { DocsStoryProps } from './types';
 import { useOf } from './useOf';
+import { withMdxComponentOverride } from './with-mdx-component-override';
 
-export const DocsStory: FC<DocsStoryProps> = ({
+const DocsStoryImpl: FC<DocsStoryProps> = ({
   of,
   expanded = true,
   withToolbar: withToolbarProp = false,
@@ -37,3 +38,5 @@ export const DocsStory: FC<DocsStoryProps> = ({
     </Anchor>
   );
 };
+
+export const DocsStory = withMdxComponentOverride('DocsStory', DocsStoryImpl);

code/addons/docs/src/blocks/blocks/Heading.tsx

@@ -6,14 +6,15 @@ import { H2 } from 'storybook/internal/components';
 import GithubSlugger from 'github-slugger';
 
 import { HeaderMdx } from './mdx';
+import { withMdxComponentOverride } from './with-mdx-component-override';
 
 export interface HeadingProps {
   disableAnchor?: boolean;
 }
 
 export const slugs = new GithubSlugger();
 
-export const Heading: FC<PropsWithChildren<HeadingProps>> = ({
+const HeadingImpl: FC<PropsWithChildren<HeadingProps>> = ({
   children,
   disableAnchor,
   ...props
@@ -28,3 +29,5 @@ export const Heading: FC<PropsWithChildren<HeadingProps>> = ({
     </HeaderMdx>
   );
 };
+
+export const Heading = withMdxComponentOverride('Heading', HeadingImpl);

code/addons/docs/src/blocks/blocks/Markdown.tsx

@@ -5,11 +5,12 @@ import PureMarkdown from 'markdown-to-jsx';
 import { dedent } from 'ts-dedent';
 
 import { AnchorMdx, CodeOrSourceMdx, HeadersMdx } from './mdx';
+import { withMdxComponentOverride } from './with-mdx-component-override';
 
 // mirror props from markdown-to-jsx. From https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase#wrappingmirroring-a-component
 type MarkdownProps = typeof PureMarkdown extends React.ComponentType<infer Props> ? Props : never;
 
-export const Markdown = (props: MarkdownProps) => {
+const MarkdownImpl = (props: MarkdownProps) => {
   if (!props.children) {
     return null;
   }
@@ -50,3 +51,5 @@ export const Markdown = (props: MarkdownProps) => {
     />
   );
 };
+
+export const Markdown = withMdxComponentOverride('Markdown', MarkdownImpl);

code/addons/docs/src/blocks/blocks/Meta.tsx

@@ -21,8 +21,8 @@ export const Meta: FC<MetaProps> = ({ of }) => {
   try {
     const primary = context.storyById();
     return <Anchor storyId={primary.id} />;
-  } catch (err) {
-    // It is possible to use <Meta> in a unnattached MDX file
+  } catch {
+    // It is possible to use <Meta> in an unattached MDX file
     return null;
   }
 };

code/addons/docs/src/blocks/blocks/Primary.tsx

@@ -3,11 +3,14 @@ import React from 'react';
 
 import { DocsStory } from './DocsStory';
 import { usePrimaryStory } from './usePrimaryStory';
+import { withMdxComponentOverride } from './with-mdx-component-override';
 
-export const Primary: FC = () => {
+const PrimaryImpl: FC = () => {
   const primaryStory = usePrimaryStory();
 
   return primaryStory ? (
     <DocsStory of={primaryStory.moduleExport} expanded={false} __primary withToolbar />
   ) : null;
 };
+
+export const Primary = withMdxComponentOverride('Primary', PrimaryImpl);

code/addons/docs/src/blocks/blocks/Source.tsx

@@ -1,4 +1,4 @@
-import type { ComponentProps, FC } from 'react';
+import type { ComponentProps } from 'react';
 import React, { useContext, useMemo } from 'react';
 
 import { SourceType } from 'storybook/internal/docs-tools';
@@ -11,6 +11,7 @@ import { DocsContext } from './DocsContext';
 import type { SourceContextProps, SourceItem } from './SourceContainer';
 import { SourceContext, UNKNOWN_ARGS_HASH, argsHash } from './SourceContainer';
 import { useTransformCode } from './useTransformCode';
+import { withMdxComponentOverride } from './with-mdx-component-override';
 
 export type SourceParameters = SourceCodeProps & {
   /** Where to read the source code from, see `SourceType` */
@@ -112,7 +113,7 @@ export const useSourceProps = (
       try {
         // Always fall back to the primary story for source parameters, even if code is set.
         return docsContext.storyById();
-      } catch (err) {
+      } catch {
         // You are allowed to use <Source code="..." /> and <Canvas /> unattached.
       }
     }
@@ -170,9 +171,11 @@ export const useSourceProps = (
  * Story source doc block renders source code if provided, or the source for a story if `storyId` is
  * provided, or the source for the current story if nothing is provided.
  */
-export const Source = (props: SourceProps) => {
+const SourceImpl = (props: SourceProps) => {
   const sourceContext = useContext(SourceContext);
   const docsContext = useContext(DocsContext);
   const sourceProps = useSourceProps(props, docsContext, sourceContext);
   return <PureSource {...sourceProps} />;
 };
+
+export const Source = withMdxComponentOverride('Source', SourceImpl);

code/addons/docs/src/blocks/blocks/Stories.tsx

@@ -8,6 +8,7 @@ import { styled } from 'storybook/theming';
 import { DocsContext } from './DocsContext';
 import { DocsStory } from './DocsStory';
 import { Heading } from './Heading';
+import { withMdxComponentOverride } from './with-mdx-component-override';
 
 interface StoriesProps {
   title?: ReactElement | string;
@@ -30,7 +31,7 @@ const StyledHeading: typeof Heading = styled(Heading)(({ theme }) => ({
   },
 }));
 
-export const Stories: FC<StoriesProps> = ({ title = 'Stories', includePrimary = true }) => {
+const StoriesImpl: FC<StoriesProps> = ({ title = 'Stories', includePrimary = true }) => {
   const { componentStories, projectAnnotations, getStoryContext } = useContext(DocsContext);
 
   let stories = componentStories();
@@ -69,3 +70,5 @@ export const Stories: FC<StoriesProps> = ({ title = 'Stories', includePrimary =
     </>
   );
 };
+
+export const Stories = withMdxComponentOverride('Stories', StoriesImpl);

code/addons/docs/src/blocks/blocks/Story.tsx

@@ -13,6 +13,7 @@ import { Story as PureStory, StorySkeleton } from '../components';
 import type { DocsContextProps } from './DocsContext';
 import { DocsContext } from './DocsContext';
 import { useStory } from './useStory';
+import { withMdxComponentOverride } from './with-mdx-component-override';
 
 type PureStoryProps = ComponentProps<typeof PureStory>;
 
@@ -113,7 +114,7 @@ export const getStoryProps = <TFramework extends Renderer>(
   };
 };
 
-const Story: FC<StoryProps> = (props = { __forceInitialArgs: false, __primary: false }) => {
+const StoryImpl: FC<StoryProps> = (props = { __forceInitialArgs: false, __primary: false }) => {
   const context = useContext(DocsContext);
   const storyId = getStoryId(props, context);
   const story = useStory(storyId, context);
@@ -130,4 +131,4 @@ const Story: FC<StoryProps> = (props = { __forceInitialArgs: false, __primary: f
   return <PureStory {...storyProps} />;
 };
 
-export { Story };
+export const Story = withMdxComponentOverride('Story', StoryImpl);

code/addons/docs/src/blocks/blocks/Subheading.tsx

@@ -6,8 +6,9 @@ import { H3 } from 'storybook/internal/components';
 import type { HeadingProps } from './Heading';
 import { slugs } from './Heading';
 import { HeaderMdx } from './mdx';
+import { withMdxComponentOverride } from './with-mdx-component-override';
 
-export const Subheading: FC<PropsWithChildren<HeadingProps>> = ({ children, disableAnchor }) => {
+const SubheadingImpl: FC<PropsWithChildren<HeadingProps>> = ({ children, disableAnchor }) => {
   if (disableAnchor || typeof children !== 'string') {
     return <H3>{children}</H3>;
   }
@@ -18,3 +19,5 @@ export const Subheading: FC<PropsWithChildren<HeadingProps>> = ({ children, disa
     </HeaderMdx>
   );
 };
+
+export const Subheading = withMdxComponentOverride('Subheading', SubheadingImpl);

code/addons/docs/src/blocks/blocks/Subtitle.tsx

@@ -6,6 +6,7 @@ import { deprecate } from 'storybook/internal/client-logger';
 import { Subtitle as PureSubtitle } from '../components';
 import type { Of } from './useOf';
 import { useOf } from './useOf';
+import { withMdxComponentOverride } from './with-mdx-component-override';
 
 interface SubtitleProps {
   children?: ReactNode;
@@ -19,7 +20,7 @@ interface SubtitleProps {
 const DEPRECATION_MIGRATION_LINK =
   'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#subtitle-block-and-parameterscomponentsubtitle';
 
-export const Subtitle: FunctionComponent<SubtitleProps> = (props) => {
+const SubtitleImpl: FunctionComponent<SubtitleProps> = (props) => {
   const { of, children } = props;
 
   if ('of' in props && of === undefined) {
@@ -50,3 +51,5 @@ export const Subtitle: FunctionComponent<SubtitleProps> = (props) => {
     <PureSubtitle className="sbdocs-subtitle sb-unstyled">{content}</PureSubtitle>
   ) : null;
 };
+
+export const Subtitle = withMdxComponentOverride('Subtitle', SubtitleImpl);

code/addons/docs/src/blocks/blocks/Title.tsx

@@ -6,6 +6,7 @@ import type { ComponentTitle } from 'storybook/internal/types';
 import { Title as PureTitle } from '../components';
 import type { Of } from './useOf';
 import { useOf } from './useOf';
+import { withMdxComponentOverride } from './with-mdx-component-override';
 
 interface TitleProps {
   /**
@@ -25,7 +26,7 @@ export const extractTitle = (title: ComponentTitle) => {
   return groups?.[groups?.length - 1] || title;
 };
 
-export const Title: FunctionComponent<TitleProps> = (props) => {
+const TitleImpl: FunctionComponent<TitleProps> = (props) => {
   const { children, of } = props;
 
   if ('of' in props && of === undefined) {
@@ -50,3 +51,5 @@ export const Title: FunctionComponent<TitleProps> = (props) => {
 
   return content ? <PureTitle className="sbdocs-title sb-unstyled">{content}</PureTitle> : null;
 };
+
+export const Title = withMdxComponentOverride('Title', TitleImpl);

code/addons/docs/src/blocks/blocks/Unstyled.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
 
-export const Unstyled: React.FC<
+import { withMdxComponentOverride } from './with-mdx-component-override';
+
+const UnstyledImpl: React.FC<
   React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
 > = (props) => <div {...props} className="sb-unstyled" />;
+
+export const Unstyled = withMdxComponentOverride('Unstyled', UnstyledImpl);

code/addons/docs/src/blocks/blocks/Wrapper.tsx

@@ -1,6 +1,10 @@
 import type { FC } from 'react';
 import React from 'react';
 
-export const Wrapper: FC<
+import { withMdxComponentOverride } from './with-mdx-component-override';
+
+const WrapperImpl: FC<
   React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
 > = ({ children }) => <div style={{ fontFamily: 'sans-serif' }}>{children}</div>;
+
+export const Wrapper = withMdxComponentOverride('Wrapper', WrapperImpl);