refactor & perf: declare `tv` outside the component to avoid recreating style at each render

[samuel871211]

Issue

• resolve:

Why is this change needed?

refactor & perf: declare tv outside the component to avoid recreating style at each render

tailwind-variants doc

What would you like reviewers to focus on?

Testing Verification

What was done

🤖 Generated by PR Agent at 016cfc6a603bb568bba0acd3606b8801d99c8dd5

• Refactored style definitions into separate files for reusability.
• Improved performance by declaring tv styles outside components.
• Simplified component code by importing pre-defined styles.
• Enhanced maintainability by centralizing style management.

Detailed Changes

Relevant files

Enhancement

10 files Banner.style.ts Added centralized styles for the Banner component                +41/-0    Breadcrumb.style.ts Added centralized styles for the Breadcrumb component        +5/-0      Callout.style.ts Added centralized styles for the Callout component              +12/-0    FooterNavi.style.ts Added centralized styles for the FooterNavi component        +21/-0    Heading.style.ts Added centralized styles for the Heading component              +14/-0    Banner.tsx Refactored Banner component to use external styles              +6/-41    Breadcrumb.tsx Refactored Breadcrumb component to use external styles      +5/-7      Callout.tsx Refactored Callout component to use external styles            +2/-13    FooterNavi.tsx Refactored FooterNavi component to use external styles      +1/-21    Heading.tsx Refactored Heading component to use external styles            +2/-15

Additional Notes

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 1e2f2f271e6cda309319d33ccbd44a4240599fdc

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel[bot]]

@samuel871211 is attempting to deploy a commit to the ROUTE06 Core Team on Vercel.

A member of the Team first needs to authorize it.

[qodo-free-for-open-source-projects[bot]]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Missing Elements The refactored code is missing closing tags for Link and span elements that were present in the original code. This could cause rendering issues or errors. <Link href={item.url} className={textClassName}> {item.name} </Link> ) : ( <span className={textClassName}>{item.name}</span> )} Missing Import Comma The import statement for style components is missing a comma after buttonStyle, which could cause syntax errors. import { wrapperStyle, textStyle, linkStyle, buttonStyle } from "./Banner.style"

[qodo-free-for-open-source-projects[bot]]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Move constant outside component Move the textClassName constant outside the component to prevent it from being recreated on each render, which is the main purpose of this PR. This follows the same pattern as the other refactored components. frontend/apps/docs/components/Breadcrumb/Breadcrumb.tsx [11] +import { textStyle } from "./Breadcrumb.style" + const textClassName = textStyle() +export const Breadcrumb: FC = () => { + [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 7 __ Why: Moving the constant outside the component prevents it from being recreated on each render, which aligns with the pattern used in other refactored components in this PR. This improves performance by avoiding unnecessary recalculations.	Medium
[ ] Update

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
liam-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 7, 2025 2:33am
liam-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 7, 2025 2:33am
liam-erd-sample	✅ Ready (Inspect)	Visit Preview		Apr 7, 2025 2:33am

[samuel871211]

@MH4GF

Thanks for the comment, I've fixed the linter error.

BTW, may I add some instruction to CONTRIBUTING.md, tell them to run pnpm run fmt before commiting? I took me a few time to discover how to fix the linter error, and I hope to add the instruction in the next PR.

[MH4GF]

@samuel871211 That would be great. I'd love to have you!

[samuel871211]

@MH4GF Thank you. I'll work on it ASAP.