chore: SwitchMark to Switchmark
#1102
Conversation
🦋 Changeset detectedLatest commit: c3901b5 The changes in this PR will be included in the next version bump. This PR includes changesets to release 9 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
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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 (1)
docs/stories/SwitchMark.stories.tsx (1)
3-3: LGTM! Story 파일의 모든 참조가 올바르게 업데이트되었습니다.컴포넌트 import, 타입, 변수명, 그리고 variant map이 모두 새로운
Switchmark네이밍으로 일관되게 변경되었습니다.선택적 개선: 파일명도 일관성을 위해 변경 고려
Story 파일명이 여전히
SwitchMark.stories.tsx인데, 일관성을 위해Switchmark.stories.tsx로 변경하는 것을 고려해보세요. (URL 안정성을 위해 의도적으로 유지하는 것이라면 무시하셔도 됩니다)Also applies to: 6-9, 15-16, 20-20, 50-50
📜 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 (19)
docs/public/__registry__/ui/switch.jsonis excluded by!**/__registry__/**/*,!**/public/**/*docs/public/rootage/components/switch-mark.jsonis excluded by!**/public/**/*docs/public/rootage/components/switchmark.jsonis excluded by!**/public/**/*docs/public/rootage/index.jsonis excluded by!**/public/**/*packages/css/all.cssis excluded by!packages/css/**/*packages/css/all.min.cssis excluded by!packages/css/**/*packages/css/recipes/switch-mark.d.tsis excluded by!packages/css/**/*packages/css/recipes/switch.cssis excluded by!packages/css/**/*packages/css/recipes/switchmark.cssis excluded by!packages/css/**/*packages/css/recipes/switchmark.d.tsis excluded by!packages/css/**/*packages/css/recipes/switchmark.mjsis excluded by!packages/css/**/*packages/css/vars/component/index.d.tsis excluded by!packages/css/**/*packages/css/vars/component/index.mjsis excluded by!packages/css/**/*packages/css/vars/component/switchmark.d.tsis excluded by!packages/css/**/*packages/css/vars/component/switchmark.mjsis excluded by!packages/css/**/*packages/qvism-preset/src/vars/component/index.d.tsis excluded by!packages/qvism-preset/src/vars/**/*packages/qvism-preset/src/vars/component/index.mjsis excluded by!packages/qvism-preset/src/vars/**/*packages/qvism-preset/src/vars/component/switchmark.d.tsis excluded by!packages/qvism-preset/src/vars/**/*packages/qvism-preset/src/vars/component/switchmark.mjsis excluded by!packages/qvism-preset/src/vars/**/*
📒 Files selected for processing (21)
.changeset/good-foxes-cough.md(1 hunks)docs/content/docs/components/switch.mdx(1 hunks)docs/content/react/components/list.mdx(2 hunks)docs/content/react/components/switch.mdx(2 hunks)docs/examples/react/list/switch.tsx(1 hunks)docs/examples/react/switch/switchmark.tsx(1 hunks)docs/registry/ui/switch.tsx(1 hunks)docs/stories/SwitchMark.stories.tsx(2 hunks)examples/stackflow-spa/src/activities/ActivityListSwitchItem.tsx(3 hunks)examples/stackflow-spa/src/seed-design/ui/switch.tsx(1 hunks)packages/figma/src/codegen/component-properties.ts(1 hunks)packages/figma/src/codegen/targets/react/component/handlers/list-item.ts(1 hunks)packages/figma/src/codegen/targets/react/component/handlers/switch.ts(1 hunks)packages/figma/src/codegen/targets/react/component/handlers/switchmark.ts(3 hunks)packages/figma/src/codegen/targets/react/component/index.ts(2 hunks)packages/qvism-preset/src/recipes.ts(2 hunks)packages/qvism-preset/src/recipes/switch.ts(4 hunks)packages/qvism-preset/src/recipes/switchmark.ts(3 hunks)packages/react/src/components/Switch/Switch.tsx(4 hunks)packages/rootage/components/switch-mark.yaml(2 hunks)packages/rootage/components/switchmark.yaml(1 hunks)
🧰 Additional context used
📓 Path-based instructions (14)
docs/**/*.mdx
📄 CodeRabbit inference engine (.cursor/rules/documentation.mdc)
docs/**/*.mdx: Use Markdown for all documentation
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/switch.mdxdocs/content/react/components/list.mdxdocs/content/docs/components/switch.mdx
docs/**
📄 CodeRabbit inference engine (.cursor/rules/overview.mdc)
The
docs/directory contains online documentation built on Next.js and Fumadocs
Files:
docs/content/react/components/switch.mdxdocs/content/react/components/list.mdxdocs/content/docs/components/switch.mdxdocs/examples/react/switch/switchmark.tsxdocs/examples/react/list/switch.tsxdocs/registry/ui/switch.tsxdocs/stories/SwitchMark.stories.tsx
packages/rootage/**
📄 CodeRabbit inference engine (.cursor/rules/overview.mdc)
The
packages/rootagedirectory contains design token specifications in YAML format
Files:
packages/rootage/components/switchmark.yamlpackages/rootage/components/switch-mark.yaml
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/docs.mdc)
**/*.{ts,tsx}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Structure files: exported component, subcomponents, helpers, static content, types
Favor named exports for components
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:
packages/figma/src/codegen/targets/react/component/handlers/switch.tspackages/figma/src/codegen/targets/react/component/handlers/switchmark.tspackages/figma/src/codegen/targets/react/component/index.tsdocs/examples/react/switch/switchmark.tsxpackages/qvism-preset/src/recipes/switchmark.tspackages/qvism-preset/src/recipes.tsdocs/examples/react/list/switch.tsxdocs/registry/ui/switch.tsxpackages/figma/src/codegen/component-properties.tspackages/figma/src/codegen/targets/react/component/handlers/list-item.tsexamples/stackflow-spa/src/activities/ActivityListSwitchItem.tsxpackages/qvism-preset/src/recipes/switch.tsexamples/stackflow-spa/src/seed-design/ui/switch.tsxdocs/stories/SwitchMark.stories.tsxpackages/react/src/components/Switch/Switch.tsx
packages/figma/**
📄 CodeRabbit inference engine (.cursor/rules/overview.mdc)
The
packages/figmadirectory contains utilities or components related to Figma integration
Files:
packages/figma/src/codegen/targets/react/component/handlers/switch.tspackages/figma/src/codegen/targets/react/component/handlers/switchmark.tspackages/figma/src/codegen/targets/react/component/index.tspackages/figma/src/codegen/component-properties.tspackages/figma/src/codegen/targets/react/component/handlers/list-item.ts
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/docs.mdc)
**/*.tsx: 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
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/examples/react/switch/switchmark.tsxdocs/examples/react/list/switch.tsxdocs/registry/ui/switch.tsxexamples/stackflow-spa/src/activities/ActivityListSwitchItem.tsxexamples/stackflow-spa/src/seed-design/ui/switch.tsxdocs/stories/SwitchMark.stories.tsxpackages/react/src/components/Switch/Switch.tsx
packages/qvism-preset/**
📄 CodeRabbit inference engine (.cursor/rules/overview.mdc)
The
packages/qvism-presetdirectory contains component CSS recipe definitions
Files:
packages/qvism-preset/src/recipes/switchmark.tspackages/qvism-preset/src/recipes.tspackages/qvism-preset/src/recipes/switch.ts
examples/**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/examples.mdc)
examples/**/*.tsx: Use SEED Design for components and styling
Prioritize SEED Design imports from local snippets over package import
Import layout and utility components from@seed-design/react: Box, Flex, VStack, HStack, Grid, Divider, Text, ActionChip, Badge, Skeleton, Icon, PrefixIcon, SuffixIcon
Import icon components from@karrotmarket/react-monochrome-icon
Carefully treat PrefixIcon, SuffixIcon, Icon usage in SEED Design. The usage of these icon components differs from the usage of typical libraries
Prefer meaningful color tokens over palette tokens
Files:
examples/stackflow-spa/src/activities/ActivityListSwitchItem.tsxexamples/stackflow-spa/src/seed-design/ui/switch.tsx
examples/**
📄 CodeRabbit inference engine (.cursor/rules/overview.mdc)
The
examples/directory contains usage examples demonstrating how to use the design system packages
Files:
examples/stackflow-spa/src/activities/ActivityListSwitchItem.tsxexamples/stackflow-spa/src/seed-design/ui/switch.tsx
packages/react/**
📄 CodeRabbit inference engine (.cursor/rules/overview.mdc)
The
packages/reactdirectory contains the primary React component library that aggregates headless components
Files:
packages/react/src/components/Switch/Switch.tsx
packages/react/src/components/*/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
Each React component should be in its own directory with PascalCase naming (e.g., Button, TextField) in the @seed-design/react package
Files:
packages/react/src/components/Switch/Switch.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) and an index.ts file that exports the component in @seed-design/react
Always import React at the top of component files in @seed-design/react
Define proper TypeScript interfaces for component props in @seed-design/react
Prefer arrow function syntax for component definitions in @seed-design/react
Files:
packages/react/src/components/Switch/Switch.tsx
packages/react/src/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
Properly export all components for consumption in @seed-design/react
Files:
packages/react/src/components/Switch/Switch.tsx
packages/react/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
Prefer arrow functions for component and function definitions in @seed-design/react
Files:
packages/react/src/components/Switch/Switch.tsx
🧬 Code graph analysis (9)
packages/figma/src/codegen/targets/react/component/handlers/switchmark.ts (1)
packages/figma/src/codegen/component-properties.ts (1)
SwitchmarkProperties(373-375)
packages/figma/src/codegen/targets/react/component/index.ts (1)
packages/figma/src/codegen/targets/react/component/handlers/switchmark.ts (1)
createSwitchmarkHandler(10-26)
docs/examples/react/switch/switchmark.tsx (2)
docs/registry/ui/switch.tsx (2)
Switch(17-29)Switchmark(37-43)examples/stackflow-spa/src/seed-design/ui/switch.tsx (2)
Switch(15-27)Switchmark(35-41)
docs/examples/react/list/switch.tsx (2)
docs/registry/ui/switch.tsx (1)
Switchmark(37-43)examples/stackflow-spa/src/seed-design/ui/switch.tsx (1)
Switchmark(35-41)
packages/figma/src/codegen/component-properties.ts (1)
packages/figma/src/codegen/core/index.ts (1)
InferComponentDefinition(5-5)
examples/stackflow-spa/src/activities/ActivityListSwitchItem.tsx (2)
docs/registry/ui/switch.tsx (1)
Switchmark(37-43)examples/stackflow-spa/src/seed-design/ui/switch.tsx (1)
Switchmark(35-41)
examples/stackflow-spa/src/seed-design/ui/switch.tsx (1)
docs/registry/ui/switch.tsx (4)
SwitchmarkProps(32-32)Switchmark(37-43)SwitchMark(49-49)SwitchMarkProps(54-54)
docs/stories/SwitchMark.stories.tsx (2)
docs/registry/ui/switch.tsx (2)
Switch(17-29)Switchmark(37-43)examples/stackflow-spa/src/seed-design/ui/switch.tsx (2)
Switch(15-27)Switchmark(35-41)
packages/react/src/components/Switch/Switch.tsx (2)
packages/react/src/utils/createSlotRecipeContext.tsx (1)
createSlotRecipeContext(11-128)packages/react/src/utils/splitMultipleVariantsProps.mjs (1)
splitMultipleVariantsProps(1-25)
⏰ 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). (4)
- GitHub Check: Analyze (javascript)
- GitHub Check: Deploy seed-design-v3 Storybook Alpha
- GitHub Check: chromatic-deployment
- GitHub Check: Deploy Seed Design V3 Docs
🔇 Additional comments (24)
.changeset/good-foxes-cough.md (1)
2-8: BREAKING CHANGE와 minor 버전 범프의 일관성을 확인하세요.BREAKING CHANGE를 명시하면서 minor 버전으로 범프하고 있습니다. 일반적으로 Semantic Versioning에서 breaking change는 major 버전을 올려야 하지만, 0.x 버전이거나 팀의 버전 전략이 다를 수 있습니다.
패키지가 1.0 이전이거나 별도의 버전 관리 정책이 있다면 현재 방식이 적절할 수 있으니, 의도적인 선택인지 확인해 주세요.
packages/rootage/components/switch-mark.yaml (1)
7-8: LGTM! 적절한 deprecation 전략입니다.기존
switch-mark컴포넌트 스펙을 유지하면서deprecated메타데이터를 추가하여 사용자에게Switchmark로 마이그레이션하도록 안내하는 접근 방식이 좋습니다. 하위 호환성을 유지하면서 점진적인 마이그레이션을 가능하게 합니다.packages/rootage/components/switchmark.yaml (1)
1-142: LGTM! 완전하고 일관된 컴포넌트 스펙입니다.새로운
Switchmark컴포넌트 스펙이 잘 정의되어 있습니다:
- 슬롯 구조(root, thumb)가 명확함
- 모든 필요한 속성(dimensions, colors, timing functions 등)이 포함됨
- 상태 조합(enabled, disabled, selected)이 적절히 정의됨
- tone과 size 변형이 포괄적으로 지원됨
기존
switch-mark.yaml의 구조를 그대로 가져오면서 새로운 이름으로 마이그레이션하는 전략이 적절합니다.examples/stackflow-spa/src/seed-design/ui/switch.tsx (1)
30-52: LGTM! 훌륭한 하위 호환성 전략입니다.새로운
Switchmark컴포넌트와SwitchmarkProps타입을 도입하면서, 기존SwitchMark와SwitchMarkProps를 deprecated alias로 제공하여 기존 코드의 호환성을 유지하고 있습니다.JSDoc
@deprecated태그를 사용하여 IDE에서 명확한 마이그레이션 가이드를 제공하는 점이 특히 좋습니다.packages/figma/src/codegen/targets/react/component/handlers/switch.ts (1)
25-25: LGTM! 스니펫 요소 키가 올바르게 업데이트되었습니다.
createLocalSnippetElement호출의 요소 키가"SwitchMark"에서"Switchmark"로 변경되어 새로운 컴포넌트 이름과 일치합니다.docs/content/react/components/list.mdx (1)
144-144: 링크 대상 앵커가 올바르게 존재합니다.
switch.mdx의 113줄에서 "#### UsingSwitchmark" 섹션이 존재하므로#using-switchmark앵커가 정상적으로 생성됩니다. 목록 문서의 두 위치(144줄, 385줄) 모두에서[Switchmark](/react/components/switch#using-switchmark)로 일관되게 링크가 업데이트되었으며, 링크 대상이 유효합니다.packages/qvism-preset/src/recipes/switchmark.ts (1)
1-119: 이름 변경이 코드베이스 전체에 일관되게 적용되었습니다.다음 변경사항들이 모두 완료되었습니다:
- Import 별칭:
switchMark→switchmark- 상수명:
switchMarkRecipe→switchmarkRecipe- Recipe 이름:
"switch-mark"→"switchmark"- CSS 변수:
--switch-mark-margin-top→--switchmark-margin-top이전 명명 규칙에 대한 참조가 코드베이스에 남아있지 않으므로 변경사항이 완전히 적용되었습니다.
packages/figma/src/codegen/component-properties.ts (1)
373-375: 타입 이름 변경이 올바르게 적용되고 모든 참조가 업데이트되었습니다.
SwitchMarkProperties→SwitchmarkProperties그리고sets.switchMark→sets.switchmark로의 변경이 완벽하게 적용되었습니다. switchmark 핸들러를 포함한 모든 종속 코드에서 새로운 타입 이름을 올바르게 사용하고 있으며, 이전 이름에 대한 참조는 남아있지 않습니다. 코딩 가이드라인도 준수되어 있습니다 (타입은 PascalCase, 객체 키는 camelCase).docs/examples/react/switch/switchmark.tsx (1)
3-3: LGTM! 일관된 네이밍 변경이 적용되었습니다.
SwitchMark에서Switchmark로의 import와 사용이 일관되게 업데이트되었습니다.Also applies to: 9-9
docs/content/react/components/switch.mdx (2)
29-31: 문서 업데이트가 올바르게 적용되었습니다.Props 섹션의 제목과 타입 테이블 참조가
Switchmark로 일관되게 업데이트되었습니다.
113-124: 예제 참조가 올바르게 업데이트되었습니다.섹션 제목, 설명, 그리고 파일 경로가 모두
switchmark로 일관되게 변경되었습니다.packages/qvism-preset/src/recipes.ts (1)
51-51: 레시피 import와 export가 일관되게 업데이트되었습니다.Import 경로와 export 키가 새로운
switchmark네이밍을 따르도록 올바르게 변경되었습니다.Also applies to: 118-118
packages/qvism-preset/src/recipes/switch.ts (2)
2-2: Import 업데이트가 올바르게 적용되었습니다.
switchmarkimport가 새로운 네이밍 규칙과 일치합니다.
44-44: CSS 변수명이 일관되게 업데이트되었습니다.모든 사이즈 변형(32, 24, 16)에서
--switch-mark-margin-top이--switchmark-margin-top으로 일관되게 변경되어 새로운 컴포넌트 네이밍과 일치합니다.Also applies to: 57-57, 70-70
examples/stackflow-spa/src/activities/ActivityListSwitchItem.tsx (2)
23-23: Import가 올바르게 업데이트되었습니다.
Switchmarkimport가 새로운 컴포넌트 이름과 일치합니다.
122-122: 컴포넌트 사용이 일관되게 업데이트되었습니다.prefix와 suffix 위치 모두에서
<Switchmark />사용이 올바르게 적용되었습니다.Also applies to: 155-155
docs/content/docs/components/switch.mdx (1)
151-153: Specification 섹션이 올바르게 업데이트되었습니다.제목과 ComponentSpecBlock ID가
Switchmark로 일관되게 변경되었습니다.docs/examples/react/list/switch.tsx (1)
5-5: Import와 사용이 일관되게 업데이트되었습니다.
Switchmarkimport와 두 개의 ListSwitchItem 사용 예제가 모두 올바르게 업데이트되었습니다.Also applies to: 13-13, 20-20
packages/figma/src/codegen/targets/react/component/handlers/list-item.ts (1)
105-105: Switchmark 태그 검사가 일관되게 구현되었습니다.suffix.tag 프로퍼티는 ElementNode의 태그 속성이며, Switchmark 핸들러가
createLocalSnippetElement("Switchmark", ...)을 통해 일관되게 생성합니다. 동일한 패턴이 Checkmark, RadioMark 등 다른 컴포넌트에도 적용되어 있으며, 이전 "SwitchMark" 네이밍 참조는 모두 제거되었습니다.packages/figma/src/codegen/targets/react/component/index.ts (1)
50-50: LGTM! 핸들러 이름 변경이 일관되게 적용되었습니다.
createSwitchmarkHandler로의 이름 변경이 import 문과 배열 등록 모두에서 올바르게 적용되었습니다.Also applies to: 94-94
packages/react/src/components/Switch/Switch.tsx (1)
3-3: LGTM! 타입 및 변수명 변경이 일관성 있게 적용되었습니다.
switchmark관련 타입, 변수명, import 경로가 모두 올바르게 업데이트되었습니다. camelCase 네이밍 컨벤션도 적절히 따르고 있습니다.Also applies to: 16-16, 28-28, 35-35, 42-42, 48-48, 64-64
packages/figma/src/codegen/targets/react/component/handlers/switchmark.ts (1)
1-1: LGTM! 핸들러와 타입이 올바르게 업데이트되었습니다.타입 import, 함수명, metadata 키, 그리고 생성되는 엘리먼트 이름이 모두 새로운
Switchmark네이밍으로 일관되게 변경되었습니다.Also applies to: 10-12, 24-24
docs/registry/ui/switch.tsx (2)
32-32: LGTM! 공개 API가 올바르게 업데이트되었습니다.인터페이스와 컴포넌트가 새로운
Switchmark네이밍으로 일관되게 변경되었습니다.Also applies to: 37-44
46-54: LGTM! 하위 호환성을 위한 deprecated 별칭이 잘 구현되었습니다.이전
SwitchMark이름을 deprecated 별칭으로 유지하여 기존 코드의 점진적인 마이그레이션을 지원하고 있습니다. JSDoc 주석도 명확하게 작성되었습니다. 이는 breaking change를 완화하는 좋은 사례입니다.
Deploying seed-design-v3 with
|
| Latest commit: |
c3901b5
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://baced3a1.seed-design.pages.dev |
| Branch Preview URL: | https://chore-switchmark.seed-design.pages.dev |
Summary by CodeRabbit
릴리스 노트
Breaking Changes
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.