@shipfox/react-ui 0.15.0 → 0.17.0

package/src/hooks/useCopyToClipboard.ts

@@ -1,20 +0,0 @@
-import {useState} from 'react';
-import {copyTextToClipboard} from 'utils';
-
-interface UseCopyToClipboardParams {
-  text: string;
-  onCopy?: (text: string) => void;
-}
-
-export function useCopyToClipboard({text, onCopy}: UseCopyToClipboardParams) {
-  const [copied, setCopied] = useState(false);
-
-  const copy = async () => {
-    await copyTextToClipboard(text);
-
-    if (onCopy) onCopy(text);
-    setCopied(true);
-  };
-
-  return {copy, copied};
-}

package/src/hooks/useMediaQuery.ts

@@ -1,87 +0,0 @@
-import {useEffect, useState} from 'react';
-
-class MediaQueryManager {
-  private queries = new Map<string, MediaQueryList>();
-  private listeners = new Map<string, Set<() => void>>();
-  private changeHandlers = new Map<string, () => void>();
-
-  getMatches(query: string): boolean {
-    if (typeof window === 'undefined') return false;
-
-    if (!this.queries.has(query)) {
-      this.queries.set(query, window.matchMedia(query));
-      this.listeners.set(query, new Set());
-    }
-
-    const mediaQuery = this.queries.get(query);
-    return mediaQuery ? mediaQuery.matches : false;
-  }
-
-  subscribe(query: string, callback: () => void): () => void {
-    if (typeof window === 'undefined') {
-      return () => {
-        // Cleanup function for SSR - no-op
-      };
-    }
-
-    if (!this.queries.has(query)) {
-      this.queries.set(query, window.matchMedia(query));
-      this.listeners.set(query, new Set());
-    }
-
-    const mediaQuery = this.queries.get(query);
-    const listeners = this.listeners.get(query);
-
-    if (!mediaQuery || !listeners) {
-      return () => {
-        // Cleanup function - no-op if query wasn't found
-      };
-    }
-
-    listeners.add(callback);
-
-    if (listeners.size === 1) {
-      const changeHandler = () => {
-        for (const cb of listeners) {
-          cb();
-        }
-      };
-      this.changeHandlers.set(query, changeHandler);
-      mediaQuery.addEventListener('change', changeHandler);
-    }
-
-    return () => {
-      listeners.delete(callback);
-
-      if (listeners.size === 0) {
-        const changeHandler = this.changeHandlers.get(query);
-        if (changeHandler) {
-          mediaQuery.removeEventListener('change', changeHandler);
-          this.changeHandlers.delete(query);
-        }
-        this.queries.delete(query);
-        this.listeners.delete(query);
-      }
-    };
-  }
-}
-
-const mediaQueryManager = new MediaQueryManager();
-
-export function useMediaQuery(query: string): boolean {
-  const [matches, setMatches] = useState(() => mediaQueryManager.getMatches(query));
-
-  useEffect(() => {
-    const updateMatches = () => {
-      setMatches(mediaQueryManager.getMatches(query));
-    };
-
-    const unsubscribe = mediaQueryManager.subscribe(query, updateMatches);
-
-    updateMatches();
-
-    return unsubscribe;
-  }, [query]);
-
-  return matches;
-}

package/src/hooks/useResolvedTheme.ts

@@ -1,34 +0,0 @@
-import {useSyncExternalStore} from 'react';
-import {useTheme} from './useTheme';
-
-export function useResolvedTheme(): 'light' | 'dark' {
-  const {theme} = useTheme();
-
-  const systemTheme = useSyncExternalStore<'light' | 'dark'>(
-    (callback) => {
-      if (typeof window === 'undefined' || theme !== 'system') {
-        return () => {
-          // No-op unsubscribe
-        };
-      }
-      const mql = window.matchMedia('(prefers-color-scheme: dark)');
-      mql.addEventListener('change', callback);
-      return () => {
-        mql.removeEventListener('change', callback);
-      };
-    },
-    (): 'light' | 'dark' =>
-      typeof window !== 'undefined' && theme === 'system'
-        ? window.matchMedia('(prefers-color-scheme: dark)').matches
-          ? 'dark'
-          : 'light'
-        : 'light',
-    (): 'light' | 'dark' => 'light', // Server snapshot
-  );
-
-  if (theme === 'system') {
-    return systemTheme;
-  }
-  // TypeScript should narrow theme to 'light' | 'dark' here
-  return theme as 'light' | 'dark';
-}

