@shipfox/react-ui 0.14.0 → 0.16.0

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

@@ -1,323 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {
-  CodeBlock,
-  CodeBlockBody,
-  CodeBlockContent,
-  CodeBlockCopyButton,
-  CodeBlockFilename,
-  CodeBlockFiles,
-  CodeBlockFooter,
-  CodeBlockHeader,
-  CodeBlockItem,
-} from 'components/code-block';
-import {CodeTabs} from 'components/code-block/code-tabs';
-
-const meta = {
-  title: 'Components/CodeBlock',
-  component: CodeBlock,
-  parameters: {
-    layout: 'padded',
-  },
-} satisfies Meta<typeof CodeBlock>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const exampleCode = `jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: Build
-        run: npm run build`;
-
-const diffCode = `jobs:
-  build:
-        - runs-on: ubuntu-latest
-        + runs-on: shipfox-2vcpu-ubuntu-2404`;
-
-export const Default: Story = {
-  args: {
-    data: [
-      {
-        language: 'yaml',
-        filename: '.github/workflows/<workflow-name>.yml',
-        code: exampleCode,
-      },
-    ],
-    defaultValue: 'yaml',
-  },
-  render: (args) => (
-    <CodeBlock {...args}>
-      <CodeBlockHeader>
-        <CodeBlockFiles>
-          {(item) => <CodeBlockFilename value={item.language}>{item.filename}</CodeBlockFilename>}
-        </CodeBlockFiles>
-        <CodeBlockCopyButton />
-      </CodeBlockHeader>
-      <CodeBlockBody>
-        {(item) => (
-          <CodeBlockItem value={item.language}>
-            <CodeBlockContent language={item.language}>{item.code}</CodeBlockContent>
-          </CodeBlockItem>
-        )}
-      </CodeBlockBody>
-    </CodeBlock>
-  ),
-};
-
-export const WithDiff: Story = {
-  args: {
-    data: [
-      {
-        language: 'yaml',
-        filename: '.github/workflows/<workflow-name>.yml',
-        code: diffCode,
-      },
-    ],
-    defaultValue: 'yaml',
-  },
-  render: (args) => (
-    <CodeBlock {...args}>
-      <CodeBlockHeader>
-        <CodeBlockFiles>
-          {(item) => <CodeBlockFilename value={item.language}>{item.filename}</CodeBlockFilename>}
-        </CodeBlockFiles>
-        <CodeBlockCopyButton />
-      </CodeBlockHeader>
-      <CodeBlockBody>
-        {(item) => (
-          <CodeBlockItem value={item.language}>
-            <CodeBlockContent language={item.language}>{item.code}</CodeBlockContent>
-          </CodeBlockItem>
-        )}
-      </CodeBlockBody>
-    </CodeBlock>
-  ),
-};
-
-export const WithFooterRunning: Story = {
-  args: {
-    data: [
-      {
-        language: 'yaml',
-        filename: '.github/workflows/<workflow-name>.yml',
-        code: diffCode,
-      },
-    ],
-    defaultValue: 'yaml',
-  },
-  render: (args) => (
-    <CodeBlock {...args}>
-      <CodeBlockHeader>
-        <CodeBlockFiles>
-          {(item) => <CodeBlockFilename value={item.language}>{item.filename}</CodeBlockFilename>}
-        </CodeBlockFiles>
-        <CodeBlockCopyButton />
-      </CodeBlockHeader>
-      <CodeBlockBody>
-        {(item) => (
-          <CodeBlockItem value={item.language}>
-            <CodeBlockContent language={item.language}>{item.code}</CodeBlockContent>
-          </CodeBlockItem>
-        )}
-      </CodeBlockBody>
-      <CodeBlockFooter
-        state="running"
-        message="Waiting for Shipfox runner event…"
-        description="This usually takes 30-60 seconds after you commit the workflow file."
-      />
-    </CodeBlock>
-  ),
-};
-
-export const WithFooterDone: Story = {
-  args: {
-    data: [
-      {
-        language: 'yaml',
-        filename: '.github/workflows/<workflow-name>.yml',
-        code: diffCode,
-      },
-    ],
-    defaultValue: 'yaml',
-  },
-  render: (args) => (
-    <CodeBlock {...args}>
-      <CodeBlockHeader>
-        <CodeBlockFiles>
-          {(item) => <CodeBlockFilename value={item.language}>{item.filename}</CodeBlockFilename>}
-        </CodeBlockFiles>
-        <CodeBlockCopyButton />
-      </CodeBlockHeader>
-      <CodeBlockBody>
-        {(item) => (
-          <CodeBlockItem value={item.language}>
-            <CodeBlockContent language={item.language}>{item.code}</CodeBlockContent>
-          </CodeBlockItem>
-        )}
-      </CodeBlockBody>
-      <CodeBlockFooter state="done" message="Runner connected!" />
-    </CodeBlock>
-  ),
-};
-
-const multipleFilesCode = {
-  'src/utils/format.ts': `export function formatDate(date: Date): string {
-  return new Intl.DateTimeFormat('en-US', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  }).format(date);
-}
-
-export function formatCurrency(amount: number): string {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-  }).format(amount);
-}`,
-  'src/api/client.ts': `import type {User} from './types';
-
-export class ApiClient {
-  private baseUrl: string;
-
-  constructor(baseUrl: string) {
-    this.baseUrl = baseUrl;
-  }
-
-  async getUser(id: string): Promise<User> {
-    const response = await fetch(\`\${this.baseUrl}/users/\${id}\`);
-    if (!response.ok) {
-      throw new Error('Failed to fetch user');
-    }
-    return response.json();
-  }
-}`,
-  'src/components/Button.tsx': `import type {ComponentProps} from 'react';
-
-export function Button({
-  children,
-  variant = 'primary',
-  ...props
-}: ComponentProps<'button'> & {
-  variant?: 'primary' | 'secondary';
-}) {
-  return (
-    <button
-      className={\`btn btn-\${variant}\`}
-      {...props}
-    >
-      {children}
-    </button>
-  );
-}`,
-};
-
-export const MultipleFiles: Story = {
-  args: {
-    data: [],
-    defaultValue: '',
-  },
-  render: () => (
-    <CodeTabs
-      codes={multipleFilesCode}
-      defaultValue="src/api/client.ts"
-      syntaxHighlighting={true}
-      lang="typescript"
-      lineNumbers={true}
-    />
-  ),
-};
-
-export const WithoutLineNumbers: Story = {
-  args: {
-    data: [
-      {
-        language: 'yaml',
-        filename: '.github/workflows/<workflow-name>.yml',
-        code: exampleCode,
-      },
-    ],
-    defaultValue: 'yaml',
-  },
-  render: (args) => (
-    <CodeBlock {...args}>
-      <CodeBlockHeader>
-        <CodeBlockFiles>
-          {(item) => <CodeBlockFilename value={item.language}>{item.filename}</CodeBlockFilename>}
-        </CodeBlockFiles>
-        <CodeBlockCopyButton />
-      </CodeBlockHeader>
-      <CodeBlockBody>
-        {(item) => (
-          <CodeBlockItem value={item.language} lineNumbers={false}>
-            <CodeBlockContent language={item.language}>{item.code}</CodeBlockContent>
-          </CodeBlockItem>
-        )}
-      </CodeBlockBody>
-    </CodeBlock>
-  ),
-};
-
-const npmCode = `npm install @shipfox/tooling`;
-const yarnCode = `yarn add @shipfox/tooling`;
-const pnpmCode = `pnpm add @shipfox/tooling`;
-
-export const Snippet: Story = {
-  args: {
-    data: [],
-    defaultValue: '',
-  },
-  render: () => (
-    <CodeTabs
-      codes={{
-        npm: npmCode,
-        yarn: yarnCode,
-        pnpm: pnpmCode,
-      }}
-      defaultValue="npm"
-    />
-  ),
-};
-
-const syntaxHighlightingCode = {
-  'index.ts': `export function hello(name: string = 'World'): void {
-  // Say hello to the provided name
-  console.log(\`Hello, \${name}!\`);
-}
-
-export function greetEveryone(names: string[]): void {
-  for (const name of names) {
-    hello(name);
-  }
-}
-
-export type Greeting = {
-  language: string;
-  message: string;
-};
-
-export const greetings: Greeting[] = [
-  { language: 'en', message: 'Hello' },
-  { language: 'fr', message: 'Bonjour' },
-  { language: 'es', message: 'Hola' },
-  { language: 'de', message: 'Hallo' },
-];
-
-export function printGreetings(): void {
-  for (const { language, message } of greetings) {
-    console.log(\`\${message}, \${language}!\`);
-  }
-}`,
-};
-
-export const SyntaxHighlighting: StoryObj<typeof CodeTabs> = {
-  args: {
-    codes: syntaxHighlightingCode,
-    defaultValue: 'index.ts',
-    syntaxHighlighting: true,
-    lang: 'typescript',
-  },
-  render: (args) => <CodeTabs {...args} />,
-};

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>
-  );
-}