Skip to content

Commit

Permalink
docs: collapse code examples in a custom Example story block
Browse files Browse the repository at this point in the history
MiroslavPetrik committed Mar 9, 2024
1 parent 4aef722 commit efbd0af
Showing 4 changed files with 67 additions and 23 deletions.
25 changes: 25 additions & 0 deletions .storybook/blocks/Example.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
);
};
16 changes: 16 additions & 0 deletions .storybook/blocks/StoryTitle.tsx
Original file line number Diff line number Diff line change
@@ -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>;
}
}
};
12 changes: 12 additions & 0 deletions .storybook/style.css
Original file line number Diff line number Diff line change
@@ -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);
37 changes: 14 additions & 23 deletions src/components/list/Docs.mdx
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit efbd0af

Please sign in to comment.