package/src/hooks/useShikiHighlight.ts

@@ -1,140 +0,0 @@
-import {useEffect, useState} from 'react';
-
-type ShikiThemes = {
-  light: string;
-  dark: string;
-};
-
-type UseShikiHighlightOptions = {
-  code: string;
-  lang: string;
-  themes: ShikiThemes;
-  resolvedTheme: 'light' | 'dark';
-  syntaxHighlighting: boolean;
-};
-
-export function useShikiHighlight({
-  code,
-  lang,
-  themes,
-  resolvedTheme,
-  syntaxHighlighting,
-}: UseShikiHighlightOptions): {highlightedCode: string; isLoading: boolean} {
-  const [highlightedCode, setHighlightedCode] = useState<string>('');
-  const [isLoading, setIsLoading] = useState(syntaxHighlighting);
-
-  useEffect(() => {
-    if (!syntaxHighlighting) {
-      setIsLoading(false);
-      return;
-    }
-
-    setIsLoading(true);
-    let cancelled = false;
-
-    const loadHighlightedCode = async () => {
-      try {
-        const {codeToHtml} = await import('shiki');
-
-        const html = await codeToHtml(code, {
-          lang,
-          themes: {
-            light: themes.light,
-            dark: themes.dark,
-          },
-          defaultColor: resolvedTheme === 'dark' ? 'dark' : 'light',
-        });
-
-        if (!cancelled) {
-          setHighlightedCode(html);
-          setIsLoading(false);
-        }
-      } catch {
-        if (!cancelled) {
-          setIsLoading(false);
-        }
-      }
-    };
-
-    loadHighlightedCode();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [code, lang, themes.light, themes.dark, resolvedTheme, syntaxHighlighting]);
-
-  return {highlightedCode, isLoading};
-}
-
-type UseShikiHighlightMultipleOptions = {
-  codes: Record<string, string>;
-  lang: string;
-  themes: ShikiThemes;
-  resolvedTheme: 'light' | 'dark';
-  syntaxHighlighting: boolean;
-};
-
-export function useShikiHighlightMultiple({
-  codes,
-  lang,
-  themes,
-  resolvedTheme,
-  syntaxHighlighting,
-}: UseShikiHighlightMultipleOptions): {
-  highlightedCodes: Record<string, string>;
-  isLoading: boolean;
-} {
-  const [highlightedCodes, setHighlightedCodes] = useState<Record<string, string>>({});
-  const [isLoading, setIsLoading] = useState(syntaxHighlighting);
-
-  useEffect(() => {
-    if (!syntaxHighlighting) {
-      setIsLoading(false);
-      return;
-    }
-
-    setIsLoading(true);
-    let cancelled = false;
-
-    const loadHighlightedCode = async () => {
-      try {
-        const {codeToHtml} = await import('shiki');
-        const newHighlightedCodes: Record<string, string> = {};
-
-        for (const [command, val] of Object.entries(codes)) {
-          if (cancelled) {
-            return;
-          }
-
-          const highlighted = await codeToHtml(val, {
-            lang,
-            themes: {
-              light: themes.light,
-              dark: themes.dark,
-            },
-            defaultColor: resolvedTheme === 'dark' ? 'dark' : 'light',
-          });
-
-          newHighlightedCodes[command] = highlighted;
-        }
-
-        if (!cancelled) {
-          setHighlightedCodes(newHighlightedCodes);
-          setIsLoading(false);
-        }
-      } catch {
-        if (!cancelled) {
-          setIsLoading(false);
-        }
-      }
-    };
-
-    loadHighlightedCode();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [resolvedTheme, lang, themes.light, themes.dark, codes, syntaxHighlighting]);
-
-  return {highlightedCodes, isLoading};
-}

package/src/hooks/useShikiStyleInjection.ts

@@ -1,34 +0,0 @@
-import {useEffect} from 'react';
-
-export function useShikiStyleInjection(syntaxHighlighting: boolean): void {
-  useEffect(() => {
-    if (!syntaxHighlighting) {
-      return;
-    }
-
-    const styleId = 'shiki-override-styles';
-    if (document.getElementById(styleId)) {
-      return;
-    }
-
-    const style = document.createElement('style');
-    style.id = styleId;
-    style.textContent = `
-      .shiki-override pre,
-      .shiki-override code,
-      .shiki-override pre *,
-      .shiki-override code * {
-        background: transparent !important;
-        font-family: "Commit Mono", monospace !important;
-      }
-    `;
-    document.head.appendChild(style);
-
-    return () => {
-      const existingStyle = document.getElementById(styleId);
-      if (existingStyle) {
-        existingStyle.remove();
-      }
-    };
-  }, [syntaxHighlighting]);
-}

package/src/hooks/useTheme.ts

@@ -1,10 +0,0 @@
-import {useContext} from 'react';
-import {ThemeProviderContext} from 'state/theme';
-
-export const useTheme = () => {
-  const context = useContext(ThemeProviderContext);
-
-  if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
-
-  return context;
-};

package/src/index.ts

@@ -1,4 +0,0 @@
-export {ShipfoxLoader} from 'shipfox-loader-react';
-export * from './components';
-export * from './hooks';
-export * from './utils';

package/src/onboarding/sign-in.stories.tsx

@@ -1,85 +0,0 @@
-import {argosScreenshot} from '@argos-ci/storybook/vitest';
-import type {Meta, StoryObj} from '@storybook/react';
-import {Avatar} from 'components/avatar';
-import {Button} from 'components/button';
-import {DotGrid} from 'components/dot-grid';
-import {Header, Text} from 'components/typography';
-
-const meta = {
-  title: 'Onboarding/Signin',
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  play: async (ctx) => {
-    await argosScreenshot(ctx, 'example-screenshot');
-  },
-  render: () => {
-    return (
-      <div className="flex min-h-screen items-center justify-center bg-background-subtle-base">
-        {/* Background illustration - simplified decorative element */}
-        <div
-          className="absolute w-[800px] max-w-[800px] h-[400px] top-0 left-1/2 -translate-x-1/2 translate-y-[-145px]"
-          style={{
-            maskImage:
-              'radial-gradient(ellipse 100% 125% at 50% 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 100%)',
-            WebkitMaskImage:
-              'radial-gradient(ellipse 100% 125% at 50% 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 100%)',
-          }}
-        >
-          <DotGrid
-            dotSize={2}
-            gap={20}
-            baseColor="#e63e00"
-            activeColor="#FF0076"
-            proximity={100}
-            shockRadius={8}
-            shockStrength={100}
-            resistance={500}
-            returnDuration={1.5}
-          />
-        </div>
-
-        {/* Main content */}
-        <div className="relative flex w-full max-w-[384px] flex-col items-center gap-32 px-24 pb-80 pt-24">
-          {/* Logo and title section */}
-          <div className="flex flex-col items-center gap-16">
-            <Avatar content="logo" size="xl" radius="rounded" logoName="shipfox" />
-            <div className="flex min-w-[128px] flex-col items-center gap-4 text-center">
-              <Header
-                variant="h1"
-                className="text-[28px] font-medium leading-[44px] text-foreground-neutral-base"
-              >
-                Connect to Shipfox
-              </Header>
-              <Text
-                size="sm"
-                className="text-sm font-normal leading-[24px] text-foreground-neutral-subtle"
-              >
-                Log in to access Shipfox.
-              </Text>
-            </div>
-          </div>
-
-          {/* Action buttons */}
-          <div className="flex w-full flex-col gap-20">
-            <Button variant="primary" size="md" iconLeft="google" className="w-full">
-              Continue with Google
-            </Button>
-            <Button variant="primary" size="md" iconLeft="microsoft" className="w-full">
-              Continue with Microsoft
-            </Button>
-            <Button variant="transparent" size="md" className="w-full">
-              Connect with Enterprise SSO
-            </Button>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};

package/src/state/theme.ts

@@ -1,15 +0,0 @@
-import {createContext} from 'react';
-
-export type Theme = 'dark' | 'light' | 'system';
-
-export type ThemeProviderState = {
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
-};
-
-const initialState: ThemeProviderState = {
-  theme: 'system',
-  setTheme: () => null,
-};
-
-export const ThemeProviderContext = createContext<ThemeProviderState>(initialState);

package/src/utils/avatar.ts

@@ -1,27 +0,0 @@
-const hashString = (str: string): number => {
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    const char = str.charCodeAt(i);
-    hash = (hash << 5) - hash + char;
-    hash = hash & hash;
-  }
-  return Math.abs(hash);
-};
-
-export const getPlaceholderImageUrl = (name?: string): string => {
-  const backgroundColors = ['BFDFFF', 'BFEAFF', 'CFBFFF', 'FFBFC3', 'FFEABF', 'E3E6EA', 'EAEAEA'];
-
-  const seed = name?.trim() || 'avatar';
-
-  const colorIndex = hashString(seed) % backgroundColors.length;
-  const backgroundColor = backgroundColors[colorIndex];
-
-  return `https://api.dicebear.com/9.x/micah/svg?backgroundColor=${backgroundColor}&seed=${encodeURIComponent(seed)}`;
-};
-
-export const getInitial = (name?: string): string => {
-  if (name) {
-    return name.trim()[0]?.toUpperCase() ?? 'L';
-  }
-  return 'L';
-};

package/src/utils/clipboard.ts

@@ -1,4 +0,0 @@
-export async function copyTextToClipboard(text: string) {
-  if ('clipboard' in navigator) return await navigator.clipboard.writeText(text);
-  return document.execCommand('copy', true, text);
-}

package/src/utils/cn.ts

@@ -1,6 +0,0 @@
-import {type ClassValue, clsx} from 'clsx';
-import {twMerge} from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}

package/src/utils/date.test.ts

@@ -1,119 +0,0 @@
-import {afterEach, beforeEach, describe, expect, it, vi} from '@shipfox/vitest/vi';
-import {
-  generateDurationShortcut,
-  intervalToNowFromDuration,
-  parseTextDurationShortcut,
-} from './date';
-
-describe('date utils', () => {
-  const now = new Date('2024-03-20T17:45:00Z');
-
-  beforeEach(() => {
-    vi.useFakeTimers({now});
-  });
-
-  afterEach(() => {
-    vi.runOnlyPendingTimers();
-    vi.useRealTimers();
-  });
-
-  describe('intervalToNowFromDuration', () => {
-    it('should return the interval for days', () => {
-      const result = intervalToNowFromDuration({days: 2});
-      expect(result).toEqual({
-        start: new Date('2024-03-18T17:45:00Z'),
-        end: new Date('2024-03-20T17:45:00Z'),
-      });
-    });
-
-    it('should return the interval for days rounded, when the options is given', () => {
-      const result = intervalToNowFromDuration({days: 2}, {attemptRounding: true});
-      expect(result).toEqual({
-        start: new Date('2024-03-18T00:00:00Z'),
-        end: new Date('2024-03-20T23:59:59.999Z'),
-      });
-    });
-
-    it('should not round the hours intervals, even when the options is given', () => {
-      const result = intervalToNowFromDuration({hours: 48}, {attemptRounding: true});
-      expect(result).toEqual({
-        start: new Date('2024-03-18T17:45:00Z'),
-        end: new Date('2024-03-20T17:45:00Z'),
-      });
-    });
-  });
-
-  describe('parseTextDurationShortcut', () => {
-    it('should parse a duration shortcut in seconds', () => {
-      const result = parseTextDurationShortcut('100s');
-      expect(result).toEqual({seconds: 100});
-    });
-
-    it('should parse a duration shortcut in minutes', () => {
-      const result = parseTextDurationShortcut('100m');
-      expect(result).toEqual({minutes: 100});
-    });
-
-    it('should parse a duration shortcut in hours', () => {
-      const result = parseTextDurationShortcut('100h');
-      expect(result).toEqual({hours: 100});
-    });
-
-    it('should parse a duration shortcut in days', () => {
-      const result = parseTextDurationShortcut('100d');
-      expect(result).toEqual({days: 100});
-    });
-
-    it('should parse a duration shortcut in weeks', () => {
-      const result = parseTextDurationShortcut('100w');
-      expect(result).toEqual({weeks: 100});
-    });
-
-    it('should parse a duration shortcut in months', () => {
-      const result = parseTextDurationShortcut('100mo');
-      expect(result).toEqual({months: 100});
-    });
-
-    it('should parse a duration shortcut in years', () => {
-      const result = parseTextDurationShortcut('100y');
-      expect(result).toEqual({years: 100});
-    });
-  });
-
-  describe('generateDurationShortcut', () => {
-    it('should generate a duration shortcut in seconds', () => {
-      const result = generateDurationShortcut({seconds: 100});
-      expect(result).toEqual('100s');
-    });
-
-    it('should generate a duration shortcut in minutes', () => {
-      const result = generateDurationShortcut({minutes: 100});
-      expect(result).toEqual('100m');
-    });
-
-    it('should generate a duration shortcut in hours', () => {
-      const result = generateDurationShortcut({hours: 100});
-      expect(result).toEqual('100h');
-    });
-
-    it('should generate a duration shortcut in days', () => {
-      const result = generateDurationShortcut({days: 100});
-      expect(result).toEqual('100d');
-    });
-
-    it('should generate a duration shortcut in weeks', () => {
-      const result = generateDurationShortcut({weeks: 100});
-      expect(result).toEqual('100w');
-    });
-
-    it('should generate a duration shortcut in months', () => {
-      const result = generateDurationShortcut({months: 100});
-      expect(result).toEqual('100mo');
-    });
-
-    it('should generate a duration shortcut in years', () => {
-      const result = generateDurationShortcut({years: 100});
-      expect(result).toEqual('100y');
-    });
-  });
-});

package/src/utils/date.ts

@@ -1,99 +0,0 @@
-import {
-  type Duration,
-  endOfDay,
-  formatDuration,
-  type NormalizedInterval,
-  startOfDay,
-  startOfMonth,
-  sub,
-} from 'date-fns';
-
-export function isStartOfDay(date: Date): boolean {
-  return date.getTime() === startOfDay(date).getTime();
-}
-
-export function isStartOfMonth(date: Date): boolean {
-  return date.getTime() === startOfMonth(date).getTime();
-}
-
-export function isEndOfDay(date: Date): boolean {
-  return date.getTime() === endOfDay(date).getTime();
-}
-
-export function humanizeDurationToNow(duration: Duration): string {
-  return `Past ${formatDuration(duration)}`;
-}
-
-export interface IntervalToNowFromDurationOptions {
-  /** When set, if an interval is given in a precise unit, it will be rounded to full days
-   *  (ex: 1 day, will generate intervals from midnight (d-1) to midnight (d))
-   *  Does not apply to units lower than day */
-  attemptRounding?: boolean;
-}
-
-export function intervalToNowFromDuration(
-  duration: Duration,
-  options?: IntervalToNowFromDurationOptions,
-): NormalizedInterval {
-  const now = new Date();
-  const interval = {
-    start: sub(now, duration),
-    end: now,
-  };
-  if (!options?.attemptRounding) return interval;
-  const units = Object.keys(duration);
-  if (units.length !== 1) return interval;
-  if (['hours', 'minutes', 'seconds'].includes(units[0])) return interval;
-  return {
-    start: startOfDay(interval.start),
-    end: endOfDay(interval.end),
-  };
-}
-
-const DURATION_SHORTCUTS: Record<keyof Duration, string> = {
-  years: 'y',
-  months: 'mo',
-  weeks: 'w',
-  days: 'd',
-  hours: 'h',
-  minutes: 'm',
-  seconds: 's',
-};
-
-const DURATION_SHORTCUTS_REVERSED: Record<string, keyof Duration> = Object.fromEntries(
-  Object.entries(DURATION_SHORTCUTS).map(([key, value]) => [value, key as keyof Duration]),
-);
-
-const DURATION_SHORTCUT_REGEX = new RegExp(
-  `^(\\d+)(${Object.keys(DURATION_SHORTCUTS_REVERSED).join('|')})$`,
-);
-
-export function generateDurationShortcut(duration: Duration): string {
-  const keys = Object.keys(duration) as (keyof Duration)[];
-  if (keys.length !== 1) return '';
-  const key = keys[0];
-  const value = duration[key];
-  return `${value}${DURATION_SHORTCUTS[key]}`;
-}
-
-export function parseTextDurationShortcut(text: string): Duration | undefined {
-  const match = text.match(DURATION_SHORTCUT_REGEX);
-  if (!match) return;
-  const [_, value, shortcut] = match;
-  const unit = DURATION_SHORTCUTS_REVERSED[shortcut];
-  return {[unit]: Number.parseInt(value, 10)};
-}
-
-const dateSplitterRefex = /[-\u2013]/;
-
-export function parseTextInterval(text: string): NormalizedInterval | undefined {
-  const durationShortcut = parseTextDurationShortcut(text);
-  if (durationShortcut) return intervalToNowFromDuration(durationShortcut);
-  const textDates = text.split(dateSplitterRefex).map((token) => token.trim());
-  if (textDates.length !== 2) return;
-  const start = new Date(textDates[0]);
-  const end = new Date(textDates[1]);
-  if (Number.isNaN(start.getTime())) return;
-  if (Number.isNaN(end.getTime())) return;
-  return {start, end};
-}