@shipfox/react-ui 0.5.0 → 0.6.0

package/src/components/modal/modal.stories.tsx

@@ -0,0 +1,384 @@
+import {argosScreenshot} from '@argos-ci/storybook/vitest';
+import type {Meta, StoryObj} from '@storybook/react';
+import {screen, within} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {Button, ButtonLink} from 'components/button';
+import {
+  CodeBlock,
+  CodeBlockBody,
+  CodeBlockContent,
+  CodeBlockCopyButton,
+  CodeBlockFilename,
+  CodeBlockFiles,
+  CodeBlockFooter,
+  CodeBlockHeader,
+  CodeBlockItem,
+} from 'components/code-block';
+import {DynamicItem} from 'components/dynamic-item';
+import {Icon} from 'components/icon';
+import {Input} from 'components/input';
+import {ItemTitle} from 'components/item';
+import {Label} from 'components/label';
+import {MovingBorder} from 'components/moving-border';
+import {Text} from 'components/typography';
+import {useState} from 'react';
+import {cn} from 'utils/cn';
+import illustration2 from '../../assets/illustration-2.svg';
+import illustrationBg from '../../assets/illustration-gradient.svg';
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+  ModalTrigger,
+} from './modal';
+
+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 meta = {
+  title: 'Components/Modal',
+  component: Modal,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: 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: 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 (
+      <div className="flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip">
+        <Modal open={open} onOpenChange={setOpen}>
+          <ModalTrigger asChild>
+            <Button>Open Modal</Button>
+          </ModalTrigger>
+          <ModalContent aria-describedby={undefined}>
+            <ModalTitle className="sr-only">Modal Title</ModalTitle>
+            <ModalHeader>
+              <Text
+                size="lg"
+                className="flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap"
+              >
+                Modal Title
+              </Text>
+            </ModalHeader>
+            <ModalBody>
+              <Text size="sm" className="text-foreground-neutral-subtle w-full">
+                This modal automatically adapts between dialog (desktop) and drawer (mobile) based
+                on screen size. Try resizing your browser window!
+              </Text>
+            </ModalBody>
+            <ModalFooter>
+              <Button variant="transparent" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button variant="primary" onClick={() => setOpen(false)}>
+                Confirm
+              </Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+      </div>
+    );
+  },
+};
+
+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 (
+      <div className="flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip">
+        <Modal open={open} onOpenChange={setOpen}>
+          <ModalTrigger asChild>
+            <Button>Import past jobs from Github</Button>
+          </ModalTrigger>
+          <ModalContent aria-describedby={undefined}>
+            <ModalTitle className="sr-only">Import past jobs from Github</ModalTitle>
+            <ModalHeader title="Import past jobs from Github" />
+            <ModalBody className="gap-20">
+              <Text size="sm" className="text-foreground-neutral-subtle w-full">
+                Backfill your CI history by importing past runs from your Github repo. We&apos;ll
+                handle the rest by creating a background task to import the data for you.
+              </Text>
+              <div className="flex flex-col gap-20 w-full">
+                <div className="flex flex-col gap-8 w-full">
+                  <Label>Repository owner</Label>
+                  <Input placeholder="apache" />
+                </div>
+                <div className="flex flex-col gap-8 w-full">
+                  <Label>Repository name</Label>
+                  <Input placeholder="kafka" />
+                </div>
+                <div className="flex flex-col gap-8 w-full">
+                  <Label>Start date</Label>
+                  <Input placeholder="September 5th, 2025" />
+                </div>
+              </div>
+            </ModalBody>
+            <ModalFooter>
+              <Button variant="transparent" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button variant="primary" onClick={() => setOpen(false)}>
+                Import
+              </Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+      </div>
+    );
+  },
+};
+
+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 (
+      <div className="flex h-[50vh] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip">
+        <Modal open={open} onOpenChange={setOpen}>
+          <ModalTrigger asChild>
+            <Button>Run GitHub Actions on Shipfox</Button>
+          </ModalTrigger>
+          <ModalContent aria-describedby={undefined}>
+            <ModalTitle className="sr-only">Run GitHub Actions on Shipfox</ModalTitle>
+            <ModalHeader title="Run GitHub Actions on Shipfox" />
+            <ModalBody className="gap-32">
+              <div className="flex flex-col gap-20 w-full">
+                <Text size="sm" className="text-foreground-neutral-subtle w-full">
+                  This will run your jobs on Shipfox&apos;s optimized infrastructure. Giving you
+                  faster builds, and dedicated resources.
+                </Text>
+                <div className="relative">
+                  <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"
+                  />
+                  <div className={cn('relative overflow-hidden bg-transparent p-1 rounded-8')}>
+                    <div className="absolute inset-0" style={{borderRadius: 'calc(0.5rem * 0.96)'}}>
+                      <MovingBorder duration={6000} rx="30%" ry="30%">
+                        <div className="h-100 w-200 bg-[radial-gradient(#ff9e7a_40%,transparent_60%)]" />
+                      </MovingBorder>
+                    </div>
+                    <div
+                      className="relative"
+                      style={{
+                        borderRadius: 'calc(0.5rem * 0.96)',
+                      }}
+                    >
+                      <DynamicItem
+                        variant="default"
+                        title={
+                          <div className="flex items-center gap-6">
+                            <span className="flex shrink-0 items-center justify-center text-tag-success-icon w-16 h-16">
+                              <Icon
+                                name="money"
+                                size="sm"
+                                color="var(--foreground-neutral-subtle, #a1a1aa)"
+                              />
+                            </span>
+                            <ItemTitle>6000 free credits/month to run your jobs</ItemTitle>
+                          </div>
+                        }
+                        description="~500 builds/month. No payment required."
+                        rightElement={
+                          <img
+                            src={illustrationBg}
+                            alt="illustration-bg"
+                            className="hidden sm:block absolute overflow-clip right-4 w-fit object-contain scale-105"
+                          />
+                        }
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="flex flex-col gap-20 w-full">
+                <div className="flex flex-col gap-6">
+                  <div className="flex items-center justify-center w-full">
+                    <Text className="flex-1 font-semibold text-foreground-neutral-base overflow-ellipsis overflow-hidden whitespace-nowrap">
+                      Update your GitHub Actions workflow
+                    </Text>
+                    <ButtonLink variant="base" size="sm" href="#" iconRight="bookOpen">
+                      See docs
+                    </ButtonLink>
+                  </div>
+                  <Text size="sm" className="text-foreground-neutral-subtle w-full">
+                    Replace the runs-on line in your workflow file to use Shipfox runners.
+                  </Text>
+                </div>
+
+                <CodeBlock
+                  data={[
+                    {
+                      language: 'yaml',
+                      filename: '.github/workflows/<workflow-name>.yml',
+                      code: diffCode,
+                    },
+                  ]}
+                  defaultValue="yaml"
+                >
+                  <CodeBlockHeader>
+                    <CodeBlockFiles>
+                      {(item) => (
+                        <CodeBlockFilename value={item.language}>{item.filename}</CodeBlockFilename>
+                      )}
+                    </CodeBlockFiles>
+                    <CodeBlockCopyButton />
+                  </CodeBlockHeader>
+                  <CodeBlockBody>
+                    {(item) => (
+                      <CodeBlockItem value={item.language}>
+                        <CodeBlockContent language={item.language}>{item.code}</CodeBlockContent>
+                      </CodeBlockItem>
+                    )}
+                  </CodeBlockBody>
+                  <CodeBlockFooter
+                    state="running"
+                    message="Waiting for Shipfox runner event…"
+                    description="This usually takes 30-60 seconds after you commit the workflow file."
+                  />
+                </CodeBlock>
+              </div>
+            </ModalBody>
+            <ModalFooter>
+              <Button variant="primary" onClick={() => setOpen(false)}>
+                Got it
+              </Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+      </div>
+    );
+  },
+};
+
+export const OpenedModal: 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: 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 (
+      <div className="flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip">
+        <Modal open={open} onOpenChange={setOpen}>
+          <ModalTrigger asChild>
+            <Button>Open Modal</Button>
+          </ModalTrigger>
+          <ModalContent aria-describedby={undefined}>
+            <ModalTitle className="sr-only">Modal Title</ModalTitle>
+            <ModalHeader>
+              <Text
+                size="lg"
+                className="flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap"
+              >
+                Modal Title
+              </Text>
+            </ModalHeader>
+            <ModalBody>
+              <Text size="sm" className="text-foreground-neutral-subtle w-full">
+                This modal automatically adapts between dialog (desktop) and drawer (mobile) based
+                on screen size. Try resizing your browser window!
+              </Text>
+            </ModalBody>
+            <ModalFooter>
+              <Button variant="transparent" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button variant="primary" onClick={() => setOpen(false)}>
+                Confirm
+              </Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+      </div>
+    );
+  },
+};

