docs: collapse code examples in a custom Example story block

.storybook/blocks/Example.tsx

@@ -0,0 +1,25 @@
+import React, { PropsWithChildren } from "react";
+import { Story, Description } from "@storybook/blocks";
+import type { ModuleExport } from "@storybook/types";
+import { StoryTitle } from "./StoryTitle";
+
+export const Example = ({
+  of,
+  children,
+}: PropsWithChildren<{ of: ModuleExport }>) => {
+  return (
+    <>
+      <StoryTitle of={of} />
+      <Description of={of} />
+      <article>
+        <Story of={of} />
+        <footer>
+          <details className="code-details">
+            <summary>Show code</summary>
+            {children}
+          </details>
+        </footer>
+      </article>
+    </>
+  );
+};

.storybook/blocks/StoryTitle.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Title } from "@storybook/blocks";
+import { useOf } from "@storybook/blocks";
+import type { ModuleExport } from "@storybook/types";
+
+export const StoryTitle = ({ of }: { of: ModuleExport }) => {
+  const resolvedOf = useOf(of || "story", ["story", "meta"]);
+  switch (resolvedOf.type) {
+    case "story": {
+      return <h3>{resolvedOf.story.name}</h3>;
+    }
+    case "meta": {
+      return <h3>{resolvedOf.preparedMeta.title}</h3>;
+    }
+  }
+};

.storybook/style.css

@@ -6,6 +6,18 @@
   text-transform: uppercase;
 }
 
+.code-details {
+  margin: 0;
+}
+
+.code-details summary {
+  line-height: 31.5px;
+}
+
+.code-details summary:after {
+  margin-top: 5px;
+}
+
 @media (min-width: 576px) {
   .container {
     margin-top: var(--pico-spacing);

src/components/list/Docs.mdx

@@ -1,4 +1,5 @@
-import { Meta, Canvas, ArgTypes, Description } from "@storybook/blocks";
+import { Meta, Canvas, Story, ArgTypes, Description } from "@storybook/blocks";
+import { Example } from "../../../.storybook/blocks/Example";
 import * as ListStories from "./List.stories";
 import * as ListItemStories from "./item/Item.stories";
 
@@ -39,11 +40,7 @@ The `children` render prop will receive the following props:
 
 ## Examples
 
-### List of objects
-
-<Description of={ListStories.ListOfObjects} />
-
-<Canvas sourceState="none" of={ListStories.ListOfObjects} />
+<Example of={ListStories.ListOfObjects}>
 
 ```tsx
 import { InputField, fieldAtom } from "form-atoms";
@@ -97,11 +94,9 @@ const Example = () => (
 );
 ```
 
-### Custom `AddButton`
-
-<Description of={ListStories.CustomAddButton} />
+</Example>
 
-<Canvas sourceState="none" of={ListStories.CustomAddButton} />
+<Example of={ListStories.CustomAddButton} >
 
 ```tsx
 import { type FieldAtom, fieldAtom, InputField } from "form-atoms";
@@ -152,11 +147,9 @@ const Example = () => (
 );
 ```
 
-### `Empty` render prop
+</Example>
 
-<Description of={ListStories.EmptyRenderProp} />
-
-<Canvas sourceState="none" of={ListStories.EmptyRenderProp} />
+<Example  of={ListStories.EmptyRenderProp} >
 
 ```tsx
 import { fieldAtom, InputField } from "form-atoms";
@@ -195,11 +188,9 @@ const Example = () => (
 );
 ```
 
-### Ordering items
-
-<Description of={ListStories.OrderingItems} />
+</Example>
 
-<Canvas sourceState="none" of={ListStories.OrderingItems} />
+<Example of={ListStories.OrderingItems} >
 
 ```tsx
 import { fieldAtom, InputField } from "form-atoms";
@@ -235,13 +226,11 @@ const Example = () => (
 );
 ```
 
-## Advanced
-
-### Nested List
+</Example>
 
-<Description of={ListStories.NestedList} />
+## Advanced
 
-<Canvas sourceState="none" of={ListStories.NestedList} />
+<Example of={ListStories.NestedList} >
 
 ```tsx
 import { fieldAtom, InputField } from "form-atoms";
@@ -359,3 +348,5 @@ const RemoveButton = ({ remove }: RemoveButtonProps) => (
   </button>
 );
 ```
+
+</Example>