@shipfox/react-ui 0.15.0 → 0.16.0

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

@@ -1,230 +0,0 @@
-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

@@ -1,179 +0,0 @@
-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

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

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

@@ -1,211 +0,0 @@
-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

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