@shipfox/react-ui 0.25.0 → 0.27.0

package/dist/components/modal/modal.stories.js

@@ -1,566 +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 { Button, ButtonLink } from '../../components/button/index.js';
-import { CodeBlock, CodeBlockBody, CodeBlockContent, CodeBlockCopyButton, CodeBlockFilename, CodeBlockFiles, CodeBlockFooter, CodeBlockHeader, CodeBlockItem } from '../../components/code-block/index.js';
-import { Confetti } from '../../components/confetti/index.js';
-import { DatePicker } from '../../components/date-picker/index.js';
-import { DynamicItem } from '../../components/dynamic-item/index.js';
-import { Icon } from '../../components/icon/index.js';
-import { Input } from '../../components/input/index.js';
-import { ItemTitle } from '../../components/item/index.js';
-import { Label } from '../../components/label/index.js';
-import { MovingBorder } from '../../components/moving-border/index.js';
-import { Text } from '../../components/typography/index.js';
-import { useEffect, useRef, useState } from 'react';
-import { cn } from '../../utils/cn.js';
-import illustration2 from '../../assets/illustration-2.svg';
-import illustrationBg from '../../assets/illustration-gradient.svg';
-import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalTitle, ModalTrigger } from './modal.js';
-const OPEN_MODAL_REGEX = /open modal/i;
-const IMPORT_JOBS_REGEX = /import past jobs from github/i;
-const GITHUB_ACTIONS_REGEX = /run github actions on shipfox/i;
-const DEFAULT_START_DATE = new Date('2025-12-06T00:00:00.000Z');
-const meta = {
-    title: 'Components/Modal',
-    component: Modal,
-    tags: [
-        'autodocs'
-    ],
-    parameters: {
-        layout: 'centered'
-    }
-};
-export default meta;
-export const Default = {
-    play: async (ctx)=>{
-        const { canvasElement, step } = ctx;
-        const canvas = within(canvasElement);
-        const user = userEvent.setup();
-        await step('Open the modal', async ()=>{
-            const triggerButton = canvas.getByRole('button', {
-                name: OPEN_MODAL_REGEX
-            });
-            await user.click(triggerButton);
-        });
-        await step('Wait for dialog to appear and render', async ()=>{
-            await screen.findByRole('dialog');
-            await new Promise((resolve)=>setTimeout(resolve, 100));
-        });
-        await argosScreenshot(ctx, 'Default Modal Open');
-    },
-    render: ()=>{
-        const [open, setOpen] = useState(false);
-        return /*#__PURE__*/ _jsx("div", {
-            className: "flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip",
-            children: /*#__PURE__*/ _jsxs(Modal, {
-                open: open,
-                onOpenChange: setOpen,
-                children: [
-                    /*#__PURE__*/ _jsx(ModalTrigger, {
-                        asChild: true,
-                        children: /*#__PURE__*/ _jsx(Button, {
-                            children: "Open Modal"
-                        })
-                    }),
-                    /*#__PURE__*/ _jsxs(ModalContent, {
-                        "aria-describedby": undefined,
-                        children: [
-                            /*#__PURE__*/ _jsx(ModalTitle, {
-                                className: "sr-only",
-                                children: "Modal Title"
-                            }),
-                            /*#__PURE__*/ _jsx(ModalHeader, {
-                                children: /*#__PURE__*/ _jsx(Text, {
-                                    size: "lg",
-                                    className: "flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap",
-                                    children: "Modal Title"
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(ModalBody, {
-                                children: /*#__PURE__*/ _jsx(Text, {
-                                    size: "sm",
-                                    className: "text-foreground-neutral-subtle w-full",
-                                    children: "This modal automatically adapts between dialog (desktop) and drawer (mobile) based on screen size. Try resizing your browser window!"
-                                })
-                            }),
-                            /*#__PURE__*/ _jsxs(ModalFooter, {
-                                children: [
-                                    /*#__PURE__*/ _jsx(Button, {
-                                        variant: "transparent",
-                                        onClick: ()=>setOpen(false),
-                                        children: "Cancel"
-                                    }),
-                                    /*#__PURE__*/ _jsx(Button, {
-                                        variant: "primary",
-                                        onClick: ()=>setOpen(false),
-                                        children: "Confirm"
-                                    })
-                                ]
-                            })
-                        ]
-                    })
-                ]
-            })
-        });
-    }
-};
-export const ImportForm = {
-    play: async (ctx)=>{
-        const { canvasElement, step } = ctx;
-        const canvas = within(canvasElement);
-        const user = userEvent.setup();
-        await step('Open the modal', async ()=>{
-            const triggerButton = canvas.getByRole('button', {
-                name: IMPORT_JOBS_REGEX
-            });
-            await user.click(triggerButton);
-        });
-        await step('Wait for dialog to appear and render', async ()=>{
-            await screen.findByRole('dialog');
-            await new Promise((resolve)=>setTimeout(resolve, 100));
-        });
-        await argosScreenshot(ctx, 'Import Form Modal Open');
-    },
-    render: ()=>{
-        const [open, setOpen] = useState(false);
-        const [date, setDate] = useState(DEFAULT_START_DATE);
-        return /*#__PURE__*/ _jsx("div", {
-            className: "flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip",
-            children: /*#__PURE__*/ _jsxs(Modal, {
-                open: open,
-                onOpenChange: setOpen,
-                children: [
-                    /*#__PURE__*/ _jsx(ModalTrigger, {
-                        asChild: true,
-                        children: /*#__PURE__*/ _jsx(Button, {
-                            children: "Import past jobs from GitHub"
-                        })
-                    }),
-                    /*#__PURE__*/ _jsxs(ModalContent, {
-                        "aria-describedby": undefined,
-                        overlayClassName: "bg-background-modal-overlay",
-                        children: [
-                            /*#__PURE__*/ _jsx(ModalTitle, {
-                                className: "sr-only",
-                                children: "Import past jobs from GitHub"
-                            }),
-                            /*#__PURE__*/ _jsx(ModalHeader, {
-                                title: "Import past jobs from GitHub"
-                            }),
-                            /*#__PURE__*/ _jsxs(ModalBody, {
-                                className: "gap-20",
-                                children: [
-                                    /*#__PURE__*/ _jsx(Text, {
-                                        size: "sm",
-                                        className: "text-foreground-neutral-subtle w-full",
-                                        children: "Backfill your CI history by importing past runs from your GitHub repo. We'll handle the rest by creating a background task to import the data for you."
-                                    }),
-                                    /*#__PURE__*/ _jsxs("div", {
-                                        className: "flex flex-col gap-20 w-full",
-                                        children: [
-                                            /*#__PURE__*/ _jsxs("div", {
-                                                className: "flex flex-col gap-8 w-full",
-                                                children: [
-                                                    /*#__PURE__*/ _jsx(Label, {
-                                                        children: "Repository owner"
-                                                    }),
-                                                    /*#__PURE__*/ _jsx(Input, {
-                                                        placeholder: "apache"
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ _jsxs("div", {
-                                                className: "flex flex-col gap-8 w-full",
-                                                children: [
-                                                    /*#__PURE__*/ _jsx(Label, {
-                                                        children: "Repository name"
-                                                    }),
-                                                    /*#__PURE__*/ _jsx(Input, {
-                                                        placeholder: "kafka"
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ _jsxs("div", {
-                                                className: "flex flex-col gap-8 w-full",
-                                                children: [
-                                                    /*#__PURE__*/ _jsx(Label, {
-                                                        htmlFor: "start-date",
-                                                        children: "Start date"
-                                                    }),
-                                                    /*#__PURE__*/ _jsx(DatePicker, {
-                                                        id: "start-date",
-                                                        date: date,
-                                                        onDateSelect: setDate,
-                                                        onClear: ()=>setDate(undefined),
-                                                        placeholder: "DD/MM/YYYY"
-                                                    })
-                                                ]
-                                            })
-                                        ]
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsxs(ModalFooter, {
-                                children: [
-                                    /*#__PURE__*/ _jsx(Button, {
-                                        variant: "transparent",
-                                        onClick: ()=>setOpen(false),
-                                        children: "Cancel"
-                                    }),
-                                    /*#__PURE__*/ _jsx(Button, {
-                                        variant: "primary",
-                                        onClick: ()=>setOpen(false),
-                                        children: "Import"
-                                    })
-                                ]
-                            })
-                        ]
-                    })
-                ]
-            })
-        });
-    }
-};
-const diffCode = `jobs:
-  build:
--   runs-on: ubuntu-latest
-+   runs-on: shipfox-2vcpu-ubuntu-2404`;
-export const GithubActions = {
-    parameters: {
-        viewport: {
-            defaultViewport: 'large'
-        }
-    },
-    play: async (ctx)=>{
-        const { canvasElement, step } = ctx;
-        const canvas = within(canvasElement);
-        const user = userEvent.setup();
-        await step('Open the modal', async ()=>{
-            const triggerButton = canvas.getByRole('button', {
-                name: GITHUB_ACTIONS_REGEX
-            });
-            await user.click(triggerButton);
-        });
-        await step('Wait for dialog to appear and render', async ()=>{
-            await screen.findByRole('dialog');
-            await new Promise((resolve)=>setTimeout(resolve, 100));
-        });
-        await argosScreenshot(ctx, 'Github Actions Modal Open');
-    },
-    render: ()=>{
-        const [open, setOpen] = useState(false);
-        const [footerState, setFooterState] = useState('running');
-        const confettiRef = useRef(null);
-        useEffect(()=>{
-            if (open && footerState === 'running') {
-                const timer = setTimeout(()=>{
-                    setFooterState('done');
-                }, 3000);
-                return ()=>{
-                    clearTimeout(timer);
-                };
-            }
-        }, [
-            open,
-            footerState
-        ]);
-        useEffect(()=>{
-            if (footerState === 'done' && open) {
-                const timer = setTimeout(()=>{
-                    if (confettiRef.current) {
-                        void confettiRef.current.fire();
-                    }
-                }, 200);
-                return ()=>{
-                    clearTimeout(timer);
-                };
-            }
-        }, [
-            footerState,
-            open
-        ]);
-        useEffect(()=>{
-            if (!open) {
-                setFooterState('running');
-            }
-        }, [
-            open
-        ]);
-        return /*#__PURE__*/ _jsxs("div", {
-            className: "flex h-[50vh] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip",
-            children: [
-                /*#__PURE__*/ _jsx(Confetti, {
-                    ref: confettiRef,
-                    manualstart: true,
-                    options: {
-                        particleCount: 200,
-                        spread: 100,
-                        colors: [
-                            '#ff6b6b',
-                            '#4ecdc4',
-                            '#ffe66d',
-                            '#95e1d3'
-                        ]
-                    },
-                    className: "fixed inset-0 pointer-events-none z-100",
-                    style: {
-                        width: '100%',
-                        height: '100%'
-                    }
-                }),
-                /*#__PURE__*/ _jsxs(Modal, {
-                    open: open,
-                    onOpenChange: setOpen,
-                    children: [
-                        /*#__PURE__*/ _jsx(ModalTrigger, {
-                            asChild: true,
-                            children: /*#__PURE__*/ _jsx(Button, {
-                                children: "Run GitHub Actions on Shipfox"
-                            })
-                        }),
-                        /*#__PURE__*/ _jsxs(ModalContent, {
-                            "aria-describedby": undefined,
-                            overlayClassName: "bg-background-modal-overlay",
-                            children: [
-                                /*#__PURE__*/ _jsx(ModalTitle, {
-                                    className: "sr-only",
-                                    children: "Run GitHub Actions on Shipfox"
-                                }),
-                                /*#__PURE__*/ _jsx(ModalHeader, {
-                                    title: "Run GitHub Actions on Shipfox"
-                                }),
-                                /*#__PURE__*/ _jsxs(ModalBody, {
-                                    className: "gap-32",
-                                    children: [
-                                        /*#__PURE__*/ _jsxs("div", {
-                                            className: "flex flex-col gap-20 w-full",
-                                            children: [
-                                                /*#__PURE__*/ _jsx(Text, {
-                                                    size: "sm",
-                                                    className: "text-foreground-neutral-subtle w-full",
-                                                    children: "This will run your jobs on Shipfox's optimized infrastructure. Giving you faster builds, and dedicated resources."
-                                                }),
-                                                /*#__PURE__*/ _jsxs("div", {
-                                                    className: "relative",
-                                                    children: [
-                                                        /*#__PURE__*/ _jsx("img", {
-                                                            src: illustration2,
-                                                            alt: "illustration-2",
-                                                            className: "hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 translate-x-8 w-fit object-contain z-50"
-                                                        }),
-                                                        /*#__PURE__*/ _jsxs("div", {
-                                                            className: cn('relative overflow-hidden bg-transparent p-1 rounded-8'),
-                                                            children: [
-                                                                /*#__PURE__*/ _jsx("div", {
-                                                                    className: "absolute inset-0",
-                                                                    style: {
-                                                                        borderRadius: 'calc(0.5rem * 0.96)'
-                                                                    },
-                                                                    children: /*#__PURE__*/ _jsx(MovingBorder, {
-                                                                        duration: 6000,
-                                                                        rx: "30%",
-                                                                        ry: "30%",
-                                                                        children: /*#__PURE__*/ _jsx("div", {
-                                                                            className: "h-100 w-200 bg-[radial-gradient(#ff9e7a_40%,transparent_60%)]"
-                                                                        })
-                                                                    })
-                                                                }),
-                                                                /*#__PURE__*/ _jsx("div", {
-                                                                    className: "relative",
-                                                                    style: {
-                                                                        borderRadius: 'calc(0.5rem * 0.96)'
-                                                                    },
-                                                                    children: /*#__PURE__*/ _jsx(DynamicItem, {
-                                                                        variant: "default",
-                                                                        title: /*#__PURE__*/ _jsxs("div", {
-                                                                            className: "flex items-center gap-6",
-                                                                            children: [
-                                                                                /*#__PURE__*/ _jsx("span", {
-                                                                                    className: "flex shrink-0 items-center justify-center text-tag-success-icon w-16 h-16",
-                                                                                    children: /*#__PURE__*/ _jsx(Icon, {
-                                                                                        name: "money",
-                                                                                        size: "sm",
-                                                                                        color: "var(--foreground-neutral-subtle, #a1a1aa)"
-                                                                                    })
-                                                                                }),
-                                                                                /*#__PURE__*/ _jsx(ItemTitle, {
-                                                                                    children: "6000 free credits/month to run your jobs"
-                                                                                })
-                                                                            ]
-                                                                        }),
-                                                                        description: "~500 builds/month. No payment required.",
-                                                                        rightElement: /*#__PURE__*/ _jsx("img", {
-                                                                            src: illustrationBg,
-                                                                            alt: "illustration-bg",
-                                                                            className: "hidden sm:block absolute overflow-clip right-4 w-fit object-contain scale-105"
-                                                                        })
-                                                                    })
-                                                                })
-                                                            ]
-                                                        })
-                                                    ]
-                                                })
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ _jsxs("div", {
-                                            className: "flex flex-col gap-20 w-full",
-                                            children: [
-                                                /*#__PURE__*/ _jsxs("div", {
-                                                    className: "flex flex-col gap-6",
-                                                    children: [
-                                                        /*#__PURE__*/ _jsxs("div", {
-                                                            className: "flex items-center justify-center w-full",
-                                                            children: [
-                                                                /*#__PURE__*/ _jsx(Text, {
-                                                                    className: "flex-1 font-semibold text-foreground-neutral-base overflow-ellipsis overflow-hidden whitespace-nowrap",
-                                                                    children: "Update your GitHub Actions workflow"
-                                                                }),
-                                                                /*#__PURE__*/ _jsx(ButtonLink, {
-                                                                    variant: "base",
-                                                                    size: "sm",
-                                                                    href: "#",
-                                                                    iconRight: "bookOpen",
-                                                                    children: "See docs"
-                                                                })
-                                                            ]
-                                                        }),
-                                                        /*#__PURE__*/ _jsx(Text, {
-                                                            size: "sm",
-                                                            className: "text-foreground-neutral-subtle w-full",
-                                                            children: "Replace the runs-on line in your workflow file to use Shipfox runners."
-                                                        })
-                                                    ]
-                                                }),
-                                                /*#__PURE__*/ _jsxs(CodeBlock, {
-                                                    data: [
-                                                        {
-                                                            language: 'yaml',
-                                                            filename: '.github/workflows/<workflow-name>.yml',
-                                                            code: diffCode
-                                                        }
-                                                    ],
-                                                    defaultValue: "yaml",
-                                                    children: [
-                                                        /*#__PURE__*/ _jsxs(CodeBlockHeader, {
-                                                            children: [
-                                                                /*#__PURE__*/ _jsx(CodeBlockFiles, {
-                                                                    children: (item)=>/*#__PURE__*/ _jsx(CodeBlockFilename, {
-                                                                            value: item.language,
-                                                                            children: item.filename
-                                                                        })
-                                                                }),
-                                                                /*#__PURE__*/ _jsx(CodeBlockCopyButton, {})
-                                                            ]
-                                                        }),
-                                                        /*#__PURE__*/ _jsx(CodeBlockBody, {
-                                                            children: (item)=>/*#__PURE__*/ _jsx(CodeBlockItem, {
-                                                                    value: item.language,
-                                                                    children: /*#__PURE__*/ _jsx(CodeBlockContent, {
-                                                                        language: item.language,
-                                                                        children: item.code
-                                                                    })
-                                                                })
-                                                        }),
-                                                        /*#__PURE__*/ _jsx(CodeBlockFooter, {
-                                                            state: footerState,
-                                                            message: footerState === 'running' ? 'Waiting for Shipfox runner event…' : 'Runners connected!',
-                                                            description: footerState === 'running' ? 'This usually takes 30-60 seconds after you commit the workflow file.' : ''
-                                                        })
-                                                    ]
-                                                })
-                                            ]
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsx(ModalFooter, {
-                                    children: /*#__PURE__*/ _jsx(Button, {
-                                        variant: "primary",
-                                        onClick: ()=>setOpen(false),
-                                        children: "Got it"
-                                    })
-                                })
-                            ]
-                        })
-                    ]
-                })
-            ]
-        });
-    }
-};
-export const OpenedModal = {
-    play: async (ctx)=>{
-        const { canvasElement, step } = ctx;
-        const canvas = within(canvasElement);
-        const user = userEvent.setup();
-        await step('Open the modal', async ()=>{
-            const triggerButton = canvas.getByRole('button', {
-                name: OPEN_MODAL_REGEX
-            });
-            await user.click(triggerButton);
-        });
-        await step('Wait for dialog to appear and render', async ()=>{
-            await screen.findByRole('dialog');
-            await new Promise((resolve)=>setTimeout(resolve, 100));
-        });
-        await argosScreenshot(ctx, 'Opened Modal State');
-    },
-    render: ()=>{
-        const [open, setOpen] = useState(false);
-        return /*#__PURE__*/ _jsx("div", {
-            className: "flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip",
-            children: /*#__PURE__*/ _jsxs(Modal, {
-                open: open,
-                onOpenChange: setOpen,
-                children: [
-                    /*#__PURE__*/ _jsx(ModalTrigger, {
-                        asChild: true,
-                        children: /*#__PURE__*/ _jsx(Button, {
-                            children: "Open Modal"
-                        })
-                    }),
-                    /*#__PURE__*/ _jsxs(ModalContent, {
-                        "aria-describedby": undefined,
-                        children: [
-                            /*#__PURE__*/ _jsx(ModalTitle, {
-                                className: "sr-only",
-                                children: "Modal Title"
-                            }),
-                            /*#__PURE__*/ _jsx(ModalHeader, {
-                                children: /*#__PURE__*/ _jsx(Text, {
-                                    size: "lg",
-                                    className: "flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap",
-                                    children: "Modal Title"
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(ModalBody, {
-                                children: /*#__PURE__*/ _jsx(Text, {
-                                    size: "sm",
-                                    className: "text-foreground-neutral-subtle w-full",
-                                    children: "This modal automatically adapts between dialog (desktop) and drawer (mobile) based on screen size. Try resizing your browser window!"
-                                })
-                            }),
-                            /*#__PURE__*/ _jsxs(ModalFooter, {
-                                children: [
-                                    /*#__PURE__*/ _jsx(Button, {
-                                        variant: "transparent",
-                                        onClick: ()=>setOpen(false),
-                                        children: "Cancel"
-                                    }),
-                                    /*#__PURE__*/ _jsx(Button, {
-                                        variant: "primary",
-                                        onClick: ()=>setOpen(false),
-                                        children: "Confirm"
-                                    })
-                                ]
-                            })
-                        ]
-                    })
-                ]
-            })
-        });
-    }
-};
-
-//# sourceMappingURL=modal.stories.js.map