Skip to content

chore: move badge to ui#3316

Merged
MichaelUnkey merged 23 commits intomainfrom
move-badge-to-ui
Jun 20, 2025
Merged

chore: move badge to ui#3316
MichaelUnkey merged 23 commits intomainfrom
move-badge-to-ui

Conversation

@MichaelUnkey
Copy link
Collaborator

@MichaelUnkey MichaelUnkey commented Jun 11, 2025

What does this PR do?

Fixes # (issue)

If there is not an issue for this, please create one first. This is used to tracking purposes and also helps use understand why this PR exists

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • Chore (refactoring code, technical debt, workflow improvements)
  • Enhancement (small improvements)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How should this be tested?

  1. Badges still match production. (In my testing i saw no differences)
  2. Caused no errors

Checklist

Required

  • Filled out the "How to test" section in this PR
  • Read Contributing Guide
  • Self-reviewed my own code
  • Commented on my code in hard-to-understand areas
  • Ran pnpm build
  • Ran pnpm fmt
  • Checked for warnings, there are none
  • Removed all console.logs
  • Merged the latest changes from main onto my branch with git pull origin main
  • My changes don't cause any responsiveness issues

Appreciated

  • If a UI change was made: Added a screen recording or screenshots to this PR
  • Updated the Unkey Docs if changes were necessary

Summary by CodeRabbit

  • New Features

    • Added comprehensive documentation and interactive examples for the Badge component, showcasing its variants, sizes, and usage scenarios.
  • Style

    • Updated the Badge component’s appearance, including improved success variant colors and use of a span element for better semantics.
  • Refactor

    • Consolidated Badge imports across the app to use a single external UI library, simplifying and unifying component sourcing.
    • Adjusted Badge component to use semantic HTML and updated its props for improved accessibility and consistency.
  • Documentation

    • Introduced detailed guidance and best practices for using the Badge component, including accessibility recommendations and code samples.

@vercel
Copy link

vercel bot commented Jun 11, 2025

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

Name Status Preview Comments Updated (UTC)
dashboard ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 20, 2025 1:05pm
1 Skipped Deployment
Name Status Preview Comments Updated (UTC)
engineering ⬜️ Ignored (Inspect) Visit Preview Jun 20, 2025 1:05pm

@changeset-bot
Copy link

changeset-bot bot commented Jun 11, 2025

⚠️ No Changeset found

Latest commit: 6635568

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

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jun 11, 2025

📝 Walkthrough
## Walkthrough

A large-scale update was made to standardize the import of the `Badge` UI component across the codebase. All previous local imports of `Badge` were replaced with imports from the external `@unkey/ui` package, consolidating UI component sources. Additional documentation and usage examples for the `Badge` component were also introduced. The internal `Badge` component was updated to render a `span` instead of a `div` and improved styling for the success variant.

## Changes

| File(s) / Path(s)                                                                                 | Change Summary                                                                                                     |
|---------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------|
| Multiple files under `apps/dashboard/app/(app)/...` and `dashboard/components/dashboard/root-key-table/index.tsx` | Replaced local `Badge` imports with imports from `@unkey/ui`, consolidating UI component sources.                  |
| `apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/components/table/logs-table.tsx`  | Updated `Badge` import to `@unkey/ui` and removed `variant="success"` prop from two usages.                        |
| `internal/ui/src/components/badge.tsx`                                                            | Updated `Badge` to use `span` instead of `div`, improved success variant styling, and adjusted props interface.    |
| `internal/ui/src/index.ts`                                                                        | Added export for the `badge` component.                                                                            |
| `apps/engineering/content/design/components/badge.example.tsx`                                    | Added new example file with multiple `Badge` usage scenarios and exported demo components.                         |
| `apps/engineering/content/design/components/badge.mdx`                                            | Added new documentation file for `Badge`, including usage, props, variants, accessibility, and best practices.     |
| `apps/engineering/content/design/components/dialogs/navigable-dialog.example.tsx`                  | Added `flex` and `text-warning-5` classes to dialog body for styling.                                              |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant AppComponent
    participant @unkey/ui
    AppComponent->>@unkey/ui: Import Badge, Button, etc.
    AppComponent->>Badge: Render Badge with props
    Badge->>AppComponent: Rendered Badge (as <span>)

Possibly related PRs

  • chore: Add timestamp to unkey UI #3192: Consolidates imports of the TimestampInfo component from local paths to the external @unkey/ui package, similar to this PR's consolidation of Badge imports.

Suggested labels

Improvement, Needs Approval

Suggested reviewers

  • perkinsjr
  • chronark
  • mcstepp
  • ogzhanolguncu

</details>

<!-- walkthrough_end -->


---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: ASSERTIVE**
**Plan: Pro**


<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 7dd0671f93e8267094db389520eb4902cfad2f14 and 6635568d62e4d8d1d31f46c3096024c768ae7d84.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/last-used-cell.tsx` (1 hunks)

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (25)</summary>

* GitHub Check: Test Go API Local / Test (Shard 2/8)
* GitHub Check: Test Go API Local / Test (Shard 5/8)
* GitHub Check: Test Go API Local / Test (Shard 7/8)
* GitHub Check: Test Go API Local / Test (Shard 8/8)
* GitHub Check: Test Go API Local / Test (Shard 4/8)
* GitHub Check: Test Go API Local / Test (Shard 6/8)
* GitHub Check: Test Go API Local / Test (Shard 1/8)
* GitHub Check: Test Go API Local / Test (Shard 3/8)
* GitHub Check: Build / Build
* GitHub Check: Test API / API Test Local
* GitHub Check: Test Packages / Test ./apps/dashboard
* GitHub Check: Test Packages / Test ./packages/rbac
* GitHub Check: Test Packages / Test ./packages/nextjs
* GitHub Check: Test Packages / Test ./internal/clickhouse
* GitHub Check: Test Packages / Test ./internal/resend
* GitHub Check: Test Packages / Test ./packages/cache
* GitHub Check: Test Packages / Test ./internal/hash
* GitHub Check: Test Packages / Test ./internal/keys
* GitHub Check: Test Packages / Test ./internal/id
* GitHub Check: Test Packages / Test ./packages/hono
* GitHub Check: Test Packages / Test ./packages/api
* GitHub Check: Test Packages / Test ./internal/billing
* GitHub Check: Test Packages / Test ./internal/encryption
* GitHub Check: autofix
* GitHub Check: Analyze (javascript-typescript)

</details>

</details>
<!-- internal state start -->


<!-- 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= -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details open="true">
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=unkeyed/unkey&utm_content=3316):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Explain this complex logic.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai explain this code block.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and explain its main purpose.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

### Support

Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) for assistance with any issues or questions.

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)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->

@github-actions
Copy link
Contributor

github-actions bot commented Jun 11, 2025

Thank you for following the naming conventions for pull request titles! 🙏

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

♻️ Duplicate comments (1)
apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/log-details/components/log-header.tsx (1)

4-4: Same import consolidation as above

Nothing further to add; see previous comment.

🧹 Nitpick comments (5)
apps/dashboard/app/(app)/audit/components/table/log-details/components/log-header.tsx (1)

3-4: Import OK, but consider normalising the cn helper source

Badge/Button now come from @unkey/ui, which is great.
However this file still imports cn from an internal path (@unkey/ui/src/lib/utils) while other files use "@/lib/utils". Mixing sources can cause duplicate copies in the bundle.

-import { cn } from "@unkey/ui/src/lib/utils";
+import { cn } from "@/lib/utils";

Aligning on one public entry-point keeps bundle size down and avoids module-resolution edge cases.

internal/ui/src/components/badge.tsx (1)

19-21: Variant literal DEFAULT is unconventional

CVA treats the key name literally, so consumers must write
<Badge size="DEFAULT" />. Most components use lowercase "default" to avoid shouting and match TypeScript enum-like patterns.

-    size: {
-      DEFAULT: "",
-      sm: "px-1.5 py-0.5",
-    },
+    size: {
+      default: "",
+      sm: "px-1.5 py-0.5",
+    },

Remember to update docs/examples accordingly.

apps/engineering/content/design/components/badge.mdx (1)

44-46: Sync documentation with runtime prop casing

If you adopt the lowercase "default" size key suggested earlier, remember to update these docs ("DEFAULT""default").

apps/engineering/content/design/components/badge.example.tsx (2)

19-36: SizeVariants covers sizing well.
Consider adding a caption or brief note in the snippet UI to explicitly label “Default” vs. “Small” for clarity.


88-116: InteractiveBadges should include real interactivity.
Currently only hover styles are demonstrated. To complete the demo, add onClick handlers or render badges as <button> for proper semantics and keyboard accessibility.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d9eb0d2 and 76309cb.

📒 Files selected for processing (31)
  • apps/dashboard/app/(app)/apis/[apiId]/_components/rbac-dialog-content.tsx (1 hunks)
  • apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/log-details/components/log-header.tsx (1 hunks)
  • apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/outcome-popover.tsx (1 hunks)
  • apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/logs-table.tsx (1 hunks)
  • apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/components/table/logs-table.tsx (1 hunks)
  • apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/last-used.tsx (1 hunks)
  • apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/components/status-badge.tsx (1 hunks)
  • apps/dashboard/app/(app)/audit/components/table/log-details/components/log-header.tsx (1 hunks)
  • apps/dashboard/app/(app)/audit/components/table/logs-table.tsx (1 hunks)
  • apps/dashboard/app/(app)/authorization/permissions/page.tsx (1 hunks)
  • apps/dashboard/app/(app)/authorization/roles/page.tsx (1 hunks)
  • apps/dashboard/app/(app)/identities/[identityId]/page.tsx (1 hunks)
  • apps/dashboard/app/(app)/logs/components/table/log-details/components/log-footer.tsx (1 hunks)
  • apps/dashboard/app/(app)/logs/components/table/log-details/components/log-header.tsx (1 hunks)
  • apps/dashboard/app/(app)/logs/components/table/logs-table.tsx (1 hunks)
  • apps/dashboard/app/(app)/ratelimits/[namespaceId]/_components/identifier-dialog.tsx (1 hunks)
  • apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/logs-table.tsx (1 hunks)
  • apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/log-details/components/log-footer.tsx (1 hunks)
  • apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/log-details/components/log-header.tsx (1 hunks)
  • apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/logs-table.tsx (1 hunks)
  • apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/overrides-table.tsx (1 hunks)
  • apps/dashboard/app/(app)/settings/root-keys/[keyId]/history/access-table.tsx (1 hunks)
  • apps/dashboard/app/(app)/settings/team/status-badge.tsx (1 hunks)
  • apps/dashboard/app/(app)/settings/workspace-navbar.tsx (1 hunks)
  • apps/dashboard/components/dashboard/root-key-table/index.tsx (1 hunks)
  • apps/engineering/app/layout.tsx (1 hunks)
  • apps/engineering/content/design/components/badge.example.tsx (1 hunks)
  • apps/engineering/content/design/components/badge.mdx (1 hunks)
  • apps/engineering/content/design/components/dialog/navigable-dialog.example.tsx (1 hunks)
  • internal/ui/src/components/badge.tsx (1 hunks)
  • internal/ui/src/index.ts (1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
internal/ui/src/components/badge.tsx (1)
apps/dashboard/lib/utils.ts (1)
  • cn (5-7)
⏰ Context from checks skipped due to timeout of 90000ms (13)
  • GitHub Check: Test Go API Local / Test (Shard 6/8)
  • GitHub Check: Test Go API Local / Test (Shard 8/8)
  • GitHub Check: Test Go API Local / Test (Shard 3/8)
  • GitHub Check: Test Go API Local / Test (Shard 7/8)
  • GitHub Check: Test Go API Local / Test (Shard 4/8)
  • GitHub Check: Test Go API Local / Test (Shard 5/8)
  • GitHub Check: Test Go API Local / Test (Shard 1/8)
  • GitHub Check: Test Go API Local / Test (Shard 2/8)
  • GitHub Check: Build / Build
  • GitHub Check: Test API / API Test Local
  • GitHub Check: Test Packages / Test ./internal/clickhouse
  • GitHub Check: autofix
  • GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (30)
apps/dashboard/app/(app)/authorization/roles/page.tsx (1)

1-1: No-op change
The added blank line at the top does not affect functionality.

apps/dashboard/app/(app)/settings/root-keys/[keyId]/history/access-table.tsx (1)

11-11: Consolidated Badge import
Importing Badge from @unkey/ui aligns with the new centralized UI library and removes the deprecated local path.

apps/dashboard/app/(app)/settings/team/status-badge.tsx (1)

3-3: Centralized Badge import
Switching to @unkey/ui for the Badge component ensures consistency with the shared UI library.

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/components/status-badge.tsx (1)

2-2: Verify Badge ref forwarding
Since this component passes a ref to Badge, ensure @unkey/ui’s Badge implementation uses React.forwardRef (or equivalent) to support refs.

apps/dashboard/app/(app)/logs/components/table/logs-table.tsx (1)

8-8: Import consolidation for UI components
Combining Badge, Button, Empty, and TimestampInfo into a single import from @unkey/ui simplifies and standardizes component sourcing.

apps/dashboard/app/(app)/authorization/permissions/page.tsx (1)

7-7: Import consolidation acknowledged

Importing Badge, Button (and now CopyButton) from @unkey/ui keeps the component surface consistent. No concerns.

apps/dashboard/app/(app)/settings/workspace-navbar.tsx (1)

6-6: Good move to a single UI source

Unifying Badge, Button, and CopyButton under @unkey/ui improves portability.

apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/log-details/components/log-footer.tsx (1)

7-7: Consolidated Badge and TimestampInfo imports
Importing Badge and TimestampInfo from the centralized @unkey/ui package aligns with the broader UI refactor and keeps imports consistent.

apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/logs-table.tsx (1)

10-10: Standardized UI imports
Switching to grouped imports from @unkey/ui for Badge, Button, Empty, and TimestampInfo ensures consistency with the new internal UI library.

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/last-used.tsx (1)

4-4: Centralized Badge and TimestampInfo sources
Importing both Badge and TimestampInfo from @unkey/ui consolidates UI component sourcing per current architecture.

apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/overrides-table.tsx (1)

6-6: Unified Badge and Empty imports
Importing Badge and Empty from the shared @unkey/ui library aligns with the UI consolidation effort.

apps/engineering/app/layout.tsx (1)

9-9:

Details

✅ Verification successful

Ensure global styles are applied
You've added the @unkey/ui/css import for the engineering layout. Verify that the dashboard app (and any other consuming apps) also import @unkey/ui/css in their root layouts to ensure consistent styling across the codebase.

Run this script to confirm:


🏁 Script executed:

#!/bin/bash
# Check for @unkey/ui/css import in dashboard app layouts
rg 'import "@unkey/ui/css"' -R apps/dashboard/app

Length of output: 456


🏁 Script executed:

#!/bin/bash
# Verify @unkey/ui/css import in the dashboard app root layout
rg 'import "@unkey/ui/css"' apps/dashboard/app

Length of output: 102


Global styles import verified
The import "@unkey/ui/css"; statement is present in both layouts, ensuring consistent styling:

  • apps/dashboard/app/layout.tsx: import "@unkey/ui/css";

No further changes needed.

apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/outcome-popover.tsx (1)

6-6: Consolidated external UI imports correctly
The Badge and Button components are now imported from @unkey/ui, replacing local implementations and aligning with the unified UI library.

apps/dashboard/app/(app)/logs/components/table/log-details/components/log-footer.tsx (1)

7-7: Unified Badge & TimestampInfo imports
Moving Badge and TimestampInfo to @unkey/ui centralizes UI components and removes local duplication—looks good.

apps/engineering/content/design/components/dialog/navigable-dialog.example.tsx (1)

87-87: Updated example styling as intended
Adding the flex layout and text-warning-5 class to NavigableDialogBody aligns with the design update—example renders correctly.

apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/logs-table.tsx (1)

9-9: Centralized UI component import
Good consolidation of Badge, Button, Empty, and TimestampInfo from @unkey/ui—consistent with other tables.

apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/log-details/components/log-header.tsx (1)

4-4: Switched to external Badge & Button
Importing both Badge and Button from @unkey/ui cleans up local dependencies and matches the new UI package structure.

internal/ui/src/index.ts (1)

21-21: Expose Badge component in public API
Adding export * from "./components/badge"; correctly surfaces the new Badge component from the centralized index.

apps/dashboard/app/(app)/audit/components/table/logs-table.tsx (1)

5-5: Centralize Badge import
Swapping the local badge import for Badge from @unkey/ui aligns with the refactor and has no impact on functionality.

apps/dashboard/app/(app)/identities/[identityId]/page.tsx (1)

18-18: Migrate Badge import to external package
Importing Badge (and Button, CopyButton) from @unkey/ui is consistent. Please confirm that the Dashboard app’s root layout includes the global CSS/styles for @unkey/ui so these components render correctly.

apps/dashboard/app/(app)/ratelimits/[namespaceId]/_components/identifier-dialog.tsx (1)

8-17: Replace local UI imports with @unkey/ui
Consolidating all UI component imports (Badge, Button, DialogContainer, etc.) from @unkey/ui simplifies maintenance and avoids duplication. No behavior changes detected.

apps/dashboard/app/(app)/apis/[apiId]/_components/rbac-dialog-content.tsx (1)

5-5: Switch Badge import to shared UI library
Updating Badge, Button, and Loading imports to come from @unkey/ui centralizes component sourcing without altering logic.

internal/ui/src/components/badge.tsx (1)

6-6: Double-check cn import path

cn is imported from "../lib/utils". In the UI package we usually keep helpers inside src/utils (not lib).
Please verify that internal/ui/src/lib/utils.ts really exists. If it lives under src/utils.ts, this import will break the build.

-import { cn } from "../lib/utils";
+import { cn } from "../utils";
apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/components/table/logs-table.tsx (1)

18-18: Import consolidation looks good

Switching to the shared @unkey/ui import keeps the bundle lean and avoids duplicate badge implementations. 👍

apps/dashboard/components/dashboard/root-key-table/index.tsx (1)

22-22: Good migration to shared UI kit

Importing Badge from @unkey/ui is consistent with the refactor and removes a local dependency. No other issues found.

apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/logs-table.tsx (1)

7-7: Colour expectation mismatch once success variant is fixed

After you adjust the success palette in badge.tsx, the success counters in this table will automatically gain green styling, improving readability. No code changes required here.

apps/engineering/content/design/components/badge.example.tsx (4)

1-2: Imports correctly point to @unkey/ui.
The new example pulls in Badge from the shared UI package and uses the existing RenderComponentWithSnippet helper appropriately.


4-17: DefaultVariants example is clear and concise.
It showcases all color variants as intended and aligns with the documentation.


38-56: MonoFont example is spot-on.
Shows monospace font usage clearly for various badge contents.


59-86: StatusBadges example effectively demonstrates statuses.
Good use of consistent spacing and labels for each state.

@MichaelUnkey MichaelUnkey marked this pull request as ready for review June 16, 2025 20:52
@MichaelUnkey MichaelUnkey enabled auto-merge June 16, 2025 20:52
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e67662e and ff67655.

📒 Files selected for processing (6)
  • apps/dashboard/app/(app)/authorization/permissions/components/table/components/last-updated.tsx (1 hunks)
  • apps/dashboard/app/(app)/authorization/permissions/components/table/permissions-list.tsx (1 hunks)
  • apps/dashboard/app/(app)/settings/root-keys-v2/navigation.tsx (1 hunks)
  • apps/dashboard/components/dashboard/root-key-table/index.tsx (1 hunks)
  • apps/engineering/app/layout.tsx (1 hunks)
  • internal/ui/src/index.ts (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (25)
  • GitHub Check: Test Go API Local / Test (Shard 5/8)
  • GitHub Check: Build / Build
  • GitHub Check: Test Go API Local / Test (Shard 7/8)
  • GitHub Check: Test Go API Local / Test (Shard 1/8)
  • GitHub Check: Test Go API Local / Test (Shard 3/8)
  • GitHub Check: Test Go API Local / Test (Shard 8/8)
  • GitHub Check: Test Go API Local / Test (Shard 4/8)
  • GitHub Check: Test Go API Local / Test (Shard 6/8)
  • GitHub Check: Test Go API Local / Test (Shard 2/8)
  • GitHub Check: Test API / API Test Local
  • GitHub Check: Test Packages / Test ./packages/cache
  • GitHub Check: Test Packages / Test ./apps/dashboard
  • GitHub Check: Test Packages / Test ./internal/keys
  • GitHub Check: Test Packages / Test ./packages/nextjs
  • GitHub Check: Test Packages / Test ./packages/rbac
  • GitHub Check: Test Packages / Test ./internal/clickhouse
  • GitHub Check: Test Packages / Test ./internal/encryption
  • GitHub Check: Test Packages / Test ./internal/resend
  • GitHub Check: Test Packages / Test ./internal/id
  • GitHub Check: Test Packages / Test ./internal/hash
  • GitHub Check: Test Packages / Test ./packages/api
  • GitHub Check: Test Packages / Test ./packages/hono
  • GitHub Check: Test Packages / Test ./internal/billing
  • GitHub Check: autofix
  • GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (4)
apps/dashboard/app/(app)/settings/root-keys-v2/navigation.tsx (1)

5-5: ```shell
#!/bin/bash

