Skip to content

Commit 56a6146

Browse files
aeagleaeagle
committed
Added React.StrictMode to stories to diagnose rendering issues
1 parent 95bda8a commit 56a6146

File tree

4 files changed

+192
-172
lines changed

4 files changed

+192
-172
lines changed

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

Lines changed: 39 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -16,48 +16,52 @@ Examples of anchored spaces.
1616

1717
<Preview>
1818
<Story name="Non-resizable">
19-
<ViewPort>
20-
<Left size="20%" style={blue}>
21-
{description("Left")}
22-
</Left>
23-
<Fill style={green}>
24-
<Top size="20%" style={red}>
25-
{description("Top")}
26-
</Top>
27-
<Fill style={green}>{description("Fill")}</Fill>
28-
<Bottom size="20%" style={red}>
29-
{description("Bottom")}
30-
</Bottom>
31-
</Fill>
32-
<Right size="20%" style={blue}>
33-
{description("Right")}
34-
</Right>
35-
</ViewPort>
19+
<React.StrictMode>
20+
<ViewPort>
21+
<Left size="20%" style={blue}>
22+
{description("Left")}
23+
</Left>
24+
<Fill style={green}>
25+
<Top size="20%" style={red}>
26+
{description("Top")}
27+
</Top>
28+
<Fill style={green}>{description("Fill")}</Fill>
29+
<Bottom size="20%" style={red}>
30+
{description("Bottom")}
31+
</Bottom>
32+
</Fill>
33+
<Right size="20%" style={blue}>
34+
{description("Right")}
35+
</Right>
36+
</ViewPort>
37+
</React.StrictMode>
3638
</Story>
3739
</Preview>
3840

3941
### Resizable
4042

4143
<Preview>
4244
<Story name="Resizable">
43-
<ViewPort>
44-
<LeftResizable size="20%" style={blue} trackSize={true}>
45-
{description("Left")}
46-
</LeftResizable>
47-
<Fill style={green}>
48-
<TopResizable size="20%" style={red} trackSize={true}>
49-
{description("Top")}
50-
</TopResizable>
51-
<Fill style={green} trackSize={true}>
52-
{description("Fill")}
45+
<React.StrictMode>
46+
<ViewPort>
47+
<LeftResizable size="20%" style={blue} trackSize={true}>
48+
{description("Left")}
49+
</LeftResizable>
50+
<Fill style={green}>
51+
<TopResizable size="20%" style={red} trackSize={true}>
52+
{description("Top")}
53+
</TopResizable>
54+
<Fill style={green} trackSize={true}>
55+
{description("Fill")}
56+
</Fill>
57+
<BottomResizable size="20%" style={red} trackSize={true}>
58+
{description("Bottom")}
59+
</BottomResizable>
5360
</Fill>
54-
<BottomResizable size="20%" style={red} trackSize={true}>
55-
{description("Bottom")}
56-
</BottomResizable>
57-
</Fill>
58-
<RightResizable size="20%" style={blue} trackSize={true}>
59-
{description("Right")}
60-
</RightResizable>
61-
</ViewPort>
61+
<RightResizable size="20%" style={blue} trackSize={true}>
62+
{description("Right")}
63+
</RightResizable>
64+
</ViewPort>
65+
</React.StrictMode>
6266
</Story>
6367
</Preview>

‎src/components/stories/01-examples/01-Nested.stories.mdx

Lines changed: 65 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -16,80 +16,84 @@ Examples of nested spaces.
1616

1717
<Preview>
1818
<Story name="Non-resizable">
19-
<ViewPort>
20-
<Left size="20%" style={green}>
21-
{description("Left")}
22-
</Left>
23-
<Fill style={green}>
24-
<Top size="20%" style={red}>
25-
{description("Top")}
26-
</Top>
19+
<React.StrictMode>
20+
<ViewPort>
21+
<Left size="20%" style={green}>
22+
{description("Left")}
23+
</Left>
2724
<Fill style={green}>
28-
<Left size="20%" style={blue}>
29-
{description("Left")}
30-
</Left>
25+
<Top size="20%" style={red}>
26+
{description("Top")}
27+
</Top>
3128
<Fill style={green}>
32-
<Top size="20%" style={green}>
33-
{description("Top")}
34-
</Top>
35-
<Fill style={red}>{description("Fill")}</Fill>
36-
<Bottom size="20%" style={green}>
37-
{description("Bottom")}
38-
</Bottom>
29+
<Left size="20%" style={blue}>
30+
{description("Left")}
31+
</Left>
32+
<Fill style={green}>
33+
<Top size="20%" style={green}>
34+
{description("Top")}
35+
</Top>
36+
<Fill style={red}>{description("Fill")}</Fill>
37+
<Bottom size="20%" style={green}>
38+
{description("Bottom")}
39+
</Bottom>
40+
</Fill>
41+
<Right size="20%" style={blue}>
42+
{description("Right")}
43+
</Right>
3944
</Fill>
40-
<Right size="20%" style={blue}>
41-
{description("Right")}
42-
</Right>
45+
<Bottom size="20%" style={red}>
46+
{description("Bottom")}
47+
</Bottom>
4348
</Fill>
44-
<Bottom size="20%" style={red}>
45-
{description("Bottom")}
46-
</Bottom>
47-
</Fill>
48-
<Right size="20%" style={green}>
49-
{description("Right")}
50-
</Right>
51-
</ViewPort>
49+
<Right size="20%" style={green}>
50+
{description("Right")}
51+
</Right>
52+
</ViewPort>
53+
</React.StrictMode>
5254
</Story>
5355
</Preview>
5456

