@checkflow/sdk 1.0.1

package/dist/types.d.ts

@@ -0,0 +1,299 @@
+/**
+ * CheckFlow SDK Types
+ */
+export interface CheckFlowOptions {
+    /** API endpoint URL (default: https://api.checkflow.io) */
+    apiUrl?: string;
+    /** Project ID for feedback association */
+    projectId?: string;
+    /** Enable/disable the floating feedback button */
+    showWidget?: boolean;
+    /** Widget position */
+    widgetPosition?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** Custom widget button text */
+    widgetButtonText?: string;
+    /** Primary color for the widget (hex format) */
+    primaryColor?: string;
+    /** Enable automatic error capture */
+    captureErrors?: boolean;
+    /** Enable console log capture */
+    captureConsole?: boolean;
+    /** Enable network request capture */
+    captureNetwork?: boolean;
+    /** Enable performance metrics capture */
+    capturePerformance?: boolean;
+    /** Enable session recording */
+    captureSessionRecording?: boolean;
+    /** Privacy configuration for automatic PII masking */
+    privacy?: {
+        enabled?: boolean;
+        autoMask?: {
+            emails?: boolean;
+            creditCards?: boolean;
+            phoneNumbers?: boolean;
+            passwords?: boolean;
+        };
+        excludeSelectors?: string[];
+    };
+    /** Maximum console entries to capture */
+    maxConsoleEntries?: number;
+    /** Maximum network entries to capture */
+    maxNetworkEntries?: number;
+    /** User identification */
+    user?: UserInfo;
+    /** Custom metadata to include with all feedbacks */
+    metadata?: Record<string, any>;
+    /** Callback before feedback is submitted */
+    beforeSubmit?: (feedback: FeedbackData) => FeedbackData | false;
+    /** Callback after feedback is submitted */
+    onSubmit?: (result: SubmitResult) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+    /** Enable debug mode */
+    debug?: boolean;
+    /** Custom CSS for widget */
+    customStyles?: string;
+    /** Localization */
+    locale?: 'en' | 'fr' | 'es' | 'de';
+    /** Custom translations */
+    translations?: Partial<Translations>;
+    /** Enable analytics tracking */
+    enableAnalytics?: boolean;
+    /** Analytics configuration */
+    analytics?: {
+        trackClicks?: boolean;
+        trackScrolling?: boolean;
+        trackFormInteractions?: boolean;
+        trackErrors?: boolean;
+        trackPerformance?: boolean;
+        batchSize?: number;
+        batchTimeout?: number;
+        debug?: boolean;
+    };
+}
+export interface UserInfo {
+    id?: string;
+    email?: string;
+    name?: string;
+    avatar?: string;
+    [key: string]: any;
+}
+export type FeedbackType = 'bug' | 'feature_request' | 'improvement' | 'question' | 'other';
+export type FeedbackPriority = 'low' | 'medium' | 'high' | 'critical';
+export interface FeedbackData {
+    /** Feedback title */
+    title: string;
+    /** Detailed description */
+    description?: string;
+    /** Feedback type */
+    type: FeedbackType;
+    /** Priority level */
+    priority?: FeedbackPriority;
+    /** Tags/labels */
+    tags?: string[];
+    /** User info override */
+    user?: UserInfo;
+    /** Custom metadata */
+    metadata?: Record<string, any>;
+    /** Include screenshot */
+    includeScreenshot?: boolean;
+    /** Include console logs */
+    includeConsoleLogs?: boolean;
+    /** Include network logs */
+    includeNetworkLogs?: boolean;
+    /** Include session recording */
+    includeSessionRecording?: boolean;
+    /** Annotations on screenshot */
+    annotations?: Annotation[];
+}
+export interface Annotation {
+    type: 'rectangle' | 'arrow' | 'text' | 'highlight';
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    color?: string;
+    text?: string;
+}
+export interface CaptureOptions {
+    /** Capture full page or viewport only */
+    fullPage?: boolean;
+    /** Screenshot quality (1-100) */
+    quality?: number;
+    /** Delay before capture (ms) */
+    delay?: number;
+    /** Elements to hide (CSS selectors) */
+    hideElements?: string[];
+    /** Elements to mask (CSS selectors) - replaces content with placeholder */
+    maskElements?: string[];
+    /** Include console logs */
+    includeConsole?: boolean;
+    /** Include network logs */
+    includeNetwork?: boolean;
+    /** Include performance metrics */
+    includePerformance?: boolean;
+}
+export interface CaptureResult {
+    /** Base64 encoded screenshot */
+    screenshot?: string;
+    /** Screenshot URL (after upload) */
+    screenshotUrl?: string;
+    /** Console log entries */
+    consoleLogs?: ConsoleEntry[];
+    /** Network request entries */
+    networkLogs?: NetworkEntry[];
+    /** Performance metrics */
+    performance?: PerformanceMetrics;
+    /** Page context */
+    context: PageContext;
+    /** Captured at timestamp */
+    capturedAt: string;
+}
+export interface ConsoleEntry {
+    level: 'log' | 'info' | 'warn' | 'error' | 'debug';
+    message: string;
+    timestamp: string;
+    stack?: string;
+}
+export interface NetworkEntry {
+    url: string;
+    method: string;
+    status?: number;
+    statusText?: string;
+    duration?: number;
+    size?: number;
+    type?: string;
+    timestamp: string;
+    error?: string;
+}
+export interface PerformanceMetrics {
+    /** Page load time (ms) */
+    loadTime?: number;
+    /** DOM content loaded time (ms) */
+    domContentLoaded?: number;
+    /** First contentful paint (ms) */
+    firstContentfulPaint?: number;
+    /** Largest contentful paint (ms) */
+    largestContentfulPaint?: number;
+    /** Time to interactive (ms) */
+    timeToInteractive?: number;
+    /** Cumulative layout shift */
+    cumulativeLayoutShift?: number;
+    /** First input delay (ms) */
+    firstInputDelay?: number;
+    /** Memory usage (MB) */
+    memoryUsage?: number;
+}
+export interface PageContext {
+    /** Current URL */
+    url: string;
+    /** Page title */
+    title: string;
+    /** Viewport dimensions */
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** User agent string */
+    userAgent: string;
+    /** Browser info */
+    browser: {
+        name: string;
+        version: string;
+    };
+    /** Operating system */
+    os: {
+        name: string;
+        version: string;
+    };
+    /** Device type */
+    deviceType: 'desktop' | 'tablet' | 'mobile';
+    /** Screen resolution */
+    screenResolution: {
+        width: number;
+        height: number;
+    };
+    /** Pixel ratio */
+    pixelRatio: number;
+    /** Language/locale */
+    language: string;
+    /** Timezone */
+    timezone: string;
+    /** Referrer */
+    referrer?: string;
+}
+export interface ErrorInfo {
+    message: string;
+    stack?: string;
+    type: string;
+    filename?: string;
+    lineno?: number;
+    colno?: number;
+    timestamp: string;
+    context?: PageContext;
+}
+export interface SubmitResult {
+    success: boolean;
+    feedbackId?: string;
+    shortId?: string;
+    screenshotUrl?: string;
+    videoUrl?: string;
+    message?: string;
+    error?: string;
+}
+export interface APIResponse<T = any> {
+    success: boolean;
+    data?: T;
+    error?: string;
+    statusCode?: number;
+}
+export interface WidgetConfig {
+    position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    buttonText: string;
+    buttonIcon?: string;
+    primaryColor?: string;
+    textColor?: string;
+    zIndex?: number;
+}
+export interface WidgetState {
+    isOpen: boolean;
+    isMinimized: boolean;
+    isCapturing: boolean;
+    isSubmitting: boolean;
+    captureResult?: CaptureResult;
+    error?: string;
+}
+export interface Translations {
+    feedbackButton: string;
+    titleLabel: string;
+    titlePlaceholder: string;
+    descriptionLabel: string;
+    descriptionPlaceholder: string;
+    typeLabel: string;
+    priorityLabel: string;
+    typeBug: string;
+    typeFeature: string;
+    typeImprovement: string;
+    typeQuestion: string;
+    typeOther: string;
+    priorityLow: string;
+    priorityMedium: string;
+    priorityHigh: string;
+    priorityCritical: string;
+    submitButton: string;
+    cancelButton: string;
+    captureButton: string;
+    retakeButton: string;
+    submitting: string;
+    submitSuccess: string;
+    submitError: string;
+    captureSuccess: string;
+    captureError: string;
+    screenshotLabel: string;
+    includeScreenshot: string;
+    annotateScreenshot: string;
+    includeConsole: string;
+    includeNetwork: string;
+}
+export declare const DEFAULT_TRANSLATIONS: Translations;
+export declare const TRANSLATIONS: Record<string, Translations>;

