@shipfox/react-ui 0.25.0 → 0.27.0

package/dist/components/date-picker/date-picker.stories.js

@@ -1,349 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { argosScreenshot } from '@argos-ci/storybook/vitest';
-import { within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { subDays } from 'date-fns';
-import { useState } from 'react';
-import { DateTimeRangePicker } from '../date-time-range-picker/date-time-range-picker.js';
-import { DatePicker } from './date-picker.js';
-const meta = {
-    title: 'Components/DatePicker',
-    component: DatePicker,
-    parameters: {
-        layout: 'centered'
-    }
-};
-export default meta;
-const OPEN_CALENDAR_REGEX = /open calendar/i;
-const isTestEnvironment = ()=>typeof navigator !== 'undefined' && navigator.webdriver === true;
-async function openCalendarAndScreenshot(ctx, screenshotName) {
-    const { canvasElement, step } = ctx;
-    const canvas = within(canvasElement);
-    const user = userEvent.setup();
-    let triggerButton = null;
-    await step('Open the calendar popover', async ()=>{
-        triggerButton = canvas.getByRole('button', {
-            name: OPEN_CALENDAR_REGEX
-        });
-        await user.click(triggerButton);
-    });
-    await step('Wait for calendar to appear and render', async ()=>{
-        await new Promise((resolve)=>setTimeout(resolve, 300));
-        if (isTestEnvironment() && triggerButton instanceof HTMLElement) {
-            triggerButton.style.display = 'none';
-        }
-        await new Promise((resolve)=>setTimeout(resolve, 100));
-    });
-    await argosScreenshot(ctx, screenshotName);
-}
-export const DatePickerStory = {
-    play: (ctx)=>openCalendarAndScreenshot(ctx, 'DatePicker Calendar Open'),
-    render: ()=>{
-        const [date, setDate] = useState(new Date());
-        return /*#__PURE__*/ _jsx("div", {
-            className: "relative flex h-600 w-500 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible",
-            children: /*#__PURE__*/ _jsx(DatePicker, {
-                date: date,
-                onDateSelect: setDate,
-                onClear: ()=>setDate(undefined),
-                placeholder: "DD/MM/YYYY"
-            })
-        });
-    }
-};
-export const DatePickerWithThresholdStory = {
-    play: (ctx)=>openCalendarAndScreenshot(ctx, 'DatePicker With Threshold Calendar Open'),
-    render: ()=>{
-        const [date, setDate] = useState(new Date());
-        return /*#__PURE__*/ _jsx("div", {
-            className: "relative flex h-600 w-500 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible",
-            children: /*#__PURE__*/ _jsx(DatePicker, {
-                date: date,
-                onDateSelect: setDate,
-                onClear: ()=>setDate(undefined),
-                placeholder: "DD/MM/YYYY",
-                maxDisabledOffsetDays: 30
-            })
-        });
-    }
-};
-export const DateRangePickerStory = {
-    play: (ctx)=>openCalendarAndScreenshot(ctx, 'DateRangePicker Calendar Open'),
-    render: ()=>{
-        const [dateRange, setDateRange] = useState({
-            start: new Date(),
-            end: subDays(new Date(), -30)
-        });
-        return /*#__PURE__*/ _jsx("div", {
-            className: "relative flex h-600 w-800 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible",
-            children: /*#__PURE__*/ _jsx(DateTimeRangePicker, {
-                dateRange: dateRange,
-                onDateRangeSelect: setDateRange,
-                onClear: ()=>setDateRange(undefined),
-                placeholder: "DD/MM/YYYY - DD/MM/YYYY",
-                className: "min-w-280"
-            })
-        });
-    }
-};
-export const AllStates = {
-    render: ()=>{
-        const now = new Date();
-        const past = subDays(now, 30);
-        return /*#__PURE__*/ _jsxs("div", {
-            className: "flex flex-col gap-32 p-32 min-w-350",
-            children: [
-                /*#__PURE__*/ _jsxs("div", {
-                    children: [
-                        /*#__PURE__*/ _jsx("h3", {
-                            className: "text-lg font-semibold mb-16 text-foreground-neutral-base",
-                            children: "Single Date Picker"
-                        }),
-                        /*#__PURE__*/ _jsxs("div", {
-                            className: "flex flex-col gap-16",
-                            children: [
-                                /*#__PURE__*/ _jsxs("div", {
-                                    children: [
-                                        /*#__PURE__*/ _jsx("p", {
-                                            className: "text-xs text-foreground-neutral-subtle mb-8 font-mono",
-                                            children: "DEFAULT"
-                                        }),
-                                        /*#__PURE__*/ _jsx(DatePicker, {
-                                            placeholder: "DD/MM/YYYY"
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsxs("div", {
-                                    children: [
-                                        /*#__PURE__*/ _jsx("p", {
-                                            className: "text-xs text-foreground-neutral-subtle mb-8 font-mono",
-                                            children: "FILLED"
-                                        }),
-                                        /*#__PURE__*/ _jsx(DatePicker, {
-                                            date: new Date(),
-                                            onClear: ()=>{
-                                            /* noop for demo */ },
-                                            placeholder: "DD/MM/YYYY"
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsxs("div", {
-                                    children: [
-                                        /*#__PURE__*/ _jsx("p", {
-                                            className: "text-xs text-foreground-neutral-subtle mb-8 font-mono",
-                                            children: "ERROR"
-                                        }),
-                                        /*#__PURE__*/ _jsx(DatePicker, {
-                                            date: new Date(),
-                                            onClear: ()=>{
-                                            /* noop for demo */ },
-                                            state: "error",
-                                            placeholder: "DD/MM/YYYY"
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsxs("div", {
-                                    children: [
-                                        /*#__PURE__*/ _jsx("p", {
-                                            className: "text-xs text-foreground-neutral-subtle mb-8 font-mono",
-                                            children: "DISABLED"
-                                        }),
-                                        /*#__PURE__*/ _jsx(DatePicker, {
-                                            placeholder: "DD/MM/YYYY",
-                                            state: "disabled"
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsxs("div", {
-                                    children: [
-                                        /*#__PURE__*/ _jsx("p", {
-                                            className: "text-xs text-foreground-neutral-subtle mb-8 font-mono",
-                                            children: "SMALL"
-                                        }),
-                                        /*#__PURE__*/ _jsx(DatePicker, {
-                                            size: "small",
-                                            placeholder: "DD/MM/YYYY"
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsxs("div", {
-                                    children: [
-                                        /*#__PURE__*/ _jsx("p", {
-                                            className: "text-xs text-foreground-neutral-subtle mb-8 font-mono",
-                                            children: "COMPONENT VARIANT"
-                                        }),
-                                        /*#__PURE__*/ _jsx(DatePicker, {
-                                            variant: "component",
-                                            placeholder: "DD/MM/YYYY"
-                                        })
-                                    ]
-                                })
-                            ]
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsxs("div", {
-                    children: [
-                        /*#__PURE__*/ _jsx("h3", {
-                            className: "text-lg font-semibold mb-16 text-foreground-neutral-base",
-                            children: "Date Range Picker"
-                        }),
-                        /*#__PURE__*/ _jsxs("div", {
-                            className: "flex flex-col gap-16",
-                            children: [
-                                /*#__PURE__*/ _jsxs("div", {
-                                    children: [
-                                        /*#__PURE__*/ _jsx("p", {
-                                            className: "text-xs text-foreground-neutral-subtle mb-8 font-mono",
-                                            children: "DEFAULT"
-                                        }),
-                                        /*#__PURE__*/ _jsx(DateTimeRangePicker, {
-                                            placeholder: "DD/MM/YYYY - DD/MM/YYYY"
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsxs("div", {
-                                    children: [
-                                        /*#__PURE__*/ _jsx("p", {
-                                            className: "text-xs text-foreground-neutral-subtle mb-8 font-mono",
-                                            children: "FILLED"
-                                        }),
-                                        /*#__PURE__*/ _jsx(DateTimeRangePicker, {
-                                            dateRange: {
-                                                start: past,
-                                                end: now
-                                            },
-                                            onClear: ()=>{
-                                            /* noop for demo */ },
-                                            placeholder: "DD/MM/YYYY - DD/MM/YYYY"
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsxs("div", {
-                                    children: [
-                                        /*#__PURE__*/ _jsx("p", {
-                                            className: "text-xs text-foreground-neutral-subtle mb-8 font-mono",
-                                            children: "ERROR"
-                                        }),
-                                        /*#__PURE__*/ _jsx(DateTimeRangePicker, {
-                                            dateRange: {
-                                                start: past,
-                                                end: now
-                                            },
-                                            onClear: ()=>{
-                                            /* noop for demo */ },
-                                            state: "error",
-                                            placeholder: "DD/MM/YYYY - DD/MM/YYYY"
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsxs("div", {
-                                    children: [
-                                        /*#__PURE__*/ _jsx("p", {
-                                            className: "text-xs text-foreground-neutral-subtle mb-8 font-mono",
-                                            children: "DISABLED"
-                                        }),
-                                        /*#__PURE__*/ _jsx(DateTimeRangePicker, {
-                                            placeholder: "DD/MM/YYYY - DD/MM/YYYY",
-                                            state: "disabled"
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsxs("div", {
-                                    children: [
-                                        /*#__PURE__*/ _jsx("p", {
-                                            className: "text-xs text-foreground-neutral-subtle mb-8 font-mono",
-                                            children: "SMALL"
-                                        }),
-                                        /*#__PURE__*/ _jsx(DateTimeRangePicker, {
-                                            size: "small",
-                                            placeholder: "DD/MM/YYYY - DD/MM/YYYY"
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsxs("div", {
-                                    children: [
-                                        /*#__PURE__*/ _jsx("p", {
-                                            className: "text-xs text-foreground-neutral-subtle mb-8 font-mono",
-                                            children: "COMPONENT VARIANT"
-                                        }),
-                                        /*#__PURE__*/ _jsx(DateTimeRangePicker, {
-                                            variant: "component",
-                                            placeholder: "DD/MM/YYYY - DD/MM/YYYY"
-                                        })
-                                    ]
-                                })
-                            ]
-                        })
-                    ]
-                })
-            ]
-        });
-    }
-};
-export const DateFormats = {
-    render: ()=>{
-        const [date, setDate] = useState(new Date());
-        const formats = [
-            {
-                format: 'MMMM dd, yyyy',
-                placeholder: 'Month DD, YYYY',
-                label: 'MMMM dd, yyyy'
-            },
-            {
-                format: 'MMMM d, yyyy',
-                placeholder: 'Month D, YYYY',
-                label: 'MMMM d, yyyy'
-            },
-            {
-                format: 'MMM dd, yyyy',
-                placeholder: 'Mon DD, YYYY',
-                label: 'MMM dd, yyyy'
-            },
-            {
-                format: 'dd/MM/yyyy',
-                placeholder: 'DD/MM/YYYY',
-                label: 'dd/MM/yyyy'
-            },
-            {
-                format: 'MM/dd/yyyy',
-                placeholder: 'MM/DD/YYYY',
-                label: 'MM/dd/yyyy'
-            },
-            {
-                format: 'yyyy-MM-dd',
-                placeholder: 'YYYY-MM-DD',
-                label: 'yyyy-MM-dd'
-            }
-        ];
-        return /*#__PURE__*/ _jsxs("div", {
-            className: "flex flex-col gap-32 p-32 min-w-350",
-            children: [
-                /*#__PURE__*/ _jsx("h3", {
-                    className: "text-lg font-semibold mb-16 text-foreground-neutral-base",
-                    children: "Date Format Examples"
-                }),
-                /*#__PURE__*/ _jsx("div", {
-                    className: "flex flex-col gap-16",
-                    children: formats.map(({ format, placeholder, label })=>/*#__PURE__*/ _jsxs("div", {
-                            children: [
-                                /*#__PURE__*/ _jsx("p", {
-                                    className: "text-xs text-foreground-neutral-subtle mb-8 font-mono",
-                                    children: label
-                                }),
-                                /*#__PURE__*/ _jsx(DatePicker, {
-                                    date: date,
-                                    onDateSelect: setDate,
-                                    onClear: ()=>setDate(undefined),
-                                    dateFormat: format,
-                                    placeholder: placeholder
-                                })
-                            ]
-                        }, format))
-                })
-            ]
-        });
-    }
-};
-
-//# sourceMappingURL=date-picker.stories.js.map

package/dist/components/dropdown-input/dropdown-input.stories.js

@@ -1,240 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, ButtonLink } from '../../components/button/index.js';
-import { DropdownInput } from '../../components/dropdown-input/index.js';
-import { Icon } from '../../components/icon/index.js';
-import { Label } from '../../components/label/index.js';
-import { useMemo, useRef, useState } from 'react';
-const sampleItems = [
-    {
-        id: 'apache',
-        label: 'apache',
-        value: 'apache'
-    },
-    {
-        id: 'apache-superset',
-        label: 'apache-superset',
-        value: 'apache-superset'
-    },
-    {
-        id: 'apaleo',
-        label: 'apaleo',
-        value: 'apaleo'
-    },
-    {
-        id: 'apollo',
-        label: 'apollo',
-        value: 'apollo'
-    },
-    {
-        id: 'apple',
-        label: 'apple',
-        value: 'apple'
-    },
-    {
-        id: 'apache-kafka',
-        label: 'apache-kafka',
-        value: 'apache-kafka'
-    }
-];
-const meta = {
-    title: 'Components/DropdownInput',
-    component: DropdownInput,
-    tags: [
-        'autodocs'
-    ],
-    parameters: {
-        layout: 'centered'
-    }
-};
-export default meta;
-function CustomEmptyStateContent({ value, onValueChange, onOpenChange, contactSupportHref, inputRef }) {
-    return /*#__PURE__*/ _jsxs("div", {
-        className: "flex flex-col items-start justify-center",
-        children: [
-            /*#__PURE__*/ _jsxs(Button, {
-                type: "button",
-                variant: "transparent",
-                className: "!px-4 w-full justify-start",
-                onClick: ()=>{
-                    onValueChange(value);
-                    onOpenChange(false);
-                    inputRef.current?.blur();
-                },
-                children: [
-                    /*#__PURE__*/ _jsx(Icon, {
-                        name: "addLine",
-                        className: "size-16 text-foreground-neutral-subtle"
-                    }),
-                    /*#__PURE__*/ _jsx("span", {
-                        className: "truncate",
-                        children: value
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsxs("p", {
-                className: "px-8 whitespace-pre-wrap",
-                children: [
-                    "Repository list is limited to 100. Enter the full repository path or",
-                    ' ',
-                    /*#__PURE__*/ _jsx(ButtonLink, {
-                        variant: "base",
-                        underline: true,
-                        href: contactSupportHref,
-                        target: "_blank",
-                        rel: "noopener noreferrer",
-                        className: "!font-regular",
-                        children: "contact support"
-                    }),
-                    "."
-                ]
-            })
-        ]
-    });
-}
-export const Default = {
-    args: {},
-    render: ()=>{
-        const [value, setValue] = useState('');
-        const [open, setOpen] = useState(false);
-        const [focusedIndex, setFocusedIndex] = useState(-1);
-        const [selectedItem, setSelectedItem] = useState(null);
-        const inputRef = useRef(null);
-        const items = useMemo(()=>{
-            if (value.length < 1) return sampleItems;
-            const lowerQuery = value.toLowerCase();
-            return sampleItems.filter((item)=>item.label.toLowerCase().includes(lowerQuery));
-        }, [
-            value
-        ]);
-        return /*#__PURE__*/ _jsxs("div", {
-            className: "w-[80vw] md:w-500",
-            children: [
-                /*#__PURE__*/ _jsx(Label, {
-                    htmlFor: "dropdown-input",
-                    children: "Search repositories"
-                }),
-                /*#__PURE__*/ _jsx(DropdownInput, {
-                    id: "dropdown-input",
-                    value: value,
-                    onValueChange: (newValue)=>{
-                        setValue(newValue);
-                        if (selectedItem && selectedItem.label !== newValue) {
-                            setSelectedItem(null);
-                        }
-                    },
-                    onSelect: (item)=>{
-                        setSelectedItem(item);
-                    },
-                    selectedItem: selectedItem,
-                    items: items,
-                    open: open,
-                    onOpenChange: setOpen,
-                    focusedIndex: focusedIndex,
-                    onFocusedIndexChange: setFocusedIndex,
-                    placeholder: "Type to search...",
-                    emptyPlaceholder: /*#__PURE__*/ _jsx(CustomEmptyStateContent, {
-                        value: value,
-                        onValueChange: setValue,
-                        onOpenChange: setOpen,
-                        contactSupportHref: "https://support.example.com",
-                        inputRef: inputRef
-                    })
-                })
-            ]
-        });
-    }
-};
-export const EmptyState = {
-    args: {},
-    render: ()=>{
-        const [value, setValue] = useState('abcxyz');
-        const [open, setOpen] = useState(true);
-        const [focusedIndex, setFocusedIndex] = useState(-1);
-        return /*#__PURE__*/ _jsxs("div", {
-            className: "w-[80vw] md:w-500",
-            children: [
-                /*#__PURE__*/ _jsx(Label, {
-                    htmlFor: "dropdown-empty",
-                    children: "No results"
-                }),
-                /*#__PURE__*/ _jsx(DropdownInput, {
-                    id: "dropdown-empty",
-                    value: value,
-                    onValueChange: setValue,
-                    items: [],
-                    open: open,
-                    onOpenChange: setOpen,
-                    focusedIndex: focusedIndex,
-                    onFocusedIndexChange: setFocusedIndex,
-                    placeholder: "Type to search...",
-                    emptyPlaceholder: "No results found"
-                })
-            ]
-        });
-    }
-};
-export const LoadingState = {
-    args: {},
-    render: ()=>{
-        const [value, setValue] = useState('apache');
-        const [open, setOpen] = useState(true);
-        const [focusedIndex, setFocusedIndex] = useState(-1);
-        return /*#__PURE__*/ _jsxs("div", {
-            className: "w-[80vw] md:w-500",
-            children: [
-                /*#__PURE__*/ _jsx(Label, {
-                    htmlFor: "dropdown-loading",
-                    children: "Loading"
-                }),
-                /*#__PURE__*/ _jsx(DropdownInput, {
-                    id: "dropdown-loading",
-                    value: value,
-                    onValueChange: setValue,
-                    items: [],
-                    iconRight: /*#__PURE__*/ _jsx(Icon, {
-                        name: "spinner",
-                        className: "size-16 text-foreground-neutral-base"
-                    }),
-                    open: open,
-                    onOpenChange: setOpen,
-                    focusedIndex: focusedIndex,
-                    onFocusedIndexChange: setFocusedIndex,
-                    placeholder: "Type to search...",
-                    emptyPlaceholder: "Fetching..."
-                })
-            ]
-        });
-    }
-};
-export const DisabledState = {
-    args: {},
-    render: ()=>{
-        const [value, setValue] = useState('apache');
-        const [open, setOpen] = useState(false);
-        const [focusedIndex, setFocusedIndex] = useState(-1);
-        return /*#__PURE__*/ _jsxs("div", {
-            className: "w-[80vw] md:w-500",
-            children: [
-                /*#__PURE__*/ _jsx(Label, {
-                    htmlFor: "dropdown-disabled",
-                    children: "Disabled"
-                }),
-                /*#__PURE__*/ _jsx(DropdownInput, {
-                    id: "dropdown-disabled",
-                    value: value,
-                    onValueChange: setValue,
-                    items: sampleItems,
-                    disabled: true,
-                    open: open,
-                    onOpenChange: setOpen,
-                    focusedIndex: focusedIndex,
-                    onFocusedIndexChange: setFocusedIndex,
-                    placeholder: "Disabled input",
-                    emptyPlaceholder: "No results found"
-                })
-            ]
-        });
-    }
-};
-
-//# sourceMappingURL=dropdown-input.stories.js.map