@shipfox/react-ui 0.15.0 → 0.16.0

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

@@ -1,197 +0,0 @@
-import {Slot} from '@radix-ui/react-slot';
-import {Icon} from 'components/icon/icon';
-import {ShinyText} from 'components/shiny-text';
-import {Text} from 'components/typography';
-import {useResolvedTheme} from 'hooks/useResolvedTheme';
-import type {ComponentProps, HTMLAttributes, ReactNode} from 'react';
-import {ShipfoxLoader} from 'shipfox-loader-react';
-import {cn} from 'utils/cn';
-
-export type CodeBlockFooterProps = HTMLAttributes<HTMLDivElement> & {
-  asChild?: boolean;
-  state?: 'running' | 'done';
-  message?: ReactNode;
-  description?: ReactNode;
-  icon?: ReactNode;
-};
-
-export function CodeBlockFooter({
-  className,
-  asChild = false,
-  state = 'running',
-  message,
-  description,
-  icon,
-  children,
-  ...props
-}: CodeBlockFooterProps) {
-  const Comp = asChild ? Slot : 'div';
-  const resolvedTheme = useResolvedTheme();
-
-  const defaultIcon =
-    icon ??
-    (state === 'running' ? (
-      <ShipfoxLoader
-        size={20}
-        animation="circular"
-        color={resolvedTheme === 'dark' ? 'white' : 'orange'}
-        background={resolvedTheme === 'dark' ? 'dark' : 'light'}
-      />
-    ) : (
-      <Icon
-        name="checkCircleSolid"
-        className="size-20 text-foreground-neutral-base"
-        aria-hidden="true"
-      />
-    ));
-
-  if (asChild || children) {
-    return (
-      <Comp
-        data-slot="code-block-footer"
-        className={cn('flex w-full items-center justify-start gap-12 px-16 py-12', className)}
-        {...props}
-      >
-        {children}
-      </Comp>
-    );
-  }
-
-  return (
-    <Comp
-      data-slot="code-block-footer"
-      className={cn('flex w-full items-center justify-start gap-12 px-16 py-12', className)}
-      {...props}
-    >
-      <CodeBlockFooterIcon className="text-tag-success-icon">{defaultIcon}</CodeBlockFooterIcon>
-      {(message || description) && (
-        <CodeBlockFooterContent>
-          {message && (
-            <CodeBlockFooterMessage>
-              {state === 'running' && typeof message === 'string' ? (
-                <ShinyText text={message} speed={3} />
-              ) : (
-                message
-              )}
-            </CodeBlockFooterMessage>
-          )}
-          {description && <CodeBlockFooterDescription>{description}</CodeBlockFooterDescription>}
-        </CodeBlockFooterContent>
-      )}
-    </Comp>
-  );
-}
-
-export type CodeBlockFooterIconProps = ComponentProps<'div'> & {
-  asChild?: boolean;
-};
-
-export function CodeBlockFooterIcon({
-  className,
-  asChild = false,
-  children,
-  ...props
-}: CodeBlockFooterIconProps) {
-  const Comp = asChild ? Slot : 'div';
-
-  return (
-    <Comp
-      data-slot="code-block-footer-icon"
-      className={cn('flex shrink-0 items-center justify-center size-20', className)}
-      {...props}
-    >
-      {children}
-    </Comp>
-  );
-}
-
-export type CodeBlockFooterContentProps = ComponentProps<'div'> & {
-  asChild?: boolean;
-};
-
-export function CodeBlockFooterContent({
-  className,
-  asChild = false,
-  children,
-  ...props
-}: CodeBlockFooterContentProps) {
-  const Comp = asChild ? Slot : 'div';
-
-  return (
-    <Comp
-      data-slot="code-block-footer-content"
-      className={cn('flex flex-col items-start justify-center gap-0 min-w-0 flex-1', className)}
-      {...props}
-    >
-      {children}
-    </Comp>
-  );
-}
-
-export type CodeBlockFooterMessageProps = ComponentProps<'div'> & {
-  asChild?: boolean;
-};
-
-export function CodeBlockFooterMessage({
-  className,
-  asChild = false,
-  children,
-  ...props
-}: CodeBlockFooterMessageProps) {
-  if (asChild) {
-    return (
-      <Slot
-        data-slot="code-block-footer-message"
-        className={cn('overflow-hidden text-ellipsis whitespace-nowrap text-xs', className)}
-        {...props}
-      >
-        {children}
-      </Slot>
-    );
-  }
-
-  return (
-    <Text
-      data-slot="code-block-footer-message"
-      size="xs"
-      className={cn('overflow-hidden text-ellipsis whitespace-nowrap', className)}
-      {...props}
-    >
-      {children}
-    </Text>
-  );
-}
-
-export type CodeBlockFooterDescriptionProps = ComponentProps<'div'> & {
-  asChild?: boolean;
-};
-
-export function CodeBlockFooterDescription({
-  className,
-  asChild = false,
-  children,
-  ...props
-}: CodeBlockFooterDescriptionProps) {
-  if (asChild) {
-    return (
-      <Slot
-        data-slot="code-block-footer-description"
-        className={cn('text-xs text-foreground-neutral-subtle', className)}
-        {...props}
-      >
-        {children}
-      </Slot>
-    );
-  }
-
-  return (
-    <Text
-      data-slot="code-block-footer-description"
-      size="xs"
-      className={cn('text-foreground-neutral-subtle', className)}
-      {...props}
-    >
-      {children}
-    </Text>
-  );
-}

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} />,
-};