@trackany-device/components 1.0.0

package/src/elements/SmsChallengeForm.tsx

@@ -0,0 +1,104 @@
+import type { FormEvent } from 'react';
+import { Button } from '../controls/Button';
+import { FormField } from '../controls/FormField';
+import { Input } from '../controls/Input';
+
+export interface SmsChallengeFormErrors {
+    otp?: string;
+}
+
+interface Props {
+    otp: string;
+    errors: SmsChallengeFormErrors;
+    processing?: boolean;
+    resendProcessing?: boolean;
+    otpPhone?: string;
+    otpSent?: boolean;
+    status?: string;
+    sendError?: string;
+    logoutUrl?: string;
+    onOtpChange: (value: string) => void;
+    onSubmit: (e: FormEvent) => void;
+    onResend: () => void;
+}
+
+export function SmsChallengeForm({
+    otp,
+    errors,
+    processing = false,
+    resendProcessing = false,
+    otpPhone,
+    otpSent = true,
+    status,
+    sendError,
+    logoutUrl = '/logout',
+    onOtpChange,
+    onSubmit,
+    onResend,
+}: Props) {
+    return (
+        <div className="space-y-5">
+            {status && (
+                <div className="rounded-lg bg-green-50 px-4 py-2.5 text-sm font-medium text-green-700">
+                    {status}
+                </div>
+            )}
+            {sendError && (
+                <div className="rounded-lg bg-red-50 px-4 py-2.5 text-sm font-medium text-red-700">
+                    {sendError}
+                </div>
+            )}
+            {otpSent && !sendError && otpPhone && (
+                <p className="text-sm text-muted-foreground">
+                    A 6-digit code was sent to{' '}
+                    <span className="font-medium text-foreground">{otpPhone}</span>.
+                    Enter it below to continue.
+                </p>
+            )}
+
+            <form onSubmit={onSubmit} className="space-y-5">
+                <FormField label="Verification code" htmlFor="sms-otp">
+                    <Input
+                        id="sms-otp"
+                        type="text"
+                        inputMode="numeric"
+                        pattern="[0-9]*"
+                        maxLength={6}
+                        value={otp}
+                        onChange={e => onOtpChange(e.target.value.replace(/\D/g, '').slice(0, 6))}
+                        placeholder="000000"
+                        error={errors.otp}
+                        autoFocus
+                        autoComplete="one-time-code"
+                        required
+                        className="text-center font-mono text-xl tracking-[0.5em] placeholder:tracking-normal"
+                    />
+                </FormField>
+
+                <Button type="submit" disabled={otp.length !== 6} loading={processing} fullWidth>
+                    Verify
+                </Button>
+            </form>
+
+            <div className="flex flex-col items-center gap-2 text-center text-sm text-muted-foreground">
+                <span>
+                    Didn't receive a code?{' '}
+                    <button
+                        type="button"
+                        onClick={onResend}
+                        disabled={resendProcessing}
+                        className="font-medium text-primary hover:underline disabled:opacity-50"
+                    >
+                        {resendProcessing ? 'Sending…' : 'Resend'}
+                    </button>
+                </span>
+                <a
+                    href={logoutUrl}
+                    className="text-xs text-muted-foreground/70 underline underline-offset-4 hover:text-muted-foreground"
+                >
+                    Log out
+                </a>
+            </div>
+        </div>
+    );
+}

package/src/elements/VehicleCard.tsx

