Added Registry Directory#1664
Open
kemboi22 wants to merge 15 commits intounovue:devfrom
Open
Conversation
- Add Directory nav item to site config - Implement directory registry system - Add registry components and documentation
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
📝 WalkthroughWalkthroughAdds a directory registry feature: JSON registry data, a DirectoryRegistry type and list, a RegistryList UI with search and actions, an AddRegistryModal for registry commands, updated site navigation, and a documentation page. Changes
Sequence Diagram(s)sequenceDiagram
participant User as User
participant UI as RegistryList (UI)
participant Data as directoryRegistryList
participant Modal as AddRegistryModal
User->>UI: open page / search / select registry
UI->>Data: read registry entries (filter by query)
Data-->>UI: return filtered list
UI->>User: render list, actions (Add / View)
User->>UI: click "Add" on item
UI->>Modal: open with selected registry
Modal-->>User: show details and optional CLI command
User->>Modal: close modal
Modal-->>UI: emit update:open (closed)
Estimated Code Review Effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In `@apps/v4/components/registry/RegistryList.vue`:
- Around line 61-68: The Clear button is non-functional and the closing tag
casing is wrong: add a click handler on the InputGroupButton (e.g.
`@click`="clearSearch" or `@click`="searchQuery = ''") that resets the component's
search model (or calls an existing method like clearSearch) so the X button
actually clears the query, and correct the mismatched closing tag from
</inputgroupaddon> to </InputGroupAddon>; ensure the clearSearch implementation
updates the same reactive variable used by the input v-model or emits the proper
event.
In `@apps/v4/content/docs/directory.md`:
- Around line 6-10: The CLI example in the docs contains a trailing period that
will be copied into the command and cause failures; update the example string
"npx shadcn-vue add @<registry>/<component>." to remove the trailing period so
it reads "npx shadcn-vue add @<registry>/<component>" in the docs (refer to the
example command line in apps/v4/content/docs/directory.md where the snippet
contains @<registry>/<component>).
In `@apps/v4/registry/directory.json`:
- Around line 3-18: Fix the user-facing typos in the registry JSON: rename the
"Insipira UI" entry to "Inspira UI" so it matches the description text, remove
the stray space before the comma in that description ("TailwindCSS , motion-v" →
"TailwindCSS, motion-v"), and add the missing space in the "Mapcn" description
("Beautiful maps,made simple." → "Beautiful maps, made simple."); locate and
update the entries by their "name" fields ("Insipira UI"/"Inspira UI" and
"Mapcn") in the JSON array.
🧹 Nitpick comments (5)
apps/v4/registry/new-york-v4/ui/carousel/CarouselContent.vue (1)
11-12: Document why the@ts-expect-erroris required (and fix the typo).This suppression can hide real type issues unless the expected error is documented and tracked.
✏️ Suggested comment tweak
-// `@ts-expect-error` Skip this when building since its a neede var +// `@ts-expect-error`: carouselRef is required for template refs; fix useCarousel typing when possible.Please confirm by running your usual typecheck to ensure the error is still expected.
apps/v4/components/registry/RegistryList.vue (4)
31-35: Consider case-insensitive search for better UX.The current filter uses
includes()which is case-sensitive. Users searching for "map" won't find "Mapcn".♻️ Suggested improvement
const registryList = computed(() => { + const query = searchQuery.value.toLowerCase() return directoryRegistryList.filter((r) => { - return r.name.includes(searchQuery.value) || r.description.includes(searchQuery.value) + return r.name.toLowerCase().includes(query) || r.description.toLowerCase().includes(query) }) })
56-59: Clear button visibility should be conditional on search input.The
data-disabledattribute is hardcoded tofalse. Consider binding it to whethersearchQueryis empty so the clear button only appears when there's text to clear.♻️ Suggested improvement
<InputGroupAddon align="inline-end" - :data-disabled="false" + :data-disabled="!searchQuery" class-name="data-[disabled=true]:hidden" >
51-54: Counter shows total count instead of filtered results.Displaying
directoryRegistryList.lengthalways shows the total count. Users might expect to see how many results match their search.♻️ Suggested improvement
- {{ directoryRegistryList.length }} - {{ directoryRegistryList.length === 1 ? "Registry" : "Registries" }} + {{ registryList.length }} + {{ registryList.length === 1 ? "Registry" : "Registries" }}
117-117: Modal close handler ignores emitted value.The
@update:openhandler callstoggleAddRegistryModal(null)regardless of the emitted value. This works but doesn't follow the standard v-model pattern. If the modal emitsfalsewhen closed, you're toggling instead of setting directly.♻️ Suggested improvement for clearer intent
- <AddRegistryModal v-if="selectedRegistry" :open="addRegistryOpen" :registry="selectedRegistry" `@update`:open="toggleAddRegistryModal(null)" /> + <AddRegistryModal + v-if="selectedRegistry" + v-model:open="addRegistryOpen" + :registry="selectedRegistry" + `@update`:open="(val) => { if (!val) selectedRegistry = null }" + />Or simplify the toggle function to accept a boolean:
-function toggleAddRegistryModal(registry: DirectoryRegistry | null) { - selectedRegistry.value = registry - addRegistryOpen.value = !addRegistryOpen.value -} +function openAddRegistryModal(registry: DirectoryRegistry) { + selectedRegistry.value = registry + addRegistryOpen.value = true +} + +function closeAddRegistryModal() { + addRegistryOpen.value = false + selectedRegistry.value = null +}
Comment on lines
+61
to
+68
| <InputGroupButton | ||
| aria-label="Clear" | ||
| title="Clear" | ||
| size="icon-xs" | ||
| > | ||
| <X /> | ||
| </InputGroupButton> | ||
| </inputgroupaddon> |
There was a problem hiding this comment.
Clear button is non-functional and has inconsistent tag casing.
Two issues here:
- The clear button is missing a
@clickhandler to actually clear the search query. - Line 68:
</inputgroupaddon>uses lowercase while the opening tag uses PascalCase.
🐛 Proposed fix
<InputGroupButton
aria-label="Clear"
title="Clear"
size="icon-xs"
+ `@click`="searchQuery = ''"
>
<X />
</InputGroupButton>
- </inputgroupaddon>
+ </InputGroupAddon>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <InputGroupButton | |
| aria-label="Clear" | |
| title="Clear" | |
| size="icon-xs" | |
| > | |
| <X /> | |
| </InputGroupButton> | |
| </inputgroupaddon> | |
| <InputGroupButton | |
| aria-label="Clear" | |
| title="Clear" | |
| size="icon-xs" | |
| `@click`="searchQuery = ''" | |
| > | |
| <X /> | |
| </InputGroupButton> | |
| </InputGroupAddon> |
🤖 Prompt for AI Agents
In `@apps/v4/components/registry/RegistryList.vue` around lines 61 - 68, The Clear
button is non-functional and the closing tag casing is wrong: add a click
handler on the InputGroupButton (e.g. `@click`="clearSearch" or
`@click`="searchQuery = ''") that resets the component's search model (or calls an
existing method like clearSearch) so the X button actually clears the query, and
correct the mismatched closing tag from </inputgroupaddon> to
</InputGroupAddon>; ensure the clearSearch implementation updates the same
reactive variable used by the input v-model or emits the proper event.
Comment on lines
+6
to
+10
| These registries are built into the CLI with no additional configuration required. To add a component, run: | ||
|
|
||
| ```bash | ||
| npx shadcn-vue add @<registry>/<component>. | ||
| ``` |
There was a problem hiding this comment.
Remove the trailing period in the CLI example.
Copy/pasting the command as-is will include the period and fail.
🔧 Proposed fix
-npx shadcn-vue add @<registry>/<component>.
+npx shadcn-vue add @<registry>/<component>🤖 Prompt for AI Agents
In `@apps/v4/content/docs/directory.md` around lines 6 - 10, The CLI example in
the docs contains a trailing period that will be copied into the command and
cause failures; update the example string "npx shadcn-vue add
@<registry>/<component>." to remove the trailing period so it reads "npx
shadcn-vue add @<registry>/<component>" in the docs (refer to the example
command line in apps/v4/content/docs/directory.md where the snippet contains
@<registry>/<component>).
Comment on lines
+3
to
+18
| "name": "Insipira UI", | ||
| "description": "Inspira UI is a collection of reusable, animated components powered by TailwindCSS , motion-v , GSAP & threejs — crafted to help you ship faster and better.", | ||
| "link": "https://inspira-ui.com/docs/en", | ||
| "logo": "https://cdn.inspira-ui.com/logo-dark.svg" | ||
| }, | ||
| { | ||
| "name": "Stunning UI", | ||
| "description": "Create Stunning Websites That Stand Out", | ||
| "link": "https://www.stunningui.com/", | ||
| "logo": "https://robertshaw.id/assets/stunning-ui.svg" | ||
| }, | ||
|
|
||
| { | ||
| "name": "Mapcn", | ||
| "description": "Beautiful maps,made simple.", | ||
| "link": "https://mapcn-vue.geoql.in/", |
There was a problem hiding this comment.
Fix user-facing typos in registry data.
The name/description mismatch and missing space will show up in UI.
🔧 Proposed fix
- "name": "Insipira UI",
+ "name": "Inspira UI",
@@
- "description": "Beautiful maps,made simple.",
+ "description": "Beautiful maps, made simple.",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| "name": "Insipira UI", | |
| "description": "Inspira UI is a collection of reusable, animated components powered by TailwindCSS , motion-v , GSAP & threejs — crafted to help you ship faster and better.", | |
| "link": "https://inspira-ui.com/docs/en", | |
| "logo": "https://cdn.inspira-ui.com/logo-dark.svg" | |
| }, | |
| { | |
| "name": "Stunning UI", | |
| "description": "Create Stunning Websites That Stand Out", | |
| "link": "https://www.stunningui.com/", | |
| "logo": "https://robertshaw.id/assets/stunning-ui.svg" | |
| }, | |
| { | |
| "name": "Mapcn", | |
| "description": "Beautiful maps,made simple.", | |
| "link": "https://mapcn-vue.geoql.in/", | |
| "name": "Inspira UI", | |
| "description": "Inspira UI is a collection of reusable, animated components powered by TailwindCSS , motion-v , GSAP & threejs — crafted to help you ship faster and better.", | |
| "link": "https://inspira-ui.com/docs/en", | |
| "logo": "https://cdn.inspira-ui.com/logo-dark.svg" | |
| }, | |
| { | |
| "name": "Stunning UI", | |
| "description": "Create Stunning Websites That Stand Out", | |
| "link": "https://www.stunningui.com/", | |
| "logo": "https://robertshaw.id/assets/stunning-ui.svg" | |
| }, | |
| { | |
| "name": "Mapcn", | |
| "description": "Beautiful maps, made simple.", | |
| "link": "https://mapcn-vue.geoql.in/", |
🤖 Prompt for AI Agents
In `@apps/v4/registry/directory.json` around lines 3 - 18, Fix the user-facing
typos in the registry JSON: rename the "Insipira UI" entry to "Inspira UI" so it
matches the description text, remove the stray space before the comma in that
description ("TailwindCSS , motion-v" → "TailwindCSS, motion-v"), and add the
missing space in the "Mapcn" description ("Beautiful maps,made simple." →
"Beautiful maps, made simple."); locate and update the entries by their "name"
fields ("Insipira UI"/"Inspira UI" and "Mapcn") in the JSON array.
6 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
I have added directory to match https://ui.shadcn.com/docs/directory
📖 Documentation (updates to the documentation, readme or JSdoc annotations)
🐞 Bug fix (a non-breaking change that fixes an issue)
👌 Enhancement (improving an existing functionality like performance)
✨ New feature (a non-breaking change that adds functionality)
🧹 Chore (updates to the build process or auxiliary tools and libraries)
📚 Description
📸 Screenshots (if appropriate)
Summary by CodeRabbit
New Features
Documentation
Data