Locate the @unkey/ui package in the monorepo and check for CopyButton export

1. Find the package.json that declares @unkey/ui

pkg_json=$(rg -l '"name"\s*:\s*"@unkey/ui"' -t json)

if [[ -n "$pkg_json" ]]; then
pkg_dir=$(dirname "$pkg_json")
echo "Found @unkey/ui at: $pkg_dir"

2. Search for CopyButton exports in that package

echo "Searching for CopyButton exports in @unkey/ui..."
rg -n "export .*CopyButton" "$pkg_dir" || echo "No direct export of CopyButton found"
else
echo "@unkey/ui package not found in this repository."
fi


</details>
<details>
<summary>apps/dashboard/app/(app)/authorization/permissions/components/table/components/last-updated.tsx (1)</summary>

`3-3`: **Import consolidation looks good**

Switching both `Badge` and `TimestampInfo` to come from `@unkey/ui` keeps the file consistent with the new UI-layer refactor.

</details>
<details>
<summary>apps/dashboard/components/dashboard/root-key-table/index.tsx (1)</summary>

`22-22`: **Consistent UI import – good move**

Migrating `Badge` to the central `@unkey/ui` source aligns with the refactor and reduces local component drift.

</details>
<details>
<summary>internal/ui/src/index.ts (1)</summary>

