Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
|
📝 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
Suggested labels
Suggested reviewers
|
|
Thank you for following the naming conventions for pull request titles! 🙏 |
There was a problem hiding this comment.
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 aboveNothing 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 thecnhelper source
Badge/Buttonnow come from@unkey/ui, which is great.
However this file still importscnfrom 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 literalDEFAULTis unconventionalCVA 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 casingIf 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, addonClickhandlers or render badges as<button>for proper semantics and keyboard accessibility.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 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: ConsolidatedBadgeimport
ImportingBadgefrom@unkey/uialigns with the new centralized UI library and removes the deprecated local path.apps/dashboard/app/(app)/settings/team/status-badge.tsx (1)
3-3: CentralizedBadgeimport
Switching to@unkey/uifor theBadgecomponent 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: VerifyBadgeref forwarding
Since this component passes areftoBadge, ensure@unkey/ui’sBadgeimplementation usesReact.forwardRef(or equivalent) to support refs.apps/dashboard/app/(app)/logs/components/table/logs-table.tsx (1)
8-8: Import consolidation for UI components
CombiningBadge,Button,Empty, andTimestampInfointo a single import from@unkey/uisimplifies and standardizes component sourcing.apps/dashboard/app/(app)/authorization/permissions/page.tsx (1)
7-7: Import consolidation acknowledgedImporting
Badge,Button(and nowCopyButton) from@unkey/uikeeps the component surface consistent. No concerns.apps/dashboard/app/(app)/settings/workspace-navbar.tsx (1)
6-6: Good move to a single UI sourceUnifying
Badge,Button, andCopyButtonunder@unkey/uiimproves portability.apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/log-details/components/log-footer.tsx (1)
7-7: ConsolidatedBadgeandTimestampInfoimports
ImportingBadgeandTimestampInfofrom the centralized@unkey/uipackage 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/uiforBadge,Button,Empty, andTimestampInfoensures 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: CentralizedBadgeandTimestampInfosources
Importing bothBadgeandTimestampInfofrom@unkey/uiconsolidates UI component sourcing per current architecture.apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/overrides-table.tsx (1)
6-6: UnifiedBadgeandEmptyimports
ImportingBadgeandEmptyfrom the shared@unkey/uilibrary 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/cssimport for the engineering layout. Verify that the dashboard app (and any other consuming apps) also import@unkey/ui/cssin 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/appLength 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/appLength of output: 102
Global styles import verified
Theimport "@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
TheBadgeandButtoncomponents 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
MovingBadgeandTimestampInfoto@unkey/uicentralizes 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 theflexlayout andtext-warning-5class toNavigableDialogBodyaligns 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 ofBadge,Button,Empty, andTimestampInfofrom@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 bothBadgeandButtonfrom@unkey/uicleans up local dependencies and matches the new UI package structure.internal/ui/src/index.ts (1)
21-21: Expose Badge component in public API
Addingexport * 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 forBadgefrom@unkey/uialigns 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
ImportingBadge(andButton,CopyButton) from@unkey/uiis consistent. Please confirm that the Dashboard app’s root layout includes the global CSS/styles for@unkey/uiso 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/uisimplifies 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
UpdatingBadge,Button, andLoadingimports to come from@unkey/uicentralizes component sourcing without altering logic.internal/ui/src/components/badge.tsx (1)
6-6: Double-checkcnimport path
cnis imported from"../lib/utils". In the UI package we usually keep helpers insidesrc/utils(notlib).
Please verify thatinternal/ui/src/lib/utils.tsreally exists. If it lives undersrc/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 goodSwitching to the shared
@unkey/uiimport 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 kitImporting
Badgefrom@unkey/uiis 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 oncesuccessvariant is fixedAfter you adjust the
successpalette inbadge.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 inBadgefrom the shared UI package and uses the existingRenderComponentWithSnippethelper 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.
apps/dashboard/app/(app)/logs/components/table/log-details/components/log-header.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 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/bashLocate 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 -->
apps/dashboard/app/(app)/authorization/permissions/components/table/permissions-list.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 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)
apps/dashboard/app/(app)/authorization/permissions/components/table/permissions-list.tsx
Outdated
Show resolved
Hide resolved
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 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 componentThe
Badgenow comes from@unkey/uiand you’re passing aref(badgeRef) plus mouse event handlers. Ensure that the externalBadgeforwards refs and correctly applies event handlers. If not, wrap it in aforwardRefor update usage.
4-4: Consistent external UI importThis change aligns with the cross-repo refactor to centralize UI components under
@unkey/ui.
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
How should this be tested?
Checklist
Required
pnpm buildpnpm fmtconsole.logsgit pull origin mainAppreciated
Summary by CodeRabbit
New Features
Style
Refactor
Documentation