Skip to content

Commit d8668ce

Browse files
WillsonHawWillsonHaw
committed
Add RN version of column and row
1 parent 679d217 commit d8668ce

File tree

9 files changed

+440
-1
lines changed

9 files changed

+440
-1
lines changed

‎.changeset/giant-bottles-punch.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@plexinc/react-native-lightning-components": patch
3+
"@plexinc/react-lightning-storybook": patch
4+
---
5+
6+
Add RN version Column/Row components

‎apps/storybook/.storybook/main.ts

+3
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@ const config: StorybookConfig = {
3838

3939
return config;
4040
},
41+
core: {
42+
disableTelemetry: true,
43+
},
4144
};
4245

4346
export default config;

‎apps/storybook/src/react-native-lightning-components/layout/Column.stories.tsx

+176
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
import { Column } from '@plexinc/react-native-lightning-components';
2+
import type { Meta } from '@storybook/react';
3+
import {
4+
ColorPalette,
5+
DefaultStoryHeight,
6+
DefaultStoryWidth,
7+
FlexTypes,
8+
} from '../../helpers/constants';
9+
10+
type ColumnLayoutProps = {
11+
justifyContent?: FlexTypes;
12+
};
13+
14+
const ExampleBox = () => {
15+
// Get random color from the ColorPalette.
16+
const color = ColorPalette[Math.floor(Math.random() * ColorPalette.length)];
17+
return <lng-view style={{ width: 125, height: 125, color }} />;
18+
};
19+
20+
export default {
21+
title: '@plexinc∕react-native-lightning-components/Layout/Column',
22+
component: Column,
23+
argTypes: {
24+
justifyContent: {
25+
type: { name: 'string', required: false },
26+
description: 'Flex Type',
27+
table: {
28+
type: { summary: 'string' },
29+
defaultValue: { summary: FlexTypes.FLEX_START },
30+
},
31+
options: [
32+
FlexTypes.FLEX_START,
33+
FlexTypes.FLEX_END,
34+
FlexTypes.SPACE_EVENLY,
35+
FlexTypes.SPACE_BETWEEN,
36+
FlexTypes.SPACE_AROUND,
37+
],
38+
control: {
39+
type: 'select',
40+
labels: {
41+
flexStart: FlexTypes.FLEX_START,
42+
flexEnd: FlexTypes.FLEX_END,
43+
spaceEvenly: FlexTypes.SPACE_EVENLY,
44+
spaceBetween: FlexTypes.SPACE_BETWEEN,
45+
spaceAround: FlexTypes.SPACE_AROUND,
46+
},
47+
},
48+
},
49+
},
50+
tags: ['reactNative'],
51+
} as Meta<typeof Column>;
52+
53+
export const FlexStart = ({
54+
justifyContent = FlexTypes.FLEX_START,
55+
}: ColumnLayoutProps) => {
56+
return (
57+
<Column
58+
focusable
59+
style={{
60+
justifyContent,
61+
gap: 10,
62+
width: DefaultStoryWidth,
63+
height: DefaultStoryHeight,
64+
color: 0xcccc00ff,
65+
}}
66+
>
67+
<ExampleBox />
68+
<ExampleBox />
69+
<ExampleBox />
70+
</Column>
71+
);
72+
};
73+
74+
FlexStart.args = {
75+
justifyContent: FlexTypes.FLEX_START,
76+
};
77+
78+
export const FlexEnd = ({
79+
justifyContent = FlexTypes.FLEX_END,
80+
}: ColumnLayoutProps) => {
81+
return (
82+
<Column
83+
focusable
84+
style={{
85+
justifyContent,
86+
gap: 10,
87+
width: DefaultStoryWidth,
88+
height: DefaultStoryHeight,
89+
color: 0xcccc00ff,
90+
}}
91+
>
92+
<ExampleBox />
93+
<ExampleBox />
94+
<ExampleBox />
95+
</Column>
96+
);
97+
};
98+
99+
FlexEnd.args = {
100+
justifyContent: FlexTypes.FLEX_END,
101+
};
102+
103+
export const SpaceEvenly = ({
104+
justifyContent = FlexTypes.SPACE_EVENLY,
105+
}: ColumnLayoutProps) => {
106+
return (
107+
<Column
108+
focusable
109+
style={{
110+
justifyContent,
111+
gap: 10,
112+
width: DefaultStoryWidth,
113+
height: DefaultStoryHeight,
114+
color: 0xcccc00ff,
115+
}}
116+
>
117+
<ExampleBox />
118+
<ExampleBox />
119+
<ExampleBox />
120+
</Column>
121+
);
122+
};
123+
124+
SpaceEvenly.args = {
125+
justifyContent: FlexTypes.SPACE_EVENLY,
126+
};
127+
128+
export const SpaceBetween = ({
129+
justifyContent = FlexTypes.SPACE_BETWEEN,
130+
}: ColumnLayoutProps) => {
131+
return (
132+
<Column
133+
focusable
134+
style={{
135+
justifyContent,
136+
gap: 10,
137+
width: DefaultStoryWidth,
138+
height: DefaultStoryHeight,
139+
color: 0xcccc00ff,
140+
}}
141+
>
142+
<ExampleBox />
143+
<ExampleBox />
144+
<ExampleBox />
145+
</Column>
146+
);
147+
};
148+
149+
SpaceBetween.args = {
150+
justifyContent: FlexTypes.SPACE_BETWEEN,
151+
};
152+
153+
export const SpaceAround = ({
154+
justifyContent = FlexTypes.SPACE_AROUND,
155+
}: ColumnLayoutProps) => {
156+
return (
157+
<Column
158+
focusable
159+
style={{
160+
justifyContent,
161+
gap: 10,
162+
width: DefaultStoryWidth,
163+
height: DefaultStoryHeight,
164+
color: 0xcccc00ff,
165+
}}
166+
>
167+
<ExampleBox />
168+
<ExampleBox />
169+
<ExampleBox />
170+
</Column>
171+
);
172+
};
173+
174+
SpaceAround.args = {
175+
justifyContent: FlexTypes.SPACE_AROUND,
176+
};

