quick-bug-reporter-react 1.4.0 → 1.5.0

package/README.md

@@ -7,6 +7,7 @@ Drop-in bug reporter for React apps — screenshot capture, video recording, ann
 - **Screenshot capture** — Full-page or region selection via `html2canvas-pro`
 - **Video recording** — Screen + microphone via `MediaRecorder` API
 - **Annotation** — Drag-to-highlight on captured screenshots
+- **Structured bug reports** — Tab-based UI for Steps/Expected/Actual/Context (4000 char total)
 - **Network logging** — Automatic fetch interception during capture
 - **Console capture** — Automatic console log and JS error capture
 - **Integrations** — Linear and Jira (direct API or backend proxy)

package/dist/index.cjs

@@ -898,6 +898,10 @@ var CloudIntegration = class {
     fd.set("project_key", this.projectKey);
     fd.set("title", payload.title);
     fd.set("description", payload.description || "");
+    if (payload.stepsToReproduce) fd.set("steps_to_reproduce", payload.stepsToReproduce);
+    if (payload.expectedResult) fd.set("expected_result", payload.expectedResult);
+    if (payload.actualResult) fd.set("actual_result", payload.actualResult);
+    if (payload.additionalContext) fd.set("additional_context", payload.additionalContext);
     fd.set("provider", "cloud");
     fd.set("capture_mode", payload.captureMode);
     fd.set("has_screenshot", String(Boolean(payload.screenshotBlob)));
@@ -1833,6 +1837,10 @@ var BugReporter = class {
     const payload = {
       title: normalizedTitle,
       description: normalizedDescription,
+      stepsToReproduce: options.stepsToReproduce,
+      expectedResult: options.expectedResult,
+      actualResult: options.actualResult,
+      additionalContext: options.additionalContext,
       videoBlob: artifacts.videoBlob,
       screenshotBlob: options.screenshotBlob ?? artifacts.screenshotBlob,
       networkLogs: this.session.finalizeNetworkLogsForSubmit(artifacts.captureMode),
@@ -2365,7 +2373,7 @@ function BugReporterProvider({
     setScreenshotAnnotation(annotation);
   }, []);
   const submitReport = react.useCallback(
-    async (title, description) => {
+    async (title, structuredFields) => {
       const reporter = getOrCreateReporter();
       if (!reporter) {
         setError("No bug tracker integration is configured.");
@@ -2385,6 +2393,25 @@ function BugReporterProvider({
       setSubmissionProgress("Preparing submission\u2026");
       setError(null);
       setSuccess(null);
+      const { stepsToReproduce, expectedResult, actualResult, additionalContext } = structuredFields;
+      const sections = [];
+      if (stepsToReproduce.trim()) {
+        sections.push(`## Steps to Reproduce
+${stepsToReproduce.trim()}`);
+      }
+      if (expectedResult.trim()) {
+        sections.push(`## Expected Result
+${expectedResult.trim()}`);
+      }
+      if (actualResult.trim()) {
+        sections.push(`## Actual Result
+${actualResult.trim()}`);
+      }
+      if (additionalContext.trim()) {
+        sections.push(`## Additional Context
+${additionalContext.trim()}`);
+      }
+      const description = sections.length > 0 ? sections.join("\n\n") : "No description provided";
       const screenshotBlobForSubmit = draftMode === "screenshot" ? screenshotAnnotation.annotatedBlob ?? screenshotBlob : null;
       const metadata = {
         annotation: draftMode === "screenshot" && screenshotAnnotation.highlights.length > 0 ? {
@@ -2399,6 +2426,10 @@ function BugReporterProvider({
       };
       try {
         const result = await reporter.submit(title, description, {
+          stepsToReproduce,
+          expectedResult,
+          actualResult,
+          additionalContext,
           screenshotBlob: screenshotBlobForSubmit,
           metadata,
           consoleLogs,
@@ -3196,6 +3227,7 @@ function providerLabel(provider) {
   if (provider === "cloud") return "QuickBugs Cloud";
   return provider;
 }
+var CHAR_LIMIT = 4e3;
 function BugReporterModal() {
   const {
     autoStopNotice,
@@ -3225,9 +3257,39 @@ function BugReporterModal() {
     videoPreviewUrl
   } = useBugReporter();
   const [title, setTitle] = react.useState("");
-  const [description, setDescription] = react.useState("");
+  const [stepsToReproduce, setStepsToReproduce] = react.useState("");
+  const [expectedResult, setExpectedResult] = react.useState("");
+  const [actualResult, setActualResult] = react.useState("");
+  const [additionalContext, setAdditionalContext] = react.useState("");
   const [step, setStep] = react.useState("review");
+  const [activeTab, setActiveTab] = react.useState("steps");
+  const totalChars = stepsToReproduce.length + expectedResult.length + actualResult.length + additionalContext.length;
+  const isOverLimit = totalChars > CHAR_LIMIT;
   const elapsedLabel = react.useMemo(() => formatElapsed2(elapsedMs), [elapsedMs]);
+  const handleStepsKeyDown = (event) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      const textarea = event.currentTarget;
+      const cursorPos = textarea.selectionStart;
+      const textBeforeCursor = stepsToReproduce.substring(0, cursorPos);
+      const textAfterCursor = stepsToReproduce.substring(cursorPos);
+      const lines = textBeforeCursor.split("\n");
+      const currentLine = lines[lines.length - 1];
+      const numberMatch = currentLine.match(/^(\d+)\.\s/);
+      const nextNumber = numberMatch ? parseInt(numberMatch[1]) + 1 : lines.length > 0 && stepsToReproduce.trim() === "" ? 1 : lines.length + 1;
+      const newText = textBeforeCursor + "\n" + nextNumber + ". " + textAfterCursor;
+      setStepsToReproduce(newText);
+      setTimeout(() => {
+        const newCursorPos = cursorPos + ("\n" + nextNumber + ". ").length;
+        textarea.setSelectionRange(newCursorPos, newCursorPos);
+      }, 0);
+    }
+  };
+  const handleStepsFocus = () => {
+    if (stepsToReproduce.trim() === "") {
+      setStepsToReproduce("1. ");
+    }
+  };
   const handleDialogOpenChange = (open) => {
     if (open) {
       openModal();
@@ -3238,15 +3300,24 @@ function BugReporterModal() {
   };
   const handleSubmit = async (event) => {
     event.preventDefault();
-    const result = await submitReport(title, description);
+    const result = await submitReport(title, {
+      stepsToReproduce,
+      expectedResult,
+      actualResult,
+      additionalContext
+    });
     if (result) {
       setTitle("");
-      setDescription("");
+      setStepsToReproduce("");
+      setExpectedResult("");
+      setActualResult("");
+      setAdditionalContext("");
       setStep("review");
+      setActiveTab("steps");
     }
   };
   const hasIntegrations = availableProviders.length > 0;
-  const canSubmit = !isSubmitting && !isCapturingScreenshot && hasIntegrations && !!selectedProvider && hasDraft && title.trim().length > 0;
+  const canSubmit = !isSubmitting && !isCapturingScreenshot && hasIntegrations && !!selectedProvider && hasDraft && title.trim().length > 0 && !isOverLimit;
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOpen, onOpenChange: handleDialogOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(
     DialogContent,
     {
@@ -3412,18 +3483,91 @@ function BugReporterModal() {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5 sm:col-span-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", htmlFor: "bug-description", children: "Quick note" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 sm:col-span-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Bug Details" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 border-b border-gray-200", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: `px-3 py-2 text-sm font-medium transition-colors ${activeTab === "steps" ? "border-b-2 border-indigo-600 text-indigo-600" : "text-gray-500 hover:text-gray-700"}`,
+                    onClick: () => setActiveTab("steps"),
+                    children: "Steps"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: `px-3 py-2 text-sm font-medium transition-colors ${activeTab === "expected" ? "border-b-2 border-indigo-600 text-indigo-600" : "text-gray-500 hover:text-gray-700"}`,
+                    onClick: () => setActiveTab("expected"),
+                    children: "Expected"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: `px-3 py-2 text-sm font-medium transition-colors ${activeTab === "actual" ? "border-b-2 border-indigo-600 text-indigo-600" : "text-gray-500 hover:text-gray-700"}`,
+                    onClick: () => setActiveTab("actual"),
+                    children: "Actual"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: `px-3 py-2 text-sm font-medium transition-colors ${activeTab === "context" ? "border-b-2 border-indigo-600 text-indigo-600" : "text-gray-500 hover:text-gray-700"}`,
+                    onClick: () => setActiveTab("context"),
+                    children: "Context"
+                  }
+                )
+              ] }),
+              activeTab === "steps" && /* @__PURE__ */ jsxRuntime.jsx(
                 Textarea,
                 {
-                  id: "bug-description",
-                  maxLength: 4e3,
-                  placeholder: "What did you expect, what happened, and any quick repro steps.",
-                  value: description,
-                  onChange: (event) => setDescription(event.target.value)
+                  id: "bug-steps",
+                  placeholder: "Press Enter to start numbering steps...",
+                  value: stepsToReproduce,
+                  onChange: (event) => setStepsToReproduce(event.target.value),
+                  onKeyDown: handleStepsKeyDown,
+                  onFocus: handleStepsFocus
                 }
-              )
+              ),
+              activeTab === "expected" && /* @__PURE__ */ jsxRuntime.jsx(
+                Textarea,
+                {
+                  id: "bug-expected",
+                  placeholder: "Describe what should happen...",
+                  value: expectedResult,
+                  onChange: (event) => setExpectedResult(event.target.value)
+                }
+              ),
+              activeTab === "actual" && /* @__PURE__ */ jsxRuntime.jsx(
+                Textarea,
+                {
+                  id: "bug-actual",
+                  placeholder: "Describe what actually happened...",
+                  value: actualResult,
+                  onChange: (event) => setActualResult(event.target.value)
+                }
+              ),
+              activeTab === "context" && /* @__PURE__ */ jsxRuntime.jsx(
+                Textarea,
+                {
+                  id: "bug-context",
+                  placeholder: "Any additional information, workarounds, or notes...",
+                  value: additionalContext,
+                  onChange: (event) => setAdditionalContext(event.target.value)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: `text-xs ${isOverLimit ? "text-red-600 font-medium" : "text-gray-500"}`, children: [
+                totalChars,
+                "/",
+                CHAR_LIMIT,
+                " characters ",
+                isOverLimit && "(over limit)"
+              ] })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
               /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", htmlFor: "bug-provider", children: "Submit to" }),