@shipfox/react-ui 0.2.0 → 0.4.0

package/src/components/toast/toast.tsx

@@ -0,0 +1,41 @@
+import {useTheme} from 'hooks/useTheme';
+import {AlertTriangle, CheckCircle2, Info, Loader2, XCircle} from 'lucide-react';
+import {
+  Toaster as SonnerToaster,
+  type ToasterProps as SonnerToasterProps,
+  toast as sonnerToast,
+} from 'sonner';
+
+type ToasterProps = Omit<SonnerToasterProps, 'theme'>;
+
+function Toaster({...props}: ToasterProps) {
+  const {theme} = useTheme();
+
+  return (
+    <SonnerToaster
+      theme={theme as SonnerToasterProps['theme']}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            'group toast group-[.toaster]:bg-background-components-base group-[.toaster]:text-foreground-neutral-base group-[.toaster]:border group-[.toaster]:border-border-neutral-base group-[.toaster]:shadow-tooltip rounded-8 p-8',
+          description: 'group-[.toast]:text-foreground-neutral-muted text-xs leading-20 mt-4',
+          actionButton:
+            'group-[.toast]:bg-background-button-neutral-default group-[.toast]:text-foreground-neutral-base group-[.toast]:hover:bg-background-button-neutral-hover rounded-6 px-8 py-4 text-xs font-medium',
+          cancelButton:
+            'group-[.toast]:bg-background-button-transparent-default group-[.toast]:text-foreground-neutral-base group-[.toast]:hover:bg-background-button-transparent-hover rounded-6 px-8 py-4 text-xs font-medium',
+        },
+      }}
+      icons={{
+        success: <CheckCircle2 className="size-20 text-tag-success-icon" />,
+        info: <Info className="size-20 text-tag-blue-icon" />,
+        warning: <AlertTriangle className="size-20 text-tag-warning-icon" />,
+        error: <XCircle className="size-20 text-tag-error-icon" />,
+        loading: <Loader2 className="size-20 text-tag-neutral-icon animate-spin" />,
+      }}
+      {...props}
+    />
+  );
+}
+
+export {Toaster, sonnerToast as toast, type ToasterProps};

package/src/components/tooltip/index.ts

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

package/src/components/tooltip/tooltip.stories.tsx

