Skip to content

Commit 675cf54

Browse files
mu29mu29
committed
feat: add VStack, HStack preset
1 parent df4971b commit 675cf54

File tree

9 files changed

+545
-0
lines changed

9 files changed

+545
-0
lines changed

‎packages/react/src/preset/HStack/HStack.module.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.hstack {
2+
display: flex;
3+
flex-direction: row;
4+
}
5+
6+
.hstack--alignHorizontal-start {
7+
justify-content: flex-start;
8+
}
9+
10+
.hstack--alignHorizontal-center {
11+
justify-content: center;
12+
}
13+
14+
.hstack--alignHorizontal-end {
15+
justify-content: flex-end;
16+
}
17+
18+
.hstack--alignHorizontal-between {
19+
justify-content: space-between;
20+
}
21+
22+
.hstack--alignHorizontal-around {
23+
justify-content: space-around;
24+
}
25+
26+
.hstack--alignHorizontal-evenly {
27+
justify-content: space-evenly;
28+
}
29+
30+
.hstack--alignVertical-stretch {
31+
align-items: stretch;
32+
}
33+
34+
.hstack--alignVertical-start {
35+
align-items: flex-start;
36+
}
37+
38+
.hstack--alignVertical-center {
39+
align-items: center;
40+
}
41+
42+
.hstack--alignVertical-end {
43+
align-items: flex-end;
44+
}

‎packages/react/src/preset/HStack/HStack.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import type { FC, PropsWithChildren } from 'react';
2+
import { createVariants } from '../../utils';
3+
import styles from './HStack.module.css';
4+
5+
type Props = PropsWithChildren<{
6+
className?: string;
7+
alignHorizontal?: 'start' | 'end' | 'center' | 'between' | 'around';
8+
alignVertical?: 'stretch' | 'start' | 'end' | 'center';
9+
flex?: number;
10+
size?: {
11+
width?: number | string;
12+
minWidth?: number | string;
13+
maxWidth?: number | string;
14+
height?: number | string;
15+
minHeight?: number | string;
16+
maxHeight?: number | string;
17+
};
18+
padding?: { top: number; right: number; bottom: number; left: number };
19+
margin?: { top: number; right: number; bottom: number; left: number };
20+
gap?: number;
21+
background?: string;
22+
}>;
23+
24+
const variants = createVariants(styles);
25+
26+
export const HStack: FC<Props> = ({
27+
className,
28+
alignHorizontal,
29+
alignVertical,
30+
flex,
31+
size,
32+
padding,
33+
margin,
34+
gap,
35+
background,
36+
...props
37+
}) => (
38+
<div
39+
className={variants('hstack', {
40+
className,
41+
alignHorizontal,
42+
alignVertical,
43+
})}
44+
style={{
45+
flex,
46+
width: size?.width,
47+
minWidth: size?.minWidth,
48+
maxWidth: size?.maxWidth,
49+
height: size?.height,
50+
minHeight: size?.minHeight,
51+
maxHeight: size?.maxHeight,
52+
paddingTop: padding?.top,
53+
paddingBottom: padding?.bottom,
54+
paddingLeft: padding?.left,
55+
paddingRight: padding?.right,
56+
marginTop: margin?.top,
57+
marginBottom: margin?.bottom,
58+
marginLeft: margin?.left,
59+
marginRight: margin?.right,
60+
gap,
61+
background,
62+
}}
63+
{...props}
64+
/>
65+
);

