feat: support overridableVariables in recipes; add overrides prop to ActionButton
#927
Conversation
🦋 Changeset detectedLatest commit: 2a63702 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 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 |
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughActionButton에 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Dev as 앱(소비자)
participant AB as ActionButton(React)
participant Merge as 스타일 병합
participant CSS as CSS Vars / 레시피
Dev->>AB: <ActionButton overrides={{ "--seed-action-button-enabled-background": "..." }} />
AB->>Merge: props.overrides 병합 (기본 --seed-box-color 포함)
Merge->>CSS: style에 CSS 변수 주입 (var(...) 우선, 토큰 폴백)
CSS-->>Dev: 렌더된 버튼(오버라이드 반영)
note right of CSS: 활성/비활성/로딩 상태도\nCSS 변수 + 토큰 폴백 적용
sequenceDiagram
autonumber
participant Gen as generateRecipeDts / generateSlotRecipeDts
participant Def as definition
participant Out as DTS 출력
Gen->>Def: overridableVariables 존재 여부 확인
alt 존재하지 않음
Gen->>Out: base DTS 출력
else 존재함
Gen->>Out: base DTS + <Name>OverridableVariable 타입 별칭 추가 출력
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (8)
.changeset/evil-drinks-sink.md (1)
2-6: 버전 범위 재검토: 기능 추가는 patch 보다는 minor가 적절해 보입니다
ActionButton에 새로운overridesprop과 CSS 오버라이드 경로가 추가되었습니다. 하위 호환이지만 “새 기능”에 해당하므로 changeset 레벨을minor로 올리는 것을 제안합니다. 패키지별 정책에 맞는지 확인 부탁드립니다.packages/react/src/utils/with-overrides.ts (1)
1-3: 인터페이스 사용 권장 및 간단한 JSDoc 추가 제안코딩 가이드라인(Prefer interfaces over types)에 맞춰 인터페이스로 전환하면 일관성이 좋아집니다. JSDoc을 추가해 IDE 힌트 품질도 개선됩니다.
-export type WithOverrides<T extends string> = { - overrides?: Partial<Record<T, string>>; -}; +/** 특정 컴포넌트가 노출하는 CSS Variable 집합을 부분 오버라이드합니다. */ +export interface WithOverrides<T extends string> { + overrides?: Partial<Record<T, string>>; +}ecosystem/qvism/core/src/dts.ts (2)
64-85: ambient 선언 마무리 세미콜론 누락 가능성
export declare const ${jsName}: ((...) => string) & { ... }다음에 세미콜론이 없어 .d.ts 문맥에서 파서에 따라 경고가 날 수 있습니다. 안전하게;를 추가하는 편이 좋습니다.export declare const ${escapeReservedWord(jsName)}: (( props?: ${capitalizedName}VariantProps, ) => string) & { splitVariantProps: <T extends ${capitalizedName}VariantProps>( props: T, ) => [${capitalizedName}VariantProps, Omit<T, keyof ${capitalizedName}VariantProps>]; - } + };
108-131: slot d.ts도 동일하게 세미콜론 추가 권장위와 동일한 이유로 세미콜론을 추가해주세요.
export declare const ${escapeReservedWord(jsName)}: (( props?: ${capitalizedName}VariantProps, ) => Record<${capitalizedName}SlotName, string>) & { splitVariantProps: <T extends ${capitalizedName}VariantProps>( props: T, ) => [${capitalizedName}VariantProps, Omit<T, keyof ${capitalizedName}VariantProps>]; - } + };docs/content/react/components/action-button.mdx (1)
176-186: 섹션에 한 줄 설명과 오버라이더블 변수 목록 추가 제안예제만 있는 상태라, 어떤 변수를 오버라이드할 수 있는지 간단한 안내를 덧붙이면 문서 완성도가 높아집니다.
예시 문구:
- “다음 CSS Variables를
overrides로 오버라이드할 수 있습니다:--seed-action-button-enabled-background,--seed-action-button-active-background,--seed-action-button-disabled-background,--seed-action-button-loading-background.”- “값은 color, gradient 등 유효한 CSS background 값이면 됩니다.”
packages/react/src/components/ActionButton/ActionButton.tsx (1)
66-72: style 스프레드 순서 조정 제안: restProps의 style이 덮어쓰는 리스크
useStyleProps가style을 제거해주지 않는 경우, 마지막에 펼쳐지는restProps의style이 앞서 계산한style을 덮어쓸 수 있습니다. 안전하게...restProps를 먼저 두고style을 가장 마지막에 두는 것을 권장합니다.- // NOTE: Should we handle color as a style prop? - style={ - { - ...style, - "--seed-box-color": handleColor(color), - ...overrides, - } as React.CSSProperties - } - {...api.stateProps} - {...restProps} + {...api.stateProps} + {...restProps} + // NOTE: Should we handle color as a style prop? + style={ + { + ...style, + "--seed-box-color": handleColor(color), + ...overrides, + } as React.CSSProperties + }추가로,
variant !== "ghost"일 때--seed-box-color설정을 생략해도 되지만, 현재 구현도 무해합니다.docs/components/example/action-button-overriding.tsx (1)
5-26: 예제 품질: LGTM. 추가 상태(loading/disabled) 예시 확장 제안enabled/active만 보여주므로, 문서 가독성을 위해
disabled/loading상태도 한 버튼에서 함께 시연하면 좋습니다(각 상태용 변수 효과 확인용).원하시면 예제 코드 패치 드리겠습니다.
packages/qvism-preset/src/recipes/action-button.ts (1)
80-81: 배경이 gradient일 수 있으므로 transition 범위 확장 제안현재
transition: background-color ...만 지정되어 gradient 오버라이드 시 전환이 적용되지 않습니다.background-image도 함께 포함하거나background로 넓히는 것을 권장합니다.- transition: `background-color ${vars.base.enabled.root.colorDuration} ${vars.base.enabled.root.colorTimingFunction}`, + transition: `background-color ${vars.base.enabled.root.colorDuration} ${vars.base.enabled.root.colorTimingFunction}, background-image ${vars.base.enabled.root.colorDuration} ${vars.base.enabled.root.colorTimingFunction}`,
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (5)
bun.lockis excluded by!**/*.lockpackages/css/all.cssis excluded by!packages/css/**/*packages/css/all.min.cssis excluded by!packages/css/**/*packages/css/recipes/action-button.cssis excluded by!packages/css/**/*packages/css/recipes/action-button.d.tsis excluded by!packages/css/**/*
📒 Files selected for processing (8)
.changeset/evil-drinks-sink.md(1 hunks)docs/components/example/action-button-overriding.tsx(1 hunks)docs/content/react/components/action-button.mdx(1 hunks)ecosystem/qvism/core/src/dts.ts(4 hunks)ecosystem/qvism/core/src/types.ts(2 hunks)packages/qvism-preset/src/recipes/action-button.ts(16 hunks)packages/react/src/components/ActionButton/ActionButton.tsx(4 hunks)packages/react/src/utils/with-overrides.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/docs.mdc)
**/*.{ts,tsx}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Use TypeScript for all code; prefer interfaces over types.
Avoid enums; use maps instead.
Use the "function" keyword for pure functions.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
Files:
docs/components/example/action-button-overriding.tsxecosystem/qvism/core/src/types.tspackages/react/src/utils/with-overrides.tspackages/react/src/components/ActionButton/ActionButton.tsxecosystem/qvism/core/src/dts.tspackages/qvism-preset/src/recipes/action-button.ts
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/docs.mdc)
**/*.tsx: Structure files: exported component, subcomponents, helpers, static content, types.
Use functional components with TypeScript interfaces.
Use declarative JSX.
Use Tailwind CSS for styling.
Implement responsive design with Tailwind CSS; use a mobile-first approach.
Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
Wrap client components in Suspense with fallback.
Use dynamic loading for non-critical components.
Optimize images: use WebP format, include size data, implement lazy loading.
Use 'nuqs' for URL search parameter state management.
Limit 'use client': Favor server components and Next.js SSR. Use only for Web API access in small components. Avoid for data fetching or state management.
Files:
docs/components/example/action-button-overriding.tsxpackages/react/src/components/ActionButton/ActionButton.tsx
docs/**/*.mdx
📄 CodeRabbit inference engine (.cursor/rules/documentation.mdc)
docs/**/*.mdx: Use Markdown for all documentation: Ensure all documentation is written in Markdown for consistency and readability.
Follow clean documentation principles: Keep documentation concise, clear, and well-structured.
Prefer clear, concise language: Avoid jargon and overly technical terms unless necessary.
Write comprehensive explanations for functions, classes, and modules: Include detailed descriptions of what each component does, its props, and usage examples.
Provide examples for complex concepts: Show how to use components in real-world scenarios.
Write in Korean but keep technical terms in their original English form.
Files:
docs/content/react/components/action-button.mdx
packages/react/src/utils/**/*.ts
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
packages/react/src/utils/**/*.ts: Utility functions should be properly exported
Use TypeScript types and interfaces for all utility functions
Files:
packages/react/src/utils/with-overrides.ts
packages/react/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
packages/react/**/*.{ts,tsx}: Never use the 'any' type in TypeScript - use proper typing
Prefer arrow functions for component and function definitions
Files:
packages/react/src/utils/with-overrides.tspackages/react/src/components/ActionButton/ActionButton.tsx
packages/react/src/components/*/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
packages/react/src/components/*/*.tsx: Every component directory must contain a main component file with the same name as the directory (e.g., Button.tsx)
Export individual subcomponents from the main component file
Always import React at the top of component files
Define proper TypeScript interfaces for component props
Prefer arrow function syntax for component definitions
Files:
packages/react/src/components/ActionButton/ActionButton.tsx
🧬 Code graph analysis (2)
packages/react/src/components/ActionButton/ActionButton.tsx (2)
packages/react/src/utils/with-overrides.ts (1)
WithOverrides(1-3)packages/react/src/utils/styled.tsx (1)
handleColor(15-22)
packages/qvism-preset/src/recipes/action-button.ts (1)
packages/qvism-preset/src/utils/define.ts (1)
defineRecipe(11-15)
🔇 Additional comments (9)
ecosystem/qvism/core/src/types.ts (2)
91-98: RecipeDefinition에 overridableVariables 추가: LGTM
CssVarKey[](e.g.,--foo)로 정확히 한정되어 있고 선택 속성이라 기존 정의에 영향이 없습니다. DTS 생성기와의 연결도 자연스럽습니다.추가로,
overridableVariables가 비어있지 않은 레시피들만 존재하는지 빌드 단계에서 경고를 원하시면 말씀 주세요. 간단한 타입 보조/런타임 체크 유틸을 제안드릴 수 있습니다.
112-123: SlotRecipeDefinition에도 동일 속성 도입: LGTM슬롯 레시피까지 확장되어 일관성이 확보되었습니다.
ecosystem/qvism/core/src/dts.ts (2)
86-95: OverridableVariable 조건부 생성: LGTM빈 배열/미지정 시 base만 반환하는 분기 구조 적절합니다.
90-94: 문자열 리터럴 생성 유틸 사용: LGTMCSS 변수 키들을 string literal union으로 정확히 내보냅니다.
packages/react/src/components/ActionButton/ActionButton.tsx (2)
23-24: WithOverrides 적용: LGTM타입 제너릭으로
ActionButtonOverridableVariable만 허용되어 안전합니다.
3-4: 타입 임포트 경로 연결 확인: LGTM
@seed-design/css/recipes/action-button에서 생성되는ActionButtonOverridableVariable과 정확히 연결됩니다. DTS 변경과 일치합니다.packages/qvism-preset/src/recipes/action-button.ts (3)
7-23: OVERRIDABLE_VARIABLES 선언 및 사용: LGTM명시적 매핑과
as const로 타입 안정성이 확보되었습니다.
26-31: overridableVariables 공개 목록 노출: LGTMDTS에 반영되어 소비자가 정확한 키만 전달할 수 있게 됩니다.
86-123: var() + fallback 적용 전반: LGTM모든 variant의 enabled/active/disabled/loading에 일관되게 적용되어 사용성이 좋습니다. ghost에서
--seed-box-color로 아이콘/라벨 색을 정규화한 것도 👍Also applies to: 124-159, 160-196, 197-233, 235-274, 275-315, 316-350
te6-in
changed the title
overrides prop to ActionButton
Deploying seed-design-v3 with
|
| Latest commit: |
ceae5e0
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://0f465966.seed-design.pages.dev |
| Branch Preview URL: | https://feat-overridable-variables.seed-design.pages.dev |
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (4)
docs/components/type-table/get-union-literals.ts (4)
20-22: 파일 존재 확인 및 친절한 오류 메시지 추가 제안해당 경로가 존재하지 않을 때 ts-morph가 난해한 에러를 던질 수 있습니다. 사전 존재 검사로 DX 개선하세요.
적용 diff:
const resolvedPath = resolveTypePath(filePath); + if (!fs.existsSync(resolvedPath)) { + throw new Error(`Type source file not found: ${resolvedPath} (resolved from "${filePath}")`); + } const sourceFile = project.addSourceFileAtPath(resolvedPath);추가 import:
// 상단에 추가 import fs from "node:fs";
30-33: 리터럴만 추출하고 결과를 안정 정렬현재는 비‑리터럴(예: string)도 그대로 표에 노출됩니다. 가능한 경우 리터럴 값을 우선 사용하고, 없으면 getText()로 폴백한 뒤 정렬해 출력하면 안정적입니다.
- const literals = (type.isUnion() ? type.getUnionTypes() : [type]) - .map((t) => t.getText()) - .filter((v): v is string => !!v); + const members = type.isUnion() ? type.getUnionTypes() : [type]; + const literals = members + .map((t) => { + const v = (t as any).getLiteralValue?.(); + if (v !== undefined) return typeof v === "string" ? JSON.stringify(v) : String(v); + return t.getText(); + }) + .filter(Boolean) + .sort((a, b) => a.localeCompare(b));
39-51: resolveTypePath 경로 고정 및 루트 탈출 방지문서 속성값이 잘못되면 루트 밖으로 나가는 경로가 만들어질 수 있습니다. 루트 기준으로 resolve 후 루트 범위 검증을 추가하세요.
function resolveTypePath(filePath: string): string { - if (filePath.startsWith("@seed-design/")) { - const packagePath = filePath.replace("@seed-design/", ""); - - return path.join(process.cwd(), "../packages", `${packagePath}.d.ts`); - } + const root = process.cwd(); + if (filePath.startsWith("@seed-design/")) { + const packagePath = filePath.replace("@seed-design/", ""); + const abs = path.resolve(root, "../packages", `${packagePath}.d.ts`); + const rel = path.relative(root, abs); + if (rel.startsWith("..") || path.isAbsolute(rel)) { + throw new Error(`Resolved path escapes repository root: ${abs}`); + } + return abs; + } if (filePath.startsWith("./") || filePath.startsWith("../")) { - return path.resolve(process.cwd(), filePath); + const abs = path.resolve(root, filePath); + const rel = path.relative(root, abs); + if (rel.startsWith("..") || path.isAbsolute(rel)) { + throw new Error(`Resolved path escapes repository root: ${abs}`); + } + return abs; } return filePath; }
27-29: 불필요한 null 체크getType()는 항상 Type을 반환합니다. 중복 체크 제거로 단순화하세요.
const type = typeAlias.getType(); - if (!type) throw new Error(`Type "${name}" not found in ${filePath}`);
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (2)
bun.lockis excluded by!**/*.lockdocs/package.jsonis excluded by!**/package.json
📒 Files selected for processing (5)
docs/components/type-table/get-union-literals.ts(1 hunks)docs/components/type-table/react-type-table.tsx(0 hunks)docs/components/type-table/remark-union-literal-table.tsx(1 hunks)docs/content/react/components/action-button.mdx(1 hunks)docs/source.config.ts(2 hunks)
💤 Files with no reviewable changes (1)
- docs/components/type-table/react-type-table.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- docs/content/react/components/action-button.mdx
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/docs.mdc)
**/*.{ts,tsx}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Use TypeScript for all code; prefer interfaces over types.
Avoid enums; use maps instead.
Use the "function" keyword for pure functions.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
Files:
docs/components/type-table/remark-union-literal-table.tsxdocs/components/type-table/get-union-literals.tsdocs/source.config.ts
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/docs.mdc)
**/*.tsx: Structure files: exported component, subcomponents, helpers, static content, types.
Use functional components with TypeScript interfaces.
Use declarative JSX.
Use Tailwind CSS for styling.
Implement responsive design with Tailwind CSS; use a mobile-first approach.
Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
Wrap client components in Suspense with fallback.
Use dynamic loading for non-critical components.
Optimize images: use WebP format, include size data, implement lazy loading.
Use 'nuqs' for URL search parameter state management.
Limit 'use client': Favor server components and Next.js SSR. Use only for Web API access in small components. Avoid for data fetching or state management.
Files:
docs/components/type-table/remark-union-literal-table.tsx
🧬 Code graph analysis (2)
docs/components/type-table/remark-union-literal-table.tsx (1)
docs/components/type-table/get-union-literals.ts (1)
getUnionLiterals(16-35)
docs/source.config.ts (1)
docs/components/type-table/remark-union-literal-table.tsx (1)
remarkUnionLiteralTable(16-85)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Analyze (javascript)
- GitHub Check: Deploy seed-design-v3 Storybook Alpha
- GitHub Check: Deploy Seed Design V3 Docs
🔇 Additional comments (3)
docs/components/type-table/get-union-literals.ts (1)
14-14: Project 싱글톤 사용 OK — 빌드 스케일에서 메모리 확인 부탁대규모 문서 빌드에서 SourceFile 캐시가 계속 쌓일 수 있습니다. 빌드 피크 메모리를 한 번 점검해 주세요.
docs/source.config.ts (2)
6-6: 플러그인 임포트 적절등록 대상과 경로 일치합니다.
53-54: 비동기 remark 플러그인 사용 확인 요청remarkUnionLiteralTable은 async 트랜스포머입니다. 현재 파이프라인이 async remark를 처리하는지(빌드가 Promise를 await하는지) 한 번 확인해 주세요.
# Conflicts: # packages/css/all.min.css
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
docs/components/type-table/remark-react-type-table.tsx (1)
174-179: AST 스키마 위반: 자식 위치에root노드 치환은 잘못된 구조입니다
root는 트리 최상단에서만 유효합니다. 현재 노드를root로 바꾸면 MDAST 스키마가 깨져 후속 플러그인에서 크래시/비정상 동작이 발생할 수 있습니다. 단일 결과면 그대로 치환하고, 여러 결과면div같은 래퍼mdxJsxFlowElement로 감싸세요.적용 diff:
- Object.assign(node, { - type: "root", - attributes: [], - children: await Promise.all(rendered), - } as Root); + const tables = await Promise.all(rendered); + + // 단일이면 그대로 치환, 다수면 div 래퍼로 감싸서 BlockContent 스키마를 유지 + Object.assign( + node, + tables.length === 1 + ? tables[0] + : ({ + type: "mdxJsxFlowElement", + name: "div", + attributes: [], + children: tables, + } as MdxJsxFlowElement), + );
♻️ Duplicate comments (1)
docs/components/type-table/remark-union-literal-table.tsx (1)
3-3: SKIP 상수 사용으로 트래버설 제어가 올바르게 동작합니다문자열 "skip"에서 SKIP 상수로 전환된 점 확인했습니다. 방문기 동작이 안정적입니다.
Also applies to: 80-81
🧹 Nitpick comments (3)
docs/components/type-table/remark-react-type-table.tsx (2)
43-47: 잠재적 NPE:entry.tags접근에 안전 연산자 필요
entry.tags가 없는 경우entry.tags.default접근에서 런타임 에러가 납니다. 옵셔널 체이닝과 null 병합을 사용하세요.- const value = valueToEstree({ - type: entry.type, - default: entry.tags.default || entry.tags.defaultValue, - }) as ObjectExpression; + const value = valueToEstree({ + type: entry.type, + default: entry.tags?.default ?? entry.tags?.defaultValue, + }) as ObjectExpression;
122-123:file.path미보장 대비 기본값 처리일부 파이프라인에서
file.path가 비어 있을 수 있습니다. 기본값을 사용해 안전하게 처리하세요.- const basePath = dirname(file.path); + const basePath = dirname(file.path || ".");docs/components/type-table/remark-union-literal-table.tsx (1)
34-38: 필수 속성 검증 추가 권장 (path,name)현재 누락 시 내부에서 모호한 에러가 날 수 있습니다. 명시적으로 빠르게 실패하도록 해주세요.
async function run() { + if (!props.path || !props.name) { + throw new Error('`union-literal-table` requires string "path" and "name" attributes'); + } const result = await getUnionLiterals({ path: props.path, name: props.name, });
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (3)
packages/css/all.cssis excluded by!packages/css/**/*packages/css/all.min.cssis excluded by!packages/css/**/*packages/css/recipes/action-button.d.tsis excluded by!packages/css/**/*
📒 Files selected for processing (2)
docs/components/type-table/remark-react-type-table.tsx(2 hunks)docs/components/type-table/remark-union-literal-table.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/docs.mdc)
**/*.{ts,tsx}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Use TypeScript for all code; prefer interfaces over types.
Avoid enums; use maps instead.
Use the "function" keyword for pure functions.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
Files:
docs/components/type-table/remark-react-type-table.tsxdocs/components/type-table/remark-union-literal-table.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/docs.mdc)
**/*.tsx: Structure files: exported component, subcomponents, helpers, static content, types.
Use functional components with TypeScript interfaces.
Use declarative JSX.
Use Tailwind CSS for styling.
Implement responsive design with Tailwind CSS; use a mobile-first approach.
Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
Wrap client components in Suspense with fallback.
Use dynamic loading for non-critical components.
Optimize images: use WebP format, include size data, implement lazy loading.
Use 'nuqs' for URL search parameter state management.
Limit 'use client': Favor server components and Next.js SSR. Use only for Web API access in small components. Avoid for data fetching or state management.
Files:
docs/components/type-table/remark-react-type-table.tsxdocs/components/type-table/remark-union-literal-table.tsx
🧬 Code graph analysis (1)
docs/components/type-table/remark-union-literal-table.tsx (1)
docs/components/type-table/get-union-literals.ts (1)
getUnionLiterals(16-35)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: chromatic-deployment
- GitHub Check: Deploy Seed Design V3 Docs
🔇 Additional comments (1)
docs/components/type-table/remark-react-type-table.tsx (1)
14-14: SKIP 도입 반영 좋습니다"skip" 문자열 대신 SKIP 상수 사용으로 방문기 제어가 정확해졌습니다.
malangcat
left a comment
malangcat
left a comment
There was a problem hiding this comment.
overridableVariables 보다는 이미 있는 style을 활용해도 무방하지 않은가 싶습니다.
결국 필요한건 "어떤 css 변수가 제공되는가"에 대한 type-safe한 api인데, ActionButton.vars.enabledBackground와 같이 컴포넌트의 멤버 변수로 제공되는 형태를 생각하고 있었어요.
예를 들어:
<ActionButton style={{
[ActionButton.vars.enabledBackground]: vars.$color.bg.informativeSolid
}} />이게 가능해지려면 qvism에서 vars api를 만들어줘야겠죠. 그 점에서는 현재 방식과 유사하게 접근 가능해보이는데... vanilla-extract의 createVars를 참고해볼 수 있겠습니다.
qvism 단에서는 overridableVars라는 네이밍 보다는 그냥 vars가 낫지 않나 싶어요. 어차피 css variable로 빼고 나면 사실상 overridable한건 다 똑같거든요.
| import { onlyIcon, prefixIcon, suffixIcon } from "../utils/icon"; | ||
| import { active, disabled, focus, loading, pseudo } from "../utils/pseudo"; | ||
|
|
||
| const OVERRIDABLE_VARIABLES = { |
There was a problem hiding this comment.
suggestion:
const enabledBackground = defineVar("--seed-action-button-enabled-background");
const activeBackground = defineVar("--seed-action-button-active-background");
const disabledBackground = defineVar("--seed-action-button-disabled-background");
const loadingBackground = defineVar("--seed-action-button-loading-background");
const actionButton = defineRecipe({
name: "action-button",
vars: {
enabledBackground,
activeBackground,
disabledBackground,
loadingBackground,
}
...컴파일된 recipes/action-button.js에
export const vars = {
enabledBackground: "var(--seed-action-button-enabled-background)",
activeBackground: "var(--seed-action-button-active-background)",
disabledBackground: "var(--seed-action-button-disabled-background)",
loadingBackground: "var(--seed-action-button-loading-background)",
}recipes/action-button.d.ts에
export declare const vars = {
enabledBackground: "var(--seed-action-button-enabled-background)",
activeBackground: "var(--seed-action-button-active-background)",
disabledBackground: "var(--seed-action-button-disabled-background)",
loadingBackground: "var(--seed-action-button-loading-background)",
}이렇게 나와주면 React 패키지에서 간단하게 ActionButton.vars에 해당 값을 붙여주면 type-safe하게 제공하면서, 추가 prop 없이 style 속성으로 간편하게 오버라이드가 가능해집니다.
# Conflicts: # bun.lock # docs/package.json # docs/source.config.ts # packages/css/all.min.css
Usage
Docs
union-literal-table추가Summary by CodeRabbit