refactor(badge): add consistency

[dbc2201]

Description

Add comprehensive TSDoc comments to the Badge UI component to improve developer experience and inline documentation. The comments include a concise description, @param, @returns, and an example usage snippet.

Type of Change

• New feature
• Bug fix
• Refactoring
• Documentation update
• Test addition/update

Changes Made

• Added full TSDoc block to src/components/ui/Badge/Badge.tsx following the provided template.
• Documented BadgeProps usage via @param {BadgeProps} props and @returns {JSX.Element}.
• Included @example demonstrating text, variant, removable, and onRemove props.
• Clarified note in code comments that color is ignored in favor of variant to align with DaisyUI classes.

Testing Done

• All tests pass
• Added new tests
• Manual review of generated typings/intellisense in editor (documentation-only change; no runtime behavior affected)

Screenshots (if applicable)

N/A (documentation-only change)

Related Issues

Closes #<issue_number>

Checklist

• Code follows project style guidelines
• Self-review completed
• Comments added for complex logic (N/A for logic, but documentation added where relevant)
• Documentation updated
• No console.log or debugging code
• All tests passing

Summary by CodeRabbit

Release Notes

• Refactor

  • Internal improvements to component structure for better maintainability.

• Documentation

  • Enhanced component documentation and usage examples.

[coderabbitai]

Warning

Rate limit exceeded

@dbc2201 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 9 minutes and 27 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 6310d8e and cca3176.

📒 Files selected for processing (2)

• src/components/ui/Badge/Badge.tsx (1 hunks)
• src/components/ui/Badge/BadgeProps.ts (1 hunks)

Walkthrough

The Badge component's function signature is refactored from destructured parameters with default values to an explicit props object parameter. Behavioral logic remains unchanged while adopting a standard props-based function signature pattern.

Changes

Cohort / File(s)	Change Summary
Badge Component Refactoring src/components/ui/Badge/Badge.tsx	Function signature converted from destructured ({ text, variant = 'primary', removable = false, onRemove }) to props object (props: BadgeProps). Internal references updated to access props through object notation. JSDoc documentation and usage examples enriched.
Badge Props Type src/components/ui/Badge/BadgeProps.ts	Indentation and spacing normalization within the interface definition; no type or property changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Verify all destructured parameters are correctly mapped to props object references throughout the component
• Confirm that default values (variant, removable) are handled appropriately or applied elsewhere
• Check JSDoc updates are accurate and reflect the new signature

Suggested labels

enhancement

Poem

🐰 From destructured tuples to props so neat,
The Badge hops along with a cleaner beat!
One object holds all that it needs,
A rabbit-approved refactor, indeed! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title Check	❓ Inconclusive	The title "refactor(badge): add consistency" is vague and does not clearly communicate the specific nature of the changes. While the PR does involve refactoring (converting the Badge component from a destructured function signature to a props-based function) and documentation improvements (adding TSDoc comments), the title fails to specify what "consistency" is being added. A teammate scanning the git history would struggle to understand the primary purpose of this change from the title alone, as "consistency" could refer to various aspects like code style, function signatures, or documentation patterns.	Consider revising the title to be more specific about the primary change, such as "refactor(badge): convert to props-based function signature and add documentation" or "refactor(badge): standardize component structure and improve JSDoc coverage" to clearly communicate the changeset's main objectives to reviewers and future code history readers.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 4

🧹 Nitpick comments (2)

src/components/ui/Badge/BadgeProps.ts (1)

2-6: Use semicolons for consistency with TypeScript conventions.

While commas are valid in TypeScript interfaces, semicolons are more conventional and align with common style guides (Airbnb, Google, Standard).

Apply this diff:

 export interface BadgeProps {
-	text: string,
-	color: string,
-	variant: 'primary' | 'secondary' | 'accent' | 'ghost',
-	removable: boolean,
-	onRemove: () => void
+	text: string;
+	color: string;
+	variant: 'primary' | 'secondary' | 'accent' | 'ghost';
+	removable: boolean;
+	onRemove: () => void;
 }

src/components/ui/Badge/Badge.tsx (1)

6-7: Simplify JSDoc @param and @returns descriptions.

The current JSDoc provides minimal information. Consider documenting the individual properties of BadgeProps for better IntelliSense.

Apply this diff:

 /**
  * Badge - A reusable badge that displays text with DaisyUI variant styling and an optional remove button.
  * 
- * @param {BadgeProps} props - Component props
- * @returns {JSX.Element} Rendered component
+ * @param props - Badge configuration
+ * @param props.text - Text to display in the badge
+ * @param props.variant - DaisyUI color variant
+ * @param props.removable - Whether to show a remove button
+ * @param props.onRemove - Callback fired when remove button is clicked
+ * @returns Rendered badge component
  * 
  * @example
  * <Badge text="New" variant="primary" removable onRemove={() => console.log('removed')} />

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 97fb00d and 6310d8e.

📒 Files selected for processing (2)

• src/components/ui/Badge/Badge.tsx (1 hunks)
• src/components/ui/Badge/BadgeProps.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/components/ui/Badge/Badge.tsx (1)

src/components/ui/Badge/BadgeProps.ts (1)

• BadgeProps (1-7)

🔇 Additional comments (2)

src/components/ui/Badge/Badge.tsx (2)

3-11: Good addition of JSDoc documentation.

The JSDoc block improves developer experience by providing clear documentation and usage examples. The example demonstrates all key props effectively.

---

14-20: Clear explanation of the color vs variant design decision.

The comment effectively documents why the color prop is ignored, helping future maintainers understand the intentional design choice to align with DaisyUI's class-based styling.