@kadconsulting/dry
Version:
KAD Reusable Component Library
73 lines • 2.23 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 TimePicker from './TimePicker';
const meta = {
title: 'Components/Form/TimePicker',
component: TimePicker,
argTypes: {
value: {
control: 'text',
description: 'The current value of the time picker (in HH:MM format)',
},
onChange: {
action: 'time changed',
description: 'Function called when the time is changed',
},
disabled: {
control: 'boolean',
description: 'Whether the time picker is disabled',
},
'data-testid': {
control: 'text',
description: 'ID for testing purposes',
defaultValue: 'TimePicker-test-id',
},
},
};
export default meta;
export const Default = {
args: {
'data-testid': 'TimePicker-test-id',
value: '12:00',
onChange: (time) => console.log('Time changed:', time),
},
};
export const WithInitialTime = {
args: {
...Default.args,
value: '15:30',
},
};
export const EmptyInitialTime = {
args: {
...Default.args,
value: '',
},
};
export const Disabled = {
args: {
...Default.args,
disabled: true,
},
};
export const WithCustomStyles = {
render: (args) => (_jsx("div", { style: { fontFamily: 'Arial', fontSize: '18px' }, children: _jsx(TimePicker, { ...args }) })),
args: {
...Default.args,
},
};
export const WithLabelAndErrorState = {
render: (args) => (_jsxs("div", { children: [_jsx("label", { htmlFor: 'time-picker', children: "Select Time:" }), _jsx(TimePicker, { ...args, id: 'time-picker' }), _jsx("p", { style: { color: 'red' }, children: "Please select a valid time" })] })),
args: {
...Default.args,
},
};
export const InteractiveExample = {
render: () => {
const [time, setTime] = React.useState('12:00');
return (_jsxs("div", { children: [_jsx(TimePicker, { value: time, onChange: setTime }), _jsxs("p", { children: ["Selected time: ", time] })] }));
},
};
//# sourceMappingURL=TimePicker.stories.js.map