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

KAD Reusable Component Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import EditableField from './EditableField';
import './EditableField.stories.scss';
const meta = {
    title: 'Components/FormInputs/EditableField',
    component: EditableField,
    tags: ['autodocs'],
    argTypes: {
        label: {
            control: 'text',
            description: 'Label for the editable field',
        },
        value: {
            control: 'text',
            description: 'Initial value of the editable field',
        },
        onUpdate: {
            action: 'updated',
            description: 'Function called when the value is updated',
        },
        className: {
            control: 'text',
            description: 'Additional CSS class names',
        },
        id: {
            control: 'text',
            description: 'ID for the component',
        },
        passProps: {
            control: 'object',
            description: 'Additional props to pass to the component',
        },
    },
};
export default meta;
export const Default = {
    render: (args) => (_jsx("div", { className: 'EditableFieldStoryWrapper', children: _jsx(EditableField, { ...args }) })),
    args: {
        label: 'Name',
        value: 'John Doe',
        onUpdate: (newValue) => console.log('Updated value:', newValue),
    },
};
export const EmptyValue = {
    ...Default,
    args: {
        ...Default.args,
        label: 'Email',
        value: '',
    },
};
export const LongValue = {
    ...Default,
    args: {
        ...Default.args,
        label: 'Description',
        value: 'This is a very long description that might wrap to multiple lines when displayed in the editable field component.',
    },
};
export const CustomStyling = {
    ...Default,
    args: {
        ...Default.args,
        className: 'custom-editable-field',
    },
};
export const WithCustomId = {
    ...Default,
    args: {
        ...Default.args,
        id: 'custom-editable-field-id',
    },
};
export const MultipleFields = {
    render: (args) => (_jsxs("div", { className: 'EditableFieldStoryWrapper', children: [_jsx(EditableField, { ...args, label: 'First Name', value: 'John' }), _jsx(EditableField, { ...args, label: 'Last Name', value: 'Doe' }), _jsx(EditableField, { ...args, label: 'Email', value: 'john.doe@example.com' })] })),
};
export const InteractiveExample = {
    render: () => {
        const [name, setName] = React.useState('John Doe');
        const [email, setEmail] = React.useState('john.doe@example.com');
        return (_jsxs("div", { className: 'EditableFieldStoryWrapper', children: [_jsx(EditableField, { label: 'Name', value: name, onUpdate: (newValue) => setName(newValue) }), _jsx(EditableField, { label: 'Email', value: email, onUpdate: (newValue) => setEmail(newValue) }), _jsxs("div", { children: [_jsx("h3", { children: "Current Values:" }), _jsxs("p", { children: ["Name: ", name] }), _jsxs("p", { children: ["Email: ", email] })] })] }));
    },
};
export const WithPassProps = {
    ...Default,
    args: {
        ...Default.args,
        passProps: {
            placeholder: 'Enter a new value',
            maxLength: 50,
        },
    },
};
//# sourceMappingURL=EditableField.stories.js.map