+
+
+
+
+
+ Modal Title
+
+
+ Modal Title
+
+
+
+
+ This modal automatically adapts between dialog (desktop) and drawer (mobile) based
+ on screen size. Try resizing your browser window!
+
+
+
+
+
+
+
+
+
+ );
+ },
+};
+
+export const ImportForm: Story = {
+ 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);
+
+ return (
+
+
+
+
+
+
+ Import past jobs from Github
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+ );
+ },
+};
+
+const diffCode = `jobs:
+ build:
+- runs-on: ubuntu-latest
++ runs-on: shipfox-2vcpu-ubuntu-2404`;
+
+export const GithubActions: Story = {
+ 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);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Run GitHub Actions on Shipfox
+
+
+
+
+ This will run your jobs on Shipfox's optimized infrastructure. Giving you
+ faster builds, and dedicated resources.
+
+
+
+ 
+
+
+ 
+ }
+ />
+
+
+
+
+
+
+
+
+
+ 6000 free credits/month to run your jobs
+
+ }
+ description="~500 builds/month. No payment required."
+ rightElement={
+
+ .yml',
+ code: diffCode,
+ },
+ ]}
+ defaultValue="yaml"
+ >
+
+
+ {(item) => (
+ {item.filename}
+ )}
+
+
+
+ {(item) => (
+
+ {item.code}
+
+ )}
+
+
+
+
+
+
+ Replace the runs-on line in your workflow file to use Shipfox runners.
+
+
+
+
+
+ Update your GitHub Actions workflow
+
+
+ See docs
+
+
+
+
+
+
+
+
+ Modal Title
+
+
+ Modal Title
+
+
+
+
+ This modal automatically adapts between dialog (desktop) and drawer (mobile) based
+ on screen size. Try resizing your browser window!
+
+
+
+
+
+
+
+
+
+ );
+ },
+};
diff --git a/libs/react/ui/src/components/modal/modal.tsx b/libs/react/ui/src/components/modal/modal.tsx
new file mode 100644
index 00000000..0b6c3bde
--- /dev/null
+++ b/libs/react/ui/src/components/modal/modal.tsx
@@ -0,0 +1,309 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import {cva} from 'class-variance-authority';
+import {Button} from 'components/button';
+import {Icon} from 'components/icon';
+import {Text} from 'components/typography';
+import {motion, type Transition} from 'framer-motion';
+import {useMediaQuery} from 'hooks/useMediaQuery';
+import {type ComponentProps, createContext, useContext} from 'react';
+import {cn} from 'utils/cn';
+import {Drawer as VaulDrawer} from 'vaul';
+
+const modalDefaultTransition: Transition = {
+ type: 'spring',
+ stiffness: 300,
+ damping: 30,
+};
+
+type ModalContextValue = {
+ breakpoint: string;
+ isDesktop: boolean;
+};
+
+const ModalContext = createContext
+
+
+
+
+
+ {children}
+
+
+ {children}
+
+
+
+ );
+}
+
+function ModalBody({className, children, ...props}: ComponentProps<'div'>) {
+ const {isDesktop} = useModalContext();
+
+ return (
+
+ {title ? (
+
+ {title}
+
+ ) : (
+
+
+ {children}
+ )}
+
+ {isDesktop && showEscIndicator && (
+
+ esc
+
+ )}
+ {showClose && (
+
+
+
+ )}
+
+
+ {children}
+
+ );
+}
+
+function ModalFooter({className, children, ...props}: ComponentProps<'div'>) {
+ return (
+
+
+
+ );
+}
+
+type ModalTitleProps = ComponentProps
+
+ {children}
+