‎apps/storybook/src/react-native-lightning-components/layout/Row.stories.tsx

+177
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
import { Row } from '@plexinc/react-native-lightning-components';
2+
import type { Meta } from '@storybook/react';
3+
import {
4+
ColorPalette,
5+
DefaultStoryHeight,
6+
DefaultStoryWidth,
7+
FlexTypes,
8+
} from '../../helpers/constants';
9+
10+
type RowLayoutProps = {
11+
justifyContent?: FlexTypes;
12+
};
13+
14+
const ExampleBox = () => {
15+
// Get random color from the ColorPalette.
16+
const color = ColorPalette[Math.floor(Math.random() * ColorPalette.length)];
17+
return <lng-view style={{ width: 125, height: 125, color }} />;
18+
};
19+
20+
export default {
21+
title: '@plexinc∕react-native-lightning-components/Layout/Row',
22+
component: Row,
23+
argTypes: {
24+
justifyContent: {
25+
type: { name: 'string', required: false },
26+
description: 'Flex Type',
27+
table: {
28+
type: { summary: 'string' },
29+
defaultValue: { summary: FlexTypes.FLEX_START },
30+
},
31+
options: [
32+
FlexTypes.FLEX_START,
33+
FlexTypes.FLEX_END,
34+
FlexTypes.SPACE_EVENLY,
35+
FlexTypes.SPACE_BETWEEN,
36+
FlexTypes.SPACE_AROUND,
37+
],
38+
control: {
39+
type: 'select',
40+
labels: {
41+
flexStart: FlexTypes.FLEX_START,
42+
flexEnd: FlexTypes.FLEX_END,
43+
spaceEvenly: FlexTypes.SPACE_EVENLY,
44+
spaceBetween: FlexTypes.SPACE_BETWEEN,
45+
spaceAround: FlexTypes.SPACE_AROUND,
46+
},
47+
},
48+
},
49+
},
50+
tags: ['reactNative'],
51+
} as Meta<typeof Row>;
52+
53+
// The rest of the story definitions
54+
export const FlexStart = ({
55+
justifyContent = FlexTypes.FLEX_START,
56+
}: RowLayoutProps) => {
57+
return (
58+
<Row
59+
focusable
60+
style={{
61+
justifyContent,
62+
gap: 10,
63+
width: DefaultStoryWidth,
64+
height: DefaultStoryHeight,
65+
color: 0xcccc00ff,
66+
}}
67+
>
68+
<ExampleBox />
69+
<ExampleBox />
70+
<ExampleBox />
71+
</Row>
72+
);
73+
};
74+
75+
FlexStart.args = {
76+
justifyContent: FlexTypes.FLEX_START,
77+
};
78+
79+
export const FlexEnd = ({
80+
justifyContent = FlexTypes.FLEX_END,
81+
}: RowLayoutProps) => {
82+
return (
83+
<Row
84+
focusable
85+
style={{
86+
justifyContent,
87+
gap: 10,
88+
width: DefaultStoryWidth,
89+
height: DefaultStoryHeight,
90+
color: 0xcccc00ff,
91+
}}
92+
>
93+
<ExampleBox />
94+
<ExampleBox />
95+
<ExampleBox />
96+
</Row>
97+
);
98+
};
99+
100+
FlexEnd.args = {
101+
justifyContent: FlexTypes.FLEX_END,
102+
};
103+
104+
export const SpaceEvenly = ({
105+
justifyContent = FlexTypes.SPACE_EVENLY,
106+
}: RowLayoutProps) => {
107+
return (
108+
<Row
109+
focusable
110+
style={{
111+
justifyContent,
112+
gap: 10,
113+
width: DefaultStoryWidth,
114+
height: DefaultStoryHeight,
115+
color: 0xcccc00ff,
116+
}}
117+
>
118+
<ExampleBox />
119+
<ExampleBox />
120+
<ExampleBox />
121+
</Row>
122+
);
123+
};
124+
125+
SpaceEvenly.args = {
126+
justifyContent: FlexTypes.SPACE_EVENLY,
127+
};
128+
129+
export const SpaceBetween = ({
130+
justifyContent = FlexTypes.SPACE_BETWEEN,
131+
}: RowLayoutProps) => {
132+
return (
133+
<Row
134+
focusable
135+
style={{
136+
justifyContent,
137+
gap: 10,
138+
width: DefaultStoryWidth,
139+
height: DefaultStoryHeight,
140+
color: 0xcccc00ff,
141+
}}
142+
>
143+
<ExampleBox />
144+
<ExampleBox />
145+
<ExampleBox />
146+
</Row>
147+
);
148+
};
149+
150+
SpaceBetween.args = {
151+
justifyContent: FlexTypes.SPACE_BETWEEN,
152+
};
153+
154+
export const SpaceAround = ({
155+
justifyContent = FlexTypes.SPACE_AROUND,
156+
}: RowLayoutProps) => {
157+
return (
158+
<Row
159+
focusable
160+
style={{
161+
justifyContent,
162+
gap: 10,
163+
width: DefaultStoryWidth,
164+
height: DefaultStoryHeight,
165+
color: 0xcccc00ff,
166+
}}
167+
>
168+
<ExampleBox />
169+
<ExampleBox />
170+
<ExampleBox />
171+
</Row>
172+
);
173+
};
174+
175+
SpaceAround.args = {
176+
justifyContent: FlexTypes.SPACE_AROUND,
177+
};

0 commit comments

Comments
 (0)