@shipfox/react-ui 0.14.0 → 0.16.0

package/src/components/code-block/code-copy-button.tsx

@@ -1,73 +0,0 @@
-import {Icon} from 'components/icon';
-import {useCopyToClipboard} from 'hooks/useCopyToClipboard';
-import type {ComponentProps} from 'react';
-import {useEffect, useRef, useState} from 'react';
-import {cn} from 'utils/cn';
-
-type CodeCopyButtonProps = Omit<ComponentProps<'button'>, 'onCopy'> & {
-  content: string;
-  onCopy?: (content: string) => void;
-  onError?: (error: Error) => void;
-  timeout?: number;
-  children?: React.ReactNode;
-};
-
-export function CodeCopyButton({
-  content,
-  onCopy,
-  onError,
-  timeout = 2000,
-  children,
-  className,
-  ...props
-}: CodeCopyButtonProps) {
-  const [isCopied, setIsCopied] = useState(false);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-
-  const {copy} = useCopyToClipboard({
-    text: content,
-    onCopy: () => {
-      setIsCopied(true);
-      onCopy?.(content);
-
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-
-      timeoutRef.current = setTimeout(() => {
-        setIsCopied(false);
-      }, timeout);
-    },
-  });
-
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-
-  const handleClick = async () => {
-    try {
-      await copy();
-    } catch (error) {
-      onError?.(error instanceof Error ? error : new Error('Failed to copy'));
-    }
-  };
-
-  return (
-    <button
-      type="button"
-      aria-label={isCopied ? 'Copied' : 'Copy to clipboard'}
-      className={cn(
-        'flex shrink-0 cursor-pointer items-center justify-center rounded-6 bg-transparent text-foreground-neutral-muted transition-colors hover:bg-background-components-hover active:bg-background-components-pressed p-4',
-        className,
-      )}
-      onClick={handleClick}
-      {...props}
-    >
-      {children ?? <Icon name={isCopied ? 'check' : 'copy'} className="size-16" />}
-    </button>
-  );
-}

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

