@shipfox/react-ui 0.11.0 → 0.13.0

package/src/components/date-time-range-picker/date-time-range-picker.tsx

@@ -0,0 +1,211 @@
+import {cva, type VariantProps} from 'class-variance-authority';
+import {Calendar} from 'components/calendar';
+import {Icon} from 'components/icon';
+import {Popover, PopoverContent, PopoverTrigger} from 'components/popover';
+import {format} from 'date-fns';
+import type {ComponentProps, ReactNode} from 'react';
+import {forwardRef, useState} from 'react';
+import type {DateRange as DayPickerDateRange} from 'react-day-picker';
+import {cn} from 'utils/cn';
+
+export const dateTimeRangePickerVariants = cva(
+  'min-w-240 relative flex items-center rounded-6 shadow-button-neutral transition-[background-color,box-shadow] outline-none',
+  {
+    variants: {
+      variant: {
+        base: 'bg-background-field-base hover:bg-background-field-hover',
+        component: 'bg-background-field-component hover:bg-background-field-component-hover',
+      },
+      size: {
+        base: 'h-32',
+        small: 'h-28',
+      },
+      state: {
+        default: '',
+        error: 'shadow-border-error',
+        disabled:
+          'bg-background-neutral-disabled shadow-none pointer-events-none cursor-not-allowed',
+      },
+    },
+    defaultVariants: {
+      variant: 'base',
+      size: 'base',
+      state: 'default',
+    },
+  },
+);
+
+export type DateRange = {
+  start?: Date;
+  end?: Date;
+};
+
+export type DateTimeRangePickerProps = Omit<ComponentProps<'input'>, 'size' | 'type'> &
+  VariantProps<typeof dateTimeRangePickerVariants> & {
+    dateRange?: DateRange;
+    onDateRangeSelect?: (range: DateRange | undefined) => void;
+    placeholder?: string;
+    dateFormat?: string;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    onClear?: () => void;
+    numberOfMonths?: number;
+    closeOnSelect?: boolean;
+  };
+
+export const DateTimeRangePicker = forwardRef<HTMLInputElement, DateTimeRangePickerProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      state,
+      dateRange,
+      onDateRangeSelect,
+      placeholder = 'DD/MM/YYYY - DD/MM/YYYY',
+      dateFormat = 'dd/MM/yyyy',
+      leftIcon,
+      rightIcon,
+      onClear,
+      disabled,
+      numberOfMonths = 2,
+      closeOnSelect = false,
+      ...props
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = useState(false);
+    const isDisabled = disabled || state === 'disabled';
+    const hasRange = dateRange?.start && dateRange?.end;
+    const displayValue =
+      hasRange && dateRange.start && dateRange.end
+        ? `${format(dateRange.start, dateFormat)} - ${format(dateRange.end, dateFormat)}`
+        : '';
+
+    // Convert our DateRange to react-day-picker's DateRange format
+    const dayPickerRange: DayPickerDateRange | undefined =
+      dateRange?.start || dateRange?.end
+        ? {
+            from: dateRange?.start,
+            to: dateRange?.end,
+          }
+        : undefined;
+
+    const handleSelect = (selectedRange: DayPickerDateRange | undefined) => {
+      if (selectedRange) {
+        onDateRangeSelect?.({
+          start: selectedRange.from,
+          end: selectedRange.to,
+        });
+        // Only close if both dates are selected and closeOnSelect is true
+        if (closeOnSelect && selectedRange.from && selectedRange.to) {
+          setOpen(false);
+        }
+      } else {
+        onDateRangeSelect?.(undefined);
+      }
+    };
+
+    const handleClear = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onClear?.();
+      setOpen(false);
+    };
+
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <div
+          className={cn(
+            open && 'shadow-border-interactive-with-active',
+            dateTimeRangePickerVariants({variant, size, state: isDisabled ? 'disabled' : state}),
+            className,
+          )}
+        >
+          {/* Calendar Icon Button */}
+          <PopoverTrigger asChild>
+            <button
+              type="button"
+              disabled={isDisabled}
+              className={cn(
+                'flex items-center justify-center shrink-0 transition-colors',
+                size === 'small' ? 'size-28' : 'size-32',
+                isDisabled && 'text-foreground-neutral-disabled',
+              )}
+              aria-label="Open calendar"
+            >
+              {leftIcon || (
+                <Icon
+                  name="calendar2Line"
+                  className={cn(
+                    'size-16 text-foreground-neutral-muted',
+                    isDisabled && 'text-foreground-neutral-disabled',
+                  )}
+                />
+              )}
+            </button>
+          </PopoverTrigger>
+
+          {/* Divider */}
+          <div className="h-full w-px bg-border-neutral-base shrink-0" />
+
+          {/* Input Field */}
+          <input
+            ref={ref}
+            type="text"
+            disabled={isDisabled}
+            placeholder={placeholder}
+            value={displayValue}
+            readOnly
+            className={cn(
+              'flex-1 min-w-0 px-8 text-sm leading-20 bg-transparent outline-none border-none cursor-pointer',
+              'placeholder:text-foreground-neutral-muted',
+              'text-foreground-neutral-base',
+              'disabled:text-foreground-neutral-disabled disabled:cursor-not-allowed',
+              size === 'small' ? 'py-4' : 'py-6',
+            )}
+            onClick={() => !isDisabled && setOpen(true)}
+            {...props}
+          />
+
+          {/* Clear Button (shown when date range is selected) */}
+          <button
+            type="button"
+            onClick={handleClear}
+            className={cn(
+              'flex items-center justify-center shrink-0 transition-colors hover:text-foreground-neutral-base',
+              size === 'small' ? 'size-28' : 'size-32',
+              hasRange && onClear && !isDisabled ? 'visible' : 'invisible',
+            )}
+            aria-label="Clear date range"
+          >
+            <Icon name="closeLine" className="size-16 text-foreground-neutral-muted" />
+          </button>
+
+          {/* Custom Right Icon */}
+          {rightIcon && !hasRange && (
+            <div
+              className={cn(
+                'flex items-center justify-center shrink-0',
+                size === 'small' ? 'size-28' : 'size-32',
+              )}
+            >
+              {rightIcon}
+            </div>
+          )}
+        </div>
+
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="range"
+            defaultMonth={dayPickerRange?.from}
+            selected={dayPickerRange}
+            onSelect={handleSelect}
+            numberOfMonths={numberOfMonths}
+          />
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+
+DateTimeRangePicker.displayName = 'DateTimeRangePicker';