package/dist/vue/index.d.ts

@@ -0,0 +1,55 @@
+/**
+ * CheckFlow Vue 3 Integration
+ * Provides Vue composables, plugin, and components
+ */
+import { App, InjectionKey, Ref } from 'vue';
+import { CheckFlow } from '../checkflow';
+import { CheckFlowOptions, FeedbackData, CaptureResult, SubmitResult, UserInfo, FeedbackType, FeedbackPriority } from '../types';
+export declare const CheckFlowKey: InjectionKey<CheckFlowInstance>;
+interface CheckFlowInstance {
+    checkflow: Ref<CheckFlow | null>;
+    isReady: Ref<boolean>;
+    capture: () => Promise<CaptureResult | null>;
+    submitFeedback: (feedback: FeedbackData) => Promise<SubmitResult>;
+    openWidget: () => void;
+    closeWidget: () => void;
+    setUser: (user: UserInfo) => void;
+    clearUser: () => void;
+}
+export interface CheckFlowPluginOptions extends CheckFlowOptions {
+    apiKey: string;
+}
+export declare const CheckFlowPlugin: {
+    install(app: App, options: CheckFlowPluginOptions): void;
+};
+export declare function useCheckFlow(): CheckFlowInstance;
+export declare function provideCheckFlow(apiKey: string, options?: CheckFlowOptions): CheckFlowInstance;
+interface UseFeedbackFormOptions {
+    onSuccess?: (result: SubmitResult) => void;
+    onError?: (error: Error) => void;
+    defaultType?: FeedbackType;
+    defaultPriority?: FeedbackPriority;
+}
+export declare function useFeedbackForm(options?: UseFeedbackFormOptions): {
+    formState: {
+        title: string;
+        description: string;
+        type: FeedbackType;
+        priority: FeedbackPriority;
+        includeScreenshot: boolean;
+        includeConsoleLogs: boolean;
+        includeNetworkLogs: boolean;
+    };
+    screenshot: Ref<string | null, string | null>;
+    captureScreenshot: () => Promise<CaptureResult | null>;
+    submit: () => Promise<SubmitResult | null>;
+    reset: () => void;
+    isSubmitting: Ref<boolean, boolean>;
+    isValid: import("vue").ComputedRef<boolean>;
+    error: Ref<string | null, string | null>;
+};
+export declare function useErrorHandler(): {
+    captureException: (error: Error, context?: Record<string, any>) => void;
+    handleError: (error: unknown) => void;
+};
+export type { CheckFlowOptions, FeedbackData, CaptureResult, SubmitResult, UserInfo, FeedbackType, FeedbackPriority, };

