@shipfox/react-ui 0.15.0 → 0.16.0

package/src/components/command/command.stories.tsx

@@ -1,133 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {useState} from 'react';
-import {Icon} from '../icon';
-import {Popover, PopoverContent, PopoverTrigger} from '../popover';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-  CommandTrigger,
-} from './command';
-
-const meta = {
-  title: 'Components/Command',
-  component: Command,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Command>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Command className="rounded-10 shadow-tooltip max-w-400">
-      <CommandInput placeholder="Type a command or search..." />
-      <CommandList>
-        <CommandEmpty>No results found.</CommandEmpty>
-        <CommandGroup heading="Suggestions">
-          <CommandItem>
-            <Icon name="calendar2Line" className="size-16 mr-8" />
-            <span>Calendar</span>
-          </CommandItem>
-          <CommandItem>
-            <Icon name="emotion2Line" className="size-16 mr-8" />
-            <span>Search Emoji</span>
-          </CommandItem>
-          <CommandItem>
-            <Icon name="calculatorLine" className="size-16 mr-8" />
-            <span>Calculator</span>
-          </CommandItem>
-        </CommandGroup>
-        <CommandSeparator />
-        <CommandGroup heading="Settings">
-          <CommandItem>
-            <Icon name="user3Line" className="size-16 mr-8" />
-            <span>Profile</span>
-            <CommandShortcut>⌘P</CommandShortcut>
-          </CommandItem>
-          <CommandItem>
-            <Icon name="mailLine" className="size-16 mr-8" />
-            <span>Mail</span>
-            <CommandShortcut>⌘M</CommandShortcut>
-          </CommandItem>
-          <CommandItem>
-            <Icon name="settings3Line" className="size-16 mr-8" />
-            <span>Settings</span>
-            <CommandShortcut>⌘S</CommandShortcut>
-          </CommandItem>
-        </CommandGroup>
-      </CommandList>
-    </Command>
-  ),
-};
-
-export const Combobox: Story = {
-  render: () => {
-    const frameworks = [
-      {value: 'next.js', label: 'Next.js', icon: 'reactjsLine' as const},
-      {value: 'sveltekit', label: 'SvelteKit', icon: 'svelteLine' as const},
-      {value: 'nuxt.js', label: 'Nuxt.js', icon: 'vuejsLine' as const},
-      {value: 'remix', label: 'Remix', icon: 'reactjsLine' as const},
-      {value: 'astro', label: 'Astro', icon: 'rocketLine' as const},
-      {value: 'vue', label: 'Vue', icon: 'vuejsLine' as const},
-      {value: 'react', label: 'React', icon: 'reactjsLine' as const},
-    ];
-
-    function ComboboxDemo() {
-      const [open, setOpen] = useState(false);
-      const [value, setValue] = useState('');
-
-      return (
-        <div className="flex flex-col gap-16">
-          <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-              <CommandTrigger className="w-280" placeholder="Select framework...">
-                {value ? frameworks.find((framework) => framework.value === value)?.label : null}
-              </CommandTrigger>
-            </PopoverTrigger>
-            <PopoverContent className="w-280 p-0" align="start">
-              <Command>
-                <CommandInput placeholder="Search framework..." />
-                <CommandList>
-                  <CommandEmpty>No framework found.</CommandEmpty>
-                  <CommandGroup>
-                    {frameworks.map((framework) => (
-                      <CommandItem
-                        key={framework.value}
-                        value={framework.value}
-                        onSelect={(currentValue) => {
-                          setValue(currentValue === value ? '' : currentValue);
-                          setOpen(false);
-                        }}
-                      >
-                        <Icon
-                          name="check"
-                          className={`size-16 mr-8 ${value === framework.value ? 'opacity-100' : 'opacity-0'}`}
-                        />
-                        <Icon name={framework.icon} className="size-16 mr-8" />
-                        {framework.label}
-                      </CommandItem>
-                    ))}
-                  </CommandGroup>
-                </CommandList>
-              </Command>
-            </PopoverContent>
-          </Popover>
-          {value && (
-            <p className="text-sm text-foreground-neutral-muted">
-              Selected: {frameworks.find((f) => f.value === value)?.label}
-            </p>
-          )}
-        </div>
-      );
-    }
-
-    return <ComboboxDemo />;
-  },
-};

package/src/components/command/command.tsx

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

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

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

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

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

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

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

@@ -1,102 +0,0 @@
-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>
-  );
-}