@fogg/bug-reporter 1.0.0

package/dist/index.d.cts

@@ -0,0 +1,331 @@
+import * as react from 'react';
+import { ComponentType, PropsWithChildren } from 'react';
+
+type StorageMode = "s3-presigned" | "local-public" | "proxy";
+type ReportEnvironment = "development" | "staging" | "production";
+type AssetType = "screenshot" | "recording" | "attachment";
+type FlowStep = "describe" | "screenshot" | "recording" | "review" | "submitting" | "success";
+type DockSide = "left" | "right" | "top" | "bottom";
+type LauncherPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";
+type ThemeMode = "dark" | "light";
+type FeatureFlags = {
+    screenshot?: boolean;
+    recording?: boolean;
+    annotations?: boolean;
+    consoleLogs?: boolean;
+    networkInfo?: boolean;
+};
+type ThemeConfig = {
+    primaryColor?: string;
+    position?: LauncherPosition;
+    zIndex?: number;
+    borderRadius?: string;
+};
+type StorageLimits = {
+    maxVideoSeconds?: number;
+    maxVideoBytes?: number;
+    maxScreenshotBytes?: number;
+};
+type UploadFile = {
+    id: string;
+    name: string;
+    type: AssetType;
+    mimeType: string;
+    size: number;
+};
+type UploadInstruction = {
+    id: string;
+    method: "PUT" | "POST";
+    uploadUrl: string;
+    headers?: Record<string, string>;
+    fields?: Record<string, string>;
+    key?: string;
+    publicUrl?: string;
+    type: AssetType;
+};
+type AssetReference = {
+    id: string;
+    type: AssetType;
+    url: string;
+    key?: string;
+    mimeType?: string;
+    size?: number;
+};
+interface StorageProvider {
+    prepareUploads(files: UploadFile[]): Promise<UploadInstruction[]>;
+    upload(instruction: UploadInstruction, blob: Blob, onProgress?: (progress: number) => void): Promise<AssetReference>;
+}
+type CapturedAsset = {
+    id: string;
+    type: AssetType;
+    blob: Blob;
+    previewUrl: string;
+    mimeType: string;
+    filename: string;
+    size: number;
+};
+type DiagnosticsSnapshot = {
+    url: string;
+    referrer: string;
+    timestamp: string;
+    timezone: string;
+    viewport: {
+        width: number;
+        height: number;
+        pixelRatio: number;
+    };
+    browser: string;
+    os: string;
+    language: string;
+    userAgent: string;
+    userAgentData?: {
+        brands?: Array<{
+            brand: string;
+            version: string;
+        }>;
+        mobile?: boolean;
+        platform?: string;
+    };
+    appVersion?: string;
+    environment?: ReportEnvironment;
+    projectId?: string;
+    logs?: ConsoleLogEntry[];
+    requests?: NetworkRequestEntry[];
+    navigationTiming?: {
+        domComplete?: number;
+        loadEventEnd?: number;
+        responseEnd?: number;
+    };
+};
+type ConsoleLogEntry = {
+    level: "log" | "info" | "warn" | "error";
+    message: string;
+    timestamp: string;
+};
+type DiagnosticsPreview = {
+    errorLogs: ConsoleLogEntry[];
+    failedRequests: NetworkRequestEntry[];
+};
+type NetworkRequestEntry = {
+    transport: "fetch" | "xhr";
+    method: string;
+    url: string;
+    status?: number;
+    ok?: boolean;
+    durationMs: number;
+    timestamp: string;
+    error?: string;
+};
+type ReportDraft = {
+    title: string;
+    description: string;
+    stepsToReproduce: string;
+    expectedBehavior: string;
+    actualBehavior: string;
+};
+type Reporter = {
+    id?: string;
+    name?: string;
+    email?: string;
+    role?: string;
+    ip?: string;
+    anonymous: boolean;
+};
+type CustomFormProps = {
+    attributes: Record<string, unknown>;
+    setAttributes: (next: Record<string, unknown>) => void;
+    updateAttribute: (key: string, value: unknown) => void;
+};
+type CustomFormComponent = ComponentType<CustomFormProps>;
+type BugReportPayload = {
+    issue: {
+        title: string;
+        description: string;
+        projectId?: string;
+        environment?: ReportEnvironment;
+        appVersion?: string;
+        assets: AssetReference[];
+    };
+    context: {
+        url: string;
+        referrer: string;
+        timestamp: string;
+        timezone: string;
+        viewport: {
+            width: number;
+            height: number;
+            pixelRatio: number;
+        };
+        client: {
+            browser: string;
+            os: string;
+            language: string;
+            userAgent: string;
+        };
+        userAgentData?: DiagnosticsSnapshot["userAgentData"];
+        performance: {
+            navigationTiming?: DiagnosticsSnapshot["navigationTiming"];
+        };
+        logs?: ConsoleLogEntry[];
+        requests?: NetworkRequestEntry[];
+    };
+    reporter: Reporter;
+    attributes: Record<string, unknown>;
+};
+type BugReportResponse = {
+    id?: string;
+    message?: string;
+    [key: string]: unknown;
+};
+type BugReporterErrorCode = "VALIDATION_ERROR" | "CAPTURE_ERROR" | "RECORDING_ERROR" | "UPLOAD_ERROR" | "SUBMIT_ERROR" | "PERMISSION_DENIED" | "ABORTED";
+declare class BugReporterError extends Error {
+    readonly code: BugReporterErrorCode;
+    readonly cause?: unknown;
+    constructor(code: BugReporterErrorCode, message: string, cause?: unknown);
+}
+type BugReporterConfig = {
+    apiEndpoint: string;
+    projectId?: string;
+    appVersion?: string;
+    environment?: ReportEnvironment;
+    storage?: {
+        mode: StorageMode;
+        s3?: {
+            presignEndpoint: string;
+            publicBaseUrl?: string;
+        };
+        local?: {
+            uploadEndpoint: string;
+            publicBaseUrl?: string;
+        };
+        proxy?: {
+            uploadEndpoint: string;
+        };
+        limits?: StorageLimits;
+    };
+    auth?: {
+        headers?: Record<string, string>;
+        withCredentials?: boolean;
+    };
+    theme?: ThemeConfig;
+    features?: FeatureFlags;
+    user?: {
+        id?: string;
+        email?: string;
+        name?: string;
+        role?: string;
+        ip?: string;
+        anonymous?: boolean;
+    };
+    attributes?: Record<string, unknown>;
+    privacy?: {
+        maskSelectors?: string[];
+        redactTextPatterns?: Array<string | RegExp>;
+    };
+    diagnostics?: {
+        consoleBufferSize?: number;
+        requestBufferSize?: number;
+    };
+    hooks?: {
+        beforeSubmit?: (payload: BugReportPayload) => Promise<BugReportPayload | null> | BugReportPayload | null;
+        onSuccess?: (response: BugReportResponse) => void;
+        onError?: (error: BugReporterError) => void;
+    };
+};
+type BugReporterState = {
+    isOpen: boolean;
+    dockSide: DockSide;
+    step: FlowStep;
+    draft: ReportDraft;
+    attributes: Record<string, unknown>;
+    assets: CapturedAsset[];
+    diagnostics?: DiagnosticsSnapshot;
+    uploadProgress: number;
+    isSubmitting: boolean;
+    error?: string;
+};
+type BugReporterContextValue = {
+    config: RequiredBugReporterConfig;
+    state: BugReporterState;
+    open: () => void;
+    close: () => void;
+    reset: () => void;
+    setDockSide: (dockSide: DockSide) => void;
+    setStep: (step: FlowStep) => void;
+    updateDraft: (next: Partial<ReportDraft>) => void;
+    setAttributes: (next: Record<string, unknown>) => void;
+    updateAttribute: (key: string, value: unknown) => void;
+    setScreenshot: (asset?: CapturedAsset) => void;
+    setRecording: (asset?: CapturedAsset) => void;
+    submit: () => Promise<void>;
+    retrySubmit: () => Promise<void>;
+    getDiagnosticsPreview: () => DiagnosticsPreview;
+};
+type RequiredBugReporterConfig = {
+    apiEndpoint: string;
+    projectId?: string;
+    appVersion?: string;
+    environment?: ReportEnvironment;
+    storage: {
+        mode: StorageMode;
+        s3?: {
+            presignEndpoint: string;
+            publicBaseUrl?: string;
+        };
+        local?: {
+            uploadEndpoint: string;
+            publicBaseUrl?: string;
+        };
+        proxy?: {
+            uploadEndpoint: string;
+        };
+        limits: Required<StorageLimits>;
+    };
+    auth: {
+        headers: Record<string, string>;
+        withCredentials: boolean;
+    };
+    theme: Required<ThemeConfig>;
+    features: Required<FeatureFlags>;
+    user?: {
+        id?: string;
+        email?: string;
+        name?: string;
+        role?: string;
+        ip?: string;
+        anonymous?: boolean;
+    };
+    attributes: Record<string, unknown>;
+    privacy: {
+        maskSelectors: string[];
+        redactTextPatterns: Array<string | RegExp>;
+    };
+    diagnostics: {
+        consoleBufferSize: number;
+        requestBufferSize: number;
+    };
+    hooks: {
+        beforeSubmit?: (payload: BugReportPayload) => Promise<BugReportPayload | null> | BugReportPayload | null;
+        onSuccess?: (response: BugReportResponse) => void;
+        onError?: (error: BugReporterError) => void;
+    };
+};
+
+type BugReporterProps = {
+    config: BugReporterConfig;
+    CustomForm?: CustomFormComponent;
+    launcherPosition?: LauncherPosition;
+    launcherText?: string;
+    themeMode?: ThemeMode;
+    buttonColor?: string;
+};
+declare function BugReporter({ config, CustomForm, launcherPosition, launcherText, themeMode, buttonColor }: BugReporterProps): react.JSX.Element;
+
+type BugReporterProviderProps = PropsWithChildren<{
+    config: BugReporterConfig;
+}>;
+declare function BugReporterProvider({ config, children }: BugReporterProviderProps): react.JSX.Element;
+
+declare function useBugReporter(): BugReporterContextValue;
+
+export { type AssetReference, type BugReportPayload, type BugReportResponse, BugReporter, type BugReporterConfig, type BugReporterContextValue, BugReporterError, BugReporterProvider, type BugReporterState, type CapturedAsset, type CustomFormProps, type DiagnosticsSnapshot, type DockSide, type FeatureFlags, type LauncherPosition, type StorageMode, type StorageProvider, type ThemeConfig, type ThemeMode, type UploadFile, type UploadInstruction, useBugReporter };

