@shipfox/react-ui 0.11.0 → 0.12.0

package/src/components/date-picker/date-picker.stories.tsx

@@ -0,0 +1,230 @@
+import {argosScreenshot} from '@argos-ci/storybook/vitest';
+import type {Meta, StoryObj} from '@storybook/react';
+import {within} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {subDays} from 'date-fns';
+import {useState} from 'react';
+import {
+  type DateRange,
+  DateTimeRangePicker,
+} from '../date-time-range-picker/date-time-range-picker';
+import {DatePicker} from './date-picker';
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'Components/DatePicker',
+  component: DatePicker,
+  parameters: {
+    layout: 'centered',
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof DatePicker>;
+
+const OPEN_CALENDAR_REGEX = /open calendar/i;
+
+const isTestEnvironment = () => typeof navigator !== 'undefined' && navigator.webdriver === true;
+
+type StoryContext = Parameters<NonNullable<Story['play']>>[0];
+
+async function openCalendarAndScreenshot(ctx: StoryContext, screenshotName: string): Promise<void> {
+  const {canvasElement, step} = ctx;
+  const canvas = within(canvasElement);
+  const user = userEvent.setup();
+
+  let triggerButton: HTMLElement | null = null;
+
+  await step('Open the calendar popover', async () => {
+    triggerButton = canvas.getByRole('button', {name: OPEN_CALENDAR_REGEX});
+    await user.click(triggerButton);
+  });
+
+  await step('Wait for calendar to appear and render', async () => {
+    await new Promise((resolve) => setTimeout(resolve, 300));
+
+    if (isTestEnvironment() && triggerButton instanceof HTMLElement) {
+      triggerButton.style.display = 'none';
+    }
+    await new Promise((resolve) => setTimeout(resolve, 100));
+  });
+
+  await argosScreenshot(ctx, screenshotName);
+}
+
+export const DatePickerStory: Story = {
+  play: (ctx) => openCalendarAndScreenshot(ctx, 'DatePicker Calendar Open'),
+  render: () => {
+    const [date, setDate] = useState<Date | undefined>(new Date());
+    return (
+      <div className="relative flex h-600 w-500 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible">
+        <DatePicker
+          date={date}
+          onDateSelect={setDate}
+          onClear={() => setDate(undefined)}
+          placeholder="DD/MM/YYYY"
+        />
+      </div>
+    );
+  },
+};
+
+export const DateRangePickerStory: Story = {
+  play: (ctx) => openCalendarAndScreenshot(ctx, 'DateRangePicker Calendar Open'),
+  render: () => {
+    const [dateRange, setDateRange] = useState<DateRange | undefined>({
+      start: new Date(),
+      end: subDays(new Date(), -30),
+    });
+    return (
+      <div className="relative flex h-600 w-800 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible">
+        <DateTimeRangePicker
+          dateRange={dateRange}
+          onDateRangeSelect={setDateRange}
+          onClear={() => setDateRange(undefined)}
+          placeholder="DD/MM/YYYY - DD/MM/YYYY"
+          className="min-w-280"
+        />
+      </div>
+    );
+  },
+};
+
+export const AllStates: Story = {
+  render: () => {
+    const now = new Date();
+    const past = subDays(now, 30);
+    return (
+      <div className="flex flex-col gap-32 p-32 min-w-350">
+        <div>
+          <h3 className="text-lg font-semibold mb-16 text-foreground-neutral-base">
+            Single Date Picker
+          </h3>
+          <div className="flex flex-col gap-16">
+            <div>
+              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">DEFAULT</p>
+              <DatePicker placeholder="DD/MM/YYYY" />
+            </div>
+            <div>
+              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">FILLED</p>
+              <DatePicker
+                date={new Date()}
+                onClear={() => {
+                  /* noop for demo */
+                }}
+                placeholder="DD/MM/YYYY"
+              />
+            </div>
+            <div>
+              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">ERROR</p>
+              <DatePicker
+                date={new Date()}
+                onClear={() => {
+                  /* noop for demo */
+                }}
+                state="error"
+                placeholder="DD/MM/YYYY"
+              />
+            </div>
+            <div>
+              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">DISABLED</p>
+              <DatePicker placeholder="DD/MM/YYYY" state="disabled" />
+            </div>
+            <div>
+              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">SMALL</p>
+              <DatePicker size="small" placeholder="DD/MM/YYYY" />
+            </div>
+            <div>
+              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">
+                COMPONENT VARIANT
+              </p>
+              <DatePicker variant="component" placeholder="DD/MM/YYYY" />
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-16 text-foreground-neutral-base">
+            Date Range Picker
+          </h3>
+          <div className="flex flex-col gap-16">
+            <div>
+              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">DEFAULT</p>
+              <DateTimeRangePicker placeholder="DD/MM/YYYY - DD/MM/YYYY" />
+            </div>
+            <div>
+              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">FILLED</p>
+              <DateTimeRangePicker
+                dateRange={{start: past, end: now}}
+                onClear={() => {
+                  /* noop for demo */
+                }}
+                placeholder="DD/MM/YYYY - DD/MM/YYYY"
+              />
+            </div>
+            <div>
+              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">ERROR</p>
+              <DateTimeRangePicker
+                dateRange={{start: past, end: now}}
+                onClear={() => {
+                  /* noop for demo */
+                }}
+                state="error"
+                placeholder="DD/MM/YYYY - DD/MM/YYYY"
+              />
+            </div>
+            <div>
+              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">DISABLED</p>
+              <DateTimeRangePicker placeholder="DD/MM/YYYY - DD/MM/YYYY" state="disabled" />
+            </div>
+            <div>
+              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">SMALL</p>
+              <DateTimeRangePicker size="small" placeholder="DD/MM/YYYY - DD/MM/YYYY" />
+            </div>
+            <div>
+              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">
+                COMPONENT VARIANT
+              </p>
+              <DateTimeRangePicker variant="component" placeholder="DD/MM/YYYY - DD/MM/YYYY" />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const DateFormats: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | undefined>(new Date());
+    const formats = [
+      {format: 'MMMM dd, yyyy', placeholder: 'Month DD, YYYY', label: 'MMMM dd, yyyy'},
+      {format: 'MMMM d, yyyy', placeholder: 'Month D, YYYY', label: 'MMMM d, yyyy'},
+      {format: 'MMM dd, yyyy', placeholder: 'Mon DD, YYYY', label: 'MMM dd, yyyy'},
+      {format: 'dd/MM/yyyy', placeholder: 'DD/MM/YYYY', label: 'dd/MM/yyyy'},
+      {format: 'MM/dd/yyyy', placeholder: 'MM/DD/YYYY', label: 'MM/dd/yyyy'},
+      {format: 'yyyy-MM-dd', placeholder: 'YYYY-MM-DD', label: 'yyyy-MM-dd'},
+    ];
+
+    return (
+      <div className="flex flex-col gap-32 p-32 min-w-350">
+        <h3 className="text-lg font-semibold mb-16 text-foreground-neutral-base">
+          Date Format Examples
+        </h3>
+        <div className="flex flex-col gap-16">
+          {formats.map(({format, placeholder, label}) => (
+            <div key={format}>
+              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">{label}</p>
+              <DatePicker
+                date={date}
+                onDateSelect={setDate}
+                onClear={() => setDate(undefined)}
+                dateFormat={format}
+                placeholder={placeholder}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,179 @@
+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 {cn} from 'utils/cn';
+
+export const datePickerVariants = cva(
+  '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 DatePickerProps = Omit<ComponentProps<'input'>, 'size' | 'type'> &
+  VariantProps<typeof datePickerVariants> & {
+    date?: Date;
+    onDateSelect?: (date: Date | undefined) => void;
+    placeholder?: string;
+    dateFormat?: string;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    onClear?: () => void;
+    closeOnSelect?: boolean;
+  };
+
+export const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      state,
+      date,
+      onDateSelect,
+      placeholder = 'DD/MM/YYYY',
+      dateFormat = 'dd/MM/yyyy',
+      leftIcon,
+      rightIcon,
+      onClear,
+      disabled,
+      closeOnSelect = false,
+      ...props
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = useState(false);
+    const isDisabled = disabled || state === 'disabled';
+    const displayValue = date ? format(date, dateFormat) : '';
+
+    const handleSelect = (selectedDate: Date | undefined) => {
+      onDateSelect?.(selectedDate);
+      if (closeOnSelect) {
+        setOpen(false);
+      }
+    };
+
+    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',
+            datePickerVariants({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 is selected) */}
+          <button
+            type="button"
+            onClick={handleClear}
+            className={cn(
+              'flex items-center justify-center shrink-0 cursor-pointer',
+              size === 'small' ? 'size-28' : 'size-32',
+              date && onClear && !isDisabled ? 'visible' : 'invisible',
+            )}
+            aria-label="Clear date"
+          >
+            <Icon
+              name="closeLine"
+              className="size-16 text-foreground-neutral-muted hover:text-foreground-neutral-subtle transition-colors"
+            />
+          </button>
+
+          {/* Custom Right Icon */}
+          {rightIcon && !date && (
+            <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="single" selected={date} onSelect={handleSelect} />
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+
+DatePicker.displayName = 'DatePicker';

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

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

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/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,7 @@ export * from './input';
 export * from './item';
 export * from './label';
 export * from './modal';
+export * from './popover';
 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}>