Skip to content

Commit 35e9941

Browse files
aeagleaeagle
committed
Added more component stories
1 parent e27ddd6 commit 35e9941

17 files changed

+580
-6
lines changed

‎react-spaces/src/Hooks/useSpace.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,9 @@ export const useSpace = (props: AllProps, spaceElement: React.MutableRefObject<H
171171
state.children,
172172
(children) => setState({ children: children }),
173173
(resizing) => setState({ resizing: resizing }),
174-
(event, onDragEnd) => startMouseDrag(event, parentContext, space, spaceElement.current, onDragEnd),
174+
(event, onDragEnd) => {
175+
startMouseDrag(event, parentContext, space, spaceElement.current, onDragEnd);
176+
},
175177
(event, resizeType, onResizeEnd) =>
176178
startMouseResize(
177179
event,

‎react-spaces/src/components/stories/Bottom.stories.mdx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
22
import { withKnobs } from "@storybook/addon-knobs";
33
import { ViewPort } from "../ViewPort";
44
import { Bottom } from "../Space";
5-
import { green, description } from "./Utils";
5+
import { green, description, lorem } from "./Utils";
66

77
<Meta title="Components|Bottom" component={Bottom} />
88

@@ -25,6 +25,13 @@ Anchored space on the bottom edge of it's parent.
2525
</Bottom>
2626
</ViewPort>
2727
</Story>
28+
<Story name="Scrollable">
29+
<ViewPort>
30+
<Bottom style={green} size={300} scrollable={true}>
31+
{lorem}
32+
</Bottom>
33+
</ViewPort>
34+
</Story>
2835
</Preview>
2936

3037
# Properties

‎react-spaces/src/components/stories/BottomResizable.stories.mdx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
2+
import { withKnobs } from "@storybook/addon-knobs";
3+
import { ViewPort } from "../ViewPort";
4+
import { BottomResizable } from "../Space";
5+
import { green, description, lorem } from "./Utils";
6+
7+
<Meta title="Components|BottomResizable" component={BottomResizable} />
8+
9+
# Default
10+
11+
Anchored resizable space on the bottom edge of it's parent.
12+
13+
<Preview>
14+
<Story name="Default (%)">
15+
<ViewPort>
16+
<BottomResizable style={green} size="50%" trackSize={true}>
17+
{description("Bottom resizable")}
18+
</BottomResizable>
19+
</ViewPort>
20+
</Story>
21+
<Story name="Default (px)">
22+
<ViewPort>
23+
<BottomResizable style={green} size={300} trackSize={true}>
24+
{description("Bottom resizable")}
25+
</BottomResizable>
26+
</ViewPort>
27+
</Story>
28+
<Story name="With resize constraints">
29+
<ViewPort>
30+
<BottomResizable style={green} size={300} trackSize={true} minimumSize={150} maximumSize={450}>
31+
{description("Bottom resizable")}
32+
</BottomResizable>
33+
</ViewPort>
34+
</Story>
35+
<Story name="Scrollable">
36+
<ViewPort>
37+
<BottomResizable style={green} size={300} scrollable={true}>
38+
{lorem}
39+
</BottomResizable>
40+
</ViewPort>
41+
</Story>
42+
</Preview>
43+
44+
# Properties
45+
46+
<Props of={BottomResizable} />

‎react-spaces/src/components/stories/Centered.stories.mdx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
2+
import { withKnobs } from "@storybook/addon-knobs";
3+
import { ViewPort } from "../ViewPort";
4+
import { Centered } from "../Centered";
5+
import { blue } from "./Utils";
6+
7+
<Meta title="Components|Centered" component={Centered} />
8+
9+
# Default
10+
11+
Centered children horizontally and vertically within a space.
12+
13+
<Preview>
14+
<Story name="Default">
15+
<ViewPort style={blue}>
16+
<Centered>Centered conten horizontally and vertically</Centered>
17+
</ViewPort>
18+
</Story>
19+
</Preview>
20+
21+
# Properties
22+
23+
<Props of={Centered} />

‎react-spaces/src/components/stories/CenteredVertically.stories.mdx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
2+
import { withKnobs } from "@storybook/addon-knobs";
3+
import { ViewPort } from "../ViewPort";
4+
import { CenteredVertically } from "../Centered";
5+
import { blue } from "./Utils";
6+
7+
<Meta title="Components|CenteredVertically" component={CenteredVertically} />
8+
9+
# Default
10+
11+
Centers children vertically within a space.
12+
13+
<Preview>
14+
<Story name="Default">
15+
<ViewPort style={blue}>
16+
<CenteredVertically>Centered content vertically</CenteredVertically>
17+
</ViewPort>
18+
</Story>
19+
</Preview>
20+
21+
# Properties
22+
23+
<Props of={CenteredVertically} />

‎react-spaces/src/components/stories/Custom.stories.mdx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
2+
import { withKnobs } from "@storybook/addon-knobs";
3+
import { ViewPort } from "../ViewPort";
4+
import { Custom } from "../Space";
5+
import { AnchorType } from "../../types";
6+
import { green, description } from "./Utils";
7+
8+
<Meta title="Components|Custom" component={Custom} />
9+
10+
# Default
11+
12+
A space that can be any other type of space given it's properties. You should use this space if you
13+
intend to change the type of the space dynamically without causing remounting of child components.
14+
15+
<Preview>
16+
<Story name="Fill">
17+
<ViewPort>
18+
<Custom style={green}>{description("Custom fill")}</Custom>
19+
</ViewPort>
20+
</Story>
21+
<Story name="Positioned">
22+
<ViewPort>
23+
<Custom style={green} left={200} top={200} width={300} height={300} isPositioned={true}>
24+
{description("Custom positioned")}
25+
</Custom>
26+
</ViewPort>
27+
</Story>
28+
<Story name="Anchored left">
29+
<ViewPort>
30+
<Custom style={green} anchor={AnchorType.Left} anchorSize={200}>
31+
{description("Custom anchored left")}
32+
</Custom>
33+
</ViewPort>
34+
</Story>
35+
<Story name="Anchored top">
36+
<ViewPort>
37+
<Custom style={green} anchor={AnchorType.Top} anchorSize={200}>
38+
{description("Custom anchored top")}
39+
</Custom>
40+
</ViewPort>
41+
</Story>
42+
<Story name="Anchored right">
43+
<ViewPort>
44+
<Custom style={green} anchor={AnchorType.Right} anchorSize={200}>
45+
{description("Custom anchored right")}
46+
</Custom>
47+
</ViewPort>
48+
</Story>
49+
<Story name="Anchored bottom">
50+
<ViewPort>
51+
<Custom style={green} anchor={AnchorType.Bottom} anchorSize={200}>
52+
{description("Custom anchored bottom")}
53+
</Custom>
54+
</ViewPort>
55+
</Story>
56+
<Story name="Resizable left">
57+
<ViewPort>
58+
<Custom style={green} anchor={AnchorType.Left} anchorSize={200} resizable={true} trackSize={true}>
59+
{description("Custom resizable left")}
60+
</Custom>
61+
</ViewPort>
62+
</Story>
63+
<Story name="Resizable top">
64+
<ViewPort>
65+
<Custom style={green} anchor={AnchorType.Top} anchorSize={200} resizable={true} trackSize={true}>
66+
{description("Custom resizable top")}
67+
</Custom>
68+
</ViewPort>
69+
</Story>
70+
<Story name="Resizable right">
71+
<ViewPort>
72+
<Custom style={green} anchor={AnchorType.Right} anchorSize={200} resizable={true} trackSize={true}>
73+
{description("Custom resizable right")}
74+
</Custom>
75+
</ViewPort>
76+
</Story>
77+
<Story name="Resizable bottom">
78+
<ViewPort>
79+
<Custom style={green} anchor={AnchorType.Bottom} anchorSize={200} resizable={true} trackSize={true}>
80+
{description("Custom resizable bottom")}
81+
</Custom>
82+
</ViewPort>
83+
</Story>
84+
</Preview>
85+
86+
# Properties
87+
88+
<Props of={Custom} />

‎react-spaces/src/components/stories/Fill.stories.mdx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
2+
import { withKnobs } from "@storybook/addon-knobs";
3+
import { ViewPort } from "../ViewPort";
4+
import { Left, Top, Right, Bottom, LeftResizable, TopResizable, RightResizable, BottomResizable, Fill } from "../Space";
5+
import { green, description, lorem } from "./Utils";
6+
7+
<Meta title="Components|Fill" component={Fill} />
8+
9+
# Default
10+
11+
Space which fills all remaining space taken up by anchored spaces.
12+
13+
<Preview>
14+
<Story name="With left space">
15+
<ViewPort>
16+
<Left size="20%">{description("Left 20%")}</Left>
17+
<Fill style={green}>{description("Fill")}</Fill>
18+
</ViewPort>
19+
</Story>
20+
<Story name="With top space">
21+
<ViewPort>
22+
<Top size="20%">{description("Top 20%")}</Top>
23+
<Fill style={green}>{description("Fill")}</Fill>
24+
</ViewPort>
25+
</Story>
26+
<Story name="With right space">
27+
<ViewPort>
28+
<Right size="20%">{description("Right 20%")}</Right>
29+
<Fill style={green}>{description("Fill")}</Fill>
30+
</ViewPort>
31+
</Story>
32+
<Story name="With bottom space">
33+
<ViewPort>
34+
<Bottom size="20%">{description("Bottom 20%")}</Bottom>
35+
<Fill style={green}>{description("Fill")}</Fill>
36+
</ViewPort>
37+
</Story>
38+
<Story name="With left resizable space">
39+
<ViewPort>
40+
<LeftResizable size="20%" trackSize={true}>
41+
{description("Left resizable 20%")}
42+
</LeftResizable>
43+
<Fill style={green} trackSize={true}>
44+
{description("Fill")}
45+
</Fill>
46+
</ViewPort>
47+
</Story>
48+
<Story name="With top resizable space">
49+
<ViewPort>
50+
<TopResizable size="20%" trackSize={true}>
51+
{description("Top resizable 20%")}
52+
</TopResizable>
53+
<Fill style={green} trackSize={true}>
54+
{description("Fill")}
55+
</Fill>
56+
</ViewPort>
57+
</Story>
58+
<Story name="With right resizable space">
59+
<ViewPort>
60+
<RightResizable size="20%" trackSize={true}>
61+
{description("Right resizable 20%")}
62+
</RightResizable>
63+
<Fill style={green} trackSize={true}>
64+
{description("Fill")}
65+
</Fill>
66+
</ViewPort>
67+
</Story>
68+
<Story name="With bottom resizable space">
69+
<ViewPort>
70+
<BottomResizable size="20%" trackSize={true}>
71+
{description("Bottom resizable 20%")}
72+
</BottomResizable>
73+
<Fill style={green} trackSize={true}>
74+
{description("Fill")}
75+
</Fill>
76+
</ViewPort>
77+
</Story>
78+
<Story name="Scrollable">
79+
<ViewPort>
80+
<Fill style={green} scrollable={true}>
81+
{lorem}
82+
</Fill>
83+
</ViewPort>
84+
</Story>
85+
</Preview>
86+
87+
# Properties
88+
89+
<Props of={Fill} />

‎react-spaces/src/components/stories/Fixed.stories.mdx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
2+
import { withKnobs } from "@storybook/addon-knobs";
3+
import { Fixed } from "../Fixed";
4+
import { Centered } from "../Centered";
5+
import { LeftResizable, TopResizable, RightResizable, BottomResizable, Fill } from "../Space";
6+
import { red, green, blue, description } from "./Utils";
7+
8+
<Meta title="Components|Fixed" component={Fixed} />
9+
10+
# Default
11+
12+
Top-level space with a fixed height and optional width.
13+
14+
<Preview>
15+
<Story name="With width">
16+
<Fixed style={blue} width={300} height={300}>
17+
{description("Fixed 300px x 300px")}
18+
</Fixed>
19+
</Story>
20+
<Story name="Without width">
21+
<Fixed style={blue} height={300}>
22+
{description("Fixed 100% x 300px")}
23+
</Fixed>
24+
</Story>
25+
</Preview>
26+
27+
# Properties
28+
29+
<Props of={Fixed} />

‎react-spaces/src/components/stories/Left.stories.mdx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
22
import { withKnobs } from "@storybook/addon-knobs";
33
import { ViewPort } from "../ViewPort";
44
import { Left } from "../Space";
5-
import { green, description } from "./Utils";
5+
import { green, description, lorem } from "./Utils";
66

77
<Meta title="Components|Left" component={Left} />
88

@@ -25,6 +25,13 @@ Anchored space on the left edge of it's parent.
2525
</Left>
2626
</ViewPort>
2727
</Story>
28+
<Story name="Scrollable">
29+
<ViewPort>
30+
<Left style={green} size={300} scrollable={true}>
31+
{lorem}
32+
</Left>
33+
</ViewPort>
34+
</Story>
2835
</Preview>
2936

3037
# Properties

0 commit comments

Comments
 (0)