Skip to content

Commit 5ac2457

Browse files
mu29mu29
committed
feat: add grid preset
1 parent e8e2b82 commit 5ac2457

File tree

9 files changed

+316
-1
lines changed

9 files changed

+316
-1
lines changed

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.grid {
2+
display: grid;
3+
}
4+
5+
.grid--alignItems-stretch {
6+
align-items: stretch;
7+
}
8+
9+
.grid--alignItems-start {
10+
align-items: start;
11+
}
12+
13+
.grid--alignItems-center {
14+
align-items: center;
15+
}
16+
17+
.grid--alignItems-end {
18+
align-items: end;
19+
}
20+
21+
.grid--justifyItems-stretch {
22+
justify-items: stretch;
23+
}
24+
25+
.grid--justifyItems-start {
26+
justify-items: start;
27+
}
28+
29+
.grid--justifyItems-center {
30+
justify-items: center;
31+
}
32+
33+
.grid--justifyItems-end {
34+
justify-items: end;
35+
}
36+
37+
.grid--background-surface {
38+
background-color: var(--composify-palette-surface);
39+
}
40+
41+
.grid--background-surface-container {
42+
background-color: var(--composify-palette-surface-container);
43+
}
44+
45+
.grid--background-surface-container-low {
46+
background-color: var(--composify-palette-surface-container-low);
47+
}
48+
49+
.grid--background-surface-container-lowest {
50+
background-color: var(--composify-palette-surface-container-lowest);
51+
}
52+
53+
.grid--background-surface-container-high {
54+
background-color: var(--composify-palette-surface-container-high);
55+
}
56+
57+
.grid--background-surface-container-highest {
58+
background-color: var(--composify-palette-surface-container-highest);
59+
}

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import type { ComponentProps, FC } from 'react';
2+
import { createVariants } from '../../utils';
3+
import styles from './Grid.module.css';
4+
5+
const variants = createVariants(styles);
6+
7+
type Props = ComponentProps<'div'> & {
8+
columns?: number;
9+
rows?: number;
10+
alignItems?: 'stretch' | 'start' | 'end' | 'center';
11+
justifyItems?: 'stretch' | 'start' | 'end' | 'center';
12+
gap?: number;
13+
width?: number | string;
14+
height?: number | string;
15+
padding?: { top: number; right: number; bottom: number; left: number };
16+
margin?: { top: number; right: number; bottom: number; left: number };
17+
background?: string;
18+
};
19+
20+
export const Grid: FC<Props> = ({
21+
className,
22+
columns,
23+
rows,
24+
alignItems,
25+
justifyItems,
26+
gap,
27+
width,
28+
height,
29+
padding,
30+
margin,
31+
background,
32+
...props
33+
}) => (
34+
<div
35+
className={variants('grid', {
36+
className,
37+
alignItems,
38+
justifyItems,
39+
...(background?.startsWith('#') ? {} : { background }),
40+
})}
41+
style={{
42+
gridTemplateColumns: `repeat(${columns}, 1fr)`,
43+
gridTemplateRows: `repeat(${rows}, 1fr)`,
44+
gap,
45+
width,
46+
height,
47+
paddingTop: padding?.top,
48+
paddingBottom: padding?.bottom,
49+
paddingLeft: padding?.left,
50+
paddingRight: padding?.right,
51+
marginTop: margin?.top,
52+
marginBottom: margin?.bottom,
53+
marginLeft: margin?.left,
54+
marginRight: margin?.right,
55+
...(background?.startsWith('#') ? { background } : {}),
56+
}}
57+
{...props}
58+
/>
59+
);

‎packages/react/src/preset/Grid/GridCatalog.tsx‎

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

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

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

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,3 +42,27 @@
4242
.hstack--alignVertical-end {
4343
align-items: flex-end;
4444
}
45+
46+
.hstack--background-surface {
47+
background-color: var(--composify-palette-surface);
48+
}
49+
50+
.hstack--background-surface-container {
51+
background-color: var(--composify-palette-surface-container);
52+
}
53+
54+
.hstack--background-surface-container-low {
55+
background-color: var(--composify-palette-surface-container-low);
56+
}
57+
58+
.hstack--background-surface-container-lowest {
59+
background-color: var(--composify-palette-surface-container-lowest);
60+
}
61+
62+
.hstack--background-surface-container-high {
63+
background-color: var(--composify-palette-surface-container-high);
64+
}
65+
66+
.hstack--background-surface-container-highest {
67+
background-color: var(--composify-palette-surface-container-highest);
68+
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export const HStack: FC<Props> = ({
3434
className,
3535
alignHorizontal,
3636
alignVertical,
37+
...(background?.startsWith('#') ? {} : { background }),
3738
})}
3839
style={{
3940
flex,
@@ -49,6 +50,7 @@ export const HStack: FC<Props> = ({
4950
width,
5051
height,
5152
background,
53+
...(background?.startsWith('#') ? { background } : {}),
5254
}}
5355
{...props}
5456
/>

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,3 +42,27 @@
4242
.vstack--alignVertical-evenly {
4343
justify-content: space-evenly;
4444
}
45+
46+
.vstack--background-surface {
47+
background-color: var(--composify-palette-surface);
48+
}
49+
50+
.vstack--background-surface-container {
51+
background-color: var(--composify-palette-surface-container);
52+
}
53+
54+
.vstack--background-surface-container-low {
55+
background-color: var(--composify-palette-surface-container-low);
56+
}
57+
58+
.vstack--background-surface-container-lowest {
59+
background-color: var(--composify-palette-surface-container-lowest);
60+
}
61+
62+
.vstack--background-surface-container-high {
63+
background-color: var(--composify-palette-surface-container-high);
64+
}
65+
66+
.vstack--background-surface-container-highest {
67+
background-color: var(--composify-palette-surface-container-highest);
68+
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export const VStack: FC<Props> = ({
3434
className,
3535
alignHorizontal,
3636
alignVertical,
37+
...(background?.startsWith('#') ? {} : { background }),
3738
})}
3839
style={{
3940
flex,
@@ -48,7 +49,7 @@ export const VStack: FC<Props> = ({
4849
gap,
4950
width,
5051
height,
51-
background,
52+
...(background?.startsWith('#') ? { background } : {}),
5253
}}
5354
{...props}
5455
/>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export { Button } from './Button';
2+
export { Grid } from './Grid';
23
export { HStack } from './HStack';
34
export { IconButton } from './IconButton';
45
export { Input } from './Input';

0 commit comments

Comments
 (0)