Skip to content

0.1 Hello World (start here).mdx

Latest commit

 

History

History
157 lines (122 loc) · 5.29 KB

0.1 Hello World (start here).mdx

File metadata and controls

157 lines (122 loc) · 5.29 KB

Welcome to Lambda Curry Medusa Forms! 🎯

Lambda Curry Logo
Digital products made easy
Built with expertise by Lambda Curry - your trusted Medusa development partners

Controlled form components designed specifically for Medusa Admin and Medusa UI

Medusa Forms provides a comprehensive set of controlled form components that integrate seamlessly with the Medusa ecosystem, built on top of react-hook-form and @medusajs/ui.

What is Medusa Forms?

Medusa Forms is a collection of controlled form components extracted and optimized for use with Medusa Admin interfaces. Each component is designed to work perfectly with Medusa's design system while providing excellent developer experience through TypeScript support and comprehensive documentation.

Key Features

✅ Medusa UI Integration - Built specifically for Medusa Admin design system
✅ Controlled Components - All components work seamlessly with react-hook-form
✅ TypeScript Support - Full type definitions and IntelliSense
✅ Comprehensive Documentation - Interactive Storybook with examples
✅ Performance Optimized - Tree-shaking support and optimized bundle sizes

Available Components

Form Controls

  • ControlledInput - Text input with validation
  • ControlledTextArea - Multi-line text input
  • ControlledSelect - Dropdown selection with search
  • ControlledCheckbox - Checkbox input with proper styling
  • ControlledDatePicker - Date selection with calendar
  • ControlledCurrencyInput - Currency input with formatting

UI Components

  • FieldWrapper - Consistent field styling and error handling
  • Label - Accessible form labels
  • ErrorMessage - Standardized error display

Quick Start

Installation

npm install @lambdacurry/medusa-forms
# or
yarn add @lambdacurry/medusa-forms

Basic Usage

import { useForm, FormProvider } from 'react-hook-form';
import { ControlledInput, ControlledSelect } from '@lambdacurry/medusa-forms';

function MyForm() {
  const methods = useForm();

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(console.log)}>
        <ControlledInput
          name="title"
          label="Product Title"
          placeholder="Enter product title..."
          rules={{ required: 'Title is required' }}
        />
        
        <ControlledSelect
          name="status"
          label="Status"
          options={[
            { label: 'Draft', value: 'draft' },
            { label: 'Published', value: 'published' }
          ]}
        />
      </form>
    </FormProvider>
  );
}

Integration with Medusa

These components are designed to work perfectly in Medusa Admin interfaces:

import { RouteConfig } from "@medusajs/admin"
import { FormProvider, useForm } from "react-hook-form"
import { ControlledInput, ControlledCurrencyInput } from "@lambdacurry/medusa-forms"

const ProductForm = () => {
  const methods = useForm();
  
  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(console.log)}>
        <ControlledInput
          name="title"
          label="Product Title"
        />
        <ControlledCurrencyInput
          name="price"
          label="Price"
          symbol="$"
          code="USD"
        />
      </form>
    </FormProvider>
  )
}

export const config: RouteConfig = {
  link: {
    label: "Custom Product Form",
  },
}

export default ProductForm

Form Integration Examples

Check out our Form Integration Examples story to see complete working forms with:

  • Validation schemas using Zod
  • Complex form layouts
  • Error handling
  • Real-world use cases

Dependencies

  • React ^19.0.0
  • react-hook-form ^7.51.0
  • @medusajs/ui ^4.0.0
  • zod ^3.23.8 (for validation examples)

Next Steps

  1. 📖 Explore Components - Browse the component stories to see all available options
  2. 🎮 Try Examples - Check out the Form Integration Examples for complete implementations
  3. 🔧 Customize - All components accept standard HTML props and can be styled as needed
  4. 🚀 Build - Start building your Medusa Admin forms with confidence!
Need help with your Medusa project?
Lambda Curry specializes in Medusa development and can help you build amazing e-commerce experiences.

Ready to build better forms? Start exploring the components in the sidebar! 👈