@shipfox/react-ui 0.14.0 → 0.16.0

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

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

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

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

@@ -1,266 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {Button} from 'components/button/button';
-import {ItemTitle} from 'components/item';
-import {MovingBorder} from 'components/moving-border';
-import {cn} from 'utils/cn';
-import illustration1 from '../../assets/illustration-1.svg';
-import illustration2 from '../../assets/illustration-2.svg';
-import illustrationBg from '../../assets/illustration-gradient.svg';
-import {Avatar} from '../avatar/avatar';
-import {AvatarGroup, AvatarGroupTooltip} from '../avatar/avatar-group';
-import {Icon} from '../icon/icon';
-import {DynamicItem} from './dynamic-item';
-
-const meta = {
-  title: 'Components/DynamicItem',
-  component: DynamicItem,
-  tags: ['autodocs'],
-} satisfies Meta<typeof DynamicItem>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const OrganizationItem: Story = {
-  args: {},
-  render: () => (
-    <div className="flex flex-col gap-16 w-full max-w-476">
-      <DynamicItem
-        variant="default"
-        leftElement={<Avatar content="logo" logoName="slack" radius="rounded" size="xl" />}
-        title="Slack"
-        description="3 members"
-        rightElement={
-          <AvatarGroup size="md">
-            <Avatar content="image" fallback="John Doe">
-              <AvatarGroupTooltip>John Doe</AvatarGroupTooltip>
-            </Avatar>
-            <Avatar content="image" fallback="Jane Smith">
-              <AvatarGroupTooltip>Jane Smith</AvatarGroupTooltip>
-            </Avatar>
-            <Avatar content="image" fallback="Bob Johnson">
-              <AvatarGroupTooltip>Bob Johnson</AvatarGroupTooltip>
-            </Avatar>
-          </AvatarGroup>
-        }
-      />
-      <DynamicItem
-        variant="default"
-        leftElement={<Avatar content="logo" logoName="stripe" radius="rounded" size="xl" />}
-        title="Stripe"
-        description="2 members"
-        rightElement={
-          <AvatarGroup size="md">
-            <Avatar content="image" fallback="Alice Brown">
-              <AvatarGroupTooltip>Alice Brown</AvatarGroupTooltip>
-            </Avatar>
-            <Avatar content="image" fallback="Carlos Vega">
-              <AvatarGroupTooltip>Carlos Vega</AvatarGroupTooltip>
-            </Avatar>
-          </AvatarGroup>
-        }
-      />
-      <DynamicItem
-        variant="default"
-        leftElement={<Avatar content="logo" logoName="shipfox" radius="rounded" size="xl" />}
-        title="Shipfox"
-        description="9 members"
-        rightElement={
-          <AvatarGroup size="md" maxVisible={4} animateOnHover>
-            <Avatar content="image" fallback="Linda Tran">
-              <AvatarGroupTooltip>Linda Tran</AvatarGroupTooltip>
-            </Avatar>
-            <Avatar content="image" fallback="Michael Chen">
-              <AvatarGroupTooltip>Michael Chen</AvatarGroupTooltip>
-            </Avatar>
-            <Avatar content="image" fallback="Sarah Williams">
-              <AvatarGroupTooltip>Sarah Williams</AvatarGroupTooltip>
-            </Avatar>
-            <Avatar content="image" fallback="David Lee">
-              <AvatarGroupTooltip>David Lee</AvatarGroupTooltip>
-            </Avatar>
-            <Avatar content="image" fallback="Emily Davis">
-              <AvatarGroupTooltip>Emily Davis</AvatarGroupTooltip>
-            </Avatar>
-            <Avatar content="image" fallback="James Wilson">
-              <AvatarGroupTooltip>James Wilson</AvatarGroupTooltip>
-            </Avatar>
-            <Avatar content="image" fallback="Olivia Martinez">
-              <AvatarGroupTooltip>Olivia Martinez</AvatarGroupTooltip>
-            </Avatar>
-            <Avatar content="image" fallback="Noah Anderson">
-              <AvatarGroupTooltip>Noah Anderson</AvatarGroupTooltip>
-            </Avatar>
-            <Avatar content="image" fallback="Sophia Taylor">
-              <AvatarGroupTooltip>Sophia Taylor</AvatarGroupTooltip>
-            </Avatar>
-          </AvatarGroup>
-        }
-      />
-    </div>
-  ),
-};
-
-export const ConnectGithubAccountItem: Story = {
-  args: {},
-  render: () => (
-    <div className="flex flex-col gap-16 w-full max-w-476">
-      <DynamicItem
-        variant="default"
-        leftElement={
-          <div className="relative">
-            <Avatar content="logoPlaceholder" logoName="slack" radius="full" size="lg" />
-            <Avatar
-              content="logoPlaceholder"
-              logoName="github"
-              radius="full"
-              size="2xs"
-              logoClassName="p-0"
-              className="absolute bottom-0 left-27"
-            />
-          </div>
-        }
-        title="Slack"
-        description="Connect Github organization"
-        rightElement={
-          <Button variant="primary" size="sm">
-            Connect
-          </Button>
-        }
-      />
-
-      <DynamicItem
-        variant="default"
-        leftElement={
-          <div className="relative">
-            <Avatar content="logoPlaceholder" logoName="slack" radius="full" size="lg" />
-            <Avatar
-              content="logo"
-              logoName="github"
-              radius="full"
-              size="2xs"
-              logoClassName="p-0"
-              className="absolute bottom-0 left-27"
-            />
-          </div>
-        }
-        title="Slack"
-        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
-          </Button>
-        }
-      />
-
-      <DynamicItem
-        variant="default"
-        leftElement={
-          <div className="relative">
-            <Avatar content="logoPlaceholder" logoName="slack" radius="full" size="lg" />
-            <Avatar
-              content="logo"
-              logoName="github"
-              radius="full"
-              size="2xs"
-              logoClassName="p-0"
-              className="absolute bottom-0 left-27"
-            />
-          </div>
-        }
-        title="Slack"
-        description="Organization (slack-github)"
-        rightElement={
-          <Button variant="secondary" size="sm">
-            Change account
-          </Button>
-        }
-      />
-    </div>
-  ),
-};
-
-export const WithCustomElementsItem: Story = {
-  args: {},
-  render: () => {
-    return (
-      <div className="flex flex-col gap-16 w-full max-w-672">
-        <DynamicItem
-          variant="default"
-          leftElement={
-            <div className="flex shrink-0 items-center justify-center text-tag-success-icon">
-              <Icon name="checkCircleSolid" size="sm" />
-            </div>
-          }
-          title="Give access to your Github organizations"
-          description="We'll use this permission to sync your organization's."
-          action={
-            <div className="flex gap-8 mx-auto sm:mx-0">
-              <Button variant="primary" size="sm">
-                Github access
-              </Button>
-              <Button variant="transparentMuted" size="sm">
-                Skip for now
-              </Button>
-            </div>
-          }
-          rightElement={
-            <img
-              src={illustration1}
-              alt="illustration-1"
-              className="hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 -translate-x-46 w-fit object-contain"
-            />
-          }
-        />
-        <div className="relative">
-          <img
-            src={illustration2}
-            alt="illustration-2"
-            className="hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 translate-x-8 w-fit object-contain z-50"
-          />
-          <div className={cn('relative overflow-hidden bg-transparent p-1 rounded-8')}>
-            <div className="absolute inset-0" style={{borderRadius: 'calc(0.5rem * 0.96)'}}>
-              <MovingBorder duration={6000} rx="30%" ry="30%">
-                <div className="h-100 w-200 bg-[radial-gradient(#ff9e7a_40%,transparent_60%)]" />
-              </MovingBorder>
-            </div>
-            <div
-              className="relative"
-              style={{
-                borderRadius: 'calc(0.5rem * 0.96)',
-              }}
-            >
-              <DynamicItem
-                variant="default"
-                title={
-                  <div className="flex items-center gap-6">
-                    <span className="flex shrink-0 items-center justify-center text-tag-success-icon w-16 h-16">
-                      <Icon
-                        name="money"
-                        size="sm"
-                        color="var(--foreground-neutral-subtle, #a1a1aa)"
-                      />
-                    </span>
-                    <ItemTitle>6000 free credits/month to run your jobs</ItemTitle>
-                  </div>
-                }
-                description="~500 builds/month. No payment required."
-                rightElement={
-                  <img
-                    src={illustrationBg}
-                    alt="illustration-bg"
-                    className="hidden sm:block absolute overflow-clip right-4 w-fit object-contain scale-105"
-                  />
-                }
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};