feat(grid): introduce Grid component with responsive layout capabilities #707
Conversation
- Added Grid component to the React library, allowing for flexible grid layouts. - Implemented grid properties such as columns and rows for customizable layouts. - Created example components demonstrating grid usage with both numeric and string column definitions. - Updated CSS to support grid display and styling.
🦋 Changeset detectedLatest commit: 1e16c9d The changes in this PR will be included in the next version bump. This PR includes changesets to release 8 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Walkthrough이번 변경 사항은 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant GridComponent
participant BoxComponent
participant CSS
User->>GridComponent: Grid(props: columns, rows, align, justify)
GridComponent->>BoxComponent: 렌더링 (props, ref, className="seed-grid")
GridComponent->>CSS: --seed-grid-columns, --seed-grid-rows 커스텀 프로퍼티 적용
BoxComponent-->>User: 그리드 레이아웃 렌더링
Poem
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. ✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
packages/css/base.css (1)
6-11: deprecated된 CSS 함수constant()사용 검토 필요
constant()함수는 오래된 Safari 전용 문법으로, 최신 브라우저에서 지원 중단될 가능성이 있습니다. 이미 표준env()를 함께 사용하고 있으므로,constant()부분을 제거하거나 주석으로 사용 목적을 명확히 하는 방안을 고려해주세요.🧰 Tools
🪛 Biome (1.9.4)
[error] 6-6: Unexpected unknown function: constant
Use a known function instead.
See MDN web docs for more details.(lint/correctness/noUnknownFunction)
[error] 8-8: Unexpected unknown function: constant
Use a known function instead.
See MDN web docs for more details.(lint/correctness/noUnknownFunction)
[error] 9-9: Unexpected unknown function: constant
Use a known function instead.
See MDN web docs for more details.(lint/correctness/noUnknownFunction)
docs/content/react/components/(layout)/grid.mdx (1)
32-41: columns prop의 string 타입 설명이 간결합니다.문자열을 전달했을 때의 동작을 설명하고 있지만, 예시 값이나 유효한 형식에 대한 추가 설명이 있으면 더 좋을 것 같습니다.
다음과 같이 string 값의 예시를 추가하는 것을 고려해보세요:
- `columns` prop에 string을 전달하면 grid-template-columns가 적용됩니다. + `columns` prop에 string을 전달하면 grid-template-columns가 적용됩니다. (예: `"1fr 2fr 1fr"`, `"repeat(3, 200px)"`, `"auto 1fr"` 등)packages/react/src/components/Grid/Grid.tsx (1)
46-53: CSS 변수 설정 방식에 대한 제안현재 CSS 변수 설정 방식이 작동하지만, columns나 rows가 undefined인 경우에 대한 처리가 명시적이지 않습니다.
다음과 같이 변수에 더 명확한 기본값을 제공하는 것이 좋을 수 있습니다:
style: { "--seed-grid-columns": - typeof columns === "number" ? `repeat(${columns}, minmax(0, 1fr))` : columns, + typeof columns === "number" ? `repeat(${columns}, minmax(0, 1fr))` : (columns || "none"), - "--seed-grid-rows": rows, + "--seed-grid-rows": rows || "none", } as React.CSSProperties,
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
.changeset/kind-cats-attack.md(1 hunks)docs/components/example/grid-columns-number.tsx(1 hunks)docs/components/example/grid-columns-string.tsx(1 hunks)docs/components/example/grid-preview.tsx(1 hunks)docs/content/react/components/(layout)/grid.mdx(1 hunks)packages/css/all.css(1 hunks)packages/css/base.css(1 hunks)packages/css/base.min.css(1 hunks)packages/qvism-preset/src/global.ts(1 hunks)packages/react/src/components/Grid/Grid.tsx(1 hunks)packages/react/src/components/Grid/index.ts(1 hunks)packages/react/src/components/index.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
docs/components/example/grid-columns-string.tsx (1)
packages/react/src/components/Grid/Grid.tsx (1)
Grid(37-56)
docs/components/example/grid-columns-number.tsx (1)
packages/react/src/components/Grid/Grid.tsx (1)
Grid(37-56)
docs/components/example/grid-preview.tsx (1)
packages/react/src/components/Grid/Grid.tsx (1)
Grid(37-56)
🪛 Biome (1.9.4)
packages/css/base.min.css
[error] 1-1: Unexpected unknown function: constant
Use a known function instead.
See MDN web docs for more details.
(lint/correctness/noUnknownFunction)
[error] 1-1: Unexpected unknown function: constant
Use a known function instead.
See MDN web docs for more details.
(lint/correctness/noUnknownFunction)
[error] 1-1: Unexpected unknown function: constant
Use a known function instead.
See MDN web docs for more details.
(lint/correctness/noUnknownFunction)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (19)
packages/css/base.css (1)
149-155:.seed-grid클래스가 유연한 그리드 컨테이너를 올바르게 설정합니다
--seed-grid-columns와--seed-grid-rowsCSS 변수를 활용해 기본 2열 레이아웃을 제공하며,display: grid가 적절히 적용되었습니다..changeset/kind-cats-attack.md (1)
1-7: 패치셋 메타 정보 및 설명이 명확합니다
설치할 패키지와 변경 목적이 간결하게 작성되었습니다.packages/react/src/components/index.ts (1)
22-22:Grid컴포넌트가 컴포넌트 인덱스에 정상 추가되었습니다
Flex다음에 알파벳 순서에 맞춰Grid를 배치하여 일관성을 유지했습니다.packages/react/src/components/Grid/index.ts (1)
1-1:Grid컴포넌트 및GridProps타입이 재-내보내기 되었습니다
다른 모듈에서import { Grid } from "@seed-design/react"가 가능하도록 설정되었습니다.packages/css/base.min.css (1)
1-1: 빌드된 CSS에.seed-grid클래스가 포함되었습니다
Minified 파일에도.seed-grid정의가 정상적으로 적용되었습니다. (자동 생성 파일이므로 직접 수정하지 마세요)🧰 Tools
🪛 Biome (1.9.4)
[error] 1-1: Unexpected unknown function: constant
Use a known function instead.
See MDN web docs for more details.(lint/correctness/noUnknownFunction)
[error] 1-1: Unexpected unknown function: constant
Use a known function instead.
See MDN web docs for more details.(lint/correctness/noUnknownFunction)
[error] 1-1: Unexpected unknown function: constant
Use a known function instead.
See MDN web docs for more details.(lint/correctness/noUnknownFunction)
docs/components/example/grid-columns-number.tsx (2)
1-2: 컴포넌트 임포트 적절
Box와Grid를@seed-design/react에서 가져오는 부분이 올바르며, 필요한 의존성을 정확히 반영하고 있습니다.
5-10: Grid 예제 사용 확인
columns={2},gap="x2",width="full"설정을 통해 숫자 기반 컬럼 정의가 올바르게 적용되었으며, 내부Box요소들의 스타일도 일관성 있게 지정되었습니다.docs/components/example/grid-preview.tsx (2)
1-2: 컴포넌트 임포트 확인
Box와Grid를@seed-design/react에서 정확히 가져오고 있습니다.
5-10: 기본 Grid 레이아웃 예제 승인
columns={2},gap="x2",width="full"설정으로 기본 그리드 동작을 잘 보여주고 있으며, 의도한 대로 작동합니다.docs/components/example/grid-columns-string.tsx (2)
1-2: 컴포넌트 임포트 확인
Box와Grid를 올바르게 임포트하고 있습니다.
5-10: 문자열 기반 컬럼 정의 적절
columns="2fr 1fr"사용이 명확하게 예시되어 있으며, 그리드 템플릿을 문자열로 직접 지정하는 방식을 잘 설명합니다.packages/qvism-preset/src/global.ts (1)
151-158:.seed-grid글로벌 CSS 클래스 추가 승인
그리드 컨테이너에display: grid및 컬럼/행 CSS 커스텀 프로퍼티를 정의한 부분이 적절하며, 기본값 설정도 일관적입니다.packages/css/all.css (1)
149-155:.seed-gridCSS 클래스 추가 승인
--seed-grid-columns,grid-template-columns,--seed-grid-rows,grid-template-rows,display: grid설정이 올바르게 반영되어 있으며, 일관된 기본 레이아웃을 제공합니다.docs/content/react/components/(layout)/grid.mdx (4)
1-4: 문서 제목과 설명이 명확하게 작성되었습니다.Grid 컴포넌트의 목적과 특징을 간결하게 잘 설명하고 있습니다.
6-13: 예제 컴포넌트 참조가 적절합니다.
ComponentExample컴포넌트를 사용하여 Grid 컴포넌트의 사용법을 직관적으로 보여주고 있습니다.
15-17: Props 문서화가 잘 되어 있습니다.
react-type-table컴포넌트를 사용하여 GridProps 타입을 자동으로 문서화하는 접근 방식이 좋습니다.
19-30: columns prop의 number 타입 설명이 명확합니다.숫자 값을 전달했을 때의 동작을 명확하게 설명하고 있으며, 예제를 통해 시각적으로 보여주고 있습니다.
packages/react/src/components/Grid/Grid.tsx (2)
5-9: display 속성 타입 제한이 명확합니다.Box 컴포넌트에서 display 속성을 제외하고 재정의하여 Grid 컴포넌트의 목적에 맞게 제한한 것이 좋습니다.
11-19: align과 justify의 속성 정의가 명확합니다.alignItems와 justifyContent의 shorthand로 명확하게 정의되어 있습니다.
| /** | ||
| * Shorthand for `gridTemplateColumns`. | ||
| * If number, `repeat({columns}, minmax(0, 1fr))` is applied. | ||
| * | ||
| * @default 2 | ||
| */ | ||
| columns?: number | string; | ||
|
|
||
| /** | ||
| * Shorthand for `gridTemplateRows`. | ||
| * | ||
| * @default undefined | ||
| */ | ||
| rows?: string; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
columns와 rows 속성 정의에 개선이 필요합니다.
columns와 rows 속성이 잘 정의되어 있으나, columns의 기본값이 JSDoc에는 2로 명시되어 있지만 실제 구현에서는 설정되지 않았습니다.
다음과 같이 기본값을 설정하는 것이 좋겠습니다:
export const Grid = React.forwardRef<HTMLDivElement, GridProps>((props, ref) => {
- const { align, justify, columns, rows, ...rest } = props;
+ const { align, justify, columns = 2, rows, ...rest } = props;
return (
// ...
);
});| export const Grid = React.forwardRef<HTMLDivElement, GridProps>((props, ref) => { | ||
| const { align, justify, columns, rows, ...rest } = props; | ||
|
|
||
| return ( | ||
| // @ts-expect-error: display: "grid" is not allowed in the Box component | ||
| <Box | ||
| ref={ref} | ||
| alignItems={align} | ||
| justifyContent={justify} | ||
| {...mergeProps(rest, { | ||
| className: "seed-grid", | ||
| style: { | ||
| "--seed-grid-columns": | ||
| typeof columns === "number" ? `repeat(${columns}, minmax(0, 1fr))` : columns, | ||
| "--seed-grid-rows": rows, | ||
| } as React.CSSProperties, | ||
| })} | ||
| /> | ||
| ); | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
구현에 몇 가지 개선 사항이 있습니다.
Grid 컴포넌트의 구현이 전반적으로 잘 되어 있으나, 몇 가지 개선할 점이 있습니다:
- TypeScript expect-error 주석이 사용되었는데, 이는 근본적인 타입 문제를 해결하기보다 회피하는 방법입니다.
- columns가 0이나 음수인 경우에 대한 유효성 검사가 없습니다.
다음과 같이 개선하는 것을 추천합니다:
export const Grid = React.forwardRef<HTMLDivElement, GridProps>((props, ref) => {
- const { align, justify, columns, rows, ...rest } = props;
+ const { align, justify, columns = 2, rows, display = "grid", ...rest } = props;
+
+ // columns가 숫자인 경우 0보다 큰지 확인
+ const gridColumns =
+ typeof columns === "number"
+ ? columns > 0
+ ? `repeat(${columns}, minmax(0, 1fr))`
+ : "none"
+ : columns;
return (
- // @ts-expect-error: display: "grid" is not allowed in the Box component
<Box
ref={ref}
alignItems={align}
justifyContent={justify}
+ className="seed-grid"
+ style={{
+ display,
+ "--seed-grid-columns": gridColumns,
+ "--seed-grid-rows": rows,
+ } as React.CSSProperties}
- {...mergeProps(rest, {
- className: "seed-grid",
- style: {
- "--seed-grid-columns":
- typeof columns === "number" ? `repeat(${columns}, minmax(0, 1fr))` : columns,
- "--seed-grid-rows": rows,
- } as React.CSSProperties,
- })}
+ {...rest}
/>
);
});또는 Box 컴포넌트의 타입을 수정하여 display: "grid"를 허용하도록 하는 것이 더 나은 해결책일 수 있습니다.
Committable suggestion skipped: line range outside the PR's diff.
<Grid>컴포넌트를 추가합니다.Summary by CodeRabbit
신규 기능
문서화
스타일