@@ -0,0 +1,73 @@
+import { cn } from '../lib/utils';
+import { Card, CardContent } from '../components/ui/card';
+import { Badge, badgeVariants } from '../components/ui/badge';
+
+export type VehicleStatus = 'online' | 'offline' | 'idle' | 'moving' | 'stopped';
+
+export interface VehicleCardData {
+    id: string;
+    registration: string;
+    make?: string;
+    model?: string;
+    status: VehicleStatus;
+    driver?: string;
+    lastSeen?: string;
+    location?: string;
+    speed?: number;
+    href?: string;
+}
+
+const STATUS_CONFIG: Record<VehicleStatus, { label: string; className: string }> = {
+    online:  { label: 'Online',  className: 'bg-success/10 text-success border-success/20' },
+    moving:  { label: 'Moving',  className: 'bg-primary/10 text-primary border-primary/20' },
+    idle:    { label: 'Idle',    className: 'bg-warning/10 text-warning border-warning/20' },
+    stopped: { label: 'Stopped', className: 'bg-muted text-muted-foreground border-border' },
+    offline: { label: 'Offline', className: 'bg-danger-subtle text-destructive border-destructive/20' },
+};
+
+interface VehicleCardProps {
+    vehicle: VehicleCardData;
+    className?: string;
+    onClick?: (vehicle: VehicleCardData) => void;
+}
+
+export function VehicleCard({ vehicle, className, onClick }: VehicleCardProps) {
+    const status = STATUS_CONFIG[vehicle.status];
+    const content = (
+        <Card className={cn('transition-shadow hover:shadow-md cursor-pointer', className)} onClick={() => onClick?.(vehicle)}>
+            <CardContent className="p-4">
+                <div className="flex items-start justify-between gap-3">
+                    <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-1">
+                            <span className="font-semibold text-mono text-sm">{vehicle.registration}</span>
+                            <span className={cn('inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium', status.className)}>
+                                {status.label}
+                            </span>
+                        </div>
+                        {(vehicle.make || vehicle.model) && (
+                            <p className="text-xs text-muted-foreground truncate">{[vehicle.make, vehicle.model].filter(Boolean).join(' ')}</p>
+                        )}
+                        {vehicle.driver && (
+                            <p className="text-xs text-muted-foreground mt-1 truncate">Driver: {vehicle.driver}</p>
+                        )}
+                        {vehicle.location && (
+                            <p className="text-xs text-muted-foreground mt-0.5 truncate">{vehicle.location}</p>
+                        )}
+                    </div>
+                    {vehicle.speed !== undefined && (
+                        <div className="text-right shrink-0">
+                            <p className="text-lg font-bold text-mono">{vehicle.speed}</p>
+                            <p className="text-xs text-muted-foreground">km/h</p>
+                        </div>
+                    )}
+                </div>
+                {vehicle.lastSeen && (
+                    <p className="text-xs text-muted-foreground mt-2 border-t border-border pt-2">{vehicle.lastSeen}</p>
+                )}
+            </CardContent>
+        </Card>
+    );
+
+    if (vehicle.href) return <a href={vehicle.href} className="block no-underline">{content}</a>;
+    return content;
+}

package/src/elements/VerifyEmailForm.tsx

@@ -0,0 +1,39 @@
+import type { FormEvent } from 'react';
+import { Button } from '../controls/Button';
+
+interface Props {
+    processing?: boolean;
+    status?: string;
+    logoutUrl?: string;
+    onSubmit: (e: FormEvent) => void;
+}
+
+export function VerifyEmailForm({ processing = false, status, logoutUrl = '/logout', onSubmit }: Props) {
+    return (
+        <div className="space-y-6 text-center">
+            <p className="text-sm text-muted-foreground">
+                Before continuing, could you verify your email address by clicking on the link we
+                just emailed to you? If you didn't receive the email, we will gladly send you another.
+            </p>
+
+            {status === 'verification-link-sent' && (
+                <p className="text-sm font-medium text-green-600">
+                    A new verification link has been sent to the email address you provided during registration.
+                </p>
+            )}
+
+            <form onSubmit={onSubmit}>
+                <Button type="submit" loading={processing} variant="secondary">
+                    Resend verification email
+                </Button>
+            </form>
+
+            <a
+                href={logoutUrl}
+                className="block text-sm text-muted-foreground hover:text-foreground underline underline-offset-4"
+            >
+                Log out
+            </a>
+        </div>
+    );
+}

