@diegotsi/flint-react 1.0.1 → 1.2.0

package/dist/index.d.ts

@@ -1,122 +1,6 @@
+import { FlintUser, Theme, EnvironmentInfo, ConsoleEntry, NetworkEntry, FormErrorEntry, ReportPayload, ReportResult, FlintWidgetProps } from '@diegotsi/flint-core';
+export { Flint, FlintConfig, FlintUser, FlintWidgetProps, Locale, ReportPayload, ReportResult, Severity, Theme, ThemeOverride, flint } from '@diegotsi/flint-core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-export { flint } from '@flint/core';
-
-type Severity = "P1" | "P2" | "P3" | "P4";
-interface EnvironmentInfo {
-    browser: string;
-    os: string;
-    viewport: string;
-    screen: string;
-    language: string;
-    timezone: string;
-    online: boolean;
-}
-interface ConsoleEntry {
-    level: "log" | "warn" | "error";
-    args: string;
-    timestamp: number;
-}
-interface NetworkEntry {
-    method: string;
-    url: string;
-    status: number;
-    duration: number;
-    timestamp: number;
-}
-type Locale = "pt-BR" | "en-US";
-type Theme = "light" | "dark" | ThemeOverride;
-interface ThemeOverride {
-    background?: string;
-    accent?: string;
-    text?: string;
-    border?: string;
-}
-interface FlintUser {
-    id: string;
-    name: string;
-    email?: string;
-}
-interface FlintExtraFields {
-    /** Session replay URL from Datadog RUM, FullStory, LogRocket, etc. Pass a function for lazy evaluation. */
-    sessionReplay?: string | (() => string);
-    [key: string]: unknown;
-}
-interface FlintWidgetProps {
-    /** Project API key — get this from the flint-server admin API */
-    projectKey: string;
-    /** Full URL of the flint-server, e.g. "https://bugs.example.com" */
-    serverUrl: string;
-    /** Authenticated user info (optional) */
-    user?: FlintUser;
-    /** Arbitrary metadata to attach to every report */
-    meta?: Record<string, unknown>;
-    /** Extra fields for developer use (e.g. external session replay URL) */
-    extraFields?: FlintExtraFields;
-    /** Label shown on the trigger button. Default: "Reportar bug" */
-    buttonLabel?: string;
-    /** Locale for UI strings. Default: "pt-BR" */
-    locale?: Locale;
-    /** Visual theme. Default: "light" */
-    theme?: Theme;
-    /** Custom z-index for the widget. Default: 9999 */
-    zIndex?: number;
-    /** URL of the admin/status page for reporters to track their bugs */
-    statusPageUrl?: string;
-    /**
-     * Datadog site hostname for auto-generating RUM Session Replay deep links.
-     * When set, the widget auto-detects `window.DD_RUM` and generates a direct
-     * link to the session replay at the exact moment the bug was reported.
-     * Examples: "app.datadoghq.com", "app.datadoghq.eu", "app.us5.datadoghq.com"
-     */
-    datadogSite?: string;
-    /** Enable session replay recording. Default: true */
-    enableReplay?: boolean;
-    /** Enable screenshot capture. Default: true */
-    enableScreenshot?: boolean;
-    /** Enable console log collection. Default: true */
-    enableConsole?: boolean;
-    /** Enable network error collection. Default: true */
-    enableNetwork?: boolean;
-    /** Enable frustration detection (rage clicks, dead clicks, error loops). Default: false */
-    enableFrustration?: boolean;
-    /** Auto-submit bug report on frustration detection. Default: false */
-    autoReportFrustration?: boolean;
-    /** Called before report submission. Return false to cancel. */
-    onBeforeSubmit?: (payload: ReportPayload) => boolean | Promise<boolean>;
-    /** Called after successful submission */
-    onSuccess?: (result: ReportResult) => void;
-    /** Called when submission fails */
-    onError?: (error: Error) => void;
-    /** Called when the modal opens */
-    onOpen?: () => void;
-    /** Called when the modal closes */
-    onClose?: () => void;
-}
-interface ReportPayload {
-    reporterId: string;
-    reporterName: string;
-    reporterEmail?: string;
-    description: string;
-    expectedBehavior?: string;
-    stepsToReproduce?: {
-        action: string;
-        result: string;
-    }[];
-    externalReplayUrl?: string;
-    additionalContext?: string;
-    severity: Severity;
-    url?: string;
-    meta?: Record<string, unknown>;
-    label?: string;
-}
-interface ReportResult {
-    id: string;
-    status: string;
-    githubIssueUrl?: string | null;
-    slackMessageUrl?: string | null;
-    isDuplicate: boolean;
-    duplicateOfId?: string | null;
-}
 
 declare type addedNodeMutation = {
     parentId: number;
@@ -546,6 +430,7 @@ interface Props {
     getEnvironment: () => EnvironmentInfo;
     getConsoleLogs: () => ConsoleEntry[];
     getNetworkErrors: () => NetworkEntry[];
+    getFormErrors: () => FormErrorEntry[];
     getReplayEvents: () => eventWithTime[];
     getExternalReplayUrl: () => string | undefined;
     initialSelection?: string;
@@ -555,8 +440,8 @@ interface Props {
     onSuccess?: (result: ReportResult) => void;
     onError?: (error: Error) => void;
 }
-declare function FlintModal({ projectKey, serverUrl, user, meta, theme, zIndex, onClose, getEnvironment, getConsoleLogs, getNetworkErrors, getReplayEvents, getExternalReplayUrl, initialSelection, enableScreenshot, statusPageUrl, onBeforeSubmit, onSuccess, onError, }: Props): react_jsx_runtime.JSX.Element;
+declare function FlintModal({ projectKey, serverUrl, user, meta, theme, zIndex, onClose, getEnvironment, getConsoleLogs, getNetworkErrors, getFormErrors, getReplayEvents, getExternalReplayUrl, initialSelection, enableScreenshot, statusPageUrl, onBeforeSubmit, onSuccess, onError, }: Props): react_jsx_runtime.JSX.Element;
 
 declare function FlintWidget(props: FlintWidgetProps): react_jsx_runtime.JSX.Element;
 
-export { FlintModal, type FlintUser, FlintWidget, type FlintWidgetProps, type Locale, type ReportPayload, type ReportResult, type Severity, type Theme, type ThemeOverride };
+export { FlintModal, FlintWidget };

package/dist/index.js

@@ -3,7 +3,7 @@ import { useCallback, useEffect as useEffect2, useRef as useRef2, useState as us
 import { useTranslation } from "react-i18next";
 
 // src/api.ts
-import { submitReplay, submitReport } from "@flint/core";
+import { submitReplay, submitReport } from "@diegotsi/flint-core";
 
 // src/ScreenAnnotator.tsx
 import { domToCanvas } from "modern-screenshot";
@@ -148,7 +148,7 @@ function ScreenAnnotator({ zIndex, onCapture, onCancel }) {
 }
 
 // src/theme.ts
-import { resolveTheme } from "@flint/core";
+import { resolveTheme } from "@diegotsi/flint-core";
 
 // src/FlintModal.tsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -206,6 +206,7 @@ function FlintModal({
   getEnvironment,
   getConsoleLogs,
   getNetworkErrors,
+  getFormErrors,
   getReplayEvents,
   getExternalReplayUrl,
   initialSelection = "",
@@ -264,7 +265,8 @@ function FlintModal({
       ...meta,
       environment: getEnvironment(),
       consoleLogs: getConsoleLogs(),
-      networkErrors: getNetworkErrors()
+      networkErrors: getNetworkErrors(),
+      formErrors: getFormErrors()
     };
     if (isText) {
       collectedMeta.textIssue = {
@@ -1139,20 +1141,24 @@ function CheckIcon({ size = 20 }) {
 }
 
 // src/FlintWidget.tsx
+import { Flint as Flint2 } from "@diegotsi/flint-core";
 import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
 import { I18nextProvider, useTranslation as useTranslation2 } from "react-i18next";
 
 // src/collectors/console.ts
-import { createConsoleCollector } from "@flint/core";
+import { createConsoleCollector } from "@diegotsi/flint-core";
 
 // src/collectors/environment.ts
-import { collectEnvironment } from "@flint/core";
+import { collectEnvironment } from "@diegotsi/flint-core";
+
+// src/collectors/formErrors.ts
+import { createFormErrorCollector } from "@diegotsi/flint-core";
 
 // src/collectors/frustration.ts
-import { createFrustrationCollector } from "@flint/core";
+import { createFrustrationCollector } from "@diegotsi/flint-core";
 
 // src/collectors/network.ts
-import { createNetworkCollector } from "@flint/core";
+import { createNetworkCollector } from "@diegotsi/flint-core";
 
 // src/i18n/index.ts
 import { createInstance } from "i18next";
@@ -1204,9 +1210,9 @@ widgetI18n.use(initReactI18next).init({
 var i18n_default = widgetI18n;
 
 // src/store.ts
-import { getSnapshot, subscribe } from "@flint/core";
+import { getSnapshot, subscribe } from "@diegotsi/flint-core";
 import { useSyncExternalStore } from "react";
-import { flint as flint2 } from "@flint/core";
+import { _setFormErrorCollector, Flint, flint } from "@diegotsi/flint-core";
 function useFlintStore() {
   return useSyncExternalStore(subscribe, getSnapshot);
 }
@@ -1236,6 +1242,7 @@ function WidgetContent({
   enableScreenshot = true,
   enableConsole = true,
   enableNetwork = true,
+  enableFormErrors = true,
   enableFrustration = false,
   autoReportFrustration = false,
   onBeforeSubmit,
@@ -1313,31 +1320,42 @@ function WidgetContent({
     setOpen(true);
     onOpen?.();
   };
+  const globalInit = Flint2.isInitialized();
+  const global = Flint2.getInstance();
   const consoleCollector = useRef3(null);
   const networkCollector = useRef3(null);
   const replayEvents = useRef3([]);
   const stopReplay = useRef3(null);
-  if (enableConsole && !consoleCollector.current) {
-    consoleCollector.current = createConsoleCollector();
-    consoleCollector.current.start();
-  }
-  if (enableNetwork && !networkCollector.current) {
-    const flintHost = (() => {
-      try {
-        return new URL(serverUrl).hostname;
-      } catch {
-        return "";
-      }
-    })();
-    networkCollector.current = createNetworkCollector(flintHost ? [flintHost] : []);
-    networkCollector.current.start();
-  }
+  const formErrorCollector = useRef3(null);
   const frustrationCollector = useRef3(null);
-  if (enableFrustration && !frustrationCollector.current) {
-    frustrationCollector.current = createFrustrationCollector();
-    frustrationCollector.current.start();
+  if (!globalInit) {
+    if (enableConsole && !consoleCollector.current) {
+      consoleCollector.current = createConsoleCollector();
+      consoleCollector.current.start();
+    }
+    if (enableNetwork && !networkCollector.current) {
+      const flintHost = (() => {
+        try {
+          return new URL(serverUrl).hostname;
+        } catch {
+          return "";
+        }
+      })();
+      networkCollector.current = createNetworkCollector(flintHost ? [flintHost] : []);
+      networkCollector.current.start();
+    }
+    if (enableFormErrors && !formErrorCollector.current) {
+      formErrorCollector.current = createFormErrorCollector();
+      formErrorCollector.current.start();
+      _setFormErrorCollector(formErrorCollector.current);
+    }
+    if (enableFrustration && !frustrationCollector.current) {
+      frustrationCollector.current = createFrustrationCollector();
+      frustrationCollector.current.start();
+    }
   }
   useEffect3(() => {
+    if (globalInit) return;
     let cancelled = false;
     if (enableReplay) {
       import("rrweb").then(({ record }) => {
@@ -1358,11 +1376,14 @@ function WidgetContent({
       cancelled = true;
       consoleCollector.current?.stop();
       networkCollector.current?.stop();
+      formErrorCollector.current?.stop();
+      _setFormErrorCollector(null);
       frustrationCollector.current?.stop();
       stopReplay.current?.();
     };
-  }, [enableReplay]);
+  }, [enableReplay, globalInit]);
   useEffect3(() => {
+    if (globalInit) return;
     if (!enableFrustration || !autoReportFrustration || !frustrationCollector.current) return;
     const unsubscribe = frustrationCollector.current.onFrustration(async (event) => {
       const user2 = resolvedUser;
@@ -1377,13 +1398,14 @@ function WidgetContent({
           environment: collectEnvironment(),
           consoleLogs: consoleCollector.current?.getEntries() ?? [],
           networkErrors: networkCollector.current?.getEntries() ?? [],
+          formErrors: formErrorCollector.current?.getEntries() ?? [],
           frustrationEvent: event
         }
       }).catch(() => {
       });
     });
     return unsubscribe;
-  }, [enableFrustration, autoReportFrustration]);
+  }, [enableFrustration, autoReportFrustration, globalInit]);
   const label = buttonLabel ?? t("buttonLabel");
   return /* @__PURE__ */ jsxs3(Fragment2, { children: [
     /* @__PURE__ */ jsxs3(
@@ -1481,9 +1503,10 @@ function WidgetContent({
           pendingSelection.current = "";
         },
         getEnvironment: collectEnvironment,
-        getConsoleLogs: () => consoleCollector.current?.getEntries() ?? [],
-        getNetworkErrors: () => networkCollector.current?.getEntries() ?? [],
-        getReplayEvents: () => [...replayEvents.current],
+        getConsoleLogs: () => globalInit ? global?.console?.getEntries() ?? [] : consoleCollector.current?.getEntries() ?? [],
+        getNetworkErrors: () => globalInit ? global?.network?.getEntries() ?? [] : networkCollector.current?.getEntries() ?? [],
+        getFormErrors: () => globalInit ? global?.formErrors?.getEntries() ?? [] : formErrorCollector.current?.getEntries() ?? [],
+        getReplayEvents: () => globalInit ? Flint2.getReplayEvents() : [...replayEvents.current],
         getExternalReplayUrl,
         initialSelection: pendingSelection.current,
         enableScreenshot,
@@ -1535,8 +1558,9 @@ function SparkIcon2() {
   );
 }
 export {
+  Flint,
   FlintModal,
   FlintWidget,
-  flint2 as flint
+  flint
 };
 //# sourceMappingURL=index.js.map