Merge pull request aeagle#167 from aeagle/fix-nested-story

Fix nested story
innFactory · Apr 21, 2024 · 038342d · 038342d
2 parents a4fd9c9 + 4ca0674
commit 038342d
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 23 deletions.
diff --git a/src/components/stories/01-examples/01-Nested.mdx b/src/components/stories/01-examples/01-Nested.mdx
@@ -0,0 +1,22 @@
+import { Meta, Story, Canvas, Props } from "@storybook/addon-docs";
+
+import { ViewPort, Left, Top, Right, Bottom, LeftResizable, TopResizable, RightResizable, BottomResizable, Fill } from "../../";
+import { red, green, blue, description } from "../Utils";
+import { CommonHeader } from "../Utils";
+import * as Stories from './01-Nested.stories';
+
+<CommonHeader />
+
+<Meta of={Stories} />
+
+## Nested spaces
+
+Examples of nested spaces.
+
+### Non-resizable
+
+<Canvas of={Stories.NonResizable} />
+
+### Resizable
+
+<Canvas of={Stories.Resizable} />
diff --git a/.../01-examples/01-Nested.stories.mdx.broken → ...stories/01-examples/01-Nested.stories.tsx b/.../01-examples/01-Nested.stories.mdx.broken → ...stories/01-examples/01-Nested.stories.tsx
@@ -1,21 +1,13 @@
-import { Meta, Story, Canvas, Props } from "@storybook/addon-docs";
-
-import { ViewPort, Left, Top, Right, Bottom, LeftResizable, TopResizable, RightResizable, BottomResizable, Fill } from "../../";
+import * as React from "react";
+import { ViewPort, Left, Top, Right, Bottom, LeftResizable, TopResizable, RightResizable, BottomResizable, Fill } from "../..";
 import { red, green, blue, description } from "../Utils";
-import { CommonHeader } from "../Utils";
-
-<CommonHeader />
-
-<Meta title="Basic examples/Nested" />
-
-## Nested spaces
 
-Examples of nested spaces.
+export default {
+	title: "Basic examples/Nested",
+};
 
-### Non-resizable
-
-<Canvas>
-	<Story name="Non-resizable">
+export const NonResizable = {
+	render: () => (
 		<React.StrictMode>
 			<ViewPort>
 				<Left size="20%" style={green}>
@@ -51,13 +43,13 @@ Examples of nested spaces.
 				</Right>
 			</ViewPort>
 		</React.StrictMode>
-	</Story>
-</Canvas>
+	),
 
-### Resizable
+	name: "Non-resizable",
+};
 
-<Canvas>
-	<Story name="Resizable">
+export const Resizable = {
+	render: () => (
 		<React.StrictMode>
 			<ViewPort>
 				<LeftResizable size="20%" style={green} trackSize={true}>
@@ -93,7 +85,10 @@ Examples of nested spaces.
 				<RightResizable size="20%" style={green} trackSize={true}>
 					{description("Right")}
 				</RightResizable>
-			</ViewPort>`
+			</ViewPort>
+			`
 		</React.StrictMode>
-	</Story>
-</Canvas>
+	),
+
+	name: "Resizable",
+};