@shipfox/react-ui 0.3.0 → 0.5.0

package/src/components/badge/badge.tsx

@@ -0,0 +1,147 @@
+import {Slot} from '@radix-ui/react-slot';
+import {cva, type VariantProps} from 'class-variance-authority';
+import {Icon, type IconName} from 'components/icon';
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+
+export const badgeVariants = cva(
+  'inline-flex select-none items-center justify-center font-medium transition-colors shrink-0 leading-20',
+  {
+    variants: {
+      variant: {
+        neutral:
+          'bg-tag-neutral-bg text-tag-neutral-text border border-tag-neutral-border hover:bg-tag-neutral-bg-hover',
+        info: 'bg-tag-blue-bg text-tag-blue-text border border-tag-blue-border hover:bg-tag-blue-bg-hover',
+        feature:
+          'bg-tag-purple-bg text-tag-purple-text border border-tag-purple-border hover:bg-tag-purple-bg-hover',
+        success:
+          'bg-tag-success-bg text-tag-success-text border border-tag-success-border hover:bg-tag-success-bg-hover',
+        warning:
+          'bg-tag-warning-bg text-tag-warning-text border border-tag-warning-border hover:bg-tag-warning-bg-hover',
+        error:
+          'bg-tag-error-bg text-tag-error-text border border-tag-error-border hover:bg-tag-error-bg-hover',
+      },
+      size: {
+        '2xs': 'h-20 px-6 text-xs gap-4',
+        xs: 'h-24 px-8 text-xs gap-6',
+      },
+      radius: {
+        default: 'rounded-6',
+        rounded: 'rounded-full',
+      },
+    },
+    defaultVariants: {
+      variant: 'neutral',
+      size: '2xs',
+      radius: 'default',
+    },
+  },
+);
+
+export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+
+type BaseBadgeProps = ComponentProps<'span'> &
+  VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+  };
+
+type BadgePropsWithLeftClick = BaseBadgeProps & {
+  iconLeft: IconName;
+  onIconLeftClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  iconLeftAriaLabel: string;
+  iconRight?: IconName;
+  onIconRightClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  iconRightAriaLabel?: string;
+};
+
+type BadgePropsWithRightClick = BaseBadgeProps & {
+  iconRight: IconName;
+  onIconRightClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  iconRightAriaLabel: string;
+  iconLeft?: IconName;
+  onIconLeftClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  iconLeftAriaLabel?: string;
+};
+
+type BadgePropsWithBothClicks = BaseBadgeProps & {
+  iconLeft: IconName;
+  onIconLeftClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  iconLeftAriaLabel: string;
+  iconRight: IconName;
+  onIconRightClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  iconRightAriaLabel: string;
+};
+
+type BadgePropsWithoutClicks = BaseBadgeProps & {
+  iconLeft?: IconName;
+  iconRight?: IconName;
+  onIconLeftClick?: never;
+  onIconRightClick?: never;
+  iconLeftAriaLabel?: never;
+  iconRightAriaLabel?: never;
+};
+
+export type BadgeProps =
+  | BadgePropsWithLeftClick
+  | BadgePropsWithRightClick
+  | BadgePropsWithBothClicks
+  | BadgePropsWithoutClicks;
+
+export function Badge({
+  className,
+  variant,
+  size,
+  radius,
+  asChild = false,
+  children,
+  iconLeft,
+  iconRight,
+  onIconLeftClick,
+  onIconRightClick,
+  iconLeftAriaLabel,
+  iconRightAriaLabel,
+  ...props
+}: BadgeProps) {
+  const Comp = asChild ? Slot : 'span';
+
+  const renderIcon = (
+    iconName: IconName,
+    position: 'left' | 'right',
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void,
+    ariaLabel?: string,
+  ) => {
+    const isInteractive = Boolean(onClick);
+
+    if (isInteractive) {
+      if (!ariaLabel) {
+        // biome-ignore lint/suspicious/noConsole: Development warning for accessibility
+        console.warn(
+          `Badge: Missing aria-label for interactive ${position} icon. Please provide icon${position === 'left' ? 'Left' : 'Right'}AriaLabel prop.`,
+        );
+
+        return null;
+      }
+
+      return (
+        <button
+          type="button"
+          onClick={onClick}
+          className="inline-flex items-center justify-center transition-colors shrink-0 hover:opacity-70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-blue-500"
+          aria-label={ariaLabel}
+        >
+          <Icon name={iconName} className="size-12" />
+        </button>
+      );
+    }
+
+    return <Icon name={iconName} className="size-12" />;
+  };
+
+  return (
+    <Comp className={cn(badgeVariants({variant, size, radius}), className)} {...props}>
+      {iconLeft && renderIcon(iconLeft, 'left', onIconLeftClick, iconLeftAriaLabel)}
+      {children}
+      {iconRight && renderIcon(iconRight, 'right', onIconRightClick, iconRightAriaLabel)}
+    </Comp>
+  );
+}