‎packages/react/src/preset/HStack/HStackCatalog.tsx‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
import {
2+
AlignCenterHorizontalIcon,
3+
AlignEndHorizontalIcon,
4+
AlignHorizontalJustifyCenterIcon,
5+
AlignHorizontalJustifyEndIcon,
6+
AlignHorizontalJustifyStartIcon,
7+
AlignHorizontalSpaceAroundIcon,
8+
AlignHorizontalSpaceBetweenIcon,
9+
AlignStartHorizontalIcon,
10+
StretchVerticalIcon,
11+
} from 'lucide-react';
12+
import { Catalog } from '../../renderer';
13+
import { HStack } from './HStack';
14+
15+
Catalog.register('HStack', {
16+
component: HStack,
17+
props: {
18+
alignHorizontal: {
19+
label: 'Align',
20+
type: 'radio',
21+
options: [
22+
{ value: 'start', label: <AlignHorizontalJustifyStartIcon /> },
23+
{ value: 'center', label: <AlignHorizontalJustifyCenterIcon /> },
24+
{ value: 'end', label: <AlignHorizontalJustifyEndIcon /> },
25+
{ value: 'between', label: <AlignHorizontalSpaceBetweenIcon /> },
26+
{ value: 'around', label: <AlignHorizontalSpaceAroundIcon /> },
27+
],
28+
default: 'start',
29+
},
30+
alignVertical: {
31+
label: 'Distribute',
32+
type: 'radio',
33+
options: [
34+
{ value: 'stretch', label: <StretchVerticalIcon /> },
35+
{ value: 'start', label: <AlignStartHorizontalIcon /> },
36+
{ value: 'center', label: <AlignCenterHorizontalIcon /> },
37+
{ value: 'end', label: <AlignEndHorizontalIcon /> },
38+
],
39+
default: 'stretch',
40+
},
41+
flex: {
42+
label: 'Flex',
43+
type: 'number',
44+
optional: true,
45+
},
46+
gap: {
47+
label: 'Gap',
48+
type: 'number',
49+
optional: true,
50+
},
51+
background: {
52+
label: 'Background',
53+
type: 'text',
54+
default: '#EEEEEE',
55+
optional: true,
56+
},
57+
size: {
58+
label: 'Size',
59+
type: 'object',
60+
fields: {
61+
width: {
62+
label: 'Width',
63+
type: 'number',
64+
default: 100,
65+
optional: true,
66+
},
67+
minWidth: {
68+
label: 'Min Width',
69+
type: 'number',
70+
optional: true,
71+
},
72+
maxWidth: {
73+
label: 'Max Width',
74+
type: 'number',
75+
optional: true,
76+
},
77+
height: {
78+
label: 'Height',
79+
type: 'number',
80+
default: 100,
81+
optional: true,
82+
},
83+
minHeight: {
84+
label: 'Min Height',
85+
type: 'number',
86+
optional: true,
87+
},
88+
maxHeight: {
89+
label: 'Max Height',
90+
type: 'number',
91+
optional: true,
92+
},
93+
},
94+
default: {
95+
width: 100,
96+
height: 100,
97+
},
98+
optional: true,
99+
},
100+
padding: {
101+
label: 'Padding',
102+
type: 'object',
103+
fields: {
104+
top: {
105+
label: 'Top',
106+
type: 'number',
107+
default: 0,
108+
},
109+
right: {
110+
label: 'Right',
111+
type: 'number',
112+
default: 0,
113+
},
114+
bottom: {
115+
label: 'Bottom',
116+
type: 'number',
117+
default: 0,
118+
},
119+
left: {
120+
label: 'Left',
121+
type: 'number',
122+
default: 0,
123+
},
124+
},
125+
optional: true,
126+
},
127+
margin: {
128+
label: 'Margin',
129+
type: 'object',
130+
fields: {
131+
top: {
132+
label: 'Top',
133+
type: 'number',
134+
default: 0,
135+
},
136+
right: {
137+
label: 'Right',
138+
type: 'number',
139+
default: 0,
140+
},
141+
bottom: {
142+
label: 'Bottom',
143+
type: 'number',
144+
default: 0,
145+
},
146+
left: {
147+
label: 'Left',
148+
type: 'number',
149+
default: 0,
150+
},
151+
},
152+
optional: true,
153+
},
154+
children: {
155+
label: 'Children',
156+
type: 'node',
157+
},
158+
},
159+
});

‎packages/react/src/preset/HStack/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import './HStackCatalog';
2+
3+
export { HStack } from './HStack';

‎packages/react/src/preset/VStack/VStack.module.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.vstack {
2+
display: flex;
3+
flex-direction: column;
4+
}
5+
6+
.vstack--alignHorizontal-stretch {
7+
align-items: stretch;
8+
}
9+
10+
.vstack--alignHorizontal-start {
11+
align-items: flex-start;
12+
}
13+
14+
.vstack--alignHorizontal-center {
15+
align-items: center;
16+
}
17+
18+
.vstack--alignHorizontal-end {
19+
align-items: flex-end;
20+
}
21+
22+
.vstack--alignVertical-start {
23+
justify-content: flex-start;
24+
}
25+
26+
.vstack--alignVertical-center {
27+
justify-content: center;
28+
}
29+
30+
.vstack--alignVertical-end {
31+
justify-content: flex-end;
32+
}
33+
34+
.vstack--alignVertical-between {
35+
justify-content: space-between;
36+
}
37+
38+
.vstack--alignVertical-around {
39+
justify-content: space-around;
40+
}
41+
42+
.vstack--alignVertical-evenly {
43+
justify-content: space-evenly;
44+
}

‎packages/react/src/preset/VStack/VStack.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import type { FC, PropsWithChildren } from 'react';
2+
import { createVariants } from '../../utils';
3+
import styles from './VStack.module.css';
4+
5+
type Props = PropsWithChildren<{
6+
className?: string;
7+
alignHorizontal?: 'stretch' | 'start' | 'end' | 'center';
8+
alignVertical?: 'start' | 'end' | 'center' | 'between' | 'around';
9+
flex?: number;
10+
gap?: number;
11+
size?: {
12+
width?: number | string;
13+
minWidth?: number | string;
14+
maxWidth?: number | string;
15+
height?: number | string;
16+
minHeight?: number | string;
17+
maxHeight?: number | string;
18+
};
19+
padding?: { top: number; right: number; bottom: number; left: number };
20+
margin?: { top: number; right: number; bottom: number; left: number };
21+
background?: string;
22+
}>;
23+
24+
const variants = createVariants(styles);
25+
26+
export const VStack: FC<Props> = ({
27+
className,
28+
alignHorizontal,
29+
alignVertical,
30+
flex,
31+
size,
32+
padding,
33+
margin,
34+
gap,
35+
background,
36+
...props
37+
}) => (
38+
<div
39+
className={variants('vstack', {
40+
className,
41+
alignHorizontal,
42+
alignVertical,
43+
})}
44+
style={{
45+
flex,
46+
width: size?.width,
47+
minWidth: size?.minWidth,
48+
maxWidth: size?.maxWidth,
49+
height: size?.height,
50+
minHeight: size?.minHeight,
51+
maxHeight: size?.maxHeight,
52+
paddingTop: padding?.top,
53+
paddingBottom: padding?.bottom,
54+
paddingLeft: padding?.left,
55+
paddingRight: padding?.right,
56+
marginTop: margin?.top,
57+
marginBottom: margin?.bottom,
58+
marginLeft: margin?.left,
59+
marginRight: margin?.right,
60+
background,
61+
gap,
62+
}}
63+
{...props}
64+
/>
65+
);

0 commit comments

Comments
 (0)