@@ -1,170 +0,0 @@
-import * as Tabs from '@radix-ui/react-tabs';
-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 {useShikiHighlightMultiple} from 'hooks/useShikiHighlight';
-import {useShikiStyleInjection} from 'hooks/useShikiStyleInjection';
-import type {ComponentProps} from 'react';
-import {useMemo} from 'react';
-import {cn} from 'utils/cn';
-
-export type CodeTabsProps = Omit<ComponentProps<typeof Tabs.Root>, 'children'> & {
-  codes: Record<string, string>;
-  lang?: string;
-  themes?: {
-    light: string;
-    dark: string;
-  };
-  copyButton?: boolean;
-  onCopy?: (content: string) => void;
-  syntaxHighlighting?: boolean;
-  lineNumbers?: boolean;
-};
-
-function CodeTabsContent({
-  codes,
-  lang = 'bash',
-  themes = {
-    light: 'vitesse-light',
-    dark: 'vitesse-dark',
-  },
-  copyButton = true,
-  onCopy,
-  syntaxHighlighting = false,
-  lineNumbers = false,
-  activeValue,
-}: {
-  codes: Record<string, string>;
-  lang?: string;
-  themes?: {light: string; dark: string};
-  copyButton?: boolean;
-  onCopy?: (content: string) => void;
-  syntaxHighlighting?: boolean;
-  lineNumbers?: boolean;
-  activeValue: string;
-}) {
-  const resolvedTheme = useResolvedTheme();
-  const codesKeys = useMemo(() => Object.keys(codes), [codes]);
-
-  useShikiStyleInjection(syntaxHighlighting);
-
-  const {highlightedCodes, isLoading} = useShikiHighlightMultiple({
-    codes,
-    lang,
-    themes,
-    resolvedTheme,
-    syntaxHighlighting,
-  });
-
-  const activeCode = codes[activeValue] ?? '';
-
-  return (
-    <>
-      <Tabs.List
-        className={cn(
-          'relative flex w-full flex-row items-center justify-between gap-12 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden bg-background-components-pressed dark:bg-background-contrast-base px-16 py-8',
-          'border-b border-border-contrast-bottom',
-          'after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px',
-          'after:bg-border-neutral-base',
-          'dark:after:bg-border-contrast-top',
-          'after:shadow-separator-inset',
-        )}
-      >
-        <div className="flex flex-row gap-12">
-          {codesKeys.map((code) => (
-            <Tabs.Trigger
-              key={code}
-              value={code}
-              className={cn(
-                'relative px-8 py-4 text-xs leading-20 font-medium text-foreground-neutral-muted transition-colors',
-                'data-[state=active]:text-foreground-neutral-base',
-                'hover:text-foreground-neutral-base',
-                'data-[state=active]:z-10',
-                'data-[state=active]:after:absolute data-[state=active]:after:-bottom-9 data-[state=active]:after:left-0 data-[state=active]:after:right-0',
-                'data-[state=active]:after:h-2 data-[state=active]:after:bg-foreground-neutral-base',
-              )}
-            >
-              {code}
-            </Tabs.Trigger>
-          ))}
-        </div>
-
-        {copyButton && <CodeCopyButton content={activeCode} onCopy={onCopy} className="shrink-0" />}
-      </Tabs.List>
-      <div className="w-full px-4 pb-4 pt-8">
-        {Object.entries(codes).map(([code, rawCode]) => (
-          <Tabs.Content key={code} value={code} className="w-full">
-            <div
-              className={cn(
-                'flex min-h-0 min-w-0 w-full 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',
-                '[&_pre]:m-0 [&_pre]:px-0 [&_pre]:bg-transparent',
-                '[&_code]:w-full [&_code]:overflow-x-auto [&_code]:bg-transparent [&_code]:font-code [&_code]:text-xs [&_code]:leading-20 [&_code]:text-foreground-neutral-base',
-                lineNumbers &&
-                  '[&_code]:grid [&_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]:min-h-[1.25rem]',
-              )}
-            >
-              <CodeContent
-                code={rawCode}
-                highlightedCode={highlightedCodes[code]}
-                isLoading={isLoading}
-                syntaxHighlighting={syntaxHighlighting}
-                lineNumbers={lineNumbers}
-              />
-            </div>
-          </Tabs.Content>
-        ))}
-      </div>
-    </>
-  );
-}
-
-export function CodeTabs({
-  codes,
-  lang = 'bash',
-  themes = {
-    light: 'vitesse-light',
-    dark: 'vitesse-dark',
-  },
-  className,
-  defaultValue,
-  value: controlledValue,
-  onValueChange: controlledOnValueChange,
-  copyButton = true,
-  onCopy,
-  syntaxHighlighting = false,
-  lineNumbers = false,
-  ...props
-}: CodeTabsProps) {
-  const firstKey = useMemo(() => Object.keys(codes)[0] ?? '', [codes]);
-  const [value, onValueChange] = useControllableState({
-    defaultProp: defaultValue ?? firstKey,
-    prop: controlledValue,
-    onChange: controlledOnValueChange,
-  });
-
-  return (
-    <Tabs.Root
-      className={cn(
-        'w-full overflow-hidden rounded-12 bg-background-components-pressed dark:bg-background-contrast-base shadow-button-neutral',
-        className,
-      )}
-      value={value}
-      onValueChange={onValueChange}
-      {...props}
-    >
-      <CodeTabsContent
-        codes={codes}
-        lang={lang}
-        themes={themes}
-        copyButton={copyButton}
-        onCopy={onCopy}
-        syntaxHighlighting={syntaxHighlighting}
-        lineNumbers={lineNumbers}
-        activeValue={value ?? firstKey}
-      />
-    </Tabs.Root>
-  );
-}

package/src/components/code-block/index.ts