package/src/components/date-time-range-picker/index.ts

@@ -0,0 +1 @@
+export * from './date-time-range-picker';

package/src/components/dropdown-menu/index.ts

@@ -1,29 +1 @@
-export type {
-  DropdownMenuCheckboxItemProps,
-  DropdownMenuContentProps,
-  DropdownMenuItemProps,
-  DropdownMenuLabelProps,
-  DropdownMenuRadioItemProps,
-  DropdownMenuShortcutProps,
-  DropdownMenuSubTriggerProps,
-} from './dropdown-menu';
-export {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-  dropdownMenuContentVariants,
-  dropdownMenuItemVariants,
-  dropdownMenuLabelVariants,
-} from './dropdown-menu';
+export * from './dropdown-menu';

package/src/components/index.ts

@@ -2,8 +2,11 @@ export * from './alert';
 export * from './avatar';
 export * from './badge';
 export * from './button';
+export * from './calendar';
 export * from './checkbox';
 export * from './code-block';
+export * from './date-picker';
+export * from './date-time-range-picker';
 export * from './dot-grid';
 export * from './dropdown-menu';
 export * from './dynamic-item';
@@ -14,6 +17,9 @@ export * from './input';
 export * from './item';
 export * from './label';
 export * from './modal';
+export * from './moving-border';
+export * from './popover';
+export * from './tabs';
 export * from './textarea';
 export * from './theme';
 export * from './toast';

package/src/components/inline-tips/inline-tips.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 {
@@ -37,6 +38,10 @@ const types = ['default', 'info', 'success', 'error'] as const;
 const variants = ['primary', 'secondary'] as const;
 
 export const Default: Story = {
+  play: async (ctx) => {
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    await argosScreenshot(ctx, 'InlineTips Default');
+  },
   render: (args) => {
     return (
       <InlineTips {...args}>

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/index.ts

@@ -1,23 +1 @@
-export type {
-  ModalContentProps,
-  ModalDescriptionProps,
-  ModalHeaderProps,
-  ModalOverlayProps,
-  ModalTitleProps,
-} from './modal';
-export {
-  Modal,
-  ModalBody,
-  ModalClose,
-  ModalContent,
-  ModalDescription,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  ModalPortal,
-  ModalTitle,
-  ModalTrigger,
-  modalContentVariants,
-  modalDefaultTransition,
-  modalOverlayVariants,
-} from './modal';
+export * from './modal';

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" />
+          <ModalContent aria-describedby={undefined} overlayClassName="bg-background-modal-overlay">
+            <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>
@@ -211,7 +221,7 @@ export const GithubActions: Story = {
           <ModalTrigger asChild>
             <Button>Run GitHub Actions on Shipfox</Button>
           </ModalTrigger>
-          <ModalContent aria-describedby={undefined}>
+          <ModalContent aria-describedby={undefined} overlayClassName="bg-background-modal-overlay">
             <ModalTitle className="sr-only">Run GitHub Actions on Shipfox</ModalTitle>
             <ModalHeader title="Run GitHub Actions on Shipfox" />
             <ModalBody className="gap-32">

package/src/components/modal/modal.tsx

@@ -125,6 +125,7 @@ function ModalOverlay({
 type ModalContentProps = ComponentProps<typeof DialogPrimitive.Content> & {
   animated?: boolean;
   transition?: Transition;
+  overlayClassName?: string;
 };
 
 function ModalContent({
@@ -132,6 +133,7 @@ function ModalContent({
   children,
   animated = true,
   transition = modalDefaultTransition,
+  overlayClassName,
   ...props
 }: ModalContentProps) {
   const {isDesktop} = useModalContext();
@@ -139,7 +141,7 @@ function ModalContent({
   if (!isDesktop) {
     return (
       <ModalPortal>
-        <ModalOverlay animated={animated} transition={transition} />
+        <ModalOverlay animated={animated} transition={transition} className={overlayClassName} />
         <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',
@@ -163,7 +165,7 @@ function ModalContent({
 
   return (
     <ModalPortal>
-      <ModalOverlay animated={animated} transition={transition} />
+      <ModalOverlay animated={animated} transition={transition} className={overlayClassName} />
       <DialogPrimitive.Content className={baseClasses} {...props}>
         <div className="relative size-full">
           <div className="pointer-events-none absolute inset-0 shadow-separator-inset rounded-16" />

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/tabs/index.ts

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