Docs: using targetted styles, not components to style MDX

.vscode/settings.json

@@ -18,4 +18,5 @@
     "editor.defaultFormatter": "dbaeumer.vscode-eslint",
     "editor.formatOnSave": true
   },
+  "prettier.ignorePath": "./code/.prettierignore"
 }

code/.prettierignore

@@ -0,0 +1 @@
+*.mdx

code/addons/docs/src/DocsRenderer.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import type { Renderer, Parameters, DocsContextProps, DocsRenderFunction } from '@storybook/types';
-import { components as htmlComponents } from '@storybook/components';
 import { Docs, CodeOrSourceMdx, AnchorMdx, HeadersMdx } from '@storybook/blocks';
 import { MDXProvider } from '@mdx-js/react';
 
 // TS doesn't like that we export a component with types that it doesn't know about (TS4203)
 export const defaultComponents: Record<string, any> = {
-  ...htmlComponents,
   code: CodeOrSourceMdx,
   a: AnchorMdx,
   ...HeadersMdx,

code/ui/.storybook/main.ts

@@ -5,6 +5,7 @@ import type { StorybookConfig } from '../../frameworks/react-vite/dist';
 const isBlocksOnly = process.env.STORYBOOK_BLOCKS_ONLY === 'true';
 
 const allStories = [
+  '../../lib/cli/rendererAssets/common/Introduction.stories.mdx',
   {
     directory: '../manager/src',
     titlePrefix: '@storybook-manager',

code/ui/blocks/src/blocks/Anchor.tsx

@@ -8,5 +8,7 @@ export interface AnchorProps {
 }
 
 export const Anchor: FC<AnchorProps> = ({ storyId, children }) => (
-  <div id={anchorBlockIdFromId(storyId)}>{children}</div>
+  <div id={anchorBlockIdFromId(storyId)} className="sb-anchor">
+    {children}
+  </div>
 );

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

@@ -112,7 +112,7 @@ const Story: FC<StoryProps> = (props) => {
     // FIXME: height/style/etc. lifted from PureStory
     const { height } = storyProps;
     return (
-      <div id={storyBlockIdFromId(story.id)}>
+      <div id={storyBlockIdFromId(story.id)} className="sb-story">
         {height ? (
           <style>{`#story--${story.id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`}</style>
         ) : null}

code/ui/blocks/src/blocks/Unstyled.mdx

@@ -0,0 +1,39 @@
+import { Unstyled } from './Unstyled.tsx';
+import StoriesMeta, {Undefined} from '../controls/Boolean.stories';
+import { Story } from '@storybook/blocks';
+import { Meta } from '@storybook/blocks';
+
+<Story of={Undefined} meta={StoriesMeta}/>
+
+# The Unstyled Block
+
+By default most elements in docs have a few default styles applied to ensure the docs look good. This is achieved by applying default styles to most elements like `h1`, `p`, etc..
+However sometimes you might want some of your content to not have these styles applied, this is where the `Unstyled` block is useful. Wrap any content you want in the `Unstyled` block to remove the default styles:
+
+```md
+import { Unstyled } from '@storybook/blocks';
+
+> This block quote will be styled
+
+... and so will this paragraph.
+
+<Unstyled>
+  > This block quote will not be styled
+
+  ... neither will this paragraph, nor the following component:
+  <MyCustomComponent />
+</Unstyled>
+```
+
+Yields: 
+
+> This block quote will be styled
+
+... and so will this paragraph.
+
+<Unstyled>
+  > This block quote will not be styled
+
+  ... neither will this paragraph, nor the following component:
+</Unstyled>
+

code/ui/blocks/src/blocks/Unstyled.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const Unstyled: React.FC = (props) => <div {...props} className="sb-unstyled" />;

code/ui/blocks/src/components/Description.tsx

@@ -1,7 +1,6 @@
 import type { FC } from 'react';
 import React from 'react';
 import Markdown from 'markdown-to-jsx';
-import { components, ResetWrapper } from '@storybook/components';
 
 export interface DescriptionProps {
   markdown: string;
@@ -12,7 +11,5 @@ export interface DescriptionProps {
  * components docgen docs.
  */
 export const Description: FC<DescriptionProps> = ({ markdown }) => (
-  <ResetWrapper>
-    <Markdown options={{ forceBlock: true, overrides: components }}>{markdown}</Markdown>
-  </ResetWrapper>
+  <Markdown options={{ forceBlock: true }}>{markdown}</Markdown>
 );

code/ui/blocks/src/components/DocsPage.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import type { ComponentProps } from 'react';
 import React from 'react';
 import { Global, css } from '@storybook/theming';
@@ -95,3 +96,28 @@ export const Markdown = () => (
     <Source {...source.JSX.args} />
   </DocsPageWrapper>
 );
+
+export const Html = {
+  name: 'HTML',
+  render: () => (
+    <DocsPageWrapper>
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <a>A tag</a>
+      <pre>pre tag</pre>
+      <div>
+        <div>Div</div>
+        <a>Nested A tag</a>
+      </div>
+      <div className="sb-unstyled" style={{ border: '2px solid red' }}>
+        <h1>Unstyled content</h1>
+        <h2>Heading 2</h2>
+        <a>A tag</a>
+        <div>
+          <div>Div</div>
+          <a>Nested A tag</a>
+        </div>
+      </div>
+    </DocsPageWrapper>
+  ),
+};