@shipfox/react-ui 0.15.0 → 0.17.0

package/src/components/avatar/avatar-group.tsx

@@ -1,186 +0,0 @@
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import {cva, type VariantProps} from 'class-variance-authority';
-import {
-  Children,
-  type ComponentProps,
-  cloneElement,
-  type ReactElement,
-  type ReactNode,
-  useMemo,
-} from 'react';
-import {cn} from 'utils/cn';
-import {TooltipContent, TooltipProvider, TooltipTrigger} from '../tooltip/tooltip';
-
-const avatarGroupVariants = cva('flex items-start', {
-  variants: {
-    size: {
-      '3xs': '-space-x-4',
-      '2xs': '-space-x-4',
-      xs: '-space-x-4',
-      sm: '-space-x-6',
-      md: '-space-x-6',
-      lg: '-space-x-6',
-      xl: '-space-x-6',
-      '2xl': '-space-x-12',
-      '3xl': '-space-x-12',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
-
-const avatarGroupOverflowVariants = cva(
-  'flex shrink-0 items-center justify-center rounded-full bg-background-components-base text-foreground-neutral-subtle font-medium ring-1 ring-border-neutral-base-component ring-offset-1 ring-offset-background-neutral-base shadow-button-neutral',
-  {
-    variants: {
-      size: {
-        '3xs': 'size-[18px] text-[10px] leading-[10px]',
-        '2xs': 'size-[20px] text-[11px] leading-[11px]',
-        xs: 'size-[24px] text-xs leading-4',
-        sm: 'size-[28px] text-xs leading-5',
-        md: 'size-[32px] text-sm leading-5',
-        lg: 'size-[36px] text-sm leading-5',
-        xl: 'size-[40px] text-base leading-6',
-        '2xl': 'size-[80px] text-2xl leading-8',
-        '3xl': 'size-[120px] text-4xl leading-[56px]',
-      },
-    },
-    defaultVariants: {
-      size: 'md',
-    },
-  },
-);
-
-type TooltipContentProps = ComponentProps<typeof TooltipContent>;
-
-type AvatarContainerProps = {
-  children: ReactNode;
-  zIndex: number;
-  tooltipContent?: ReactNode;
-  tooltipProps?: Partial<TooltipContentProps>;
-  animateOnHover?: boolean;
-};
-
-function AvatarContainer({
-  children,
-  zIndex,
-  tooltipContent,
-  tooltipProps,
-  animateOnHover = false,
-}: AvatarContainerProps) {
-  return (
-    <TooltipPrimitive.Root>
-      <TooltipTrigger asChild>
-        <div
-          data-slot="avatar-container"
-          className={cn(
-            'relative',
-            animateOnHover && 'transition-transform duration-300 ease-in-out hover:-translate-y-4',
-          )}
-          style={{zIndex}}
-        >
-          {children}
-        </div>
-      </TooltipTrigger>
-      {tooltipContent && (
-        <AvatarGroupTooltip {...tooltipProps}>{tooltipContent}</AvatarGroupTooltip>
-      )}
-    </TooltipPrimitive.Root>
-  );
-}
-
-function getTooltipContent(children: ReactNode): ReactNode | null {
-  const tooltip = Children.toArray(children).find(
-    (child) =>
-      typeof child === 'object' &&
-      child !== null &&
-      'type' in child &&
-      child.type === AvatarGroupTooltip,
-  ) as ReactElement<ComponentProps<typeof AvatarGroupTooltip>> | undefined;
-
-  return tooltip?.props.children || null;
-}
-
-type AvatarGroupTooltipProps = TooltipContentProps;
-
-function AvatarGroupTooltip(props: AvatarGroupTooltipProps) {
-  return <TooltipContent {...props} />;
-}
-
-type AvatarGroupProps = ComponentProps<'div'> &
-  VariantProps<typeof avatarGroupVariants> & {
-    children: ReactElement[];
-    maxVisible?: number;
-    animateOnHover?: boolean;
-    tooltipProps?: Partial<TooltipContentProps>;
-  };
-
-export function AvatarGroup({
-  className,
-  size = 'md',
-  children,
-  maxVisible,
-  animateOnHover = false,
-  tooltipProps = {side: 'top', sideOffset: 8},
-  ...props
-}: AvatarGroupProps) {
-  const normalizedSize = size ?? 'md';
-
-  const childrenArray = Children.toArray(children) as ReactElement[];
-
-  const {visibleCount, visibleAvatars, overflowCount} = useMemo(() => {
-    const count =
-      maxVisible !== undefined ? Math.min(maxVisible, childrenArray.length) : childrenArray.length;
-    return {
-      visibleCount: count,
-      visibleAvatars: childrenArray.slice(0, count),
-      overflowCount: childrenArray.length - count,
-    };
-  }, [childrenArray, maxVisible]);
-
-  return (
-    <TooltipProvider delayDuration={0}>
-      <div
-        className={cn(avatarGroupVariants({size: normalizedSize}), className)}
-        data-slot="avatar-group"
-        {...props}
-      >
-        {visibleAvatars.map((child, index) => {
-          const zIndex = index + 1;
-          const childProps = 'props' in child ? (child.props as {children?: ReactNode}) : {};
-          const tooltipContent = getTooltipContent(childProps.children);
-
-          return (
-            <AvatarContainer
-              key={child.key || index}
-              zIndex={zIndex}
-              tooltipContent={tooltipContent}
-              tooltipProps={tooltipProps}
-              animateOnHover={animateOnHover}
-            >
-              {cloneElement(child, {
-                ...childProps,
-                children: tooltipContent ? undefined : childProps.children,
-              } as Partial<typeof childProps>)}
-            </AvatarContainer>
-          );
-        })}
-        {overflowCount > 0 && (
-          <div
-            className={cn(
-              'relative',
-              avatarGroupOverflowVariants({size: normalizedSize}),
-              'rounded-full',
-            )}
-            style={{zIndex: visibleCount + 1}}
-          >
-            +{overflowCount}
-          </div>
-        )}
-      </div>
-    </TooltipProvider>
-  );
-}
-
-export {AvatarGroupTooltip, type AvatarGroupTooltipProps};

package/src/components/avatar/avatar.stories.tsx

@@ -1,179 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {Code} from 'components/typography';
-import {Avatar} from './avatar';
-import {AvatarGroup, AvatarGroupTooltip} from './avatar-group';
-
-const contentOptions = ['letters', 'logo', 'logoPlaceholder', 'image', 'upload'] as const;
-const radiusOptions = ['full', 'rounded'] as const;
-const sizeOptions = ['3xs', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] as const;
-const logoNameOptions = ['shipfox', 'slack', 'stripe', 'github'] as const;
-
-const meta = {
-  title: 'Components/Avatar',
-  component: Avatar,
-  tags: ['autodocs'],
-  argTypes: {
-    content: {
-      control: 'select',
-      options: contentOptions,
-    },
-    radius: {
-      control: 'select',
-      options: radiusOptions,
-    },
-    size: {
-      control: 'select',
-      options: sizeOptions,
-    },
-    fallback: {
-      control: 'text',
-    },
-    src: {
-      control: 'text',
-    },
-    alt: {
-      control: 'text',
-    },
-    logoName: {
-      control: 'select',
-      options: logoNameOptions,
-      description: 'Logo icon name to display when content is "logo" or "logoPlaceholder"',
-    },
-  },
-  args: {
-    content: 'letters',
-    radius: 'full',
-    size: 'md',
-    fallback: 'John Doe',
-    logoName: 'shipfox',
-  },
-} satisfies Meta<typeof Avatar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    content: 'logo',
-    fallback: 'Shipfox',
-  },
-
-  render: (args) => (
-    <div className="flex flex-wrap items-end gap-16">
-      {sizeOptions.map((size) => (
-        <div key={size} className="flex flex-col items-center gap-8">
-          <Avatar {...args} size={size} />
-          <Code variant="label" className="text-foreground-neutral-base">
-            {size}
-          </Code>
-        </div>
-      ))}
-    </div>
-  ),
-};
-
-// AvatarGroup Stories
-const avatarGroupMeta = {
-  title: 'Components/AvatarGroup',
-  component: AvatarGroup,
-  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: 'select',
-      options: sizeOptions,
-    },
-    maxVisible: {
-      control: 'number',
-    },
-  },
-  args: {
-    size: 'md',
-    children: [],
-  },
-} satisfies Meta<typeof AvatarGroup>;
-
-export const AvatarGroupDefault: StoryObj<typeof avatarGroupMeta> = {
-  args: {
-    children: [],
-  },
-  render: () => {
-    const avatars = [
-      {name: 'John Doe', content: 'image'},
-      {name: 'Jane Smith', content: 'image'},
-      {name: 'Bob Johnson', content: 'image'},
-      {name: 'Alice Brown', content: 'image'},
-    ] as const;
-
-    return (
-      <div className="flex flex-col gap-16">
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-base">
-            Default (without tooltips)
-          </Code>
-          <AvatarGroup size="md">
-            {avatars.map((avatar) => (
-              <Avatar key={avatar.name} content={avatar.content} fallback={avatar.name} />
-            ))}
-          </AvatarGroup>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const AvatarGroupWithTooltips: StoryObj<typeof avatarGroupMeta> = {
-  args: {
-    children: [],
-  },
-  render: () => {
-    const avatars = [
-      {name: 'John Doe', content: 'image'},
-      {name: 'Jane Smith', content: 'image'},
-      {name: 'Bob Johnson', content: 'image'},
-      {name: 'Alice Brown', content: 'image'},
-      {name: 'Carlos Vega', content: 'image'},
-      {name: 'Linda Tran', content: 'image'},
-    ] as const;
-
-    return (
-      <div className="flex flex-col gap-16">
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-base">
-            With Tooltips
-          </Code>
-          <AvatarGroup size="md">
-            {avatars.map((avatar) => (
-              <Avatar key={avatar.name} content={avatar.content} fallback={avatar.name}>
-                <AvatarGroupTooltip>{avatar.name}</AvatarGroupTooltip>
-              </Avatar>
-            ))}
-          </AvatarGroup>
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-base">
-            With Tooltips (maxVisible: 4)
-          </Code>
-          <AvatarGroup size="md" maxVisible={4}>
-            {avatars.map((avatar) => (
-              <Avatar key={avatar.name} content={avatar.content} fallback={avatar.name}>
-                <AvatarGroupTooltip>{avatar.name}</AvatarGroupTooltip>
-              </Avatar>
-            ))}
-          </AvatarGroup>
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-base">
-            With Tooltips and Hover Animation
-          </Code>
-          <AvatarGroup size="md" maxVisible={4} animateOnHover>
-            {avatars.map((avatar) => (
-              <Avatar key={avatar.name} content={avatar.content} fallback={avatar.name}>
-                <AvatarGroupTooltip>{avatar.name}</AvatarGroupTooltip>
-              </Avatar>
-            ))}
-          </AvatarGroup>
-        </div>
-      </div>
-    );
-  },
-};

package/src/components/avatar/avatar.tsx

@@ -1,219 +0,0 @@
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import {cva, type VariantProps} from 'class-variance-authority';
-import type {ComponentProps, ReactNode} from 'react';
-import {getInitial, getPlaceholderImageUrl} from 'utils';
-import {cn} from 'utils/cn';
-import {Icon, type IconName} from '../icon/icon';
-
-export const avatarVariants = cva(
-  'relative flex shrink-0 overflow-hidden bg-background-button-neutral-default text-foreground-neutral-base ring-1 ring-border-neutral-base-component ring-offset-1 ring-offset-background-neutral-base shadow-button-neutral',
-  {
-    variants: {
-      radius: {
-        full: 'rounded-full',
-        rounded: 'rounded-4',
-      },
-      size: {
-        '3xs': 'size-[18px]',
-        '2xs': 'size-[20px]',
-        xs: 'size-[24px]',
-        sm: 'size-[28px]',
-        md: 'size-[32px]',
-        lg: 'size-[36px]',
-        xl: 'size-[40px]',
-        '2xl': 'size-[80px]',
-        '3xl': 'size-[120px]',
-      },
-    },
-    defaultVariants: {
-      radius: 'full',
-      size: 'md',
-    },
-  },
-);
-
-const avatarInnerVariants = cva('flex h-full w-full items-center justify-center', {
-  variants: {
-    size: {
-      '3xs': 'text-[10px] leading-[10px]',
-      '2xs': 'text-[11px] leading-[11px]',
-      xs: 'text-xs leading-4',
-      sm: 'text-xs leading-5',
-      md: 'text-sm leading-5',
-      lg: 'text-sm leading-5',
-      xl: 'text-base leading-6',
-      '2xl': 'text-2xl leading-8',
-      '3xl': 'text-4xl leading-[56px]',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
-
-export type AvatarContent = 'letters' | 'logo' | 'logoPlaceholder' | 'image' | 'upload';
-
-const UPLOAD_ICON_SIZE_MAP: Record<
-  NonNullable<VariantProps<typeof avatarVariants>['size']>,
-  string
-> = {
-  '3xs': 'size-[10px]',
-  '2xs': 'size-[12px]',
-  xs: 'size-[14px]',
-  sm: 'size-[16px]',
-  md: 'size-[18px]',
-  lg: 'size-[20px]',
-  xl: 'size-[24px]',
-  '2xl': 'size-[40px]',
-  '3xl': 'size-[60px]',
-} as const;
-
-function AvatarRoot({
-  className,
-  radius,
-  size,
-  ...props
-}: ComponentProps<typeof AvatarPrimitive.Root> & VariantProps<typeof avatarVariants>) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn(avatarVariants({radius, size}), className)}
-      {...props}
-    />
-  );
-}
-
-function AvatarImage({className, ...props}: ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn('aspect-square size-full', className)}
-      {...props}
-    />
-  );
-}
-
-function AvatarFallback({className, ...props}: ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-name"
-      className={cn('flex size-full items-center justify-center', className)}
-      {...props}
-    />
-  );
-}
-
-export type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root> &
-  VariantProps<typeof avatarVariants> & {
-    content?: AvatarContent;
-    src?: string;
-    alt?: string;
-    fallback?: string;
-    animateOnHover?: boolean;
-    logoName?: IconName;
-    logoClassName?: string;
-  };
-
-export function Avatar({
-  className,
-  radius,
-  size = 'md',
-  content = 'letters',
-  src,
-  alt,
-  fallback,
-  animateOnHover = false,
-  logoName = 'shipfox',
-  logoClassName,
-  ...props
-}: AvatarProps) {
-  const innerClassName =
-    'flex h-full w-full items-center justify-center rounded-inherit relative bg-background-neutral-base dark:bg-background-components-base text-foreground-neutral-subtle';
-
-  const renderContent = (): ReactNode => {
-    if (content === 'image') {
-      const imageSrc = src || getPlaceholderImageUrl(fallback);
-      return (
-        <>
-          <AvatarImage
-            src={imageSrc}
-            alt={alt || 'Avatar image'}
-            className="object-scale-down rounded-inherit"
-          />
-          <AvatarFallback className={innerClassName}>
-            <div
-              className={cn(
-                'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
-                avatarInnerVariants({size}),
-              )}
-            >
-              <span className="font-medium">{getInitial(fallback)}</span>
-            </div>
-          </AvatarFallback>
-        </>
-      );
-    }
-
-    if (content === 'logo') {
-      return (
-        <AvatarFallback className={cn(innerClassName, logoClassName ?? 'p-[15%]')}>
-          <Icon name={logoName} className="h-full w-full" />
-        </AvatarFallback>
-      );
-    }
-
-    if (content === 'logoPlaceholder') {
-      return (
-        <AvatarFallback className={cn(innerClassName, logoClassName ?? 'p-[15%]')}>
-          <Icon
-            name={logoName}
-            color="var(--foreground-neutral-subtle, #a1a1aa)"
-            className="h-full w-full opacity-50"
-          />
-        </AvatarFallback>
-      );
-    }
-
-    if (content === 'letters') {
-      return (
-        <AvatarFallback className={innerClassName}>
-          <div
-            className={cn(
-              'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
-              avatarInnerVariants({size}),
-            )}
-          >
-            <span className="font-medium">{getInitial(fallback)}</span>
-          </div>
-        </AvatarFallback>
-      );
-    }
-
-    if (content === 'upload') {
-      const iconSizeClass = UPLOAD_ICON_SIZE_MAP[size as keyof typeof UPLOAD_ICON_SIZE_MAP];
-      return (
-        <AvatarFallback className={innerClassName}>
-          <Icon name="imageAdd" className={cn('text-foreground-neutral-subtle', iconSizeClass)} />
-        </AvatarFallback>
-      );
-    }
-
-    return null;
-  };
-
-  return (
-    <AvatarRoot
-      className={cn(
-        animateOnHover ? 'hover:-translate-y-8 transition-transform duration-300 ease-out' : '',
-        className,
-      )}
-      radius={radius}
-      size={size}
-      {...props}
-    >
-      {renderContent()}
-    </AvatarRoot>
-  );
-}
-
-export {AvatarRoot, AvatarImage, AvatarFallback};

package/src/components/avatar/index.ts

@@ -1,2 +0,0 @@
-export * from './avatar';
-export * from './avatar-group';