Skip to content

Commit b9a0718

Browse files
rohanchkrabrtyrohanchkrabrty
authored
feat: grid component (#383)
* feat: grid component * feat: grid doc
1 parent 456b765 commit b9a0718

File tree

8 files changed

+435
-0
lines changed

8 files changed

+435
-0
lines changed

‎apps/www/src/content/docs/components/grid/demo.ts

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
"use client";
2+
3+
import { getPropsString } from "@/lib/utils";
4+
5+
export const getCode = (props: any) => {
6+
return `
7+
<Grid${getPropsString(props)} style={{width:"100%",height:"100%"}}>
8+
<Button>Button 1</Button>
9+
<Button>Button 2</Button>
10+
<Button>Button 3</Button>
11+
<Button>Button 4</Button>
12+
<Button>Button 5</Button>
13+
<Button>Button 6</Button>
14+
<Button>Button 7</Button>
15+
<Button>Button 8</Button>
16+
</Grid>`;
17+
};
18+
export const playground = {
19+
type: "playground",
20+
controls: {
21+
gap: {
22+
type: "select",
23+
options: ["extra-small", "small", "medium", "large", "extra-large"],
24+
initialValue: "small",
25+
},
26+
rows: {
27+
type: "number",
28+
min: 1,
29+
max: 10,
30+
initialValue: 4,
31+
},
32+
columns: {
33+
type: "number",
34+
min: 1,
35+
max: 10,
36+
initialValue: 2,
37+
},
38+
justifyItems: {
39+
type: "select",
40+
options: ["start", "end", "center", "stretch"],
41+
initialValue: "center",
42+
},
43+
alignItems: {
44+
type: "select",
45+
options: ["start", "end", "center", "stretch"],
46+
initialValue: "center",
47+
},
48+
},
49+
getCode,
50+
};

‎apps/www/src/content/docs/components/grid/index.mdx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
title: Grid
3+
description: A flexible and powerful component for grid layout
4+
tag: new
5+
---
6+
7+
import { playground, iconsDemo, customDemo, basicDemo } from "./demo.ts";
8+
9+
<Demo data={playground} />
10+
11+
## Usage
12+
13+
```tsx
14+
import { Grid } from "@raystack/apsara/v1";
15+
16+
<Grid columns={2} rows={2}>
17+
<Grid.Item>1</Grid.Item>
18+
<Grid.Item>2</Grid.Item>
19+
<Grid.Item>3</Grid.Item>
20+
</Grid>;
21+
```
22+
23+
## Grid Props
24+
25+
<auto-type-table path="./props.ts" name="GridProps" />
26+
27+
### Grid.Item Props
28+
29+
Grid.Item is a wrapper component that must be a direct child of Grid. Use it when you need to customize the positioning or styling of individual grid items.
30+
31+
<auto-type-table path="./props.ts" name="GridItemProps" />

‎apps/www/src/content/docs/components/grid/props.ts

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
export interface GridProps {
2+
/**
3+
* Defines named grid areas using CSS Grid template areas syntax.
4+
*/
5+
templateAreas?: string | string[];
6+
7+
/**
8+
* Controls how auto-placed items flow into the grid.
9+
* - "row": Items flow by row
10+
* - "column": Items flow by column
11+
* - "dense": Attempts to fill in holes in the grid
12+
*/
13+
autoFlow?: "row" | "column" | "dense" | "row dense" | "column dense";
14+
15+
/**
16+
* Sets the size of auto-generated columns.
17+
* Accepts any valid CSS size value.
18+
*/
19+
autoColumns?: string;
20+
21+
/**
22+
* Sets the size of auto-generated rows.
23+
* Accepts any valid CSS size value.
24+
*/
25+
autoRows?: string;
26+
27+
/**
28+
* Defines the columns of the grid. Supports CSS Grid template columns syntax.
29+
*
30+
* If you pass a number, columns will be created using repeat(n, 1fr).
31+
*/
32+
columns?: string | number;
33+
34+
/**
35+
* Defines the rows of the grid. Supports CSS Grid template rows syntax.
36+
*
37+
* If you pass a number, rows will be created using repeat(n, 1fr).
38+
*/
39+
rows?: string | number;
40+
41+
/**
42+
* Sets the gap between grid items.
43+
*/
44+
gap?: "extra-small" | "small" | "medium" | "large" | "extra-large";
45+
46+
/**
47+
* Sets the gap between grid columns.
48+
*/
49+
columnGap?: "extra-small" | "small" | "medium" | "large" | "extra-large";
50+
51+
/**
52+
* Sets the gap between grid rows.
53+
*/
54+
rowGap?: "extra-small" | "small" | "medium" | "large" | "extra-large";
55+
56+
/**
57+
* Aligns grid items along the inline (row) axis.
58+
*/
59+
justifyItems?: "start" | "end" | "center" | "stretch";
60+
61+
/**
62+
* Aligns grid items along the block (column) axis.
63+
*/
64+
alignItems?: "start" | "end" | "center" | "stretch";
65+
66+
/**
67+
* Aligns the entire grid along the inline (row) axis.
68+
*/
69+
justifyContent?:
70+
| "start"
71+
| "end"
72+
| "center"
73+
| "stretch"
74+
| "space-around"
75+
| "space-between"
76+
| "space-evenly";
77+
78+
/**
79+
* Aligns the entire grid along the block (column) axis.
80+
*/
81+
alignContent?:
82+
| "start"
83+
| "end"
84+
| "center"
85+
| "stretch"
86+
| "space-around"
87+
| "space-between"
88+
| "space-evenly";
89+
90+
/**
91+
* Renders the grid as an inline element instead of a block element.
92+
*
93+
* @default false
94+
*/
95+
inline?: boolean;
96+
97+
/**
98+
* Merges the grid's props with its child component.
99+
* Useful for composition with other components.
100+
*/
101+
asChild?: boolean;
102+
}
103+
104+
export interface GridItemProps {
105+
/**
106+
* Specifies the named grid area where the item should be placed.
107+
* Must match a named area defined in the parent Grid's templateAreas.
108+
*/
109+
area?: string;
110+
111+
/**
112+
* Defines the starting column line where the item should be placed.
113+
*/
114+
colStart?: number | string;
115+
116+
/**
117+
* Defines the ending column line where the item should be placed.
118+
*/
119+
colEnd?: number | string;
120+
121+
/**
122+
* Defines the starting row line where the item should be placed.
123+
*/
124+
rowStart?: number | string;
125+
126+
/**
127+
* Defines the ending row line where the item should be placed.
128+
*/
129+
rowEnd?: number | string;
130+
131+
/**
132+
* Specifies how many columns the item should span.
133+
*/
134+
colSpan?: number | string;
135+
136+
/**
137+
* Specifies how many rows the item should span.
138+
*/
139+
rowSpan?: number | string;
140+
141+
/**
142+
* Aligns the item along the inline (row) axis within its grid area.
143+
*/
144+
justifySelf?: "start" | "end" | "center" | "stretch";
145+
146+
/**
147+
* Aligns the item along the block (column) axis within its grid area.
148+
*/
149+
alignSelf?: "start" | "end" | "center" | "stretch";
150+
151+
/**
152+
* Merges the grid item's props with its child component.
153+
* Useful for composition with other components.
154+
*/
155+
asChild?: boolean;
156+
}

‎packages/raystack/v1/components/grid/grid-item.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { forwardRef, HTMLAttributes } from "react";
2+
import { Slot } from "@radix-ui/react-slot";
3+
import { AlignType } from "./types";
4+
5+
type GridItemProps = HTMLAttributes<HTMLDivElement> & {
6+
area?: string;
7+
colStart?: number | string;
8+
colEnd?: number | string;
9+
rowStart?: number | string;
10+
rowEnd?: number | string;
11+
colSpan?: number | string;
12+
rowSpan?: number | string;
13+
justifySelf?: AlignType;
14+
alignSelf?: AlignType;
15+
asChild?: boolean;
16+
};
17+
18+
export const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
19+
(
20+
{
21+
area,
22+
colStart,
23+
colEnd,
24+
rowStart,
25+
rowEnd,
26+
colSpan,
27+
rowSpan,
28+
justifySelf,
29+
alignSelf,
30+
style,
31+
asChild,
32+
...props
33+
},
34+
ref,
35+
) => {
36+
const Comp = asChild ? Slot : "div";
37+
38+
return (
39+
<Comp
40+
ref={ref}
41+
style={{
42+
gridArea: area,
43+
gridColumnStart: colStart,
44+
gridColumnEnd: colEnd,
45+
gridRowStart: rowStart,
46+
gridRowEnd: rowEnd,
47+
gridColumn: colSpan ? `span ${colSpan}` : undefined,
48+
gridRow: rowSpan ? `span ${rowSpan}` : undefined,
49+
justifySelf,
50+
alignSelf,
51+
...style,
52+
}}
53+
{...props}
54+
/>
55+
);
56+
},
57+
);
58+
59+
GridItem.displayName = "GridItem";

0 commit comments

Comments
 (0)