@shipfox/react-ui 0.13.0 → 0.15.0

package/src/components/command/command.tsx

@@ -0,0 +1,265 @@
+import {cva, type VariantProps} from 'class-variance-authority';
+import {Command as CommandPrimitive} from 'cmdk';
+import {type ComponentProps, forwardRef, useCallback, useState} from 'react';
+import {cn} from 'utils/cn';
+import {Icon} from '../icon';
+import {Kbd} from '../kbd';
+
+const commandTriggerVariants = cva(
+  [
+    'flex items-center justify-between gap-8',
+    'w-full rounded-6 px-8 text-sm leading-20',
+    'bg-background-field-base text-foreground-neutral-base',
+    'shadow-button-neutral transition-[color,box-shadow] outline-none',
+    'hover:bg-background-field-hover cursor-pointer',
+    'focus-visible:shadow-border-interactive-with-active',
+    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-background-neutral-disabled disabled:shadow-none disabled:text-foreground-neutral-disabled',
+  ],
+  {
+    variants: {
+      variant: {
+        base: 'bg-background-field-base',
+        component: 'bg-background-field-component',
+      },
+      size: {
+        small: 'h-28 py-4',
+        base: 'h-32 py-6',
+      },
+    },
+    defaultVariants: {
+      variant: 'base',
+      size: 'base',
+    },
+  },
+);
+
+type CommandTriggerProps = ComponentProps<'button'> &
+  VariantProps<typeof commandTriggerVariants> & {
+    placeholder?: string;
+  };
+
+const CommandTrigger = forwardRef<HTMLButtonElement, CommandTriggerProps>(
+  ({className, variant, size, placeholder, children, ...props}, ref) => {
+    const hasValue = Boolean(children);
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        data-slot="command-trigger"
+        data-placeholder={!hasValue || undefined}
+        className={cn(
+          commandTriggerVariants({variant, size}),
+          'data-placeholder:text-foreground-neutral-muted',
+          className,
+        )}
+        {...props}
+      >
+        <span className="flex-1 text-left truncate">{hasValue ? children : placeholder}</span>
+        <Icon name="arrowDownSLine" className="size-16 text-foreground-neutral-muted shrink-0" />
+      </button>
+    );
+  },
+);
+CommandTrigger.displayName = 'CommandTrigger';
+
+function Command({className, ...props}: ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        'flex h-full w-full flex-col overflow-hidden rounded-10',
+        'bg-background-neutral-overlay text-foreground-neutral-base',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({children, ...props}: ComponentProps<typeof CommandPrimitive.Dialog>) {
+  return (
+    <CommandPrimitive.Dialog data-slot="command-dialog" {...props}>
+      <div className="fixed inset-0 z-50 bg-background-neutral-overlay/80 backdrop-blur-sm" />
+      <div className="fixed left-1/2 top-1/2 z-50 w-full max-w-600 -translate-x-1/2 -translate-y-1/2 p-16">
+        <Command className="shadow-tooltip">{children}</Command>
+      </div>
+    </CommandPrimitive.Dialog>
+  );
+}
+
+type CommandInputProps = ComponentProps<typeof CommandPrimitive.Input> & {
+  showClearButton?: boolean;
+  onClear?: () => void;
+};
+
+function CommandInput({
+  className,
+  value,
+  onValueChange,
+  onClear,
+  showClearButton = true,
+  ...props
+}: CommandInputProps) {
+  const [internalValue, setInternalValue] = useState('');
+  const isControlled = value !== undefined;
+  const inputValue = isControlled ? value : internalValue;
+  const hasValue = Boolean(inputValue);
+
+  const handleValueChange = useCallback(
+    (newValue: string) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onValueChange?.(newValue);
+    },
+    [isControlled, onValueChange],
+  );
+
+  const handleClear = useCallback(() => {
+    if (!isControlled) {
+      setInternalValue('');
+    }
+    onValueChange?.('');
+    onClear?.();
+  }, [isControlled, onValueChange, onClear]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Escape' && hasValue) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleClear();
+      }
+    },
+    [hasValue, handleClear],
+  );
+
+  return (
+    <div className="flex items-center gap-8 border-b border-border-neutral-strong p-8">
+      <Icon name="searchLine" className="size-16 shrink-0 text-foreground-neutral-muted" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        value={inputValue}
+        onValueChange={handleValueChange}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          'flex-1 bg-transparent text-sm leading-20 outline-none',
+          'placeholder:text-foreground-neutral-muted',
+          'disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled',
+          className,
+        )}
+        {...props}
+      />
+      {showClearButton && hasValue && (
+        <button
+          type="button"
+          onClick={handleClear}
+          className={cn(
+            'shrink-0 cursor-pointer rounded-4 p-2',
+            'text-foreground-neutral-muted hover:text-foreground-neutral-subtle transition-colors',
+          )}
+          aria-label="Clear search"
+        >
+          <Icon name="closeLine" className="size-16" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+function CommandList({className, ...props}: ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn('max-h-300 overflow-y-auto overflow-x-hidden p-4 scrollbar', className)}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({className, ...props}: ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className={cn('py-24 text-center text-sm text-foreground-neutral-muted', className)}
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({className, ...props}: ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        'overflow-hidden',
+        '[&_[cmdk-group-heading]]:px-8 [&_[cmdk-group-heading]]:py-4',
+        '[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:leading-20',
+        '[&_[cmdk-group-heading]]:text-foreground-neutral-subtle',
+        '[&_[cmdk-group-heading]]:select-none',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn(
+        'relative -mx-4 my-4 h-px',
+        'bg-border-neutral-menu-top',
+        'after:absolute after:inset-x-0 after:top-px after:h-px',
+        'after:bg-border-neutral-menu-bottom',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({className, ...props}: ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        'relative flex cursor-pointer select-none items-center gap-8 rounded-6 px-8 py-6',
+        'text-sm leading-20 text-foreground-neutral-subtle outline-none transition-colors',
+        'aria-selected:bg-background-components-hover aria-selected:text-foreground-neutral-base',
+        'data-[disabled=true]:pointer-events-none data-[disabled=true]:text-foreground-neutral-disabled',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({className, children, ...props}: ComponentProps<typeof Kbd>) {
+  return (
+    <Kbd data-slot="command-shortcut" className={cn('ml-auto', className)} {...props}>
+      {children}
+    </Kbd>
+  );
+}
+
+export {
+  Command,
+  CommandTrigger,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandSeparator,
+  CommandShortcut,
+  commandTriggerVariants,
+};
+
+export type {CommandTriggerProps, CommandInputProps};

package/src/components/command/index.ts

@@ -0,0 +1 @@
+export * from './command';

package/src/components/confetti/confetti.stories.tsx

@@ -0,0 +1,38 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Confetti, ConfettiButton} from './confetti';
+
+const meta = {
+  title: 'Components/Confetti',
+  component: Confetti,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Confetti>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="flex h-400 w-600 items-center justify-center rounded-16 bg-background-subtle-base">
+      <ConfettiButton>Click for Confetti!</ConfettiButton>
+    </div>
+  ),
+};
+
+export const WithOptions: Story = {
+  render: () => (
+    <div className="flex h-400 w-600 items-center justify-center rounded-16 bg-background-subtle-base">
+      <ConfettiButton
+        options={{
+          particleCount: 150,
+          spread: 60,
+          colors: ['#ff6b6b', '#4ecdc4', '#ffe66d', '#95e1d3'],
+        }}
+      >
+        Custom Confetti Button
+      </ConfettiButton>
+    </div>
+  ),
+};

package/src/components/confetti/confetti.tsx

@@ -0,0 +1,140 @@
+import type {
+  GlobalOptions as ConfettiGlobalOptions,
+  CreateTypes as ConfettiInstance,
+  Options as ConfettiOptions,
+} from 'canvas-confetti';
+import confetti from 'canvas-confetti';
+import {Button} from 'components/button';
+import type {ComponentProps, ReactNode} from 'react';
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+
+type ConfettiApi = {
+  fire: (options?: ConfettiOptions) => Promise<void>;
+};
+
+const ConfettiContext = createContext<ConfettiApi | null>(null);
+
+export type ConfettiRef = ConfettiApi | null;
+
+export type ConfettiProps = ComponentProps<'canvas'> & {
+  options?: ConfettiOptions;
+  globalOptions?: ConfettiGlobalOptions;
+  manualstart?: boolean;
+  children?: ReactNode;
+};
+
+const ConfettiComponent = forwardRef<ConfettiRef, ConfettiProps>(
+  (
+    {
+      options,
+      globalOptions = {resize: true, useWorker: true},
+      manualstart = false,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const instanceRef = useRef<ConfettiInstance | null>(null);
+    const hasAutoFiredRef = useRef<boolean>(false);
+    const optionsRef = useRef<ConfettiOptions | undefined>(options);
+
+    useEffect(() => {
+      optionsRef.current = options;
+    }, [options]);
+
+    const canvasRef = useCallback(
+      (node: HTMLCanvasElement | null) => {
+        if (node !== null) {
+          if (instanceRef.current) {
+            instanceRef.current.reset();
+          }
+          instanceRef.current = confetti.create(node, {
+            ...globalOptions,
+          });
+        } else {
+          if (instanceRef.current) {
+            instanceRef.current.reset();
+            instanceRef.current = null;
+          }
+        }
+      },
+      [globalOptions],
+    );
+
+    const fire = useCallback(async (opts: ConfettiOptions = {}) => {
+      try {
+        await instanceRef.current?.({...optionsRef.current, ...opts});
+      } catch (error) {
+        // biome-ignore lint/suspicious/noConsole: we need to log the error
+        console.error('Confetti error:', error);
+      }
+    }, []);
+
+    const api = useMemo<ConfettiApi>(
+      () => ({
+        fire,
+      }),
+      [fire],
+    );
+
+    useImperativeHandle(ref, () => api, [api]);
+
+    useEffect(() => {
+      if (!manualstart && !hasAutoFiredRef.current && instanceRef.current) {
+        hasAutoFiredRef.current = true;
+        void instanceRef.current(optionsRef.current);
+      }
+    }, [manualstart]);
+
+    return (
+      <ConfettiContext.Provider value={api}>
+        <canvas ref={canvasRef} {...props} />
+        {children}
+      </ConfettiContext.Provider>
+    );
+  },
+);
+
+ConfettiComponent.displayName = 'Confetti';
+
+export const Confetti = ConfettiComponent;
+
+export type ConfettiButtonProps = ComponentProps<'button'> & {
+  options?: ConfettiOptions & ConfettiGlobalOptions & {canvas?: HTMLCanvasElement};
+};
+
+export function ConfettiButton({options, onClick, children, ...props}: ConfettiButtonProps) {
+  const handleClick: ComponentProps<'button'>['onClick'] = async (event) => {
+    try {
+      const rect = event.currentTarget.getBoundingClientRect();
+      const x = rect.left + rect.width / 2;
+      const y = rect.top + rect.height / 2;
+      await confetti({
+        ...options,
+        origin: {
+          x: x / window.innerWidth,
+          y: y / window.innerHeight,
+        },
+      });
+    } catch (error) {
+      // biome-ignore lint/suspicious/noConsole: we need to log the error
+      console.error('Confetti button error:', error);
+    }
+
+    onClick?.(event);
+  };
+
+  return (
+    <Button onClick={handleClick} {...props}>
+      {children}
+    </Button>
+  );
+}

package/src/components/confetti/index.ts

@@ -0,0 +1 @@
+export * from './confetti';

package/src/components/dashboard/components/analytics-content.tsx

@@ -0,0 +1,102 @@
+import {Icon} from 'components/icon';
+import {Skeleton} from 'components/skeleton';
+import {Text} from 'components/typography';
+
+export function AnalyticsContent() {
+  return (
+    <div className="min-h-[calc(100vh-48px)] p-12 md:p-24 space-y-16 md:space-y-20 bg-background-neutral-base">
+      <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-12 md:gap-0">
+        <Skeleton className="h-28 md:h-32 w-120 md:w-160" />
+        <div className="flex items-center gap-8 md:gap-16">
+          <Skeleton className="h-28 md:h-32 w-80 md:w-100" />
+          <Skeleton className="h-28 md:h-32 w-100 md:w-160" />
+        </div>
+      </div>
+
+      <div className="flex gap-12 md:gap-16 overflow-x-auto scrollbar pb-4 md:pb-0 -mx-12 px-12 md:mx-0 md:px-0">
+        {['Total', 'Success', 'Failed', 'Neutral', 'Failure rate'].map((label) => (
+          <div
+            key={label}
+            className="shrink-0 w-100 md:w-auto md:flex-1 p-12 rounded-8 bg-background-neutral-base border border-border-neutral-base"
+          >
+            <p className="text-xs text-foreground-neutral-subtle mb-4">{label}</p>
+            <Skeleton className="h-20 w-40" />
+          </div>
+        ))}
+      </div>
+
+      <div className="flex flex-col md:flex-row gap-16 md:gap-20">
+        <div className="flex-1 p-12 rounded-8 bg-background-neutral-base border border-border-neutral-base">
+          <p className="text-sm font-medium text-foreground-neutral-base mb-12">
+            Performance over time
+          </p>
+          <div className="h-120 md:h-160 flex items-center justify-center">
+            <div className="text-center">
+              <Icon
+                name="fileChartLine"
+                className="size-24 text-foreground-neutral-muted mx-auto mb-8"
+              />
+              <p className="text-sm text-foreground-neutral-subtle">Nothing here yet.</p>
+            </div>
+          </div>
+        </div>
+        <div className="flex-1 p-12 rounded-8 bg-background-neutral-base border border-border-neutral-base">
+          <p className="text-sm font-medium text-foreground-neutral-base mb-12">
+            Duration distribution
+          </p>
+          <div className="h-120 md:h-160 flex items-center justify-center">
+            <div className="text-center">
+              <Icon
+                name="barChartBoxLine"
+                className="size-24 text-foreground-neutral-muted mx-auto mb-8"
+              />
+              <p className="text-sm text-foreground-neutral-subtle">Nothing here yet.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="rounded-8 bg-background-neutral-base border border-border-neutral-base overflow-hidden">
+        <div className="flex flex-col md:flex-row items-start md:items-center justify-between p-12 gap-12 md:gap-0 border-b border-border-neutral-strong">
+          <p className="text-sm font-medium text-foreground-neutral-base">Jobs breakdown</p>
+          <div className="flex items-center gap-8 md:gap-16 w-full md:w-auto">
+            <Skeleton className="h-28 flex-1 md:flex-none md:w-200" />
+            <Skeleton className="h-28 w-28 shrink-0" />
+          </div>
+        </div>
+        <div className="py-48 md:py-64 flex flex-col items-center justify-center gap-12">
+          <div className="size-32 rounded-6 bg-transparent border border-border-neutral-strong flex items-center justify-center">
+            <Icon
+              name="shipfox"
+              className="size-16 text-foreground-neutral-subtle"
+              color="var(--foreground-neutral-subtle, #a1a1aa)"
+            />
+          </div>
+          <div className="text-center space-y-4 px-16">
+            <Text size="sm" className="text-foreground-neutral-base">
+              No jobs yet
+            </Text>
+            <Text size="xs" className="text-foreground-neutral-muted">
+              Import past runs or start a runner.
+            </Text>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-16">
+        {Array.from({length: 3}).map((_, i) => {
+          const blockId = `analytics-extra-block-${i}`;
+          return (
+            <div
+              key={blockId}
+              className="p-12 md:p-16 rounded-8 bg-background-subtle-base border border-border-neutral-strong"
+            >
+              <Skeleton className="h-16 w-full max-w-400 mb-8" />
+              <Skeleton className="h-12 w-full max-w-600" />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/dashboard/components/animated-logo.tsx

@@ -0,0 +1,25 @@
+import {Icon} from 'components/icon';
+import {motion} from 'framer-motion';
+
+const LOGO_HEIGHT = 48;
+
+export function AnimatedLogo({scrollProgress}: {scrollProgress: number}) {
+  const isVisible = scrollProgress > 0;
+
+  if (!isVisible) return null;
+
+  const easedProgress = 1 - (1 - scrollProgress) ** 3;
+
+  return (
+    <motion.div
+      className="fixed top-0 left-0 z-50 flex items-center justify-center shrink-0 w-48 h-48 bg-background-neutral-base"
+      style={{
+        opacity: easedProgress,
+        transform: `translateY(${-LOGO_HEIGHT + easedProgress * LOGO_HEIGHT}px)`,
+      }}
+      initial={false}
+    >
+      <Icon name="shipfox" className="size-20 text-foreground-neutral-subtle" />
+    </motion.div>
+  );
+}

package/src/components/dashboard/components/complete-setup-button.tsx

@@ -0,0 +1,30 @@
+import {Button} from 'components/button';
+import {ShinyText} from 'components/shiny-text';
+import {useResolvedTheme} from 'hooks/useResolvedTheme';
+import {ShipfoxLoader} from 'shipfox-loader-react';
+import {cn} from 'utils/cn';
+
+export function CompleteSetupButton({className}: {className?: string}) {
+  const resolvedTheme = useResolvedTheme();
+  return (
+    <Button
+      type="button"
+      variant="transparent"
+      className={cn(
+        'flex items-center gap-8 min-w-124 max-w-280 overflow-hidden px-12 py-10 transition-colors rounded-none h-40 border-l border-border-neutral-strong',
+        className,
+      )}
+    >
+      <ShipfoxLoader
+        size={13}
+        animation="circular"
+        color={resolvedTheme === 'dark' ? 'white' : 'orange'}
+        background={resolvedTheme === 'dark' ? 'dark' : 'light'}
+      />
+      <ShinyText
+        text="Complete setup"
+        className="flex-1 text-sm font-medium leading-20 text-foreground-neutral-base truncate text-left"
+      />
+    </Button>
+  );
+}

package/src/components/dashboard/components/jobs-content.tsx

@@ -0,0 +1,51 @@
+import {Button} from 'components/button';
+import {Icon} from 'components/icon';
+import {SearchInline} from 'components/search/search-inline';
+import {DataTable} from 'components/table/data-table';
+import {jobColumns} from 'components/table/table.stories.columns';
+import {jobsData} from 'components/table/table.stories.data';
+import {Header as TypographyHeader} from 'components/typography';
+import {useMemo, useState} from 'react';
+
+export function JobsContent() {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const filteredData = useMemo(
+    () => jobsData.filter((job) => job.name.toLowerCase().includes(searchQuery.toLowerCase())),
+    [searchQuery],
+  );
+
+  return (
+    <div className="min-h-[calc(100vh-48px)] p-12 md:p-24 bg-background-neutral-base">
+      <div className="rounded-t-8 overflow-hidden">
+        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-12 md:gap-0 p-12 border-t border-x border-border-neutral-base rounded-t-8 bg-background-neutral-base">
+          <TypographyHeader variant="h3" className="text-foreground-neutral-base">
+            Jobs breakdown
+          </TypographyHeader>
+
+          <div className="flex items-center gap-8 md:gap-16 w-full md:w-auto">
+            <SearchInline
+              placeholder="Search..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onClear={() => setSearchQuery('')}
+              className="flex-1 md:w-240"
+            />
+            <Button variant="secondary" aria-label="Insert column left" className="shrink-0">
+              <Icon name="insertColumnLeft" className="size-16 text-foreground-neutral-subtle" />
+            </Button>
+          </div>
+        </div>
+
+        <DataTable
+          columns={jobColumns}
+          data={filteredData}
+          pagination={true}
+          pageSize={10}
+          pageSizeOptions={[10, 20, 50, 100]}
+          className="rounded-t-none"
+        />
+      </div>
+    </div>
+  );
+}