package/src/hooks/use-appearance.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+import { useSyncExternalStore } from 'react';
+
+export type ResolvedAppearance = 'light' | 'dark';
+export type Appearance = ResolvedAppearance | 'system';
+
+export type UseAppearanceReturn = {
+    readonly appearance: Appearance;
+    readonly resolvedAppearance: ResolvedAppearance;
+    readonly updateAppearance: (mode: Appearance) => void;
+};
+
+const listeners = new Set<() => void>();
+let currentAppearance: Appearance = 'system';
+
+const prefersDark = (): boolean => {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+};
+
+const setCookie = (name: string, value: string, days = 365): void => {
+    if (typeof document === 'undefined') {
+        return;
+    }
+
+    const maxAge = days * 24 * 60 * 60;
+    document.cookie = `${name}=${value};path=/;max-age=${maxAge};SameSite=Lax`;
+};
+
+const getStoredAppearance = (): Appearance => {
+    if (typeof window === 'undefined') {
+        return 'system';
+    }
+
+    return (localStorage.getItem('appearance') as Appearance) || 'system';
+};
+
+const isDarkMode = (appearance: Appearance): boolean => {
+    return appearance === 'dark' || (appearance === 'system' && prefersDark());
+};
+
+const applyTheme = (appearance: Appearance): void => {
+    if (typeof document === 'undefined') {
+        return;
+    }
+
+    const isDark = isDarkMode(appearance);
+
+    document.documentElement.classList.toggle('dark', isDark);
+    document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
+};
+
+const subscribe = (callback: () => void) => {
+    listeners.add(callback);
+
+    return () => listeners.delete(callback);
+};
+
+const notify = (): void => listeners.forEach((listener) => listener());
+
+const mediaQuery = (): MediaQueryList | null => {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)');
+};
+
+const handleSystemThemeChange = (): void => applyTheme(currentAppearance);
+
+export function initializeTheme(): void {
+    if (typeof window === 'undefined') {
+        return;
+    }
+
+    if (!localStorage.getItem('appearance')) {
+        localStorage.setItem('appearance', 'system');
+        setCookie('appearance', 'system');
+    }
+
+    currentAppearance = getStoredAppearance();
+    applyTheme(currentAppearance);
+
+    // Set up system theme change listener
+    mediaQuery()?.addEventListener('change', handleSystemThemeChange);
+}
+
+export function useAppearance(): UseAppearanceReturn {
+    const appearance: Appearance = useSyncExternalStore(
+        subscribe,
+        () => currentAppearance,
+        () => 'system',
+    );
+
+    const resolvedAppearance: ResolvedAppearance = isDarkMode(appearance)
+        ? 'dark'
+        : 'light';
+
+    const updateAppearance = (mode: Appearance): void => {
+        currentAppearance = mode;
+
+        // Store in localStorage for client-side persistence...
+        localStorage.setItem('appearance', mode);
+
+        // Store in cookie for SSR...
+        setCookie('appearance', mode);
+
+        applyTheme(mode);
+        notify();
+    };
+
+    return { appearance, resolvedAppearance, updateAppearance } as const;
+}

package/src/hooks/use-applied-theme.ts

@@ -0,0 +1,98 @@
+'use client';
+
+/**
+ * useAppliedTheme — controls the `data-theme` attribute on <html>.
+ *
+ * The server-side resolved scheme is set in app.blade.php from
+ * ThemeResolver. This hook lets the UI-Kit preview page (and only that
+ * page) override it client-side via `?theme=NAME`, persisting the
+ * override in localStorage so reloads keep the choice.
+ *
+ * Normal pages do NOT call apply() — they just render whatever the
+ * server provided. Only the UI-Kit page provides the switcher UI.
+ */
+import * as React from 'react';
+
+const STORAGE_KEY = 'ui-kit-theme-override';
+
+declare global {
+    interface Window {
+        AppConfig?: {
+            theme: string;
+            appName: string;
+            logoUrl: string | null;
+            schemes: string[];
+        };
+    }
+}
+
+function knownSchemes(): string[] {
+    return window.AppConfig?.schemes ?? [];
+}
+
+export function initializeAppliedTheme(): void {
+    if (typeof window === 'undefined') {
+        return;
+    }
+
+    const params = new URLSearchParams(window.location.search);
+    const fromQuery = params.get('theme');
+    const fromStorage = window.localStorage.getItem(STORAGE_KEY);
+
+    const candidate = fromQuery ?? fromStorage;
+
+    if (!candidate) {
+        return;
+    }
+
+    if (knownSchemes().includes(candidate)) {
+        document.documentElement.dataset.theme = candidate;
+
+        if (fromQuery) {
+            window.localStorage.setItem(STORAGE_KEY, candidate);
+        }
+    }
+}
+
+export function useAppliedTheme(): {
+    theme: string;
+    schemes: string[];
+    apply: (name: string) => void;
+    reset: () => void;
+} {
+    const [theme, setTheme] = React.useState<string>(() => {
+        if (typeof window === 'undefined') {
+            return 'default';
+        }
+
+        return (
+            document.documentElement.dataset.theme ??
+            window.AppConfig?.theme ??
+            'default'
+        );
+    });
+
+    const schemes = React.useMemo(() => window.AppConfig?.schemes ?? [], []);
+
+    const apply = React.useCallback(
+        (name: string) => {
+            if (!schemes.includes(name)) {
+                return;
+            }
+
+            document.documentElement.dataset.theme = name;
+            window.localStorage.setItem(STORAGE_KEY, name);
+            setTheme(name);
+        },
+        [schemes],
+    );
+
+    const reset = React.useCallback(() => {
+        window.localStorage.removeItem(STORAGE_KEY);
+        const serverTheme = window.AppConfig?.theme ?? 'default';
+        document.documentElement.dataset.theme = serverTheme;
+        setTheme(serverTheme);
+    }, []);
+
+    return { theme, schemes, apply, reset };
+}

