@shipfox/react-ui 0.25.0 → 0.26.0

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

@@ -1,462 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { argosScreenshot } from '@argos-ci/storybook/vitest';
-import { screen, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { useState } from 'react';
-import { Avatar } from '../avatar/index.js';
-import { Button } from '../button/index.js';
-import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './dropdown-menu.js';
-const OPEN_MENU_REGEX = /open menu/i;
-const ACTIONS_REGEX = /actions/i;
-const ORGANIZATION_REGEX = /organization/i;
-const COMPLETE_MENU_REGEX = /complete menu/i;
-const SWITCH_ORGANIZATION_REGEX = /switch organization/i;
-const isTestEnvironment = ()=>typeof navigator !== 'undefined' && navigator.webdriver === true;
-async function openMenuAndScreenshot(ctx, triggerRegex, screenshotName, additionalSteps) {
-    const { canvasElement, step } = ctx;
-    const canvas = within(canvasElement);
-    const user = userEvent.setup();
-    let triggerButton = null;
-    await step('Open the dropdown menu', async ()=>{
-        triggerButton = canvas.getByRole('button', {
-            name: triggerRegex
-        });
-        await user.click(triggerButton);
-    });
-    await step('Wait for menu to appear and render', async ()=>{
-        await screen.findByRole('menu');
-        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);
-    if (additionalSteps) {
-        await additionalSteps(ctx, user);
-    }
-}
-const meta = {
-    title: 'Components/DropdownMenu',
-    component: DropdownMenuContent,
-    subcomponents: {
-        DropdownMenu,
-        DropdownMenuTrigger,
-        DropdownMenuItem,
-        DropdownMenuCheckboxItem,
-        DropdownMenuRadioGroup,
-        DropdownMenuRadioItem,
-        DropdownMenuLabel,
-        DropdownMenuSeparator,
-        DropdownMenuGroup,
-        DropdownMenuSub,
-        DropdownMenuSubTrigger,
-        DropdownMenuSubContent
-    },
-    parameters: {
-        layout: 'centered'
-    },
-    tags: [
-        'autodocs'
-    ],
-    argTypes: {
-        side: {
-            control: 'select',
-            options: [
-                'top',
-                'right',
-                'bottom',
-                'left'
-            ],
-            description: 'The preferred side of the trigger to render against',
-            table: {
-                defaultValue: {
-                    summary: 'bottom'
-                }
-            }
-        },
-        align: {
-            control: 'select',
-            options: [
-                'start',
-                'center',
-                'end'
-            ],
-            description: 'The preferred alignment against the trigger',
-            table: {
-                defaultValue: {
-                    summary: 'start'
-                }
-            }
-        },
-        sideOffset: {
-            control: {
-                type: 'number',
-                min: 0,
-                max: 20,
-                step: 1
-            },
-            description: 'Distance in pixels from the trigger',
-            table: {
-                defaultValue: {
-                    summary: '4'
-                }
-            }
-        },
-        alignOffset: {
-            control: {
-                type: 'number',
-                min: -20,
-                max: 20,
-                step: 1
-            },
-            description: 'Offset in pixels from the alignment edge',
-            table: {
-                defaultValue: {
-                    summary: '0'
-                }
-            }
-        },
-        size: {
-            control: 'select',
-            options: [
-                'sm',
-                'md',
-                'lg'
-            ],
-            description: 'Size variant of the dropdown content',
-            table: {
-                defaultValue: {
-                    summary: 'md'
-                }
-            }
-        }
-    },
-    args: {
-        side: 'bottom',
-        align: 'center',
-        sideOffset: 8,
-        alignOffset: 0,
-        size: 'md'
-    }
-};
-export default meta;
-export const Default = {
-    play: (ctx)=>openMenuAndScreenshot(ctx, OPEN_MENU_REGEX, 'DropdownMenu Default Open'),
-    render: function DefaultStory(args) {
-        const [container, setContainer] = useState(null);
-        return /*#__PURE__*/ _jsx("div", {
-            ref: setContainer,
-            className: "relative flex h-500 w-500 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible",
-            children: container && /*#__PURE__*/ _jsxs(DropdownMenu, {
-                children: [
-                    /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
-                        asChild: true,
-                        children: /*#__PURE__*/ _jsx(Button, {
-                            variant: "secondary",
-                            children: "Open Menu"
-                        })
-                    }),
-                    /*#__PURE__*/ _jsxs(DropdownMenuContent, {
-                        ...args,
-                        container: container,
-                        side: "bottom",
-                        align: "center",
-                        children: [
-                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
-                                icon: "editLine",
-                                children: "Edit"
-                            }),
-                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
-                                icon: "addLine",
-                                children: "Add"
-                            }),
-                            /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
-                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
-                                icon: "deleteBinLine",
-                                children: "Delete"
-                            })
-                        ]
-                    })
-                ]
-            })
-        });
-    }
-};
-export const WithShortcuts = {
-    play: (ctx)=>openMenuAndScreenshot(ctx, ACTIONS_REGEX, 'DropdownMenu With Shortcuts Open'),
-    render: function WithShortcutsStory(args) {
-        const [container, setContainer] = useState(null);
-        return /*#__PURE__*/ _jsx("div", {
-            ref: setContainer,
-            className: "relative flex h-500 w-500 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible",
-            children: container && /*#__PURE__*/ _jsxs(DropdownMenu, {
-                children: [
-                    /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
-                        asChild: true,
-                        children: /*#__PURE__*/ _jsx(Button, {
-                            variant: "secondary",
-                            children: "Actions"
-                        })
-                    }),
-                    /*#__PURE__*/ _jsxs(DropdownMenuContent, {
-                        ...args,
-                        container: container,
-                        side: "bottom",
-                        align: "center",
-                        children: [
-                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
-                                icon: "fileCopyLine",
-                                shortcut: "⌘C",
-                                children: "Copy"
-                            }),
-                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
-                                icon: "clipboardLine",
-                                shortcut: "⌘V",
-                                children: "Paste"
-                            }),
-                            /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
-                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
-                                icon: "deleteBinLine",
-                                shortcut: "⌘⌫",
-                                children: "Delete"
-                            })
-                        ]
-                    })
-                ]
-            })
-        });
-    }
-};
-function UserProfileSection() {
-    return /*#__PURE__*/ _jsxs("div", {
-        className: "flex items-center gap-8 px-8 py-6",
-        children: [
-            /*#__PURE__*/ _jsx(Avatar, {
-                size: "sm",
-                content: "image",
-                src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=faces",
-                fallback: "John Doe"
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                className: "flex flex-col",
-                children: [
-                    /*#__PURE__*/ _jsx("span", {
-                        className: "text-sm font-medium leading-20 text-foreground-neutral-base",
-                        children: "John Doe"
-                    }),
-                    /*#__PURE__*/ _jsx("span", {
-                        className: "text-xs leading-16 text-foreground-neutral-muted",
-                        children: "john@example.com"
-                    })
-                ]
-            })
-        ]
-    });
-}
-function OrganizationItem() {
-    return /*#__PURE__*/ _jsxs("div", {
-        className: "flex items-center gap-8 px-8 py-6",
-        children: [
-            /*#__PURE__*/ _jsx(Avatar, {
-                size: "3xs",
-                content: "logo",
-                logoName: "stripe",
-                radius: "rounded"
-            }),
-            /*#__PURE__*/ _jsx("span", {
-                className: "text-sm leading-20 text-foreground-neutral-subtle",
-                children: "Stripe's organization"
-            })
-        ]
-    });
-}
-export const OrganizationMenu = {
-    args: {
-        size: 'md'
-    },
-    play: (ctx)=>openMenuAndScreenshot(ctx, ORGANIZATION_REGEX, 'DropdownMenu Organization Menu Open', async ({ step }, user)=>{
-            await step('Hover over submenu trigger', async ()=>{
-                const submenuTrigger = screen.getByRole('menuitem', {
-                    name: SWITCH_ORGANIZATION_REGEX
-                });
-                await user.hover(submenuTrigger);
-                await new Promise((resolve)=>setTimeout(resolve, 200));
-            });
-            await argosScreenshot(ctx, 'DropdownMenu Organization Menu Submenu Open');
-        }),
-    render: function OrganizationMenuStory(args) {
-        const [container, setContainer] = useState(null);
-        return /*#__PURE__*/ _jsx("div", {
-            ref: setContainer,
-            className: "relative flex h-600 w-600 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible",
-            children: container && /*#__PURE__*/ _jsxs(DropdownMenu, {
-                children: [
-                    /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
-                        asChild: true,
-                        children: /*#__PURE__*/ _jsx(Button, {
-                            variant: "secondary",
-                            iconLeft: "buildingLine",
-                            children: "Organization"
-                        })
-                    }),
-                    /*#__PURE__*/ _jsxs(DropdownMenuContent, {
-                        ...args,
-                        container: container,
-                        side: "bottom",
-                        align: "start",
-                        children: [
-                            /*#__PURE__*/ _jsx(OrganizationItem, {}),
-                            /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
-                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
-                                icon: "settings3Line",
-                                children: "Settings"
-                            }),
-                            /*#__PURE__*/ _jsxs(DropdownMenuSub, {
-                                children: [
-                                    /*#__PURE__*/ _jsx(DropdownMenuSubTrigger, {
-                                        icon: "arrowLeftRightLine",
-                                        children: "Switch organization"
-                                    }),
-                                    /*#__PURE__*/ _jsxs(DropdownMenuSubContent, {
-                                        children: [
-                                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
-                                                icon: "shipfox",
-                                                iconStyle: "text-foreground-neutral-base",
-                                                className: "text-foreground-neutral-base",
-                                                children: "Shipfox"
-                                            }),
-                                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
-                                                icon: "github",
-                                                iconStyle: "text-foreground-neutral-base",
-                                                className: "text-foreground-neutral-base",
-                                                children: "Github"
-                                            }),
-                                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
-                                                icon: "google",
-                                                iconStyle: "text-foreground-neutral-base",
-                                                className: "text-foreground-neutral-base",
-                                                children: "Google"
-                                            })
-                                        ]
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
-                                icon: "addLine",
-                                children: "New organization"
-                            })
-                        ]
-                    })
-                ]
-            })
-        });
-    }
-};
-export const CompleteExample = {
-    args: {
-        size: 'lg',
-        side: 'bottom'
-    },
-    play: (ctx)=>openMenuAndScreenshot(ctx, COMPLETE_MENU_REGEX, 'DropdownMenu Complete Example Open'),
-    render: function CompleteExampleStory(args) {
-        const [container, setContainer] = useState(null);
-        const [showNotifications, setShowNotifications] = useState(true);
-        const [showBadges, setShowBadges] = useState(false);
-        const [theme, setTheme] = useState('dark');
-        return /*#__PURE__*/ _jsx("div", {
-            ref: setContainer,
-            className: "relative flex h-600 w-500 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible",
-            children: container && /*#__PURE__*/ _jsxs(DropdownMenu, {
-                children: [
-                    /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
-                        asChild: true,
-                        children: /*#__PURE__*/ _jsx(Button, {
-                            variant: "secondary",
-                            iconLeft: "menu3Line",
-                            children: "Complete Menu"
-                        })
-                    }),
-                    /*#__PURE__*/ _jsxs(DropdownMenuContent, {
-                        ...args,
-                        className: "w-260",
-                        container: container,
-                        side: "bottom",
-                        align: "start",
-                        children: [
-                            /*#__PURE__*/ _jsx(UserProfileSection, {}),
-                            /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
-                            /*#__PURE__*/ _jsx(DropdownMenuLabel, {
-                                children: "Actions"
-                            }),
-                            /*#__PURE__*/ _jsxs(DropdownMenuGroup, {
-                                children: [
-                                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
-                                        icon: "sparklingLine",
-                                        children: "Getting started"
-                                    }),
-                                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
-                                        icon: "userLine",
-                                        children: "Profile settings"
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
-                            /*#__PURE__*/ _jsx(DropdownMenuLabel, {
-                                children: "Preferences"
-                            }),
-                            /*#__PURE__*/ _jsxs(DropdownMenuGroup, {
-                                children: [
-                                    /*#__PURE__*/ _jsx(DropdownMenuCheckboxItem, {
-                                        checked: showNotifications,
-                                        onCheckedChange: setShowNotifications,
-                                        closeOnSelect: false,
-                                        children: "Show notifications"
-                                    }),
-                                    /*#__PURE__*/ _jsx(DropdownMenuCheckboxItem, {
-                                        checked: showBadges,
-                                        onCheckedChange: setShowBadges,
-                                        closeOnSelect: false,
-                                        children: "Show badges"
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
-                            /*#__PURE__*/ _jsx(DropdownMenuLabel, {
-                                children: "Theme"
-                            }),
-                            /*#__PURE__*/ _jsxs(DropdownMenuRadioGroup, {
-                                value: theme,
-                                onValueChange: setTheme,
-                                children: [
-                                    /*#__PURE__*/ _jsx(DropdownMenuRadioItem, {
-                                        value: "light",
-                                        closeOnSelect: false,
-                                        children: "Light"
-                                    }),
-                                    /*#__PURE__*/ _jsx(DropdownMenuRadioItem, {
-                                        value: "dark",
-                                        closeOnSelect: false,
-                                        children: "Dark"
-                                    }),
-                                    /*#__PURE__*/ _jsx(DropdownMenuRadioItem, {
-                                        value: "system",
-                                        closeOnSelect: false,
-                                        children: "System"
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
-                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
-                                icon: "logoutCircleLine",
-                                children: "Log out"
-                            })
-                        ]
-                    })
-                ]
-            })
-        });
-    }
-};
-
-//# sourceMappingURL=dropdown-menu.stories.js.map