chore: select added to ui and eng docs#3214
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
📝 WalkthroughWalkthroughThis set of changes primarily migrates the import source of Select UI components ( Changes
Sequence Diagram(s)sequenceDiagram
participant AppComponent as Dashboard/App Component
participant UnkeyUI as @unkey/ui (Select)
AppComponent->>UnkeyUI: Import Select, SelectContent, etc.
AppComponent->>UnkeyUI: Render Select component in UI
Note right of AppComponent: All select dropdowns now use external UI package
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (7)
✨ 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! 🙏 |
MichaelUnkey
requested review from
chronark,
mcstepp,
ogzhanolguncu and
perkinsjr
as code owners
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/credits-setup.tsx (1)
3-3: Import migration to@unkey/uiis correct.
Switching to the externalSelectexports from@unkey/uialigns with the new UI library structure and should replace the local component. Ensure that the local@/components/ui/selectimplementation is removed if it’s no longer used.apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/add-permission-for-api.tsx (1)
5-5: Inconsistent UI import sources—consider unifying.
You’ve migratedSelect*to@unkey/uibut still importDialogfrom the local UI path (@/components/ui/dialog). For consistency and ease of maintenance, consider migrating all shared primitives (Dialog, FormInput, etc.) to@unkey/ui.apps/dashboard/components/dashboard/feedback-component.tsx (1)
16-22: Import path is inconsistent with other filesWhile other files in this PR use
@unkey/uifor importing Select components, this file uses a deeper path@unkey/ui/src/components/select. Consider standardizing to use the same import path across all files.-import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@unkey/ui/src/components/select"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@unkey/ui";apps/engineering/content/design/components/select.mdx (1)
1-78: Well-structured Select component documentationThe documentation is comprehensive, covering features, variants, usage examples, props, accessibility, and best practices for the Select component. The content is well-organized with clear sections and includes all necessary information for developers to effectively implement and use the component.
One minor formatting suggestion in the Variants section (lines 21-27): Consider adding a blank line after the colon in line 23 before starting the list items for consistent formatting with other sections of the document.
🧰 Tools
🪛 LanguageTool
[uncategorized] ~23-~23: Loose punctuation mark.
Context: ...ent supports four variants: -default: Standard select with gray styling - `su...(UNLIKELY_OPENING_PUNCTUATION)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (16)
apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/credits-setup.tsx(1 hunks)apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-remaining.tsx(1 hunks)apps/dashboard/app/(app)/apis/[apiId]/select.tsx(1 hunks)apps/dashboard/app/(app)/ratelimits/[namespaceId]/_components/identifier-dialog.tsx(1 hunks)apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/add-permission-for-api.tsx(1 hunks)apps/dashboard/app/(app)/settings/team/client.tsx(1 hunks)apps/dashboard/app/(app)/settings/team/invite.tsx(1 hunks)apps/dashboard/app/(app)/settings/team/role-switcher.tsx(1 hunks)apps/dashboard/app/(app)/settings/vercel/client.tsx(1 hunks)apps/dashboard/app/integrations/vercel/callback/client.tsx(1 hunks)apps/dashboard/components/dashboard/feedback-component.tsx(1 hunks)apps/engineering/content/design/components/select.example.tsx(1 hunks)apps/engineering/content/design/components/select.mdx(1 hunks)internal/ui/package.json(1 hunks)internal/ui/src/components/select.tsx(1 hunks)internal/ui/src/index.ts(1 hunks)
🧰 Additional context used
🪛 LanguageTool
apps/engineering/content/design/components/select.mdx
[uncategorized] ~23-~23: Loose punctuation mark.
Context: ...ent supports four variants: - default: Standard select with gray styling - `su...
(UNLIKELY_OPENING_PUNCTUATION)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: Test Go API Local / Test (Shard 2/8)
- GitHub Check: Test Go API Local / Test (Shard 1/8)
- GitHub Check: Test Go API Local / Test (Shard 5/8)
- GitHub Check: Test Go API Local / Test (Shard 4/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 ./internal/clickhouse
🔇 Additional comments (15)
internal/ui/package.json (1)
19-19: Verify new dependency version and peerDependency strategy.
Adding@radix-ui/react-select@^2.0.0is necessary for the new Select component, but please confirm that this version aligns with the rest of your Radix UI dependencies and consider whether@radix-ui/react-selectshould live inpeerDependenciesinstead ofdependenciesto avoid duplicate installations in consuming apps.internal/ui/src/components/select.tsx (1)
7-7: Confirm relative import path forcn.
The change from an absolute to a relative import ("../lib/utils") looks intentional, but please verify thatcnis correctly exported fromsrc/lib/utils.tsand that there are no stale references to the old path.apps/dashboard/app/(app)/apis/[apiId]/select.tsx (2)
3-3: Import update for Select components looks good.
Aligning all Select imports with@unkey/uiensures consistency across the codebase.
38-39: Verify usage ofdefaultValueon<SelectValue>.
Radix’s<Select.Value>typically accepts aplaceholderprop rather thandefaultValue. Please confirm thatdefaultValue={selected}renders as expected; otherwise, consider changing to:- <SelectValue defaultValue={selected} /> + <SelectValue placeholder={interval[selected]} />apps/dashboard/app/(app)/ratelimits/[namespaceId]/_components/identifier-dialog.tsx (1)
9-9: LGTM: Clean import from the UI packageThis import correctly uses the standardized path from
@unkey/ui, which helps maintain consistency across the codebase.apps/dashboard/app/(app)/settings/vercel/client.tsx (1)
25-25: LGTM: Clean import from the UI packageThis import correctly uses the standardized path from
@unkey/ui, which helps maintain consistency across the codebase.apps/dashboard/app/(app)/settings/team/invite.tsx (1)
17-17: LGTM: Clean import from the UI packageThis import correctly uses the standardized path from
@unkey/ui, which helps maintain consistency across the codebase.apps/dashboard/app/integrations/vercel/callback/client.tsx (1)
14-14: Import changed from local to package component.The import source for Select components has been successfully migrated from a local path to the
@unkey/uipackage, aligning with the standardization efforts across the codebase.apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-remaining.tsx (1)
28-28: Import migrated to use shared UI package.The Select component imports have been successfully updated to use the
@unkey/uipackage instead of local components, maintaining consistency with other files in the codebase.apps/dashboard/app/(app)/settings/team/client.tsx (1)
5-13: Import reordering and source migration.The import changes look good:
- The
trpcimport was moved earlier in the import list- The Select component imports now use the
@unkey/uipackageThis maintains the functionality while improving standardization across the codebase.
apps/dashboard/app/(app)/settings/team/role-switcher.tsx (1)
4-7: Import reorganization and standardization.Good reorganization of imports:
- Individual imports for
toast, types, andtrpcare now properly separated- Select component imports now use the standardized
@unkey/uipackageThese changes improve code organization while maintaining the same functionality.
Also applies to: 14-14
internal/ui/src/index.ts (1)
5-9: Export order reorganized with new components addedThe export order has been updated and new components (
selectandsettings-card) have been added to the UI package exports. This aligns with the PR objectives of adding the Select component to UI and engineering docs.Also applies to: 12-12
apps/engineering/content/design/components/select.example.tsx (3)
1-16: Proper imports and setup for Select examplesThe client directive and imports are correctly set up, importing the Select component and related subcomponents from the
@unkey/uipackage as intended in this PR. The appropriate utility components and icons are also imported.
17-92: Comprehensive SelectExample component with various configurationsThe SelectExample component effectively demonstrates four key usage patterns:
- Basic Select with controlled state
- Select with left icon
- Select with grouped options
- Disabled Select
This covers most of the functionality described in the documentation and provides clear usage examples.
94-134: Well-implemented variant examples with corresponding iconsThe SelectExampleVariants component properly demonstrates the three variant states (success, warning, error) with appropriate icons that reinforce the semantic meaning of each state. The layout provides a good side-by-side comparison of the different variants.
|
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
New Features
Documentation
Chores