@heymantle/litho 0.0.3 → 0.0.4

package/dist/esm/stories/DatePicker.stories.js

@@ -0,0 +1,537 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import DatePicker from "../components/DatePicker.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+import VerticalStack from "../components/VerticalStack.js";
+import Box from "../components/Box.js";
+import { transformStorySource } from "../utilities/transformers.js";
+export default {
+    title: 'Litho/DatePicker',
+    component: DatePicker,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A DatePicker component that allows users to select dates using an interactive calendar interface. DatePickers support single date selection, date ranges, and various formatting options."
+            }
+        }
+    },
+    args: {
+        label: 'Select date'
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Label for the DatePicker'
+        },
+        labelAction: {
+            control: 'object',
+            description: 'Action button for the label'
+        },
+        value: {
+            control: 'object',
+            description: 'Current value of the DatePicker (Object|string|Date|null)'
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text for the input'
+        },
+        displayFormat: {
+            control: 'text',
+            description: 'Date format for displaying the value'
+        },
+        helpText: {
+            control: 'text',
+            description: 'Help text displayed under the field'
+        },
+        suffix: {
+            control: 'object',
+            description: 'Icon or text displayed at the end of the input'
+        },
+        isClearable: {
+            control: 'boolean',
+            description: 'Whether the input can be cleared'
+        },
+        tooltip: {
+            control: 'text',
+            description: 'Tooltip text for the field'
+        },
+        locale: {
+            control: 'text',
+            description: 'Locale used for formatting (default: "en-US")'
+        },
+        allowRange: {
+            control: 'boolean',
+            description: 'Whether date range selection is enabled'
+        },
+        activator: {
+            control: 'object',
+            description: 'Custom activator for the popover'
+        },
+        disableDatesAfter: {
+            control: 'date',
+            description: 'Dates after this value are disabled'
+        },
+        disableDatesBefore: {
+            control: 'date',
+            description: 'Dates before this value are disabled'
+        },
+        multiMonth: {
+            control: 'boolean',
+            description: 'Whether multiple months are shown'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the DatePicker is disabled'
+        },
+        showTimePicker: {
+            control: 'boolean',
+            description: 'Whether a time picker is displayed'
+        },
+        autoFocus: {
+            control: 'boolean',
+            description: 'Whether the input is focused automatically'
+        },
+        maxDate: {
+            control: 'date',
+            description: 'Maximum selectable date'
+        },
+        minDate: {
+            control: 'date',
+            description: 'Minimum selectable date'
+        },
+        inline: {
+            control: 'boolean',
+            description: 'Whether the calendar is displayed inline'
+        },
+        closeAfterDateSelection: {
+            control: 'boolean',
+            description: 'Whether to close picker after date selection'
+        },
+        preferredAlignment: {
+            control: 'select',
+            options: [
+                'left',
+                'center',
+                'right'
+            ],
+            description: 'Alignment of the popover'
+        },
+        preferredPosition: {
+            control: 'select',
+            options: [
+                'above',
+                'below'
+            ],
+            description: 'Position of the popover'
+        },
+        includeHourlyPresets: {
+            control: 'boolean',
+            description: 'Whether hourly presets are included'
+        },
+        customPresets: {
+            control: 'object',
+            description: 'Custom presets to include'
+        },
+        footer: {
+            control: 'object',
+            description: 'Optional footer component to display'
+        },
+        onChange: {
+            action: 'dateChanged',
+            description: 'Callback function called when the date changes'
+        },
+        onBlur: {
+            action: 'blurred',
+            description: 'Callback function for when the field loses focus'
+        }
+    }
+};
+export var Default = {
+    render: function(args) {
+        var _useState = _sliced_to_array(useState(args.value), 2), selectedDate = _useState[0], setSelectedDate = _useState[1];
+        return /*#__PURE__*/ _jsx(DatePicker, _object_spread_props(_object_spread({}, args), {
+            value: selectedDate,
+            onChange: function(date) {
+                var _args_onChange;
+                setSelectedDate(date);
+                (_args_onChange = args.onChange) === null || _args_onChange === void 0 ? void 0 : _args_onChange.call(args, date);
+            }
+        }));
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var WithPlaceholder = {
+    args: {
+        placeholder: 'Choose a date...'
+    },
+    render: function(args) {
+        var _useState = _sliced_to_array(useState(null), 2), selectedDate = _useState[0], setSelectedDate = _useState[1];
+        return /*#__PURE__*/ _jsx(DatePicker, _object_spread_props(_object_spread({}, args), {
+            value: selectedDate,
+            onChange: setSelectedDate
+        }));
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var WithHelpText = {
+    args: {
+        label: 'Event date',
+        helpText: 'Select the date when the event will take place'
+    },
+    render: function(args) {
+        var _useState = _sliced_to_array(useState(null), 2), selectedDate = _useState[0], setSelectedDate = _useState[1];
+        return /*#__PURE__*/ _jsx(DatePicker, _object_spread_props(_object_spread({}, args), {
+            value: selectedDate,
+            onChange: setSelectedDate
+        }));
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var WithError = {
+    args: {
+        label: 'Deadline',
+        error: 'Please select a valid deadline date'
+    },
+    render: function(args) {
+        var _useState = _sliced_to_array(useState(null), 2), selectedDate = _useState[0], setSelectedDate = _useState[1];
+        return /*#__PURE__*/ _jsx(DatePicker, _object_spread_props(_object_spread({}, args), {
+            value: selectedDate,
+            onChange: setSelectedDate
+        }));
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var Disabled = {
+    args: {
+        label: 'Disabled date picker',
+        disabled: true,
+        value: new Date()
+    }
+};
+export var DateRange = {
+    args: {
+        label: 'Date range',
+        allowRange: true,
+        helpText: 'Select start and end dates for the period'
+    },
+    render: function(args) {
+        var _useState = _sliced_to_array(useState({
+            start: null,
+            end: null
+        }), 2), selectedRange = _useState[0], setSelectedRange = _useState[1];
+        return /*#__PURE__*/ _jsx(DatePicker, _object_spread_props(_object_spread({}, args), {
+            value: selectedRange,
+            onChange: setSelectedRange
+        }));
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: transformStorySource
+            },
+            description: {
+                story: 'Date pickers can be configured to allow range selection for periods.'
+            }
+        }
+    }
+};
+export var WithRestrictions = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(null), 2), selectedDate = _useState[0], setSelectedDate = _useState[1];
+        var today = new Date();
+        var maxDate = new Date();
+        maxDate.setDate(today.getDate() + 30); // 30 days from today
+        return /*#__PURE__*/ _jsx(DatePicker, {
+            label: "Available dates",
+            helpText: "Only dates within the next 30 days are available",
+            value: selectedDate,
+            onChange: setSelectedDate,
+            disableDatesBefore: today,
+            disableDatesAfter: maxDate
+        });
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: transformStorySource
+            },
+            description: {
+                story: 'Date pickers can restrict selectable dates to specific ranges.'
+            }
+        }
+    }
+};
+export var FormExample = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(null), 2), startDate = _useState[0], setStartDate = _useState[1];
+        var _useState1 = _sliced_to_array(useState(null), 2), endDate = _useState1[0], setEndDate = _useState1[1];
+        var _useState2 = _sliced_to_array(useState(null), 2), eventDate = _useState2[0], setEventDate = _useState2[1];
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Event Planning Form",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                gap: "6",
+                children: [
+                    /*#__PURE__*/ _jsx(DatePicker, {
+                        label: "Planning start date",
+                        value: startDate,
+                        onChange: setStartDate,
+                        helpText: "When do you want to start planning?"
+                    }),
+                    /*#__PURE__*/ _jsx(DatePicker, {
+                        label: "Event date",
+                        value: eventDate,
+                        onChange: setEventDate,
+                        disableDatesBefore: startDate,
+                        helpText: "When will the event take place?"
+                    }),
+                    /*#__PURE__*/ _jsx(DatePicker, {
+                        label: "Planning deadline",
+                        value: endDate,
+                        onChange: setEndDate,
+                        disableDatesBefore: startDate,
+                        disableDatesAfter: eventDate,
+                        helpText: "When should planning be completed?"
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            marginTop: '1rem',
+                            padding: '1rem',
+                            backgroundColor: '#f9f9f9',
+                            borderRadius: '4px'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "headingSm",
+                                style: {
+                                    marginBottom: '0.5rem'
+                                },
+                                children: "Selected Dates:"
+                            }),
+                            /*#__PURE__*/ _jsxs(Text, {
+                                children: [
+                                    "Planning Start: ",
+                                    startDate ? startDate.toLocaleDateString() : 'Not selected'
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(Text, {
+                                children: [
+                                    "Event Date: ",
+                                    eventDate ? eventDate.toLocaleDateString() : 'Not selected'
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(Text, {
+                                children: [
+                                    "Planning Deadline: ",
+                                    endDate ? endDate.toLocaleDateString() : 'Not selected'
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: transformStorySource
+            },
+            description: {
+                story: 'Multiple date pickers can work together with interdependent constraints.'
+            }
+        }
+    }
+};
+export var BookingExample = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(null), 2), checkIn = _useState[0], setCheckIn = _useState[1];
+        var _useState1 = _sliced_to_array(useState(null), 2), checkOut = _useState1[0], setCheckOut = _useState1[1];
+        var today = new Date();
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Hotel Booking",
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsxs(Box, {
+                    style: {
+                        display: 'grid',
+                        gridTemplateColumns: '1fr 1fr',
+                        gap: '1rem'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(DatePicker, {
+                            label: "Check-in date",
+                            value: checkIn,
+                            onChange: function(date) {
+                                setCheckIn(date);
+                                if (checkOut && date && date >= checkOut) {
+                                    setCheckOut(null);
+                                }
+                            },
+                            disableDatesBefore: today
+                        }),
+                        /*#__PURE__*/ _jsx(DatePicker, {
+                            label: "Check-out date",
+                            value: checkOut,
+                            onChange: setCheckOut,
+                            disableDatesBefore: checkIn || today
+                        })
+                    ]
+                }),
+                checkIn && checkOut && /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        marginTop: '1rem',
+                        padding: '1rem',
+                        backgroundColor: '#e8f5e8',
+                        borderRadius: '4px',
+                        border: '1px solid #c3e6c3'
+                    },
+                    children: /*#__PURE__*/ _jsxs(Text, {
+                        children: [
+                            "Stay duration: ",
+                            Math.ceil((checkOut - checkIn) / (1000 * 60 * 60 * 24)),
+                            " nights"
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: transformStorySource
+            },
+            description: {
+                story: 'Real-world booking example with dependent date selection.'
+            }
+        }
+    }
+};