5557
### Resizable
5658

5759
<Preview>
5860
<Story name="Resizable">
59-
<ViewPort>
60-
<LeftResizable size="20%" style={green} trackSize={true}>
61-
{description("Left")}
62-
</LeftResizable>
63-
<Fill style={green}>
64-
<TopResizable size="20%" style={red} trackSize={true}>
65-
{description("Top")}
66-
</TopResizable>
67-
<Fill style={green} trackSize={true}>
68-
<LeftResizable size="20%" style={blue} trackSize={true}>
69-
{description("Left")}
70-
</LeftResizable>
71-
<Fill style={green}>
72-
<TopResizable size="20%" style={green} trackSize={true}>
73-
{description("Top")}
74-
</TopResizable>
75-
<Fill style={red} trackSize={true}>
76-
{description("Fill")}
61+
<React.StrictMode>
62+
<ViewPort>
63+
<LeftResizable size="20%" style={green} trackSize={true}>
64+
{description("Left")}
65+
</LeftResizable>
66+
<Fill style={green}>
67+
<TopResizable size="20%" style={red} trackSize={true}>
68+
{description("Top")}
69+
</TopResizable>
70+
<Fill style={green} trackSize={true}>
71+
<LeftResizable size="20%" style={blue} trackSize={true}>
72+
{description("Left")}
73+
</LeftResizable>
74+
<Fill style={green}>
75+
<TopResizable size="20%" style={green} trackSize={true}>
76+
{description("Top")}
77+
</TopResizable>
78+
<Fill style={red} trackSize={true}>
79+
{description("Fill")}
80+
</Fill>
81+
<BottomResizable size="20%" style={green} trackSize={true}>
82+
{description("Bottom")}
83+
</BottomResizable>
7784
</Fill>
78-
<BottomResizable size="20%" style={green} trackSize={true}>
79-
{description("Bottom")}
80-
</BottomResizable>
85+
<RightResizable size="20%" style={blue} trackSize={true}>
86+
{description("Right")}
87+
</RightResizable>
8188
</Fill>
82-
<RightResizable size="20%" style={blue} trackSize={true}>
83-
{description("Right")}
84-
</RightResizable>
89+
<BottomResizable size="20%" style={red} trackSize={true}>
90+
{description("Bottom")}
91+
</BottomResizable>
8592
</Fill>
86-
<BottomResizable size="20%" style={red} trackSize={true}>
87-
{description("Bottom")}
88-
</BottomResizable>
89-
</Fill>
90-
<RightResizable size="20%" style={green} trackSize={true}>
91-
{description("Right")}
92-
</RightResizable>
93-
</ViewPort>
93+
<RightResizable size="20%" style={green} trackSize={true}>
94+
{description("Right")}
95+
</RightResizable>
96+
</ViewPort>`
97+
</React.StrictMode>
9498
</Story>
9599
</Preview>

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

Lines changed: 72 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -16,90 +16,98 @@ Example of stacking spaces.
1616

1717
<Preview>
1818
<Story name="Fixed vertical">
19-
<ViewPort>
20-
<Left size="15%" style={blue} order={1}>
21-
{description("Left 1")}
22-
</Left>
23-
<Left size="15%" style={red} order={2}>
24-
{description("Left 2")}
25-
</Left>
26-
<Fill style={green}>{description("Fill")}</Fill>
27-
<Right size="15%" style={red} order={2}>
28-
{description("Right 2")}
29-
</Right>
30-
<Right size="15%" style={blue} order={1}>
31-
{description("Right 1")}
32-
</Right>
33-
</ViewPort>
19+
<React.StrictMode>
20+
<ViewPort>
21+
<Left size="15%" style={blue} order={1}>
22+
{description("Left 1")}
23+
</Left>
24+
<Left size="15%" style={red} order={2}>
25+
{description("Left 2")}
26+
</Left>
27+
<Fill style={green}>{description("Fill")}</Fill>
28+
<Right size="15%" style={red} order={2}>
29+
{description("Right 2")}
30+
</Right>
31+
<Right size="15%" style={blue} order={1}>
32+
{description("Right 1")}
33+
</Right>
34+
</ViewPort>
35+
</React.StrictMode>
3436
</Story>
3537
</Preview>
3638

3739
### Top and bottom stacked spaces
3840

3941
<Preview>
4042
<Story name="Fixed horizontal">
41-
<ViewPort>
42-
<Top size="15%" style={blue} order={1}>
43-
{description("Top 1")}
44-
</Top>
45-
<Top size="15%" style={red} order={2}>
46-
{description("Top 2")}
47-
</Top>
48-
<Fill style={green}>{description("Fill")}</Fill>
49-
<Bottom size="15%" style={red} order={2}>
50-
{description("Bottom 2")}
51-
</Bottom>
52-
<Bottom size="15%" style={blue} order={1}>
53-
{description("Bottom 1")}
54-
</Bottom>
55-
</ViewPort>
43+
<React.StrictMode>
44+
<ViewPort>
45+
<Top size="15%" style={blue} order={1}>
46+
{description("Top 1")}
47+
</Top>
48+
<Top size="15%" style={red} order={2}>
49+
{description("Top 2")}
50+
</Top>
51+
<Fill style={green}>{description("Fill")}</Fill>
52+
<Bottom size="15%" style={red} order={2}>
53+
{description("Bottom 2")}
54+
</Bottom>
55+
<Bottom size="15%" style={blue} order={1}>
56+
{description("Bottom 1")}
57+
</Bottom>
58+
</ViewPort>
59+
</React.StrictMode>
5660
</Story>
5761
</Preview>
5862

5963
### Left and right resizable stacked spaces
6064

6165
<Preview>
6266
<Story name="Resizable vertical">
63-
<ViewPort>
64-
<LeftResizable size="15%" style={blue} trackSize={true} order={1}>
65-
{description("Left 1")}
66-
</LeftResizable>
67-
<LeftResizable size="15%" style={red} trackSize={true} order={2}>
68-
{description("Left 2")}
69-
</LeftResizable>
70-
<Fill style={green} trackSize={true}>
71-
{description("Fill")}
72-
</Fill>
73-
<RightResizable size="15%" style={red} trackSize={true} order={2}>
74-
{description("Right 2")}
75-
</RightResizable>
76-
<RightResizable size="15%" style={blue} trackSize={true} order={1}>
77-
{description("Right 1")}
78-
</RightResizable>
79-
</ViewPort>
67+
<React.StrictMode>
68+
<ViewPort>
69+
<LeftResizable size="15%" style={blue} trackSize={true} order={1}>
70+
{description("Left 1")}
71+
</LeftResizable>
72+
<LeftResizable size="15%" style={red} trackSize={true} order={2}>
73+
{description("Left 2")}
74+
</LeftResizable>
75+
<Fill style={green} trackSize={true}>
76+
{description("Fill")}
77+
</Fill>
78+
<RightResizable size="15%" style={red} trackSize={true} order={2}>
79+
{description("Right 2")}
80+
</RightResizable>
81+
<RightResizable size="15%" style={blue} trackSize={true} order={1}>
82+
{description("Right 1")}
83+
</RightResizable>
84+
</ViewPort>
85+
</React.StrictMode>
8086
</Story>
8187
</Preview>
8288

8389
### Top and bottom resizable stacked spaces
8490

8591
<Preview>
8692
<Story name="Resizable horizontal">
87-
<ViewPort>
88-
<TopResizable size="15%" style={blue} trackSize={true} order={1}>
89-
{description("Top 1")}
90-
</TopResizable>
91-
<TopResizable size="15%" style={red} trackSize={true} order={2}>
92-
{description("Top 2")}
93-
</TopResizable>
94-
<Fill style={green} trackSize={true}>
95-
{description("Fill")}
96-
</Fill>
97-
<BottomResizable size="15%" style={red} trackSize={true} order={2}>
98-
{description("Bottom 2")}
99-
</BottomResizable>
100-
<BottomResizable size="15%" style={blue} trackSize={true} order={1}>
101-
{description("Bottom 1")}
102-
</BottomResizable>
103-
</ViewPort>
93+
<React.StrictMode>
94+
<ViewPort>
95+
<TopResizable size="15%" style={blue} trackSize={true} order={1}>
96+
{description("Top 1")}
97+
</TopResizable>
98+
<TopResizable size="15%" style={red} trackSize={true} order={2}>
99+
{description("Top 2")}
100+
</TopResizable>
101+
<Fill style={green} trackSize={true}>
102+
{description("Fill")}
103+
</Fill>
104+
<BottomResizable size="15%" style={red} trackSize={true} order={2}>
105+
{description("Bottom 2")}
106+
</BottomResizable>
107+
<BottomResizable size="15%" style={blue} trackSize={true} order={1}>
108+
{description("Bottom 1")}
109+
</BottomResizable>
110+
</ViewPort>
111+
</React.StrictMode>
104112
</Story>
105113
</Preview>

0 commit comments

Comments
 (0)