feat: Add shadcn/ui custom registry for medusa-forms components #88
Conversation
![codegen-sh[bot]](https://avatars.githubusercontent.com/in/321279?s=60&v=4){kind=small}
- Add main registry.json configuration - Create registry-compatible versions of all medusa-forms components: - ControlledInput - ControlledSelect - ControlledCheckbox - ControlledTextarea - ControlledDatePicker - ControlledCurrencyInput - Generate individual JSON registry files for each component - Add comprehensive documentation in REGISTRY.md - Components can now be installed via: npx shadcn@latest add [URL]
|
|
|
Important Review skippedBot user detected. To trigger a single review, invoke the You can disable this status message by setting the 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Join our Discord community 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 (
|
|
📝 Storybook Preview: View Storybook This preview will be updated automatically when you push new changes to this PR.
|
|
@codegen-sh is it possible to nest this registry in packages/medusa-forms and use the already existing components in there?
|
- Move registry structure to packages/medusa-forms/ for better monorepo organization - Create shadcn-compatible versions of existing components in src/registry/ - Preserve original medusa-forms components in src/controlled/ (unchanged) - Update registry.json paths to reflect nested structure - Generate individual JSON registry files for each component - Add comprehensive documentation explaining the relationship between registry and original components - Registry components use @medusajs/ui directly while original components use internal wrappers
|
Absolutely! I've restructured the registry to be properly nested in 🏗️ Better Architecture:
📁 Clean Structure: 🔗 Updated URLs: npx shadcn@latest add https://raw.githubusercontent.com/lambda-curry/forms/main/packages/medusa-forms/registry/controlled-input.json✅ Benefits of this approach:
The updated documentation explains the relationship between both sets of components clearly! 💻 View my work • React 👍 or 👎 |
|
@codegen-sh ├── src/registry/ # shadcn-compatible components
|
…atibility - Update existing controlled components to be shadcn-compatible - Remove duplicate src/registry/ directory - single source of truth - Components now use @medusajs/ui directly instead of internal wrappers - Add built-in labels, error handling with @hookform/error-message - Update registry.json to point to src/controlled/ components - Regenerate individual JSON registry files with updated content - Update documentation to reflect unified approach - Components serve both shadcn CLI and npm package usage
|
Perfect! I've consolidated everything to use just the original ✅ What I've Done:🔄 Updated Existing Components:
🗂️ Eliminated Duplication:
📁 Clean Structure: 🔗 Updated URLs: npx shadcn@latest add https://raw.githubusercontent.com/lambda-curry/forms/main/packages/medusa-forms/registry/controlled-input.json🎉 Benefits:
The components now serve both use cases seamlessly! 🚀 💻 View my work • React 👍 or 👎 |
|
@codegen-sh unfortunately changing from importing our UI components to directly import from Medusa UI loses out on our structure for the field wrapper with labels and error handling baked in. Let's add our wrapped versions of the UI components within packages/medusa-forms to the registry and include the necessary components as dependencies that will get copied over as well.
|
- Revert controlled components to use internal UI wrappers - Add all UI wrapper components to registry as dependencies - Implement proper dependency chain: controlled → ui → field-wrapper → [error, label] - Generate registry files for all UI components (field-wrapper, input, select, etc.) - Update registry.json with registryDependencies for automatic component copying - Preserve valuable field wrapper architecture with labels and error handling - Components now maintain superior UX while being shadcn-compatible - Update documentation to explain dependency management and architecture
|
Excellent point! I've now preserved the valuable field wrapper structure while making it work seamlessly with the shadcn registry. 🎯 ✅ What I've Implemented:🔄 Reverted to Internal Wrappers:
📦 Registry Dependency Management:
🏗️ Complete Dependency Chain: 📁 Registry Structure: 🔗 Installation Example: npx shadcn@latest add https://raw.githubusercontent.com/lambda-curry/forms/main/packages/medusa-forms/registry/controlled-input.jsonThis single command now copies:
🎉 Best of Both Worlds:
The components now maintain their excellent UX while being fully shadcn-compatible! 🚀 💻 View my work • React 👍 or 👎 |
Overview
This PR implements a custom shadcn/ui registry for medusa-forms components, allowing developers to install them using the native shadcn CLI instead of creating our own CLI.
What's Added
🎯 Registry Infrastructure
registry.json) following shadcn/ui standards/registry/directory/src/registry/🧩 Available Components
All medusa-forms controlled components are now available via shadcn CLI:
📚 Documentation
REGISTRY.mdwith installation and usage examplesUsage
Developers can now install components using the familiar shadcn CLI:
# Install individual components npx shadcn@latest add https://raw.githubusercontent.com/lambda-curry/forms/main/registry/controlled-input.json npx shadcn@latest add https://raw.githubusercontent.com/lambda-curry/forms/main/registry/controlled-select.jsonBenefits
✅ No Custom CLI - Leverage existing shadcn infrastructure
✅ Familiar UX - Developers already know
npx shadcn@latest add✅ Auto Dependencies - shadcn handles npm package installation
✅ TypeScript Support - Built-in TypeScript compatibility
✅ Zero Maintenance - No CLI package to maintain
✅ Instant Adoption - Works with existing shadcn projects
✅ v0 Compatible - Components work with v0.dev
Implementation Details
@medusajs/uidirectly instead of internal wrappers@hookform/error-messageFiles Changed
registry.json- Main registry configurationregistry/*.json- Individual component registry files (6 files)src/registry/*.tsx- Registry-compatible component source files (6 files)REGISTRY.md- Comprehensive documentationTesting
Components can be tested by:
npx shadcn@latest initnpm install @medusajs/ui react-hook-form @hookform/error-messagenpx shadcn@latest add [component-url]Resolves LC-256
💻 View my work • About Codegen