@shipfox/react-ui 0.3.0 → 0.5.0

package/src/components/checkbox/checkbox.tsx

@@ -0,0 +1,71 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import {cva, type VariantProps} from 'class-variance-authority';
+import {Icon} from 'components/icon';
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+
+export const checkboxVariants = cva(
+  'peer shrink-0 border-none transition-all duration-100 outline-none cursor-pointer',
+  {
+    variants: {
+      size: {
+        sm: 'size-16',
+        md: 'size-20',
+        lg: 'size-24',
+      },
+    },
+    defaultVariants: {
+      size: 'sm',
+    },
+  },
+);
+
+export type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root> &
+  VariantProps<typeof checkboxVariants>;
+
+export function Checkbox({
+  className,
+  size,
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  ...props
+}: CheckboxProps) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      checked={checked}
+      defaultChecked={defaultChecked}
+      onCheckedChange={onCheckedChange}
+      className={cn(
+        checkboxVariants({size}),
+        // Unchecked state - default
+        'rounded-4 bg-checkbox-unchecked-bg shadow-checkbox-unchecked',
+        // Unchecked state - hover
+        'hover:bg-checkbox-unchecked-bg-hover',
+        // Unchecked state - focus
+        'focus-visible:shadow-checkbox-unchecked-focus',
+        // Checked state
+        'data-[state=checked]:bg-checkbox-checked-bg data-[state=checked]:text-foreground-neutral-on-color data-[state=checked]:shadow-checkbox-checked',
+        'data-[state=checked]:hover:bg-checkbox-checked-bg-hover',
+        'data-[state=checked]:focus-visible:shadow-checkbox-checked-focus',
+        // Indeterminate state
+        'data-[state=indeterminate]:bg-checkbox-indeterminate-bg data-[state=indeterminate]:text-foreground-neutral-on-color data-[state=indeterminate]:shadow-checkbox-indeterminate',
+        'data-[state=indeterminate]:hover:bg-checkbox-indeterminate-bg-hover',
+        'data-[state=indeterminate]:focus-visible:shadow-checkbox-indeterminate-focus',
+        // Disabled state
+        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+        {checked === 'indeterminate' ? (
+          <Icon name="subtractLine" className="size-16" aria-hidden="true" />
+        ) : (
+          <Icon name="check" className="size-16" aria-hidden="true" />
+        )}
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}

package/src/components/checkbox/index.ts

@@ -0,0 +1,3 @@
+export * from './checkbox';
+export * from './checkbox-label';
+export * from './checkbox-links';

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

@@ -0,0 +1,173 @@
+import {Slot} from '@radix-ui/react-slot';
+import {Icon} from 'components/icon/icon';
+import type {ComponentProps, HTMLAttributes, ReactNode} from '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 defaultIcon =
+    icon ??
+    (state === 'running' ? (
+      <Icon name="shipfox" className="size-20" aria-hidden="true" />
+    ) : (
+      <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}
+    >
+      <div className="flex shrink-0 items-center justify-center size-20 text-tag-success-icon">
+        {defaultIcon}
+      </div>
+      {(message || description) && (
+        <div className="flex flex-col items-start justify-center gap-0">
+          {message && (
+            <div className="overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-base">
+              {message}
+            </div>
+          )}
+          {description && (
+            <div className="overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-subtle">
+              {description}
+            </div>
+          )}
+        </div>
+      )}
+    </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', className)}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+}
+
+export type CodeBlockFooterMessageProps = ComponentProps<'div'> & {
+  asChild?: boolean;
+};
+
+export function CodeBlockFooterMessage({
+  className,
+  asChild = false,
+  children,
+  ...props
+}: CodeBlockFooterMessageProps) {
+  const Comp = asChild ? Slot : 'div';
+
+  return (
+    <Comp
+      data-slot="code-block-footer-message"
+      className={cn(
+        'overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-base',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+}
+
+export type CodeBlockFooterDescriptionProps = ComponentProps<'div'> & {
+  asChild?: boolean;
+};
+
+export function CodeBlockFooterDescription({
+  className,
+  asChild = false,
+  children,
+  ...props
+}: CodeBlockFooterDescriptionProps) {
+  const Comp = asChild ? Slot : 'div';
+
+  return (
+    <Comp
+      data-slot="code-block-footer-description"
+      className={cn(
+        'overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-subtle',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+}

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