chore(biome): add lint:fix script for auto-fix#208
Merged
froggy1014 merged 2 commits intomainfrom Apr 10, 2026
Merged
Conversation
froggy1014
requested review from
3o14,
G-hoon,
KYBee,
Yeom-JinHo,
haedawn,
minjeeki,
minji0214 and
osohyun0224
as code owners
|
WalkthroughThe PR applies comprehensive code style and formatting updates across the monorepo, including reformatting package manifests, reorganizing imports for consistency, refactoring JSX components for readability, updating linting scripts to separate lint from lint-fix commands, and adjusting CSS specificity rules. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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 |
Codecov Report❌ Patch coverage is
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/tooltip/src/Tooltip.stories.tsx (1)
1-33:⚠️ Potential issue | 🟠 MajorReplace
StoryFnpattern withStoryObjstories.This story file still uses
StoryFn+ template binding; repo guidelines requireMeta+StoryObjin*.stories.tsx.♻️ Suggested migration pattern
-import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Tooltip, type TooltipProps } from './Tooltip'; -export default { +const meta: Meta<typeof Tooltip> = { title: 'Components/Tooltip', component: Tooltip, argTypes: { // ... }, -} as Meta<TooltipProps>; +}; +export default meta; + +type Story = StoryObj<typeof Tooltip>; -const Template: StoryFn<TooltipProps> = (args) => ( - <div style={{ margin: '100px', textAlign: 'center' }}> - <Tooltip {...args}> - <button type="button" style={{ padding: '8px 12px', cursor: 'pointer' }}> - Hover Me - </button> - </Tooltip> - </div> -); - -export const Default = Template.bind({}); -Default.args = { +export const Default: Story = { + args: { tooltipContent: 'This is a tooltip', placement: 'top', trigger: 'hover', - tooltipStyle: { - backgroundColor: '#333', - color: '#fff', - padding: '8px 12px', - borderRadius: '4px', + tooltipStyle: { + backgroundColor: '#333', + color: '#fff', + padding: '8px 12px', + borderRadius: '4px', + }, }, };As per coding guidelines: "
packages/*/src/*.stories.tsx: Create Storybook stories usingMetaandStoryObjtypes in Component.stories.tsx".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/tooltip/src/Tooltip.stories.tsx` around lines 1 - 33, The story currently uses the StoryFn+Template pattern; migrate to the StoryObj pattern by removing the Template function and typing exports with StoryObj<TooltipProps>: keep the default export as Meta<TooltipProps>, add a type alias like Story = StoryObj<TooltipProps>, then export named stories (e.g., Default) as Story objects with an args object matching existing defaults; update imports to import StoryObj instead of StoryFn and ensure any prop controls/argTypes remain on the default export.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/card/src/Card.test.tsx`:
- Line 5: In Card.test.tsx, remove the extra blank line that splits the
external-package imports in the top import block so all external imports are
contiguous; locate the import statements for external packages (the imports
after the `@radix-ui/`* / external group) and join them without an empty line
between them while keeping a blank line separating major groups
(node/react/@sipe-team/@vanilla-extract/@radix-ui → external → relative).
In `@packages/flex/src/Flex.test.tsx`:
- Line 46: Change the Korean test descriptions in the it.each blocks to English:
locate the it.each whose description string is "flex의 justify prop에
$justifyContent 속성을 주입하면 해당 속성을 적용한다." and replace it with an English equivalent
(e.g., "applies the $justifyContent value when passing justify prop to Flex");
do the same for the other it.each descriptions mentioned (lines with the Korean
strings at the other referenced tests) so all test names in Flex.test.tsx are in
English while preserving the interpolated $justifyContent and other
placeholders.
In `@packages/icon/src/components/CheckCircleIcon.tsx`:
- Line 10: The CheckCircleIcon component hardcodes fallback fill colors (e.g.,
fill={color || '#00ffff'} and the other literal at the second occurrence);
change these to use the design tokens instead: import the appropriate color
token(s) from packages/tokens (or the theme hook) and use them as the fallback
(e.g., fill={color || tokens.colors.<appropriateToken>}) so the icon defaults
follow the token contract; update both occurrences referenced in CheckCircleIcon
(the fill fallback and the other literal) and ensure typings/imports remain
consistent.
In `@packages/icon/src/components/link.tsx`:
- Around line 1-23: Delete the duplicate component file link.tsx (which exports
the same LinkIcon component) to enforce PascalCase and avoid unused duplicates;
ensure that the canonical component file LinkIcon.tsx remains intact and
exported from the package index, and remove any references/imports to link.tsx
if present so the project builds with only LinkIcon.tsx providing the LinkIcon
symbol.
In `@packages/icon/src/components/OrganizerIcon.tsx`:
- Line 9: The OrganizerIcon component currently uses a hardcoded fallback hex in
the JSX (fill={color || '#00ffff'}); replace that literal with a token from
packages/tokens by importing the appropriate color token (e.g.,
DEFAULT_ICON_COLOR or a semantic token like tokens.colors.icon.default) and use
it as the fallback (fill={color ?? <TOKEN_NAME>}) so the component adheres to
the token rule; update the import at the top of OrganizerIcon.tsx to pull the
token from packages/tokens and remove the hardcoded '#00ffff'.
In `@packages/reset/src/reset.css`:
- Around line 263-266: Restore the hard reduced-motion overrides by re-adding
!important to the reset rules for animation-duration, animation-iteration-count,
transition-duration, and scroll-behavior so these user preference safeguards
cannot be overridden by component-specific rules; update the declarations that
currently read "animation-duration: 0.01ms;", "animation-iteration-count: 1;",
"transition-duration: 0.01ms;", and "scroll-behavior: auto;" to include
!important on each value to enforce the reduced-motion behavior for users who
set prefers-reduced-motion: reduce.
In `@packages/switch/src/Switch.test.tsx`:
- Around line 1-8: Import group order in Switch.test.tsx is incorrect; move the
React import group before external testing-library imports and add blank lines
between groups to match the repo convention. Specifically, ensure "import {
createRef } from 'react';" (React group) appears before imports from
'@testing-library/jest-dom', '@testing-library/react', 'user-event', 'vitest'
(external testing libraries), and keep internal/third-party groups in the
required node → react → `@sipe-team/`* → `@vanilla-extract/`* → `@radix-ui/`* →
external packages → relative paths order, adding blank lines between each group.
In `@packages/typography/src/Typography.test.tsx`:
- Line 23: Replace the Korean test titles in the test.each calls with English
equivalents: locate the test.each that uses the description template '주입한
$weight($numericWeight) weight을 기준으로 글꼴의 두께를 설정한다.' (and the two other Korean
descriptions at the other test.each instances) and update them to clear English
descriptions such as "Sets font-weight based on injected $weight
($numericWeight)" (or a similar concise English phrase), keeping the same
interpolation tokens ($weight, $numericWeight) and leaving the test logic (the
test.each table and assertions) unchanged.
---
Outside diff comments:
In `@packages/tooltip/src/Tooltip.stories.tsx`:
- Around line 1-33: The story currently uses the StoryFn+Template pattern;
migrate to the StoryObj pattern by removing the Template function and typing
exports with StoryObj<TooltipProps>: keep the default export as
Meta<TooltipProps>, add a type alias like Story = StoryObj<TooltipProps>, then
export named stories (e.g., Default) as Story objects with an args object
matching existing defaults; update imports to import StoryObj instead of StoryFn
and ensure any prop controls/argTypes remain on the default export.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 54ad5d05-3c67-44f3-b599-7d1b65607b4d
⛔ Files ignored due to path filters (3)
.templates/component/package.jsonis excluded by!.templates/**.templates/component/src/Component.stories.tsxis excluded by!.templates/**.templates/component/vitest.config.tsis excluded by!.templates/**
📒 Files selected for processing (112)
.vscode/extensions.json.vscode/settings.jsoncommitlint.config.tspackage.jsonpackages/accordion/package.jsonpackages/avatar/package.jsonpackages/avatar/src/Avatar.css.tspackages/avatar/src/Avatar.stories.tsxpackages/avatar/src/Avatar.test.tsxpackages/avatar/src/Avatar.tsxpackages/avatar/vitest.config.tspackages/badge/.storybook/main.tspackages/badge/.storybook/preview.tspackages/badge/package.jsonpackages/badge/src/Badge.css.tspackages/badge/src/Badge.stories.tsxpackages/badge/src/Badge.test.tsxpackages/badge/src/Badge.tsxpackages/badge/vitest.config.tspackages/button/package.jsonpackages/button/vitest.config.tspackages/card/.storybook/main.tspackages/card/.storybook/preview.tspackages/card/package.jsonpackages/card/src/Card.css.tspackages/card/src/Card.stories.tsxpackages/card/src/Card.test.tsxpackages/card/src/Card.tsxpackages/card/vitest.config.tspackages/checkbox/package.jsonpackages/checkbox/src/Checkbox.css.tspackages/checkbox/src/Checkbox.stories.tsxpackages/checkbox/src/Checkbox.test.tsxpackages/checkbox/src/Checkbox.tsxpackages/checkbox/vitest.config.tspackages/divider/package.jsonpackages/divider/src/Divider.css.tspackages/divider/src/Divider.stories.tsxpackages/divider/src/Divider.test.tsxpackages/divider/src/Divider.tsxpackages/divider/vitest.config.tspackages/flex/package.jsonpackages/flex/src/Flex.css.tspackages/flex/src/Flex.stories.tsxpackages/flex/src/Flex.test.tsxpackages/flex/vitest.config.tspackages/grid/package.jsonpackages/grid/src/Grid.test.tsxpackages/grid/src/Grid.tsxpackages/icon/package.jsonpackages/icon/scripts/generate-icons.tspackages/icon/scripts/utils/generate-components.tspackages/icon/scripts/utils/optimize-svg.tspackages/icon/scripts/utils/paths.tspackages/icon/scripts/utils/svgo.config.tspackages/icon/src/Icons.stories.tsxpackages/icon/src/components/CheckCircleIcon.tsxpackages/icon/src/components/EmailIcon.tsxpackages/icon/src/components/GithubIcon.tsxpackages/icon/src/components/InstagramIcon.tsxpackages/icon/src/components/KakaoIcon.tsxpackages/icon/src/components/LinkIcon.tsxpackages/icon/src/components/LinkedinIcon.tsxpackages/icon/src/components/OrganizerIcon.tsxpackages/icon/src/components/UserIcon.tsxpackages/icon/src/components/YoutubeIcon.tsxpackages/icon/src/components/link.tsxpackages/icon/src/icons.test.tsxpackages/icon/src/index.tspackages/icon/src/types.tspackages/icon/vitest.config.tspackages/input/package.jsonpackages/input/src/Input.stories.tsxpackages/input/src/Input.tsxpackages/input/vitest.config.tspackages/plugin-figma-codegen/package.jsonpackages/radio/package.jsonpackages/radio/src/Radio.css.tspackages/radio/src/Radio.tsxpackages/radio/src/RadioGroup.stories.tsxpackages/radio/vitest.config.tspackages/reset/src/Reset.test.tsxpackages/reset/src/reset.csspackages/reset/vitest.config.tspackages/side/package.jsonpackages/skeleton/package.jsonpackages/skeleton/src/Skeleton.stories.tsxpackages/skeleton/src/Skeleton.test.tsxpackages/skeleton/vitest.config.tspackages/switch/package.jsonpackages/switch/src/Switch.stories.tsxpackages/switch/src/Switch.test.tsxpackages/switch/vitest.config.tspackages/theme/package.jsonpackages/theme/src/ThemeProvider.test.tsxpackages/tokens/package.jsonpackages/tooltip/package.jsonpackages/tooltip/src/Tooltip.stories.tsxpackages/tooltip/src/Tooltip.test.tsxpackages/tooltip/vitest.config.tspackages/typography/package.jsonpackages/typography/src/Typography.css.tspackages/typography/src/Typography.stories.tsxpackages/typography/src/Typography.test.tsxpackages/typography/src/Typography.tsxpackages/typography/vitest.config.tsscripts/createComponent.tstsup.config.tsvite.config.tswww/package.jsonwww/src/HomepageFeatures/index.tsxwww/src/pages/index.tsx
|
|
||
| import { render, screen } from '@testing-library/react'; | ||
| import { expect, test } from 'vitest'; | ||
|
|
There was a problem hiding this comment.
Remove extra blank line inside the external import group.
Line 5 splits external-package imports into two groups; keep them contiguous and only separate between major groups.
Proposed fix
import { render, screen } from '@testing-library/react';
import { expect, test } from 'vitest';
-
import { Card } from './Card';As per coding guidelines, "**/*.{ts,tsx}: Enforce import order: node → react → @sipe-team/* → @vanilla-extract/* → @radix-ui/* → external packages → relative paths, with blank lines between groups".
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/card/src/Card.test.tsx` at line 5, In Card.test.tsx, remove the
extra blank line that splits the external-package imports in the top import
block so all external imports are contiguous; locate the import statements for
external packages (the imports after the `@radix-ui/`* / external group) and join
them without an empty line between them while keeping a blank line separating
major groups (node/react/@sipe-team/@vanilla-extract/@radix-ui → external →
relative).
| ); | ||
| ] satisfies Array<{ | ||
| justifyContent: CSSProperties['justifyContent']; | ||
| }>)('flex의 justify prop에 $justifyContent 속성을 주입하면 해당 속성을 적용한다.', ({ justifyContent }) => { |
There was a problem hiding this comment.
Convert updated test descriptions to English
The changed it.each descriptions are still in Korean. Please convert these updated test names to English for consistency with the test-file review standard.
As per coding guidelines, "**/packages/*/src/*.test.tsx: Review test files for: - English test descriptions (convert Korean descriptions to English)".
Also applies to: 68-68, 106-106, 210-210, 233-233
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/flex/src/Flex.test.tsx` at line 46, Change the Korean test
descriptions in the it.each blocks to English: locate the it.each whose
description string is "flex의 justify prop에 $justifyContent 속성을 주입하면 해당 속성을
적용한다." and replace it with an English equivalent (e.g., "applies the
$justifyContent value when passing justify prop to Flex"); do the same for the
other it.each descriptions mentioned (lines with the Korean strings at the other
referenced tests) so all test names in Flex.test.tsx are in English while
preserving the interpolated $justifyContent and other placeholders.
| <svg ref={ref} width={size} height={size} {...props} fill="none" viewBox="0 0 24 24"> | ||
| <g clipPath="url(#a)"> | ||
| <path | ||
| fill={color || '#00ffff'} |
There was a problem hiding this comment.
Avoid hardcoded SVG fallback colors
Both fallback fills are literal color values. Please switch these to token/theme-derived values so icon defaults follow the design token contract.
As per coding guidelines, "packages/**/src/**/*.{ts,tsx,css.ts}: 색상, 간격, 라운딩 값은 하드코딩하지 말고 packages/tokens 값을 사용하세요".
Also applies to: 16-16
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/icon/src/components/CheckCircleIcon.tsx` at line 10, The
CheckCircleIcon component hardcodes fallback fill colors (e.g., fill={color ||
'#00ffff'} and the other literal at the second occurrence); change these to use
the design tokens instead: import the appropriate color token(s) from
packages/tokens (or the theme hook) and use them as the fallback (e.g.,
fill={color || tokens.colors.<appropriateToken>}) so the icon defaults follow
the token contract; update both occurrences referenced in CheckCircleIcon (the
fill fallback and the other literal) and ensure typings/imports remain
consistent.
Comment on lines
1
to
23
| import * as React from 'react'; | ||
|
|
||
| import type { IconProps } from '../types'; | ||
|
|
||
| export const LinkIcon = React.forwardRef<SVGSVGElement, IconProps>( | ||
| ({ color, size = 24, ...props }, ref) => { | ||
| return <svg ref={ref} width={size} height={size} {...props} fill="none" viewBox="0 0 24 25"><g clipPath="url(#a)"><path fill={color || "#CBD5E0"} d="M17 7.5h-3c-.55 0-1 .45-1 1s.45 1 1 1h3c1.65 0 3 1.35 3 3s-1.35 3-3 3h-3c-.55 0-1 .45-1 1s.45 1 1 1h3c2.76 0 5-2.24 5-5s-2.24-5-5-5m-9 5c0 .55.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1H9c-.55 0-1 .45-1 1m2 3H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h3c.55 0 1-.45 1-1s-.45-1-1-1H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h3c.55 0 1-.45 1-1s-.45-1-1-1"/></g><defs><clipPath id="a"><path fill={color || "white"} d="M0 .5h24v24H0z"/></clipPath></defs></svg>; | ||
| } | ||
| ); | ||
| export const LinkIcon = React.forwardRef<SVGSVGElement, IconProps>(({ color, size = 24, ...props }, ref) => { | ||
| return ( | ||
| <svg ref={ref} width={size} height={size} {...props} fill="none" viewBox="0 0 24 25"> | ||
| <g clipPath="url(#a)"> | ||
| <path | ||
| fill={color || '#CBD5E0'} | ||
| d="M17 7.5h-3c-.55 0-1 .45-1 1s.45 1 1 1h3c1.65 0 3 1.35 3 3s-1.35 3-3 3h-3c-.55 0-1 .45-1 1s.45 1 1 1h3c2.76 0 5-2.24 5-5s-2.24-5-5-5m-9 5c0 .55.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1H9c-.55 0-1 .45-1 1m2 3H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h3c.55 0 1-.45 1-1s-.45-1-1-1H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h3c.55 0 1-.45 1-1s-.45-1-1-1" | ||
| /> | ||
| </g> | ||
| <defs> | ||
| <clipPath id="a"> | ||
| <path fill={color || 'white'} d="M0 .5h24v24H0z" /> | ||
| </clipPath> | ||
| </defs> | ||
| </svg> | ||
| ); | ||
| }); | ||
|
|
||
| LinkIcon.displayName = 'LinkIcon'; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify if both link.tsx and LinkIcon.tsx exist and check for duplicate exports
echo "=== Checking for both files ==="
fd -t f "^(link|LinkIcon)\.tsx$" packages/icon/src/components/
echo -e "\n=== Checking icon index exports ==="
rg -n "LinkIcon" packages/icon/src/index.ts packages/icon/src/components/index.ts
echo -e "\n=== Comparing file contents ==="
if [ -f "packages/icon/src/components/link.tsx" ] && [ -f "packages/icon/src/components/LinkIcon.tsx" ]; then
diff packages/icon/src/components/link.tsx packages/icon/src/components/LinkIcon.tsx || echo "Files differ"
fiRepository: sipe-team/side
Length of output: 413
🏁 Script executed:
#!/bin/bash
# Check if link.tsx is imported or exported anywhere
echo "=== Searching for imports/references to 'link.tsx' ==="
rg "from.*['\"].*link['\"]|import.*from.*link" --type ts --type tsx
echo -e "\n=== Searching for any reference to the lower-case file ==="
rg "link\.tsx" --type ts --type tsx
# Display content of both files for exact comparison
echo -e "\n=== Content of link.tsx ==="
cat packages/icon/src/components/link.tsx
echo -e "\n=== Content of LinkIcon.tsx ==="
cat packages/icon/src/components/LinkIcon.tsxRepository: sipe-team/side
Length of output: 2147
Remove duplicate link.tsx file.
The file is identical to LinkIcon.tsx and violates the PascalCase naming convention for React component files. Since only LinkIcon.tsx is exported in the package index and link.tsx is not referenced anywhere in the codebase, it should be deleted.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/icon/src/components/link.tsx` around lines 1 - 23, Delete the
duplicate component file link.tsx (which exports the same LinkIcon component) to
enforce PascalCase and avoid unused duplicates; ensure that the canonical
component file LinkIcon.tsx remains intact and exported from the package index,
and remove any references/imports to link.tsx if present so the project builds
with only LinkIcon.tsx providing the LinkIcon symbol.
| return ( | ||
| <svg ref={ref} width={size} height={size} {...props} fill="none" viewBox="0 0 16 14"> | ||
| <path | ||
| fill={color || '#00ffff'} |
There was a problem hiding this comment.
Replace hardcoded fallback color with tokenized value
fill={color || '#00ffff'} violates the token rule for package source files. Please source the default color from packages/tokens (or shared theme contract) instead of a literal hex value.
As per coding guidelines, "packages/**/src/**/*.{ts,tsx,css.ts}: 색상, 간격, 라운딩 값은 하드코딩하지 말고 packages/tokens 값을 사용하세요".
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/icon/src/components/OrganizerIcon.tsx` at line 9, The OrganizerIcon
component currently uses a hardcoded fallback hex in the JSX (fill={color ||
'#00ffff'}); replace that literal with a token from packages/tokens by importing
the appropriate color token (e.g., DEFAULT_ICON_COLOR or a semantic token like
tokens.colors.icon.default) and use it as the fallback (fill={color ??
<TOKEN_NAME>}) so the component adheres to the token rule; update the import at
the top of OrganizerIcon.tsx to pull the token from packages/tokens and remove
the hardcoded '#00ffff'.
Comment on lines
+263
to
+266
| animation-duration: 0.01ms; | ||
| animation-iteration-count: 1; | ||
| transition-duration: 0.01ms; | ||
| scroll-behavior: auto; |
There was a problem hiding this comment.
Restore hard reduced-motion overrides for accessibility.
At Line 263–Line 266, removing !important allows later or more specific component rules to override these safeguards, which can re-enable motion for users who set prefers-reduced-motion: reduce.
Suggested fix
`@media` (prefers-reduced-motion: reduce) {
*:not(.preserve-motion) {
- animation-duration: 0.01ms;
- animation-iteration-count: 1;
- transition-duration: 0.01ms;
- scroll-behavior: auto;
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ scroll-behavior: auto !important;
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| animation-duration: 0.01ms; | |
| animation-iteration-count: 1; | |
| transition-duration: 0.01ms; | |
| scroll-behavior: auto; | |
| animation-duration: 0.01ms !important; | |
| animation-iteration-count: 1 !important; | |
| transition-duration: 0.01ms !important; | |
| scroll-behavior: auto !important; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/reset/src/reset.css` around lines 263 - 266, Restore the hard
reduced-motion overrides by re-adding !important to the reset rules for
animation-duration, animation-iteration-count, transition-duration, and
scroll-behavior so these user preference safeguards cannot be overridden by
component-specific rules; update the declarations that currently read
"animation-duration: 0.01ms;", "animation-iteration-count: 1;",
"transition-duration: 0.01ms;", and "scroll-behavior: auto;" to include
!important on each value to enforce the reduced-motion behavior for users who
set prefers-reduced-motion: reduce.
Comment on lines
1
to
8
| import '@testing-library/jest-dom'; | ||
|
|
||
| import { createRef } from 'react'; | ||
|
|
||
| import { faker } from '@faker-js/faker'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import userEvent from '@testing-library/user-event'; | ||
| import { createRef } from 'react'; | ||
| import { describe, expect, test, vi } from 'vitest'; |
There was a problem hiding this comment.
Import group order violates the repository convention.
react should be placed before external testing-library imports per the defined order.
Suggested import reorder
-import '@testing-library/jest-dom';
-
import { createRef } from 'react';
+import '@testing-library/jest-dom';
import { faker } from '@faker-js/faker';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';As per coding guidelines: **/*.{ts,tsx}: Enforce import order: node → react → @sipe-team/* → @vanilla-extract/* → @radix-ui/* → external packages → relative paths, with blank lines between groups.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/switch/src/Switch.test.tsx` around lines 1 - 8, Import group order
in Switch.test.tsx is incorrect; move the React import group before external
testing-library imports and add blank lines between groups to match the repo
convention. Specifically, ensure "import { createRef } from 'react';" (React
group) appears before imports from '@testing-library/jest-dom',
'@testing-library/react', 'user-event', 'vitest' (external testing libraries),
and keep internal/third-party groups in the required node → react → `@sipe-team/`*
→ `@vanilla-extract/`* → `@radix-ui/`* → external packages → relative paths order,
adding blank lines between each group.
| ] satisfies Array<{ | ||
| weight: FontWeight; | ||
| numericWeight: number; | ||
| }>)('주입한 $weight($numericWeight) weight을 기준으로 글꼴의 두께를 설정한다.', ({ weight, numericWeight }) => { |
There was a problem hiding this comment.
Convert updated test descriptions to English.
The changed test.each titles are still in Korean. Please rename these test descriptions to English for consistency with the test guideline.
As per coding guidelines "/packages//src/.test.tsx: Review test files for: - English test descriptions (convert Korean descriptions to English)".
Also applies to: 39-39, 57-57
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/typography/src/Typography.test.tsx` at line 23, Replace the Korean
test titles in the test.each calls with English equivalents: locate the
test.each that uses the description template '주입한 $weight($numericWeight)
weight을 기준으로 글꼴의 두께를 설정한다.' (and the two other Korean descriptions at the other
test.each instances) and update them to clear English descriptions such as "Sets
font-weight based on injected $weight ($numericWeight)" (or a similar concise
English phrase), keeping the same interpolation tokens ($weight, $numericWeight)
and leaving the test logic (the test.each table and assertions) unchanged.
Yeom-JinHo
approved these changes
Apr 10, 2026
Comment on lines
8
to
+10
| "format": "biome format --write", | ||
| "lint": "biome lint --write", | ||
| "lint": "biome lint", | ||
| "lint:fix": "biome check --write", |
Member
There was a problem hiding this comment.
위에 format 스크립드도 있어서 역할을 확실히 분리하거나, 스크립트명 더 명확하게 바꾸면 좋을꺼 같아용~~
음.. fix:biome?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Changes
{ ....etc, "hooks": { "PostToolUse": [ { "matcher": "Edit|Write", "hooks": [ { "type": "command", "command": "pnpm biome check --write --unsafe $CLAUDE_FILE_PATHS", "timeout": 10, "statusMessage": "Biome 포맷팅 중..." } ] } ] } }PostToolUse에 biome check hook을 넣었더니 포매팅 작동하는건 확인했는데, 코드베이스 여기저기 포맷팅이 안되어 있는거 한번에 정리해서 PR 올립니다.Summary by CodeRabbit
Release Notes
Chores
lintandlint:fixcommands.Bug Fixes
!importantflags from animation properties in prefers-reduced-motion rule for better override flexibility.