chore: finish to review all form stories

Talend · Sep 18, 2023 · d77d049 · d77d049
1 parent e17a05c
commit d77d049
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 80 deletions.
diff --git a/packages/forms/stories/SchemaCore.stories.tsx b/packages/forms/stories/SchemaCore.stories.tsx
@@ -7,11 +7,6 @@ export default {
 	title: 'Forms/Schema/Core',
 	component: UIForm,
 	argTypes,
-	parameters: {
-		formStoryDisplayMode: {
-			category: 'concepts',
-		},
-	},
 } as Meta<typeof UIForm>;
 
 export const ConditionalRender = {

diff --git a/packages/forms/stories/SchemaState.stories.tsx b/packages/forms/stories/SchemaState.stories.tsx
@@ -14,9 +14,18 @@ import { customWidgetSchema } from './UIFormStoriesSchemas/customWidget.schema';
 import { CustomArrayTemplate } from './CustomArrayTemplate.component';
 import { argTypes } from './argTypes';
 
+function Template({ introduction, ...props }: any) {
+	return (
+		<>
+			{introduction ? introduction : null}
+			<UIForm {...props} />
+		</>
+	);
+}
+
 const meta: Meta<typeof UIForm> = {
 	title: 'Forms/Schema/State',
-	component: UIForm,
+	component: Template,
 	argTypes: {
 		...argTypes,
 		updating: {
@@ -47,33 +56,28 @@ type Story = StoryObj<typeof UIForm>;
 const updatingProps = updatingSchema.uiSchema.map(w => w.key);
 export const Updating: Story = {
 	args: {
+		introduction: (
+			<div>
+				<h2>Updating status</h2>
+				<p>
+					Form can disable and add an animation feedback on the widgets. To do so, you need to pass
+					a UIForm "updating" prop which is an array of the schema keys where to apply
+				</p>
+			</div>
+		),
 		data: updatingSchema,
 		updating: updatingProps,
 	},
-	render: ({ onChange, onSubmit, updating, ...props }) => (
-		<div>
-			<h2>Updating status</h2>
-			<p>
-				Form can disable and add an animation feedback on the widgets. To do so, you need to pass a
-				UIForm "updating" prop which is an array of the schema keys where to apply
-			</p>
-			<UIForm {...props} onChange={onChange} onSubmit={onSubmit} updating={updating} />
-		</div>
-	),
 };
 
 export const DisplayMode: Story = {
 	args: {
 		data: displayModeSchema,
 		displayMode: 'text',
-	},
-	render: ({ onChange, onSubmit, ...props }) => (
-		<>
+		introduction: (
 			<p style={{ marginBottom: '2rem' }}>Form can be used to display data in read only</p>
-
-			<UIForm {...props} onChange={onChange} onSubmit={onSubmit} />
-		</>
-	),
+		),
+	},
 };
 
 const errorsProps = errorsSchema.uiSchema.reduce(
@@ -89,16 +93,6 @@ export const Errors: Story = {
 		data: errorsSchema,
 		errors: errorsProps,
 	},
-	render: ({ onChange, onSubmit, ...props }) => (
-		<div>
-			<h2>Updating status</h2>
-			<p>
-				Form can disable and add an animation feedback on the widgets. To do so, you need to pass a
-				UIForm "updating" prop which is an array of the schema keys where to apply
-			</p>
-			<UIForm {...props} onChange={onChange} onSubmit={onSubmit} />
-		</div>
-	),
 };
 
 function UIFormWithOnSubmitHover(props: any) {
@@ -112,41 +106,35 @@ function UIFormWithOnSubmitHover(props: any) {
 				background: hover ? '#EFEFEF' : 'transparent',
 			}}
 		>
-			<UIForm
-				{...props}
-				onSubmit={action('onSubmit')}
-				onSubmitEnter={(...args: any) => {
-					action('onSubmitEnter')(...args);
-					setHover(true);
-				}}
-				onSubmitLeave={(...args: any) => {
-					action('onSubmitLeave')(...args);
-					setHover(false);
-				}}
-			/>
+			<UIForm {...props} onSubmit={action('onSubmit')} />
 		</div>
 	);
 }
 
 export const HoverSubmit: Story = {
-	render: props => (
-		<div>
-			<h2>Hover submit handler</h2>
-			<p style={{ marginBottom: '2rem' }}>
-				Submit can detect if mouse enters or leaves by using <code>onSubmitEnter</code> and{' '}
-				<code>onSubmitLeave</code>
-			</p>
-			<UIFormWithOnSubmitHover {...props} />
-		</div>
-	),
-};
-HoverSubmit.args = {
-	data: hoverSubmitSchema,
+	args: {
+		data: hoverSubmitSchema,
+		introduction: (
+			<>
+				<h2>Hover submit handler</h2>
+				<p style={{ marginBottom: '2rem' }}>
+					Submit can detect if mouse enters or leaves by using <code>onSubmitEnter</code> and{' '}
+					<code>onSubmitLeave</code>
+				</p>
+			</>
+		),
+		onSubmitEnter: (...args: any) => {
+			action('onSubmitEnter')(...args);
+		},
+		onSubmitLeave: (...args: any) => {
+			action('onSubmitLeave')(...args);
+		},
+	},
 };
 
 export const CustomActions: Story = {
 	args: {
-		schema: customActionsSchema,
+		data: customActionsSchema,
 		actions: [
 			{
 				title: 'Reset',
@@ -180,29 +168,13 @@ export const CustomActions: Story = {
 			},
 		],
 	},
-	render: ({ schema, onSubmit, onReset, onTrigger, actions }) => (
-		<section>
-			<UIForm
-				data={schema}
-				onSubmit={onSubmit}
-				onReset={onReset}
-				onTrigger={onTrigger}
-				actions={actions}
-			/>
-		</section>
-	),
 };
 
 export const CustomTemplate: Story = {
 	args: {
 		templates: { array: CustomArrayTemplate },
-		schema: customTemplateSchema,
+		data: customTemplateSchema,
 	},
-	render: ({ templates, schema, onChange, onSubmit }) => (
-		<div>
-			<UIForm templates={templates} data={schema} onChange={onChange} onSubmit={onSubmit} />
-		</div>
-	),
 };
 
 function CustomWidgetComponent({ value }: { value: string }) {
@@ -222,9 +194,6 @@ function CustomWidgetComponent({ value }: { value: string }) {
 export const CustomWidget: Story = {
 	args: {
 		widgets: { custom: CustomWidgetComponent },
-		schema: customWidgetSchema,
+		data: customWidgetSchema,
 	},
-	render: ({ widgets, schema, onChange, onSubmit }) => (
-		<UIForm widgets={widgets} data={schema} onChange={onChange} onSubmit={onSubmit} />
-	),
 };