chore: card component with docs moved to ui#3318
Conversation
MichaelUnkey
requested review from
chronark,
mcstepp,
ogzhanolguncu and
perkinsjr
as code owners
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 2 Skipped Deployments
|
📝 Walkthrough## Walkthrough
The changes introduce a new set of Card UI components in the internal UI library, document their usage, and refactor multiple dashboard files to import Card-related components from the new `@unkey/ui` package instead of local paths. No functional or behavioral changes were made to the affected components.
## Changes
| Files/Groups | Change Summary |
|-----------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------|
| `internal/ui/src/components/card.tsx`, `internal/ui/src/index.ts` | Added new Card UI components and exported them from the UI library. |
| `apps/engineering/content/design/components/card.example.tsx`, `apps/engineering/content/design/components/card.mdx` | Added example usage and documentation for the Card components. |
| `apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/log-details/components/...`,<br>`apps/dashboard/app/(app)/audit/components/table/log-details/components/log-section.tsx`,<br>`apps/dashboard/app/(app)/logs/components/table/log-details/components/...`,<br>`apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/log-details/components/...`,<br>`apps/dashboard/app/(app)/settings/root-keys/[keyId]/page-layout.tsx`,<br>`apps/dashboard/app/(app)/settings/root-keys/[keyId]/page.tsx`,<br>`apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/legacy.tsx`,<br>`apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/permission-manager-card.tsx`,<br>`apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx`,<br>`apps/dashboard/app/(app)/settings/root-keys/new/client.tsx`,<br>`apps/dashboard/app/new/keys.tsx`,<br>`apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/components/rbac/permissions.tsx` | Refactored imports to use Card and related components from `@unkey/ui` instead of local paths; consolidated and reordered imports. |
## Sequence Diagram(s)
_Not included as the changes are limited to import refactoring, component introduction, and documentation without new control flow or feature logic._
## Possibly related PRs
- [unkeyed/unkey#2737](https://github.com/unkeyed/unkey/pull/2737): The main PR consolidates UI component imports by switching Card-related components to be imported from the `@unkey/ui` package, which aligns with the retrieved PR’s introduction of using `@unkey/ui` components (specifically Button) in the dashboard, indicating a shared effort to migrate UI components to the `@unkey/ui` library.
## Suggested labels
`🕹️ oss.gg`
## Suggested reviewers
- perkinsjr
- chronark
- mcstepp
- ogzhanolguncu📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
⏰ Context from checks skipped due to timeout of 90000ms (14)
🔇 Additional comments (2)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Thank you for following the naming conventions for pull request titles! 🙏 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (4)
apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/log-details/components/log-section.tsx (1)
2-2: Consolidated imports from@unkey/ui
Centralized theButton,Card, andCardContentimports—good for uniformity across the app.apps/dashboard/app/(app)/audit/components/table/log-details/components/log-section.tsx (1)
2-2: Consolidated imports from@unkey/ui
Centralized theButton,Card, andCardContentimports—good for uniformity across the app.apps/dashboard/app/(app)/logs/components/table/log-details/components/log-meta.tsx (1)
2-2: Consolidated imports from@unkey/ui
Centralized theButton,Card, andCardContentimports—good for uniformity across the app.apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/log-details/components/log-meta.tsx (1)
2-2: Consolidated imports from@unkey/ui
Centralized theButton,Card, andCardContentimports—good for uniformity across the app.
🧹 Nitpick comments (4)
apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/log-details/components/log-outcome-distribution-section.tsx (1)
26-29: Minor copy typo: double space
toast.success("Outcomes copied to clipboard");contains two consecutive spaces after “Outcomes”.- toast.success("Outcomes copied to clipboard"); + toast.success("Outcomes copied to clipboard");apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/log-details/components/roles-permissions.tsx (1)
61-70: Copy-to-clipboard helper is duplicated across components
The same logic appears in at least three files in this PR. Consider extracting a smallcopyToClipboard(text, successMsg, errorMsg)utility to avoid repetition and keep toast handling consistent.internal/ui/src/index.ts (1)
1-3: Nit: keep exports alphabetically sortedFor long barrel files an alphabetical order eases scanning & merge-conflict resolution.
Consider moving the newcardexport accordingly.export * from "./components/button"; export * from "./components/card"; export * from "./components/checkbox";apps/engineering/content/design/components/card.mdx (1)
128-136: Minor grammar polish
- Apply consistent spacing using the default paddingis missing “to”.- - Apply consistent spacing using the default padding + - Apply consistent spacing using the default paddingAlso, the phrase “Card with header, content, and footer sections” is duplicated a few lines above—consider removing the repetition for brevity.
🧰 Tools
🪛 LanguageTool
[grammar] ~134-~134: Did you mean “to Apply”?
Context: ...omponents based on your content needs - Apply consistent spacing using the default pa...(MISSING_TO_BEFORE_A_VERB)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (20)
apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/log-details/components/log-outcome-distribution-section.tsx(1 hunks)apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/log-details/components/log-section.tsx(1 hunks)apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/log-details/components/roles-permissions.tsx(1 hunks)apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/components/rbac/permissions.tsx(1 hunks)apps/dashboard/app/(app)/audit/components/table/log-details/components/log-section.tsx(1 hunks)apps/dashboard/app/(app)/logs/components/table/log-details/components/log-meta.tsx(1 hunks)apps/dashboard/app/(app)/logs/components/table/log-details/components/log-section.tsx(1 hunks)apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/log-details/components/log-meta.tsx(1 hunks)apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/log-details/components/log-section.tsx(1 hunks)apps/dashboard/app/(app)/settings/root-keys/[keyId]/page-layout.tsx(1 hunks)apps/dashboard/app/(app)/settings/root-keys/[keyId]/page.tsx(1 hunks)apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/legacy.tsx(1 hunks)apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/permission-manager-card.tsx(1 hunks)apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx(1 hunks)apps/dashboard/app/(app)/settings/root-keys/new/client.tsx(1 hunks)apps/dashboard/app/new/keys.tsx(1 hunks)apps/engineering/content/design/components/card.example.tsx(1 hunks)apps/engineering/content/design/components/card.mdx(1 hunks)internal/ui/src/components/card.tsx(1 hunks)internal/ui/src/index.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
internal/ui/src/components/card.tsx (1)
apps/dashboard/lib/utils.ts (1)
cn(5-7)
🪛 LanguageTool
apps/engineering/content/design/components/card.mdx
[duplication] ~41-~41: Possible typo: you repeated a word.
Context: ...oter. ### Complete Card Card with header, content, and footer sectio...
(ENGLISH_WORD_REPEAT_RULE)
[grammar] ~134-~134: Did you mean “to Apply”?
Context: ...omponents based on your content needs - Apply consistent spacing using the default pa...
(MISSING_TO_BEFORE_A_VERB)
⏰ Context from checks skipped due to timeout of 90000ms (18)
- GitHub Check: Test Go API Local / Test (Shard 4/8)
- GitHub Check: Test Go API Local / Test (Shard 7/8)
- GitHub Check: Test Go API Local / Test (Shard 8/8)
- GitHub Check: Build / Build
- GitHub Check: Test Go API Local / Test (Shard 5/8)
- GitHub Check: Test Go API Local / Test (Shard 6/8)
- GitHub Check: Test Go API Local / Test (Shard 2/8)
- GitHub Check: Test Go API Local / Test (Shard 3/8)
- GitHub Check: Test Go API Local / Test (Shard 1/8)
- GitHub Check: Test API / API Test Local
- GitHub Check: Test Packages / Test ./packages/nextjs
- GitHub Check: Test Packages / Test ./internal/clickhouse
- GitHub Check: Test Packages / Test ./packages/rbac
- GitHub Check: Test Packages / Test ./packages/hono
- GitHub Check: Test Packages / Test ./packages/cache
- GitHub Check: Test Packages / Test ./internal/resend
- GitHub Check: autofix
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (15)
apps/dashboard/app/(app)/settings/root-keys/[keyId]/page-layout.tsx (1)
4-4: Consolidate card component imports
ImportingCard,CardContent,CardHeader, andCardTitlefrom@unkey/uicorrectly centralizes UI components for consistency and maintainability. Ensure that the@unkey/uipackage is declared in the project’s dependencies (e.g., inpackage.json) and that these exports match the library’s API.apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/log-details/components/log-section.tsx (2)
4-4: Imports look good
Switching to the central@unkey/uisource keeps the component palette consistent across the app.
48-55: Confirm prop-compatibility for the new Button
shape="square"andvariant="outline"must still be supported by theButtonexported from@unkey/ui; otherwise the control may silently render with unexpected styling.apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/log-details/components/log-outcome-distribution-section.tsx (1)
4-4: Imports consolidated correctly
Good to see the local card implementation replaced with the shared library.apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/log-details/components/roles-permissions.tsx (1)
3-3: Centralising UI imports – looks good
The file now relies solely on@unkey/ui; ensures one canonical source for the Card & Button primitives.apps/dashboard/app/(app)/settings/root-keys/[keyId]/page.tsx (1)
7-7: Shared UI component import acknowledged
ImportingButton,Card*from@unkey/uikeeps the page consistent with the new design-system – no issues spotted here.apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/components/rbac/permissions.tsx (1)
3-3: UI import update OK
All required primitives are now pulled from@unkey/ui; compilation should stay green.apps/dashboard/app/(app)/logs/components/table/log-details/components/log-section.tsx (1)
2-2:Details
✅ Verification successful
Ensure new
Buttonstill accepts theshapepropThe
Buttoncoming from@unkey/uimust expose theshape="square"prop that this component relies on.
Ifshapeis no longer supported (or renamed), this will fail at compile-time.
🏁 Script executed:
#!/bin/bash # Does the internal Button prop interface still include `shape`? rg --glob '*button*.tsx' -A3 -n $'shape' internal/ui/src/componentsLength of output: 299
Button
shapeprop is still supported
Verified that theButtoncomponent in@unkey/ui(seeinternal/ui/src/components/button.tsxaround line 35) still exposes ashapeprop with asquareoption. No further action required.apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx (1)
6-6: Import consolidation looks goodAll newly-imported symbols (
Button,Card*,FormInput) are used below and replace the previous local-path imports.
No further action required.apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/permission-manager-card.tsx (1)
11-11: LGTM – centralised UI importThe switch to
@unkey/uikeeps the file self-contained and removes local coupling.
No issues observed.apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/legacy.tsx (1)
4-9: Import grouping/readability improvedRe-ordering + consolidation into
@unkey/uiis clear and idiomatic.
Nothing further.internal/ui/src/components/card.tsx (1)
1-4: Verify the utils import path
cnis imported via"../lib/utils".
Insideinternal/ui, that resolves tointernal/ui/src/lib/utils.ts, yet the only known implementation lives underapps/dashboard/lib/utils.ts. Please confirm a duplicate util exists ininternal/ui; otherwise builds will fail.apps/dashboard/app/new/keys.tsx (1)
5-18: Import consolidation looks goodMoving all UI primitives to
@unkey/uisimplifies tree-shaking and keeps local paths clean. No further action needed here.apps/dashboard/app/(app)/settings/root-keys/new/client.tsx (1)
18-28: Unified UI import 👍Consistently sourcing cards, inputs, and buttons from
@unkey/uiimproves discoverability and prevents multiple bundle instances. Good refactor.apps/engineering/content/design/components/card.example.tsx (1)
1-12: Example import alignmentAll examples correctly import card primitives from the new package. Ensure the docs site’s bundler includes
@unkey/uipeer-deps so the live examples don’t break at runtime.
2 participants
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