@@ -1,3 +0,0 @@
-export * from './code-block';
-export * from './code-block-footer';
-export * from './code-tabs';

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/date-picker/date-picker.stories.tsx

@@ -1,230 +0,0 @@
-import {argosScreenshot} from '@argos-ci/storybook/vitest';
-import type {Meta, StoryObj} from '@storybook/react';
-import {within} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import {subDays} from 'date-fns';
-import {useState} from 'react';
-import {
-  type DateRange,
-  DateTimeRangePicker,
-} from '../date-time-range-picker/date-time-range-picker';
-import {DatePicker} from './date-picker';
-
-const meta: Meta<typeof DatePicker> = {
-  title: 'Components/DatePicker',
-  component: DatePicker,
-  parameters: {
-    layout: 'centered',
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof DatePicker>;
-
-const OPEN_CALENDAR_REGEX = /open calendar/i;
-
-const isTestEnvironment = () => typeof navigator !== 'undefined' && navigator.webdriver === true;
-
-type StoryContext = Parameters<NonNullable<Story['play']>>[0];
-
-async function openCalendarAndScreenshot(ctx: StoryContext, screenshotName: string): Promise<void> {
-  const {canvasElement, step} = ctx;
-  const canvas = within(canvasElement);
-  const user = userEvent.setup();
-
-  let triggerButton: HTMLElement | null = null;
-
-  await step('Open the calendar popover', async () => {
-    triggerButton = canvas.getByRole('button', {name: OPEN_CALENDAR_REGEX});
-    await user.click(triggerButton);
-  });
-
-  await step('Wait for calendar to appear and render', async () => {
-    await new Promise((resolve) => setTimeout(resolve, 300));
-
-    if (isTestEnvironment() && triggerButton instanceof HTMLElement) {
-      triggerButton.style.display = 'none';
-    }
-    await new Promise((resolve) => setTimeout(resolve, 100));
-  });
-
-  await argosScreenshot(ctx, screenshotName);
-}
-
-export const DatePickerStory: Story = {
-  play: (ctx) => openCalendarAndScreenshot(ctx, 'DatePicker Calendar Open'),
-  render: () => {
-    const [date, setDate] = useState<Date | undefined>(new Date());
-    return (
-      <div className="relative flex h-600 w-500 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible">
-        <DatePicker
-          date={date}
-          onDateSelect={setDate}
-          onClear={() => setDate(undefined)}
-          placeholder="DD/MM/YYYY"
-        />
-      </div>
-    );
-  },
-};
-
-export const DateRangePickerStory: Story = {
-  play: (ctx) => openCalendarAndScreenshot(ctx, 'DateRangePicker Calendar Open'),
-  render: () => {
-    const [dateRange, setDateRange] = useState<DateRange | undefined>({
-      start: new Date(),
-      end: subDays(new Date(), -30),
-    });
-    return (
-      <div className="relative flex h-600 w-800 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible">
-        <DateTimeRangePicker
-          dateRange={dateRange}
-          onDateRangeSelect={setDateRange}
-          onClear={() => setDateRange(undefined)}
-          placeholder="DD/MM/YYYY - DD/MM/YYYY"
-          className="min-w-280"
-        />
-      </div>
-    );
-  },
-};
-
-export const AllStates: Story = {
-  render: () => {
-    const now = new Date();
-    const past = subDays(now, 30);
-    return (
-      <div className="flex flex-col gap-32 p-32 min-w-350">
-        <div>
-          <h3 className="text-lg font-semibold mb-16 text-foreground-neutral-base">
-            Single Date Picker
-          </h3>
-          <div className="flex flex-col gap-16">
-            <div>
-              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">DEFAULT</p>
-              <DatePicker placeholder="DD/MM/YYYY" />
-            </div>
-            <div>
-              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">FILLED</p>
-              <DatePicker
-                date={new Date()}
-                onClear={() => {
-                  /* noop for demo */
-                }}
-                placeholder="DD/MM/YYYY"
-              />
-            </div>
-            <div>
-              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">ERROR</p>
-              <DatePicker
-                date={new Date()}
-                onClear={() => {
-                  /* noop for demo */
-                }}
-                state="error"
-                placeholder="DD/MM/YYYY"
-              />
-            </div>
-            <div>
-              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">DISABLED</p>
-              <DatePicker placeholder="DD/MM/YYYY" state="disabled" />
-            </div>
-            <div>
-              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">SMALL</p>
-              <DatePicker size="small" placeholder="DD/MM/YYYY" />
-            </div>
-            <div>
-              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">
-                COMPONENT VARIANT
-              </p>
-              <DatePicker variant="component" placeholder="DD/MM/YYYY" />
-            </div>
-          </div>
-        </div>
-
-        <div>
-          <h3 className="text-lg font-semibold mb-16 text-foreground-neutral-base">
-            Date Range Picker
-          </h3>
-          <div className="flex flex-col gap-16">
-            <div>
-              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">DEFAULT</p>
-              <DateTimeRangePicker placeholder="DD/MM/YYYY - DD/MM/YYYY" />
-            </div>
-            <div>
-              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">FILLED</p>
-              <DateTimeRangePicker
-                dateRange={{start: past, end: now}}
-                onClear={() => {
-                  /* noop for demo */
-                }}
-                placeholder="DD/MM/YYYY - DD/MM/YYYY"
-              />
-            </div>
-            <div>
-              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">ERROR</p>
-              <DateTimeRangePicker
-                dateRange={{start: past, end: now}}
-                onClear={() => {
-                  /* noop for demo */
-                }}
-                state="error"
-                placeholder="DD/MM/YYYY - DD/MM/YYYY"
-              />
-            </div>
-            <div>
-              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">DISABLED</p>
-              <DateTimeRangePicker placeholder="DD/MM/YYYY - DD/MM/YYYY" state="disabled" />
-            </div>
-            <div>
-              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">SMALL</p>
-              <DateTimeRangePicker size="small" placeholder="DD/MM/YYYY - DD/MM/YYYY" />
-            </div>
-            <div>
-              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">
-                COMPONENT VARIANT
-              </p>
-              <DateTimeRangePicker variant="component" placeholder="DD/MM/YYYY - DD/MM/YYYY" />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const DateFormats: Story = {
-  render: () => {
-    const [date, setDate] = useState<Date | undefined>(new Date());
-    const formats = [
-      {format: 'MMMM dd, yyyy', placeholder: 'Month DD, YYYY', label: 'MMMM dd, yyyy'},
-      {format: 'MMMM d, yyyy', placeholder: 'Month D, YYYY', label: 'MMMM d, yyyy'},
-      {format: 'MMM dd, yyyy', placeholder: 'Mon DD, YYYY', label: 'MMM dd, yyyy'},
-      {format: 'dd/MM/yyyy', placeholder: 'DD/MM/YYYY', label: 'dd/MM/yyyy'},
-      {format: 'MM/dd/yyyy', placeholder: 'MM/DD/YYYY', label: 'MM/dd/yyyy'},
-      {format: 'yyyy-MM-dd', placeholder: 'YYYY-MM-DD', label: 'yyyy-MM-dd'},
-    ];
-
-    return (
-      <div className="flex flex-col gap-32 p-32 min-w-350">
-        <h3 className="text-lg font-semibold mb-16 text-foreground-neutral-base">
-          Date Format Examples
-        </h3>
-        <div className="flex flex-col gap-16">
-          {formats.map(({format, placeholder, label}) => (
-            <div key={format}>
-              <p className="text-xs text-foreground-neutral-subtle mb-8 font-mono">{label}</p>
-              <DatePicker
-                date={date}
-                onDateSelect={setDate}
-                onClear={() => setDate(undefined)}
-                dateFormat={format}
-                placeholder={placeholder}
-              />
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  },
-};