package/dist/widget/Widget.d.ts

@@ -0,0 +1,98 @@
+/**
+ * CheckFlow Feedback Widget
+ * Pure JavaScript widget that works without frameworks
+ */
+import { FeedbackType, FeedbackPriority, CaptureResult, Translations } from '../types';
+import { ContextCapture } from '../context-capture';
+import type { Annotation } from '../annotation';
+declare global {
+    interface ImageCapture {
+        grabFrame(): Promise<ImageBitmap>;
+        takePhoto(): Promise<Blob>;
+    }
+    var ImageCapture: {
+        prototype: ImageCapture;
+        new (track: MediaStreamTrack): ImageCapture;
+    };
+}
+import './styles.css';
+export interface WidgetOptions {
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    buttonText?: string;
+    primaryColor?: string;
+    zIndex?: number;
+    locale?: string;
+    translations?: Partial<Translations>;
+    onSubmit?: (data: WidgetSubmitData) => Promise<void>;
+    onCapture?: () => Promise<CaptureResult>;
+    onClose?: () => void;
+}
+export interface WidgetSubmitData {
+    name: string;
+    email: string;
+    description: string;
+    type: FeedbackType;
+    priority: FeedbackPriority;
+    screenshot?: string;
+    annotations?: Annotation[];
+    includeConsole: boolean;
+    includeNetwork: boolean;
+}
+export declare class FeedbackWidget {
+    private container;
+    private options;
+    private translations;
+    private state;
+    private capture;
+    private annotationEditor;
+    private currentAnnotations;
+    constructor(options?: WidgetOptions);
+    /**
+     * Mount the widget to the DOM
+     */
+    mount(): void;
+    /**
+     * Unmount the widget
+     */
+    unmount(): void;
+    /**
+     * Open the feedback modal
+     */
+    open(): void;
+    /**
+     * Close the feedback modal
+     */
+    close(): void;
+    private renderTrigger;
+    /**
+     * Calculate contrast color (white or black) based on background color
+     */
+    private getContrastColor;
+    private renderModal;
+    private renderExpandedModal;
+    private renderTypeOptions;
+    private renderCaptureButton;
+    private renderScreenshotPreview;
+    private renderSuccess;
+    private render;
+    private bindEvents;
+    private captureScreenshot;
+    /**
+     * Capture screen using native browser API (getDisplayMedia)
+     * Optimized for instant capture after user allows
+     */
+    private captureWithDisplayMedia;
+    /**
+     * Open the annotation editor for the current screenshot
+     */
+    private openAnnotationEditor;
+    private handleSubmit;
+    /**
+     * Update widget options
+     */
+    setOptions(options: Partial<WidgetOptions>): void;
+    /**
+     * Get capture context
+     */
+    getCapture(): ContextCapture;
+}

