@shipfox/react-ui 0.10.0 → 0.12.0

package/src/components/dropdown-menu/dropdown-menu.tsx

@@ -0,0 +1,416 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import {cva, type VariantProps} from 'class-variance-authority';
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+import {Icon, type IconName} from '../icon';
+
+function DropdownMenu({...props}: ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      className={cn('outline-none', className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuPortal({...props}: ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+}
+
+const dropdownMenuContentVariants = cva(
+  [
+    'z-50 min-w-[180px] overflow-hidden rounded-10 p-4',
+    'bg-background-neutral-overlay text-foreground-neutral-subtle',
+    'shadow-tooltip',
+    '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',
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'min-w-[160px]',
+        md: 'min-w-[200px]',
+        lg: 'min-w-[240px]',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+);
+
+type DropdownMenuContentProps = ComponentProps<typeof DropdownMenuPrimitive.Content> &
+  VariantProps<typeof dropdownMenuContentVariants> & {
+    container?: HTMLElement | null;
+  };
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  size,
+  onCloseAutoFocus,
+  container,
+  ...props
+}: DropdownMenuContentProps) {
+  return (
+    <DropdownMenuPrimitive.Portal container={container}>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(dropdownMenuContentVariants({size}), className)}
+        onCloseAutoFocus={(e) => {
+          e.preventDefault();
+          onCloseAutoFocus?.(e);
+        }}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group
+      data-slot="dropdown-menu-group"
+      className={cn('flex flex-col', className)}
+      {...props}
+    />
+  );
+}
+
+const dropdownMenuLabelVariants = cva(
+  'px-8 py-4 text-xs leading-20 text-foreground-neutral-subtle select-none',
+  {
+    variants: {
+      inset: {
+        true: 'pl-32',
+      },
+    },
+  },
+);
+
+type DropdownMenuLabelProps = ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+};
+
+function DropdownMenuLabel({className, inset, ...props}: DropdownMenuLabelProps) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      className={cn(dropdownMenuLabelVariants({inset}), className)}
+      {...props}
+    />
+  );
+}
+
+const dropdownMenuItemVariants = cva(
+  [
+    'relative flex cursor-pointer select-none items-center gap-8 rounded-6 px-8 py-6',
+    'text-sm leading-20 text-foreground-neutral-subtle outline-none transition-colors',
+    'focus:bg-background-components-hover',
+    'data-disabled:pointer-events-none data-disabled:text-foreground-neutral-disabled',
+  ],
+  {
+    variants: {
+      inset: {
+        true: 'pl-32',
+      },
+      variant: {
+        default: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+type DropdownMenuItemProps = ComponentProps<typeof DropdownMenuPrimitive.Item> &
+  VariantProps<typeof dropdownMenuItemVariants> & {
+    icon?: IconName;
+    shortcut?: string;
+    closeOnSelect?: boolean;
+    iconStyle?: string;
+  };
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant,
+  icon,
+  shortcut,
+  children,
+  closeOnSelect = true,
+  iconStyle,
+  onSelect,
+  ...props
+}: DropdownMenuItemProps) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      className={cn(dropdownMenuItemVariants({inset, variant}), className)}
+      onSelect={(e) => {
+        if (!closeOnSelect) e.preventDefault();
+        onSelect?.(e);
+      }}
+      {...props}
+    >
+      {icon && (
+        <Icon
+          name={icon}
+          className={cn('size-16 shrink-0 text-foreground-neutral-subtle', iconStyle)}
+        />
+      )}
+      <span className="flex-1 truncate">{children}</span>
+      {shortcut && <DropdownMenuShortcut>{shortcut}</DropdownMenuShortcut>}
+    </DropdownMenuPrimitive.Item>
+  );
+}
+
+type DropdownMenuCheckboxItemProps = ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+  icon?: IconName;
+  shortcut?: string;
+  closeOnSelect?: boolean;
+};
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  icon,
+  shortcut,
+  closeOnSelect = true,
+  onSelect,
+  ...props
+}: DropdownMenuCheckboxItemProps) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        [
+          'relative flex cursor-pointer select-none items-center gap-8 rounded-6 py-6 pl-32 pr-8',
+          'text-sm leading-20 text-foreground-neutral-subtle outline-none transition-colors',
+          'focus:bg-background-components-hover',
+          'data-disabled:pointer-events-none data-disabled:text-foreground-neutral-disabled',
+          'data-[state=checked]:text-foreground-neutral-base',
+        ],
+        className,
+      )}
+      checked={checked}
+      onSelect={(e) => {
+        if (!closeOnSelect) e.preventDefault();
+        onSelect?.(e);
+      }}
+      {...props}
+    >
+      <span className="absolute left-8 flex size-16 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <Icon name="check" className="size-14 text-foreground-neutral-base" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {icon && <Icon name={icon} className="size-16 shrink-0 text-foreground-neutral-subtle" />}
+      <span className="flex-1 truncate">{children}</span>
+      {shortcut && <DropdownMenuShortcut>{shortcut}</DropdownMenuShortcut>}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      className={cn('flex flex-col', className)}
+      {...props}
+    />
+  );
+}
+
+type DropdownMenuRadioItemProps = ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  icon?: IconName;
+  closeOnSelect?: boolean;
+};
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  icon,
+  closeOnSelect = true,
+  onSelect,
+  ...props
+}: DropdownMenuRadioItemProps) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        [
+          'relative flex cursor-pointer select-none items-center gap-8 rounded-6 py-6 pl-32 pr-8',
+          'text-sm leading-20 text-foreground-neutral-subtle outline-none transition-colors',
+          'focus:bg-background-components-hover',
+          'data-disabled:pointer-events-none data-disabled:text-foreground-neutral-disabled',
+          'data-[state=checked]:text-foreground-neutral-base',
+        ],
+        className,
+      )}
+      onSelect={(e) => {
+        if (!closeOnSelect) e.preventDefault();
+        onSelect?.(e);
+      }}
+      {...props}
+    >
+      <span className="absolute left-8 flex size-16 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <Icon name="ellipseMiniSolid" className="size-6 text-foreground-neutral-base" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {icon && <Icon name={icon} className="size-16 shrink-0 text-foreground-neutral-subtle" />}
+      <span className="flex-1 truncate">{children}</span>
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn(
+        'relative -mx-4 my-4 h-px',
+        'bg-border-neutral-menu-top',
+        'after:absolute after:inset-x-0 after:top-px after:h-px',
+        'after:bg-border-neutral-menu-bottom',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type DropdownMenuShortcutProps = ComponentProps<'span'>;
+
+function DropdownMenuShortcut({className, ...props}: DropdownMenuShortcutProps) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        'ml-auto text-xs leading-20 text-foreground-neutral-muted tabular-nums',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({...props}: ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+type DropdownMenuSubTriggerProps = ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+  icon?: IconName;
+};
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  icon,
+  children,
+  ...props
+}: DropdownMenuSubTriggerProps) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      className={cn(
+        [
+          'relative flex cursor-pointer select-none items-center gap-8 rounded-6 px-8 py-6',
+          'text-sm leading-20 text-foreground-neutral-subtle outline-none transition-colors',
+          'focus:bg-background-components-hover',
+          'data-[state=open]:bg-background-components-hover',
+          'data-disabled:pointer-events-none data-disabled:text-foreground-neutral-disabled',
+          'data-[state=checked]:text-foreground-neutral-base',
+        ],
+        inset && 'pl-32',
+        className,
+      )}
+      {...props}
+    >
+      {icon && <Icon name={icon} className="size-16 shrink-0 text-foreground-neutral-subtle" />}
+      <span className="flex-1 truncate">{children}</span>
+      <Icon name="chevronRight" className="ml-auto size-14 text-foreground-neutral-muted" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        [
+          'z-50 min-w-180 overflow-hidden rounded-10 p-4',
+          'bg-background-neutral-overlay text-foreground-neutral-subtle',
+          'shadow-tooltip',
+          '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}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuPortal,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  dropdownMenuContentVariants,
+  dropdownMenuItemVariants,
+  dropdownMenuLabelVariants,
+};
+
+export type {
+  DropdownMenuContentProps,
+  DropdownMenuLabelProps,
+  DropdownMenuItemProps,
+  DropdownMenuCheckboxItemProps,
+  DropdownMenuRadioItemProps,
+  DropdownMenuSubTriggerProps,
+  DropdownMenuShortcutProps,
+};

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

