@shipfox/react-ui 0.2.0 → 0.4.0

package/src/components/avatar/avatar.tsx

@@ -0,0 +1,219 @@
+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-6',
+      },
+      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

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

package/src/components/badge/badge.stories.tsx

@@ -0,0 +1,468 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Code} from 'components/typography';
+import React from 'react';
+import {Badge, IconBadge, StatusBadge, UserBadge} from '.';
+
+const meta = {
+  title: 'Components/Badge',
+  component: Badge,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-32">
+      {/* STATUS BADGE */}
+      <div>
+        <Code variant="label" className="mb-16">
+          Status Badge
+        </Code>
+        <div className="flex gap-16">
+          <StatusBadge variant="neutral">Badge</StatusBadge>
+          <StatusBadge variant="info">Badge</StatusBadge>
+          <StatusBadge variant="feature">Badge</StatusBadge>
+          <StatusBadge variant="success" dotClassName="size-5 rounded-full">
+            Badge
+          </StatusBadge>
+          <StatusBadge variant="warning">Badge</StatusBadge>
+          <StatusBadge variant="error">Badge</StatusBadge>
+        </div>
+      </div>
+
+      {/* USER BADGE */}
+      <div>
+        <Code variant="label" className="mb-16">
+          User Badge
+        </Code>
+        <div className="flex gap-16">
+          <UserBadge
+            name="Thierry Abalea"
+            avatarSrc="https://avatars.githubusercontent.com/u/1290899?v=4"
+          />
+          <UserBadge
+            name="Kyle Nguyen"
+            avatarSrc="https://avatars.githubusercontent.com/u/89263955?v=4"
+          />
+          <UserBadge
+            name="Noe Charmet"
+            avatarSrc="https://avatars.githubusercontent.com/u/59678972?v=4"
+          />
+        </div>
+      </div>
+
+      {/* ICON BADGE */}
+      <div>
+        <Code variant="label" className="mb-16">
+          Icon Badge
+        </Code>
+        <div className="flex gap-16">
+          <IconBadge variant="neutral" name="homeSmile" />
+          <IconBadge variant="info" name="homeSmile" />
+          <IconBadge variant="feature" name="homeSmile" />
+          <IconBadge variant="success" name="homeSmile" />
+          <IconBadge variant="primary" name="homeSmile" />
+          <IconBadge variant="error" name="homeSmile" />
+        </div>
+      </div>
+
+      {/* BADGE - 2XS SIZE */}
+      <div>
+        <Code variant="label" className="mb-16">
+          Badge - 2XS Size
+        </Code>
+        <div className="flex flex-col gap-16">
+          {/* Base */}
+          <div className="flex gap-16">
+            <Badge variant="neutral" size="2xs">
+              Badge
+            </Badge>
+            <Badge variant="info" size="2xs">
+              Badge
+            </Badge>
+            <Badge variant="feature" size="2xs">
+              Badge
+            </Badge>
+            <Badge variant="success" size="2xs">
+              Badge
+            </Badge>
+            <Badge variant="warning" size="2xs">
+              Badge
+            </Badge>
+            <Badge variant="error" size="2xs">
+              Badge
+            </Badge>
+          </div>
+
+          {/* With Right Icon */}
+          <div className="flex gap-16">
+            <Badge variant="neutral" size="2xs" iconRight="close">
+              Badge
+            </Badge>
+            <Badge variant="info" size="2xs" iconRight="close">
+              Badge
+            </Badge>
+            <Badge variant="feature" size="2xs" iconRight="close">
+              Badge
+            </Badge>
+            <Badge variant="success" size="2xs" iconRight="close">
+              Badge
+            </Badge>
+            <Badge variant="warning" size="2xs" iconRight="close">
+              Badge
+            </Badge>
+            <Badge variant="error" size="2xs" iconRight="close">
+              Badge
+            </Badge>
+          </div>
+
+          {/* With Left Icon */}
+          <div className="flex gap-16">
+            <Badge variant="neutral" size="2xs" iconLeft="close">
+              Badge
+            </Badge>
+            <Badge variant="info" size="2xs" iconLeft="close">
+              Badge
+            </Badge>
+            <Badge variant="feature" size="2xs" iconLeft="close">
+              Badge
+            </Badge>
+            <Badge variant="success" size="2xs" iconLeft="close">
+              Badge
+            </Badge>
+            <Badge variant="warning" size="2xs" iconLeft="close">
+              Badge
+            </Badge>
+            <Badge variant="error" size="2xs" iconLeft="close">
+              Badge
+            </Badge>
+          </div>
+        </div>
+      </div>
+
+      {/* BADGE - XS SIZE */}
+      <div>
+        <Code variant="label" className="mb-16">
+          Badge - XS Size
+        </Code>
+        <div className="flex flex-col gap-16">
+          {/* Base */}
+          <div className="flex gap-16">
+            <Badge variant="neutral" size="xs">
+              Badge
+            </Badge>
+            <Badge variant="info" size="xs">
+              Badge
+            </Badge>
+            <Badge variant="feature" size="xs">
+              Badge
+            </Badge>
+            <Badge variant="success" size="xs">
+              Badge
+            </Badge>
+            <Badge variant="warning" size="xs">
+              Badge
+            </Badge>
+            <Badge variant="error" size="xs">
+              Badge
+            </Badge>
+          </div>
+
+          {/* With Right Icon */}
+          <div className="flex gap-16">
+            <Badge variant="neutral" size="xs" iconRight="close">
+              Badge
+            </Badge>
+            <Badge variant="info" size="xs" iconRight="close">
+              Badge
+            </Badge>
+            <Badge variant="feature" size="xs" iconRight="close">
+              Badge
+            </Badge>
+            <Badge variant="success" size="xs" iconRight="close">
+              Badge
+            </Badge>
+            <Badge variant="warning" size="xs" iconRight="close">
+              Badge
+            </Badge>
+            <Badge variant="error" size="xs" iconRight="close">
+              Badge
+            </Badge>
+          </div>
+
+          {/* With Left Icon */}
+          <div className="flex gap-16">
+            <Badge variant="neutral" size="xs" iconLeft="close">
+              Badge
+            </Badge>
+            <Badge variant="info" size="xs" iconLeft="close">
+              Badge
+            </Badge>
+            <Badge variant="feature" size="xs" iconLeft="close">
+              Badge
+            </Badge>
+            <Badge variant="success" size="xs" iconLeft="close">
+              Badge
+            </Badge>
+            <Badge variant="warning" size="xs" iconLeft="close">
+              Badge
+            </Badge>
+            <Badge variant="error" size="xs" iconLeft="close">
+              Badge
+            </Badge>
+          </div>
+        </div>
+      </div>
+
+      {/* BADGE - ROUNDED */}
+      <div>
+        <Code variant="label" className="mb-16">
+          Badge - Rounded
+        </Code>
+        <div className="flex flex-col gap-16">
+          {/* Base - 2XS */}
+          <div className="flex gap-16">
+            <Badge variant="neutral" size="2xs" radius="rounded">
+              Badge
+            </Badge>
+            <Badge variant="info" size="2xs" radius="rounded">
+              Badge
+            </Badge>
+            <Badge variant="feature" size="2xs" radius="rounded">
+              Badge
+            </Badge>
+            <Badge variant="success" size="2xs" radius="rounded">
+              Badge
+            </Badge>
+            <Badge variant="warning" size="2xs" radius="rounded">
+              Badge
+            </Badge>
+            <Badge variant="error" size="2xs" radius="rounded">
+              Badge
+            </Badge>
+          </div>
+
+          {/* Base - XS */}
+          <div className="flex gap-16">
+            <Badge variant="neutral" size="xs" radius="rounded">
+              Badge
+            </Badge>
+            <Badge variant="info" size="xs" radius="rounded">
+              Badge
+            </Badge>
+            <Badge variant="feature" size="xs" radius="rounded">
+              Badge
+            </Badge>
+            <Badge variant="success" size="xs" radius="rounded">
+              Badge
+            </Badge>
+            <Badge variant="warning" size="xs" radius="rounded">
+              Badge
+            </Badge>
+            <Badge variant="error" size="xs" radius="rounded">
+              Badge
+            </Badge>
+          </div>
+
+          {/* With Right Icon - 2XS */}
+          <div className="flex gap-16">
+            <Badge variant="neutral" size="2xs" radius="rounded" iconRight="close">
+              Badge
+            </Badge>
+            <Badge variant="info" size="2xs" radius="rounded" iconRight="close">
+              Badge
+            </Badge>
+            <Badge variant="feature" size="2xs" radius="rounded" iconRight="close">
+              Badge
+            </Badge>
+            <Badge variant="success" size="2xs" radius="rounded" iconRight="close">
+              Badge
+            </Badge>
+            <Badge variant="warning" size="2xs" radius="rounded" iconRight="close">
+              Badge
+            </Badge>
+            <Badge variant="error" size="2xs" radius="rounded" iconRight="close">
+              Badge
+            </Badge>
+          </div>
+
+          {/* With Right Icon - XS */}
+          <div className="flex gap-16">
+            <Badge variant="neutral" size="xs" radius="rounded" iconRight="close">
+              Badge
+            </Badge>
+            <Badge variant="info" size="xs" radius="rounded" iconRight="close">
+              Badge
+            </Badge>
+            <Badge variant="feature" size="xs" radius="rounded" iconRight="close">
+              Badge
+            </Badge>
+            <Badge variant="success" size="xs" radius="rounded" iconRight="close">
+              Badge
+            </Badge>
+            <Badge variant="warning" size="xs" radius="rounded" iconRight="close">
+              Badge
+            </Badge>
+            <Badge variant="error" size="xs" radius="rounded" iconRight="close">
+              Badge
+            </Badge>
+          </div>
+
+          {/* With Left Icon - 2XS */}
+          <div className="flex gap-16">
+            <Badge variant="neutral" size="2xs" radius="rounded" iconLeft="close">
+              Badge
+            </Badge>
+            <Badge variant="info" size="2xs" radius="rounded" iconLeft="close">
+              Badge
+            </Badge>
+            <Badge variant="feature" size="2xs" radius="rounded" iconLeft="close">
+              Badge
+            </Badge>
+            <Badge variant="success" size="2xs" radius="rounded" iconLeft="close">
+              Badge
+            </Badge>
+            <Badge variant="warning" size="2xs" radius="rounded" iconLeft="close">
+              Badge
+            </Badge>
+            <Badge variant="error" size="2xs" radius="rounded" iconLeft="close">
+              Badge
+            </Badge>
+          </div>
+
+          {/* With Left Icon - XS */}
+          <div className="flex gap-16">
+            <Badge variant="neutral" size="xs" radius="rounded" iconLeft="close">
+              Badge
+            </Badge>
+            <Badge variant="info" size="xs" radius="rounded" iconLeft="close">
+              Badge
+            </Badge>
+            <Badge variant="feature" size="xs" radius="rounded" iconLeft="close">
+              Badge
+            </Badge>
+            <Badge variant="success" size="xs" radius="rounded" iconLeft="close">
+              Badge
+            </Badge>
+            <Badge variant="warning" size="xs" radius="rounded" iconLeft="close">
+              Badge
+            </Badge>
+            <Badge variant="error" size="xs" radius="rounded" iconLeft="close">
+              Badge
+            </Badge>
+          </div>
+        </div>
+      </div>
+
+      {/* BETA BADGE */}
+      <div>
+        <Code variant="label" className="mb-16">
+          Beta Badge
+        </Code>
+        <div className="flex gap-16">
+          <Badge variant="info" size="2xs" radius="rounded">
+            Beta
+          </Badge>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// Interactive badges with click handlers
+function InteractiveBadgesComponent() {
+  const [tags, setTags] = React.useState(['React', 'TypeScript', 'Next.js', 'Tailwind']);
+
+  const removeTag = (tagToRemove: string) => {
+    setTags(tags.filter((tag) => tag !== tagToRemove));
+  };
+
+  return (
+    <div className="flex flex-col gap-32">
+      {/* Removable tags */}
+      <div>
+        <Code variant="label" className="mb-16">
+          Interactive Badges - Removable Tags
+        </Code>
+        <div className="flex flex-wrap gap-8">
+          {tags.map((tag) => (
+            <Badge
+              key={tag}
+              variant="neutral"
+              size="xs"
+              radius="rounded"
+              iconRight="close"
+              onIconRightClick={() => removeTag(tag)}
+              iconRightAriaLabel={`Remove ${tag} tag`}
+            >
+              {tag}
+            </Badge>
+          ))}
+        </div>
+      </div>
+
+      {/* Different variants with interactive icons */}
+      <div>
+        <Code variant="label" className="mb-16">
+          Interactive Badges - Different Variants
+        </Code>
+        <div className="flex flex-wrap gap-8">
+          <Badge
+            variant="success"
+            size="xs"
+            iconRight="close"
+            onIconRightClick={() => alert('Success badge clicked!')}
+            iconRightAriaLabel="Remove success badge"
+          >
+            Completed
+          </Badge>
+          <Badge
+            variant="warning"
+            size="xs"
+            iconRight="close"
+            onIconRightClick={() => alert('Warning badge clicked!')}
+            iconRightAriaLabel="Remove warning badge"
+          >
+            Pending
+          </Badge>
+          <Badge
+            variant="error"
+            size="xs"
+            iconRight="close"
+            onIconRightClick={() => alert('Error badge clicked!')}
+            iconRightAriaLabel="Remove error badge"
+          >
+            Failed
+          </Badge>
+        </div>
+      </div>
+
+      {/* Non-interactive icons (static) */}
+      <div>
+        <Code variant="label" className="mb-16">
+          Static Icons (Non-interactive)
+        </Code>
+        <div className="flex flex-wrap gap-8">
+          <Badge variant="info" size="xs" iconLeft="info">
+            Information
+          </Badge>
+          <Badge variant="success" size="xs" iconLeft="check">
+            Verified
+          </Badge>
+          <Badge variant="feature" size="xs" iconLeft="money">
+            Premium
+          </Badge>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const InteractiveBadges: Story = {
+  render: () => <InteractiveBadgesComponent />,
+};