package/src/hooks/use-clipboard.ts

@@ -0,0 +1,34 @@
+'use client';
+
+// Credit: https://usehooks-ts.com/
+import { useState } from 'react';
+
+export type CopiedValue = string | null;
+export type CopyFn = (text: string) => Promise<boolean>;
+export type UseClipboardReturn = [CopiedValue, CopyFn];
+
+export function useClipboard(): UseClipboardReturn {
+    const [copiedText, setCopiedText] = useState<CopiedValue>(null);
+
+    const copy: CopyFn = async (text) => {
+        if (!navigator?.clipboard) {
+            console.warn('Clipboard not supported');
+
+            return false;
+        }
+
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopiedText(text);
+
+            return true;
+        } catch (error) {
+            console.warn('Copy failed', error);
+            setCopiedText(null);
+
+            return false;
+        }
+    };
+
+    return [copiedText, copy];
+}

package/src/hooks/use-current-url.ts

@@ -0,0 +1,83 @@
+import type { PlatformLinkProps } from '../platform/types';
+import { usePlatformUrl } from '../platform/context';
+import { toUrl } from '../lib/utils';
+
+export type IsCurrentUrlFn = (
+    urlToCheck: NonNullable<PlatformLinkProps['href']>,
+    currentUrl?: string,
+    startsWith?: boolean,
+) => boolean;
+
+export type IsCurrentOrParentUrlFn = (
+    urlToCheck: NonNullable<PlatformLinkProps['href']>,
+    currentUrl?: string,
+) => boolean;
+
+export type WhenCurrentUrlFn = <TIfTrue, TIfFalse = null>(
+    urlToCheck: NonNullable<PlatformLinkProps['href']>,
+    ifTrue: TIfTrue,
+    ifFalse?: TIfFalse,
+) => TIfTrue | TIfFalse;
+
+export type UseCurrentUrlReturn = {
+    currentUrl: string;
+    isCurrentUrl: IsCurrentUrlFn;
+    isCurrentOrParentUrl: IsCurrentOrParentUrlFn;
+    whenCurrentUrl: WhenCurrentUrlFn;
+};
+
+export function useCurrentUrl(): UseCurrentUrlReturn {
+    const rawUrl = usePlatformUrl();
+    const currentUrlPath = new URL(
+        rawUrl,
+        typeof window !== 'undefined'
+            ? window.location.origin
+            : 'http://localhost',
+    ).pathname;
+
+    const isCurrentUrl: IsCurrentUrlFn = (
+        urlToCheck: NonNullable<PlatformLinkProps['href']>,
+        currentUrl?: string,
+        startsWith: boolean = false,
+    ) => {
+        const urlToCompare = currentUrl ?? currentUrlPath;
+        const urlString = toUrl(urlToCheck);
+
+        const comparePath = (path: string): boolean =>
+            startsWith ? urlToCompare.startsWith(path) : path === urlToCompare;
+
+        if (!urlString.startsWith('http')) {
+            return comparePath(urlString);
+        }
+
+        try {
+            const absoluteUrl = new URL(urlString);
+
+            return comparePath(absoluteUrl.pathname);
+        } catch {
+            return false;
+        }
+    };
+
+    const isCurrentOrParentUrl: IsCurrentOrParentUrlFn = (
+        urlToCheck: NonNullable<PlatformLinkProps['href']>,
+        currentUrl?: string,
+    ) => {
+        return isCurrentUrl(urlToCheck, currentUrl, true);
+    };
+
+    const whenCurrentUrl: WhenCurrentUrlFn = <TIfTrue, TIfFalse = null>(
+        urlToCheck: NonNullable<PlatformLinkProps['href']>,
+        ifTrue: TIfTrue,
+        ifFalse: TIfFalse = null as TIfFalse,
+    ): TIfTrue | TIfFalse => {
+        return isCurrentUrl(urlToCheck) ? ifTrue : ifFalse;
+    };
+
+    return {
+        currentUrl: currentUrlPath,
+        isCurrentUrl,
+        isCurrentOrParentUrl,
+        whenCurrentUrl,
+    };
+}

