@diegotsi/flint-react 0.1.2 → 0.1.5

package/dist/index.d.ts

@@ -1,10 +1,507 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { FlintWidgetProps, FlintUser, Theme, EnvironmentInfo, ConsoleEntry, NetworkEntry } from '@flint/types';
-export { FlintUser, FlintWidgetProps, Locale, ReportPayload, ReportResult, Severity, Theme, ThemeOverride } from '@flint/types';
-import { eventWithTime } from '@rrweb/types';
+
+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;
+}
+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;
+}
+interface ReportPayload {
+    reporterId: string;
+    reporterName: string;
+    description: string;
+    expectedBehavior?: string;
+    stepsToReproduce?: {
+        action: string;
+        result: string;
+    }[];
+    externalReplayUrl?: string;
+    additionalContext?: string;
+    severity: Severity;
+    url?: string;
+    meta?: Record<string, unknown>;
+}
+interface ReportResult {
+    id: string;
+    status: string;
+    githubIssueUrl?: string | null;
+    slackMessageUrl?: string | null;
+    isDuplicate: boolean;
+    duplicateOfId?: string | null;
+}
 
 declare function FlintWidget(props: FlintWidgetProps): react_jsx_runtime.JSX.Element;
 
+declare type addedNodeMutation = {
+    parentId: number;
+    previousId?: number | null;
+    nextId: number | null;
+    node: serializedNodeWithId;
+};
+
+declare type adoptedStyleSheetData = {
+    source: IncrementalSource.AdoptedStyleSheet;
+} & adoptedStyleSheetParam;
+
+declare type adoptedStyleSheetParam = {
+    id: number;
+    styles?: {
+        styleId: number;
+        rules: styleSheetAddRule[];
+    }[];
+    styleIds: number[];
+};
+
+declare type attributeMutation = {
+    id: number;
+    attributes: {
+        [key: string]: string | styleOMValue | null;
+    };
+};
+
+declare type attributes = cssTextKeyAttr & {
+    [key: string]: string | number | true | null;
+};
+
+declare enum CanvasContext {
+    '2D' = 0,
+    WebGL = 1,
+    WebGL2 = 2
+}
+
+declare type canvasMutationCommand = {
+    property: string;
+    args: Array<unknown>;
+    setter?: true;
+};
+
+declare type canvasMutationData = {
+    source: IncrementalSource.CanvasMutation;
+} & canvasMutationParam;
+
+declare type canvasMutationParam = {
+    id: number;
+    type: CanvasContext;
+    commands: canvasMutationCommand[];
+} | ({
+    id: number;
+    type: CanvasContext;
+} & canvasMutationCommand);
+
+declare type cdataNode = {
+    type: NodeType.CDATA;
+    textContent: '';
+};
+
+declare type commentNode = {
+    type: NodeType.Comment;
+    textContent: string;
+};
+
+declare type cssTextKeyAttr = {
+    _cssText?: string;
+};
+
+declare type customElementData = {
+    source: IncrementalSource.CustomElement;
+} & customElementParam;
+
+declare type customElementParam = {
+    define?: {
+        name: string;
+    };
+};
+
+declare type customEvent<T = unknown> = {
+    type: EventType.Custom;
+    data: {
+        tag: string;
+        payload: T;
+    };
+};
+
+declare type documentNode = {
+    type: NodeType.Document;
+    childNodes: serializedNodeWithId[];
+    compatMode?: string;
+};
+
+declare type documentTypeNode = {
+    type: NodeType.DocumentType;
+    name: string;
+    publicId: string;
+    systemId: string;
+};
+
+declare type domContentLoadedEvent = {
+    type: EventType.DomContentLoaded;
+    data: unknown;
+};
+
+declare type elementNode = {
+    type: NodeType.Element;
+    tagName: string;
+    attributes: attributes;
+    childNodes: serializedNodeWithId[];
+    isSVG?: true;
+    needBlock?: boolean;
+    isCustom?: true;
+};
+
+declare enum EventType {
+    DomContentLoaded = 0,
+    Load = 1,
+    FullSnapshot = 2,
+    IncrementalSnapshot = 3,
+    Meta = 4,
+    Custom = 5,
+    Plugin = 6
+}
+
+declare type eventWithoutTime = domContentLoadedEvent | loadedEvent | fullSnapshotEvent | incrementalSnapshotEvent | metaEvent | customEvent | pluginEvent;
+
+declare type eventWithTime = eventWithoutTime & {
+    timestamp: number;
+    delay?: number;
+};
+
+declare type fontData = {
+    source: IncrementalSource.Font;
+} & fontParam;
+
+declare type fontParam = {
+    family: string;
+    fontSource: string;
+    buffer: boolean;
+    descriptors?: FontFaceDescriptors;
+};
+
+declare type fullSnapshotEvent = {
+    type: EventType.FullSnapshot;
+    data: {
+        node: serializedNodeWithId;
+        initialOffset: {
+            top: number;
+            left: number;
+        };
+    };
+};
+
+declare type incrementalData = mutationData | mousemoveData | mouseInteractionData | scrollData | viewportResizeData | inputData | mediaInteractionData | styleSheetRuleData | canvasMutationData | fontData | selectionData | styleDeclarationData | adoptedStyleSheetData | customElementData;
+
+declare type incrementalSnapshotEvent = {
+    type: EventType.IncrementalSnapshot;
+    data: incrementalData;
+};
+
+declare enum IncrementalSource {
+    Mutation = 0,
+    MouseMove = 1,
+    MouseInteraction = 2,
+    Scroll = 3,
+    ViewportResize = 4,
+    Input = 5,
+    TouchMove = 6,
+    MediaInteraction = 7,
+    StyleSheetRule = 8,
+    CanvasMutation = 9,
+    Font = 10,
+    Log = 11,
+    Drag = 12,
+    StyleDeclaration = 13,
+    Selection = 14,
+    AdoptedStyleSheet = 15,
+    CustomElement = 16
+}
+
+declare type inputData = {
+    source: IncrementalSource.Input;
+    id: number;
+} & inputValue;
+
+declare type inputValue = {
+    text: string;
+    isChecked: boolean;
+    userTriggered?: boolean;
+};
+
+declare type loadedEvent = {
+    type: EventType.Load;
+    data: unknown;
+};
+
+declare type mediaInteractionData = {
+    source: IncrementalSource.MediaInteraction;
+} & mediaInteractionParam;
+
+declare type mediaInteractionParam = {
+    type: MediaInteractions;
+    id: number;
+    currentTime?: number;
+    volume?: number;
+    muted?: boolean;
+    loop?: boolean;
+    playbackRate?: number;
+};
+
+declare enum MediaInteractions {
+    Play = 0,
+    Pause = 1,
+    Seeked = 2,
+    VolumeChange = 3,
+    RateChange = 4
+}
+
+declare type metaEvent = {
+    type: EventType.Meta;
+    data: {
+        href: string;
+        width: number;
+        height: number;
+    };
+};
+
+declare type mouseInteractionData = {
+    source: IncrementalSource.MouseInteraction;
+} & mouseInteractionParam;
+
+declare type mouseInteractionParam = {
+    type: MouseInteractions;
+    id: number;
+    x?: number;
+    y?: number;
+    pointerType?: PointerTypes;
+};
+
+declare enum MouseInteractions {
+    MouseUp = 0,
+    MouseDown = 1,
+    Click = 2,
+    ContextMenu = 3,
+    DblClick = 4,
+    Focus = 5,
+    Blur = 6,
+    TouchStart = 7,
+    TouchMove_Departed = 8,
+    TouchEnd = 9,
+    TouchCancel = 10
+}
+
+declare type mousemoveData = {
+    source: IncrementalSource.MouseMove | IncrementalSource.TouchMove | IncrementalSource.Drag;
+    positions: mousePosition[];
+};
+
+declare type mousePosition = {
+    x: number;
+    y: number;
+    id: number;
+    timeOffset: number;
+};
+
+declare type mutationCallbackParam = {
+    texts: textMutation[];
+    attributes: attributeMutation[];
+    removes: removedNodeMutation[];
+    adds: addedNodeMutation[];
+    isAttachIframe?: true;
+};
+
+declare type mutationData = {
+    source: IncrementalSource.Mutation;
+} & mutationCallbackParam;
+
+declare enum NodeType {
+    Document = 0,
+    DocumentType = 1,
+    Element = 2,
+    Text = 3,
+    CDATA = 4,
+    Comment = 5
+}
+
+declare type pluginEvent<T = unknown> = {
+    type: EventType.Plugin;
+    data: {
+        plugin: string;
+        payload: T;
+    };
+};
+
+declare enum PointerTypes {
+    Mouse = 0,
+    Pen = 1,
+    Touch = 2
+}
+
+declare type removedNodeMutation = {
+    parentId: number;
+    id: number;
+    isShadow?: boolean;
+};
+
+declare type scrollData = {
+    source: IncrementalSource.Scroll;
+} & scrollPosition;
+
+declare type scrollPosition = {
+    id: number;
+    x: number;
+    y: number;
+};
+
+declare type selectionData = {
+    source: IncrementalSource.Selection;
+} & selectionParam;
+
+declare type selectionParam = {
+    ranges: Array<SelectionRange>;
+};
+
+declare type SelectionRange = {
+    start: number;
+    startOffset: number;
+    end: number;
+    endOffset: number;
+};
+
+declare type serializedNode = (documentNode | documentTypeNode | elementNode | textNode | cdataNode | commentNode) & {
+    rootId?: number;
+    isShadowHost?: boolean;
+    isShadow?: boolean;
+};
+
+declare type serializedNodeWithId = serializedNode & {
+    id: number;
+};
+
+declare type styleDeclarationData = {
+    source: IncrementalSource.StyleDeclaration;
+} & styleDeclarationParam;
+
+declare type styleDeclarationParam = {
+    id?: number;
+    styleId?: number;
+    index: number[];
+    set?: {
+        property: string;
+        value: string | null;
+        priority: string | undefined;
+    };
+    remove?: {
+        property: string;
+    };
+};
+
+declare type styleOMValue = {
+    [key: string]: styleValueWithPriority | string | false;
+};
+
+declare type styleSheetAddRule = {
+    rule: string;
+    index?: number | number[];
+};
+
+declare type styleSheetDeleteRule = {
+    index: number | number[];
+};
+
+declare type styleSheetRuleData = {
+    source: IncrementalSource.StyleSheetRule;
+} & styleSheetRuleParam;
+
+declare type styleSheetRuleParam = {
+    id?: number;
+    styleId?: number;
+    removes?: styleSheetDeleteRule[];
+    adds?: styleSheetAddRule[];
+    replace?: string;
+    replaceSync?: string;
+};
+
+declare type styleValueWithPriority = [string, string];
+
+declare type textMutation = {
+    id: number;
+    value: string | null;
+};
+
+declare type textNode = {
+    type: NodeType.Text;
+    textContent: string;
+    isStyle?: true;
+};
+
+declare type viewportResizeData = {
+    source: IncrementalSource.ViewportResize;
+} & viewportResizeDimension;
+
+declare type viewportResizeDimension = {
+    width: number;
+    height: number;
+};
+
+
+
+declare global {
+    interface Window {
+        FontFace: typeof FontFace;
+    }
+}
+
 interface Props {
     projectKey: string;
     serverUrl: string;
@@ -17,8 +514,13 @@ interface Props {
     getConsoleLogs: () => ConsoleEntry[];
     getNetworkErrors: () => NetworkEntry[];
     getReplayEvents: () => eventWithTime[];
-    externalReplayUrl?: string;
+    getExternalReplayUrl: () => string | undefined;
 }
-declare function FlintModal({ projectKey, serverUrl, user, meta, theme, zIndex, onClose, getEnvironment, getConsoleLogs, getNetworkErrors, getReplayEvents, externalReplayUrl, }: Props): react_jsx_runtime.JSX.Element;
+declare function FlintModal({ projectKey, serverUrl, user, meta, theme, zIndex, onClose, getEnvironment, getConsoleLogs, getNetworkErrors, getReplayEvents, getExternalReplayUrl, }: Props): react_jsx_runtime.JSX.Element;
+
+declare const flint: {
+    setUser(user: FlintUser | null): void;
+    setSessionReplay(url: string | (() => string)): void;
+};
 
-export { FlintModal, FlintWidget };
+export { FlintModal, type FlintUser, FlintWidget, type FlintWidgetProps, type Locale, type ReportPayload, type ReportResult, type Severity, type Theme, type ThemeOverride, flint };

package/dist/index.js

@@ -150,7 +150,7 @@ function FlintModal({
   getConsoleLogs,
   getNetworkErrors,
   getReplayEvents,
-  externalReplayUrl
+  getExternalReplayUrl
 }) {
   const { t } = useTranslation();
   const colors = resolveTheme(theme);
@@ -200,7 +200,7 @@ function FlintModal({
           reporterName: user?.name ?? "Anonymous",
           description: description.trim(),
           expectedBehavior: expectedBehavior.trim() || void 0,
-          externalReplayUrl: externalReplayUrl || void 0,
+          externalReplayUrl: getExternalReplayUrl() || void 0,
           severity,
           url: window.location.href,
           meta: collectedMeta
@@ -385,10 +385,10 @@ function FlintModal({
             pointerEvents: isSuccess ? "auto" : "none"
           }, children: [
             /* @__PURE__ */ jsx("p", { style: { fontSize: 13, color: colors.textMuted, margin: 0 }, children: result?.isDuplicate ? t("successDuplicate") : result ? `ID: ${result.id}` : "" }),
-            result?.githubIssueUrl && /* @__PURE__ */ jsxs(
+            result?.slackMessageUrl && /* @__PURE__ */ jsxs(
               "a",
               {
-                href: result.githubIssueUrl,
+                href: result.slackMessageUrl,
                 target: "_blank",
                 rel: "noreferrer",
                 style: {
@@ -405,7 +405,7 @@ function FlintModal({
                   boxShadow: accentGlow
                 },
                 children: [
-                  t("successGitHub"),
+                  t("successSlack"),
                   " \u2197"
                 ]
               }
@@ -526,6 +526,19 @@ function FlintModal({
           }
         )
       ] }),
+      /* @__PURE__ */ jsxs("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "9px 12px",
+        borderRadius: 10,
+        background: isDark ? "rgba(255,255,255,0.04)" : "rgba(0,77,240,0.04)",
+        border: `1px solid ${isDark ? "rgba(255,255,255,0.08)" : "rgba(0,77,240,0.1)"}`,
+        marginBottom: 16
+      }, children: [
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 14 }, children: "\u{1F3A5}" }),
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: colors.textMuted, lineHeight: 1.4 }, children: t("replayInfo") })
+      ] }),
       status === "error" && /* @__PURE__ */ jsxs("div", { style: {
         padding: "10px 13px",
         borderRadius: 10,
@@ -741,6 +754,8 @@ var en_default = {
   successTitle: "Bug reported!",
   successDuplicate: "Looks like a duplicate of an existing bug.",
   successGitHub: "View GitHub issue",
+  successSlack: "View Slack message",
+  replayInfo: "No need to record your screen \u2014 we automatically capture a session replay when you submit.",
   errorLabel: "Failed to submit. Please try again.",
   cancel: "Cancel",
   sending: "Sending report",
@@ -953,6 +968,34 @@ function createNetworkCollector() {
   };
 }
 
+// src/store.ts
+import { useSyncExternalStore } from "react";
+var state = { user: void 0, sessionReplay: void 0 };
+var listeners = /* @__PURE__ */ new Set();
+function emit() {
+  listeners.forEach((fn) => fn());
+}
+function subscribeStore(fn) {
+  listeners.add(fn);
+  return () => listeners.delete(fn);
+}
+function getSnapshot() {
+  return state;
+}
+function useFlintStore() {
+  return useSyncExternalStore(subscribeStore, getSnapshot);
+}
+var flint = {
+  setUser(user) {
+    state = { ...state, user: user ?? void 0 };
+    emit();
+  },
+  setSessionReplay(url) {
+    state = { ...state, sessionReplay: url };
+    emit();
+  }
+};
+
 // src/FlintWidget.tsx
 import { record } from "rrweb";
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -974,7 +1017,13 @@ function WidgetContent({
   theme = "dark",
   zIndex = 9999
 }) {
-  const externalReplayUrl = extraFields?.sessionReplay;
+  const globalState = useFlintStore();
+  const resolvedUser = user ?? globalState.user;
+  const resolvedSessionReplay = extraFields?.sessionReplay ?? globalState.sessionReplay;
+  const getExternalReplayUrl = () => {
+    const src = resolvedSessionReplay;
+    return typeof src === "function" ? src() : src;
+  };
   const { t } = useTranslation2();
   const [open, setOpen] = useState2(false);
   const [hovered, setHovered] = useState2(false);
@@ -1019,7 +1068,7 @@ function WidgetContent({
         "aria-label": label,
         style: {
           position: "fixed",
-          bottom: "20px",
+          bottom: "40px",
           right: "20px",
           zIndex: zIndex - 1,
           display: "flex",
@@ -1050,7 +1099,7 @@ function WidgetContent({
       {
         projectKey,
         serverUrl,
-        user,
+        user: resolvedUser,
         meta,
         theme,
         zIndex,
@@ -1059,7 +1108,7 @@ function WidgetContent({
         getConsoleLogs: () => consoleCollector.current?.getEntries() ?? [],
         getNetworkErrors: () => networkCollector.current?.getEntries() ?? [],
         getReplayEvents: () => [...replayEvents.current],
-        externalReplayUrl
+        getExternalReplayUrl
       }
     )
   ] });
@@ -1083,6 +1132,7 @@ function SparkIcon2() {
 }
 export {
   FlintModal,
-  FlintWidget
+  FlintWidget,
+  flint
 };
 //# sourceMappingURL=index.js.map