flikkui 0.2.0-beta.1 → 0.2.0-beta.4

package/dist/components/core/RetryBoundary/RetryBoundary.js

@@ -1,154 +0,0 @@
-import React__default, { Component, useState, useEffect } from 'react';
-import { XMarkIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
-import { Button } from '../Button/Button.js';
-import { shouldRetry, calculateRetryDelay } from '../../../utils/retryUtils.js';
-import { normalizeError } from '../../../utils/streamingErrors.js';
-import { retryBoundaryTheme } from './RetryBoundary.theme.js';
-
-/**
- * RetryBoundary Component
- * Error boundary with exponential backoff retry
- */
-/**
- * Default fallback UI component
- */
-const DefaultFallback = ({ error, attempt, maxAttempts, retryIn, retry, reset, }) => {
-    const theme = retryBoundaryTheme;
-    const hasMoreRetries = attempt < maxAttempts;
-    return (React__default.createElement("div", { className: theme.container },
-        React__default.createElement("div", { className: "flex flex-col items-start gap-2 text-[var(--color-danger)]" },
-            React__default.createElement("div", { className: "text-2xl rounded-full p-3  mb-3 w-fit glass-effect shadow-xl shadow-black/5" },
-                React__default.createElement(XMarkIcon, { className: "size-5" })),
-            React__default.createElement("span", { className: "text-base font-semibold" }, "Something went wrong")),
-        React__default.createElement("p", { className: theme.errorMessage }, error.message),
-        retryIn > 0 && hasMoreRetries && (React__default.createElement("p", { className: theme.countdown },
-            "Retrying in ",
-            retryIn,
-            "s... (Attempt ",
-            attempt + 1,
-            " of ",
-            maxAttempts,
-            ")")),
-        React__default.createElement("div", { className: "flex items-center gap-2 mt-6" },
-            hasMoreRetries ? (React__default.createElement(Button, { onClick: retry, size: "sm", variant: "filled", color: "dark" },
-                React__default.createElement(ArrowPathIcon, { className: "size-4" }),
-                "Retry Now")) : (React__default.createElement("p", { className: "text-xs text-[var(--color-text-muted)]" }, "Max retries reached")),
-            React__default.createElement(Button, { onClick: reset, size: "sm", color: "neutral" }, "Dismiss"))));
-};
-/**
- * Wrapper component to handle retry countdown and state
- */
-const RetryFallbackWrapper = ({ error, attempt, maxAttempts, retryDelay, onRetry, onReset, fallback, className, }) => {
-    const [countdown, setCountdown] = useState(Math.ceil(retryDelay / 1000));
-    const hasMoreRetries = attempt < maxAttempts;
-    // Countdown timer
-    useEffect(() => {
-        if (!hasMoreRetries || retryDelay === 0)
-            return;
-        setCountdown(Math.ceil(retryDelay / 1000));
-        const interval = setInterval(() => {
-            setCountdown((prev) => {
-                if (prev <= 1) {
-                    clearInterval(interval);
-                    onRetry();
-                    return 0;
-                }
-                return prev - 1;
-            });
-        }, 1000);
-        return () => clearInterval(interval);
-    }, [retryDelay, hasMoreRetries, onRetry]);
-    const fallbackProps = {
-        error,
-        attempt,
-        maxAttempts,
-        retryIn: countdown,
-        retry: onRetry,
-        reset: onReset,
-    };
-    // Custom fallback
-    if (fallback) {
-        if (typeof fallback === "function") {
-            return React__default.createElement("div", { className: className }, fallback(fallbackProps));
-        }
-        return React__default.createElement("div", { className: className }, fallback);
-    }
-    // Default fallback
-    return (React__default.createElement("div", { className: className },
-        React__default.createElement(DefaultFallback, { ...fallbackProps })));
-};
-/**
- * RetryBoundary - Error boundary with exponential backoff retry
- *
- * @example
- * <RetryBoundary
- *   retry={{ maxAttempts: 3, initialDelay: 1000 }}
- *   onMaxRetriesReached={(error) => logError(error)}
- * >
- *   <AsyncComponent />
- * </RetryBoundary>
- */
-class RetryBoundary extends Component {
-    constructor(props) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        super(props);
-        this.handleRetry = () => {
-            const { onRetry } = this.props;
-            const newAttempt = this.state.attempt + 1;
-            onRetry === null || onRetry === void 0 ? void 0 : onRetry(newAttempt);
-            this.setState({
-                error: null,
-                attempt: newAttempt,
-                retryDelay: 0,
-            });
-        };
-        this.handleReset = () => {
-            this.setState({
-                error: null,
-                attempt: 0,
-                retryDelay: 0,
-            });
-        };
-        this.state = {
-            error: null,
-            attempt: 0,
-            retryDelay: 0,
-        };
-        this.retryConfig = {
-            maxAttempts: (_b = (_a = props.retry) === null || _a === void 0 ? void 0 : _a.maxAttempts) !== null && _b !== void 0 ? _b : 3,
-            initialDelay: (_d = (_c = props.retry) === null || _c === void 0 ? void 0 : _c.initialDelay) !== null && _d !== void 0 ? _d : 1000,
-            backoffMultiplier: (_f = (_e = props.retry) === null || _e === void 0 ? void 0 : _e.backoffMultiplier) !== null && _f !== void 0 ? _f : 2,
-            maxDelay: (_h = (_g = props.retry) === null || _g === void 0 ? void 0 : _g.maxDelay) !== null && _h !== void 0 ? _h : 10000,
-            shouldRetry: (_j = props.retry) === null || _j === void 0 ? void 0 : _j.shouldRetry,
-        };
-    }
-    static getDerivedStateFromError(error) {
-        return { error };
-    }
-    componentDidCatch(error, errorInfo) {
-        const { attempt } = this.state;
-        const { onError, onMaxRetriesReached } = this.props;
-        // Normalize error for retry check
-        const streamingError = normalizeError(error);
-        const canRetry = shouldRetry(streamingError, attempt, this.retryConfig);
-        onError === null || onError === void 0 ? void 0 : onError(error, attempt);
-        if (canRetry) {
-            const delay = calculateRetryDelay(attempt, this.retryConfig);
-            this.setState({ retryDelay: delay });
-        }
-        else {
-            onMaxRetriesReached === null || onMaxRetriesReached === void 0 ? void 0 : onMaxRetriesReached(error);
-        }
-    }
-    render() {
-        var _a;
-        const { children, fallback, className } = this.props;
-        const { error, attempt, retryDelay } = this.state;
-        if (error) {
-            return (React__default.createElement(RetryFallbackWrapper, { error: error, attempt: attempt, maxAttempts: (_a = this.retryConfig.maxAttempts) !== null && _a !== void 0 ? _a : 3, retryDelay: retryDelay, onRetry: this.handleRetry, onReset: this.handleReset, fallback: fallback, className: className }));
-        }
-        return children;
-    }
-}
-
-export { RetryBoundary };

