feat: Add comprehensive Medusa Forms controlled components Storybook stories #85
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
- 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
|
|
|
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 (
|
Contributor
|
📝 Storybook Preview: View Storybook This preview will be updated automatically when you push new changes to this PR.
|
- 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
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.
Overview
This PR implements comprehensive Storybook stories for Medusa Forms controlled components as part of the documentation and testing effort (LC-240).
✅ Completed Components
1. ControlledTextArea Stories (LC-245)
2. ControlledCurrencyInput Stories (LC-244)
3. ControlledDatePicker Stories (LC-242)
4. ControlledCheckbox Stories (LC-243) ⭐ NEW
🎯 Implementation Standards
FormProvideranduseFormdirectlyControlledInput.stories.tsxpattern📁 Files Added
apps/docs/src/medusa-forms/ControlledTextArea.stories.tsxapps/docs/src/medusa-forms/ControlledCurrencyInput.stories.tsxapps/docs/src/medusa-forms/ControlledDatePicker.stories.tsxapps/docs/src/medusa-forms/ControlledCheckbox.stories.tsx⭐ NEWapps/docs/src/medusa-forms/controlled-components/README.md(scaffolding)🧪 Testing
The stories can be tested in Storybook by running the docs application and navigating to the "Medusa Forms" section. Each component includes multiple interactive examples demonstrating various states and validation scenarios.
📋 Remaining Work
This PR completes 4 of 7 planned sub-issues (57% complete). Remaining components:
🤝 Team Collaboration
This work was completed through coordinated effort with multiple child agents:
All work was merged into this single coordinated branch to maintain consistency and avoid conflicts.
Closes LC-245, LC-244, LC-242, LC-243
Part of LC-240
🔗 View Storybook Preview (when available)