Medusa Forms Upgrades #81
Merged
Conversation
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
- Maintained React 19 patterns in all form components (no forwardRef usage) - Preserved all other changes from medusa-forms branch - Components now use FC<Props> with destructured ref parameter - All form components maintain consistent React 19 ref handling pattern
…use-new-react-patterns-41c7
|
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 🪧 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 (
|
Contributor
|
📝 Storybook Preview: View Storybook This preview will be updated automatically when you push new changes to this PR.
|
…omponents - Replaced standard React imports with type-only imports across multiple form components for improved type safety and clarity. - Ensured consistency in the usage of functional components with TypeScript interfaces.
- Created directory structure for controlled component stories - Added README with implementation plan and template pattern - Based on medusa-forms-upgrades branch as requested
- Add BasicUsage story with simple textarea and react-hook-form integration - Add CharacterLimits story with character count validation and display - Add RequiredFieldValidation story with error states and custom messages - Add AutoResizeFunctionality story with dynamic height adjustment - Add ValidationErrorStates story with various error scenarios - Add ComprehensiveExample story showing multiple textareas in a form - Follow established pattern from ControlledInput.stories.tsx - Use react-hook-form directly with FormProvider and useForm - Include proper validation with zod schemas - Demonstrate real-world usage patterns Addresses LC-245: Create ControlledTextArea Storybook Stories
- Complete Registration Form with multi-step validation - Product Creation Form demonstrating all controlled components - Form Validation Showcase with various validation scenarios - Real-world usage patterns with error handling and submit states - Comprehensive documentation for each example Components integrated: - ControlledInput (text, email, password, number) - ControlledCheckbox (terms, preferences, status flags) - ControlledSelect (country, category selection) - ControlledDatePicker (birth date, launch date with constraints) - ControlledCurrencyInput (pricing with validation) - ControlledTextArea (descriptions, tags) Validation features: - Real-time validation with react-hook-form - Complex business rules (age verification, price ranges) - Format validation (email, SKU patterns, dimensions) - Cross-field validation (password confirmation) - Submit handling with loading states and success feedback
- ControlledCurrencyInput: 4 story variants (USD/EUR/GBP, validation, error handling, different currency codes) - ControlledDatePicker: 5 story variants (basic, validation, formats, disabled dates, constraints) - Both follow react-hook-form pattern with comprehensive validation - Merged from agents #27943 and #27941 work on LC-244 and LC-242
- Comprehensive implementation with 8 story variants - BasicUsage, DefaultChecked/Unchecked, RequiredValidation, CustomValidation - ErrorState, DisabledState, MultipleCheckboxes, CompleteFormExample - Follows react-hook-form pattern with proper boolean value handling - Includes advanced features like select-all functionality Merged from agent #27942's work on LC-243
- Add 10 comprehensive story variants for ControlledSelect component - Cover basic single select, default values, validation, loading states - Include custom option rendering using Select compound components - Add disabled state, error state, and size variants - Include complex form integration and interactive demo - Follow established pattern from ControlledInput.stories.tsx - Use react-hook-form directly without react-router dependencies Note: Multi-select and searchable/creatable variants not included as they are not currently supported by the base Select component
- Fixed duplicate identifier conflicts in ControlledSelect.stories.tsx: - Renamed component function ComplexFormIntegration to ComplexFormIntegrationComponent - Renamed story exports to avoid conflicts: RequiredValidation → SelectRequiredValidation, DisabledState → SelectDisabledState, ErrorState → SelectErrorState - Fixed duplicate identifier conflicts in ControlledCheckbox.stories.tsx: - Renamed component function CompleteFormExample to CompleteFormExampleComponent - Fixed incorrect import path in ControlledCheckbox.stories.tsx: - Changed from '@lambdacurry/medusa-forms/controlled' to '@lambdacurry/medusa-forms/controlled/ControlledCheckbox' These changes resolve the Storybook build failures caused by TypeScript identifier conflicts and import path issues.
…te-form-integration-examples
…lledtextarea-storybook-stories
…lledselect-storybook-stories
…controlled-components-documentation-stories-and
…ries - Updated ControlledCurrencyInput stories to include currency symbol and code as props for better flexibility. - Refactored validation schemas to use string types for price inputs, ensuring consistent handling of numeric values. - Improved FormIntegrationExamples by adding missing imports and refining form handling logic for better readability. - Enhanced error handling and validation messages across various form components, ensuring a more robust user experience.
…on from @medusajs/ui - Replaced native button elements with the Button component for improved styling and functionality. - Updated button properties to utilize isLoading and variant attributes for better user experience. - Ensured consistent usage of the Button component across different forms, enhancing code maintainability.
- Add medusa-forms-patterns.mdc for component development patterns - Add medusa-stories-patterns.mdc for Storybook story patterns - Focus on @medusajs/ui integration and react-hook-form Controller patterns - Complement existing form-component-patterns.mdc with Medusa-specific guidance - Include validation, error handling, and accessibility requirements - Provide comprehensive story examples and best practices
- Update monorepo-organization.mdc with proper globs and new package structure - Add medusa-forms package and directory structure documentation - Update storybook-testing.mdc to include react-hook-form and @medusajs/ui - Add medusa-forms story directory to project structure - Update form-component-patterns.mdc to clarify scope (Remix Hook Form only) - Add note directing to medusa-forms-patterns.mdc for Medusa components
…les-1748666401
- Refactored ControlledCurrencyInput, ControlledDatePicker, ControlledSelect, and ControlledTextArea stories to include necessary props and improve structure. - Added missing args for story configurations to ensure proper rendering and documentation. - Updated validation rules and error handling for better user experience across various form components. - Removed outdated README for controlled components as the documentation is now integrated within the stories. - Improved button usage in forms by utilizing the Button component from @medusajs/ui for consistent styling and functionality.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
No description provided.