@shipfox/react-ui 0.3.0 → 0.5.0

package/src/components/code-block/code-block.tsx

@@ -0,0 +1,283 @@
+import {useControllableState} from '@radix-ui/react-use-controllable-state';
+import {CodeContent} from 'components/code-block/code-content';
+import {CodeCopyButton} from 'components/code-block/code-copy-button';
+import {useResolvedTheme} from 'hooks/useResolvedTheme';
+import {useShikiHighlight} from 'hooks/useShikiHighlight';
+import {useShikiStyleInjection} from 'hooks/useShikiStyleInjection';
+import type {ComponentProps, HTMLAttributes, ReactNode} from 'react';
+import {createContext, useContext} from 'react';
+import {cn} from 'utils/cn';
+
+export type BundledLanguage = string;
+
+export type CodeBlockData = {
+  language: string;
+  filename: string;
+  code: string;
+};
+
+type CodeBlockContextType = {
+  value: string | undefined;
+  onValueChange: ((value: string) => void) | undefined;
+  data: CodeBlockData[];
+};
+
+const CodeBlockContext = createContext<CodeBlockContextType>({
+  value: undefined,
+  onValueChange: undefined,
+  data: [],
+});
+
+export type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  data: CodeBlockData[];
+};
+
+export function CodeBlock({
+  value: controlledValue,
+  onValueChange: controlledOnValueChange,
+  defaultValue,
+  className,
+  data,
+  ...props
+}: CodeBlockProps) {
+  const [value, onValueChange] = useControllableState({
+    defaultProp: defaultValue ?? '',
+    prop: controlledValue,
+    onChange: controlledOnValueChange,
+  });
+
+  return (
+    <CodeBlockContext.Provider value={{value, onValueChange, data}}>
+      <div
+        className={cn(
+          'size-full overflow-hidden rounded-12 bg-background-components-pressed dark:bg-background-contrast-base shadow-button-neutral',
+          className,
+        )}
+        {...props}
+      />
+    </CodeBlockContext.Provider>
+  );
+}
+
+export type CodeBlockHeaderProps = HTMLAttributes<HTMLDivElement>;
+
+export function CodeBlockHeader({className, ...props}: CodeBlockHeaderProps) {
+  return (
+    <div
+      className={cn(
+        'flex w-full flex-row items-center gap-12 overflow-clip bg-background-components-pressed dark:bg-background-contrast-base px-16 py-8',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export type CodeBlockFilesProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+  children: (item: CodeBlockData) => ReactNode;
+};
+
+export function CodeBlockFiles({className, children, ...props}: CodeBlockFilesProps) {
+  const {data} = useContext(CodeBlockContext);
+
+  return (
+    <div className={cn('flex grow flex-row items-center gap-12', className)} {...props}>
+      {data.map((item, index) => (
+        <div key={item.language || index}>{children(item)}</div>
+      ))}
+    </div>
+  );
+}
+
+export type CodeBlockFilenameProps = HTMLAttributes<HTMLDivElement> & {
+  value?: string;
+};
+
+export function CodeBlockFilename({className, value, children, ...props}: CodeBlockFilenameProps) {
+  const {value: activeValue} = useContext(CodeBlockContext);
+
+  if (value !== activeValue) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex min-h-0 min-w-0 flex-1 items-center overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 font-code text-foreground-neutral-muted',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export type CodeBlockCopyButtonProps = ComponentProps<'button'> & {
+  onCopy?: () => void;
+  onError?: (error: Error) => void;
+  timeout?: number;
+};
+
+export function CodeBlockCopyButton({
+  onCopy,
+  onError,
+  timeout = 2000,
+  children,
+  className,
+  ...props
+}: CodeBlockCopyButtonProps) {
+  const {data, value} = useContext(CodeBlockContext);
+  const code = data.find((item) => item.language === value)?.code ?? '';
+
+  return (
+    <CodeCopyButton
+      content={code}
+      onCopy={() => onCopy?.()}
+      onError={onError}
+      timeout={timeout}
+      className={className}
+      {...props}
+    >
+      {children}
+    </CodeCopyButton>
+  );
+}
+
+type CodeBlockFallbackProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+  children: string;
+};
+
+function CodeBlockFallback({children, className, ...props}: CodeBlockFallbackProps) {
+  const lines = children?.toString().split('\n') ?? [];
+  return (
+    <pre
+      className={cn('w-full font-code', className)}
+      {...(props as HTMLAttributes<HTMLPreElement>)}
+    >
+      <code>
+        {lines.map((line) => {
+          const isDiffRemove = line.trim().startsWith('-');
+          const isDiffAdd = line.trim().startsWith('+');
+          const diffClass = isDiffRemove ? 'diff remove' : isDiffAdd ? 'diff add' : '';
+
+          return (
+            <span className={cn('line', diffClass)} key={line}>
+              {line}
+            </span>
+          );
+        })}
+      </code>
+    </pre>
+  );
+}
+
+export type CodeBlockBodyProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+  children: (item: CodeBlockData) => ReactNode;
+};
+
+export function CodeBlockBody({children, ...props}: CodeBlockBodyProps) {
+  const {data} = useContext(CodeBlockContext);
+
+  return (
+    <div {...props}>
+      {data.map((item, index) => (
+        <div key={item.language || index}>{children(item)}</div>
+      ))}
+    </div>
+  );
+}
+
+export type CodeBlockItemProps = HTMLAttributes<HTMLDivElement> & {
+  value: string;
+  lineNumbers?: boolean;
+};
+
+export function CodeBlockItem({
+  children,
+  lineNumbers = true,
+  className,
+  value,
+  ...props
+}: CodeBlockItemProps) {
+  const {value: activeValue} = useContext(CodeBlockContext);
+
+  if (value !== activeValue) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn('flex w-full shrink-0 items-start overflow-clip px-4 pb-4 pt-0', className)}
+      {...props}
+    >
+      <div
+        className={cn(
+          'flex min-h-0 min-w-0 flex-1 shrink-0 rounded-8 border border-border-contrast-bottom bg-background-neutral-base dark:bg-background-contrast-subtle font-code',
+          '[&_pre]:py-12 [&_pre]:font-code',
+          '[&_code]:w-full [&_code]:grid [&_code]:overflow-x-auto [&_code]:bg-transparent [&_code]:font-code [&_code]:text-xs [&_code]:leading-20 [&_code]:text-foreground-neutral-base',
+          '[&_.line]:block [&_.line]:px-12 [&_.line]:w-full [&_.line]:relative [&_.line]:font-code [&_.line]:min-h-[1.25rem]',
+          lineNumbers &&
+            '[&_code]:[counter-reset:line] [&_code]:[counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none',
+          '[&_.line.diff]:after:absolute [&_.line.diff]:after:left-0 [&_.line.diff]:after:top-0 [&_.line.diff]:after:bottom-0 [&_.line.diff]:after:w-1',
+          '[&_.line.diff.add]:bg-emerald-50 [&_.line.diff.add]:text-green-700 [&_.line.diff.add]:after:bg-emerald-500',
+          '[&_.line.diff.remove]:bg-rose-50 [&_.line.diff.remove]:text-red-700 [&_.line.diff.remove]:after:bg-rose-500',
+          'dark:[&_.line.diff.add]:bg-emerald-500/10 dark:[&_.line.diff.add]:text-emerald-400',
+          'dark:[&_.line.diff.remove]:bg-rose-500/10 dark:[&_.line.diff.remove]:text-rose-400',
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export type CodeBlockContentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+  themes?: {
+    light: string;
+    dark: string;
+  };
+  language?: BundledLanguage;
+  syntaxHighlighting?: boolean;
+  children: string;
+};
+
+export function CodeBlockContent({
+  children,
+  themes = {
+    light: 'vitesse-light',
+    dark: 'vitesse-dark',
+  },
+  language = 'typescript',
+  syntaxHighlighting = false,
+  ...props
+}: CodeBlockContentProps) {
+  const resolvedTheme = useResolvedTheme();
+
+  useShikiStyleInjection(syntaxHighlighting);
+
+  const {highlightedCode, isLoading} = useShikiHighlight({
+    code: children,
+    lang: language,
+    themes,
+    resolvedTheme,
+    syntaxHighlighting,
+  });
+
+  if (!syntaxHighlighting || isLoading) {
+    return <CodeBlockFallback {...props}>{children}</CodeBlockFallback>;
+  }
+
+  return (
+    <CodeContent
+      code={children}
+      highlightedCode={highlightedCode}
+      isLoading={isLoading}
+      syntaxHighlighting={syntaxHighlighting}
+      {...props}
+    />
+  );
+}

package/src/components/code-block/code-content.tsx

@@ -0,0 +1,63 @@
+import type {HTMLAttributes} from 'react';
+import {cn} from 'utils/cn';
+
+type CodeContentProps = HTMLAttributes<HTMLElement> & {
+  code: string;
+  highlightedCode?: string;
+  isLoading: boolean;
+  syntaxHighlighting: boolean;
+  lineNumbers?: boolean;
+};
+
+export function CodeContent({
+  code,
+  highlightedCode,
+  isLoading,
+  syntaxHighlighting,
+  lineNumbers = false,
+  className,
+  ...props
+}: CodeContentProps) {
+  const shouldShowHighlighted = syntaxHighlighting && !isLoading && highlightedCode;
+
+  if (shouldShowHighlighted) {
+    return (
+      <div
+        className={cn(
+          'shiki-override w-full overflow-x-auto font-code [&_pre]:m-0 [&_pre]:p-0 [&_pre]:bg-transparent [&_pre]:font-code [&_code]:font-code [&_code]:bg-transparent [&_code]:text-xs [&_code]:leading-20 [&_code]:text-foreground-neutral-base [&_code]:grid',
+          lineNumbers &&
+            '[&_code]:[counter-reset:line] [&_code]:[counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none',
+          '[&_.line]:block [&_.line]:px-12 [&_.line]:w-full [&_.line]:relative [&_.line]:font-code [&_.line]:text-xs [&_.line]:leading-20 [&_.line]:min-h-[1.25rem]',
+          className,
+        )}
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki outputs HTML for syntax highlighting
+        dangerouslySetInnerHTML={{__html: highlightedCode}}
+        {...props}
+      />
+    );
+  }
+
+  const lines = code.split('\n');
+
+  return (
+    <pre className={cn('m-0 p-0 bg-transparent font-code', className)} {...props}>
+      <code
+        className={cn(
+          'w-full overflow-x-auto bg-transparent font-code text-xs leading-20 text-foreground-neutral-base',
+          'grid',
+          lineNumbers &&
+            '[counter-reset:line] [counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none',
+        )}
+      >
+        {lines.map((line, index) => (
+          <span
+            className="line px-12 w-full relative font-code text-xs leading-20"
+            key={`${index}-${line}`}
+          >
+            {line}
+          </span>
+        ))}
+      </code>
+    </pre>
+  );
+}

package/src/components/code-block/code-copy-button.tsx

@@ -0,0 +1,73 @@
+import {Icon} from 'components/icon';
+import {useCopyToClipboard} from 'hooks/useCopyToClipboard';
+import type {ComponentProps} from 'react';
+import {useEffect, useRef, useState} from 'react';
+import {cn} from 'utils/cn';
+
+type CodeCopyButtonProps = Omit<ComponentProps<'button'>, 'onCopy'> & {
+  content: string;
+  onCopy?: (content: string) => void;
+  onError?: (error: Error) => void;
+  timeout?: number;
+  children?: React.ReactNode;
+};
+
+export function CodeCopyButton({
+  content,
+  onCopy,
+  onError,
+  timeout = 2000,
+  children,
+  className,
+  ...props
+}: CodeCopyButtonProps) {
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  const {copy} = useCopyToClipboard({
+    text: content,
+    onCopy: () => {
+      setIsCopied(true);
+      onCopy?.(content);
+
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = setTimeout(() => {
+        setIsCopied(false);
+      }, timeout);
+    },
+  });
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleClick = async () => {
+    try {
+      await copy();
+    } catch (error) {
+      onError?.(error instanceof Error ? error : new Error('Failed to copy'));
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      aria-label={isCopied ? 'Copied' : 'Copy to clipboard'}
+      className={cn(
+        'flex shrink-0 cursor-pointer items-center justify-center rounded-6 bg-transparent text-foreground-neutral-muted transition-colors hover:bg-background-components-hover active:bg-background-components-pressed p-4',
+        className,
+      )}
+      onClick={handleClick}
+      {...props}
+    >
+      {children ?? <Icon name={isCopied ? 'check' : 'copy'} className="size-16" />}
+    </button>
+  );
+}

package/src/components/code-block/code-tabs.tsx

@@ -0,0 +1,170 @@
+import * as Tabs from '@radix-ui/react-tabs';
+import {useControllableState} from '@radix-ui/react-use-controllable-state';
+import {CodeContent} from 'components/code-block/code-content';
+import {CodeCopyButton} from 'components/code-block/code-copy-button';
+import {useResolvedTheme} from 'hooks/useResolvedTheme';
+import {useShikiHighlightMultiple} from 'hooks/useShikiHighlight';
+import {useShikiStyleInjection} from 'hooks/useShikiStyleInjection';
+import type {ComponentProps} from 'react';
+import {useMemo} from 'react';
+import {cn} from 'utils/cn';
+
+export type CodeTabsProps = Omit<ComponentProps<typeof Tabs.Root>, 'children'> & {
+  codes: Record<string, string>;
+  lang?: string;
+  themes?: {
+    light: string;
+    dark: string;
+  };
+  copyButton?: boolean;
+  onCopy?: (content: string) => void;
+  syntaxHighlighting?: boolean;
+  lineNumbers?: boolean;
+};
+
+function CodeTabsContent({
+  codes,
+  lang = 'bash',
+  themes = {
+    light: 'vitesse-light',
+    dark: 'vitesse-dark',
+  },
+  copyButton = true,
+  onCopy,
+  syntaxHighlighting = false,
+  lineNumbers = false,
+  activeValue,
+}: {
+  codes: Record<string, string>;
+  lang?: string;
+  themes?: {light: string; dark: string};
+  copyButton?: boolean;
+  onCopy?: (content: string) => void;
+  syntaxHighlighting?: boolean;
+  lineNumbers?: boolean;
+  activeValue: string;
+}) {
+  const resolvedTheme = useResolvedTheme();
+  const codesKeys = useMemo(() => Object.keys(codes), [codes]);
+
+  useShikiStyleInjection(syntaxHighlighting);
+
+  const {highlightedCodes, isLoading} = useShikiHighlightMultiple({
+    codes,
+    lang,
+    themes,
+    resolvedTheme,
+    syntaxHighlighting,
+  });
+
+  const activeCode = codes[activeValue] ?? '';
+
+  return (
+    <>
+      <Tabs.List
+        className={cn(
+          'relative flex w-full flex-row items-center justify-between gap-12 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden bg-background-components-pressed dark:bg-background-contrast-base px-16 py-8',
+          'border-b border-border-contrast-bottom',
+          'after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px',
+          'after:bg-border-neutral-base',
+          'dark:after:bg-border-contrast-top',
+          'after:shadow-separator-inset',
+        )}
+      >
+        <div className="flex flex-row gap-12">
+          {codesKeys.map((code) => (
+            <Tabs.Trigger
+              key={code}
+              value={code}
+              className={cn(
+                'relative px-8 py-4 text-xs leading-20 font-medium text-foreground-neutral-muted transition-colors',
+                'data-[state=active]:text-foreground-neutral-base',
+                'hover:text-foreground-neutral-base',
+                'data-[state=active]:z-10',
+                'data-[state=active]:after:absolute data-[state=active]:after:-bottom-9 data-[state=active]:after:left-0 data-[state=active]:after:right-0',
+                'data-[state=active]:after:h-2 data-[state=active]:after:bg-foreground-neutral-base',
+              )}
+            >
+              {code}
+            </Tabs.Trigger>
+          ))}
+        </div>
+
+        {copyButton && <CodeCopyButton content={activeCode} onCopy={onCopy} className="shrink-0" />}
+      </Tabs.List>
+      <div className="w-full px-4 pb-4 pt-8">
+        {Object.entries(codes).map(([code, rawCode]) => (
+          <Tabs.Content key={code} value={code} className="w-full">
+            <div
+              className={cn(
+                'flex min-h-0 min-w-0 w-full shrink-0 rounded-8 border border-border-contrast-bottom bg-background-neutral-base dark:bg-background-contrast-subtle font-code',
+                '[&_pre]:py-12 [&_pre]:font-code',
+                '[&_pre]:m-0 [&_pre]:px-0 [&_pre]:bg-transparent',
+                '[&_code]:w-full [&_code]:overflow-x-auto [&_code]:bg-transparent [&_code]:font-code [&_code]:text-xs [&_code]:leading-20 [&_code]:text-foreground-neutral-base',
+                lineNumbers &&
+                  '[&_code]:grid [&_code]:[counter-reset:line] [&_code]:[counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none',
+                '[&_.line]:block [&_.line]:px-12 [&_.line]:w-full [&_.line]:relative [&_.line]:font-code [&_.line]:min-h-[1.25rem]',
+              )}
+            >
+              <CodeContent
+                code={rawCode}
+                highlightedCode={highlightedCodes[code]}
+                isLoading={isLoading}
+                syntaxHighlighting={syntaxHighlighting}
+                lineNumbers={lineNumbers}
+              />
+            </div>
+          </Tabs.Content>
+        ))}
+      </div>
+    </>
+  );
+}
+
+export function CodeTabs({
+  codes,
+  lang = 'bash',
+  themes = {
+    light: 'vitesse-light',
+    dark: 'vitesse-dark',
+  },
+  className,
+  defaultValue,
+  value: controlledValue,
+  onValueChange: controlledOnValueChange,
+  copyButton = true,
+  onCopy,
+  syntaxHighlighting = false,
+  lineNumbers = false,
+  ...props
+}: CodeTabsProps) {
+  const firstKey = useMemo(() => Object.keys(codes)[0] ?? '', [codes]);
+  const [value, onValueChange] = useControllableState({
+    defaultProp: defaultValue ?? firstKey,
+    prop: controlledValue,
+    onChange: controlledOnValueChange,
+  });
+
+  return (
+    <Tabs.Root
+      className={cn(
+        'w-full overflow-hidden rounded-12 bg-background-components-pressed dark:bg-background-contrast-base shadow-button-neutral',
+        className,
+      )}
+      value={value}
+      onValueChange={onValueChange}
+      {...props}
+    >
+      <CodeTabsContent
+        codes={codes}
+        lang={lang}
+        themes={themes}
+        copyButton={copyButton}
+        onCopy={onCopy}
+        syntaxHighlighting={syntaxHighlighting}
+        lineNumbers={lineNumbers}
+        activeValue={value ?? firstKey}
+      />
+    </Tabs.Root>
+  );
+}

package/src/components/code-block/index.ts

@@ -0,0 +1,3 @@
+export * from './code-block';
+export * from './code-block-footer';
+export * from './code-tabs';