@@ -0,0 +1,29 @@
+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';

package/src/components/dynamic-item/dynamic-item.stories.tsx

@@ -144,7 +144,12 @@ export const ConnectGithubAccountItem: Story = {
           </div>
         }
         title="Slack"
-        description="Personal account (kye-nguyen)"
+        description={
+          <p className="text-xs leading-20 text-tag-warning-icon inline-flex items-center gap-2">
+            Personal account (kyle-nguyen)
+            <Icon name="info" size="sm" className="shrink-0 size-16 text-tag-warning-icon" />
+          </p>
+        }
         rightElement={
           <Button variant="primary" size="sm">
             Change account

package/src/components/dynamic-item/dynamic-item.tsx

@@ -14,7 +14,7 @@ export type DynamicItemProps = Omit<ItemProps, 'variant' | 'children' | 'title'>
   variant?: 'default' | 'neutral';
   leftElement?: ReactNode;
   title?: ReactNode;
-  description?: string;
+  description?: ReactNode;
   action?: ReactNode;
   rightElement?: ReactNode;
   contentClassName?: string;
@@ -49,8 +49,14 @@ export function DynamicItem({
 
         {hasContent && (
           <ItemContent className="text-center sm:text-left">
-            {title && typeof title === 'string' ? <ItemTitle>{title}</ItemTitle> : title}
-            {description && <ItemDescription>{description}</ItemDescription>}
+            {title ? typeof title === 'string' ? <ItemTitle>{title}</ItemTitle> : title : null}
+            {description ? (
+              typeof description === 'string' ? (
+                <ItemDescription>{description}</ItemDescription>
+              ) : (
+                description
+              )
+            ) : null}
             {action && (
               <ItemActions className={cn('mt-8 flex flex-wrap items-center gap-16')}>
                 {action}

package/src/components/index.ts

@@ -2,9 +2,13 @@ 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';
 export * from './form';
 export * from './icon';
@@ -13,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}>

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>
+    );
+  },
 };