Skip to content

Commit 25359e0

Browse files
feat: Add ControlledCurrencyInput and ControlledDatePicker stories
- 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
1 parent d23ebab commit 25359e0

2 files changed

Lines changed: 433 additions & 0 deletions

File tree

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
import { ControlledCurrencyInput } from '@lambdacurry/medusa-forms/controlled/ControlledCurrencyInput';
2+
import type { Meta, StoryObj } from '@storybook/react-vite';
3+
import { FormProvider, useForm } from 'react-hook-form';
4+
import { zodResolver } from '@hookform/resolvers/zod';
5+
import { z } from 'zod';
6+
7+
const meta = {
8+
title: 'Medusa Forms/Controlled Currency Input',
9+
component: ControlledCurrencyInput,
10+
parameters: {
11+
layout: 'centered',
12+
},
13+
tags: ['autodocs'],
14+
} satisfies Meta<typeof ControlledCurrencyInput>;
15+
16+
export default meta;
17+
type Story = StoryObj<typeof meta>;
18+
19+
// Base wrapper component for stories
20+
const CurrencyInputWithHookForm = ({
21+
currency = 'USD',
22+
schema,
23+
defaultValues = { price: '' },
24+
...props
25+
}) => {
26+
const form = useForm({
27+
resolver: schema ? zodResolver(schema) : undefined,
28+
defaultValues,
29+
});
30+
31+
return (
32+
<FormProvider {...form}>
33+
<div className="w-[400px]">
34+
<ControlledCurrencyInput
35+
name="price"
36+
label="Price"
37+
currency={currency}
38+
{...props}
39+
/>
40+
</div>
41+
</FormProvider>
42+
);
43+
};
44+
45+
// 1. Different Currency Symbols
46+
export const USDCurrency: Story = {
47+
render: () => <CurrencyInputWithHookForm currency="USD" />,
48+
};
49+
50+
export const EURCurrency: Story = {
51+
render: () => <CurrencyInputWithHookForm currency="EUR" />,
52+
};
53+
54+
export const GBPCurrency: Story = {
55+
render: () => <CurrencyInputWithHookForm currency="GBP" />,
56+
};
57+
58+
// 2. Validation with Min/Max Values
59+
const minValidationSchema = z.object({
60+
price: z.number().min(10, 'Minimum price is $10'),
61+
});
62+
63+
export const MinimumValueValidation: Story = {
64+
render: () => (
65+
<CurrencyInputWithHookForm
66+
currency="USD"
67+
schema={minValidationSchema}
68+
defaultValues={{ price: 5 }}
69+
label="Price (Min $10)"
70+
/>
71+
),
72+
};
73+
74+
const maxValidationSchema = z.object({
75+
price: z.number().max(1000, 'Maximum price is $1000'),
76+
});
77+
78+
export const MaximumValueValidation: Story = {
79+
render: () => (
80+
<CurrencyInputWithHookForm
81+
currency="USD"
82+
schema={maxValidationSchema}
83+
defaultValues={{ price: 1500 }}
84+
label="Price (Max $1000)"
85+
/>
86+
),
87+
};
88+
89+
const rangeValidationSchema = z.object({
90+
price: z.number()
91+
.min(50, 'Price must be at least $50')
92+
.max(500, 'Price cannot exceed $500'),
93+
});
94+
95+
export const RangeValidation: Story = {
96+
render: () => (
97+
<CurrencyInputWithHookForm
98+
currency="USD"
99+
schema={rangeValidationSchema}
100+
defaultValues={{ price: 25 }}
101+
label="Price ($50 - $500)"
102+
/>
103+
),
104+
};
105+
106+
// 3. Error Handling and Validation Messages
107+
const requiredSchema = z.object({
108+
price: z.number().min(0.01, 'Price is required'),
109+
});
110+
111+
export const RequiredFieldValidation: Story = {
112+
render: () => (
113+
<CurrencyInputWithHookForm
114+
currency="USD"
115+
schema={requiredSchema}
116+
label="Required Price *"
117+
required
118+
/>
119+
),
120+
};
121+
122+
const customValidationSchema = z.object({
123+
price: z.number()
124+
.min(1, 'Custom error: Price must be at least $1')
125+
.max(100, 'Custom error: Price cannot exceed $100'),
126+
});
127+
128+
export const CustomValidationMessage: Story = {
129+
render: () => (
130+
<CurrencyInputWithHookForm
131+
currency="USD"
132+
schema={customValidationSchema}
133+
defaultValues={{ price: 150 }}
134+
label="Custom Validation Messages"
135+
/>
136+
),
137+
};
138+
139+
// 4. Different Currency Codes
140+
export const JPYCurrency: Story = {
141+
render: () => (
142+
<CurrencyInputWithHookForm
143+
currency="JPY"
144+
defaultValues={{ price: 11000 }}
145+
label="Price (JPY)"
146+
/>
147+
),
148+
};
149+
150+
export const CADCurrency: Story = {
151+
render: () => (
152+
<CurrencyInputWithHookForm
153+
currency="CAD"
154+
defaultValues={{ price: 125.75 }}
155+
label="Price (CAD)"
156+
/>
157+
),
158+
};
159+
160+
export const AUDCurrency: Story = {
161+
render: () => (
162+
<CurrencyInputWithHookForm
163+
currency="AUD"
164+
defaultValues={{ price: 135.50 }}
165+
label="Price (AUD)"
166+
/>
167+
),
168+
};
169+

0 commit comments

Comments
 (0)