package/src/components/badge/icon-badge.tsx

@@ -0,0 +1,43 @@
+import {Icon, type IconName} from 'components/icon';
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+
+export type IconBadgeVariant = 'neutral' | 'info' | 'feature' | 'success' | 'primary' | 'error';
+
+export type IconBadgeProps = ComponentProps<'span'> & {
+  variant?: IconBadgeVariant;
+  name?: IconName;
+};
+
+const variantStyles: Record<IconBadgeVariant, string> = {
+  neutral: 'bg-tag-neutral-bg border-tag-neutral-border',
+  info: 'bg-tag-blue-bg border-tag-blue-border',
+  feature: 'bg-tag-purple-bg border-tag-purple-border',
+  success: 'bg-tag-success-bg border-tag-success-border',
+  primary: 'bg-tag-warning-bg border-tag-warning-border',
+  error: 'bg-tag-error-bg border-tag-error-border',
+};
+
+const iconColorStyles: Record<IconBadgeVariant, string> = {
+  neutral: 'text-tag-neutral-icon',
+  info: 'text-tag-blue-icon',
+  feature: 'text-tag-purple-icon',
+  success: 'text-tag-success-icon',
+  primary: 'text-tag-warning-icon',
+  error: 'text-tag-error-icon',
+};
+
+export function IconBadge({className, variant = 'neutral', name, ...props}: IconBadgeProps) {
+  return (
+    <span
+      className={cn(
+        'inline-flex size-20 items-center justify-center rounded-6 border',
+        variantStyles[variant],
+        className,
+      )}
+      {...props}
+    >
+      {name && <Icon name={name} className={cn('shrink-0', iconColorStyles[variant])} size={12} />}
+    </span>
+  );
+}

package/src/components/badge/index.ts

@@ -0,0 +1,4 @@
+export {Badge, type BadgeProps, type BadgeVariant, badgeVariants} from './badge';
+export {IconBadge, type IconBadgeProps, type IconBadgeVariant} from './icon-badge';
+export {StatusBadge, type StatusBadgeProps} from './status-badge';
+export {UserBadge, type UserBadgeProps} from './user-badge';

package/src/components/badge/status-badge.tsx

@@ -0,0 +1,43 @@
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+import {badgeVariants} from './badge';
+
+export type StatusBadgeProps = ComponentProps<'span'> & {
+  variant?: StatusVariant;
+  dotClassName?: string;
+};
+
+type StatusVariant = 'neutral' | 'info' | 'feature' | 'success' | 'warning' | 'error';
+
+const dotVariantStyles: Record<StatusVariant, string> = {
+  neutral: 'bg-tag-neutral-icon',
+  info: 'bg-tag-blue-icon',
+  feature: 'bg-tag-purple-icon',
+  success: 'bg-tag-success-icon',
+  warning: 'bg-tag-warning-icon',
+  error: 'bg-tag-error-icon',
+};
+
+export function StatusBadge({
+  className,
+  variant = 'neutral',
+  children,
+  dotClassName,
+  ...props
+}: StatusBadgeProps) {
+  return (
+    <span
+      className={cn(badgeVariants({variant, size: '2xs', radius: 'default'}), 'gap-6', className)}
+      {...props}
+    >
+      <span
+        className={cn(
+          'size-8.5 rounded-2 shrink-0',
+          dotVariantStyles[variant as StatusVariant],
+          dotClassName,
+        )}
+      />
+      {children}
+    </span>
+  );
+}

package/src/components/badge/user-badge.tsx

