@kadconsulting/dry
Version:
KAD Reusable Component Library
96 lines • 2.86 kB
JavaScript
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 DateInputPicker from './DateInputPicker';
const meta = {
title: 'Components/Form/DateInputPicker',
component: DateInputPicker,
argTypes: {
'data-testid': {
control: 'text',
description: 'ID for testing purposes',
defaultValue: 'DateInputPicker-test-id',
},
value: {
control: 'date',
description: 'The current value of the date picker',
},
onChange: {
action: 'date changed',
description: 'Function called when the date is changed',
},
minDate: {
control: 'date',
description: 'The minimum selectable date',
},
maxDate: {
control: 'date',
description: 'The maximum selectable date',
},
},
};
export default meta;
export const Default = {
args: {
'data-testid': 'DateInputPicker-test-id',
value: null,
onChange: (date) => console.log('Date changed:', date),
},
};
export const WithValue = {
args: {
...Default.args,
value: '2023-07-26',
},
};
export const WithMinDate = {
args: {
...Default.args,
minDate: '2023-01-01',
},
};
export const WithMaxDate = {
args: {
...Default.args,
maxDate: '2023-12-31',
},
};
export const WithMinAndMaxDate = {
args: {
...Default.args,
minDate: '2023-01-01',
maxDate: '2023-12-31',
},
};
export const Disabled = {
render: (args) => _jsx(DateInputPicker, { ...args, disabled: true }),
args: {
...Default.args,
},
};
export const CustomStyling = {
render: (args) => (_jsx("div", { style: { padding: '20px', background: '#f0f0f0' }, children: _jsx(DateInputPicker, { ...args, className: 'custom-date-picker' }) })),
args: {
...Default.args,
},
};
export const WithErrorState = {
render: (args) => (_jsxs("div", { children: [_jsx(DateInputPicker, { ...args, className: 'error-state' }), _jsx("p", { style: { color: 'red' }, children: "Please select a valid date" })] })),
args: {
...Default.args,
},
};
export const InteractiveExample = {
render: (args) => {
const [date, setDate] = React.useState(null);
return (_jsxs("div", { children: [_jsx(DateInputPicker, { ...args, value: date, onChange: (newDate) => {
setDate(newDate ? newDate.toISOString().split('T')[0] : null);
args.onChange(newDate);
} }), _jsxs("p", { children: ["Selected date: ", date || 'None'] })] }));
},
args: {
...Default.args,
},
};
//# sourceMappingURL=DateInputPicker.stories.js.map