- );
- }
-
- return (
-
- );
-}
-
-const meta: Meta = {
- title: 'Forms/Schema/Playground',
- component: Playground,
- parameters: {
- centeredLayout: true,
- },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {
- args: {
- data: DEFAULT_DATA,
- },
-};
diff --git a/packages/forms/stories/JSONConcepts.stories.tsx b/packages/forms/stories/SchemaCore.stories.tsx
similarity index 94%
rename from packages/forms/stories/JSONConcepts.stories.tsx
rename to packages/forms/stories/SchemaCore.stories.tsx
index 5c7bbac2747..01cd78708e1 100644
--- a/packages/forms/stories/JSONConcepts.stories.tsx
+++ b/packages/forms/stories/SchemaCore.stories.tsx
@@ -1,10 +1,12 @@
import type { Meta } from '@storybook/react';
import { UIForm } from '../src';
import { concepts } from './json';
+import { argTypes } from './argTypes';
export default {
title: 'Forms/Schema/Core',
component: UIForm,
+ argTypes,
parameters: {
formStoryDisplayMode: {
category: 'concepts',
@@ -17,6 +19,7 @@ export const ConditionalRender = {
data: concepts.conditionalRender,
},
};
+
export const CustomValidation = {
args: {
data: concepts.customValidation,
diff --git a/packages/forms/stories/JSONFields.stories.tsx b/packages/forms/stories/SchemaFields.stories.tsx
similarity index 98%
rename from packages/forms/stories/JSONFields.stories.tsx
rename to packages/forms/stories/SchemaFields.stories.tsx
index 092464e4ec5..14319d71e4c 100644
--- a/packages/forms/stories/JSONFields.stories.tsx
+++ b/packages/forms/stories/SchemaFields.stories.tsx
@@ -1,10 +1,12 @@
import type { Meta } from '@storybook/react';
import { UIForm } from '../src';
import { fields } from './json';
+import { argTypes } from './argTypes';
export default {
title: 'Forms/Schema/Fields',
component: UIForm,
+ argTypes,
parameters: {
formStoryDisplayMode: {
category: 'fields',
diff --git a/packages/forms/stories/JSONFieldsets.stories.tsx b/packages/forms/stories/SchemaFieldsets.stories.tsx
similarity index 96%
rename from packages/forms/stories/JSONFieldsets.stories.tsx
rename to packages/forms/stories/SchemaFieldsets.stories.tsx
index a95aec40358..0eb5518003f 100644
--- a/packages/forms/stories/JSONFieldsets.stories.tsx
+++ b/packages/forms/stories/SchemaFieldsets.stories.tsx
@@ -1,10 +1,12 @@
import type { Meta } from '@storybook/react';
import { UIForm } from '../src';
import { fieldsets } from './json';
+import { argTypes } from './argTypes';
export default {
title: 'Forms/Schema/Fieldsets',
component: UIForm,
+ argTypes,
parameters: {
formStoryDisplayMode: {
category: 'fieldsets',
diff --git a/packages/forms/stories/Layout.stories.tsx b/packages/forms/stories/SchemaLayout.stories.tsx
similarity index 70%
rename from packages/forms/stories/Layout.stories.tsx
rename to packages/forms/stories/SchemaLayout.stories.tsx
index a69f0b141b6..4e23a46b61e 100644
--- a/packages/forms/stories/Layout.stories.tsx
+++ b/packages/forms/stories/SchemaLayout.stories.tsx
@@ -2,12 +2,14 @@ import type { Meta, StoryObj } from '@storybook/react';
import { HeaderBar, Layout, Dialog, Drawer as DrawerComponent } from '@talend/react-components';
import Form from '../src';
+import { argTypes } from './argTypes';
const simple = require('./json/concepts/simple.json');
const meta: Meta = {
title: 'Forms/Schema/Layout',
component: Form,
+ argTypes,
parameters: {
centeredLayout: true,
},
@@ -40,20 +42,26 @@ const LayoutDrawer = ({ title, stacked = false, ...props }: LayoutDrawerProps) =
type Story = StoryObj;
export const Default: Story = {
- render: () => (
+ render: props => (
Form by default take 100% width of the container
-
+
),
};
+Default.args = {
+ data: simple,
+};
export const Drawer: Story = {
args: {
title: 'UIForm in a drawer',
data: simple,
},
- render: ({ title, data }) => ,
+ render: ({ title, ...props }) => ,
+};
+Drawer.args = {
+ data: simple,
};
export const DrawerStacked: Story = {
@@ -62,8 +70,8 @@ export const DrawerStacked: Story = {
data: simple,
stacked: true,
},
- render: ({ title, data, stacked }) => (
-
+ render: ({ title, stacked, ...props }) => (
+
),
};
@@ -71,9 +79,9 @@ export const Modal: Story = {
args: {
data: simple,
},
- render: ({ data }) => (
+ render: props => (
),
};
@@ -81,6 +89,7 @@ export const Modal: Story = {
export const Skeleton: Story = {
args: {
loading: true,
+ data: simple, // in case the user switch to loading: false
},
};
@@ -88,6 +97,7 @@ export const NoButton: Story = {
args: {
loading: true,
actions: [],
+ data: simple, // in case the user switch to loading: false
},
};
@@ -95,17 +105,19 @@ export const SkeletonDrawer: Story = {
args: {
loading: true,
title: 'Form in loading in drawer',
+ data: simple, // in case the user switch to loading: false
},
- render: ({ loading, title }) => ,
+ render: ({ title, ...props }) => ,
};
export const SkeletonDrawerStacked: Story = {
args: {
loading: true,
+ data: simple, // in case the user switch to loading: false
title: 'Form in loading in drawer',
stacked: true,
},
- render: ({ loading, title, stacked }) => (
-
+ render: ({ title, stacked, ...props }) => (
+
),
};
diff --git a/packages/forms/stories/State.stories.tsx b/packages/forms/stories/SchemaState.stories.tsx
similarity index 84%
rename from packages/forms/stories/State.stories.tsx
rename to packages/forms/stories/SchemaState.stories.tsx
index 57db84c9a4e..80845a5f1f6 100644
--- a/packages/forms/stories/State.stories.tsx
+++ b/packages/forms/stories/SchemaState.stories.tsx
@@ -12,10 +12,23 @@ import { customTemplateSchema } from './UIFormStoriesSchemas/customTemplate.sche
import { customWidgetSchema } from './UIFormStoriesSchemas/customWidget.schema';
import { CustomArrayTemplate } from './CustomArrayTemplate.component';
+import { argTypes } from './argTypes';
const meta: Meta = {
title: 'Forms/Schema/State',
component: UIForm,
+ argTypes: {
+ ...argTypes,
+ updating: {
+ table: { disable: true },
+ },
+ onSubmit: {
+ table: { disable: true },
+ },
+ onReset: {
+ table: { disable: true },
+ },
+ },
args: {
onChange: action('Change'),
onSubmit: action('onSubmit'),
@@ -34,30 +47,31 @@ type Story = StoryObj;
const updatingProps = updatingSchema.uiSchema.map(w => w.key);
export const Updating: Story = {
args: {
- schema: updatingSchema,
+ data: updatingSchema,
updating: updatingProps,
},
- render: ({ schema, onChange, onSubmit, updating }) => (
+ render: ({ onChange, onSubmit, updating, ...props }) => (
Updating status
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
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
-