@@ -0,0 +1,34 @@
+import {Avatar} from 'components/avatar';
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+
+export type UserBadgeProps = ComponentProps<'button'> & {
+  name: string;
+  avatarSrc?: string;
+  avatarFallback?: string;
+};
+
+export function UserBadge({className, name, avatarSrc, avatarFallback, ...props}: UserBadgeProps) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        'inline-flex items-center gap-6 rounded-full px-6 py-2 text-xs font-medium leading-20',
+        'bg-background-components-base hover:bg-background-components-hover active:bg-background-components-pressed',
+        'text-foreground-neutral-base transition-colors',
+        'border border-border-neutral-base-component',
+        'h-28',
+        className,
+      )}
+      {...props}
+    >
+      <Avatar
+        className="size-16 shrink-0"
+        content="image"
+        src={avatarSrc}
+        fallback={avatarFallback}
+      />
+      <span className="whitespace-nowrap">{name}</span>
+    </button>
+  );
+}

package/src/components/button/button-link.stories.tsx

@@ -0,0 +1,86 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {ButtonLink} from './button-link';
+
+const meta = {
+  title: 'Components/Button/ButtonLink',
+  component: ButtonLink,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['base', 'interactive', 'muted', 'subtle'],
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'xl'],
+    },
+    underline: {control: 'boolean'},
+    asChild: {control: 'boolean'},
+  },
+  args: {
+    children: 'Label',
+    variant: 'base',
+    size: 'sm',
+    underline: false,
+    href: '#',
+  },
+} satisfies Meta<typeof ButtonLink>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: (args) => (
+    <div className="flex gap-16 items-center">
+      <ButtonLink {...args} variant="base">
+        Base
+      </ButtonLink>
+      <ButtonLink {...args} variant="interactive">
+        Interactive
+      </ButtonLink>
+      <ButtonLink {...args} variant="muted">
+        Muted
+      </ButtonLink>
+      <ButtonLink {...args} variant="subtle">
+        Subtle
+      </ButtonLink>
+    </div>
+  ),
+};
+
+export const WithUnderline: Story = {
+  render: (args) => (
+    <div className="flex gap-16 items-center">
+      <ButtonLink {...args} variant="base" underline>
+        Base
+      </ButtonLink>
+      <ButtonLink {...args} variant="interactive" underline>
+        Interactive
+      </ButtonLink>
+      <ButtonLink {...args} variant="muted" underline>
+        Muted
+      </ButtonLink>
+      <ButtonLink {...args} variant="subtle" underline>
+        Subtle
+      </ButtonLink>
+    </div>
+  ),
+};
+
+export const WithIcons: Story = {
+  render: (args) => (
+    <div className="flex gap-16 items-center">
+      <ButtonLink {...args} iconLeft="addLine">
+        Icon Left
+      </ButtonLink>
+      <ButtonLink {...args} iconRight="chevronRight">
+        Icon Right
+      </ButtonLink>
+      <ButtonLink {...args} iconLeft="addLine" iconRight="chevronRight">
+        Both Icons
+      </ButtonLink>
+    </div>
+  ),
+};

package/src/components/button/button-link.tsx