`23-23`: **Add badge to public exports.**
The `badge` component is now exposed through the UI barrel. Verify that the path `./components/badge` correctly points to the component file and consider aligning export ordering for consistency.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ff67655 and 8f930f5.

📒 Files selected for processing (1)
  • apps/dashboard/app/(app)/authorization/permissions/components/table/permissions-list.tsx (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (7)
  • GitHub Check: Build / Build
  • GitHub Check: Test Go API Local / Test (Shard 2/8)
  • GitHub Check: Test API / API Test Local
  • GitHub Check: Test Go API Local / Test (Shard 4/8)
  • GitHub Check: Test Go API Local / Test (Shard 5/8)
  • GitHub Check: Test Go API Local / Test (Shard 1/8)
  • GitHub Check: Test Go API Local / Test (Shard 3/8)

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6b83ea1 and 7dd0671.

📒 Files selected for processing (1)
  • apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/last-used-cell.tsx (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (17)
  • GitHub Check: Test API / API Test Local
  • GitHub Check: Build / Build
  • GitHub Check: Test Packages / Test ./packages/rbac
  • GitHub Check: Test Packages / Test ./internal/clickhouse
  • GitHub Check: Test Packages / Test ./packages/nextjs
  • GitHub Check: Test Packages / Test ./internal/encryption
  • GitHub Check: Test Packages / Test ./internal/resend
  • GitHub Check: Test Packages / Test ./packages/hono
  • GitHub Check: Test Packages / Test ./internal/hash
  • GitHub Check: Test Packages / Test ./apps/dashboard
  • GitHub Check: Test Packages / Test ./packages/cache
  • GitHub Check: Test Packages / Test ./internal/keys
  • GitHub Check: Test Packages / Test ./internal/billing
  • GitHub Check: Test Packages / Test ./packages/api
  • GitHub Check: Test Packages / Test ./internal/id
  • GitHub Check: autofix
  • GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (2)
apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/last-used-cell.tsx (2)

4-4: Confirm ref forwarding support for external Badge component

The Badge now comes from @unkey/ui and you’re passing a ref (badgeRef) plus mouse event handlers. Ensure that the external Badge forwards refs and correctly applies event handlers. If not, wrap it in a forwardRef or update usage.


4-4: Consistent external UI import

This change aligns with the cross-repo refactor to centralize UI components under @unkey/ui.

@MichaelUnkey MichaelUnkey added this pull request to the merge queue Jun 20, 2025
Merged via the queue into main with commit 031c765 Jun 20, 2025
33 of 37 checks passed
@MichaelUnkey MichaelUnkey deleted the move-badge-to-ui branch June 20, 2025 13:10
@coderabbitai coderabbitai bot mentioned this pull request Jul 1, 2025
18 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants