@shipfox/react-ui 0.10.0 → 0.12.0

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

@@ -14,6 +14,7 @@ import {
   CodeBlockHeader,
   CodeBlockItem,
 } from 'components/code-block';
+import {DatePicker} from 'components/date-picker';
 import {DynamicItem} from 'components/dynamic-item';
 import {Icon} from 'components/icon';
 import {Input} from 'components/input';
@@ -39,6 +40,8 @@ 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,
@@ -129,19 +132,20 @@ export const ImportForm: Story = {
   },
   render: () => {
     const [open, setOpen] = useState(false);
+    const [date, setDate] = useState<Date | undefined>(DEFAULT_START_DATE);
 
     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>
+            <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" />
+            <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
+                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">
@@ -154,8 +158,14 @@ export const ImportForm: Story = {
                   <Input placeholder="kafka" />
                 </div>
                 <div className="flex flex-col gap-8 w-full">
-                  <Label>Start date</Label>
-                  <Input placeholder="September 5th, 2025" />
+                  <Label htmlFor="start-date">Start date</Label>
+                  <DatePicker
+                    id="start-date"
+                    date={date}
+                    onDateSelect={setDate}
+                    onClear={() => setDate(undefined)}
+                    placeholder="DD/MM/YYYY"
+                  />
                 </div>
               </div>
             </ModalBody>

package/src/components/popover/index.ts

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

package/src/components/popover/popover.tsx

@@ -0,0 +1,60 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+
+function Popover({...props}: ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root {...props} />;
+}
+
+function PopoverTrigger({...props}: ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger {...props} />;
+}
+
+function PopoverAnchor({...props}: ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor {...props} />;
+}
+
+function PopoverPortal({...props}: ComponentProps<typeof PopoverPrimitive.Portal>) {
+  return <PopoverPrimitive.Portal {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPortal>
+      <PopoverPrimitive.Content
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'z-50 rounded-10 bg-background-neutral-overlay shadow-tooltip outline-none',
+          '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',
+          'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
+          'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPortal>
+  );
+}
+
+function PopoverArrow({className, ...props}: ComponentProps<typeof PopoverPrimitive.Arrow>) {
+  return (
+    <PopoverPrimitive.Arrow
+      className={cn('fill-background-neutral-overlay', className)}
+      {...props}
+    />
+  );
+}
+
+function PopoverClose({...props}: ComponentProps<typeof PopoverPrimitive.Close>) {
+  return <PopoverPrimitive.Close {...props} />;
+}
+
+export {Popover, PopoverTrigger, PopoverAnchor, PopoverContent, PopoverArrow, PopoverClose};

package/src/components/textarea/textarea.stories.tsx

@@ -1,3 +1,4 @@
+import {argosScreenshot} from '@argos-ci/storybook/vitest';
 import type {Meta, StoryObj} from '@storybook/react';
 import {Code, Header} from 'components/typography';
 import {Textarea} from './textarea';
@@ -25,7 +26,12 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async (ctx) => {
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    await argosScreenshot(ctx, 'Textarea Default');
+  },
+};
 
 const variants = ['base', 'component'] as const;
 const sizes = ['base', 'small'] as const;
@@ -163,7 +169,7 @@ export const DesignMock: Story = {
                   <Code variant="label" className="text-foreground-neutral-subtle">
                     Size=Base (32), State={state.name}, Color={variant.label}
                   </Code>
-                  <div className="w-[280px]">
+                  <div className="w-280">
                     <Textarea
                       placeholder="Placeholder"
                       variant={variant.key}