Merge pull request #93 from storybookjs/charles/sb-1442-ux-inline-sni…

…ppets

Add support for titles in code

apps/frontpage/components/docs/mdx/figcaption.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { useContext, useEffect, type FC, type ReactNode } from 'react';
+import { FigureContext } from './figure-provider';
+
+interface PreProps {
+  children?: ReactNode;
+}
+
+export const Figcaption: FC<PreProps> = (props) => {
+  const context = useContext(FigureContext);
+  const { setTitle } = context || {};
+
+  useEffect(() => {
+    setTitle && setTitle(props.children as string);
+  }, []);
+
+  return (
+    <figcaption {...props} className="hidden">
+      {props.children}
+    </figcaption>
+  );
+};

apps/frontpage/components/docs/mdx/figure-provider.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { createContext, useContext, useState } from 'react';
+
+export interface FigureContextProps {
+  title: string;
+  setTitle: (id: string) => void;
+}
+
+export const FigureContext = createContext<FigureContextProps | undefined>(
+  undefined,
+);
+
+export function FigureProvider({ children }: { children: ReactNode }) {
+  const [title, setTitle] = useState<string>('');
+
+  return (
+    <FigureContext.Provider
+      value={{
+        title,
+        setTitle,
+      }}
+    >
+      {children}
+    </FigureContext.Provider>
+  );
+}

apps/frontpage/components/docs/mdx/figure.tsx

@@ -0,0 +1,14 @@
+import type { FC, ReactNode } from 'react';
+import { FigureProvider } from './figure-provider';
+
+interface PreProps {
+  children?: ReactNode;
+}
+
+export const Figure: FC<PreProps> = (props) => {
+  return (
+    <FigureProvider>
+      <figure {...props}>{props.children}</figure>
+    </FigureProvider>
+  );
+};

apps/frontpage/components/docs/mdx/index.tsx

@@ -21,3 +21,5 @@ export { Table } from './table';
 export { Th } from './th';
 export { Tr } from './tr';
 export { Td } from './td';
+export { Figure } from './figure';
+export { Figcaption } from './figcaption';

apps/frontpage/components/docs/mdx/pre.stories.tsx

@@ -1,9 +1,17 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Pre } from './pre';
+import { FigureProvider } from './figure-provider';
 
 const meta = {
   title: 'Pre',
   component: Pre,
+  decorators: [
+    (Story) => (
+      <FigureProvider>
+        <Story />
+      </FigureProvider>
+    ),
+  ],
 } satisfies Meta<typeof Pre>;
 
 export default meta;

apps/frontpage/components/docs/mdx/pre.tsx

@@ -1,14 +1,20 @@
-import type { FC, ReactNode } from 'react';
+'use client';
+
+import { useContext, type FC, type ReactNode } from 'react';
 import { CodeWrapper } from './code-snippets/wrapper';
+import { FigureContext } from './figure-provider';
 
 interface PreProps {
   children?: ReactNode;
   raw?: string;
 }
 
 export const Pre: FC<PreProps> = ({ children, raw }) => {
+  const context = useContext(FigureContext);
+  const { title } = context || {};
+
   return (
-    <CodeWrapper copy={raw}>
+    <CodeWrapper copy={raw} title={title || ''}>
       <pre>{children}</pre>
     </CodeWrapper>
   );

apps/frontpage/lib/get-page.tsx

@@ -31,6 +31,8 @@ import {
   Tr,
   Td,
   OrderedList,
+  Figure,
+  Figcaption,
 } from '../components/docs/mdx';
 import { generateDocsTree } from './get-tree';
 import { rehypePrettyCodeOptions } from './rehype-pretty-code-options';
@@ -150,6 +152,8 @@ export const getPageData = async (
       th: Th,
       tr: Tr,
       td: Td,
+      figure: Figure,
+      figcaption: Figcaption,
       img: (props) => <Img activeVersion={activeVersion.id} {...props} />,
       Video: (props) => <Video activeVersion={activeVersion.id} {...props} />,
       CodeSnippets: (props) => (