Skip to content

Commit 3c2aa45

Browse files
aeagleaeagle
committed
Story fixes
1 parent b7ee4f5 commit 3c2aa45

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+389
-654
lines changed

‎.storybook/main.js

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
11
const path = require("path");
22

33
module.exports = {
4-
stories: ["../src/**/*.@(mdx|stories.@(tsx))"],
5-
6-
addons: ["@storybook/addon-actions", "@storybook/addon-links", {
7-
name: "@storybook/addon-docs",
8-
options: {
9-
configureJSX: true,
10-
inlineStories: false,
11-
},
12-
}, "@storybook/addon-mdx-gfm", "@storybook/addon-webpack5-compiler-babel"],
13-
14-
webpackFinal: async (config, { configType }) => {
4+
stories: ["../src/**/*.@(mdx|stories.@(tsx))"],
5+
6+
addons: [
7+
"@storybook/addon-actions",
8+
"@storybook/addon-links",
9+
{
10+
name: "@storybook/addon-docs",
11+
options: {
12+
configureJSX: true,
13+
inlineStories: false,
14+
},
15+
},
16+
"@storybook/addon-mdx-gfm",
17+
"@storybook/addon-webpack5-compiler-babel",
18+
],
19+
20+
webpackFinal: async (config, { configType }) => {
1521
if (process.env.NODE === "production") {
1622
config.output.publicPath = "/react-spaces/docs";
1723
}
@@ -25,15 +31,19 @@ module.exports = {
2531
return config;
2632
},
2733

28-
framework: {
29-
name: "@storybook/react-webpack5",
34+
framework: {
35+
name: "@storybook/react-webpack5",
3036

31-
options: {
32-
strictMode: true
33-
}
34-
},
37+
options: {
38+
strictMode: true,
39+
},
40+
},
3541

36-
docs: {
37-
autodocs: true
38-
}
42+
docs: {
43+
autodocs: true,
44+
story: {
45+
inline: false,
46+
height: "500px",
47+
},
48+
},
3949
};

‎.storybook/preview.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const parameters = {
2+
docs: {
3+
story: {
4+
inline: false, // Render stories in an iframe
5+
},
6+
},
7+
};

‎src/components/stories/00-docs/01-GettingStarted.components.tsx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import * as React from "react";
2+
import { LeftResizable, Fill, Fixed, BottomResizable, Top } from "../..";
3+
import { CenterType } from "../../../core-types";
4+
5+
export default {
6+
title: "React Spaces/Getting started",
7+
};
8+
9+
export const Demo1 = () => (
10+
<React.StrictMode>
11+
<Fixed style={{ outline: "1px solid black" }} className="container" height={400}>
12+
<LeftResizable style={{ borderRight: "1px dashed black" }} size="25%" centerContent={CenterType.HorizontalVertical}>
13+
Sidebar
14+
</LeftResizable>
15+
16+
<Fill centerContent={CenterType.HorizontalVertical}>Main content</Fill>
17+
</Fixed>
18+
</React.StrictMode>
19+
);
20+
21+
export const Demo2 = () => (
22+
<React.StrictMode>
23+
<Fixed style={{ outline: "1px solid black" }} className="container" height={400}>
24+
<LeftResizable style={{ borderRight: "1px dashed black" }} size="25%" centerContent={CenterType.HorizontalVertical}>
25+
Sidebar
26+
</LeftResizable>
27+
28+
<Fill>
29+
<Fill centerContent={CenterType.HorizontalVertical}>Main content</Fill>
30+
31+
<BottomResizable style={{ borderTop: "1px dashed black" }} size={100} centerContent={CenterType.HorizontalVertical}>
32+
Bottom area
33+
</BottomResizable>
34+
</Fill>
35+
</Fixed>
36+
</React.StrictMode>
37+
);
38+
39+
export const Demo3 = () => (
40+
<React.StrictMode>
41+
<Fixed style={{ outline: "1px solid black" }} className="container" height={400}>
42+
<Top style={{ borderBottom: "1px dashed black", padding: 5 }} order={1} size={25} centerContent={CenterType.Vertical}>
43+
Title
44+
</Top>
45+
46+
<Top style={{ borderBottom: "1px dashed black", padding: 5 }} order={2} size={25} centerContent={CenterType.Vertical}>
47+
Menu bar
48+
</Top>
49+
50+
<Fill>
51+
<LeftResizable style={{ borderRight: "1px dashed black" }} size="25%">
52+
<Top style={{ borderBottom: "1px dashed black", padding: 5 }} size={25} centerContent={CenterType.Vertical}>
53+
Sidebar title
54+
</Top>
55+
<Fill centerContent={CenterType.HorizontalVertical}>Sidebar</Fill>
56+
</LeftResizable>
57+
58+
<Fill>
59+
<Fill centerContent={CenterType.HorizontalVertical}>Main content</Fill>
60+
61+
<BottomResizable style={{ borderTop: "1px dashed black" }} size={100} centerContent={CenterType.HorizontalVertical}>
62+
Bottom area
63+
</BottomResizable>
64+
</Fill>
65+
</Fill>
66+
</Fixed>
67+
</React.StrictMode>
68+
);

‎src/components/stories/00-docs/01-GettingStarted.mdx

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { Meta, Story, Canvas, Props } from "@storybook/blocks";
22
import { CommonHeader, DemoUI } from "../Utils";
33
import { CenterType, ViewPort, Fixed, Top, Right, LeftResizable, BottomResizable, Fill, Options } from "../../..";
4-
import * as Stories from "./01-GettingStarted.stories";
4+
import * as Stories from "./01-GettingStarted.components";
55

66
<CommonHeader />
77

8-
<Meta of={Stories} />
8+
<Meta title="React Spaces/Getting started" />
99

1010
## Getting started
1111

@@ -48,9 +48,7 @@ lines and text alignment have been added specifically for this example. In pract
4848
have any visual element, padding or margins leaving it up to you to fill them or style them however
4949
you want.*
5050

51-
<Canvas>
52-
<Story of={Stories.Demo1} />
53-
</Canvas>
51+
<Stories.Demo1 />
5452

5553
Notice how the fill space automatically adjusts it's size when the left resizable space is resized with
5654
the mouse.
@@ -81,9 +79,7 @@ const App = () => (
8179

8280
Here we have added additional nested spaces inside the original `<Fill />` space to achieve this:
8381

84-
<Canvas>
85-
<Story of={Stories.Demo2} />
86-
</Canvas>
82+
<Stories.Demo2 />
8783

8884
We can add further nested spaces to add elements like title bars into different areas.
8985

@@ -122,9 +118,7 @@ const App = () => (
122118

123119
Now we have something like below:
124120

125-
<Canvas>
126-
<Story of={Stories.Demo3} />
127-
</Canvas>
121+
<Stories.Demo3 />
128122

129123
### Introducing simple interactivity
130124

‎src/components/stories/00-docs/01-GettingStarted.stories.tsx

Lines changed: 0 additions & 76 deletions
This file was deleted.

‎src/components/stories/01-examples/00-Anchored.mdx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,8 @@ Examples of anchored spaces.
1515

1616
### Non-resizable
1717

18-
<Canvas>
19-
<Story of={Stories.NonResizable} />
20-
</Canvas>
18+
<Canvas of={Stories.NonResizable} />
2119

2220
### Resizable
2321

24-
<Canvas>
25-
<Story of={Stories.Resizable} />
26-
</Canvas>
22+
<Canvas of={Stories.Resizable} />

‎src/components/stories/01-examples/02-Stacked.mdx

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,24 +15,16 @@ Example of stacking spaces.
1515

1616
### Left and right stacked spaces
1717

18-
<Canvas>
19-
<Story of={$02StackedStories.FixedVertical} />
20-
</Canvas>
18+
<Canvas of={$02StackedStories.FixedVertical} />
2119

2220
### Top and bottom stacked spaces
2321

24-
<Canvas>
25-
<Story of={$02StackedStories.FixedHorizontal} />
26-
</Canvas>
22+
<Canvas of={$02StackedStories.FixedHorizontal} />
2723

2824
### Left and right resizable stacked spaces
2925

30-
<Canvas>
31-
<Story of={$02StackedStories.ResizableVertical} />
32-
</Canvas>
26+
<Canvas of={$02StackedStories.ResizableVertical} />
3327

3428
### Top and bottom resizable stacked spaces
3529

36-
<Canvas>
37-
<Story of={$02StackedStories.ResizableHorizontal} />
38-
</Canvas>
30+
<Canvas of={$02StackedStories.ResizableHorizontal} />

‎src/components/stories/01-examples/03-ControlledSize.mdx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,10 @@ only the initial size of a space and React Spaces deals with any resizing. To ke
1717
space controlled in state you need to use the onResizeEnd event to set the new size of a space
1818
after a resize back to a state value.
1919

20-
<Canvas>
21-
<Story of={$03ControlledSizeStories.ControlledSize} />
22-
</Canvas>
20+
<Canvas of={$03ControlledSizeStories.ControlledSize} />
2321

2422
## Cancelling resize with onResizeStart
2523

2624
You can cancel a resize by returning `false` from a onResizeStart event handler.
2725

28-
<Canvas>
29-
<Story of={$03ControlledSizeStories.CancelledResize} />
30-
</Canvas>
26+
<Canvas of={$03ControlledSizeStories.CancelledResize} />

‎src/components/stories/01-examples/05-CustomHandles.mdx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,4 @@ import * as $05CustomHandlesStories from './05-CustomHandles.stories';
1414

1515
Example of a custom resize handle that renders an up arrow for bottom or top resizable
1616

17-
<Canvas>
18-
<Story of={$05CustomHandlesStories.SimpleExample} />
19-
</Canvas>
17+
<Canvas of={$05CustomHandlesStories.SimpleExample} />

‎src/components/stories/02-components/Bottom.mdx

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,16 @@ Anchored space on the bottom edge of it's parent.
1515

1616
### Specifying a % size
1717

18-
<Canvas>
19-
<Story of={BottomStories.Default} />
20-
</Canvas>
18+
<Canvas of={BottomStories.Default} />
2119

2220
### Specifying a pixel size
2321

24-
<Canvas>
25-
<Story of={BottomStories.DefaultPx} />
26-
</Canvas>
22+
<Canvas of={BottomStories.DefaultPx} />
2723

2824
### As a scrollable space
2925

30-
<Canvas>
31-
<Story of={BottomStories.Scrollable} />
32-
</Canvas>
26+
<Canvas of={BottomStories.Scrollable} />
3327

3428
### Properties
3529

36-
<Story of={BottomStories.Properties} />
30+
<BottomStories.Properties />

0 commit comments

Comments
 (0)