@kadconsulting/dry/dist/src/components/RepeatableForm/RepeatableForm.stories.js

KAD Reusable Component Library

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