@shipfox/react-ui 0.3.0 → 0.4.0

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

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

@@ -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,60 @@
+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) => (
+          <span className="line px-12 w-full relative font-code text-xs leading-20" key={line}>
+            {line}
+          </span>
+        ))}
+      </code>
+    </pre>
+  );
+}