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

KAD Reusable Component Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Calendar from './Calendar';
const meta = {
    title: 'Components/Layout/Calendar',
    component: Calendar,
    argTypes: {
        'data-testid': {
            control: 'text',
            description: 'ID for testing purposes',
            defaultValue: 'Calendar-test-id',
        },
        events: {
            control: 'object',
            description: 'Array of calendar events',
        },
        onEventClick: {
            action: 'eventClicked',
            description: 'Function called when an event is clicked',
        },
        modalContent: {
            control: 'text',
            description: 'Content to display in the modal',
        },
        isOpen: {
            control: 'boolean',
            description: 'Controls whether the modal is open',
        },
        closeModal: {
            action: 'modalClosed',
            description: 'Function to close the modal',
        },
        height: {
            control: 'number',
            description: 'Height of the calendar in pixels',
        },
        slotMinTime: {
            control: 'text',
            description: 'Minimum time slot',
        },
        slotMaxTime: {
            control: 'text',
            description: 'Maximum time slot',
        },
        mobileContent: {
            control: 'function',
            description: 'Function to render mobile content',
        },
        selectable: {
            control: 'boolean',
            description: 'Whether calendar slots are selectable',
        },
        handleSelectSlot: {
            action: 'slotSelected',
            description: 'Function called when a slot is selected',
        },
    },
};
export default meta;
const sampleEvents = [
    {
        id: '1',
        title: 'Meeting',
        start: new Date().toISOString(),
        end: new Date(new Date().getTime() + 2 * 60 * 60 * 1000).toISOString(),
        extraData: {
            description: 'Team meeting',
            location: 'Conference Room A',
        },
    },
    {
        id: '2',
        title: 'Lunch',
        start: new Date(new Date().getTime() + 4 * 60 * 60 * 1000).toISOString(),
        end: new Date(new Date().getTime() + 5 * 60 * 60 * 1000).toISOString(),
        extraData: {
            description: 'Team lunch',
            location: 'Cafeteria',
        },
    },
];
export const Default = {
    args: {
        'data-testid': 'Calendar-test-id',
        events: sampleEvents,
        height: 600,
        slotMinTime: '08:00:00',
        slotMaxTime: '20:00:00',
        selectable: false,
        isOpen: false,
    },
};
export const WithModal = {
    args: {
        ...Default.args,
        isOpen: true,
        modalContent: _jsx("div", { children: "Event details go here" }),
    },
};
export const Selectable = {
    args: {
        ...Default.args,
        selectable: true,
    },
};
export const CustomTimeSlots = {
    args: {
        ...Default.args,
        slotMinTime: '06:00:00',
        slotMaxTime: '22:00:00',
    },
};
export const MobileView = {
    args: {
        ...Default.args,
        mobileContent: (eventData) => (_jsxs("div", { children: [_jsx("h3", { children: eventData?.title }), _jsx("p", { children: eventData?.description }), _jsx("p", { children: eventData?.location })] })),
    },
    parameters: {
        viewport: {
            defaultViewport: 'mobile1',
        },
    },
};
export const WithManyEvents = {
    args: {
        ...Default.args,
        events: [
            ...sampleEvents,
            ...Array.from({ length: 20 }, (_, i) => ({
                id: `${i + 3}`,
                title: `Event ${i + 1}`,
                start: new Date(new Date().getTime() + (i + 1) * 24 * 60 * 60 * 1000).toISOString(),
                end: new Date(new Date().getTime() +
                    (i + 1) * 24 * 60 * 60 * 1000 +
                    2 * 60 * 60 * 1000).toISOString(),
                extraData: {
                    description: `Description for Event ${i + 1}`,
                    location: `Location ${i + 1}`,
                },
            })),
        ],
    },
};
export const CustomRendering = {
    render: (args) => (_jsx("div", { style: {
            padding: '20px',
            background: '#f0f0f0',
            maxWidth: '1200px',
            margin: '0 auto',
        }, children: _jsx(Calendar, { ...args }) })),
    args: {
        ...Default.args,
    },
};
//# sourceMappingURL=Calendar.stories.js.map