@shipfox/react-ui 0.2.0 → 0.4.0

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

@@ -0,0 +1,77 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Header} from 'components/typography';
+import {
+  Alert,
+  AlertAction,
+  AlertActions,
+  AlertClose,
+  AlertContent,
+  AlertDescription,
+  AlertTitle,
+} from './alert';
+
+const meta = {
+  title: 'Components/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'info', 'success', 'warning', 'error'],
+    },
+  },
+  args: {
+    variant: 'default',
+  },
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const variants = ['default', 'info', 'success', 'warning', 'error'] as const;
+
+export const Default: Story = {
+  render: (args) => {
+    return (
+      <Alert {...args}>
+        <AlertContent>
+          <AlertTitle>Title</AlertTitle>
+          <AlertDescription>Description</AlertDescription>
+          <AlertActions>
+            <AlertAction>Download</AlertAction>
+            <AlertAction>View</AlertAction>
+          </AlertActions>
+        </AlertContent>
+        <AlertClose variant={args.variant} />
+      </Alert>
+    );
+  },
+};
+
+export const DesignMock: Story = {
+  render: () => {
+    return (
+      <div className="flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base">
+        <Header variant="h3" className="text-foreground-neutral-subtle">
+          ALERTS
+        </Header>
+        <div className="flex flex-col gap-16">
+          {variants.map((variant) => (
+            <Alert key={variant} variant={variant}>
+              <AlertContent>
+                <AlertTitle>Title</AlertTitle>
+                <AlertDescription>Description</AlertDescription>
+                <AlertActions>
+                  <AlertAction>Download</AlertAction>
+                  <AlertAction>View</AlertAction>
+                </AlertActions>
+              </AlertContent>
+              <AlertClose variant={variant} />
+            </Alert>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/alert/alert.tsx

@@ -0,0 +1,144 @@
+import {cva, type VariantProps} from 'class-variance-authority';
+import {Icon} from 'components/icon';
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+
+const alertVariants = cva(
+  'relative w-full rounded-l-4 rounded-r-8 px-16 py-12 text-sm flex gap-12 items-start border',
+  {
+    variants: {
+      variant: {
+        default: 'bg-tag-neutral-bg text-foreground-neutral-base border-tag-neutral-border',
+        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',
+        error: 'bg-tag-error-bg text-foreground-neutral-base border-tag-error-border',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+const alertLineVariants = cva('w-4 self-stretch rounded-full', {
+  variants: {
+    variant: {
+      default: 'bg-tag-neutral-icon',
+      info: 'bg-tag-blue-icon',
+      success: 'bg-tag-success-icon',
+      warning: 'bg-tag-warning-icon',
+      error: 'bg-tag-error-icon',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+const closeIconVariants = cva('w-16 h-16', {
+  variants: {
+    variant: {
+      default: 'text-tag-neutral-icon',
+      info: 'text-tag-blue-icon',
+      success: 'text-tag-success-icon',
+      warning: 'text-tag-warning-icon',
+      error: 'text-tag-error-icon',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+type AlertProps = ComponentProps<'div'> & VariantProps<typeof alertVariants>;
+
+function Alert({className, variant, children, ...props}: AlertProps) {
+  return (
+    <div className="w-full flex items-start gap-4">
+      <div data-slot="alert-line" className={cn(alertLineVariants({variant}))} aria-hidden="true" />
+      <div
+        data-slot="alert"
+        role="alert"
+        className={cn(alertVariants({variant}), className)}
+        {...props}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function AlertContent({className, ...props}: ComponentProps<'div'>) {
+  return <div data-slot="alert-content" className={cn('flex-1 min-w-0', className)} {...props} />;
+}
+
+function AlertTitle({className, ...props}: ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn('font-medium text-sm leading-20 text-foreground-neutral-base mb-4', className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({className, ...props}: ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        'text-xs leading-20 text-foreground-neutral-base [&_p]:leading-relaxed',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertActions({className, ...props}: ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-actions"
+      className={cn('flex items-center gap-8 mt-8', className)}
+      {...props}
+    />
+  );
+}
+
+function AlertAction({className, ...props}: ComponentProps<'button'>) {
+  return (
+    <button
+      data-slot="alert-action"
+      type="button"
+      className={cn(
+        'bg-transparent border-none p-0 cursor-pointer text-xs font-medium leading-20 text-foreground-neutral-base hover:text-foreground-neutral-subtle transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertClose({
+  className,
+  variant = 'default',
+  ...props
+}: ComponentProps<'button'> & VariantProps<typeof closeIconVariants>) {
+  return (
+    <button
+      data-slot="alert-close"
+      type="button"
+      className={cn(
+        'absolute cursor-pointer top-12 right-12 rounded-4 p-4 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',
+        className,
+      )}
+      aria-label="Close"
+      {...props}
+    >
+      <Icon name="close" className={cn(closeIconVariants({variant}))} />
+    </button>
+  );
+}
+
+export {Alert, AlertContent, AlertTitle, AlertDescription, AlertActions, AlertAction, AlertClose};

package/src/components/alert/index.ts

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

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

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

@@ -0,0 +1,179 @@
+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>
+    );
+  },
+};