New build icon and update gallery, link, color #126
Conversation
WalkthroughRecent changes enhance the development environment, improve SVG handling, and update color and component structures. Notable modifications include the introduction of a new SVG processing script, changes to Storybook and Next.js configurations, and updates in various UI components. Dependency adjustments in Changes
Poem
Tip AI model upgrade
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (239)
package-lock.jsonis excluded by!**/package-lock.jsonsrc/components/ui/icons/Vector.svgis excluded by!**/*.svgsrc/components/ui/icons/account.svgis excluded by!**/*.svgsrc/components/ui/icons/add-member.svgis excluded by!**/*.svgsrc/components/ui/icons/albums.svgis excluded by!**/*.svgsrc/components/ui/icons/albums2.svgis excluded by!**/*.svgsrc/components/ui/icons/alert-danger.svgis excluded by!**/*.svgsrc/components/ui/icons/alert-info.svgis excluded by!**/*.svgsrc/components/ui/icons/alert-success.svgis excluded by!**/*.svgsrc/components/ui/icons/alert-warning.svgis excluded by!**/*.svgsrc/components/ui/icons/alert.svgis excluded by!**/*.svgsrc/components/ui/icons/analytics.svgis excluded by!**/*.svgsrc/components/ui/icons/anchor.svgis excluded by!**/*.svgsrc/components/ui/icons/apple.svgis excluded by!**/*.svgsrc/components/ui/icons/arrow-back.svgis excluded by!**/*.svgsrc/components/ui/icons/arrow-back2.svgis excluded by!**/*.svgsrc/components/ui/icons/arrow-circle-right.svgis excluded by!**/*.svgsrc/components/ui/icons/arrow-down-circle.svgis excluded by!**/*.svgsrc/components/ui/icons/arrow-down.svgis excluded by!**/*.svgsrc/components/ui/icons/arrow-first.svgis excluded by!**/*.svgsrc/components/ui/icons/arrow-last.svgis excluded by!**/*.svgsrc/components/ui/icons/arrow-left-circle.svgis excluded by!**/*.svgsrc/components/ui/icons/arrow-left-down.svgis excluded by!**/*.svgsrc/components/ui/icons/arrow-left-right.svgis excluded by!**/*.svgsrc/components/ui/icons/arrow-left-up.svgis excluded by!**/*.svgsrc/components/ui/icons/arrow-left.svgis excluded by!**/*.svgsrc/components/ui/icons/arrow-product.svgis excluded by!**/*.svgsrc/components/ui/icons/arrow-right-circle.svgis excluded by!**/*.svgsrc/components/ui/icons/arrow-right-dow.svgis excluded by!**/*.svgsrc/components/ui/icons/arrow-right-up.svgis excluded by!**/*.svgsrc/components/ui/icons/arrow-right.svgis excluded by!**/*.svgsrc/components/ui/icons/arrow-up-circle.svgis excluded by!**/*.svgsrc/components/ui/icons/arrow-up-down.svgis excluded by!**/*.svgsrc/components/ui/icons/arrow-up.svgis excluded by!**/*.svgsrc/components/ui/icons/arrow.svgis excluded by!**/*.svgsrc/components/ui/icons/arrow2.svgis excluded by!**/*.svgsrc/components/ui/icons/artist.svgis excluded by!**/*.svgsrc/components/ui/icons/back-home.svgis excluded by!**/*.svgsrc/components/ui/icons/back.svgis excluded by!**/*.svgsrc/components/ui/icons/backward.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-A.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-B.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-C.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-D.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-E.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-F.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-G.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-H.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-I.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-J.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-K.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-L.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-M.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-N.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-O.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-P.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-Q.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-R.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-S.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-T.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-U.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-V.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-W.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-X.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-Y.svgis excluded by!**/*.svgsrc/components/ui/icons/badge-Z.svgis excluded by!**/*.svgsrc/components/ui/icons/bank-note.svgis excluded by!**/*.svgsrc/components/ui/icons/bank.svgis excluded by!**/*.svgsrc/components/ui/icons/barrier.svgis excluded by!**/*.svgsrc/components/ui/icons/beautiful.svgis excluded by!**/*.svgsrc/components/ui/icons/book.svgis excluded by!**/*.svgsrc/components/ui/icons/branch.svgis excluded by!**/*.svgsrc/components/ui/icons/bulb.svgis excluded by!**/*.svgsrc/components/ui/icons/camera.svgis excluded by!**/*.svgsrc/components/ui/icons/canvas.svgis excluded by!**/*.svgsrc/components/ui/icons/chart.svgis excluded by!**/*.svgsrc/components/ui/icons/chat.svgis excluded by!**/*.svgsrc/components/ui/icons/check-circle.svgis excluded by!**/*.svgsrc/components/ui/icons/check-mark.svgis excluded by!**/*.svgsrc/components/ui/icons/check.svgis excluded by!**/*.svgsrc/components/ui/icons/checkbox-fill-circle.svgis excluded by!**/*.svgsrc/components/ui/icons/checkbox-fill-square.svgis excluded by!**/*.svgsrc/components/ui/icons/chev-down.svgis excluded by!**/*.svgsrc/components/ui/icons/chev-left.svgis excluded by!**/*.svgsrc/components/ui/icons/chev-right.svgis excluded by!**/*.svgsrc/components/ui/icons/chev-up.svgis excluded by!**/*.svgsrc/components/ui/icons/circle-close.svgis excluded by!**/*.svgsrc/components/ui/icons/circle-filled.svgis excluded by!**/*.svgsrc/components/ui/icons/circle-quetion-mark.svgis excluded by!**/*.svgsrc/components/ui/icons/circle.svgis excluded by!**/*.svgsrc/components/ui/icons/clock.svgis excluded by!**/*.svgsrc/components/ui/icons/close-small.svgis excluded by!**/*.svgsrc/components/ui/icons/close.svgis excluded by!**/*.svgsrc/components/ui/icons/cloud-border.svgis excluded by!**/*.svgsrc/components/ui/icons/cloud-orange.svgis excluded by!**/*.svgsrc/components/ui/icons/cloud.svgis excluded by!**/*.svgsrc/components/ui/icons/code-snippet.svgis excluded by!**/*.svgsrc/components/ui/icons/coin.svgis excluded by!**/*.svgsrc/components/ui/icons/coins.svgis excluded by!**/*.svgsrc/components/ui/icons/collaborate-cursor.svgis excluded by!**/*.svgsrc/components/ui/icons/collaborate-editing.svgis excluded by!**/*.svgsrc/components/ui/icons/collaborate-profile.svgis excluded by!**/*.svgsrc/components/ui/icons/collaborate-selection.svgis excluded by!**/*.svgsrc/components/ui/icons/color-picked.svgis excluded by!**/*.svgsrc/components/ui/icons/color-picker.svgis excluded by!**/*.svgsrc/components/ui/icons/comment.svgis excluded by!**/*.svgsrc/components/ui/icons/community-help.svgis excluded by!**/*.svgsrc/components/ui/icons/community_help.svgis excluded by!**/*.svgsrc/components/ui/icons/confirm.svgis excluded by!**/*.svgsrc/components/ui/icons/container.svgis excluded by!**/*.svgsrc/components/ui/icons/cookie.svgis excluded by!**/*.svgsrc/components/ui/icons/copy.svgis excluded by!**/*.svgsrc/components/ui/icons/credit-card-2.svgis excluded by!**/*.svgsrc/components/ui/icons/credit-card.svgis excluded by!**/*.svgsrc/components/ui/icons/cursor.svgis excluded by!**/*.svgsrc/components/ui/icons/dark-mode.svgis excluded by!**/*.svgsrc/components/ui/icons/dashboard-user-green.svgis excluded by!**/*.svgsrc/components/ui/icons/dashboard-user-purple.svgis excluded by!**/*.svgsrc/components/ui/icons/dashboard-user-red.svgis excluded by!**/*.svgsrc/components/ui/icons/dashboard-user-yellow.svgis excluded by!**/*.svgsrc/components/ui/icons/date.svgis excluded by!**/*.svgsrc/components/ui/icons/delete.svgis excluded by!**/*.svgsrc/components/ui/icons/delivery.svgis excluded by!**/*.svgsrc/components/ui/icons/diamond.svgis excluded by!**/*.svgsrc/components/ui/icons/discord.svgis excluded by!**/*.svgsrc/components/ui/icons/document.svgis excluded by!**/*.svgsrc/components/ui/icons/dot.svgis excluded by!**/*.svgsrc/components/ui/icons/download.svgis excluded by!**/*.svgsrc/components/ui/icons/drag.svgis excluded by!**/*.svgsrc/components/ui/icons/dribbble.svgis excluded by!**/*.svgsrc/components/ui/icons/edit.svgis excluded by!**/*.svgsrc/components/ui/icons/error.svgis excluded by!**/*.svgsrc/components/ui/icons/error404.svgis excluded by!**/*.svgsrc/components/ui/icons/error500.svgis excluded by!**/*.svgsrc/components/ui/icons/expand.svgis excluded by!**/*.svgsrc/components/ui/icons/eye-off.svgis excluded by!**/*.svgsrc/components/ui/icons/eye.svgis excluded by!**/*.svgsrc/components/ui/icons/facebook-color.svgis excluded by!**/*.svgsrc/components/ui/icons/facebook.svgis excluded by!**/*.svgsrc/components/ui/icons/file.svgis excluded by!**/*.svgsrc/components/ui/icons/filter.svgis excluded by!**/*.svgsrc/components/ui/icons/folder-closed.svgis excluded by!**/*.svgsrc/components/ui/icons/folder-open.svgis excluded by!**/*.svgsrc/components/ui/icons/folder-shared.svgis excluded by!**/*.svgsrc/components/ui/icons/folder.svgis excluded by!**/*.svgsrc/components/ui/icons/fork.svgis excluded by!**/*.svgsrc/components/ui/icons/forward.svgis excluded by!**/*.svgsrc/components/ui/icons/github.svgis excluded by!**/*.svgsrc/components/ui/icons/gnb-menu.svgis excluded by!**/*.svgsrc/components/ui/icons/google.svgis excluded by!**/*.svgsrc/components/ui/icons/hammer-law.svgis excluded by!**/*.svgsrc/components/ui/icons/hammer.svgis excluded by!**/*.svgsrc/components/ui/icons/hand-medical.svgis excluded by!**/*.svgsrc/components/ui/icons/hand-open.svgis excluded by!**/*.svgsrc/components/ui/icons/hand.svgis excluded by!**/*.svgsrc/components/ui/icons/heart-rate.svgis excluded by!**/*.svgsrc/components/ui/icons/heart.svgis excluded by!**/*.svgsrc/components/ui/icons/help.svgis excluded by!**/*.svgsrc/components/ui/icons/home.svgis excluded by!**/*.svgsrc/components/ui/icons/hourglass.svgis excluded by!**/*.svgsrc/components/ui/icons/icon_checkbox_fill_circle.svgis excluded by!**/*.svgsrc/components/ui/icons/iconnect.svgis excluded by!**/*.svgsrc/components/ui/icons/image.svgis excluded by!**/*.svgsrc/components/ui/icons/info.svgis excluded by!**/*.svgsrc/components/ui/icons/input.svgis excluded by!**/*.svgsrc/components/ui/icons/instagram.svgis excluded by!**/*.svgsrc/components/ui/icons/invest.svgis excluded by!**/*.svgsrc/components/ui/icons/invisible.svgis excluded by!**/*.svgsrc/components/ui/icons/job.svgis excluded by!**/*.svgsrc/components/ui/icons/key.svgis excluded by!**/*.svgsrc/components/ui/icons/keynote.svgis excluded by!**/*.svgsrc/components/ui/icons/label.svgis excluded by!**/*.svgsrc/components/ui/icons/language.svgis excluded by!**/*.svgsrc/components/ui/icons/law.svgis excluded by!**/*.svgsrc/components/ui/icons/light-dark.svgis excluded by!**/*.svgsrc/components/ui/icons/light-mode.svgis excluded by!**/*.svgsrc/components/ui/icons/lightbulb.svgis excluded by!**/*.svgsrc/components/ui/icons/lightning.svgis excluded by!**/*.svgsrc/components/ui/icons/line.svgis excluded by!**/*.svgsrc/components/ui/icons/link.svgis excluded by!**/*.svgsrc/components/ui/icons/linkedIn-color.svgis excluded by!**/*.svgsrc/components/ui/icons/linkedIn.svgis excluded by!**/*.svgsrc/components/ui/icons/list.svgis excluded by!**/*.svgsrc/components/ui/icons/loading.svgis excluded by!**/*.svgsrc/components/ui/icons/location.svgis excluded by!**/*.svgsrc/components/ui/icons/lock-small.svgis excluded by!**/*.svgsrc/components/ui/icons/lock.svgis excluded by!**/*.svgsrc/components/ui/icons/logo-3d-2.svgis excluded by!**/*.svgsrc/components/ui/icons/logo-3d-side.svgis excluded by!**/*.svgsrc/components/ui/icons/logo-3d.svgis excluded by!**/*.svgsrc/components/ui/icons/logo-footer.svgis excluded by!**/*.svgsrc/components/ui/icons/logo-gnb.svgis excluded by!**/*.svgsrc/components/ui/icons/logo-horizontal-l.svgis excluded by!**/*.svgsrc/components/ui/icons/logo-horizontal-s-gray.svgis excluded by!**/*.svgsrc/components/ui/icons/logo-horizontal-s.svgis excluded by!**/*.svgsrc/components/ui/icons/logo-horizontal-xs.svgis excluded by!**/*.svgsrc/components/ui/icons/logo-no-text.svgis excluded by!**/*.svgsrc/components/ui/icons/logo-text.svgis excluded by!**/*.svgsrc/components/ui/icons/logo.svgis excluded by!**/*.svgsrc/components/ui/icons/logout.svgis excluded by!**/*.svgsrc/components/ui/icons/mail.svgis excluded by!**/*.svgsrc/components/ui/icons/material.svgis excluded by!**/*.svgsrc/components/ui/icons/medal.svgis excluded by!**/*.svgsrc/components/ui/icons/medical.svgis excluded by!**/*.svgsrc/components/ui/icons/member-email.svgis excluded by!**/*.svgsrc/components/ui/icons/menu.svgis excluded by!**/*.svgsrc/components/ui/icons/message-smile.svgis excluded by!**/*.svgsrc/components/ui/icons/message-square.svgis excluded by!**/*.svgsrc/components/ui/icons/message.svgis excluded by!**/*.svgsrc/components/ui/icons/microphone.svgis excluded by!**/*.svgsrc/components/ui/icons/minimize.svgis excluded by!**/*.svgsrc/components/ui/icons/minus-circle.svgis excluded by!**/*.svgsrc/components/ui/icons/minus.svgis excluded by!**/*.svgsrc/components/ui/icons/mircrophone-mute.svgis excluded by!**/*.svgsrc/components/ui/icons/more-large.svgis excluded by!**/*.svgsrc/components/ui/icons/more.svgis excluded by!**/*.svgsrc/components/ui/icons/mute.svgis excluded by!**/*.svgsrc/components/ui/icons/naver.svgis excluded by!**/*.svgsrc/components/ui/icons/neutral.svgis excluded by!**/*.svgsrc/components/ui/icons/next.svgis excluded by!**/*.svgsrc/components/ui/icons/notification.svgis excluded by!**/*.svgsrc/components/ui/icons/open-selector.svgis excluded by!**/*.svgsrc/components/ui/icons/package.svgis excluded by!**/*.svgsrc/components/ui/icons/packaging.svgis excluded by!**/*.svgsrc/components/ui/icons/paperplane.svgis excluded by!**/*.svgsrc/components/ui/icons/pause-circle.svgis excluded by!**/*.svgsrc/components/ui/icons/pause.svgis excluded by!**/*.svgsrc/components/ui/icons/pen.svgis excluded by!**/*.svgsrc/components/ui/icons/pie-chart.svgis excluded by!**/*.svgsrc/components/ui/icons/piggy-bank-coin.svgis excluded by!**/*.svgsrc/components/ui/icons/piggy-bank.svgis excluded by!**/*.svgsrc/components/ui/icons/pin.svgis excluded by!**/*.svgsrc/components/ui/icons/placeholder.svgis excluded by!**/*.svgsrc/components/ui/icons/play-circle.svgis excluded by!**/*.svgsrc/components/ui/icons/play.svgis excluded by!**/*.svgsrc/components/ui/icons/playlist.svgis excluded by!**/*.svgsrc/components/ui/icons/plus-circle.svgis excluded by!**/*.svgsrc/components/ui/icons/plus.svgis excluded by!**/*.svgsrc/components/ui/icons/pop-remove.svgis excluded by!**/*.svg
Files selected for processing (24)
- .storybook/main.ts (1 hunks)
- generateIcons.js (1 hunks)
- next.config.mjs (2 hunks)
- package.json (3 hunks)
- panda.config.ts (3 hunks)
- src/app/layout.tsx (1 hunks)
- src/app/page.tsx (5 hunks)
- src/components/ui/accordion/Accordion.mdx (2 hunks)
- src/components/ui/accordion/Accordion.stories.tsx (3 hunks)
- src/components/ui/avatar/Avatar.tsx (2 hunks)
- src/components/ui/box/Box.tsx (1 hunks)
- src/components/ui/button/Button.stories.tsx (3 hunks)
- src/components/ui/button/Button.tsx (2 hunks)
- src/components/ui/colors/Colors.mdx (2 hunks)
- src/components/ui/colors/Colors.stories.tsx (2 hunks)
- src/components/ui/colors/constant.tsx (15 hunks)
- src/components/ui/datepicker/Datepicker.mdx (7 hunks)
- src/components/ui/datepicker/Datepicker.stories.tsx (8 hunks)
- src/components/ui/dialog/Dialog.mdx (4 hunks)
- src/components/ui/dialog/Dialog.stories.tsx (6 hunks)
- src/components/ui/heading/Heading.mdx (2 hunks)
- src/components/ui/icon/Icon.mdx (2 hunks)
- src/components/ui/icon/Icon.stories.tsx (2 hunks)
- src/components/ui/icons/index.ts (1 hunks)
Files skipped from review due to trivial changes (3)
- src/app/layout.tsx
- src/components/ui/accordion/Accordion.mdx
- src/components/ui/datepicker/Datepicker.mdx
Additional context used
LanguageTool
src/components/ui/icon/Icon.mdx
[uncategorized] ~32-~32: Loose punctuation mark.
Context: ...n={<Icons.IconDate />} /> ); `, }} /> ## Props ## Exa...(UNLIKELY_OPENING_PUNCTUATION)
[uncategorized] ~62-~62: Loose punctuation mark.
Context: ...ate />} /> ) `, }} /> ### Gallery ...(UNLIKELY_OPENING_PUNCTUATION)
src/components/ui/heading/Heading.mdx
[uncategorized] ~61-~61: Loose punctuation mark.
Context: ...ze="7xl">Ag `, }} /> ### [Font Weight](#heading-fon...(UNLIKELY_OPENING_PUNCTUATION)
[uncategorized] ~98-~98: Loose punctuation mark.
Context: ...e a Heading `, }} />(UNLIKELY_OPENING_PUNCTUATION)
GitHub Check: build (18.x)
src/components/ui/icons/index.ts
[failure] 1-1:
Cannot find module './Vector.svg' or its corresponding type declarations.
[failure] 2-2:
Cannot find module './account.svg' or its corresponding type declarations.
[failure] 3-3:
Cannot find module './add-member.svg' or its corresponding type declarations.
[failure] 4-4:
Cannot find module './albums.svg' or its corresponding type declarations.
[failure] 5-5:
Cannot find module './albums2.svg' or its corresponding type declarations.
[failure] 6-6:
Cannot find module './alert-danger.svg' or its corresponding type declarations.
[failure] 7-7:
Cannot find module './alert-info.svg' or its corresponding type declarations.
[failure] 8-8:
Cannot find module './alert-success.svg' or its corresponding type declarations.
[failure] 9-9:
Cannot find module './alert-warning.svg' or its corresponding type declarations.
[failure] 10-10:
Cannot find module './alert.svg' or its corresponding type declarations.
Additional comments not posted (76)
src/components/ui/box/Box.tsx (1)
2-2: LGTM! But verify the usage ofBoxcomponent.The code changes are approved.
However, ensure that all usages of
Boxcomponent are consistent with the new implementation.next.config.mjs (1)
19-37: LGTM! But verify the usage ofwebpackfunction.The code changes are approved.
However, ensure that all usages of
webpackfunction are consistent with the new implementation.Verification successful
The usage of the
webpackfunction is verified.The
webpackfunction innext.config.mjsis correctly configured and there are no direct usages elsewhere in the codebase.
next.config.mjs: Thewebpackfunction is defined and used as part of the Next.js configuration.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all usages of `webpack` function. # Test: Search for the function usage. Expect: Consistent usage. rg --type js --type tsx $'webpack'Length of output: 61
Script:
#!/bin/bash # Description: Verify all usages of `webpack` function. # Test: Search for the function usage. Expect: Consistent usage. rg --type js --type ts 'webpack'Length of output: 32
Script:
#!/bin/bash # Description: Verify all usages of `webpack` function. # Test: Search for the function usage in all file types. Expect: Consistent usage. rg 'webpack'Length of output: 11075
src/components/ui/avatar/Avatar.tsx (1)
5-5: LGTM! But verify the usage ofAvatarcomponent.The code changes are approved.
However, ensure that all usages of
Avatarcomponent are consistent with the new implementation.Verification successful
LGTM!
The usage of the
Avatarcomponent has been verified and is consistent across the codebase.
- Examples of usage:
<Avatar src="https://i.pravatar.cc/300" name="John Doe" {...args} /><Avatar size="xs" src="https://i.pravatar.cc/300" name="John Doe" {...args} /><Avatar {...args} />Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all usages of `Avatar` component. # Test: Search for the component usage. Expect: Consistent usage. rg --type js --type tsx $'<Avatar'Length of output: 63
Script:
#!/bin/bash # Description: Verify all usages of `Avatar` component. # Test: Search for the component usage. Expect: Consistent usage. rg --type js --type ts --type tsx '<Avatar'Length of output: 73
Script:
#!/bin/bash # Description: Verify all usages of `Avatar` component. # Find all .tsx files and search for <Avatar> usage within them fd -e tsx -e ts -e js -x rg '<Avatar' {}Length of output: 835
src/components/ui/colors/Colors.mdx (2)
10-10: LGTM! But verify the usage of dark mode theme.The code changes are approved.
However, ensure that all usages of dark mode theme are consistent with the new implementation.
Verification successful
Dark mode theme usage verified
The usage of
data-theme="dark"is found insrc/components/ui/colors/Colors.mdx. The implementation appears to be consistent and limited to this file.
src/components/ui/colors/Colors.mdxScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all usages of dark mode theme. # Test: Search for the dark mode theme usage. Expect: Consistent usage. rg --type js --type tsx $'data-theme="dark"'Length of output: 73
Script:
#!/bin/bash # Description: Verify all usages of dark mode theme. # Test: Search for the dark mode theme usage. Expect: Consistent usage. rg --type js --type ts $'data-theme="dark"'Length of output: 44
Script:
#!/bin/bash # Description: Verify all usages of dark mode theme in the entire codebase. # Test: Search for the dark mode theme usage across all file types. Expect: Consistent usage. rg $'data-theme="dark"'Length of output: 92
31-31: LGTM! But verify the usage ofBoxcomponent.The code changes are approved.
However, ensure that all usages of
Boxcomponent are consistent with the new implementation..storybook/main.ts (1)
1-1: LGTM! But verify the usage ofwebpackFinalfunction.The code changes are approved.
However, ensure that all usages of
webpackFinalfunction are consistent with the new implementation.src/components/ui/button/Button.tsx (8)
4-4: Verify the usage ofLinkPropsin theButtonPropstype.Ensure that
LinkPropsis correctly integrated and used in theButtonPropstype definition.
23-23: Verify the usage ofButtonLinkPropsin theButtonPropstype.Ensure that
ButtonLinkPropsis correctly integrated and used in theButtonPropstype definition.
28-28: Verify the usage ofButtonNormalPropsin theButtonPropstype.Ensure that
ButtonNormalPropsis correctly integrated and used in theButtonPropstype definition.
29-29: Verify the usage ofLinkPropsin theButtonPropstype.Ensure that
LinkPropsis correctly integrated and used in theButtonPropstype definition.
31-31: Verify the styling ofStyledButton.Ensure that the styling of
StyledButtonis consistent with the rest of the codebase.
36-36: Verify the usage ofIconButton.Ensure that the
IconButtonis used correctly within theButtoncomponent.
39-42: Verify the conditional rendering logic for the link button.Ensure that the conditional rendering logic for the link button is correct and handles all edge cases.
49-51: Verify the conditional rendering logic for the normal button.Ensure that the conditional rendering logic for the normal button is correct and handles all edge cases.
src/components/ui/icon/Icon.mdx (3)
28-31: Verify the import statements and example code for theIconcomponent.Ensure that the import statements and example code for the
Iconcomponent are correct and handle all edge cases.
51-61: Verify the import statements and example code for theIconcomponent.Ensure that the import statements and example code for the
Iconcomponent are correct and handle all edge cases.
65-73: Verify the example code for theIconcomponent.Ensure that the example code for the
Iconcomponent is correct and handles all edge cases.src/components/ui/heading/Heading.mdx (2)
61-61: Verify the example code for theHeadingcomponent.Ensure that the example code for the
Headingcomponent is correct and handles all edge cases.Tools
LanguageTool
[uncategorized] ~61-~61: Loose punctuation mark.
Context: ...ze="7xl">Ag `, }} /> ### [Font Weight](#heading-fon...(UNLIKELY_OPENING_PUNCTUATION)
98-98: Verify the example code for theHeadingcomponent.Ensure that the example code for the
Headingcomponent is correct and handles all edge cases.Tools
LanguageTool
[uncategorized] ~98-~98: Loose punctuation mark.
Context: ...e a Heading `, }} />(UNLIKELY_OPENING_PUNCTUATION)
src/components/ui/colors/Colors.stories.tsx (2)
21-22: Verify the usage of new color constantsstatusColorandgradientColor.Ensure that the new color constants
statusColorandgradientColorare used correctly within the file.
108-117: Verify the usage of new color itemsStatus ColorandGradient Color.Ensure that the new color items
Status ColorandGradient Colorare used correctly within thecolorsarray.src/components/ui/icon/Icon.stories.tsx (7)
1-1: Verify the usage ofuseStatein theGallerystory.Ensure that
useStateis used correctly within theGallerystory.
3-3: Verify the usage of new componentsIcons,Grid,Text, andToastin theGallerystory.Ensure that the new components
Icons,Grid,Text, andToastare used correctly within theGallerystory.
4-4: Verify the usage oflistIconsin theGallerystory.Ensure that
listIconsis used correctly within theGallerystory.
5-5: Verify the usage ofcopy-to-clipboardin theGallerystory.Ensure that
copy-to-clipboardis used correctly within theGallerystory.
6-6: Verify the usage ofcreateToasterin theGallerystory.Ensure that
createToasteris used correctly within theGallerystory.
32-32: Verify the example code for theOverviewstory.Ensure that the example code for the
Overviewstory is correct and handles all edge cases.
40-45: Verify the example code for theSizesstory.Ensure that the example code for the
Sizesstory is correct and handles all edge cases.src/components/ui/button/Button.stories.tsx (2)
2-2: Update imports to useIconsThe import statement has been updated to include
Icons. This change is consistent with the new icon management approach.
139-139: Update icon usage inIconstoryThe
Iconstory now usesIcons.IconCheck, which is consistent with the new icon management approach.generateIcons.js (6)
5-9: Define paths for icons directory and index fileThe paths for the icons directory and the output file are correctly defined.
50-76: Rename SVG files to replace spaces with hyphensThe script renames SVG files to replace spaces with hyphens, ensuring consistency in file naming.
78-81: Convert file names to camelCaseThe
toCamelCasefunction correctly converts file names to camelCase.
1-2: Ensure required dependencies are availableThe script requires
fs,path, andsvgo. Ensure these dependencies are present in your environment.
11-45: Optimize SVG files usingsvgoThe script reads SVG files from the icons directory, optimizes them using
svgo, and updates the files. Ensure thesvgoplugins are correctly configured.Verification successful
Optimize SVG files using
svgoThe script reads SVG files from the icons directory, optimizes them using
svgo, and updates the files. Thesvgoplugins are correctly configured as intended.
generateIcons.js, lines 21-39: Theoptimizefunction is configured with thepreset-defaultplugin (withremoveDimensionsset to false) and theremoveDimensionsplugin added again.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the `svgo` plugin configuration. # Test: Check the `svgo` optimization process. Expect: SVG files optimized with the specified plugins. node -e " const { optimize } = require('svgo'); const fs = require('fs'); const path = require('path'); const iconsDir = path.join(__dirname, 'src/components/ui/icons'); fs.readdir(iconsDir, (err, files) => { if (err) throw err; files.forEach((file) => { if (path.extname(file) === '.svg') { const filePath = path.join(iconsDir, file); fs.readFile(filePath, 'utf8', (err, data) => { if (err) throw err; const result = optimize(data, { plugins: [ { name: 'preset-default', params: { overrides: { removeDimensions: false } } }, 'removeDimensions', ], }); console.log(`${file} optimized`); }); } }); }); "Length of output: 903
Script:
#!/bin/bash # Description: Search for the `svgo` configuration in the codebase. # Search for the `optimize` function call from `svgo` to verify the plugin configuration. ast-grep --lang javascript --pattern $'optimize($_, { plugins: [ $$$ ] })'Length of output: 1122
83-118: Generateindex.tsxwith SVG icon imports and exportsThe script reads SVG files, creates import statements, and writes them to the
index.tsxfile. Ensure the generation process is correct.package.json (10)
3-3: Increment version numberThe version number has been incremented from "0.5.16" to "0.5.17" to reflect new changes.
61-61: Add new script for generating iconsA new script
iconhas been added to rungenerateIcons.js.
66-66: Addcopy-to-clipboarddependencyThe
copy-to-clipboarddependency has been added to the project.
71-71: Add@mdx-js/loaderdependencyThe
@mdx-js/loaderdependency has been added to the project.
72-72: Add@mdx-js/reactdependencyThe
@mdx-js/reactdependency has been added to the project.
73-73: Add@next/mdxdependencyThe
@next/mdxdependency has been added to the project.
89-89: Add@svgr/webpackdependencyThe
@svgr/webpackdependency has been added to the project.
94-94: Add@typescript-eslint/parserdependencyThe
@typescript-eslint/parserdependency has been added to the project.
102-102: AddnextdependencyThe
nextdependency has been added to the project.
123-123: Addwebpack-mergedependencyThe
webpack-mergedependency has been added to the project.src/components/ui/accordion/Accordion.stories.tsx (2)
3-3: Update imports to useIconsThe import statement has been updated to include
Icons. This change is consistent with the new icon management approach.
63-63: Update icon usage inAccordionstoryThe
Accordionstory now usesIcons.IconArrow, which is consistent with the new icon management approach.src/app/page.tsx (3)
7-7: Update imports to useIconChevDownThe import statement includes
IconChevDown, which is consistent with the new icon management approach.
34-36: Add link toButtoncomponentThe
Buttoncomponent now links to "https://yorkie.dev" and uses theghostvariant.
37-37: Add yellow gradient background toBoxcomponentThe
Boxcomponent now has a yellow gradient background.src/components/ui/dialog/Dialog.mdx (5)
40-47: Replace<Stack>with<Flex>for layout consistency.The change from
<Stack>to<Flex>ensures a more flexible layout system. Verify if this change is consistent with the overall design system.
51-51: Update icon usage for consistency.The replacement of
<IconClose>with<Icons.IconClose>ensures consistency in icon usage. Verify if this change is applied throughout the codebase.
100-100: Update icon usage for consistency.The replacement of
<IconClose>with<Icons.IconClose>ensures consistency in icon usage. Verify if this change is applied throughout the codebase.
142-142: Update icon usage for consistency.The replacement of
<IconClose>with<Icons.IconClose>ensures consistency in icon usage. Verify if this change is applied throughout the codebase.
182-182: Update icon usage for consistency.The replacement of
<IconClose>with<Icons.IconClose>ensures consistency in icon usage. Verify if this change is applied throughout the codebase.src/components/ui/dialog/Dialog.stories.tsx (6)
2-2: Update import statements for consistency.The updated import statement includes
Icons, which ensures consistency in icon usage.
Line range hint
116-127: Replace<Stack>with<Flex>for layout consistency.The change from
<Stack>to<Flex>ensures a more flexible layout system. Verify if this change is consistent with the overall design system.
127-127: Update icon usage for consistency.The replacement of
<IconClose>with<Icons.IconClose>ensures consistency in icon usage. Verify if this change is applied throughout the codebase.
164-164: Update icon usage for consistency.The replacement of
<IconClose>with<Icons.IconClose>ensures consistency in icon usage. Verify if this change is applied throughout the codebase.
199-199: Update icon usage for consistency.The replacement of
<IconClose>with<Icons.IconClose>ensures consistency in icon usage. Verify if this change is applied throughout the codebase.
233-233: Update icon usage for consistency.The replacement of
<IconClose>with<Icons.IconClose>ensures consistency in icon usage. Verify if this change is applied throughout the codebase.src/components/ui/colors/constant.tsx (3)
334-341: Add new status color tokens.The addition of new status color tokens enhances the color palette. Verify if these tokens are used consistently throughout the codebase.
343-349: Add new border color tokens.The addition of new border color tokens enhances the color palette. Verify if these tokens are used consistently throughout the codebase.
351-358: Add new gradient color tokens.The addition of new gradient color tokens enhances the color palette. Verify if these tokens are used consistently throughout the codebase.
src/components/ui/datepicker/Datepicker.stories.tsx (7)
81-81: Update icon usage for consistency.The replacement of
<Icon>with<Icons.IconDate>ensures consistency in icon usage. Verify if this change is applied throughout the codebase.
93-93: Update icon usage for consistency.The replacement of
<Icon>with<Icons.IconChevLeft>ensures consistency in icon usage. Verify if this change is applied throughout the codebase.
103-103: Update icon usage for consistency.The replacement of
<Icon>with<Icons.IconChevRight>ensures consistency in icon usage. Verify if this change is applied throughout the codebase.
138-138: Update icon usage for consistency.The replacement of
<Icon>with<Icons.IconChevLeft>ensures consistency in icon usage. Verify if this change is applied throughout the codebase.
148-148: Update icon usage for consistency.The replacement of
<Icon>with<Icons.IconChevRight>ensures consistency in icon usage. Verify if this change is applied throughout the codebase.
176-176: Update icon usage for consistency.The replacement of
<Icon>with<Icons.IconChevLeft>ensures consistency in icon usage. Verify if this change is applied throughout the codebase.
186-186: Update icon usage for consistency.The replacement of
<Icon>with<Icons.IconChevRight>ensures consistency in icon usage. Verify if this change is applied throughout the codebase.panda.config.ts (2)
54-84: Add new color tokens for success, error, alert, and gradients.The addition of new color tokens enhances the color palette. Verify if these tokens are used consistently throughout the codebase.
122-165: Add new semantic color tokens for success, error, and alert.The addition of new semantic color tokens enhances the color palette. Verify if these tokens are used consistently throughout the codebase.
src/components/ui/icons/index.ts (2)
317-947: Ensure consistent export format.The export statements are consistent and correctly export all imported SVG icons.
633-948: EnsurelistIconsexport is comprehensive.The
listIconsobject comprehensively exports all the icons as properties.
src/components/ui/icons/index.ts
Outdated
| import { ReactComponent as IconVector } from './Vector.svg'; | ||
| import { ReactComponent as IconAccount } from './account.svg'; | ||
| import { ReactComponent as IconAddMember } from './add-member.svg'; | ||
| import { ReactComponent as IconAlbums } from './albums.svg'; | ||
| import { ReactComponent as IconAlbums2 } from './albums2.svg'; | ||
| import { ReactComponent as IconAlertDanger } from './alert-danger.svg'; | ||
| import { ReactComponent as IconAlertInfo } from './alert-info.svg'; | ||
| import { ReactComponent as IconAlertSuccess } from './alert-success.svg'; | ||
| import { ReactComponent as IconAlertWarning } from './alert-warning.svg'; | ||
| import { ReactComponent as IconAlert } from './alert.svg'; |
There was a problem hiding this comment.
Verify existence of SVG files.
Several SVG files are missing, as indicated by the static analysis tool. Ensure that the following files exist in the directory:
Vector.svgaccount.svgadd-member.svgalbums.svgalbums2.svgalert-danger.svgalert-info.svgalert-success.svgalert-warning.svgalert.svg
#!/bin/bash
# Description: Verify existence of SVG files.
# Test: Check for the existence of SVG files. Expect: All files exist.
for file in Vector.svg account.svg add-member.svg albums.svg albums2.svg alert-danger.svg alert-info.svg alert-success.svg alert-warning.svg alert.svg; do
if [ ! -f "src/components/ui/icons/$file" ]; then
echo "File missing: $file"
fi
doneTools
GitHub Check: build (18.x)
[failure] 1-1:
Cannot find module './Vector.svg' or its corresponding type declarations.
[failure] 2-2:
Cannot find module './account.svg' or its corresponding type declarations.
[failure] 3-3:
Cannot find module './add-member.svg' or its corresponding type declarations.
[failure] 4-4:
Cannot find module './albums.svg' or its corresponding type declarations.
[failure] 5-5:
Cannot find module './albums2.svg' or its corresponding type declarations.
[failure] 6-6:
Cannot find module './alert-danger.svg' or its corresponding type declarations.
[failure] 7-7:
Cannot find module './alert-info.svg' or its corresponding type declarations.
[failure] 8-8:
Cannot find module './alert-success.svg' or its corresponding type declarations.
[failure] 9-9:
Cannot find module './alert-warning.svg' or its corresponding type declarations.
[failure] 10-10:
Cannot find module './alert.svg' or its corresponding type declarations.
There was a problem hiding this comment.
Actionable comments posted: 2
Outside diff range and nitpick comments (1)
generateIcons.js (1)
11-48: Consider removing commented-out code.The commented-out code for
addAttributesToSVGElementcan be removed to keep the script clean.- // { - // name: 'addAttributesToSVGElement', - // params: { - // attributes: [{ width: 'currentWidth', height: 'currentHeight' }], - // }, - // },
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
src/components/ui/icons/community_help.svgis excluded by!**/*.svg
Files selected for processing (4)
- generateIcons.js (1 hunks)
- package.json (3 hunks)
- src/app/page.tsx (7 hunks)
- src/components/ui/icons/index.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (2)
- package.json
- src/app/page.tsx
Additional comments not posted (5)
generateIcons.js (3)
1-10: LGTM!The initial setup and directory paths are correctly defined.
78-81: LGTM!The camelCase conversion function is correctly implemented.
50-76: Improve error handling.Consider using
console.errorfor logging errors instead ofconsole.log.- console.log(`Renamed: ${file} -> ${newFileName}`); + console.error(`Renamed: ${file} -> ${newFileName}`);Likely invalid or redundant comment.
src/components/ui/icons/index.tsx (2)
1-315: LGTM!The import statements for SVG icons are correctly defined.
316-631: LGTM!The export statements for SVG icons are correctly defined.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- package.json (3 hunks)
- src/components/ui/button/Button.tsx (2 hunks)
- src/components/ui/icon/Icon.stories.tsx (2 hunks)
Files skipped from review as they are similar to previous changes (2)
- package.json
- src/components/ui/button/Button.tsx
Additional comments not posted (4)
src/components/ui/icon/Icon.stories.tsx (4)
2-6: LGTM!The
metaobject is correctly defined and satisfies theMetatype.
31-32: LGTM!The
Overviewstory is correctly defined and renders theIconcomponent.
39-44: LGTM!The
Sizesstory is correctly defined and renders multipleIconcomponents with different sizes.
50-101: LGTM! But verify the usage ofcopy-to-clipboardandcreateToaster.The
Gallerystory is well-defined and renders a grid of icons with interactive functionalities.However, ensure that the
copy-to-clipboardandcreateToasterfunctionalities work correctly.Verification successful
LGTM! But verify the usage of
copy-to-clipboardandcreateToaster.The
Gallerystory is well-defined and renders a grid of icons with interactive functionalities. The imports and usage ofcopy-to-clipboardandcreateToasterare correctly implemented.
copy-to-clipboardis imported and used correctly.createToasteris imported from@ark-ui/reactand used correctly.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `copy-to-clipboard` and `createToaster`. # Test: Ensure `copy-to-clipboard` is used correctly. Expect: Proper usage. rg --type js 'copy-to-clipboard' # Test: Ensure `createToaster` is used correctly. Expect: Proper usage. rg --type js 'createToaster'Length of output: 61
Script:
#!/bin/bash # Description: Verify the actual usage of `copy-to-clipboard` and `createToaster`. # Test: Search for `copy-to-clipboard` usage in the codebase. rg 'copy\(' # Test: Search for `createToaster` usage in the codebase. rg 'createToaster\('Length of output: 711
Script:
#!/bin/bash # Description: Verify the import and usage of `copy` and `createToaster` in `src/components/ui/icon/Icon.stories.tsx`. # Test: Check for import statements of `copy` in `src/components/ui/icon/Icon.stories.tsx`. rg 'import .*copy' src/components/ui/icon/Icon.stories.tsx # Test: Check for import statements of `createToaster` in `src/components/ui/icon/Icon.stories.tsx`. rg 'import .*createToaster' src/components/ui/icon/Icon.stories.tsxLength of output: 215
What this PR does / why we need it:
Special notes for your reviewer:
Which issue(s) this PR fixes:
Fixes #
Checklist:
Summary by CodeRabbit
New Features
Updates
Improvements
Bug Fixes