Skip to content

Commit b446142

Browse files
Initial scaffolding for controlled components stories
- Created directory structure for controlled component stories - Added README with implementation plan and template pattern - Based on medusa-forms-upgrades branch as requested
1 parent c2e0790 commit b446142

1 file changed

Lines changed: 65 additions & 0 deletions

File tree

  • apps/docs/src/medusa-forms/controlled-components
Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# Controlled Components Stories Implementation
2+
3+
This directory contains Storybook stories for the Medusa Forms controlled components.
4+
5+
## Implementation Status
6+
7+
-`ControlledInput` (already exists in parent directory)
8+
-`ControlledCheckbox` (needs story)
9+
-`ControlledCurrencyInput` (needs story)
10+
-`ControlledDatePicker` (needs story)
11+
-`ControlledSelect` (needs story)
12+
-`ControlledTextArea` (needs story)
13+
14+
## Story Pattern
15+
16+
All stories follow this pattern:
17+
- Use `react-hook-form` directly with `FormProvider` and `useForm`
18+
- NO react-router-stub dependencies
19+
- Follow the pattern established in `ControlledInput.stories.tsx`
20+
- Include multiple variants and states for each component
21+
22+
## Template Structure
23+
24+
```tsx
25+
import { ControlledComponent } from '@lambdacurry/medusa-forms/controlled/ControlledComponent';
26+
import type { Meta, StoryObj } from '@storybook/react-vite';
27+
import { FormProvider, useForm } from 'react-hook-form';
28+
29+
const meta = {
30+
title: 'Medusa Forms/Controlled Component',
31+
component: ControlledComponent,
32+
parameters: {
33+
layout: 'centered',
34+
},
35+
tags: ['autodocs'],
36+
} satisfies Meta<typeof ControlledComponent>;
37+
38+
export default meta;
39+
type Story = StoryObj<typeof meta>;
40+
41+
const ComponentWithHookForm = () => {
42+
const form = useForm({
43+
defaultValues: {
44+
fieldName: '',
45+
},
46+
});
47+
48+
return (
49+
<FormProvider {...form}>
50+
<div className="w-[400px]">
51+
<ControlledComponent
52+
name="fieldName"
53+
label="Field Label"
54+
// component-specific props
55+
/>
56+
</div>
57+
</FormProvider>
58+
);
59+
};
60+
61+
export const Basic: Story = {
62+
render: () => <ComponentWithHookForm />,
63+
};
64+
```
65+

0 commit comments

Comments
 (0)