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

KAD Reusable Component Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// CLI Version 1.0.1
// Component Version 1.0.0
import React from 'react';
import DateTimePicker from './DateTimePicker';
const meta = {
    title: 'Components/Form/DateTimePicker',
    component: DateTimePicker,
    argTypes: {
        'data-testid': {
            control: 'text',
            description: 'ID for testing purposes',
            defaultValue: 'DateTimePicker-test-id',
        },
        value: {
            control: 'date',
            description: 'The current value of the date time picker',
        },
        onChange: {
            action: 'date time changed',
            description: 'Function called when the date or time is changed',
        },
        minDate: {
            control: 'date',
            description: 'The minimum selectable date',
        },
        maxDate: {
            control: 'date',
            description: 'The maximum selectable date',
        },
        militaryTime: {
            control: 'boolean',
            description: 'Whether to use 24-hour time format',
        },
        onlyDate: {
            control: 'boolean',
            description: 'Show only the date picker',
        },
        onlyTime: {
            control: 'boolean',
            description: 'Show only the time picker',
        },
        label: {
            control: 'text',
            description: 'Label for the date time picker',
        },
    },
};
export default meta;
const defaultDate = new Date().toISOString();
export const Default = {
    args: {
        'data-testid': 'DateTimePicker-test-id',
        value: defaultDate,
        onChange: (date) => console.log('Date time changed:', date),
        label: 'Select Date and Time',
    },
};
export const WithMinMaxDate = {
    args: {
        ...Default.args,
        minDate: new Date(new Date().setDate(new Date().getDate() - 7)).toISOString(),
        maxDate: new Date(new Date().setDate(new Date().getDate() + 7)).toISOString(),
    },
};
export const MilitaryTime = {
    args: {
        ...Default.args,
        militaryTime: true,
    },
};
export const OnlyDate = {
    args: {
        ...Default.args,
        onlyDate: true,
    },
};
export const OnlyTime = {
    args: {
        ...Default.args,
        onlyTime: true,
    },
};
export const WithoutLabel = {
    args: {
        ...Default.args,
        label: undefined,
    },
};
export const CustomStyling = {
    render: (args) => (_jsx("div", { style: { padding: '20px', background: '#f0f0f0' }, children: _jsx(DateTimePicker, { ...args, className: 'custom-date-time-picker' }) })),
    args: {
        ...Default.args,
    },
};
export const InteractiveExample = {
    render: (args) => {
        const [dateTime, setDateTime] = React.useState(args.value || defaultDate);
        return (_jsxs("div", { children: [_jsx(DateTimePicker, { ...args, value: dateTime, onChange: (newDateTime) => {
                        setDateTime(newDateTime || defaultDate);
                        args.onChange(newDateTime);
                    } }), _jsxs("p", { children: ["Selected date and time: ", dateTime || 'None'] })] }));
    },
    args: {
        ...Default.args,
    },
};
export const NullValue = {
    args: {
        ...Default.args,
        value: null,
    },
};
//# sourceMappingURL=DateTimePicker.stories.js.map