@@ -13,6 +13,7 @@ const meta = {
1313 layout : 'centered' ,
1414 } ,
1515 tags : [ 'autodocs' ] ,
16+ argTypes : { } ,
1617} satisfies Meta < typeof ControlledTextArea > ;
1718
1819export default meta ;
@@ -128,7 +129,7 @@ const RequiredFieldForm = () => {
128129 } ) ;
129130
130131 const onSubmit = ( data : unknown ) => {
131- // Form data processed successfully
132+ alert ( ` Form submitted with data: ${ JSON . stringify ( data , null , 2 ) } ` ) ;
132133 } ;
133134
134135 return (
@@ -242,7 +243,7 @@ const ValidationErrorForm = () => {
242243 } ) ;
243244
244245 const onSubmit = ( data : unknown ) => {
245- // Form data processed successfully
246+ alert ( ` Form submitted with data: ${ JSON . stringify ( data , null , 2 ) } ` ) ;
246247 } ;
247248
248249 const hasError = ! ! form . formState . errors . message ;
@@ -331,7 +332,7 @@ const ComprehensiveForm = () => {
331332 } ) ;
332333
333334 const onSubmit = ( data : unknown ) => {
334- // Form data processed successfully
335+ alert ( `Comprehensive form submitted: ${ JSON . stringify ( data , null , 2 ) } ` ) ;
335336 } ;
336337
337338 return (
@@ -380,33 +381,21 @@ const ComprehensiveForm = () => {
380381 </ Button >
381382 </ div >
382383
383- < div className = "mt-4 p-2 bg- gray-100 rounded " >
384- < strong > Form Values: </ strong >
385- < pre className = "text-xs mt-2" > { JSON . stringify ( form . watch ( ) , null , 2 ) } </ pre >
384+ < div className = "text-sm text- gray-600 " >
385+ < p > Form Status: { form . formState . isValid ? '✅ Valid' : '❌ Invalid' } </ p >
386+ < p > Errors: { Object . keys ( form . formState . errors ) . length } </ p >
386387 </ div >
387-
388- { form . formState . isSubmitted && form . formState . isValid && (
389- < div className = "p-4 bg-green-100 border border-green-400 text-green-700 rounded" >
390- Form submitted successfully! Check the console for the data.
391- </ div >
392- ) }
393388 </ form >
394389 </ FormProvider >
395390 ) ;
396391} ;
397392
398- export const ComprehensiveExample : Story = {
399- args : {
400- name : 'title' ,
401- label : 'Title' ,
402- placeholder : 'Enter a title...' ,
403- } ,
393+ export const ComprehensiveFormExample : Story = {
404394 render : ( ) => < ComprehensiveForm /> ,
405395 parameters : {
406396 docs : {
407397 description : {
408- story :
409- 'A comprehensive form example showing multiple ControlledTextArea components with different validation rules and states.' ,
398+ story : 'Complete form example with multiple text areas, validation, and form state management.' ,
410399 } ,
411400 } ,
412401 } ,
0 commit comments