@kadconsulting/dry
Version:
KAD Reusable Component Library
68 lines • 2.35 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import RepeatableForm from './RepeatableForm';
export default {
title: 'Components/Forms/RepeatableForm',
component: RepeatableForm,
argTypes: {
'data-testid': {
control: 'text',
description: 'ID for testing purposes',
defaultValue: 'RepeatableForm-test-id',
},
passProps: {
control: 'object',
description: 'Object containing extra props to pass',
defaultValue: {},
},
fields: {
control: 'object',
description: 'Array of field definitions',
},
initialState: {
control: 'object',
description: 'Initial state of the form entries',
},
onStateChange: { action: 'state changed' },
},
};
const Template = (args) => (_jsx(RepeatableForm, { ...args }));
export const Default = Template.bind({});
Default.args = {
'data-testid': 'RepeatableForm-test-id',
fields: [
{ type: 'text', name: 'startRange', label: 'Start Range' },
{ type: 'text', name: 'endRange', label: 'End Range' },
{ type: 'number', name: 'pricePerCredit', label: 'Price Per Credit' },
],
initialState: [{ startRange: '1', endRange: '50', pricePerCredit: '10' }],
};
export const WithTextarea = Template.bind({});
WithTextarea.args = {
...Default.args,
fields: [
{ type: 'text', name: 'title', label: 'Title' },
{ type: 'textarea', name: 'description', label: 'Description' },
{ type: 'number', name: 'quantity', label: 'Quantity' },
],
initialState: [
{ title: 'Item 1', description: 'Description for item 1', quantity: '5' },
],
};
export const MultipleEntries = Template.bind({});
MultipleEntries.args = {
...Default.args,
initialState: [
{ startRange: '1', endRange: '50', pricePerCredit: '10' },
{ startRange: '51', endRange: '100', pricePerCredit: '8' },
{ startRange: '101', endRange: '200', pricePerCredit: '6' },
],
};
export const WithPassProps = Template.bind({});
WithPassProps.args = {
...Default.args,
passProps: {
style: { border: '1px solid #ccc', padding: '20px' },
'aria-label': 'Repeatable Form Example',
},
};
//# sourceMappingURL=RepeatableForm.stories.js.map