From efbd0afc434569f9de984666b703fc9eb14d2dd1 Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Sat, 9 Mar 2024 17:41:57 +0100
Subject: [PATCH] docs: collapse code examples in a custom Example story block

---
 .storybook/blocks/Example.tsx    | 25 +++++++++++++++++++++
 .storybook/blocks/StoryTitle.tsx | 16 ++++++++++++++
 .storybook/style.css             | 12 +++++++++++
 src/components/list/Docs.mdx     | 37 ++++++++++++--------------------
 4 files changed, 67 insertions(+), 23 deletions(-)
 create mode 100644 .storybook/blocks/Example.tsx
 create mode 100644 .storybook/blocks/StoryTitle.tsx

diff --git a/.storybook/blocks/Example.tsx b/.storybook/blocks/Example.tsx
new file mode 100644
index 0000000..d587dc6
--- /dev/null
+++ b/.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>
+    </>
+  );
+};
diff --git a/.storybook/blocks/StoryTitle.tsx b/.storybook/blocks/StoryTitle.tsx
new file mode 100644
index 0000000..f37f595
--- /dev/null
+++ b/.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>;
+    }
+  }
+};
diff --git a/.storybook/style.css b/.storybook/style.css
index 8e1951f..388264b 100644
--- a/.storybook/style.css
+++ b/.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);
diff --git a/src/components/list/Docs.mdx b/src/components/list/Docs.mdx
index 713a83f..265639e 100644
--- a/src/components/list/Docs.mdx
+++ b/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>