@shipfox/react-ui 0.10.0 → 0.12.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/dropdown-menu.stories.tsx

@@ -0,0 +1,384 @@
+import {argosScreenshot} from '@argos-ci/storybook/vitest';
+import type {Meta, StoryObj} from '@storybook/react';
+import {screen, within} from '@testing-library/react';
+import type {UserEvent} from '@testing-library/user-event';
+import userEvent from '@testing-library/user-event';
+import {useState} from 'react';
+import {Avatar} from '../avatar';
+import {Button} from '../button';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from './dropdown-menu';
+
+const OPEN_MENU_REGEX = /open menu/i;
+const ACTIONS_REGEX = /actions/i;
+const ORGANIZATION_REGEX = /organization/i;
+const COMPLETE_MENU_REGEX = /complete menu/i;
+const SWITCH_ORGANIZATION_REGEX = /switch organization/i;
+
+const isTestEnvironment = () => typeof navigator !== 'undefined' && navigator.webdriver === true;
+
+type StoryContext = Parameters<NonNullable<Story['play']>>[0];
+type AdditionalStepsCallback = (ctx: StoryContext, user: UserEvent) => Promise<void>;
+
+async function openMenuAndScreenshot(
+  ctx: StoryContext,
+  triggerRegex: RegExp,
+  screenshotName: string,
+  additionalSteps?: AdditionalStepsCallback,
+): Promise<void> {
+  const {canvasElement, step} = ctx;
+  const canvas = within(canvasElement);
+  const user = userEvent.setup();
+
+  let triggerButton: HTMLElement | null = null;
+
+  await step('Open the dropdown menu', async () => {
+    triggerButton = canvas.getByRole('button', {name: triggerRegex});
+    await user.click(triggerButton);
+  });
+
+  await step('Wait for menu to appear and render', async () => {
+    await screen.findByRole('menu');
+    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);
+
+  if (additionalSteps) {
+    await additionalSteps(ctx, user);
+  }
+}
+
+const meta = {
+  title: 'Components/DropdownMenu',
+  component: DropdownMenuContent,
+  subcomponents: {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuItem,
+    DropdownMenuCheckboxItem,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuGroup,
+    DropdownMenuSub,
+    DropdownMenuSubTrigger,
+    DropdownMenuSubContent,
+  },
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    side: {
+      control: 'select',
+      options: ['top', 'right', 'bottom', 'left'],
+      description: 'The preferred side of the trigger to render against',
+      table: {defaultValue: {summary: 'bottom'}},
+    },
+    align: {
+      control: 'select',
+      options: ['start', 'center', 'end'],
+      description: 'The preferred alignment against the trigger',
+      table: {defaultValue: {summary: 'start'}},
+    },
+    sideOffset: {
+      control: {type: 'number', min: 0, max: 20, step: 1},
+      description: 'Distance in pixels from the trigger',
+      table: {defaultValue: {summary: '4'}},
+    },
+    alignOffset: {
+      control: {type: 'number', min: -20, max: 20, step: 1},
+      description: 'Offset in pixels from the alignment edge',
+      table: {defaultValue: {summary: '0'}},
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant of the dropdown content',
+      table: {defaultValue: {summary: 'md'}},
+    },
+  },
+  args: {
+    side: 'bottom',
+    align: 'center',
+    sideOffset: 8,
+    alignOffset: 0,
+    size: 'md',
+  },
+} satisfies Meta<typeof DropdownMenuContent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  play: (ctx) => openMenuAndScreenshot(ctx, OPEN_MENU_REGEX, 'DropdownMenu Default Open'),
+  render: function DefaultStory(args) {
+    const [container, setContainer] = useState<HTMLDivElement | null>(null);
+
+    return (
+      <div
+        ref={setContainer}
+        className="relative flex h-500 w-500 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible"
+      >
+        {container && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="secondary">Open Menu</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent {...args} container={container} side="bottom" align="center">
+              <DropdownMenuItem icon="editLine">Edit</DropdownMenuItem>
+              <DropdownMenuItem icon="addLine">Add</DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem icon="deleteBinLine">Delete</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+    );
+  },
+};
+
+export const WithShortcuts: Story = {
+  play: (ctx) => openMenuAndScreenshot(ctx, ACTIONS_REGEX, 'DropdownMenu With Shortcuts Open'),
+  render: function WithShortcutsStory(args) {
+    const [container, setContainer] = useState<HTMLDivElement | null>(null);
+
+    return (
+      <div
+        ref={setContainer}
+        className="relative flex h-500 w-500 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible"
+      >
+        {container && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="secondary">Actions</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent {...args} container={container} side="bottom" align="center">
+              <DropdownMenuItem icon="fileCopyLine" shortcut="⌘C">
+                Copy
+              </DropdownMenuItem>
+              <DropdownMenuItem icon="clipboardLine" shortcut="⌘V">
+                Paste
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem icon="deleteBinLine" shortcut="⌘⌫">
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+    );
+  },
+};
+
+function UserProfileSection() {
+  return (
+    <div className="flex items-center gap-8 px-8 py-6">
+      <Avatar
+        size="sm"
+        content="image"
+        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=faces"
+        fallback="John Doe"
+      />
+      <div className="flex flex-col">
+        <span className="text-sm font-medium leading-20 text-foreground-neutral-base">
+          John Doe
+        </span>
+        <span className="text-xs leading-16 text-foreground-neutral-muted">john@example.com</span>
+      </div>
+    </div>
+  );
+}
+
+function OrganizationItem() {
+  return (
+    <div className="flex items-center gap-8 px-8 py-6">
+      <Avatar size="3xs" content="logo" logoName="stripe" radius="rounded" />
+      <span className="text-sm leading-20 text-foreground-neutral-subtle">
+        Stripe&apos;s organization
+      </span>
+    </div>
+  );
+}
+
+export const OrganizationMenu: Story = {
+  args: {
+    size: 'md',
+  },
+  play: (ctx) =>
+    openMenuAndScreenshot(
+      ctx,
+      ORGANIZATION_REGEX,
+      'DropdownMenu Organization Menu Open',
+      async ({step}, user) => {
+        await step('Hover over submenu trigger', async () => {
+          const submenuTrigger = screen.getByRole('menuitem', {name: SWITCH_ORGANIZATION_REGEX});
+          await user.hover(submenuTrigger);
+          await new Promise((resolve) => setTimeout(resolve, 200));
+        });
+
+        await argosScreenshot(ctx, 'DropdownMenu Organization Menu Submenu Open');
+      },
+    ),
+  render: function OrganizationMenuStory(args) {
+    const [container, setContainer] = useState<HTMLDivElement | null>(null);
+
+    return (
+      <div
+        ref={setContainer}
+        className="relative flex h-600 w-600 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible"
+      >
+        {container && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="secondary" iconLeft="buildingLine">
+                Organization
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent {...args} container={container} side="bottom" align="start">
+              <OrganizationItem />
+              <DropdownMenuSeparator />
+              <DropdownMenuItem icon="settings3Line">Settings</DropdownMenuItem>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger icon="arrowLeftRightLine">
+                  Switch organization
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  <DropdownMenuItem
+                    icon="shipfox"
+                    iconStyle="text-foreground-neutral-base"
+                    className="text-foreground-neutral-base"
+                  >
+                    Shipfox
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    icon="github"
+                    iconStyle="text-foreground-neutral-base"
+                    className="text-foreground-neutral-base"
+                  >
+                    Github
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    icon="google"
+                    iconStyle="text-foreground-neutral-base"
+                    className="text-foreground-neutral-base"
+                  >
+                    Google
+                  </DropdownMenuItem>
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+              <DropdownMenuItem icon="addLine">New organization</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+    );
+  },
+};
+
+export const CompleteExample: Story = {
+  args: {
+    size: 'lg',
+    side: 'bottom',
+  },
+  play: (ctx) =>
+    openMenuAndScreenshot(ctx, COMPLETE_MENU_REGEX, 'DropdownMenu Complete Example Open'),
+  render: function CompleteExampleStory(args) {
+    const [container, setContainer] = useState<HTMLDivElement | null>(null);
+    const [showNotifications, setShowNotifications] = useState(true);
+    const [showBadges, setShowBadges] = useState(false);
+    const [theme, setTheme] = useState('dark');
+
+    return (
+      <div
+        ref={setContainer}
+        className="relative flex h-600 w-500 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible"
+      >
+        {container && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="secondary" iconLeft="menu3Line">
+                Complete Menu
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              {...args}
+              className="w-260"
+              container={container}
+              side="bottom"
+              align="start"
+            >
+              <UserProfileSection />
+              <DropdownMenuSeparator />
+
+              <DropdownMenuLabel>Actions</DropdownMenuLabel>
+              <DropdownMenuGroup>
+                <DropdownMenuItem icon="sparklingLine">Getting started</DropdownMenuItem>
+                <DropdownMenuItem icon="userLine">Profile settings</DropdownMenuItem>
+              </DropdownMenuGroup>
+
+              <DropdownMenuSeparator />
+
+              <DropdownMenuLabel>Preferences</DropdownMenuLabel>
+              <DropdownMenuGroup>
+                <DropdownMenuCheckboxItem
+                  checked={showNotifications}
+                  onCheckedChange={setShowNotifications}
+                  closeOnSelect={false}
+                >
+                  Show notifications
+                </DropdownMenuCheckboxItem>
+                <DropdownMenuCheckboxItem
+                  checked={showBadges}
+                  onCheckedChange={setShowBadges}
+                  closeOnSelect={false}
+                >
+                  Show badges
+                </DropdownMenuCheckboxItem>
+              </DropdownMenuGroup>
+
+              <DropdownMenuSeparator />
+
+              <DropdownMenuLabel>Theme</DropdownMenuLabel>
+              <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
+                <DropdownMenuRadioItem value="light" closeOnSelect={false}>
+                  Light
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="dark" closeOnSelect={false}>
+                  Dark
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="system" closeOnSelect={false}>
+                  System
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+
+              <DropdownMenuSeparator />
+              <DropdownMenuItem icon="logoutCircleLine">Log out</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+    );
+  },
+};