@shipfox/react-ui 0.15.0 → 0.16.0

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

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

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

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

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

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