@shipfox/react-ui 0.11.0 → 0.12.0

package/src/components/item/item.stories.tsx

@@ -1,8 +1,10 @@
 import type {Meta, StoryObj} from '@storybook/react';
 import {Button} from 'components/button/button';
+import {DatePicker} from 'components/date-picker';
 import {Icon} from 'components/icon/icon';
 import {Input} from 'components/input/input';
 import {Label} from 'components/label/label';
+import {useState} from 'react';
 import {
   Item,
   ItemActions,
@@ -38,6 +40,8 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const DEFAULT_START_DATE = new Date('2024-01-01T00:00:00.000Z');
+
 export const Default: Story = {
   args: {
     variant: 'default',
@@ -89,62 +93,67 @@ export const Variants: Story = {
 
 export const ImportPastJobsModal: Story = {
   args: {},
-  render: () => (
-    <div className="flex w-full max-w-lg flex-col">
-      <Item variant="neutral">
-        <ItemHeader className="justify-between px-24 py-16">
-          <ItemTitle className="text-lg font-medium text-foreground-neutral-base">
-            Import past jobs from Github
-          </ItemTitle>
-          <div className="flex items-center gap-8">
-            <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>
-            <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>
-          </div>
-        </ItemHeader>
-        <ItemSeparator />
-        <ItemContent className="px-24 py-16">
-          <ItemDescription className="mb-16 text-sm text-foreground-neutral-subtle">
-            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.
-          </ItemDescription>
-          <div className="flex flex-col gap-20">
-            <div className="flex flex-col gap-8">
-              <Label htmlFor="repo-owner">Repository owner</Label>
-              <Input id="repo-owner" type="text" defaultValue="apache" />
-            </div>
-            <div className="flex flex-col gap-8">
-              <Label htmlFor="repo-name">Repository name</Label>
-              <Input id="repo-name" type="text" defaultValue="kafka" />
+  render: () => {
+    const [date, setDate] = useState<Date | undefined>(DEFAULT_START_DATE);
+
+    return (
+      <div className="flex w-full max-w-lg flex-col">
+        <Item variant="neutral">
+          <ItemHeader className="justify-between px-24 py-16">
+            <ItemTitle className="text-lg font-medium text-foreground-neutral-base">
+              Import past jobs from GitHub
+            </ItemTitle>
+            <div className="flex items-center gap-8">
+              <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>
+              <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>
             </div>
-            <div className="flex flex-col gap-8">
-              <Label htmlFor="start-date">Start date</Label>
-              <Input
-                id="start-date"
-                type="datetime-local"
-                defaultValue="September 5th, 2025"
-                className="pl-32"
-              />
+          </ItemHeader>
+          <ItemSeparator />
+          <ItemContent className="px-24 py-16">
+            <ItemDescription className="mb-16 text-sm text-foreground-neutral-subtle">
+              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.
+            </ItemDescription>
+            <div className="flex flex-col gap-20">
+              <div className="flex flex-col gap-8">
+                <Label htmlFor="repo-owner">Repository owner</Label>
+                <Input id="repo-owner" type="text" defaultValue="apache" />
+              </div>
+              <div className="flex flex-col gap-8">
+                <Label htmlFor="repo-name">Repository name</Label>
+                <Input id="repo-name" type="text" defaultValue="kafka" />
+              </div>
+              <div className="flex flex-col gap-8">
+                <Label htmlFor="start-date">Start date</Label>
+                <DatePicker
+                  id="start-date"
+                  date={date}
+                  onDateSelect={setDate}
+                  onClear={() => setDate(undefined)}
+                  placeholder="DD/MM/YYYY"
+                />
+              </div>
             </div>
-          </div>
-        </ItemContent>
-        <ItemSeparator />
-        <ItemFooter className="justify-end gap-8 px-24 py-16">
-          <Button variant="transparent" size="sm">
-            Cancel
-          </Button>
-          <Button variant="primary" size="sm">
-            Import
-          </Button>
-        </ItemFooter>
-      </Item>
-    </div>
-  ),
+          </ItemContent>
+          <ItemSeparator />
+          <ItemFooter className="justify-end gap-8 px-24 py-16">
+            <Button variant="transparent" size="sm">
+              Cancel
+            </Button>
+            <Button variant="primary" size="sm">
+              Import
+            </Button>
+          </ItemFooter>
+        </Item>
+      </div>
+    );
+  },
 };

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}