package/dist/index.d.ts

@@ -0,0 +1,331 @@
+import * as react from 'react';
+import { ComponentType, PropsWithChildren } from 'react';
+
+type StorageMode = "s3-presigned" | "local-public" | "proxy";
+type ReportEnvironment = "development" | "staging" | "production";
+type AssetType = "screenshot" | "recording" | "attachment";
+type FlowStep = "describe" | "screenshot" | "recording" | "review" | "submitting" | "success";
+type DockSide = "left" | "right" | "top" | "bottom";
+type LauncherPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";
+type ThemeMode = "dark" | "light";
+type FeatureFlags = {
+    screenshot?: boolean;
+    recording?: boolean;
+    annotations?: boolean;
+    consoleLogs?: boolean;
+    networkInfo?: boolean;
+};
+type ThemeConfig = {
+    primaryColor?: string;
+    position?: LauncherPosition;
+    zIndex?: number;
+    borderRadius?: string;
+};
+type StorageLimits = {
+    maxVideoSeconds?: number;
+    maxVideoBytes?: number;
+    maxScreenshotBytes?: number;
+};
+type UploadFile = {
+    id: string;
+    name: string;
+    type: AssetType;
+    mimeType: string;
+    size: number;
+};
+type UploadInstruction = {
+    id: string;
+    method: "PUT" | "POST";
+    uploadUrl: string;
+    headers?: Record<string, string>;
+    fields?: Record<string, string>;
+    key?: string;
+    publicUrl?: string;
+    type: AssetType;
+};
+type AssetReference = {
+    id: string;
+    type: AssetType;
+    url: string;
+    key?: string;
+    mimeType?: string;
+    size?: number;
+};
+interface StorageProvider {
+    prepareUploads(files: UploadFile[]): Promise<UploadInstruction[]>;
+    upload(instruction: UploadInstruction, blob: Blob, onProgress?: (progress: number) => void): Promise<AssetReference>;
+}
+type CapturedAsset = {
+    id: string;
+    type: AssetType;
+    blob: Blob;
+    previewUrl: string;
+    mimeType: string;
+    filename: string;
+    size: number;
+};
+type DiagnosticsSnapshot = {
+    url: string;
+    referrer: string;
+    timestamp: string;
+    timezone: string;
+    viewport: {
+        width: number;
+        height: number;
+        pixelRatio: number;
+    };
+    browser: string;
+    os: string;
+    language: string;
+    userAgent: string;
+    userAgentData?: {
+        brands?: Array<{
+            brand: string;
+            version: string;
+        }>;
+        mobile?: boolean;
+        platform?: string;
+    };
+    appVersion?: string;
+    environment?: ReportEnvironment;
+    projectId?: string;
+    logs?: ConsoleLogEntry[];
+    requests?: NetworkRequestEntry[];
+    navigationTiming?: {
+        domComplete?: number;
+        loadEventEnd?: number;
+        responseEnd?: number;
+    };
+};
+type ConsoleLogEntry = {
+    level: "log" | "info" | "warn" | "error";
+    message: string;
+    timestamp: string;
+};
+type DiagnosticsPreview = {
+    errorLogs: ConsoleLogEntry[];
+    failedRequests: NetworkRequestEntry[];
+};
+type NetworkRequestEntry = {
+    transport: "fetch" | "xhr";
+    method: string;
+    url: string;
+    status?: number;
+    ok?: boolean;
+    durationMs: number;
+    timestamp: string;
+    error?: string;
+};
+type ReportDraft = {
+    title: string;
+    description: string;
+    stepsToReproduce: string;
+    expectedBehavior: string;
+    actualBehavior: string;
+};
+type Reporter = {
+    id?: string;
+    name?: string;
+    email?: string;
+    role?: string;
+    ip?: string;
+    anonymous: boolean;
+};
+type CustomFormProps = {
+    attributes: Record<string, unknown>;
+    setAttributes: (next: Record<string, unknown>) => void;
+    updateAttribute: (key: string, value: unknown) => void;
+};
+type CustomFormComponent = ComponentType<CustomFormProps>;
+type BugReportPayload = {
+    issue: {
+        title: string;
+        description: string;
+        projectId?: string;
+        environment?: ReportEnvironment;
+        appVersion?: string;
+        assets: AssetReference[];
+    };
+    context: {
+        url: string;
+        referrer: string;
+        timestamp: string;
+        timezone: string;
+        viewport: {
+            width: number;
+            height: number;
+            pixelRatio: number;
+        };
+        client: {
+            browser: string;
+            os: string;
+            language: string;
+            userAgent: string;
+        };
+        userAgentData?: DiagnosticsSnapshot["userAgentData"];
+        performance: {
+            navigationTiming?: DiagnosticsSnapshot["navigationTiming"];
+        };
+        logs?: ConsoleLogEntry[];
+        requests?: NetworkRequestEntry[];
+    };
+    reporter: Reporter;
+    attributes: Record<string, unknown>;
+};
+type BugReportResponse = {
+    id?: string;
+    message?: string;
+    [key: string]: unknown;
+};
+type BugReporterErrorCode = "VALIDATION_ERROR" | "CAPTURE_ERROR" | "RECORDING_ERROR" | "UPLOAD_ERROR" | "SUBMIT_ERROR" | "PERMISSION_DENIED" | "ABORTED";
+declare class BugReporterError extends Error {
+    readonly code: BugReporterErrorCode;
+    readonly cause?: unknown;
+    constructor(code: BugReporterErrorCode, message: string, cause?: unknown);
+}
+type BugReporterConfig = {
+    apiEndpoint: string;
+    projectId?: string;
+    appVersion?: string;
+    environment?: ReportEnvironment;
+    storage?: {
+        mode: StorageMode;
+        s3?: {
+            presignEndpoint: string;
+            publicBaseUrl?: string;
+        };
+        local?: {
+            uploadEndpoint: string;
+            publicBaseUrl?: string;
+        };
+        proxy?: {
+            uploadEndpoint: string;
+        };
+        limits?: StorageLimits;
+    };
+    auth?: {
+        headers?: Record<string, string>;
+        withCredentials?: boolean;
+    };
+    theme?: ThemeConfig;
+    features?: FeatureFlags;
+    user?: {
+        id?: string;
+        email?: string;
+        name?: string;
+        role?: string;
+        ip?: string;
+        anonymous?: boolean;
+    };
+    attributes?: Record<string, unknown>;
+    privacy?: {
+        maskSelectors?: string[];
+        redactTextPatterns?: Array<string | RegExp>;
+    };
+    diagnostics?: {
+        consoleBufferSize?: number;
+        requestBufferSize?: number;
+    };
+    hooks?: {
+        beforeSubmit?: (payload: BugReportPayload) => Promise<BugReportPayload | null> | BugReportPayload | null;
+        onSuccess?: (response: BugReportResponse) => void;
+        onError?: (error: BugReporterError) => void;
+    };
+};
+type BugReporterState = {
+    isOpen: boolean;
+    dockSide: DockSide;
+    step: FlowStep;
+    draft: ReportDraft;
+    attributes: Record<string, unknown>;
+    assets: CapturedAsset[];
+    diagnostics?: DiagnosticsSnapshot;
+    uploadProgress: number;
+    isSubmitting: boolean;
+    error?: string;
+};
+type BugReporterContextValue = {
+    config: RequiredBugReporterConfig;
+    state: BugReporterState;
+    open: () => void;
+    close: () => void;
+    reset: () => void;
+    setDockSide: (dockSide: DockSide) => void;
+    setStep: (step: FlowStep) => void;
+    updateDraft: (next: Partial<ReportDraft>) => void;
+    setAttributes: (next: Record<string, unknown>) => void;
+    updateAttribute: (key: string, value: unknown) => void;
+    setScreenshot: (asset?: CapturedAsset) => void;
+    setRecording: (asset?: CapturedAsset) => void;
+    submit: () => Promise<void>;
+    retrySubmit: () => Promise<void>;
+    getDiagnosticsPreview: () => DiagnosticsPreview;
+};
+type RequiredBugReporterConfig = {
+    apiEndpoint: string;
+    projectId?: string;
+    appVersion?: string;
+    environment?: ReportEnvironment;
+    storage: {
+        mode: StorageMode;
+        s3?: {
+            presignEndpoint: string;
+            publicBaseUrl?: string;
+        };
+        local?: {
+            uploadEndpoint: string;
+            publicBaseUrl?: string;
+        };
+        proxy?: {
+            uploadEndpoint: string;
+        };
+        limits: Required<StorageLimits>;
+    };
+    auth: {
+        headers: Record<string, string>;
+        withCredentials: boolean;
+    };
+    theme: Required<ThemeConfig>;
+    features: Required<FeatureFlags>;
+    user?: {
+        id?: string;
+        email?: string;
+        name?: string;
+        role?: string;
+        ip?: string;
+        anonymous?: boolean;
+    };
+    attributes: Record<string, unknown>;
+    privacy: {
+        maskSelectors: string[];
+        redactTextPatterns: Array<string | RegExp>;
+    };
+    diagnostics: {
+        consoleBufferSize: number;
+        requestBufferSize: number;
+    };
+    hooks: {
+        beforeSubmit?: (payload: BugReportPayload) => Promise<BugReportPayload | null> | BugReportPayload | null;
+        onSuccess?: (response: BugReportResponse) => void;
+        onError?: (error: BugReporterError) => void;
+    };
+};
+
+type BugReporterProps = {
+    config: BugReporterConfig;
+    CustomForm?: CustomFormComponent;
+    launcherPosition?: LauncherPosition;
+    launcherText?: string;
+    themeMode?: ThemeMode;
+    buttonColor?: string;
+};
+declare function BugReporter({ config, CustomForm, launcherPosition, launcherText, themeMode, buttonColor }: BugReporterProps): react.JSX.Element;
+
+type BugReporterProviderProps = PropsWithChildren<{
+    config: BugReporterConfig;
+}>;
+declare function BugReporterProvider({ config, children }: BugReporterProviderProps): react.JSX.Element;
+
+declare function useBugReporter(): BugReporterContextValue;
+
+export { type AssetReference, type BugReportPayload, type BugReportResponse, BugReporter, type BugReporterConfig, type BugReporterContextValue, BugReporterError, BugReporterProvider, type BugReporterState, type CapturedAsset, type CustomFormProps, type DiagnosticsSnapshot, type DockSide, type FeatureFlags, type LauncherPosition, type StorageMode, type StorageProvider, type ThemeConfig, type ThemeMode, type UploadFile, type UploadInstruction, useBugReporter };