@shipfox/react-ui 0.11.0 → 0.13.0

package/index.css

@@ -193,6 +193,7 @@
   --background-contrast-base: var(--color-neutral-900);
   --background-neutral-background: var(--color-neutral-50);
   --background-backdrop-backdrop: var(--color-alpha-black-64);
+  --background-modal-overlay: var(--color-alpha-black-88);
 
   /* Button Background */
   --background-button-transparent-default: var(--color-alpha-white-0);
@@ -398,6 +399,7 @@
   --background-contrast-base: var(--color-neutral-800);
   --background-neutral-background: var(--color-neutral-1000);
   --background-backdrop-backdrop: var(--color-alpha-black-64);
+  --background-modal-overlay: var(--color-alpha-black-88);
 
   /* Button Background */
   --background-button-transparent-default: var(--color-alpha-white-0);
@@ -743,6 +745,7 @@
   --color-background-contrast-base: var(--background-contrast-base);
   --color-background-neutral-background: var(--background-neutral-background);
   --color-background-backdrop-backdrop: var(--background-backdrop-backdrop);
+  --color-background-modal-overlay: var(--background-modal-overlay);
 
   /* Theme tokens - button background */
   --color-background-button-transparent-default: var(--background-button-transparent-default);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/react-ui",
   "license": "MIT",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/badge/index.ts

@@ -1,4 +1,4 @@
-export {Badge, type BadgeProps, type BadgeVariant, badgeVariants} from './badge';
-export {IconBadge, type IconBadgeProps, type IconBadgeVariant} from './icon-badge';
-export {StatusBadge, type StatusBadgeProps} from './status-badge';
-export {UserBadge, type UserBadgeProps} from './user-badge';
+export * from './badge';
+export * from './icon-badge';
+export * from './status-badge';
+export * from './user-badge';

package/src/components/calendar/calendar.tsx

@@ -0,0 +1,90 @@
+import {Icon} from 'components/icon';
+import type {ComponentProps} from 'react';
+import {DayPicker} from 'react-day-picker';
+import {cn} from 'utils/cn';
+
+export type CalendarProps = ComponentProps<typeof DayPicker>;
+
+export function Calendar({className, classNames, showOutsideDays = true, ...props}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn('p-16 transition-colors', className)}
+      classNames={{
+        months: 'flex flex-col sm:flex-row gap-24',
+        month: 'space-y-16 relative',
+        month_caption: 'flex items-center justify-center mb-8 px-4 relative h-32',
+        caption_label: 'text-sm font-medium text-foreground-neutral-base',
+        nav: 'flex items-center gap-4 fixed left-0 top-16 w-full z-10',
+        button_previous: cn(
+          'size-32 bg-transparent p-0 absolute left-16 top-0',
+          'inline-flex items-center justify-center rounded-6',
+          'text-foreground-neutral-base',
+          'hover:bg-background-button-transparent-hover',
+          'active:bg-background-button-transparent-pressed',
+          'transition-colors outline-none',
+          'focus-visible:shadow-border-interactive-with-active',
+          'disabled:pointer-events-none disabled:opacity-50',
+        ),
+        button_next: cn(
+          'size-32 bg-transparent p-0 absolute right-16 top-0',
+          'inline-flex items-center justify-center rounded-6',
+          'text-foreground-neutral-base',
+          'hover:bg-background-button-transparent-hover',
+          'active:bg-background-button-transparent-pressed',
+          'transition-colors outline-none',
+          'focus-visible:shadow-border-interactive-with-active',
+          'disabled:pointer-events-none disabled:opacity-50',
+        ),
+        month_grid: 'w-full border-collapse mt-8',
+        weekdays: 'flex mb-8',
+        weekday:
+          'text-foreground-neutral-subtle text-xs font-medium w-36 h-32 flex items-center justify-center',
+        week: 'flex mt-4',
+        day: cn(
+          'relative text-center size-36 p-0 text-sm font-normal [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
+          '[&:last-child[data-selected=true]_button]:rounded-r-6',
+          props.showWeekNumber
+            ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-6'
+            : '[&:first-child[data-selected=true]_button]:rounded-l-6',
+        ),
+        day_button: cn(
+          'size-36 p-0 text-sm font-normal rounded-6',
+          'inline-flex items-center justify-center',
+          'hover:bg-background-button-transparent-hover',
+          'focus-visible:shadow-border-interactive-with-active',
+          'transition-colors outline-none',
+          'aria-selected:opacity-100',
+        ),
+        range_start: 'day-range-start rounded-6',
+        range_end: 'day-range-end rounded-6',
+        selected: cn(
+          'bg-foreground-highlight-interactive/80 !text-foreground-neutral-base font-medium rounded-6',
+          'hover:bg-foreground-highlight-interactive-hover/80',
+          'focus:bg-foreground-highlight-interactive/80',
+        ),
+        today: cn(
+          'bg-background-field-base text-foreground-neutral-base font-medium rounded-6',
+          'border border-border-neutral-base',
+        ),
+        outside: 'day-outside text-foreground-neutral-muted',
+        disabled: 'text-foreground-neutral-disabled opacity-30 cursor-not-allowed',
+        range_middle: cn(
+          'aria-selected:bg-foreground-highlight-interactive/10 aria-selected:text-foreground-neutral-base',
+          'rounded-none',
+          'first:rounded-l-6 first:rounded-r-none',
+          'last:rounded-r-6 last:rounded-l-none',
+        ),
+        hidden: 'invisible',
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({orientation}) => {
+          const iconName = orientation === 'left' ? 'arrowLeftSLine' : 'arrowRightSLine';
+          return <Icon name={iconName} className="size-20" />;
+        },
+      }}
+      {...props}
+    />
+  );
+}

package/src/components/calendar/index.ts

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

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';