package/dist/components/core/RetryBoundary/RetryBoundary.theme.d.ts

@@ -1,2 +0,0 @@
-import type { RetryBoundaryTheme } from "./RetryBoundary.types";
-export declare const retryBoundaryTheme: RetryBoundaryTheme;

package/dist/components/core/RetryBoundary/RetryBoundary.theme.js

@@ -1,7 +0,0 @@
-const retryBoundaryTheme = {
-    container: "flex flex-col items-start justify-center p-6 rounded-[var(--form-rounded)] bg-[var(--color-danger-50)]/50 border border-[var(--color-danger-100)]",
-    errorMessage: "text-sm text-[var(--color-text-secondary)] text-center max-w-md mt-1",
-    countdown: "text-xs text-[var(--color-text-muted)] tabular-nums mt-3",
-};
-
-export { retryBoundaryTheme };

package/dist/components/core/RetryBoundary/RetryBoundary.types.d.ts

@@ -1,51 +0,0 @@
-import type { RetryConfig } from "../../../utils/retryUtils";
-/**
- * Props for custom retry fallback render function
- */
-export interface RetryFallbackProps {
-    /** The error that was caught */
-    error: Error;
-    /** Current retry attempt (0-indexed) */
-    attempt: number;
-    /** Maximum retry attempts */
-    maxAttempts: number;
-    /** Seconds until auto-retry (0 if not auto-retrying) */
-    retryIn: number;
-    /** Manually trigger a retry */
-    retry: () => void;
-    /** Reset error state completely */
-    reset: () => void;
-}
-/**
- * Props for RetryBoundary component
- */
-export interface RetryBoundaryProps {
-    /** Content to render when no error */
-    children: React.ReactNode;
-    /**
-     * Custom fallback UI or render function
-     * If not provided, uses default retry UI
-     */
-    fallback?: React.ReactNode | ((props: RetryFallbackProps) => React.ReactNode);
-    /** Retry configuration */
-    retry?: RetryConfig;
-    /** Called when an error is caught */
-    onError?: (error: Error, attempt: number) => void;
-    /** Called when a retry is triggered */
-    onRetry?: (attempt: number) => void;
-    /** Called when max retries is reached */
-    onMaxRetriesReached?: (error: Error) => void;
-    /** Additional class names */
-    className?: string;
-}
-/**
- * Theme configuration for RetryBoundary
- */
-export interface RetryBoundaryTheme {
-    /** Container styles */
-    container?: string;
-    /** Error message styles */
-    errorMessage?: string;
-    /** Retry countdown styles */
-    countdown?: string;
-}

package/dist/components/core/RetryBoundary/index.d.ts

@@ -1,3 +0,0 @@
-export { RetryBoundary } from "./RetryBoundary";
-export type { RetryBoundaryProps, RetryFallbackProps, RetryBoundaryTheme, } from "./RetryBoundary.types";
-export { retryBoundaryTheme } from "./RetryBoundary.theme";

package/dist/components/forms/OptimisticForm/OptimisticForm.d.ts

@@ -1,33 +0,0 @@
-/**
- * OptimisticForm Component
- * Form wrapper with optimistic updates and auto-rollback
- */
-import React from "react";
-import type { OptimisticFormProps } from "./OptimisticForm.types";
-/**
- * OptimisticForm - Form wrapper with optimistic updates and auto-rollback
- *
- * @example
- * // Basic usage
- * <OptimisticForm
- *   onSubmit={async (data) => api.createUser(data)}
- *   onOptimisticUpdate={(data) => addUserToList({ ...data, id: 'temp', isPending: true })}
- *   onSuccess={(response) => updateUserInList(response)}
- *   onError={() => removeUserFromList('temp')}
- * >
- *   <Input name="name" />
- *   <Button type="submit">Create User</Button>
- * </OptimisticForm>
- *
- * // With render prop for dynamic UI
- * <OptimisticForm onSubmit={handleSubmit}>
- *   {({ isPending, isError, error }) => (
- *     <>
- *       <Input name="email" disabled={isPending} />
- *       {isError && <Alert variant="error">{error?.message}</Alert>}
- *       <Button type="submit" loading={isPending}>Submit</Button>
- *     </>
- *   )}
- * </OptimisticForm>
- */
-export declare function OptimisticForm<TData, TFormData extends Record<string, unknown>>({ onSubmit, onOptimisticUpdate, onSuccess, onError, onRollback, retry, offlineQueue, resetOnSuccess, children, className, id, disabled, }: OptimisticFormProps<TData, TFormData>): React.ReactElement;

package/dist/components/forms/OptimisticForm/OptimisticForm.js

@@ -1,87 +0,0 @@
-import React__default, { useRef, useCallback } from 'react';
-import { cn } from '../../../utils/cn.js';
-import { useOptimisticMutation } from '../../../hooks/useOptimisticMutation.js';
-import { optimisticFormTheme } from './OptimisticForm.theme.js';
-
-/**
- * OptimisticForm Component
- * Form wrapper with optimistic updates and auto-rollback
- */
-/**
- * OptimisticForm - Form wrapper with optimistic updates and auto-rollback
- *
- * @example
- * // Basic usage
- * <OptimisticForm
- *   onSubmit={async (data) => api.createUser(data)}
- *   onOptimisticUpdate={(data) => addUserToList({ ...data, id: 'temp', isPending: true })}
- *   onSuccess={(response) => updateUserInList(response)}
- *   onError={() => removeUserFromList('temp')}
- * >
- *   <Input name="name" />
- *   <Button type="submit">Create User</Button>
- * </OptimisticForm>
- *
- * // With render prop for dynamic UI
- * <OptimisticForm onSubmit={handleSubmit}>
- *   {({ isPending, isError, error }) => (
- *     <>
- *       <Input name="email" disabled={isPending} />
- *       {isError && <Alert variant="error">{error?.message}</Alert>}
- *       <Button type="submit" loading={isPending}>Submit</Button>
- *     </>
- *   )}
- * </OptimisticForm>
- */
-function OptimisticForm({ onSubmit, onOptimisticUpdate, onSuccess, onError, onRollback, retry, offlineQueue = false, resetOnSuccess = false, children, className, id, disabled = false, }) {
-    const theme = optimisticFormTheme;
-    const formRef = useRef(null);
-    // Use optimistic mutation hook
-    const { mutate, status, error, isOptimistic, isRolledBack, isQueued } = useOptimisticMutation(onSubmit, {
-        onMutate: (data) => data, // Pass form data as context
-        onOptimisticUpdate: onOptimisticUpdate
-            ? (data, _context) => onOptimisticUpdate(data)
-            : undefined,
-        onSuccess: (response, formData, _context) => {
-            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(response, formData);
-            // Reset form if configured
-            if (resetOnSuccess && formRef.current) {
-                formRef.current.reset();
-            }
-        },
-        onError: (err, formData, _context) => {
-            onError === null || onError === void 0 ? void 0 : onError(err, formData);
-            onRollback === null || onRollback === void 0 ? void 0 : onRollback(formData);
-        },
-        retry,
-        offlineQueue,
-    });
-    // Handle form submission
-    const handleSubmit = useCallback((event) => {
-        event.preventDefault();
-        if (disabled)
-            return;
-        const formElement = event.currentTarget;
-        const formData = new FormData(formElement);
-        // Convert FormData to object
-        const data = Object.fromEntries(formData.entries());
-        mutate(data);
-    }, [mutate, disabled]);
-    // Create form state for render prop
-    const formState = {
-        status,
-        isPending: status === "pending",
-        isOptimistic,
-        isSuccess: status === "success",
-        isError: status === "error",
-        isRolledBack,
-        isQueued,
-        error,
-        submittedData: null, // We don't track this currently
-    };
-    // Determine children to render
-    const content = typeof children === "function" ? children(formState) : children;
-    return (React__default.createElement("form", { ref: formRef, id: id, onSubmit: handleSubmit, className: cn(theme.base, status === "pending" && theme.pending, status === "error" && theme.error, status === "success" && theme.success, className), "aria-busy": status === "pending", "aria-disabled": disabled }, content));
-}
-
-export { OptimisticForm };

package/dist/components/forms/OptimisticForm/OptimisticForm.theme.d.ts

@@ -1,2 +0,0 @@
-import type { OptimisticFormTheme } from "./OptimisticForm.types";
-export declare const optimisticFormTheme: OptimisticFormTheme;

package/dist/components/forms/OptimisticForm/OptimisticForm.theme.js

@@ -1,8 +0,0 @@
-const optimisticFormTheme = {
-    base: "transition-opacity duration-200",
-    pending: "opacity-70 pointer-events-none",
-    error: "",
-    success: "",
-};
-
-export { optimisticFormTheme };

package/dist/components/forms/OptimisticForm/OptimisticForm.types.d.ts

@@ -1,74 +0,0 @@
-import type { RetryConfig } from "../../../utils/retryUtils";
-import type { OptimisticError } from "../../../utils/optimisticErrors";
-/**
- * Form submission status
- */
-export type OptimisticFormStatus = "idle" | "pending" | "success" | "error";
-/**
- * State passed to render prop children
- */
-export interface OptimisticFormState<TFormData = unknown> {
-    /** Current form status */
-    status: OptimisticFormStatus;
-    /** True when form is submitting */
-    isPending: boolean;
-    /** True when showing optimistic state */
-    isOptimistic: boolean;
-    /** True when submission succeeded */
-    isSuccess: boolean;
-    /** True when submission failed */
-    isError: boolean;
-    /** True when rollback occurred */
-    isRolledBack: boolean;
-    /** True when queued for offline */
-    isQueued: boolean;
-    /** Error if submission failed */
-    error: OptimisticError | null;
-    /** Last submitted form data */
-    submittedData: TFormData | null;
-}
-/**
- * Props for OptimisticForm component
- */
-export interface OptimisticFormProps<TData, TFormData> {
-    /** Form submission handler - returns server response */
-    onSubmit: (data: TFormData) => Promise<TData>;
-    /** Called immediately to apply optimistic update */
-    onOptimisticUpdate?: (data: TFormData) => void;
-    /** Called on successful submission */
-    onSuccess?: (response: TData, formData: TFormData) => void;
-    /** Called when submission fails */
-    onError?: (error: OptimisticError, formData: TFormData) => void;
-    /** Called when rollback is executed */
-    onRollback?: (formData: TFormData) => void;
-    /** Retry configuration */
-    retry?: RetryConfig;
-    /** Queue submissions when offline */
-    offlineQueue?: boolean;
-    /** Reset form on successful submission */
-    resetOnSuccess?: boolean;
-    /**
-     * Form content - can be static or render prop
-     * Render prop receives current form state
-     */
-    children: React.ReactNode | ((state: OptimisticFormState<TFormData>) => React.ReactNode);
-    /** Additional class names for form element */
-    className?: string;
-    /** Form ID */
-    id?: string;
-    /** Whether the form is disabled */
-    disabled?: boolean;
-}
-/**
- * Theme configuration for OptimisticForm
- */
-export interface OptimisticFormTheme {
-    /** Base form styles */
-    base?: string;
-    /** Styles when submitting */
-    pending?: string;
-    /** Styles when error */
-    error?: string;
-    /** Styles when success */
-    success?: string;
-}

