feat: install button with dropdown for npm, pnpm, yarn and bun #10504
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
mathisdev7
changed the title
| onClick={() => setShowDropdown(!showDropdown)} | ||
| type="button" | ||
| > | ||
| <span className="font-semibold text-blurple">{'>'}</span> npm install discord.js |
There was a problem hiding this comment.
This makes it look really weird, npm is always shown but dropdown select makes it copy a diff package manager
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #10504 +/- ##
==========================================
- Coverage 35.48% 35.37% -0.11%
==========================================
Files 228 228
Lines 14308 14351 +43
Branches 1254 1254
==========================================
Hits 5077 5077
- Misses 9187 9230 +43
Partials 44 44
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
|
Reviewed the PR, can you check if it is good please, thanks. |
There was a problem hiding this comment.
From a usability standpoint, doesn't make much sense that for npm, I have to open the select and then select npm (which was already selected) for it to copy the command. Perhaps we should rethink the way this works.
We could keep the button as it was before to copy the command, and have a menu to the side which selects the package manager?
| const getCommand = (manager: string) => { | ||
| switch (manager) { | ||
| case 'pnpm': | ||
| return 'pnpm install discord.js'; | ||
| case 'yarn': | ||
| return 'yarn add discord.js'; | ||
| case 'bun': | ||
| return 'bun add discord.js'; | ||
| default: | ||
| return 'npm install discord.js'; | ||
| } | ||
| }; |
There was a problem hiding this comment.
You could just make an array of { packageManager: string; command: string } or something like that, and then loop over that to generate the list items
|
|
||
| {showDropdown && ( | ||
| <div className="absolute left-0 mt-2 w-full rounded-md border border-neutral-300 bg-white shadow-lg dark:border-neutral-700 dark:bg-neutral-800"> | ||
| <ul className="py-1"> |
There was a problem hiding this comment.
Maybe use Menu from react-aria-components instead (or another one from that lib, if you believe it fits the purpose better)
This PR modifies a documentation component to enhance the install button functionality. The dropdown now includes
npm,pnpm,yarn, andbun, allowing users to easily copy the installation command for their preferred package manager. This update improves the flexibility and user experience for developers consulting the documentation.Status and versioning classification: