@shipfox/react-ui 0.3.0 → 0.5.0

package/src/components/alert/alert.stories.tsx

@@ -17,7 +17,7 @@ const meta = {
   argTypes: {
     variant: {
       control: 'select',
-      options: ['default', 'info', 'success', 'warning', 'destructive'],
+      options: ['default', 'info', 'success', 'warning', 'error'],
     },
   },
   args: {
@@ -29,7 +29,7 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-const variants = ['default', 'info', 'success', 'warning', 'destructive'] as const;
+const variants = ['default', 'info', 'success', 'warning', 'error'] as const;
 
 export const Default: Story = {
   render: (args) => {

package/src/components/alert/alert.tsx

@@ -12,7 +12,7 @@ const alertVariants = cva(
         info: 'bg-tag-blue-bg text-foreground-neutral-base border-tag-blue-border',
         success: 'bg-tag-success-bg text-foreground-neutral-base border-tag-success-border',
         warning: 'bg-tag-warning-bg text-foreground-neutral-base border-tag-warning-border',
-        destructive: 'bg-tag-error-bg text-foreground-neutral-base border-tag-error-border',
+        error: 'bg-tag-error-bg text-foreground-neutral-base border-tag-error-border',
       },
     },
     defaultVariants: {
@@ -28,7 +28,7 @@ const alertLineVariants = cva('w-4 self-stretch rounded-full', {
       info: 'bg-tag-blue-icon',
       success: 'bg-tag-success-icon',
       warning: 'bg-tag-warning-icon',
-      destructive: 'bg-tag-error-icon',
+      error: 'bg-tag-error-icon',
     },
   },
   defaultVariants: {
@@ -43,7 +43,7 @@ const closeIconVariants = cva('w-16 h-16', {
       info: 'text-tag-blue-icon',
       success: 'text-tag-success-icon',
       warning: 'text-tag-warning-icon',
-      destructive: 'text-tag-error-icon',
+      error: 'text-tag-error-icon',
     },
   },
   defaultVariants: {

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

@@ -17,8 +17,8 @@ const avatarGroupVariants = cva('flex items-start', {
       '3xs': '-space-x-4',
       '2xs': '-space-x-4',
       xs: '-space-x-4',
-      sm: '-space-x-4',
-      md: '-space-x-4',
+      sm: '-space-x-6',
+      md: '-space-x-6',
       lg: '-space-x-6',
       xl: '-space-x-6',
       '2xl': '-space-x-12',
@@ -76,7 +76,7 @@ function AvatarContainer({
           data-slot="avatar-container"
           className={cn(
             'relative',
-            animateOnHover && 'transition-transform duration-300 ease-out hover:-translate-y-2',
+            animateOnHover && 'transition-transform duration-300 ease-in-out hover:-translate-y-4',
           )}
           style={{zIndex}}
         >

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

@@ -6,6 +6,7 @@ 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',
@@ -33,12 +34,18 @@ const meta = {
     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>;
 
@@ -47,8 +54,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    content: 'upload',
-    fallback: 'Kyle Nguyen',
+    content: 'logo',
+    fallback: 'Shipfox',
   },
 
   render: (args) => (

package/src/components/avatar/avatar.tsx

@@ -3,7 +3,7 @@ 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} from '../icon/icon';
+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',
@@ -110,6 +110,8 @@ export type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root> &
     alt?: string;
     fallback?: string;
     animateOnHover?: boolean;
+    logoName?: IconName;
+    logoClassName?: string;
   };
 
 export function Avatar({
@@ -121,6 +123,8 @@ export function Avatar({
   alt,
   fallback,
   animateOnHover = false,
+  logoName = 'shipfox',
+  logoClassName,
   ...props
 }: AvatarProps) {
   const innerClassName =
@@ -152,19 +156,19 @@ export function Avatar({
 
     if (content === 'logo') {
       return (
-        <AvatarFallback className={cn(innerClassName, 'p-[15%]')}>
-          <Icon name="shipfoxLogo" color="#FF4B00" className="h-full w-full p-2" />
+        <AvatarFallback className={cn(innerClassName, logoClassName ?? 'p-[15%]')}>
+          <Icon name={logoName} className="h-full w-full" />
         </AvatarFallback>
       );
     }
 
     if (content === 'logoPlaceholder') {
       return (
-        <AvatarFallback className={cn(innerClassName, 'p-[15%]')}>
+        <AvatarFallback className={cn(innerClassName, logoClassName ?? 'p-[15%]')}>
           <Icon
-            name="shipfoxLogo"
+            name={logoName}
             color="var(--foreground-neutral-subtle, #a1a1aa)"
-            className="h-full w-full p-2 opacity-50"
+            className="h-full w-full opacity-50"
           />
         </AvatarFallback>
       );

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