package/dist/components/forms/OptimisticForm/index.d.ts

@@ -1,3 +0,0 @@
-export { OptimisticForm } from "./OptimisticForm";
-export type { OptimisticFormProps, OptimisticFormState, OptimisticFormStatus, OptimisticFormTheme, } from "./OptimisticForm.types";
-export { optimisticFormTheme } from "./OptimisticForm.theme";

package/dist/hooks/useOptimisticMutation.d.ts

@@ -1,109 +0,0 @@
-/**
- * useOptimisticMutation Hook
- * Provides instant UI updates with automatic rollback on error
- */
-import { OptimisticError } from "../utils/optimisticErrors";
-import { type RetryConfig } from "../utils/retryUtils";
-import { type ActionQueue, type AddActionOptions } from "../utils/actionQueue";
-/**
- * Mutation state
- */
-export type MutationStatus = "idle" | "pending" | "success" | "error";
-/**
- * Options for useOptimisticMutation hook
- */
-export interface OptimisticMutationOptions<TData, TVariables, TContext = unknown> {
-    /**
-     * Called before mutation - return context for rollback
-     * Context is passed to onSuccess, onError, and onSettled
-     */
-    onMutate?: (variables: TVariables) => TContext | Promise<TContext>;
-    /**
-     * Apply optimistic update immediately
-     * Called synchronously before the mutation starts
-     */
-    onOptimisticUpdate?: (variables: TVariables, context: TContext) => void;
-    /**
-     * Called on success - replace optimistic data with real data
-     */
-    onSuccess?: (data: TData, variables: TVariables, context: TContext) => void;
-    /**
-     * Called on error - rollback optimistic update
-     * Use context to restore previous state
-     */
-    onError?: (error: OptimisticError, variables: TVariables, context: TContext) => void;
-    /**
-     * Called after success or error (cleanup)
-     */
-    onSettled?: (data: TData | undefined, error: OptimisticError | null, variables: TVariables, context: TContext) => void;
-    /**
-     * Retry configuration for failed mutations
-     */
-    retry?: RetryConfig;
-    /**
-     * Queue mutation when offline instead of failing immediately
-     */
-    offlineQueue?: boolean;
-    /**
-     * Custom action queue instance (defaults to global queue)
-     */
-    actionQueue?: ActionQueue;
-    /**
-     * Options for queued action (label, description)
-     */
-    queueOptions?: Omit<AddActionOptions, "maxRetries">;
-}
-/**
- * Return value from useOptimisticMutation hook
- */
-export interface OptimisticMutationReturn<TData, TVariables> {
-    /** Trigger the mutation */
-    mutate: (variables: TVariables) => void;
-    /** Trigger the mutation and return a Promise */
-    mutateAsync: (variables: TVariables) => Promise<TData>;
-    /** Response data from the last successful mutation */
-    data: TData | undefined;
-    /** Error from the last failed mutation */
-    error: OptimisticError | null;
-    /** Current mutation status */
-    status: MutationStatus;
-    /** True when no mutation is in progress or completed */
-    isIdle: boolean;
-    /** True when mutation is in progress */
-    isPending: boolean;
-    /** True when showing optimistic data (mutation in progress) */
-    isOptimistic: boolean;
-    /** True when mutation completed successfully */
-    isSuccess: boolean;
-    /** True when mutation failed */
-    isError: boolean;
-    /** True when error occurred and rollback was applied */
-    isRolledBack: boolean;
-    /** True when mutation was queued for offline processing */
-    isQueued: boolean;
-    /** Reset the mutation state */
-    reset: () => void;
-}
-/**
- * Hook for optimistic UI mutations with automatic rollback
- *
- * @example
- * const { mutate, isOptimistic, isPending } = useOptimisticMutation(
- *   async (data) => api.createMessage(data),
- *   {
- *     onOptimisticUpdate: (newMessage) => {
- *       setMessages(prev => [...prev, { ...newMessage, id: 'temp-id', isPending: true }]);
- *     },
- *     onSuccess: (response) => {
- *       setMessages(prev => prev.map(m =>
- *         m.id === 'temp-id' ? { ...response, isPending: false } : m
- *       ));
- *     },
- *     onError: (error) => {
- *       setMessages(prev => prev.filter(m => m.id !== 'temp-id'));
- *       toast.error('Failed to send message');
- *     }
- *   }
- * );
- */
-export declare function useOptimisticMutation<TData, TVariables, TContext = unknown>(mutationFn: (variables: TVariables) => Promise<TData>, options?: OptimisticMutationOptions<TData, TVariables, TContext>): OptimisticMutationReturn<TData, TVariables>;