@@ -0,0 +1,76 @@
+import {Slot} from '@radix-ui/react-slot';
+import {cva, type VariantProps} from 'class-variance-authority';
+import {Icon, type IconName} from 'components/icon';
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+
+export const buttonLinkVariants = cva(
+  'inline-flex items-center justify-center gap-4 whitespace-nowrap transition-colors disabled:pointer-events-none outline-none font-medium',
+  {
+    variants: {
+      variant: {
+        base: 'text-foreground-neutral-base hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',
+        interactive:
+          'text-foreground-highlight-interactive hover:text-foreground-highlight-interactive-hover focus-visible:text-foreground-highlight-interactive disabled:text-foreground-neutral-disabled',
+        muted:
+          'text-foreground-neutral-muted hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',
+        subtle:
+          'text-foreground-neutral-subtle hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',
+      },
+      size: {
+        xs: 'text-xs',
+        sm: 'text-sm',
+        md: 'text-md',
+        xl: 'text-xl',
+      },
+      underline: {
+        true: 'underline decoration-solid [text-underline-position:from-font]',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'base',
+      size: 'sm',
+      underline: false,
+    },
+  },
+);
+
+const iconSizeMap = {
+  xs: 14,
+  sm: 14,
+  md: 16,
+  xl: 20,
+} as const;
+
+export function ButtonLink({
+  className,
+  variant,
+  size = 'sm',
+  underline,
+  asChild = false,
+  children,
+  iconLeft,
+  iconRight,
+  ...props
+}: ComponentProps<'a'> &
+  VariantProps<typeof buttonLinkVariants> & {
+    asChild?: boolean;
+    iconLeft?: IconName;
+    iconRight?: IconName;
+  }) {
+  const Comp = asChild ? Slot : 'a';
+  const iconSize = iconSizeMap[size as keyof typeof iconSizeMap];
+
+  return (
+    <Comp
+      data-slot="button-link"
+      className={cn(buttonLinkVariants({variant, size, underline, className}))}
+      {...props}
+    >
+      {iconLeft && <Icon name={iconLeft} size={iconSize} />}
+      {children}
+      {iconRight && <Icon name={iconRight} size={iconSize} />}
+    </Comp>
+  );
+}

package/src/components/{button.stories.tsx → button/button.stories.tsx}

@@ -6,6 +6,7 @@ const variantOptions = [
   'primary',
   'secondary',
   'danger',
+  'success',
   'transparent',
   'transparentMuted',
 ] as const;
@@ -48,7 +49,6 @@ export const Variants: Story = {
               <th>{size}</th>
               <th>Default</th>
               <th>Hover</th>
-              <th>Active</th>
               <th>Focus</th>
               <th>Disabled</th>
             </tr>
@@ -71,11 +71,6 @@ export const Variants: Story = {
                     Click me
                   </Button>
                 </td>
-                <td>
-                  <Button {...args} variant={variant} className="active" size={size}>
-                    Click me
-                  </Button>
-                </td>
                 <td>
                   <Button {...args} variant={variant} className="focus" size={size}>
                     Click me
@@ -98,7 +93,6 @@ export const Variants: Story = {
 Variants.parameters = {
   pseudo: {
     hover: '.hover',
-    active: '.active',
     focusVisible: '.focus',
   },
 };

package/src/components/{button.tsx → button/button.tsx}

@@ -1,8 +1,8 @@
 import {Slot} from '@radix-ui/react-slot';
 import {cva, type VariantProps} from 'class-variance-authority';
+import {Icon, type IconName} from 'components/icon';
 import type {ComponentProps} from 'react';
 import {cn} from 'utils/cn';
-import {Icon, type IconName} from './icon/icon';
 
 export const buttonVariants = cva(
   'rounded-6 inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none',
@@ -15,18 +15,20 @@ export const buttonVariants = cva(
           'bg-background-button-neutral-default text-foreground-neutral-base shadow-button-neutral hover:bg-background-button-neutral-hover active:bg-background-button-neutral-pressed disabled:bg-background-neutral-disabled focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled disabled:shadow-none',
         danger:
           'bg-background-button-danger-default text-foreground-neutral-on-color shadow-button-danger hover:bg-background-button-danger-hover active:bg-background-button-danger-pressed focus-visible:shadow-button-danger-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',
+        success:
+          'bg-background-button-success-default text-foreground-neutral-on-color shadow-button-success hover:bg-background-button-success-hover active:bg-background-button-success-pressed focus-visible:shadow-button-success-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',
         transparent:
           'bg-background-button-transparent-default text-foreground-neutral-base hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',
         transparentMuted:
           'bg-background-button-transparent-default text-foreground-neutral-muted hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',
       },
       size: {
-        '2xs': 'px-6 text-xs gap-4',
-        xs: 'px-6 py-2 text-xs gap-4',
-        sm: 'px-8 py-4 text-sm gap-6',
-        md: 'px-10 py-6 text-md gap-8',
-        lg: 'px-12 py-8 text-lg gap-8',
-        xl: 'px-12 py-10 text-xl gap-10',
+        '2xs': 'h-20 px-6 text-xs gap-4',
+        xs: 'h-24 px-6 text-xs gap-4',
+        sm: 'h-28 px-8 text-sm gap-6',
+        md: 'h-32 px-10 text-md gap-8',
+        lg: 'h-36 px-12 text-lg gap-8',
+        xl: 'h-40 px-12 text-xl gap-10',
       },
     },
     defaultVariants: {

package/src/components/button/icon-button.stories.tsx

@@ -0,0 +1,182 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Code} from 'components/typography';
+import {IconButton} from './icon-button';
+
+const variantOptions = ['primary', 'transparent'] as const;
+const sizeOptions = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;
+const radiusOptions = ['rounded', 'full'] as const;
+
+const meta = {
+  title: 'Components/Button/IconButton',
+  component: IconButton,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: variantOptions,
+    },
+    size: {
+      control: 'select',
+      options: sizeOptions,
+    },
+    radius: {
+      control: 'select',
+      options: radiusOptions,
+    },
+    muted: {control: 'boolean'},
+    asChild: {control: 'boolean'},
+  },
+  args: {
+    icon: 'addLine',
+    variant: 'primary',
+    size: 'md',
+    radius: 'rounded',
+    muted: false,
+  },
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-32">
+      {sizeOptions.map((size) => (
+        <div key={size} className="flex flex-col gap-16">
+          <Code variant="label" className="text-foreground-neutral-subtle">
+            Size: {size}
+          </Code>
+          {radiusOptions.map((radius) => (
+            <table
+              key={radius}
+              className="w-fit border-separate border-spacing-x-32 border-spacing-y-16"
+            >
+              <thead>
+                <tr>
+                  <th>{radius}</th>
+                  <th>Default</th>
+                  <th>Hover</th>
+                  <th>Focus</th>
+                  <th>Disabled</th>
+                </tr>
+              </thead>
+              <tbody>
+                {variantOptions.map((variant) => (
+                  <tr key={variant}>
+                    <td>
+                      <Code variant="label" className="text-foreground-neutral-subtle">
+                        {variant}
+                      </Code>
+                    </td>
+                    <td>
+                      <IconButton
+                        {...args}
+                        icon="addLine"
+                        aria-label="Add"
+                        variant={variant}
+                        size={size}
+                        radius={radius}
+                      />
+                    </td>
+                    <td>
+                      <IconButton
+                        {...args}
+                        icon="addLine"
+                        aria-label="Add"
+                        variant={variant}
+                        className="hover"
+                        size={size}
+                        radius={radius}
+                      />
+                    </td>
+                    <td>
+                      <IconButton
+                        {...args}
+                        icon="addLine"
+                        aria-label="Add"
+                        variant={variant}
+                        className="focus"
+                        size={size}
+                        radius={radius}
+                      />
+                    </td>
+                    <td>
+                      <IconButton
+                        {...args}
+                        icon="addLine"
+                        aria-label="Add"
+                        variant={variant}
+                        disabled
+                        size={size}
+                        radius={radius}
+                      />
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          ))}
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+Variants.parameters = {
+  pseudo: {
+    hover: '.hover',
+    focusVisible: '.focus',
+  },
+};
+
+export const Muted: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-16">
+      <div className="flex gap-16 items-center">
+        <Code variant="label">Normal:</Code>
+        <IconButton {...args} icon="addLine" aria-label="Add" />
+        <IconButton {...args} icon="addLine" aria-label="Add" variant="transparent" />
+      </div>
+      <div className="flex gap-16 items-center">
+        <Code variant="label">Muted:</Code>
+        <IconButton {...args} icon="addLine" aria-label="Add" muted />
+        <IconButton {...args} icon="addLine" aria-label="Add" variant="transparent" muted />
+      </div>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: ({children: _children, ...args}) => (
+    <div className="flex flex-col gap-16">
+      <div className="flex gap-16 items-center">
+        <Code variant="label">Rounded:</Code>
+        {sizeOptions.map((size) => (
+          <IconButton
+            {...args}
+            key={size}
+            icon="addLine"
+            aria-label="Add"
+            size={size}
+            radius="rounded"
+          />
+        ))}
+      </div>
+      <div className="flex gap-16 items-center">
+        <Code variant="label">Full:</Code>
+        {sizeOptions.map((size) => (
+          <IconButton
+            {...args}
+            key={size}
+            icon="addLine"
+            aria-label="Add"
+            size={size}
+            radius="full"
+          />
+        ))}
+      </div>
+    </div>
+  ),
+};