@@ -0,0 +1,284 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Code} from 'components/typography';
+import {Button} from '../button';
+import {Tooltip, TooltipContent, type TooltipContentProps, TooltipTrigger} from './tooltip';
+
+type TooltipStoryArgs = {
+  defaultOpen?: boolean;
+  delayDuration?: number;
+  variant?: TooltipContentProps['variant'];
+  size?: TooltipContentProps['size'];
+  side?: TooltipContentProps['side'];
+  align?: TooltipContentProps['align'];
+  sideOffset?: TooltipContentProps['sideOffset'];
+  animated?: TooltipContentProps['animated'];
+};
+
+const meta = {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+  argTypes: {
+    defaultOpen: {control: 'boolean'},
+    delayDuration: {control: 'number'},
+    variant: {
+      control: 'select',
+      options: ['default', 'inverted', 'muted'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    side: {
+      control: 'select',
+      options: ['top', 'bottom', 'left', 'right'],
+    },
+    align: {
+      control: 'select',
+      options: ['start', 'center', 'end'],
+    },
+    sideOffset: {control: 'number'},
+    animated: {control: 'boolean'},
+  },
+  args: {
+    defaultOpen: false,
+    delayDuration: 0,
+    variant: 'default',
+    size: 'md',
+    side: 'top',
+    align: 'center',
+    sideOffset: 8,
+    animated: true,
+  },
+} satisfies Meta<TooltipStoryArgs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    defaultOpen: false,
+  },
+
+  render: (args: TooltipStoryArgs) => {
+    const {defaultOpen, delayDuration, variant, size, side, align, sideOffset, animated} = args;
+    return (
+      <div className="flex items-center justify-center p-64">
+        <Tooltip defaultOpen={defaultOpen} delayDuration={delayDuration}>
+          <TooltipTrigger asChild>
+            <Button>Hover me</Button>
+          </TooltipTrigger>
+          <TooltipContent
+            variant={variant}
+            size={size}
+            side={side}
+            align={align}
+            sideOffset={sideOffset}
+            animated={animated}
+          >
+            Tooltip Text
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    );
+  },
+};
+
+export const Types: Story = {
+  render: () => (
+    <div className="flex flex-col gap-64 p-64">
+      <Code variant="label" className="text-foreground-neutral-subtle">
+        TYPES
+      </Code>
+      <div className="flex flex-col gap-32">
+        {/* Text Type */}
+        <div className="flex flex-col gap-16">
+          <Code variant="label" className="text-foreground-neutral-subtle">
+            Type=Text
+          </Code>
+          <div className="flex gap-16">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="primary">Tooltip Text</Button>
+              </TooltipTrigger>
+              <TooltipContent variant="inverted">Tooltip Text</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="secondary">Tooltip Text</Button>
+              </TooltipTrigger>
+              <TooltipContent>Tooltip Text</TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+
+        {/* Shortcut Type */}
+        <div className="flex flex-col gap-16">
+          <Code variant="label" className="text-foreground-neutral-subtle">
+            Type=Shortcut
+          </Code>
+          <div className="flex gap-16">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="primary">Tooltip Text</Button>
+              </TooltipTrigger>
+              <TooltipContent variant="inverted">
+                <div className="flex items-center gap-6">
+                  <span>Tooltip Text</span>
+                  <div className="flex items-center gap-4">
+                    <kbd className="flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-sm text-foreground-neutral-subtle">
+                      ⌘
+                    </kbd>
+                    <kbd className="flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-sm text-foreground-neutral-subtle">
+                      /
+                    </kbd>
+                  </div>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="secondary">Tooltip Text</Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <div className="flex items-center gap-6">
+                  <span>Tooltip Text</span>
+                  <div className="flex items-center gap-4">
+                    <kbd className="flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-xs text-foreground-neutral-subtle">
+                      ⌘
+                    </kbd>
+                    <kbd className="flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-xs text-foreground-neutral-subtle">
+                      /
+                    </kbd>
+                  </div>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+
+        {/* Graph Type */}
+        <div className="flex flex-col gap-16">
+          <Code variant="label" className="text-foreground-neutral-subtle">
+            Type=Graph
+          </Code>
+          <div className="flex gap-16">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="primary">Hover for graph data</Button>
+              </TooltipTrigger>
+              <TooltipContent variant="inverted" className="w-160">
+                <div className="flex flex-col gap-4">
+                  <div className="text-xs text-foreground-neutral-subtle">Jul 22, 2025</div>
+                  <div className="flex flex-col gap-4">
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-purple-500" />
+                        <span className="text-xs">Data A</span>
+                      </div>
+                      <span className="text-xs">$6.14</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-green-500" />
+                        <span className="text-xs">Data B</span>
+                      </div>
+                      <span className="text-xs">$4.37</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-orange-500" />
+                        <span className="text-xs">Data C</span>
+                      </div>
+                      <span className="text-xs">$12.88</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-blue-500" />
+                        <span className="text-xs">Data D</span>
+                      </div>
+                      <span className="text-xs">$2.91</span>
+                    </div>
+                  </div>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="secondary">Hover for graph data</Button>
+              </TooltipTrigger>
+              <TooltipContent className="w-160">
+                <div className="flex flex-col gap-4">
+                  <div className="text-xs text-foreground-neutral-subtle">Jul 22, 2025</div>
+                  <div className="flex flex-col gap-4">
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-purple-500" />
+                        <span className="text-xs">Data A</span>
+                      </div>
+                      <span className="text-xs">$6.14</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-green-500" />
+                        <span className="text-xs">Data B</span>
+                      </div>
+                      <span className="text-xs">$4.37</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-orange-500" />
+                        <span className="text-xs">Data C</span>
+                      </div>
+                      <span className="text-xs">$12.88</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-12">
+                      <div className="flex flex-1 items-center gap-4">
+                        <div className="size-6 rounded-full bg-blue-500" />
+                        <span className="text-xs">Data D</span>
+                      </div>
+                      <span className="text-xs">$2.91</span>
+                    </div>
+                  </div>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+
+        {/* Breadcrumbs Type */}
+        <div className="flex flex-col gap-16">
+          <Code variant="label" className="text-foreground-neutral-subtle">
+            Type=Breadcrumbs
+          </Code>
+          <div className="flex gap-16">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="primary">Breadcrumb</Button>
+              </TooltipTrigger>
+              <TooltipContent variant="inverted">
+                <div className="flex items-center gap-6">
+                  <span>Breadcrumb</span>
+                  <span className="text-foreground-neutral-muted">/</span>
+                  <span>Breadcrumb</span>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="secondary">Breadcrumb</Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <div className="flex items-center gap-6">
+                  <span>Breadcrumb</span>
+                  <span className="text-foreground-neutral-muted">/</span>
+                  <span>Breadcrumb</span>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/components/tooltip/tooltip.tsx

@@ -0,0 +1,121 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import {cva, type VariantProps} from 'class-variance-authority';
+import {motion, type Transition} from 'framer-motion';
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+
+const tooltipContentVariants = cva(
+  'rounded-8 px-8 py-4 text-xs font-medium leading-20 z-50 w-fit text-balance shadow-tooltip',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background-components-base text-foreground-neutral-base',
+        inverted: 'bg-background-button-inverted-default text-foreground-contrast-primary',
+        muted: 'bg-background-neutral-subtle text-foreground-neutral-muted',
+      },
+      size: {
+        sm: 'px-6 py-2 text-xs',
+        md: 'px-8 py-4 text-xs',
+        lg: 'px-10 py-6 text-sm',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  },
+);
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({...props}: ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({...props}: ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+const defaultTransition: Transition = {
+  type: 'spring',
+  stiffness: 300,
+  damping: 17,
+};
+
+type TooltipContentProps = ComponentProps<typeof TooltipPrimitive.Content> &
+  VariantProps<typeof tooltipContentVariants> & {
+    animated?: boolean;
+    transition?: Transition;
+  };
+
+function TooltipContent({
+  className,
+  sideOffset = 8,
+  children,
+  variant,
+  size,
+  animated = true,
+  transition = defaultTransition,
+  ...props
+}: TooltipContentProps) {
+  if (animated) {
+    return (
+      <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Content
+          data-slot="tooltip-content"
+          sideOffset={sideOffset}
+          asChild
+          {...props}
+        >
+          <motion.div
+            className={cn(tooltipContentVariants({variant, size, className}))}
+            initial={{opacity: 0, scale: 0.95}}
+            animate={{opacity: 1, scale: 1}}
+            exit={{opacity: 0, scale: 0.95}}
+            transition={transition}
+          >
+            {children}
+          </motion.div>
+        </TooltipPrimitive.Content>
+      </TooltipPrimitive.Portal>
+    );
+  }
+
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(tooltipContentVariants({variant, size, className}))}
+        {...props}
+      >
+        {children}
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  tooltipContentVariants,
+  defaultTransition,
+};
+export type {TooltipContentProps};

package/src/hooks/index.ts

@@ -1,2 +1,5 @@
 export * from './useCopyToClipboard';
+export * from './useResolvedTheme';
+export * from './useShikiHighlight';
+export * from './useShikiStyleInjection';
 export * from './useTheme';

package/src/hooks/useResolvedTheme.ts

@@ -0,0 +1,34 @@
+import {useSyncExternalStore} from 'react';
+import {useTheme} from './useTheme';
+
+export function useResolvedTheme(): 'light' | 'dark' {
+  const {theme} = useTheme();
+
+  const systemTheme = useSyncExternalStore<'light' | 'dark'>(
+    (callback) => {
+      if (typeof window === 'undefined' || theme !== 'system') {
+        return () => {
+          // No-op unsubscribe
+        };
+      }
+      const mql = window.matchMedia('(prefers-color-scheme: dark)');
+      mql.addEventListener('change', callback);
+      return () => {
+        mql.removeEventListener('change', callback);
+      };
+    },
+    (): 'light' | 'dark' =>
+      typeof window !== 'undefined' && theme === 'system'
+        ? window.matchMedia('(prefers-color-scheme: dark)').matches
+          ? 'dark'
+          : 'light'
+        : 'light',
+    (): 'light' | 'dark' => 'light', // Server snapshot
+  );
+
+  if (theme === 'system') {
+    return systemTheme;
+  }
+  // TypeScript should narrow theme to 'light' | 'dark' here
+  return theme as 'light' | 'dark';
+}

package/src/hooks/useShikiHighlight.ts

@@ -0,0 +1,140 @@
+import {useEffect, useState} from 'react';
+
+type ShikiThemes = {
+  light: string;
+  dark: string;
+};
+
+type UseShikiHighlightOptions = {
+  code: string;
+  lang: string;
+  themes: ShikiThemes;
+  resolvedTheme: 'light' | 'dark';
+  syntaxHighlighting: boolean;
+};
+
+export function useShikiHighlight({
+  code,
+  lang,
+  themes,
+  resolvedTheme,
+  syntaxHighlighting,
+}: UseShikiHighlightOptions): {highlightedCode: string; isLoading: boolean} {
+  const [highlightedCode, setHighlightedCode] = useState<string>('');
+  const [isLoading, setIsLoading] = useState(syntaxHighlighting);
+
+  useEffect(() => {
+    if (!syntaxHighlighting) {
+      setIsLoading(false);
+      return;
+    }
+
+    setIsLoading(true);
+    let cancelled = false;
+
+    const loadHighlightedCode = async () => {
+      try {
+        const {codeToHtml} = await import('shiki');
+
+        const html = await codeToHtml(code, {
+          lang,
+          themes: {
+            light: themes.light,
+            dark: themes.dark,
+          },
+          defaultColor: resolvedTheme === 'dark' ? 'dark' : 'light',
+        });
+
+        if (!cancelled) {
+          setHighlightedCode(html);
+          setIsLoading(false);
+        }
+      } catch {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    loadHighlightedCode();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [code, lang, themes.light, themes.dark, resolvedTheme, syntaxHighlighting]);
+
+  return {highlightedCode, isLoading};
+}
+
+type UseShikiHighlightMultipleOptions = {
+  codes: Record<string, string>;
+  lang: string;
+  themes: ShikiThemes;
+  resolvedTheme: 'light' | 'dark';
+  syntaxHighlighting: boolean;
+};
+
+export function useShikiHighlightMultiple({
+  codes,
+  lang,
+  themes,
+  resolvedTheme,
+  syntaxHighlighting,
+}: UseShikiHighlightMultipleOptions): {
+  highlightedCodes: Record<string, string>;
+  isLoading: boolean;
+} {
+  const [highlightedCodes, setHighlightedCodes] = useState<Record<string, string>>({});
+  const [isLoading, setIsLoading] = useState(syntaxHighlighting);
+
+  useEffect(() => {
+    if (!syntaxHighlighting) {
+      setIsLoading(false);
+      return;
+    }
+
+    setIsLoading(true);
+    let cancelled = false;
+
+    const loadHighlightedCode = async () => {
+      try {
+        const {codeToHtml} = await import('shiki');
+        const newHighlightedCodes: Record<string, string> = {};
+
+        for (const [command, val] of Object.entries(codes)) {
+          if (cancelled) {
+            return;
+          }
+
+          const highlighted = await codeToHtml(val, {
+            lang,
+            themes: {
+              light: themes.light,
+              dark: themes.dark,
+            },
+            defaultColor: resolvedTheme === 'dark' ? 'dark' : 'light',
+          });
+
+          newHighlightedCodes[command] = highlighted;
+        }
+
+        if (!cancelled) {
+          setHighlightedCodes(newHighlightedCodes);
+          setIsLoading(false);
+        }
+      } catch {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    loadHighlightedCode();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [resolvedTheme, lang, themes.light, themes.dark, codes, syntaxHighlighting]);
+
+  return {highlightedCodes, isLoading};
+}

package/src/hooks/useShikiStyleInjection.ts

@@ -0,0 +1,34 @@
+import {useEffect} from 'react';
+
+export function useShikiStyleInjection(syntaxHighlighting: boolean): void {
+  useEffect(() => {
+    if (!syntaxHighlighting) {
+      return;
+    }
+
+    const styleId = 'shiki-override-styles';
+    if (document.getElementById(styleId)) {
+      return;
+    }
+
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+      .shiki-override pre,
+      .shiki-override code,
+      .shiki-override pre *,
+      .shiki-override code * {
+        background: transparent !important;
+        font-family: "Commit Mono", monospace !important;
+      }
+    `;
+    document.head.appendChild(style);
+
+    return () => {
+      const existingStyle = document.getElementById(styleId);
+      if (existingStyle) {
+        existingStyle.remove();
+      }
+    };
+  }, [syntaxHighlighting]);
+}

package/src/utils/avatar.ts

@@ -0,0 +1,27 @@
+const hashString = (str: string): number => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash);
+};
+
+export const getPlaceholderImageUrl = (name?: string): string => {
+  const backgroundColors = ['BFDFFF', 'BFEAFF', 'CFBFFF', 'FFBFC3', 'FFEABF', 'E3E6EA', 'EAEAEA'];
+
+  const seed = name?.trim() || 'avatar';
+
+  const colorIndex = hashString(seed) % backgroundColors.length;
+  const backgroundColor = backgroundColors[colorIndex];
+
+  return `https://api.dicebear.com/9.x/micah/svg?backgroundColor=${backgroundColor}&seed=${encodeURIComponent(seed)}`;
+};
+
+export const getInitial = (name?: string): string => {
+  if (name) {
+    return name.trim()[0]?.toUpperCase() ?? 'L';
+  }
+  return 'L';
+};