@diegotsi/flint-react 0.1.6 → 0.2.1

package/dist/index.d.ts

@@ -1,507 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-
-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;
-}
+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';
 
 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;
@@ -523,4 +26,4 @@ declare const flint: {
     setSessionReplay(url: string | (() => string)): void;
 };
 
-export { FlintModal, type FlintUser, FlintWidget, type FlintWidgetProps, type Locale, type ReportPayload, type ReportResult, type Severity, type Theme, type ThemeOverride, flint };
+export { FlintModal, FlintWidget, flint };

package/dist/index.js

@@ -242,7 +242,7 @@ function FlintModal({
     boxShadow: colors.shadow,
     border: `1px solid ${colors.border}`,
     width: "100%",
-    maxWidth: "480px",
+    maxWidth: "600px",
     maxHeight: "92vh",
     overflowY: "auto",
     fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
@@ -256,7 +256,7 @@ function FlintModal({
     border: `1px solid ${inputBorder}`,
     background: colors.backgroundSecondary,
     color: colors.text,
-    fontSize: "14px",
+    fontSize: "16px",
     outline: "none",
     boxSizing: "border-box",
     fontFamily: "inherit",
@@ -331,7 +331,7 @@ function FlintModal({
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            fontSize: 17,
+            fontSize: 19,
             fontWeight: 700,
             color: colors.text,
             letterSpacing: "-0.02em",
@@ -345,7 +345,7 @@ function FlintModal({
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            fontSize: 17,
+            fontSize: 19,
             fontWeight: 700,
             color: colors.text,
             letterSpacing: "-0.02em",
@@ -364,7 +364,7 @@ function FlintModal({
             justifyContent: "center",
             gap: 6,
             color: colors.textMuted,
-            fontSize: 13,
+            fontSize: 15,
             opacity: isSuccess ? 0 : 1,
             transition: "opacity 0.2s ease",
             pointerEvents: "none"
@@ -384,46 +384,30 @@ function FlintModal({
             transition: "opacity 0.35s ease 0.35s, transform 0.35s ease 0.35s",
             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?.slackMessageUrl && /* @__PURE__ */ jsxs(
-              "a",
-              {
-                href: result.slackMessageUrl,
-                target: "_blank",
-                rel: "noreferrer",
-                style: {
-                  display: "inline-flex",
-                  alignItems: "center",
-                  gap: 6,
-                  padding: "9px 18px",
-                  borderRadius: "10px",
-                  background: `linear-gradient(135deg, ${colors.accent}, ${colors.accentHover})`,
-                  color: colors.buttonText,
-                  textDecoration: "none",
-                  fontSize: "13px",
-                  fontWeight: 600,
-                  boxShadow: accentGlow
-                },
-                children: [
-                  t("successSlack"),
-                  " \u2197"
-                ]
-              }
-            ),
+            /* @__PURE__ */ jsx("p", { style: { fontSize: 15, color: colors.textMuted, margin: 0 }, children: result ? `ID: ${result.id}` : "" }),
             /* @__PURE__ */ jsx(
               "button",
               {
                 onClick: onClose,
                 style: {
-                  background: "none",
+                  width: "100%",
+                  padding: "13px 20px",
+                  borderRadius: 12,
                   border: "none",
+                  background: `linear-gradient(135deg, ${colors.accent}, ${colors.accentHover})`,
+                  color: colors.buttonText,
+                  fontSize: 17,
+                  fontWeight: 700,
                   cursor: "pointer",
-                  fontSize: 13,
-                  color: colors.textMuted,
-                  padding: "4px 8px",
-                  fontFamily: "inherit"
+                  letterSpacing: "-0.01em",
+                  boxShadow: accentGlow,
+                  fontFamily: "inherit",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: 8
                 },
-                children: t("cancel")
+                children: t("close")
               }
             )
           ] })
@@ -504,7 +488,7 @@ function FlintModal({
               borderRadius: 10,
               border: `1px dashed ${inputBorder}`,
               cursor: "pointer",
-              fontSize: 13,
+              fontSize: 15,
               color: colors.textMuted,
               background: colors.backgroundSecondary
             },
@@ -536,8 +520,8 @@ function FlintModal({
         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") })
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 16 }, children: "\u{1F3A5}" }),
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 14, color: colors.textMuted, lineHeight: 1.4 }, children: t("replayInfo") })
       ] }),
       status === "error" && /* @__PURE__ */ jsxs("div", { style: {
         padding: "10px 13px",
@@ -545,7 +529,7 @@ function FlintModal({
         background: "rgba(239,68,68,0.08)",
         border: "1px solid rgba(239,68,68,0.2)",
         color: "#f87171",
-        fontSize: 12,
+        fontSize: 14,
         marginBottom: 16
       }, children: [
         "\u26A0\uFE0F ",
@@ -562,7 +546,7 @@ function FlintModal({
             border: "none",
             background: `linear-gradient(135deg, ${colors.accent}, ${colors.accentHover})`,
             color: colors.buttonText,
-            fontSize: 15,
+            fontSize: 17,
             fontWeight: 700,
             cursor: "pointer",
             letterSpacing: "-0.01em",
@@ -591,7 +575,7 @@ function FlintModal({
             background: "none",
             border: "none",
             cursor: "pointer",
-            fontSize: 13,
+            fontSize: 15,
             color: colors.textMuted,
             fontFamily: "inherit",
             borderRadius: 8
@@ -628,7 +612,7 @@ function ModalHeader({
       justifyContent: "center",
       flexShrink: 0
     }, children: /* @__PURE__ */ jsx(SparkIcon, { color: colors.accent, size: 13 }) }),
-    titleId && title ? /* @__PURE__ */ jsx("h2", { id: titleId, style: { margin: 0, fontSize: 14, fontWeight: 600, color: colors.text, letterSpacing: "-0.01em", flex: 1 }, children: title }) : /* @__PURE__ */ jsx("span", { style: { flex: 1, fontSize: 13, fontWeight: 600, color: colors.textMuted }, children: "Flint" }),
+    titleId && title ? /* @__PURE__ */ jsx("h2", { id: titleId, style: { margin: 0, fontSize: 16, fontWeight: 600, color: colors.text, letterSpacing: "-0.01em", flex: 1 }, children: title }) : /* @__PURE__ */ jsx("span", { style: { flex: 1, fontSize: 15, fontWeight: 600, color: colors.textMuted }, children: "Flint" }),
     showClose && /* @__PURE__ */ jsx(
       "button",
       {
@@ -640,7 +624,7 @@ function ModalHeader({
           cursor: "pointer",
           padding: 4,
           color: colors.textMuted,
-          fontSize: 20,
+          fontSize: 22,
           lineHeight: 1,
           borderRadius: 6,
           display: "flex",
@@ -665,7 +649,7 @@ function FieldLabel({
       htmlFor,
       style: {
         display: "block",
-        fontSize: "10px",
+        fontSize: "12px",
         fontWeight: 700,
         color: colors.textMuted,
         marginBottom: 6,
@@ -714,8 +698,8 @@ function SeverityButton({ sev, label, selected, hint, color, accent, border, bg,
       },
       children: [
         /* @__PURE__ */ jsx("span", { style: { width: 8, height: 8, borderRadius: "50%", background: color, display: "block" } }),
-        /* @__PURE__ */ jsx("span", { style: { fontSize: 11, fontWeight: selected ? 700 : 500, color: selected ? accent : text, letterSpacing: "0.02em" }, children: sev }),
-        /* @__PURE__ */ jsx("span", { style: { fontSize: 9, color: selected ? accent : text, opacity: 0.6, letterSpacing: "0.02em" }, children: label })
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: selected ? 700 : 500, color: selected ? accent : text, letterSpacing: "0.02em" }, children: sev }),
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: selected ? accent : text, opacity: 0.6, letterSpacing: "0.02em" }, children: label })
       ]
     }
   );
@@ -751,6 +735,7 @@ var en_default = {
   screenshotLabel: "Screenshot (optional)",
   screenshotPlaceholder: "Click to attach...",
   submitLabel: "Submit",
+  close: "Close",
   successTitle: "Bug reported!",
   successDuplicate: "Looks like a duplicate of an existing bug.",
   successGitHub: "View GitHub issue",