package/dist/widget/index.d.ts

@@ -0,0 +1,2 @@
+export { FeedbackWidget } from './Widget';
+export type { WidgetOptions, WidgetSubmitData } from './Widget';

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@checkflow/sdk",
+  "version": "1.0.1",
+  "type": "module",
+  "description": "CheckFlow SDK for capturing user feedback with context",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rollup -c rollup.config.mjs",
+    "build:watch": "rollup -c -w",
+    "test": "jest",
+    "lint": "eslint src --ext .ts,.tsx",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "feedback",
+    "bug-report",
+    "screenshot",
+    "context-capture",
+    "error-tracking",
+    "user-feedback"
+  ],
+  "author": "checkFlow",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/checkflow/checkflow-sdk.git"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@types/jest": "^29.5.11",
+    "@types/node": "^20.10.5",
+    "@types/react": "^18.3.27",
+    "@types/react-dom": "^18.3.7",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
+    "@typescript-eslint/parser": "^6.15.0",
+    "eslint": "^8.56.0",
+    "jest": "^29.7.0",
+    "rollup": "^4.9.1",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "ts-jest": "^29.1.1",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3",
+    "vue": "^3.5.25"
+  },
+  "dependencies": {
+    "html2canvas": "^1.4.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "vue": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  }
+}