package/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<ModalContextValue | null>(null);
+
+function useModalContext() {
+  const context = useContext(ModalContext);
+  if (!context) {
+    throw new Error('Modal components must be used within a Modal component');
+  }
+  return context;
+}
+
+const modalOverlayVariants = cva(
+  'fixed inset-0 z-40 bg-background-backdrop-backdrop data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+);
+
+const modalContentVariants = cva(
+  'fixed left-1/2 top-1/2 z-50 flex flex-col overflow-clip bg-background-neutral-base rounded-16 w-full max-w-[576px] -translate-x-1/2 -translate-y-1/2 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 shadow-tooltip',
+);
+
+function Modal({
+  breakpoint = '(min-width: 768px)',
+  children,
+  ...props
+}: ComponentProps<typeof DialogPrimitive.Root> & {breakpoint?: string}) {
+  const isDesktop = useMediaQuery(breakpoint);
+
+  const contextValue: ModalContextValue = {
+    breakpoint,
+    isDesktop,
+  };
+
+  const Root = isDesktop ? DialogPrimitive.Root : VaulDrawer.Root;
+
+  return (
+    <ModalContext.Provider value={contextValue}>
+      <Root {...props}>{children}</Root>
+    </ModalContext.Provider>
+  );
+}
+
+function ModalTrigger(props: ComponentProps<typeof DialogPrimitive.Trigger>) {
+  const {isDesktop} = useModalContext();
+
+  if (isDesktop) {
+    return <DialogPrimitive.Trigger {...props} />;
+  }
+
+  return <VaulDrawer.Trigger {...props} />;
+}
+
+function ModalPortal(props: ComponentProps<typeof DialogPrimitive.Portal>) {
+  const {isDesktop} = useModalContext();
+
+  if (isDesktop) {
+    return <DialogPrimitive.Portal {...props} />;
+  }
+
+  return <VaulDrawer.Portal {...props} />;
+}
+
+function ModalClose(props: ComponentProps<typeof DialogPrimitive.Close>) {
+  const {isDesktop} = useModalContext();
+
+  if (isDesktop) {
+    return <DialogPrimitive.Close {...props} />;
+  }
+
+  return <VaulDrawer.Close {...props} />;
+}
+
+type ModalOverlayProps = ComponentProps<typeof DialogPrimitive.Overlay> & {
+  animated?: boolean;
+  transition?: Transition;
+};
+
+function ModalOverlay({
+  className,
+  animated = true,
+  transition = modalDefaultTransition,
+  ...props
+}: ModalOverlayProps) {
+  const {isDesktop} = useModalContext();
+
+  if (!isDesktop) {
+    return <VaulDrawer.Overlay className={cn(modalOverlayVariants(), className)} {...props} />;
+  }
+
+  if (animated) {
+    return (
+      <DialogPrimitive.Overlay className={cn(modalOverlayVariants(), className)} asChild {...props}>
+        <motion.div
+          initial={{opacity: 0}}
+          animate={{opacity: 1}}
+          exit={{opacity: 0}}
+          transition={transition}
+        />
+      </DialogPrimitive.Overlay>
+    );
+  }
+
+  return <DialogPrimitive.Overlay className={cn(modalOverlayVariants(), className)} {...props} />;
+}
+
+type ModalContentProps = ComponentProps<typeof DialogPrimitive.Content> & {
+  animated?: boolean;
+  transition?: Transition;
+};
+
+function ModalContent({
+  className,
+  children,
+  animated = true,
+  transition = modalDefaultTransition,
+  ...props
+}: ModalContentProps) {
+  const {isDesktop} = useModalContext();
+
+  if (!isDesktop) {
+    return (
+      <ModalPortal>
+        <ModalOverlay animated={animated} transition={transition} />
+        <VaulDrawer.Content
+          className={cn(
+            'fixed bottom-0 left-0 right-0 z-50 flex flex-col bg-background-neutral-base rounded-t-16 max-h-[85vh] shadow-tooltip',
+            className,
+          )}
+          {...props}
+        >
+          <div className="relative w-full h-full flex flex-col min-h-0">
+            <div className="pointer-events-none absolute inset-0 shadow-separator-inset rounded-t-16" />
+            <div className="flex items-center justify-center pt-8 pb-8 shrink-0">
+              <div className="bg-foreground-neutral-subtle w-32 h-4 rounded-full opacity-40" />
+            </div>
+            {children}
+          </div>
+        </VaulDrawer.Content>
+      </ModalPortal>
+    );
+  }
+
+  const baseClasses = cn(modalContentVariants(), className);
+
+  return (
+    <ModalPortal>
+      <ModalOverlay animated={animated} transition={transition} />
+      <DialogPrimitive.Content className={baseClasses} {...props}>
+        <div className="relative size-full">
+          <div className="pointer-events-none absolute inset-0 shadow-separator-inset rounded-16" />
+          {children}
+        </div>
+      </DialogPrimitive.Content>
+    </ModalPortal>
+  );
+}
+
+type ModalHeaderProps = ComponentProps<'div'> & {
+  title?: string;
+  showEscIndicator?: boolean;
+  showClose?: boolean;
+};
+
+function ModalHeader({
+  className,
+  title,
+  showEscIndicator = true,
+  showClose = true,
+  children,
+  ...props
+}: ModalHeaderProps) {
+  const {isDesktop} = useModalContext();
+
+  return (
+    <div className="flex flex-col w-full shrink-0" {...props}>
+      <div className="bg-background-neutral-base flex items-center justify-center gap-20 overflow-clip px-24 py-16 w-full">
+        {title ? (
+          <Text size="lg" className="flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap">
+            {title}
+          </Text>
+        ) : (
+          <div className="flex-1">{children}</div>
+        )}
+        <div className="flex items-center gap-8">
+          {isDesktop && showEscIndicator && (
+            <kbd className="flex items-center justify-center rounded-8 border border-border-neutral-base shadow-button-neutral bg-background-field-base text-xs text-foreground-neutral-subtle px-4">
+              esc
+            </kbd>
+          )}
+          {showClose && (
+            <ModalClose asChild>
+              <Button
+                variant="transparent"
+                size="xs"
+                className="rounded-4 p-2 cursor-pointer bg-transparent border-none text-foreground-neutral-muted hover:text-foreground-neutral-base hover:bg-background-components-hover transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2 w-24 h-24"
+              >
+                <Icon name="close" />
+              </Button>
+            </ModalClose>
+          )}
+        </div>
+      </div>
+      <div className="bg-border-neutral-strong h-[1px] w-full" />
+    </div>
+  );
+}
+
+function ModalBody({className, children, ...props}: ComponentProps<'div'>) {
+  const {isDesktop} = useModalContext();
+
+  return (
+    <div
+      className={cn(
+        'bg-background-neutral-base flex flex-col items-start px-24 pb-24 pt-16 w-full',
+        isDesktop ? 'overflow-clip' : 'overflow-y-auto overflow-x-clip flex-1',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+function ModalFooter({className, children, ...props}: ComponentProps<'div'>) {
+  return (
+    <div className="flex flex-col w-full shrink-0" {...props}>
+      <div className="bg-border-neutral-strong h-[1px] w-full" />
+      <div className="bg-background-neutral-base flex items-end justify-end gap-20 overflow-clip px-24 py-16 w-full">
+        <div className={cn('flex items-center gap-16', className)}>{children}</div>
+      </div>
+    </div>
+  );
+}
+
+type ModalTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
+
+function ModalTitle({className, ...props}: ModalTitleProps) {
+  const {isDesktop} = useModalContext();
+
+  const titleClassName = cn(
+    'font-medium text-lg leading-20 overflow-ellipsis overflow-hidden text-foreground-neutral-base',
+    className,
+  );
+
+  if (!isDesktop) {
+    return <VaulDrawer.Title className={titleClassName} {...props} />;
+  }
+
+  return <DialogPrimitive.Title className={titleClassName} {...props} />;
+}
+
+type ModalDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;
+
+function ModalDescription({className, ...props}: ModalDescriptionProps) {
+  const {isDesktop} = useModalContext();
+
+  const descClassName = cn('text-sm leading-20 text-foreground-neutral-subtle', className);
+
+  if (!isDesktop) {
+    return <VaulDrawer.Description className={descClassName} {...props} />;
+  }
+
+  return <DialogPrimitive.Description className={descClassName} {...props} />;
+}
+
+export {
+  Modal,
+  ModalPortal,
+  ModalOverlay,
+  ModalTrigger,
+  ModalClose,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  ModalTitle,
+  ModalDescription,
+  modalContentVariants,
+  modalOverlayVariants,
+  modalDefaultTransition,
+};
+
+export type {
+  ModalContentProps,
+  ModalHeaderProps,
+  ModalOverlayProps,
+  ModalTitleProps,
+  ModalDescriptionProps,
+};

package/src/components/moving-border/index.ts

@@ -0,0 +1 @@
+export * from './moving-border';