Feat/#151 button #185
Feat/#151 button #185
Conversation
…nto feat/#151-button
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Caution Review failedThe pull request is closed. WalkthroughThis pull request introduces a comprehensive set of changes across multiple packages, focusing on enhancing the design system, UI components, and application functionality. The modifications span design tokens, styling configurations, new icons, UI components, and state management. Key areas of improvement include the creation of a robust design system with color palettes, typography tokens, and styling scripts, addition of new icons and components, and implementation of a cart store using Zustand. Changes
Sequence DiagramsequenceDiagram
participant User
participant Navbar
participant BrowseMegaMenu
participant CartStore
participant AddToCart
User->>Navbar: Interact with navigation
Navbar->>BrowseMegaMenu: Open browse menu
User->>Navbar: Click shopping bag
Navbar->>CartStore: Toggle cart open
CartStore->>AddToCart: Render cart modal
User->>AddToCart: Add/Remove items
CartStore->>AddToCart: Update cart state
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (10)
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 9
🔭 Outside diff range comments (2)
apps/core/app/auth/login/page.tsx (1)
Line range hint
21-44: Remove commented-out code if social login is deprecated.Keeping commented-out code in production is generally not recommended as it:
- Creates confusion about feature status
- Makes the code harder to maintain
- May become outdated and irrelevant
If social login is permanently removed:
- Delete this code
- Document the change in your commit message
- Keep the implementation history in version control
If this is temporary:
- Create a tracking issue for the social login feature
- Remove the commented code
- Reference the issue in your commit message
apps/core/app/dashboard/page.tsx (1)
Line range hint
266-266: Remove placeholder text.The text "gwojgpow" appears to be a placeholder and should be replaced with actual content.
🧹 Nitpick comments (11)
apps/core/app/auth/signup/page.tsx (2)
56-61: Consider adding proper heading tags for better accessibility.The title section looks good and provides clear context to users. However, consider using semantic heading tags (
<h1>,<h2>) instead of<p>tags for better accessibility.- <p className="text-2xl font-bold">Sign Up and Get Started</p> - <p className="text-sm font-normal"> + <h1 className="text-2xl font-bold">Sign Up and Get Started</h1> + <p className="text-sm font-normal">
101-103: Remove redundant color classes that might override variant styles.The button styling looks good, but
bg-primary text-foregroundclasses might be redundant since thevariant="primary"should already handle these styles. Consider removing these classes to maintain consistency with the design system.- className="w-full text-base font-normal bg-primary text-foreground mt-2" + className="w-full text-base font-normal mt-2"packages/ui/src/components/ui/attachment/attachmentAdmin/attachmentItem/attachmentItem.tsx (1)
4-5: Consider using path aliases to simplify importsThe current import paths with multiple "../" segments could be simplified using path aliases, making the code more maintainable and less prone to errors during refactoring.
Example with path aliases:
-import { Button } from "../../../../atoms/button"; -import { FileState } from "../../../../molecules/attachment/useAttachment"; +import { Button } from "@ui/atoms/button"; +import { FileState } from "@ui/molecules/attachment/useAttachment";Consider adding path aliases in your TypeScript configuration:
{ "compilerOptions": { "paths": { "@ui/*": ["packages/ui/src/components/*"] } } }packages/ui/src/components/atoms/button.tsx (2)
36-61: Simplify the status color handler implementation.The current implementation has redundant cases and can be simplified for better maintainability.
const statusColorHandler = ({ statusColor, variant, disabled, }: { variant?: "primary" | "secondary" | "tertiary" | null; statusColor?: ButtonStatusColor; disabled?: boolean; }): string | undefined => { if (disabled) return ""; if (!statusColor) return undefined; - switch (variant) { - case "secondary": - case "tertiary": - if (statusColor === "success") return "text-success-500"; - if (statusColor === "warning") return "text-warning-500"; - if (statusColor === "error") return "text-error-500"; - break; - case "primary": - default: - if (statusColor === "success") return "bg-success-500"; - if (statusColor === "warning") return "bg-warning-500"; - if (statusColor === "error") return "bg-error-500"; - break; - } + const prefix = variant === "primary" || !variant ? "bg" : "text"; + return `${prefix}-${statusColor}-500`; };🧰 Tools
🪛 Biome (1.9.4)
[error] 54-54: Useless case clause.
because the default clause is present:
Unsafe fix: Remove the useless case.
(lint/complexity/noUselessSwitchCase)
90-105: Consider optimizing the memoization of statusColorHandler.The current memoization setup doesn't provide much benefit as it's memoizing the function itself rather than its result.
- const statusColorHandlerMemo = React.useMemo( - () => statusColorHandler, - [props.disabled, variant, statusColor], - ); + const statusColorClass = React.useMemo( + () => statusColorHandler({ statusColor, variant, disabled: props.disabled }), + [props.disabled, variant, statusColor] + ); return ( <Comp className={cn( buttonVariants({ variant, size, className }), - statusColorHandlerMemo({ - statusColor, - variant, - disabled: props.disabled, - }), + statusColorClass, )}apps/core/app/auth/set-password/page.tsx (1)
85-104: Enhance OTP input validation and feedback.The OTP input implementation could benefit from additional validation and user feedback:
- No maximum attempts limit
- No resend functionality
- No input validation beyond length
Consider adding these enhancements:
- Add a resend OTP button with rate limiting
- Implement maximum attempts limit
- Add real-time validation feedback
Example implementation for resend functionality:
const [canResend, setCanResend] = useState(false); const [resendTimer, setResendTimer] = useState(30); useEffect(() => { let timer: NodeJS.Timeout; if (resendTimer > 0 && !canResend) { timer = setInterval(() => setResendTimer(prev => prev - 1), 1000); } else { setCanResend(true); } return () => clearInterval(timer); }, [resendTimer, canResend]);packages/ui/src/components/atoms/orbitingDotsLoading.tsx (1)
3-10: Add TypeScript type safety to component props.The component props lack proper TypeScript interfaces and type constraints.
Add proper TypeScript interfaces:
+interface OrbitingDotsLoadingProps { + size?: string; + color?: string; + speed?: string; +} -const OrbitingDotsLoading = ({ size = '20px', color = 'black', speed = '1.5s' }) => { +const OrbitingDotsLoading: React.FC<OrbitingDotsLoadingProps> = ({ + size = '20px', + color = 'black', + speed = '1.5s' +}) => {packages/ui/tailwind.config.ts (1)
159-162: Reconsider hardcoding border radius value.Changing
lgborder radius fromvar(--radius)to a fixed"8px"value reduces design system flexibility. Consider keeping it dynamic to maintain consistency with other radius values that use CSS variables.- lg: "8px", + lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)",apps/core/app/(landing)/product/test/page.tsx (1)
56-64: Consider using design system variants instead of direct className styling.The removal of button variants in favor of direct className styling could lead to inconsistency across the application. While this works, it bypasses the design system's variant system which is typically used for maintaining consistent styling patterns.
Consider either:
- Using the existing variant system with custom variants if needed
- Creating new variants in the Button component if the current variants don't meet the requirements
- Documenting the reason for bypassing the variant system if this is intentional
apps/core/app/dashboard/page.tsx (1)
188-236: Refactor discount buttons to be data-driven.The discount buttons are currently hardcoded with static percentages. This could be improved by:
- Using a map/array of percentages
- Making the percentages configurable
+const discountPercentages = [50, 55, 60, 65, 70, 75, 80, 85, 90]; -<Button // variant="secondary" className="w-12 h-9 text-sm font-light bg-primary-500">50%</Button> -// ... repeated buttons +{discountPercentages.map((percentage) => ( + <Button + key={percentage} + className={`w-12 h-9 text-sm font-light ${percentage === 50 ? 'bg-primary-500' : ''}`} + > + {percentage}% + </Button> +))}packages/ui/src/components/molecules/attachment/attachmentAdmin/attachmentItem/attachmentItem.tsx (1)
Line range hint
35-39: Refactor button styling to use the variant system.The current implementation uses hardcoded colors and custom styles that could be better managed through the button variant system. This would improve consistency and maintainability.
- className={`p-0 flex justify-center items-center absolute top-[50%] translate-y-[-50%] bg-[#DC2626] left-[50%] translate-x-[-50%] w-[20px] h-[20px] rounded-sm hover:bg-[#DC2626]`} + variant="destructive" + size="icon" + className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-5 w-5"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (22)
apps/storybook/.cache/storybook/default/dev-server/storybook-0c9aba2732f8798ca2ae104c09855accis excluded by!**/.cache/**apps/storybook/.cache/storybook/default/dev-server/storybook-21d6f40cfb511982e4424e0e250a9557is excluded by!**/.cache/**apps/storybook/.cache/storybook/default/dev-server/storybook-e35710dcf9c6d4f837d5dae15e56122eis excluded by!**/.cache/**apps/storybook/package-lock.jsonis excluded by!**/package-lock.jsonapps/storybook/public/vite.svgis excluded by!**/*.svgapps/storybook/src/assets/react.svgis excluded by!**/*.svgapps/storybook/src/stories/assets/accessibility.pngis excluded by!**/*.pngapps/storybook/src/stories/assets/accessibility.svgis excluded by!**/*.svgapps/storybook/src/stories/assets/addon-library.pngis excluded by!**/*.pngapps/storybook/src/stories/assets/assets.pngis excluded by!**/*.pngapps/storybook/src/stories/assets/context.pngis excluded by!**/*.pngapps/storybook/src/stories/assets/discord.svgis excluded by!**/*.svgapps/storybook/src/stories/assets/docs.pngis excluded by!**/*.pngapps/storybook/src/stories/assets/figma-plugin.pngis excluded by!**/*.pngapps/storybook/src/stories/assets/github.svgis excluded by!**/*.svgapps/storybook/src/stories/assets/share.pngis excluded by!**/*.pngapps/storybook/src/stories/assets/styling.pngis excluded by!**/*.pngapps/storybook/src/stories/assets/testing.pngis excluded by!**/*.pngapps/storybook/src/stories/assets/theming.pngis excluded by!**/*.pngapps/storybook/src/stories/assets/tutorials.svgis excluded by!**/*.svgapps/storybook/src/stories/assets/youtube.svgis excluded by!**/*.svgbun.lockbis excluded by!**/bun.lockb
📒 Files selected for processing (52)
apps/core/app/(landing)/_components/desktop-navbar/search-bar.tsx(1 hunks)apps/core/app/(landing)/become-auther/_components/auther-form.tsx(1 hunks)apps/core/app/(landing)/product/[id]/_components/comment-section.tsx(1 hunks)apps/core/app/(landing)/product/[id]/_components/product-footer.tsx(1 hunks)apps/core/app/(landing)/product/[id]/page.tsx(1 hunks)apps/core/app/(landing)/product/test/page.tsx(1 hunks)apps/core/app/auth/forget-password/_components/form/forgetPasswordForm.tsx(1 hunks)apps/core/app/auth/login/_components/form/loginForm.tsx(1 hunks)apps/core/app/auth/login/page.tsx(2 hunks)apps/core/app/auth/otp/page.tsx(2 hunks)apps/core/app/auth/set-password/page.tsx(1 hunks)apps/core/app/auth/signup/otp/_components/signup-otp-form.tsx(2 hunks)apps/core/app/auth/signup/page.tsx(5 hunks)apps/core/app/dashboard/page.tsx(2 hunks)apps/storybook/.gitignore(0 hunks)apps/storybook/.storybook/main.ts(0 hunks)apps/storybook/.storybook/preview.ts(0 hunks)apps/storybook/README.md(0 hunks)apps/storybook/eslint.config.js(0 hunks)apps/storybook/index.html(0 hunks)apps/storybook/package.json(0 hunks)apps/storybook/src/App.css(0 hunks)apps/storybook/src/App.tsx(0 hunks)apps/storybook/src/index.css(0 hunks)apps/storybook/src/main.tsx(0 hunks)apps/storybook/src/stories/Button.stories.ts(0 hunks)apps/storybook/src/stories/Button.tsx(0 hunks)apps/storybook/src/stories/Configure.mdx(0 hunks)apps/storybook/src/stories/Header.stories.ts(0 hunks)apps/storybook/src/stories/Header.tsx(0 hunks)apps/storybook/src/stories/Page.stories.ts(0 hunks)apps/storybook/src/stories/Page.tsx(0 hunks)apps/storybook/src/stories/button.css(0 hunks)apps/storybook/src/stories/header.css(0 hunks)apps/storybook/src/stories/page.css(0 hunks)apps/storybook/src/vite-env.d.ts(0 hunks)apps/storybook/tsconfig.app.json(0 hunks)apps/storybook/tsconfig.json(0 hunks)apps/storybook/tsconfig.node.json(0 hunks)apps/storybook/vite.config.ts(0 hunks)package.json(1 hunks)packages/apis/package.json(1 hunks)packages/ui/src/components/atoms/button.tsx(2 hunks)packages/ui/src/components/atoms/carousel.tsx(1 hunks)packages/ui/src/components/atoms/orbitingDotsLoading.tsx(1 hunks)packages/ui/src/components/molecules/attachment/attachmentAdmin/attachmentItem/attachmentItem.tsx(1 hunks)packages/ui/src/components/molecules/attachment/attachmentLanding/attachmentItem/attachmentItem.tsx(1 hunks)packages/ui/src/components/molecules/attachment/attachmentLanding/attachmentLanding.tsx(2 hunks)packages/ui/src/components/ui/attachment/attachmentAdmin/attachmentItem/attachmentItem.tsx(1 hunks)packages/ui/src/template/ui-component.tsx(0 hunks)packages/ui/tailwind.config.ts(1 hunks)packages/ui/tsconfig.json(1 hunks)
💤 Files with no reviewable changes (27)
- apps/storybook/.storybook/preview.ts
- apps/storybook/src/stories/Header.stories.ts
- apps/storybook/vite.config.ts
- apps/storybook/.storybook/main.ts
- apps/storybook/package.json
- apps/storybook/src/vite-env.d.ts
- apps/storybook/src/App.css
- apps/storybook/src/App.tsx
- apps/storybook/src/stories/Button.tsx
- apps/storybook/tsconfig.node.json
- apps/storybook/.gitignore
- apps/storybook/src/stories/page.css
- apps/storybook/src/stories/header.css
- apps/storybook/src/stories/Configure.mdx
- apps/storybook/src/stories/Button.stories.ts
- apps/storybook/tsconfig.app.json
- apps/storybook/index.html
- packages/ui/src/template/ui-component.tsx
- apps/storybook/src/stories/Header.tsx
- apps/storybook/src/stories/Page.stories.ts
- apps/storybook/src/stories/Page.tsx
- apps/storybook/src/main.tsx
- apps/storybook/eslint.config.js
- apps/storybook/tsconfig.json
- apps/storybook/src/index.css
- apps/storybook/README.md
- apps/storybook/src/stories/button.css
✅ Files skipped from review due to trivial changes (4)
- apps/core/app/(landing)/_components/desktop-navbar/search-bar.tsx
- apps/core/app/(landing)/become-auther/_components/auther-form.tsx
- apps/core/app/(landing)/product/[id]/_components/product-footer.tsx
- apps/core/app/auth/forget-password/_components/form/forgetPasswordForm.tsx
🧰 Additional context used
🪛 Biome (1.9.4)
packages/ui/src/components/atoms/button.tsx
[error] 54-54: Useless case clause.
because the default clause is present:
Unsafe fix: Remove the useless case.
(lint/complexity/noUselessSwitchCase)
🔇 Additional comments (14)
apps/core/app/auth/login/page.tsx (1)
12-17: LGTM! Well-structured message layout.The new wrapper improves visual hierarchy with clear heading and description text, using appropriate spacing and typography.
apps/core/app/auth/signup/page.tsx (1)
11-14: LGTM! Import changes are well-structured.The new imports are necessary and properly utilized within the component.
apps/core/app/(landing)/product/[id]/_components/comment-section.tsx (1)
38-41: Consider using variant prop instead of custom className for consistent stylingThe commented-out variant prop and use of custom className could lead to inconsistent button styling across the application. If this is part of a design system update, consider:
- Using the appropriate variant instead of custom styles
- If custom styling is required, document why the default variants don't meet the requirements
Let's check if this is a pattern across other button components:
packages/ui/src/components/molecules/attachment/attachmentLanding/attachmentItem/attachmentItem.tsx (1)
4-4: LGTM! Import path update aligns with atomic design patternThe Button import path has been correctly updated to follow the atomic design pattern.
apps/core/app/auth/otp/page.tsx (1)
49-54: LGTM! Consistent button stylingThe button styling with explicit variant="primary" and consistent className is well-structured.
packages/ui/src/components/atoms/button.tsx (1)
10-30: LGTM! Well-structured button variants.The button variants are well-defined with consistent styling patterns and proper accessibility support through focus states.
apps/core/app/auth/login/_components/form/loginForm.tsx (1)
81-85: LGTM! Consistent button styling.The button styling changes align well with the new Button component implementation.
packages/ui/src/components/molecules/attachment/attachmentLanding/attachmentLanding.tsx (1)
3-6: LGTM! Proper import paths and button styling.The changes correctly update the import paths and align the button styling with the new implementation.
Also applies to: 71-73
apps/core/app/auth/signup/otp/_components/signup-otp-form.tsx (1)
99-103: LGTM! Proper button variant.The button styling changes align well with the new Button component implementation.
apps/core/app/(landing)/product/[id]/page.tsx (1)
56-64: LGTM - Consistent with button styling changes.The changes align with the systematic removal of button variants seen across other files.
Let's verify the extent of this change across the codebase:
✅ Verification successful
Verified: Button variant changes are part of a systematic update
The commented-out variants in your file align with a broader pattern across the codebase where "default", "outline", and "secondary" button variants are being systematically removed. Active variants remain only in specific components like authentication forms and landing page elements where they serve particular purposes.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check for remaining button variants to ensure consistency rg -l 'variant=["'\'']' --type tsxLength of output: 64
Script:
#!/bin/bash # Search for button variants without file type restriction rg 'variant=["'\'']' # Also search for Button components to understand the context rg '<Button.*variant='Length of output: 3314
apps/core/app/dashboard/page.tsx (1)
407-418: Consistent with button styling changes.The removal of button variants for the action buttons follows the same pattern seen across other files.
package.json (2)
10-10: LGTM! Good addition of the core-specific dev script.The new script helps isolate core module development, which is beneficial for UI component work.
15-15: LGTM! Minor formatting improvement.Removed unnecessary space before the comma.
packages/ui/src/components/molecules/attachment/attachmentAdmin/attachmentItem/attachmentItem.tsx (1)
4-5: LGTM! Improved import organization.The updated import paths better reflect the atomic design structure of the components.
| {/* <div className="flex items-center w-full gap-3 my-4"> | ||
| <div className="w-full h-[1px] bg-gray-700 rounded-full"></div> | ||
| <p className="text-base font-medium">OR</p> | ||
| <div className="w-full h-[1px] bg-gray-700 rounded-full"></div> | ||
| </div> | ||
| </div> */} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Remove commented-out code.
Instead of keeping commented-out code in the file, consider removing it entirely. The code can be retrieved from Git history if needed in the future. This will improve code maintainability and reduce confusion.
Also applies to: 119-136
| import AuthCard from "../_components/auth-card"; | ||
| import { Countdown } from "@repo/ui/components/countdown"; | ||
| import Link from "next/link"; | ||
| import { AttachmentLanding } from "@repo/ui/components/attachment/attachmentLanding/attachmentLanding"; |
There was a problem hiding this comment.
Remove unused import
The AttachmentLanding component is imported but not used in this file.
-import { AttachmentLanding } from "@repo/ui/components/attachment/attachmentLanding/attachmentLanding";| <div className="pb-7"> | ||
| <p> | ||
| didnt recieved code yet? <Countdown date={Date.now() + 120000} /> | ||
| didnt recieveddqqdqdqdqdqdqdqdqdq code yet? <Countdown date={Date.now() + 120000} /> |
There was a problem hiding this comment.
Fix the typo in the text.
There's a typo in the text that needs to be corrected.
- didnt recieveddqqdqdqdqdqdqdqdqdq code yet?
+ didn't receive code yet?📝 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.
| didnt recieveddqqdqdqdqdqdqdqdqdq code yet? <Countdown date={Date.now() + 120000} /> | |
| didn't receive code yet? <Countdown date={Date.now() + 120000} /> |
| <div className="flex flex-col items-center gap-4"> | ||
| <div className="flex flex-col items-center gap-2"> | ||
| <p className="text-center text-2xl font-bold">Set your Password</p> | ||
| <p className="text-center"> | ||
| <p className="text-2xl font-bold">Set your Password</p> | ||
| <p className="text-center text-sm font-normal"> | ||
| We've sent the code to{" "} | ||
| <span className="underline mr-1">{username}</span> | ||
| check your email | ||
| <span className="underline text-sm font-normal"> | ||
| [email protected] | ||
| </span> | ||
| </p> | ||
| <p className="text-sm font-normal">check your email</p> |
There was a problem hiding this comment.
Remove hardcoded email and implement proper email masking.
The email address is currently hardcoded and displayed in plain text, which has two issues:
- The TODO comment indicates that username should be retrieved from search parameters
- Displaying full email addresses poses a privacy risk
Apply this diff to implement proper email masking:
- <p className="text-center text-sm font-normal">
- We've sent the code to{" "}
- <span className="underline text-sm font-normal">
- [email protected]
- </span>
- </p>
+ <p className="text-center text-sm font-normal">
+ We've sent the code to{" "}
+ <span className="underline text-sm font-normal">
+ {username ? maskEmail(username) : ''}
+ </span>
+ </p>Add this utility function at the top of the file:
const maskEmail = (email: string) => {
const [name, domain] = email.split('@');
return `${name[0]}${'*'.repeat(name.length - 2)}${name.slice(-1)}@${domain}`;
};| <div className="w-full flex flex-col gap-5"> | ||
| <Input | ||
| label="Password" | ||
| type="password" | ||
| className="font-normal text-xs text-gray-500" | ||
| placeholder="********" | ||
| {...register("newPassword")} | ||
| error={errors.newPassword?.message} | ||
| /> | ||
| <Input | ||
| label="Confirm Password" | ||
| type="password" | ||
| className="font-normal text-xs text-gray-500" | ||
| placeholder="********" | ||
| {...register("confirmPassword")} | ||
| error={errors.confirmPassword?.message} | ||
| /> | ||
| {/* button reset */} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Implement password strength validation.
The password fields lack visual feedback for password strength requirements.
Add password strength indicators and requirements:
- Minimum length
- Special characters
- Numbers
- Upper/lowercase letters
Example implementation:
const validatePassword = (password: string) => {
const requirements = [
{ regex: /.{8,}/, message: "At least 8 characters" },
{ regex: /[0-9]/, message: "At least 1 number" },
{ regex: /[a-z]/, message: "At least 1 lowercase letter" },
{ regex: /[A-Z]/, message: "At least 1 uppercase letter" },
{ regex: /[^A-Za-z0-9]/, message: "At least 1 special character" }
];
return requirements.map(req => ({
met: req.regex.test(password),
message: req.message
}));
};| <style>{` | ||
| .orbit-container { | ||
| position: relative; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| height: var(--uib-dot-size); | ||
| width: var(--uib-size); | ||
| } | ||
| .orbit-dot { | ||
| position: absolute; | ||
| height: var(--uib-dot-size); | ||
| width: var(--uib-dot-size); | ||
| border-radius: 50%; | ||
| background-color: var(--uib-color); | ||
| flex-shrink: 0; | ||
| transition: background-color 0.3s ease; | ||
| } | ||
| .orbit-dot-1 { | ||
| animation: orbit var(--uib-speed) linear infinite; | ||
| } | ||
| .orbit-dot-2 { | ||
| animation: orbit var(--uib-speed) linear calc(var(--uib-speed) / -2) infinite; | ||
| } | ||
| @keyframes orbit { | ||
| 0% { | ||
| transform: translateX(calc(var(--uib-size) * 0.25)) scale(0.73684); | ||
| opacity: 0.65; | ||
| } | ||
| 5% { | ||
| transform: translateX(calc(var(--uib-size) * 0.235)) scale(0.684208); | ||
| opacity: 0.58; | ||
| } | ||
| 10% { | ||
| transform: translateX(calc(var(--uib-size) * 0.182)) scale(0.631576); | ||
| opacity: 0.51; | ||
| } | ||
| 15% { | ||
| transform: translateX(calc(var(--uib-size) * 0.129)) scale(0.578944); | ||
| opacity: 0.44; | ||
| } | ||
| 20% { | ||
| transform: translateX(calc(var(--uib-size) * 0.076)) scale(0.526312); | ||
| opacity: 0.37; | ||
| } | ||
| 25% { | ||
| transform: translateX(0%) scale(0.47368); | ||
| opacity: 0.3; | ||
| } | ||
| 30% { | ||
| transform: translateX(calc(var(--uib-size) * -0.076)) scale(0.526312); | ||
| opacity: 0.37; | ||
| } | ||
| 35% { | ||
| transform: translateX(calc(var(--uib-size) * -0.129)) scale(0.578944); | ||
| opacity: 0.44; | ||
| } | ||
| 40% { | ||
| transform: translateX(calc(var(--uib-size) * -0.182)) scale(0.631576); | ||
| opacity: 0.51; | ||
| } | ||
| 45% { | ||
| transform: translateX(calc(var(--uib-size) * -0.235)) scale(0.684208); | ||
| opacity: 0.58; | ||
| } | ||
| 50% { | ||
| transform: translateX(calc(var(--uib-size) * -0.25)) scale(0.73684); | ||
| opacity: 0.65; | ||
| } | ||
| 55% { | ||
| transform: translateX(calc(var(--uib-size) * -0.235)) scale(0.789472); | ||
| opacity: 0.72; | ||
| } | ||
| 60% { | ||
| transform: translateX(calc(var(--uib-size) * -0.182)) scale(0.842104); | ||
| opacity: 0.79; | ||
| } | ||
| 65% { | ||
| transform: translateX(calc(var(--uib-size) * -0.129)) scale(0.894736); | ||
| opacity: 0.86; | ||
| } | ||
| 70% { | ||
| transform: translateX(calc(var(--uib-size) * -0.076)) scale(0.947368); | ||
| opacity: 0.93; | ||
| } | ||
| 75% { | ||
| transform: translateX(0%) scale(1); | ||
| opacity: 1; | ||
| } | ||
| 80% { | ||
| transform: translateX(calc(var(--uib-size) * 0.076)) scale(0.947368); | ||
| opacity: 0.93; | ||
| } | ||
| 85% { | ||
| transform: translateX(calc(var(--uib-size) * 0.129)) scale(0.894736); | ||
| opacity: 0.86; | ||
| } | ||
| 90% { | ||
| transform: translateX(calc(var(--uib-size) * 0.182)) scale(0.842104); | ||
| opacity: 0.79; | ||
| } | ||
| 95% { | ||
| transform: translateX(calc(var(--uib-size) * 0.235)) scale(0.789472); | ||
| opacity: 0.72; | ||
| } | ||
| 100% { | ||
| transform: translateX(calc(var(--uib-size) * 0.25)) scale(0.73684); | ||
| opacity: 0.65; | ||
| } | ||
| } | ||
| `}</style> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Optimize animation performance and enhance accessibility.
The current implementation could benefit from performance optimizations and accessibility improvements.
- Use
will-changefor animation performance - Add ARIA attributes for accessibility
- Consider reducing animation when
prefers-reduced-motionis enabled
Apply this diff:
.orbit-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: var(--uib-dot-size);
width: var(--uib-size);
+ will-change: transform;
+ aria-label="Loading";
+ role="status";
}
+ @media (prefers-reduced-motion: reduce) {
+ .orbit-dot-1,
+ .orbit-dot-2 {
+ animation-duration: calc(var(--uib-speed) * 2);
+ }
+ }Committable suggestion skipped: line range outside the PR's diff.
|
|
||
| import { cn } from "@repo/ui/lib/utils" | ||
| import { Button } from "@repo/ui/components/ui/button" | ||
| import { Button } from "@repo/ui/template/ui-component" |
There was a problem hiding this comment.
💡 Codebase verification
Incorrect Button import path in carousel.tsx
The Button component should be imported from "@repo/ui/components/ui/button" as it is in other files. The implementation shows that Button, buttonVariants, and ButtonProps are all exported from the same file, so they should share the same import path.
🔗 Analysis chain
Verify Button import path consistency across the codebase.
The Button import path has been changed to @repo/ui/template/ui-component. Let's ensure this change is consistent across all files.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for any remaining old Button import paths
rg "from ['\"]@repo/ui/components/ui/button['\"]"
# Search for new Button import paths to verify consistency
rg "from ['\"]@repo/ui/template/ui-component['\"]"
Length of output: 560
Script:
#!/bin/bash
# Check exports and imports more thoroughly
echo "=== Checking all Button-related imports ==="
rg "from ['\"]@repo/ui/(components|template).*['\"] *$" -A 1
echo -e "\n=== Checking files content ==="
# Try to find the button component definitions
fd -e ts -e tsx button -I --exec cat {}
Length of output: 4740
| "baseUrl": ".", | ||
| "paths": { | ||
| "@repo/ui/*": ["./src/*"] | ||
| "~/*": ["src/*"] |
There was a problem hiding this comment.
💡 Codebase verification
Path alias change will break existing imports
The codebase contains 61 files still using @repo/ui/ imports, while no files are using the new ~/* path alias. This change will break the application unless all imports are updated.
- Found
@repo/ui/imports in 4 TypeScript files:apps/core/tailwind.config.tsapps/core/middleware.tspackages/apis/src/utils/cookies.tspackages/apis/src/instance/core-api.ts
- Found
@repo/ui/imports in 57 TSX files acrossapps/coreandpackages/ui - Package.json files also contain
@repo/uireferences that may need updating
🔗 Analysis chain
Verify all import paths are updated for the new alias.
The path alias change from @repo/ui/* to ~/* requires verification of all import statements across the codebase.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for any remaining @repo/ui imports that need updating
rg -l '@repo/ui/' --type tsx --type ts
# Check for new path usage
rg -l '~/' --type tsx --type ts
Length of output: 128
Script:
#!/bin/bash
# Search for old imports in .ts files
echo "Checking .ts files for @repo/ui imports:"
rg -l '@repo/ui/' -g '*.ts'
# Search for old imports in .tsx files
echo "Checking .tsx files for @repo/ui imports:"
rg -l '@repo/ui/' -g '*.tsx'
# Search for new path usage in .ts files
echo "Checking .ts files for new path alias usage:"
rg -l '~/' -g '*.ts'
# Search for new path alias in .tsx files
echo "Checking .tsx files for new path alias usage:"
rg -l '~/' -g '*.tsx'
# Check package.json files for any references
echo "Checking package.json files:"
rg -l '@repo/ui' -g 'package.json'
Length of output: 3687
| "@repo/ui": "*", | ||
| "@tanstack/react-query": "^5.62.2", | ||
| "@tanstack/react-query-devtools": "^5.62.2", | ||
| "@types/js-cookie": "^3.0.6", |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Keep type definitions in devDependencies.
@types/* packages are type definitions that are only needed during development and should remain in devDependencies. The runtime package js-cookie is already correctly placed in dependencies.
- "@types/js-cookie": "^3.0.6",
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
apps/core/app/(t)/test/page.tsx (1)
4-10: Consider adding proper component documentation and error handling.The test page lacks:
- Component documentation explaining its purpose
- Error handling for potential failures
- Loading state management logic
packages/ui/src/components/atoms/button.tsx (3)
14-19: Consider improving variant styles accessibility.The button variants could benefit from:
- ARIA attributes for better screen reader support
- Color contrast ratios verification for accessibility
- Focus state visibility improvements
36-61: Optimize status color handler implementation.The current implementation has several issues:
- The switch case for "primary" is redundant due to default case (flagged by static analysis)
- Repeated string literals could be constants
- No type safety for variant parameter
Consider this refactoring:
+ const STATUS_COLORS = { + success: { + primary: "bg-success-500", + secondary: "text-success-500", + tertiary: "text-success-500" + }, + warning: { + primary: "bg-warning-500", + secondary: "text-warning-500", + tertiary: "text-warning-500" + }, + error: { + primary: "bg-error-500", + secondary: "text-error-500", + tertiary: "text-error-500" + } + } as const; const statusColorHandler = ({ statusColor, variant = "primary", disabled, }: { variant?: "primary" | "secondary" | "tertiary" | null; statusColor?: ButtonStatusColor; disabled?: boolean; }): string | undefined => { if (disabled || !statusColor) return ""; - switch (variant) { - case "secondary": - case "tertiary": - if (statusColor === "success") return "text-success-500"; - if (statusColor === "warning") return "text-warning-500"; - if (statusColor === "error") return "text-error-500"; - break; - case "primary": - default: - if (statusColor === "success") return "bg-success-500"; - if (statusColor === "warning") return "bg-warning-500"; - if (statusColor === "error") return "bg-error-500"; - break; - } + return STATUS_COLORS[statusColor][variant === null ? "primary" : variant]; };🧰 Tools
🪛 Biome (1.9.4)
[error] 54-54: Useless case clause.
because the default clause is present:
Unsafe fix: Remove the useless case.
(lint/complexity/noUselessSwitchCase)
110-117: Improve loading state accessibility.The current loading state implementation:
- Uses
invisibleclass which might still be read by screen readers- Lacks proper ARIA attributes for loading state
- Could benefit from a more semantic loading indicator structure
- {IconLeft && <IconLeft className={cn(isLoading && "invisible")} />} - <span className={cn(isLoading && "invisible")}>{children}</span> + {IconLeft && <IconLeft className={cn(isLoading && "hidden")} />} + <span className={cn(isLoading && "hidden")} aria-hidden={isLoading}>{children}</span> {isLoading && ( - <span className="absolute"> + <span className="absolute" role="status" aria-label="Loading"> <OrbitingDotsLoading /> </span> )} - {IconRight && <IconRight className={cn(isLoading && "invisible")} />} + {IconRight && <IconRight className={cn(isLoading && "hidden")} />}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/core/app/(t)/test/page.tsx(1 hunks)packages/ui/src/components/atoms/button.tsx(2 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
packages/ui/src/components/atoms/button.tsx
[error] 54-54: Useless case clause.
because the default clause is present:
Unsafe fix: Remove the useless case.
(lint/complexity/noUselessSwitchCase)
apps/core/app/(t)/test/page.tsx
Outdated
| export default function Page() { | ||
| return ( | ||
| <div> | ||
| <Button isLoading size={'sm'}>Hello mmmmmm</Button> |
There was a problem hiding this comment.
💡 Codebase verification
Remove or properly implement this test page
This appears to be a temporary test component that was accidentally committed. The minimal implementation with hardcoded loading state and placeholder text suggests it's not meant for production use.
- Consider removing
apps/core/app/(t)/test/page.tsxif it's no longer needed - If the page serves a purpose, implement proper loading state management and meaningful content
🔗 Analysis chain
Remove placeholder text and implement proper loading state management.
The button appears to be in a permanent loading state with placeholder text. Consider:
- Replacing "Hello mmmmmm" with meaningful text
- Managing loading state through user interaction
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if this is truly a test page or used in production
rg -l "test/page" --type ts --type tsx
Length of output: 66
Script:
#!/bin/bash
# Search for test page references without type filtering
rg -l "test/page"
# Look for any test-related files in the apps directory
fd "test" apps/
# Check if there's any documentation about test pages
fd "README|CONTRIBUTING" apps/core/
Length of output: 330
Script:
#!/bin/bash
# Check README content for test page documentation
cat apps/core/README.md
# Check contents of both test directories
ls -la apps/core/app/\(landing\)/product/test/
ls -la apps/core/app/\(t\)/test/
# Look for any configuration or route definitions
rg -A 5 "test" apps/core/app/layout.tsx apps/core/app/page.tsx
Length of output: 1936
Script:
#!/bin/bash
# Check the content of the test page we're reviewing
cat "apps/core/app/(t)/test/page.tsx"
# Also check the product test page for comparison
head -n 20 "apps/core/app/(landing)/product/test/page.tsx"
Length of output: 1280
| const statusColorHandlerMemo = React.useMemo( | ||
| () => statusColorHandler, | ||
| [props.disabled, variant, statusColor], | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Optimize useMemo dependencies.
The useMemo dependencies array doesn't match the function dependencies:
statusColorHandleris a constant function, not dependent on any props- The dependencies array includes props that aren't used in the memoized value
- const statusColorHandlerMemo = React.useMemo(
- () => statusColorHandler,
- [props.disabled, variant, statusColor],
- );
+ const statusColorHandlerMemo = statusColorHandler;📝 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.
| const statusColorHandlerMemo = React.useMemo( | |
| () => statusColorHandler, | |
| [props.disabled, variant, statusColor], | |
| ); | |
| const statusColorHandlerMemo = statusColorHandler; |
* Update PixelGenius Platform from zeroheight * Update PixelGenius Platform from zeroheight * Update PixelGenius Platform from zeroheight * Update PixelGenius Platform from zeroheight * Update PixelGenius Platform from zeroheight * Update PixelGenius Platform from zeroheight * Update PixelGenius Platform from zeroheight --------- Co-authored-by: zeroheight <[email protected]>
* feat: added attachmentLanding and attachment hook (not completed) * attacment admin added (not completed) * attachments mock functionality and attachment admin completed and added some animations * attachment thumbnail added and added some icons * some fixes in attachment * attachment theme fixed --------- Co-authored-by: Pouria Kazemirad <[email protected]> Co-authored-by: ErfanKashef <[email protected]>
* mega menu content (not completed) * fix: fix some issues * Fixing icon issues and importing them correctly, adding them to package.json, and renaming some file names. --------- Co-authored-by: Pouria Kazemirad <[email protected]>
* Creating the Main Container, configuring some settings, and adding a few icons. * Adding a “remove” functionality to the card component. * more cart * change global css * Adding a skeleton loader to the card and converting it into a component. * feat: handle add to card storage * feat: add config tailwin for add to card and handle scroll * chnage ui add cart * Handling the mega menu and navbar while creating the component.
* feat: handle Automating the Design System with Zero Height * feat: improve script DS (#201) * feat: improve script DS * feat: some chage in json
There was a problem hiding this comment.
Caution
Inline review comments failed to post. This is likely due to GitHub's limits when posting large numbers of comments.
🛑 Comments failed to post (61)
packages/icons/src/components/cinema4D.tsx (1)
4-4:
⚠️ Potential issueThe
colorprop is defined but never used.The component accepts a
colorprop with a default value of "currentColor", but this prop is not utilized in the SVG implementation.Either remove the unused prop or apply this diff to utilize it:
- const { size = 16, color = "currentColor", ...resProps } = props; + const { size = 16, ...resProps } = props;📝 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.const { size = 16, ...resProps } = props;packages/icons/src/components/metamask.tsx (1)
6-13: 🛠️ Refactor suggestion
Add accessibility attributes to SVG.
The SVG should include accessibility attributes for better screen reader support.
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 36 33" fill="none" + role="img" + aria-label="Metamask logo" {...resProps} > + <title>Metamask logo</title>📝 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.<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 36 33" fill="none" role="img" aria-label="Metamask logo" {...resProps} > <title>Metamask logo</title>packages/icons/src/components/tonconnect.tsx (1)
13-32: 🛠️ Refactor suggestion
Convert kebab-case to camelCase for React attributes.
React expects DOM properties to be camelCase rather than kebab-case.
- <g clip-path="url(#clip0_3381_24285)"> + <g clipPath="url(#clip0_3381_24285)">📝 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.<g clipPath="url(#clip0_3381_24285)"> <path d="M17 33C26.1127 33 33.5 25.6127 33.5 16.5C33.5 7.38729 26.1127 0 17 0C7.88729 0 0.5 7.38729 0.5 16.5C0.5 25.6127 7.88729 33 17 33Z" fill="#0098EA" /> <path d="M22.6335 9.20923H11.3654C9.29359 9.20923 7.98043 11.4441 9.02275 13.2508L15.977 25.3045C16.4308 26.0916 17.5681 26.0916 18.0219 25.3045L24.9776 13.2508C26.0185 11.447 24.7054 9.20923 22.635 9.20923H22.6335ZM15.9714 21.6898L14.4569 18.7586L10.8025 12.2227C10.5614 11.8043 10.8591 11.2683 11.364 11.2683H15.97V21.6912L15.9714 21.6898ZM23.1937 12.2212L19.5407 18.76L18.0262 21.6898V11.2668H22.6321C23.137 11.2668 23.4347 11.8029 23.1937 12.2212Z" fill="white" /> </g> <defs> <clipPath id="clip0_3381_24285"> <rect width="34" height="33" fill="white" transform="translate(0.5)" /> </clipPath> </defs>packages/icons/src/components/refresh.tsx (1)
7-21:
⚠️ Potential issueFix SVG implementation issues.
The SVG implementation has several issues that need to be addressed:
- The
sizeprop is not being used (hardcoded dimensions)- The
colorprop is not being used (hardcoded stroke color)- Missing accessibility attributes
Apply these changes to fix the issues:
<svg - width="46" - height="46" + width={size} + height={size} viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg" + role="img" + aria-label="refresh icon" + {...restProps} > <path d="M43 20.4998C42.3886 16.1003 40.3477 12.0239 37.1916 8.89849C34.0355 5.77308 29.9394 3.77205 25.5342 3.20364C21.129 2.63522 16.6591 3.53096 12.813 5.75287C8.96695 7.97478 5.95812 11.3996 4.25 15.4998M3 5.49975V15.4998H13M3 25.4997C3.6114 29.8992 5.65233 33.9756 8.8084 37.101C11.9645 40.2264 16.0606 42.2274 20.4658 42.7958C24.871 43.3643 29.3409 42.4685 33.187 40.2466C37.033 38.0247 40.0419 34.5999 41.75 30.4997M43 40.4997V30.4997H33" - stroke="white" + stroke={color} strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" /> </svg>Committable suggestion skipped: line range outside the PR's diff.
packages/icons/src/components/remove.tsx (4)
17-19: 🛠️ Refactor suggestion
Convert SVG attributes to camelCase for React compatibility.
React expects camelCase for all attributes, including SVG attributes.
- stroke-width="2" - stroke-linecap="round" - stroke-linejoin="round" + strokeWidth="2" + strokeLinecap="round" + strokeLinejoin="round"Also applies to: 24-26
32-32: 🛠️ Refactor suggestion
Update export to use the new component name.
Update the export statement to match the PascalCase component name.
-export default Removeicon; +export default RemoveIcon;📝 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.export default RemoveIcon;
2-2: 🛠️ Refactor suggestion
Rename component to follow React naming convention.
React components should use PascalCase naming convention.
-const Removeicon = (props: IconProps) => { +const RemoveIcon = (props: IconProps) => {📝 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.const RemoveIcon = (props: IconProps) => {
14-27:
⚠️ Potential issueFix hardcoded stroke color to use the color prop.
The paths have hardcoded white stroke color which:
- Makes the icon unusable on light backgrounds
- Ignores the provided color prop
- Reduces component reusability
<path d="M10 10L14 14M14 10L10 14" - stroke="white" + stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M12 3C19.2 3 21 4.8 21 12C21 19.2 19.2 21 12 21C4.8 21 3 19.2 3 12C3 4.8 4.8 3 12 3Z" - stroke="white" + stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />📝 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.<path d="M10 10L14 14M14 10L10 14" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M12 3C19.2 3 21 4.8 21 12C21 19.2 19.2 21 12 21C4.8 21 3 19.2 3 12C3 4.8 4.8 3 12 3Z" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />.github/workflows/build-design-system.yml (2)
31-41: 🛠️ Refactor suggestion
Pin Bun version for reproducibility.
Using
latestfor Bun version could lead to inconsistent builds. Pin to a specific version to ensure reproducibility:- name: Setup Bun uses: oven-sh/setup-bun@v1 with: - bun-version: latest + bun-version: 1.0.25 # or your preferred stable version📝 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.- name: Setup Bun uses: oven-sh/setup-bun@v1 with: bun-version: 1.0.25 # or your preferred stable version # Step 4: Install dependencies only if the cache was not restored - name: Install dependencies if: steps.cache-deps.outputs.cache-hit != 'true' working-directory: ./packages/design-system run: bun install
14-19: 🛠️ Refactor suggestion
Update checkout action and review token usage.
- The checkout action version is outdated. Update to v4 for the latest features and security fixes.
- Using a PAT might not be necessary for PR operations unless you need specific permissions.
Apply this diff:
- name: Checkout repository - uses: actions/checkout@v3 + uses: actions/checkout@v4 with: ref: ${{ github.head_ref }} - token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + # Remove token unless specific permissions are needed📝 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.- name: Checkout repository uses: actions/checkout@v4 with: ref: ${{ github.head_ref }} # Remove token unless specific permissions are needed🧰 Tools
🪛 actionlint (1.7.4)
15-15: the runner of "actions/checkout@v3" action is too old to run on GitHub Actions. update the action's version to fix this issue
(action)
packages/apis/src/services/core/base/upload/post/post-uploadfile.ts (4)
13-38: 🛠️ Refactor suggestion
Add file size validation and error handling
The current implementation lacks file size validation and proper error handling for upload failures.
Consider adding:
- File size validation before upload
- Proper error handling for network failures
- Progress tracking for large uploads
Would you like me to provide a refactored implementation with these improvements?
🧰 Tools
🪛 Gitleaks (8.21.2)
26-26: Uncovered a JSON Web Token, which may lead to unauthorized access to web applications and sensitive user data.
(jwt)
11-11:
⚠️ Potential issueReplace
path.joinwith URL constructionUsing
path.joinfor URL construction is incorrect as it uses OS-specific path separators. Use URL concatenation or template literals instead.-export const postUploadfileURL = () => path.join("/base/upload/"); +export const postUploadfileURL = () => "/base/upload";📝 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.export const postUploadfileURL = () => "/base/upload";
30-32:
⚠️ Potential issueRemove mock flag from production code
The
isMock: trueflag suggests this is using mock data in what appears to be production code. This should be controlled via environment variables or removed if not needed.- { - isMock: true, - }, + process.env.NODE_ENV === 'development' ? { isMock: true } : undefined,📝 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.process.env.NODE_ENV === 'development' ? { isMock: true } : undefined,
24-27:
⚠️ Potential issueSecurity Risk: Remove hardcoded JWT token
The code contains a hardcoded JWT token which is a serious security risk. This could lead to unauthorized access if the token is compromised.
The token should be:
- Obtained dynamically from a secure token management system
- Never committed to the codebase
- Rotated regularly
headers: { "Content-Type": "multipart/form-data", - Authorization: - "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzM2NTAzMzk0LCJpYXQiOjE3MzU4OTg1OTQsImp0aSI6ImY4NmYwYzc5NjNhZTQwYTlhMGMzNzBiYzIyOTAyMmQ1IiwidXNlcl9pZCI6MX0.8c5Nn3ZtgQGHNJjEy2Ywvl9CWWf8BJLFK-4ab4wavCo", + Authorization: `Bearer ${getAuthToken()}`, // Implement getAuthToken to retrieve token securely },Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 Gitleaks (8.21.2)
26-26: Uncovered a JSON Web Token, which may lead to unauthorized access to web applications and sensitive user data.
(jwt)
packages/icons/src/components/ui-kit.tsx (2)
7-14: 🛠️ Refactor suggestion
The
colorprop is not being utilized.The component accepts a
colorprop with a default value of "currentColor", but it's not being used in the SVG. Either remove the unused prop or apply it to the SVG's fill or stroke attributes.const { size = 24, color = "currentColor", ...resProps } = props; return ( <svg width={size} height={size} viewBox="0 0 53 53" - fill="none" + fill={color} xmlns="http://www.w3.org/2000/svg" {...resProps} >📝 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.<svg width={size} height={size} viewBox="0 0 53 53" fill={color} xmlns="http://www.w3.org/2000/svg" {...resProps} >
15-20: 🛠️ Refactor suggestion
Remove hardcoded fill color from the path.
The path has a hardcoded
fill="white"which reduces the icon's reusability. The fill color should be inherited from the parent SVG to support thecolorprop.<path fillRule="evenodd" clipRule="evenodd" d="M35.5682 0.212158H16.8547L13.5494 0.283658C12.5842 0.358408 11.6287 0.527408 10.7057 0.985658C9.33093 1.66491 8.20968 2.75041 7.51093 4.08291C7.03968 4.97666 6.86743 5.90616 6.78943 6.84216C6.71143 7.72616 6.71143 8.80191 6.71143 10.0467V42.3744L6.78618 45.5822C6.86418 46.5149 7.03968 47.4444 7.50768 48.3414C8.20968 49.6772 9.32768 50.7594 10.7024 51.4419C11.6254 51.8969 12.5842 52.0659 13.5462 52.1439C14.4594 52.2154 15.5677 52.2154 16.8514 52.2154H35.5649L38.8702 52.1439C39.8354 52.0659 40.7909 51.9002 41.7139 51.4419C43.0786 50.7719 44.1967 49.6879 44.9087 48.3447C45.3799 47.4509 45.5522 46.5214 45.6302 45.5854C45.7049 44.7014 45.7049 43.6257 45.7049 42.3809V10.0499L45.6302 6.84216C45.5522 5.90616 45.3767 4.97991 44.9087 4.08291C44.1967 2.7397 43.0786 1.65571 41.7139 0.985658C40.7909 0.530658 39.8322 0.361658 38.8702 0.283658C37.9602 0.212158 36.8519 0.212158 35.5682 0.212158ZM26.2114 35.6664C24.1932 35.6664 22.5552 37.2524 22.5552 39.2122C22.5552 41.1719 24.1932 42.7579 26.2114 42.7579C28.2297 42.7579 29.8677 41.1719 29.8677 39.2122C29.8677 37.2524 28.2297 35.6664 26.2114 35.6664Z" - fill="white" + fill="currentColor" />📝 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.<path fillRule="evenodd" clipRule="evenodd" d="M35.5682 0.212158H16.8547L13.5494 0.283658C12.5842 0.358408 11.6287 0.527408 10.7057 0.985658C9.33093 1.66491 8.20968 2.75041 7.51093 4.08291C7.03968 4.97666 6.86743 5.90616 6.78943 6.84216C6.71143 7.72616 6.71143 8.80191 6.71143 10.0467V42.3744L6.78618 45.5822C6.86418 46.5149 7.03968 47.4444 7.50768 48.3414C8.20968 49.6772 9.32768 50.7594 10.7024 51.4419C11.6254 51.8969 12.5842 52.0659 13.5462 52.1439C14.4594 52.2154 15.5677 52.2154 16.8514 52.2154H35.5649L38.8702 52.1439C39.8354 52.0659 40.7909 51.9002 41.7139 51.4419C43.0786 50.7719 44.1967 49.6879 44.9087 48.3447C45.3799 47.4509 45.5522 46.5214 45.6302 45.5854C45.7049 44.7014 45.7049 43.6257 45.7049 42.3809V10.0499L45.6302 6.84216C45.5522 5.90616 45.3767 4.97991 44.9087 4.08291C44.1967 2.7397 43.0786 1.65571 41.7139 0.985658C40.7909 0.530658 39.8322 0.361658 38.8702 0.283658C37.9602 0.212158 36.8519 0.212158 35.5682 0.212158ZM26.2114 35.6664C24.1932 35.6664 22.5552 37.2524 22.5552 39.2122C22.5552 41.1719 24.1932 42.7579 26.2114 42.7579C28.2297 42.7579 29.8677 41.1719 29.8677 39.2122C29.8677 37.2524 28.2297 35.6664 26.2114 35.6664Z" fill="currentColor" />packages/icons/src/components/security.tsx (3)
25-25: 🛠️ Refactor suggestion
Update the export statement.
After renaming the component, update the export statement accordingly.
-export default Securityicon; +export default SecurityIcon;📝 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.export default SecurityIcon;
1-3: 🛠️ Refactor suggestion
Follow React naming conventions for components.
The component name should be in PascalCase format and end with "Icon" for consistency. Rename
SecurityicontoSecurityIcon.-const Securityicon = (props: IconProps) => { +const SecurityIcon = (props: IconProps) => {Don't forget to update the export statement accordingly.
📝 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.import { IconProps } from "../types/types"; const SecurityIcon = (props: IconProps) => { const { size = 24, color = "currentColor", ...resProps } = props;
14-20: 🛠️ Refactor suggestion
Use the color prop and React-compatible attribute names.
- The stroke color is hard-coded, ignoring the provided color prop.
- SVG attributes should use camelCase naming convention for React compatibility.
<path d="M8.5 11V7C8.5 5.93913 8.92143 4.92172 9.67157 4.17157C10.4217 3.42143 11.4391 3 12.5 3C13.5609 3 14.5783 3.42143 15.3284 4.17157C16.0786 4.92172 16.5 5.93913 16.5 7V11M5.5 13C5.5 12.4696 5.71071 11.9609 6.08579 11.5858C6.46086 11.2107 6.96957 11 7.5 11H17.5C18.0304 11 18.5391 11.2107 18.9142 11.5858C19.2893 11.9609 19.5 12.4696 19.5 13V19C19.5 19.5304 19.2893 20.0391 18.9142 20.4142C18.5391 20.7893 18.0304 21 17.5 21H7.5C6.96957 21 6.46086 20.7893 6.08579 20.4142C5.71071 20.0391 5.5 19.5304 5.5 19V13ZM11.5 16C11.5 16.2652 11.6054 16.5196 11.7929 16.7071C11.9804 16.8946 12.2348 17 12.5 17C12.7652 17 13.0196 16.8946 13.2071 16.7071C13.3946 16.5196 13.5 16.2652 13.5 16C13.5 15.7348 13.3946 15.4804 13.2071 15.2929C13.0196 15.1054 12.7652 15 12.5 15C12.2348 15 11.9804 15.1054 11.7929 15.2929C11.6054 15.4804 11.5 15.7348 11.5 16Z" - stroke="#374151" + stroke={color} - stroke-width="2" - stroke-linecap="round" - stroke-linejoin="round" + strokeWidth="2" + strokeLinecap="round" + strokeLinejoin="round"📝 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.<path d="M8.5 11V7C8.5 5.93913 8.92143 4.92172 9.67157 4.17157C10.4217 3.42143 11.4391 3 12.5 3C13.5609 3 14.5783 3.42143 15.3284 4.17157C16.0786 4.92172 16.5 5.93913 16.5 7V11M5.5 13C5.5 12.4696 5.71071 11.9609 6.08579 11.5858C6.46086 11.2107 6.96957 11 7.5 11H17.5C18.0304 11 18.5391 11.2107 18.9142 11.5858C19.2893 11.9609 19.5 12.4696 19.5 13V19C19.5 19.5304 19.2893 20.0391 18.9142 20.4142C18.5391 20.7893 18.0304 21 17.5 21H7.5C6.96957 21 6.46086 20.7893 6.08579 20.4142C5.71071 20.0391 5.5 19.5304 5.5 19V13ZM11.5 16C11.5 16.2652 11.6054 16.5196 11.7929 16.7071C11.9804 16.8946 12.2348 17 12.5 17C12.7652 17 13.0196 16.8946 13.2071 16.7071C13.3946 16.5196 13.5 16.2652 13.5 16C13.5 15.7348 13.3946 15.4804 13.2071 15.2929C13.0196 15.1054 12.7652 15 12.5 15C12.2348 15 11.9804 15.1054 11.7929 15.2929C11.6054 15.4804 11.5 15.7348 11.5 16Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />packages/design-system/src/scripts/build.ts (1)
1-6: 💡 Codebase verification
Remove
.jsextensions from TypeScript importsThe
.jsextensions in import statements are unnecessary as this is a CommonJS project. TypeScript can resolve these imports without extensions. For consistency and better maintainability, remove the.jsextensions from all imports.Example:
import { buildColorsTailwind } from "./build-colors-tailwind";🔗 Analysis chain
Verify TypeScript import extensions.
The imports use
.jsextensions despite being in a TypeScript file. This might cause issues with TypeScript's module resolution.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check if the imported files exist with both .ts and .js extensions # and verify the TypeScript configuration. # Check for the existence of the imported files echo "Checking for .ts files..." fd -e ts "build-(colors|palette|config|main)-(tailwind|style)" packages/design-system/src/scripts echo "Checking for .js files..." fd -e js "build-(colors|palette|config|main)-(tailwind|style)" packages/design-system/src/scripts echo "Checking TypeScript configuration..." cat packages/design-system/tsconfig.json | jq '.compilerOptions.moduleResolution'Length of output: 842
Script:
#!/bin/bash # Check if this is an ESM project echo "Checking package.json for module type..." cat packages/design-system/package.json | jq '.type' echo "Checking for any ESM-related TypeScript configuration..." cat packages/design-system/tsconfig.json | jq '.compilerOptions.module'Length of output: 348
packages/icons/src/components/wire-frame.tsx (2)
14-17:
⚠️ Potential issueReplace hardcoded fill color.
The path has a hardcoded
fill="white"which makes the icon unusable on light backgrounds. Use thecolorprop instead to make it more versatile.<path d="M12.4317 0.211915H12.7567C14.0632 0.211915 15.1194 1.27142 15.1194 2.57467C15.1194 3.87792 14.0599 4.93742 12.7567 4.93742L9.1687 5.09992C7.5372 5.53867 6.2632 6.81267 5.82445 8.44417C5.6847 8.97067 5.66195 9.68242 5.66195 12.0322C5.66195 13.3387 4.60245 14.3949 3.2992 14.3949C1.99595 14.3949 0.939699 13.3354 0.939699 12.0289V11.7039C0.939699 9.82542 0.936449 8.42792 1.26145 7.21892C1.69127 5.61602 2.5353 4.15444 3.70876 2.98098C4.88222 1.80752 6.3438 0.963488 7.9467 0.533665C9.1557 0.208665 10.5532 0.211915 12.4317 0.211915ZM44.7074 5.09992C44.1809 4.96017 43.4724 4.93742 41.1194 4.93742C39.8129 4.93742 38.7567 3.87792 38.7567 2.57467C38.7567 1.27142 39.8162 0.211915 41.1227 0.211915H41.4477C43.3262 0.211915 44.7237 0.208665 45.9327 0.533665C47.5356 0.963488 48.9972 1.80752 50.1706 2.98098C51.3441 4.15444 52.1881 5.61602 52.6179 7.21892C52.9429 8.42792 52.9397 9.82542 52.9397 11.7039V12.0289C52.9397 13.3354 51.8802 14.3917 50.5769 14.3917C49.2737 14.3917 48.2142 13.3322 48.2142 12.0289L48.0517 8.44092C47.6162 6.80942 46.3422 5.53542 44.7107 5.09667L44.7074 5.09992ZM19.8482 2.57467C19.8482 1.26817 20.9077 0.211915 22.2109 0.211915H31.6652C32.9717 0.211915 34.0279 1.27142 34.0279 2.57467C34.0279 3.87792 32.9684 4.93742 31.6652 4.93742H22.2109C20.9044 4.93742 19.8482 3.87792 19.8482 2.57467ZM3.30245 19.1204C4.60895 19.1204 5.6652 20.1799 5.6652 21.4832V25.1134L6.1007 24.8762C7.24795 24.2912 8.46995 24.0572 9.7992 23.9499C11.0797 23.8459 12.6494 23.8459 14.5507 23.8459H15.6914L20.4429 23.9499C21.7722 24.0572 22.9942 24.2912 24.1414 24.8762C25.9203 25.7835 27.3662 27.2306 28.2722 29.0102C28.8572 30.1574 29.0912 31.3794 29.1984 32.7087C29.3024 33.9892 29.3024 35.5589 29.3024 37.4602V38.6009L29.1984 43.3524C29.0912 44.6817 28.8572 45.9037 28.2722 47.0509L28.0349 47.4864H31.6652C32.9717 47.4864 34.0279 48.5459 34.0279 49.8492C34.0279 51.1524 32.9717 52.2119 31.6684 52.2119H14.5507C12.6494 52.2119 11.0764 52.2119 9.7992 52.1079C8.46995 52.0007 7.24795 51.7667 6.1007 51.1817C4.91565 50.5776 3.87133 49.7305 3.03595 48.6954C2.62645 48.1884 2.26895 47.6359 1.96995 47.0509C1.38495 45.9037 1.15095 44.6817 1.0437 43.3524C0.939699 42.0719 0.939699 40.5022 0.939699 38.6009V37.4602V36.7257V21.4864C0.942265 20.8606 1.19202 20.2611 1.63457 19.8185C2.07711 19.376 2.6766 19.123 3.30245 19.1204ZM50.5737 19.1204C51.8802 19.1204 52.9364 20.1799 52.9364 21.4832V30.9374C52.9364 32.2439 51.8769 33.3002 50.5737 33.3002C49.2704 33.3002 48.2109 32.2407 48.2109 30.9374V21.4832C48.2109 20.1767 49.2704 19.1204 50.5737 19.1204ZM50.5737 38.0289C51.8802 38.0289 52.9364 39.0884 52.9364 40.3917V40.7167C52.9364 42.5952 52.9364 43.9927 52.6147 45.2017C52.1849 46.8046 51.3408 48.2661 50.1674 49.4396C48.9939 50.6131 47.5323 51.4571 45.9294 51.8869C44.7204 52.2119 43.3229 52.2087 41.4444 52.2087H41.1194C39.8129 52.2087 38.7567 51.1492 38.7567 49.8459C38.7567 48.5427 39.8162 47.4832 41.1194 47.4832L44.7074 47.3207C46.3389 46.8852 47.6129 45.6112 48.0484 43.9797C48.1882 43.4532 48.2109 42.7447 48.2109 40.3917C48.2109 39.0852 49.2704 38.0289 50.5737 38.0289Z" - fill="white" + fill={color} />Committable suggestion skipped: line range outside the PR's diff.
2-3:
⚠️ Potential issueUnused
colorprop.The
colorprop is destructured but never utilized in the component. Either remove the unused prop or apply it to the SVG path.const WireFrameIcon = (props: IconProps) => { - const { size = 53, color = "currentColor", ...resProps } = props; + const { size = 53, ...resProps } = props;Or if you want to use the color:
const WireFrameIcon = (props: IconProps) => { const { size = 53, color = "currentColor", ...resProps } = props;And then:
<path - fill="white" + fill={color}📝 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.const WireFrameIcon = (props: IconProps) => { const { size = 53, ...resProps } = props;packages/icons/src/components/paypal.tsx (2)
6-13: 🛠️ Refactor suggestion
Add accessibility attributes and fix viewBox dimensions.
- Add ARIA attributes for better accessibility:
role="img"aria-label="PayPal"
- The viewBox width (34) doesn't match the clipPath rect width (33), which could cause slight horizontal misalignment.
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} - viewBox="0 0 34 33" + viewBox="0 0 33 33" fill="none" + role="img" + aria-label="PayPal" {...resProps} >📝 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.<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 33 33" fill="none" role="img" aria-label="PayPal" {...resProps} >
14-33: 🛠️ Refactor suggestion
Convert SVG attributes to camelCase for React.
React expects SVG attributes in camelCase format.
- <g clip-path="url(#clip0_3381_24387)"> + <g clipPath="url(#clip0_3381_24387)"> <path d="M17 33C26.1127 33 33.5 25.6127 33.5 16.5C33.5 7.3873 26.1127 0 17 0C7.8873 0 0.5 7.3873 0.5 16.5C0.5 25.6127 7.8873 33 17 33Z" fill="#0070BA" /> <path d="M23.8726 11.6306C23.8542 11.748 23.8333 11.8681 23.8097 11.9915C22.9981 16.1585 20.2213 17.5981 16.6749 17.5981H14.8692C14.4355 17.5981 14.0701 17.913 14.0025 18.3408L13.078 24.2039L12.8162 25.866C12.7723 26.1467 12.9887 26.4 13.2722 26.4H16.4748C16.854 26.4 17.1762 26.1245 17.2359 25.7505L17.2674 25.5877L17.8704 21.7612L17.909 21.5512C17.9681 21.1759 18.2909 20.9004 18.6702 20.9004H19.1492C22.252 20.9004 24.681 19.6406 25.3909 15.9951C25.6875 14.4722 25.5339 13.2007 24.7492 12.3064C24.5117 12.0368 24.2171 11.813 23.8726 11.6306Z" fill="white" - fill-opacity="0.6" + fillOpacity="0.6" /> <path d="M23.0231 11.292C22.8991 11.256 22.7711 11.2232 22.6399 11.1936C22.508 11.1647 22.3728 11.1392 22.2337 11.1169C21.7469 11.0381 21.2134 11.0007 20.642 11.0007H15.8181C15.6994 11.0007 15.5865 11.0276 15.4855 11.0761C15.263 11.1831 15.0977 11.3938 15.0577 11.6516L14.0315 18.1513L14.002 18.3408C14.0695 17.9131 14.435 17.5981 14.8687 17.5981H16.6744C20.2207 17.5981 22.9975 16.1579 23.8091 11.9915C23.8334 11.8681 23.8538 11.748 23.8721 11.6306C23.6667 11.5217 23.4443 11.4285 23.2048 11.3491C23.1458 11.3294 23.0848 11.3104 23.0231 11.292Z" fill="white" - fill-opacity="0.8" + fillOpacity="0.8" />📝 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.<g clipPath="url(#clip0_3381_24387)"> <path d="M17 33C26.1127 33 33.5 25.6127 33.5 16.5C33.5 7.3873 26.1127 0 17 0C7.8873 0 0.5 7.3873 0.5 16.5C0.5 25.6127 7.8873 33 17 33Z" fill="#0070BA" /> <path d="M23.8726 11.6306C23.8542 11.748 23.8333 11.8681 23.8097 11.9915C22.9981 16.1585 20.2213 17.5981 16.6749 17.5981H14.8692C14.4355 17.5981 14.0701 17.913 14.0025 18.3408L13.078 24.2039L12.8162 25.866C12.7723 26.1467 12.9887 26.4 13.2722 26.4H16.4748C16.854 26.4 17.1762 26.1245 17.2359 25.7505L17.2674 25.5877L17.8704 21.7612L17.909 21.5512C17.9681 21.1759 18.2909 20.9004 18.6702 20.9004H19.1492C22.252 20.9004 24.681 19.6406 25.3909 15.9951C25.6875 14.4722 25.5339 13.2007 24.7492 12.3064C24.5117 12.0368 24.2171 11.813 23.8726 11.6306Z" fill="white" fillOpacity="0.6" /> <path d="M23.0231 11.292C22.8991 11.256 22.7711 11.2232 22.6399 11.1936C22.508 11.1647 22.3728 11.1392 22.2337 11.1169C21.7469 11.0381 21.2134 11.0007 20.642 11.0007H15.8181C15.6994 11.0007 15.5865 11.0276 15.4855 11.0761C15.263 11.1831 15.0977 11.3938 15.0577 11.6516L14.0315 18.1513L14.002 18.3408C14.0695 17.9131 14.435 17.5981 14.8687 17.5981H16.6744C20.2207 17.5981 22.9975 16.1579 23.8091 11.9915C23.8334 11.8681 23.8538 11.748 23.8721 11.6306C23.6667 11.5217 23.4443 11.4285 23.2048 11.3491C23.1458 11.3294 23.0848 11.3104 23.0231 11.292Z" fill="white" fillOpacity="0.8" /> <path d="M15.0581 11.6517C15.0981 11.3938 15.2634 11.1831 15.4858 11.0769C15.5875 11.0283 15.6997 11.0014 15.8185 11.0014H20.6423C21.2139 11.0014 21.7472 11.0388 22.2342 11.1176C22.3733 11.1398 22.5084 11.1655 22.6403 11.1943C22.7715 11.2238 22.8994 11.2566 23.0234 11.2927C23.0851 11.3111 23.1461 11.3302 23.2058 11.3491C23.4453 11.4286 23.6678 11.5224 23.8731 11.6306C24.1146 10.0907 23.8712 9.04218 23.0385 8.09277C22.1206 7.04758 20.4639 6.6001 18.344 6.6001H12.1895C11.7564 6.6001 11.387 6.915 11.3201 7.34351L8.75655 23.5925C8.70606 23.914 8.95405 24.204 9.27819 24.204H13.0778L14.0318 18.1513L15.0581 11.6517Z" fill="white" /> </g>apps/core/app/(landing)/_components/browseMegaMenu/topPart/top-part-menu.tsx (1)
35-61: 🛠️ Refactor suggestion
Extract constants and implement proper navigation.
Several improvements needed in TopPartMenu:
- Extract categories to a constant
- Replace "#" with proper navigation links
- Consider implementing error boundaries
const CATEGORIES = [ { title: "3D Assets", icon: Asset3dIcon, link: "/browse/3d-assets" }, { title: "Icon Sets", icon: IconSetsIcon, link: "/browse/icon-sets" }, // ... other categories ] as const; const TopPartMenu = () => { return ( <div className="flex flex-wrap my-[25px] gap-[12px]"> {CATEGORIES.map(({ title, icon: Icon, link }) => ( <CategoryItem key={title} title={title} icon={<Icon size={48} />} link={link} /> ))} </div> ); };apps/core/app/(landing)/_components/browseMegaMenu/bottomPart/bottom-part-menu.tsx (1)
12-56: 🛠️ Refactor suggestion
Refactor repeated format items into a data-driven approach.
The current implementation has significant code duplication. Consider refactoring to use a data array and map through it.
+const formatItems = [ + { icon: AdobeXDIcon, label: "Adobe XD" }, + { icon: BlenderIcon, label: "Blender" }, + { icon: SketchIcon, label: "Sketch" }, + { icon: AfterEffectsIcon, label: "After Effects" }, + { icon: Cinema4DIcon, label: "Cinema 4D" }, + { icon: FramerIcon, label: "Framer" }, + { icon: HTMLIcon, label: "HTML" }, + { icon: IllustratorIcon, label: "Illustrator" }, + { icon: PhotoshopIcon, label: "Photoshop" }, +]; + const BottomPartMenu = () => { return ( <div className="flex flex-col gap-4"> <Typography variant="label/sm">Browse by most popular formats</Typography> <div className="flex flex-wrap gap-[6px]"> - <div className="flex items-center py-3 px-2 bg-card rounded-lg gap-[4px]"> - <Adobexdicon size={16} /> - <Typography variant="label/sm">Adobe XD</Typography> - </div> - {/* ... repeated divs ... */} + {formatItems.map(({ icon: Icon, label }) => ( + <div + key={label} + className="flex items-center py-3 px-2 bg-card rounded-lg gap-[4px]" + role="button" + tabIndex={0} + aria-label={`Filter by ${label} format`} + > + <Icon size={16} /> + <Typography variant="label/sm">{label}</Typography> + </div> + ))} </div> </div> ); };📝 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.const formatItems = [ { icon: AdobeXDIcon, label: "Adobe XD" }, { icon: BlenderIcon, label: "Blender" }, { icon: SketchIcon, label: "Sketch" }, { icon: AfterEffectsIcon, label: "After Effects" }, { icon: Cinema4DIcon, label: "Cinema 4D" }, { icon: FramerIcon, label: "Framer" }, { icon: HTMLIcon, label: "HTML" }, { icon: IllustratorIcon, label: "Illustrator" }, { icon: PhotoshopIcon, label: "Photoshop" }, ]; const BottomPartMenu = () => { return ( <div className="flex flex-col gap-4"> <Typography variant="label/sm">Browse by most popular formats</Typography> <div className="flex flex-wrap gap-[6px]"> {formatItems.map(({ icon: Icon, label }) => ( <div key={label} className="flex items-center py-3 px-2 bg-card rounded-lg gap-[4px]" role="button" tabIndex={0} aria-label={`Filter by ${label} format`} > <Icon size={16} /> <Typography variant="label/sm">{label}</Typography> </div> ))} </div> </div> ); };packages/icons/src/components/mockups.tsx (1)
14-17: 🛠️ Refactor suggestion
Use the color prop instead of hardcoding fill color.
The path's fill color is hardcoded to "white", which might not work well with different backgrounds. Use the
colorprop instead.<path d="M44.008 24.654C44.2778 24.6735 44.5118 24.8035 44.9733 25.07C47.7793 26.6731 49.977 29.1586 51.2242 32.1399C52.4715 35.1213 52.6985 38.4312 51.87 41.5549C51.0414 44.6786 49.2037 47.4409 46.6428 49.4121C44.0818 51.3833 40.9412 52.4529 37.7095 52.4545C35.61 52.4545 33.6178 52.0157 31.814 51.2195C31.2193 50.9595 30.9235 50.8295 30.7383 50.5727C30.5757 50.3487 30.4953 50.0755 30.5108 49.7992C30.5303 49.484 30.7545 49.146 31.1998 48.4732C33.1293 45.5571 34.2292 42.1711 34.3815 38.6777L34.401 37.8522V37.797C34.4022 36.3805 34.2486 34.9681 33.9428 33.585L33.8063 33.0065C37.391 31.5147 40.433 28.9765 42.5488 25.7752C42.9128 25.226 43.0948 24.9497 43.3288 24.81C43.5351 24.6892 43.7727 24.6326 44.0113 24.6475L44.008 24.654ZM8.71952 24.654C8.95812 24.6391 9.19573 24.6957 9.40202 24.8165C9.63602 24.9562 9.81802 25.2292 10.182 25.7817C13.6498 31.0305 19.6038 34.4917 26.3638 34.4917C27.3287 34.4915 28.2922 34.4198 29.2465 34.2772L29.2628 34.339C29.5293 35.4472 29.6723 36.6042 29.6723 37.8002V37.8522L29.6593 38.447C29.4644 42.2557 27.7928 45.8385 24.9992 48.4347C22.2056 51.031 18.5102 52.4362 14.6974 52.352C10.8846 52.2678 7.25478 50.7009 4.57852 47.9839C1.90226 45.2669 0.390347 41.6138 0.36377 37.8002C0.363015 35.2145 1.04629 32.6746 2.34427 30.4382C3.64224 28.2019 5.50871 26.3487 7.75427 25.0667C8.21577 24.8035 8.44652 24.6735 8.71952 24.654ZM26.3638 0.454468C30.2501 0.455329 33.9769 1.99953 36.7249 4.74755C39.473 7.49557 41.0172 11.2224 41.018 15.1087C41.0221 17.9424 40.2011 20.7159 38.6553 23.0907C36.6825 26.1197 33.6243 28.3752 30.0298 29.3015L29.7893 29.36C28.6908 29.6232 27.5468 29.763 26.3638 29.763C22.298 29.763 18.619 28.1087 15.9638 25.434C13.3345 22.7852 11.7095 19.1387 11.7095 15.112C11.7095 11.2251 13.2533 7.49742 16.0015 4.7487C18.7496 1.99998 22.4769 0.45533 26.3638 0.454468Z" - fill="white" + fill={color} />Committable suggestion skipped: line range outside the PR's diff.
packages/icons/src/components/icon-sets.tsx (1)
7-14: 🛠️ Refactor suggestion
Add accessibility attributes to SVG.
The SVG element should include accessibility attributes for better screen reader support.
<svg width={size} height={size} viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg" + role="img" + aria-label="Icon Sets" {...resProps} >📝 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.<svg width={size} height={size} viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Icon Sets" {...resProps} >packages/icons/src/components/illustration.tsx (1)
7-14: 🛠️ Refactor suggestion
Add accessibility attributes to SVG.
The SVG element should include accessibility attributes for better screen reader support.
<svg width={size} height={size} viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg" + role="img" + aria-label="Illustration" {...resProps} >📝 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.<svg width={size} height={size} viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Illustration" {...resProps} >packages/icons/src/components/after-Effect.tsx (2)
7-13: 🛠️ Refactor suggestion
Add accessibility attributes to SVG.
The SVG element should include accessibility attributes for better screen reader support.
<svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" + role="img" + aria-label="After Effects" {...resProps} >📝 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.width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="After Effects" {...resProps} >
14-14:
⚠️ Potential issueFix JSX attribute naming convention.
The
clip-pathattribute should use camelCase in JSX.- <g clip-path="url(#clip0_4283_5910)"> + <g clipPath="url(#clip0_4283_5910)">📝 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.<g clipPath="url(#clip0_4283_5910)">packages/icons/src/components/3dAsset.tsx (1)
7-14: 🛠️ Refactor suggestion
Add accessibility attributes to SVG.
The SVG element should include accessibility attributes for better screen reader support.
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 53 53" fill="none" + role="img" + aria-label="3D Asset" {...resProps} >📝 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.<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 53 53" fill="none" role="img" aria-label="3D Asset" {...resProps} >packages/ui/package.json (1)
22-22: 💡 Codebase verification
Consider using tailwind-scrollbar v3.1.0 instead of beta version
The latest stable version of tailwind-scrollbar is 3.1.0, which is recommended for production use instead of the beta version (4.0.0-beta.0) to ensure stability and reliability.
🔗 Analysis chain
Avoid using beta version in production dependencies.
The
tailwind-scrollbarpackage is using a beta version (4.0.0-beta.0). Consider using the latest stable version to avoid potential breaking changes and bugs in production.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check latest stable version of tailwind-scrollbar npm view tailwind-scrollbar versions --json | jq -r '.[]' | grep -v 'beta' | tail -n 1Length of output: 92
packages/icons/package.json (1)
62-62:
⚠️ Potential issueFix syntax error in export path.
There's an extra comma in the Asset3dIcon export path that will cause a JSON parsing error.
- "./Asset3dIcon": "./src/components/3dAsset.tsx,", + "./Asset3dIcon": "./src/components/3dAsset.tsx",📝 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."./Asset3dIcon": "./src/components/3dAsset.tsx",apps/core/app/(landing)/store/cart-store.ts (2)
25-28:
⚠️ Potential issueAdd validation and duplicate item handling in addToCart.
The current implementation appends items without checking for duplicates or validating quantities. This could lead to multiple separate entries for the same product.
addToCart: (item) => set((state) => ({ - cartItems: [...state.cartItems, item], + cartItems: state.cartItems + .map(existingItem => + existingItem.id === item.id + ? { ...existingItem, quantity: existingItem.quantity + item.quantity } + : existingItem + ) + .concat( + state.cartItems.some(existingItem => existingItem.id === item.id) + ? [] + : [item] + ) })),📝 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.addToCart: (item) => set((state) => ({ cartItems: state.cartItems .map(existingItem => existingItem.id === item.id ? { ...existingItem, quantity: existingItem.quantity + item.quantity } : existingItem ) .concat( state.cartItems.some(existingItem => existingItem.id === item.id) ? [] : [item] ) })),
10-17:
⚠️ Potential issueAdd essential cart operations to CartState.
The current implementation is missing crucial cart operations:
- Removing items
- Updating quantities
- Clearing cart
- Getting cart total
type CartState = { isAddToCartOpen: boolean; cartItems: CartItem[]; openAddToCart: () => void; closeAddToCart: () => void; addToCart: (item: CartItem) => void; toggleAddToCart: () => void; + removeFromCart: (itemId: string) => void; + updateQuantity: (itemId: string, quantity: number) => void; + clearCart: () => void; + getCartTotal: () => number; };📝 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.type CartState = { isAddToCartOpen: boolean; cartItems: CartItem[]; openAddToCart: () => void; closeAddToCart: () => void; addToCart: (item: CartItem) => void; toggleAddToCart: () => void; removeFromCart: (itemId: string) => void; updateQuantity: (itemId: string, quantity: number) => void; clearCart: () => void; getCartTotal: () => number; };packages/design-system/src/scripts/utills.ts (1)
2-26:
⚠️ Potential issueAdd input validation and handle edge cases in hexToHsl.
The current implementation lacks input validation and edge case handling:
- No validation for hex color format
- No handling of shorthand hex colors (#RGB)
- No handling of alpha channel (#RGBA, #RRGGBBAA)
export const hexToHsl = (hex: string): string => { + // Validate hex format + const hexRegex = /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/; + if (!hexRegex.test(hex)) { + throw new Error('Invalid hex color format'); + } + + // Handle shorthand hex + let fullHex = hex; + if (hex.length === 4) { + fullHex = '#' + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3]; + } + const r = parseInt(hex.slice(1, 3), 16) / 255; const g = parseInt(hex.slice(3, 5), 16) / 255; const b = parseInt(hex.slice(5, 7), 16) / 255;Additionally, consider adding precision control for the output values:
- return `${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`; + const precision = 2; + return `${h.toFixed(precision)} ${(s * 100).toFixed(precision)}% ${(l * 100).toFixed(precision)}%`;📝 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.export const hexToHsl = (hex: string): string => { // Validate hex format const hexRegex = /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/; if (!hexRegex.test(hex)) { throw new Error('Invalid hex color format'); } // Handle shorthand hex let fullHex = hex; if (hex.length === 4) { fullHex = '#' + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3]; } const r = parseInt(hex.slice(1, 3), 16) / 255; const g = parseInt(hex.slice(3, 5), 16) / 255; const b = parseInt(hex.slice(5, 7), 16) / 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); const delta = max - min; let h = 0; if (delta !== 0) { if (max === r) { h = ((g - b) / delta + (g < b ? 6 : 0)) * 60; } else if (max === g) { h = ((b - r) / delta + 2) * 60; } else { h = ((r - g) / delta + 4) * 60; } } const l = (max + min) / 2; const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); const precision = 2; return `${h.toFixed(precision)} ${(s * 100).toFixed(precision)}% ${(l * 100).toFixed(precision)}%`; };packages/design-system/src/scripts/build-main-style.ts (1)
16-29:
⚠️ Potential issueAdd error handling for file operations.
File system operations should include proper error handling.
export const buildMainScss = (): void => { - // Generate the content - const scssContent = generateMainScssContent(); + try { + // Generate the content + const scssContent = generateMainScssContent(); - // Ensure the output directory exists - if (!fs.existsSync(outputDir)) { - fs.mkdirSync(outputDir, { recursive: true }); - } + // Ensure the output directory exists + if (!fs.existsSync(outputDir)) { + fs.mkdirSync(outputDir, { recursive: true }); + } - // Write the content to the file - fs.writeFileSync(outputFilePath, scssContent, "utf-8"); - console.log(`main.scss file created at: ${outputFilePath}`); + // Write the content to the file + fs.writeFileSync(outputFilePath, scssContent, "utf-8"); + console.log(`main.scss file created at: ${outputFilePath}`); + } catch (error) { + console.error('Failed to build main.scss:', error); + throw error; + } };📝 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.// Function to create the main.scss file export const buildMainScss = (): void => { try { // Generate the content const scssContent = generateMainScssContent(); // Ensure the output directory exists if (!fs.existsSync(outputDir)) { fs.mkdirSync(outputDir, { recursive: true }); } // Write the content to the file fs.writeFileSync(outputFilePath, scssContent, "utf-8"); console.log(`main.scss file created at: ${outputFilePath}`); } catch (error) { console.error('Failed to build main.scss:', error); throw error; } };packages/design-system/src/scripts/build-config-tailwind.ts (1)
8-22: 🛠️ Refactor suggestion
Add type checking for imported modules.
The config generation should include type checking for imported color modules.
+// Add type definitions +type ColorConfig = Record<string, Record<string, string>>; + // Content for the tailwindConfig.ts file const generateTailwindConfigContent = (): string => { return ` +import type { Config } from 'tailwindcss'; import { colors } from "./colors"; import { palette } from "./palette"; -export const tailwindConfig = { +// Ensure type safety for the imported modules +const validateColors = (colors: unknown): ColorConfig => { + // Add validation logic here + return colors as ColorConfig; +}; + +export const tailwindConfig: Config = { theme: { extend: { - colors: { ...colors, ...palette }, + colors: { ...validateColors(colors), ...validateColors(palette) }, }, }, };📝 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.// Add type definitions type ColorConfig = Record<string, Record<string, string>>; // Content for the tailwindConfig.ts file const generateTailwindConfigContent = (): string => { return ` import type { Config } from 'tailwindcss'; import { colors } from "./colors"; import { palette } from "./palette"; // Ensure type safety for the imported modules const validateColors = (colors: unknown): ColorConfig => { // Add validation logic here return colors as ColorConfig; }; export const tailwindConfig: Config = { theme: { extend: { colors: { ...validateColors(colors), ...validateColors(palette) }, }, }, }; `.trim(); };apps/core/app/(landing)/_components/card.tsx (2)
19-27: 🛠️ Refactor suggestion
Replace hardcoded image URL with dynamic prop
The image URL should be passed as a prop rather than hardcoded. Also, consider adding proper error handling and loading states.
interface CardProps { id: number; onRemove: (id: number) => void; title: string; price: string; + imageUrl: string; + imageAlt?: string; } // In the component: <Image - src={"https://images.unsplash.com/photo-1730292422804-5bbb2bd2d3f0?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"} + src={props.imageUrl} - alt="card" + alt={props.imageAlt || `${title} image`} width={112} height={80} className="rounded-2xl" + loading="lazy" + onError={(e) => { + e.currentTarget.src = '/fallback-image.jpg'; + }} />Committable suggestion skipped: line range outside the PR's diff.
34-39: 🛠️ Refactor suggestion
Enhance accessibility of remove button
The remove button needs proper ARIA attributes and keyboard interaction support.
<div + role="button" + tabIndex={0} className="w-9 flex items-center justify-center bg-error cursor-pointer" onClick={() => onRemove(id)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + onRemove(id); + } + }} + aria-label={`Remove ${title} from cart`} > <Removeicon className="text-error-foreground" size={24} /> </div>📝 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.<div role="button" tabIndex={0} className="w-9 flex items-center justify-center bg-error cursor-pointer" onClick={() => onRemove(id)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { onRemove(id); } }} aria-label={`Remove ${title} from cart`} > <Removeicon className="text-error-foreground" size={24} /> </div>packages/design-system/src/scripts/build-palette-style.ts (2)
53-54: 🛠️ Refactor suggestion
Update script execution for async operation
Update the script execution to handle the async operation properly.
-buildPaletteScss(); +buildPaletteScss().catch((error) => { + console.error('Failed to build palette SCSS:', error); + process.exit(1); +});📝 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.// Run the script buildPaletteScss().catch((error) => { console.error('Failed to build palette SCSS:', error); process.exit(1); });
33-51: 🛠️ Refactor suggestion
Add error handling and use async operations
The script uses synchronous operations and lacks proper error handling. Consider using async operations and adding error handling.
-export const buildPaletteScss = (): void => { +export const buildPaletteScss = async (): Promise<void> => { try { - const rawData = fs.readFileSync(inputFilePath, 'utf-8'); - const tokens = JSON.parse(rawData); + const rawData = await fs.promises.readFile(inputFilePath, 'utf-8'); + const tokens = JSON.parse(rawData); const scssContent = generateScssContent(tokens); const outputDir = path.dirname(outputFilePath); - if (!fs.existsSync(outputDir)) { - fs.mkdirSync(outputDir, { recursive: true }); + if (!await fs.promises.access(outputDir).catch(() => false)) { + await fs.promises.mkdir(outputDir, { recursive: true }); } - fs.writeFileSync(outputFilePath, scssContent, 'utf-8'); + await fs.promises.writeFile(outputFilePath, scssContent, 'utf-8'); console.log(`SCSS file created at: ${outputFilePath}`); + } catch (error) { + console.error('Error building palette SCSS:', error); + throw error; } };📝 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.// Function to build and write SCSS content export const buildPaletteScss = async (): Promise<void> => { try { // Read and parse the JSON file const rawData = await fs.promises.readFile(inputFilePath, 'utf-8'); const tokens = JSON.parse(rawData); // Generate SCSS content const scssContent = generateScssContent(tokens); // Ensure the output directory exists const outputDir = path.dirname(outputFilePath); if (!await fs.promises.access(outputDir).catch(() => false)) { await fs.promises.mkdir(outputDir, { recursive: true }); } // Write the SCSS content to the file await fs.promises.writeFile(outputFilePath, scssContent, 'utf-8'); console.log(`SCSS file created at: ${outputFilePath}`); } catch (error) { console.error('Error building palette SCSS:', error); throw error; } };packages/design-system/src/scripts/build-palette-tailwind.ts (2)
34-51: 🛠️ Refactor suggestion
Add error handling for file operations
The script should handle JSON parsing errors and file write failures gracefully.
export const buildPaletteTailwind = (): void => { - const rawData = fs.readFileSync(inputFilePath, "utf-8"); - const tokens = JSON.parse(rawData); + try { + const rawData = fs.readFileSync(inputFilePath, "utf-8"); + const tokens = JSON.parse(rawData); - const tsContent = generatePaletteTsContent(tokens); + const tsContent = generatePaletteTsContent(tokens); - const outputDir = path.dirname(outputFilePath); - if (!fs.existsSync(outputDir)) { - fs.mkdirSync(outputDir, { recursive: true }); - } + const outputDir = path.dirname(outputFilePath); + if (!fs.existsSync(outputDir)) { + fs.mkdirSync(outputDir, { recursive: true }); + } - fs.writeFileSync(outputFilePath, tsContent, "utf-8"); - console.log(`palette.ts file created at: ${outputFilePath}`); + fs.writeFileSync(outputFilePath, tsContent, "utf-8"); + console.log(`palette.ts file created at: ${outputFilePath}`); + } catch (error) { + console.error('Failed to build palette:', error); + process.exit(1); + } };📝 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.export const buildPaletteTailwind = (): void => { try { const rawData = fs.readFileSync(inputFilePath, "utf-8"); const tokens = JSON.parse(rawData); const tsContent = generatePaletteTsContent(tokens); const outputDir = path.dirname(outputFilePath); if (!fs.existsSync(outputDir)) { fs.mkdirSync(outputDir, { recursive: true }); } fs.writeFileSync(outputFilePath, tsContent, "utf-8"); console.log(`palette.ts file created at: ${outputFilePath}`); } catch (error) { console.error('Failed to build palette:', error); process.exit(1); } };
9-31: 🛠️ Refactor suggestion
Add type safety and error handling to palette generation
The function lacks type safety for token structure and error handling for malformed tokens.
-const generatePaletteTsContent = (tokens: Record<string, any>): string => { +interface ColorToken { + $type: string; + $value: string; +} + +interface TokenGroup { + [key: string]: ColorToken; +} + +interface TokenData { + [group: string]: TokenGroup; +} + +const generatePaletteTsContent = (tokens: TokenData): string => { const lines: string[] = []; lines.push(`export const palette = {`); for (const group in tokens) { const groupTokens = tokens[group]; lines.push(` "${group}": {`); for (const key in groupTokens) { const value = groupTokens[key]; - if (value.$type === "color") { + if (value?.$type === "color") { lines.push(` "${key}": "var(--${group}-${key})",`); + } else { + console.warn(`Skipping non-color token: ${group}.${key}`); } } lines.push(` },`); }📝 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.interface ColorToken { $type: string; $value: string; } interface TokenGroup { [key: string]: ColorToken; } interface TokenData { [group: string]: TokenGroup; } const generatePaletteTsContent = (tokens: TokenData): string => { const lines: string[] = []; // Start the TypeScript export object lines.push(`export const palette = {`); for (const group in tokens) { const groupTokens = tokens[group]; lines.push(` "${group}": {`); for (const key in groupTokens) { const value = groupTokens[key]; if (value?.$type === "color") { // Add a line for each color token lines.push(` "${key}": "var(--${group}-${key})",`); } else { console.warn(`Skipping non-color token: ${group}.${key}`); } } lines.push(` },`); // Close the group } lines.push(`};`); // Close the object return lines.join("\n"); };packages/design-system/src/scripts/build-colors-tailwind.ts (1)
8-11: 🛠️ Refactor suggestion
Enhance HSL variable resolution
The HSL variable resolution could be more robust with validation.
+const isValidHslKey = (key: string): boolean => { + return /^[a-zA-Z0-9-]+$/.test(key); +}; + const resolveTokenReference = (key: string): string => { + if (!isValidHslKey(key)) { + throw new Error(`Invalid HSL key format: ${key}`); + } return `hsl(var(--${key}))`; };📝 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.// Utility to resolve token references to match the key directly const isValidHslKey = (key: string): boolean => { return /^[a-zA-Z0-9-]+$/.test(key); }; const resolveTokenReference = (key: string): string => { if (!isValidHslKey(key)) { throw new Error(`Invalid HSL key format: ${key}`); } return `hsl(var(--${key}))`; };packages/design-system/src/scripts/build-colors-style.ts (2)
7-9: 🛠️ Refactor suggestion
Improve token reference resolution
The current regex-based approach could be more robust with validation and error handling.
+interface TokenReference { + original: string; + path: string; +} + +const parseTokenReference = (value: string): TokenReference[] => { + const matches = Array.from(value.matchAll(/{(.+?)}/g)); + return matches.map(match => ({ + original: match[0], + path: match[1].replace(".", "-") + })); +}; + const resolveTokenReference = (value: string): string => { - return value.replace(/{(.+?)}/g, (_, match) => `var(--${match.replace(".", "-")})`); + try { + const refs = parseTokenReference(value); + return refs.reduce((result, ref) => + result.replace(ref.original, `var(--${ref.path})`), + value + ); + } catch (error) { + throw new Error(`Failed to resolve token reference: ${value}`); + } };📝 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.interface TokenReference { original: string; path: string; } const parseTokenReference = (value: string): TokenReference[] => { const matches = Array.from(value.matchAll(/{(.+?)}/g)); return matches.map(match => ({ original: match[0], path: match[1].replace(".", "-") })); }; const resolveTokenReference = (value: string): string => { try { const refs = parseTokenReference(value); return refs.reduce((result, ref) => result.replace(ref.original, `var(--${ref.path})`), value ); } catch (error) { throw new Error(`Failed to resolve token reference: ${value}`); } };
44-75: 🛠️ Refactor suggestion
Add validation for token structure
The function should validate the token structure before processing.
+interface ColorToken { + $value: string; + $type?: string; + $description?: string; +} + +const validateTokens = (tokens: any): tokens is { color: Record<string, ColorToken> } => { + if (!tokens?.color || typeof tokens.color !== 'object') { + throw new Error('Invalid token structure: missing color tokens'); + } + return true; +}; + export const buildColorsScss = (theme: "dark" | "light"): void => { try { const rawData = fs.readFileSync(inputFilePath, "utf-8"); const tokens = JSON.parse(rawData); + if (!validateTokens(tokens)) { + throw new Error('Invalid token structure'); + } const scssContent = generateScssContent(theme, tokens); // ... rest of the function } catch (error) { console.error(`Failed to build colors for ${theme} theme:`, error); process.exit(1); } };Committable suggestion skipped: line range outside the PR's diff.
apps/core/app/(landing)/_components/desktop-navbar/feature-navbar-authenticated.tsx (2)
42-46:
⚠️ Potential issueReplace placeholder avatar with dynamic user data.
The avatar uses hardcoded values and needs to be updated with actual user information.
<Avatar className="size-8"> - {/* TODO: Add User info */} - <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" /> - <AvatarFallback>CN</AvatarFallback> + <AvatarImage src={user.avatarUrl} alt={user.name} /> + <AvatarFallback>{user.initials}</AvatarFallback> </Avatar>Committable suggestion skipped: line range outside the PR's diff.
34-37:
⚠️ Potential issueReplace hardcoded badge count with dynamic value.
The cart badge shows a hardcoded value of "3". This should be derived from the cart state.
- <div className="bg-error rounded-full flex items-center justify-center absolute top-0 right-0 w-3 h-3 text-white text-xs"> - 3 - </div> + {cartItems.length > 0 && ( + <div className="bg-error rounded-full flex items-center justify-center absolute top-0 right-0 w-3 h-3 text-white text-xs"> + {cartItems.length} + </div> + )}Committable suggestion skipped: line range outside the PR's diff.
apps/core/app/(landing)/_components/addtoCard.tsx (3)
81-95:
⚠️ Potential issueRemove hardcoded email and implement sign-out functionality.
The component contains hardcoded email and an unimplemented sign-out function.
- {/* to do : # label container */} <Input - placeholder="[email protected]" + placeholder="Enter your email" + value={user.email} type="email" className="bg-input text-muted-foreground" /> <span className="underline absolute right-2 text-sm text-foreground cursor-pointer" onClick={() => { - // to do : # sign out + handleSignOut(); }} > Sign out </span>Committable suggestion skipped: line range outside the PR's diff.
57-59:
⚠️ Potential issueAdd key prop to mapped CardSkeleton components.
React requires a unique key prop for elements in an array to optimize rendering and prevent potential issues with component state.
- {activeTemp.map((card) => ( - <CardSkeleton /> - ))} + {activeTemp.map((card) => ( + <CardSkeleton key={card.id} /> + ))}Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 Biome (1.9.4)
[error] 58-58: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
62-107: 💡 Codebase verification
Security measures needed in payment implementation
The review comment is valid. The current implementation only contains UI elements without any security measures or actual payment processing logic. Critical security features are missing:
- No form validation for email and full name inputs
- No error handling mechanisms
- No loading states during payment processing
- No actual payment gateway integration code
🔗 Analysis chain
Implement proper payment security measures.
The payment section needs additional security considerations:
- Form validation
- HTTPS verification
- Proper error handling
Consider implementing:
- Input validation
- Error boundaries
- Loading states during payment processing
- Secure payment gateway integration
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check if the application enforces HTTPS grep -r "https://" . | grep -v "node_modules"Length of output: 9386
Script:
#!/bin/bash # Check for form validation and payment processing implementations echo "=== Checking for form validation libraries ===" rg -l "react-hook-form|formik|yup|zod" echo -e "\n=== Checking for error boundary components ===" rg -l "ErrorBoundary" echo -e "\n=== Looking for payment processing code ===" rg -l "payment|stripe|checkout" --type ts --type tsx echo -e "\n=== Checking for loading states ===" ast-grep --pattern 'const [$_] = useState<boolean>'Length of output: 3217
Script:
#!/bin/bash # Search for payment processing and loading states echo "=== Looking for payment processing code ===" rg -l "payment|stripe|checkout" . echo -e "\n=== Checking for loading states (broader pattern) ===" ast-grep --pattern 'const [$_] = useState' echo -e "\n=== Looking for payment gateway integrations ===" rg -l "stripe|paypal|metamask|web3|ethereum|wallet" .Length of output: 1045
packages/ui/src/components/molecules/attachment/attachmentThumbnail/attachmentThumbnail.tsx (3)
154-155:
⚠️ Potential issueVerify the hardcoded image src.
The img tag has an empty src attribute which could cause unnecessary network requests.
-<img className="size-4 flex-none rounded-full" src="" alt="" /> +<img className="size-4 flex-none rounded-full" src={avatar} alt={`${username}'s avatar`} />Committable suggestion skipped: line range outside the PR's diff.
158-158:
⚠️ Potential issueReplace hardcoded username with prop value.
The component accepts a username prop but displays a hardcoded value.
-<Typography className="text-[10px] font-normal">Ali Ebrahimi Kashef</Typography> +<Typography className="text-[10px] font-normal">{username}</Typography>Committable suggestion skipped: line range outside the PR's diff.
145-145:
⚠️ Potential issueReplace hardcoded product name with prop value.
The component accepts a productName prop but displays a hardcoded value.
-<Typography className="text-base font-bold">News App UI KIT</Typography> +<Typography className="text-base font-bold">{productName}</Typography>Committable suggestion skipped: line range outside the PR's diff.
apps/core/app/(landing)/layout.tsx (1)
12-12:
⚠️ Potential issueVerify the hardcoded authentication state.
Setting
islogin={true}hardcodes the authentication state. Consider using a proper authentication context or hook to determine the login state dynamically.-<Navbar islogin={true} /> +<Navbar islogin={useAuth().isAuthenticated} />Committable suggestion skipped: line range outside the PR's diff.
packages/design-system/src/tokens/token_typography_Mode 1.json (3)
1-200: 🛠️ Refactor suggestion
Rename file to follow standard naming convention.
The filename
token_typography_Mode 1.jsonuses non-standard naming. Consider renaming totoken_typography_mode_1.jsonor better yet,token_typography_light.jsonto match the theme naming pattern used in color tokens.
194-197: 🛠️ Refactor suggestion
Fix inconsistent casing in font weight token.
The "light" weight token uses lowercase while other weight tokens use Title Case. This inconsistency could cause issues in consuming applications.
- "light": { + "Light": { "$type": "string", "$value": "Light" }📝 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."Light": { "$type": "string", "$value": "Light" }
13-93: 💡 Codebase verification
Line height ratios do not meet WCAG 2.1 Level AAA requirements
Most text styles have line height ratios below the WCAG 2.1 Level AAA requirement of 1.5:
- Display styles have particularly low ratios (1.17-1.23)
- Heading styles range from 1.22 to 1.40
- Labels styles range from 1.14 to 1.33
- Only Paragraphs meet or exceed the requirement (1.43-1.67)
Consider increasing line heights to achieve a minimum ratio of 1.5 times the font size for better accessibility compliance.
🔗 Analysis chain
Verify line height ratios for accessibility compliance.
Some line height values seem quite large (e.g., Display LG at 112px). Please verify these values against WCAG 2.1 Level AAA requirements for text spacing (Success Criterion 1.4.12).
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Calculate and verify line-height to font-size ratios python3 << EOF import json with open('packages/design-system/src/tokens/token_typography_Mode 1.json') as f: data = json.load(f) line_heights = data['font']['line height'] sizes = data['font']['size'] print("Line-height to font-size ratios:") for category in ['Display', 'Heading', 'Labels', 'Paragraphs']: if category in line_heights and category in sizes: for size in ['LG', 'MD', 'SM', 'XS']: if size in line_heights[category] and size in sizes[category]: lh = line_heights[category][size]['$value'] fs = sizes[category][size]['$value'] ratio = lh / fs print(f"{category} {size}: {ratio:.2f}") if ratio < 1.5: print(f"WARNING: {category} {size} ratio below WCAG recommendation") EOFLength of output: 129
Script:
#!/bin/bash # First, let's examine the JSON structure cat "packages/design-system/src/tokens/token_typography_Mode 1.json" | jq '.'Length of output: 3810
packages/design-system/src/tokens/token_color_light.json (1)
67-81: 🛠️ Refactor suggestion
Fix incorrect descriptions in status color tokens.
The description texts for information, success, and warning tokens incorrectly reference destructive actions:
"information": { "$type": "color", "$value": "{blue.100}", - "$description": "Used for destructive actions such as <Button variant=\"destructive\">" + "$description": "Used for informational messages and states" }, // Similar fixes needed for success and warning tokensAlso applies to: 136-150, 156-170
Summary by CodeRabbit
Release Notes
New Features
RetroGridcomponent for dynamic grid layouts.AttachmentThumbnailcomponent for displaying attachment previews.UI/UX Improvements
Typographycomponents for better semantics.Performance
Bug Fixes
Documentation