package/src/hooks/use-dark-mode.ts

@@ -0,0 +1,48 @@
+'use client';
+
+import * as React from 'react';
+
+const STORAGE_KEY = 'ui-dark-mode';
+
+/**
+ * Controls the `dark` class on <html>. Persists the user's choice in
+ * localStorage, falling back to the system colour-scheme preference on
+ * first visit.
+ *
+ * Used by the public site header's day/night toggle. Keeps the choice
+ * tab-wide so it survives Inertia navigations.
+ */
+export function useDarkMode() {
+    const [isDark, setIsDark] = React.useState<boolean>(() => {
+        if (typeof window === 'undefined') {
+            return false;
+        }
+
+        const stored = window.localStorage.getItem(STORAGE_KEY);
+
+        if (stored === 'true') {
+            return true;
+        }
+
+        if (stored === 'false') {
+            return false;
+        }
+
+        return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    });
+
+    React.useEffect(() => {
+        if (typeof document === 'undefined') {
+            return;
+        }
+
+        document.documentElement.classList.toggle('dark', isDark);
+        window.localStorage.setItem(STORAGE_KEY, String(isDark));
+    }, [isDark]);
+
+    return {
+        isDark,
+        toggle: React.useCallback(() => setIsDark((v) => !v), []),
+        set: setIsDark,
+    };
+}

package/src/hooks/use-flash-toast.ts

@@ -0,0 +1,29 @@
+'use client';
+
+import { useEffect } from 'react';
+import { toast } from 'sonner';
+import type { FlashToast } from '../types/ui';
+
+interface FlashRouter {
+    on: (event: string, callback: (e: unknown) => void) => () => void;
+}
+
+/**
+ * Listens for Inertia flash events and shows a Sonner toast.
+ * Pass Inertia's `router` from the consuming app:
+ *
+ *   import { router } from '@inertiajs/react';
+ *   useFlashToast(router);
+ *
+ * In non-Inertia environments omit the argument — the hook is a no-op.
+ */
+export function useFlashToast(router?: FlashRouter): void {
+    useEffect(() => {
+        if (!router) return;
+        return router.on('flash', (event) => {
+            const flash = (event as CustomEvent).detail?.flash;
+            const data = flash?.toast as FlashToast | undefined;
+            if (data) toast[data.type](data.message);
+        });
+    }, [router]);
+}

package/src/hooks/use-initials.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { useCallback } from 'react';
+
+export type GetInitialsFn = (fullName: string) => string;
+
+export function useInitials(): GetInitialsFn {
+    return useCallback((fullName: string): string => {
+        const names = fullName.trim().split(' ');
+
+        if (names.length === 0) {
+            return '';
+        }
+
+        if (names.length === 1) {
+            return names[0].charAt(0).toUpperCase();
+        }
+
+        const firstInitial = names[0].charAt(0);
+        const lastInitial = names[names.length - 1].charAt(0);
+
+        return `${firstInitial}${lastInitial}`.toUpperCase();
+    }, []);
+}

package/src/hooks/use-mobile-navigation.ts

@@ -0,0 +1,12 @@
+'use client';
+
+import { useCallback } from 'react';
+
+export type CleanupFn = () => void;
+
+export function useMobileNavigation(): CleanupFn {
+    return useCallback(() => {
+        // Remove pointer-events style from body...
+        document.body.style.removeProperty('pointer-events');
+    }, []);
+}