msaas-feedback 0.1.0__tar.gz

msaas_feedback-0.1.0/.gitignore

@@ -0,0 +1,21 @@
+node_modules/
+dist/
+.next/
+.turbo/
+*.pyc
+__pycache__/
+.venv/
+*.egg-info/
+.pytest_cache/
+.ruff_cache/
+.env
+.env.local
+.env.*.local
+.DS_Store
+coverage/
+
+# Runtime artifacts
+logs_llm/
+vectors.db
+vectors.db-shm
+vectors.db-wal

msaas_feedback-0.1.0/PKG-INFO

@@ -0,0 +1,16 @@
+Metadata-Version: 2.4
+Name: msaas-feedback
+Version: 0.1.0
+Summary: User feedback and feature request management for SaaS
+Requires-Python: >=3.12
+Requires-Dist: msaas-api-core
+Requires-Dist: msaas-errors
+Requires-Dist: pydantic>=2.0
+Provides-Extra: dev
+Requires-Dist: fastapi>=0.110.0; extra == 'dev'
+Requires-Dist: httpx>=0.27; extra == 'dev'
+Requires-Dist: pytest-asyncio>=0.24; extra == 'dev'
+Requires-Dist: pytest>=8.0; extra == 'dev'
+Requires-Dist: ruff>=0.8; extra == 'dev'
+Provides-Extra: fastapi
+Requires-Dist: fastapi>=0.110.0; extra == 'fastapi'

msaas_feedback-0.1.0/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@willianpinho/feedback",
+  "version": "0.1.0",
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com"
+  },
+  "description": "NPS survey and feedback widgets for React SaaS apps",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "lucide-react": "^0.468.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "typescript": "^5.7.0",
+    "vitest": "^3.0.0"
+  },
+  "files": [
+    "dist"
+  ]
+}

msaas_feedback-0.1.0/pyproject.toml

@@ -0,0 +1,41 @@
+[build-system]
+requires = ["hatchling"]
+build-backend = "hatchling.build"
+
+[project]
+name = "msaas-feedback"
+version = "0.1.0"
+description = "User feedback and feature request management for SaaS"
+requires-python = ">=3.12"
+dependencies = [
+"msaas-api-core",
+"msaas-errors","pydantic>=2.0"
+]
+
+[project.optional-dependencies]
+fastapi = ["fastapi>=0.110.0"]
+dev = [
+    "pytest>=8.0",
+    "pytest-asyncio>=0.24",
+    "httpx>=0.27",
+    "fastapi>=0.110.0",
+    "ruff>=0.8",
+]
+
+[tool.hatch.build.targets.wheel]
+packages = ["src/feedback"]
+
+[tool.ruff]
+target-version = "py312"
+line-length = 100
+
+[tool.ruff.lint]
+select = ["E", "F", "I", "N", "W", "UP", "B", "SIM", "TCH"]
+
+[tool.pytest.ini_options]
+testpaths = ["tests"]
+asyncio_mode = "auto"
+
+[tool.uv.sources]
+msaas-api-core = { workspace = true }
+msaas-errors = { workspace = true }

msaas_feedback-0.1.0/src/components/FeedbackWidget.tsx

@@ -0,0 +1,277 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+import { MessageSquare, X } from "lucide-react";
+import { useClickOutside } from "../hooks/useClickOutside";
+import type { FeedbackWidgetConfig } from "../types";
+
+interface RatingOption {
+  value: number;
+  label: string;
+  symbol: string;
+}
+
+const DEFAULT_RATINGS: RatingOption[] = [
+  { value: 3, label: "Happy", symbol: ":-)" },
+  { value: 2, label: "Neutral", symbol: ":-|" },
+  { value: 1, label: "Sad", symbol: ":-(" },
+];
+
+function getCurrentPage(): string {
+  if (typeof window === "undefined") return "/";
+  return window.location.pathname;
+}
+
+/**
+ * Floating feedback button with an expandable panel.
+ *
+ * Collects a smiley-face rating and an optional comment, then calls
+ * `onSubmit` with the structured payload.  The current page is either
+ * passed explicitly via the `page` prop or auto-detected from
+ * `window.location.pathname`.
+ */
+export function FeedbackWidget(props: FeedbackWidgetConfig) {
+  const { onSubmit, page, ratings = DEFAULT_RATINGS } = props;
+
+  const [open, setOpen] = useState(false);
+  const [selectedRating, setSelectedRating] = useState<number | null>(null);
+  const [comment, setComment] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  useClickOutside(panelRef, handleClose);
+
+  function reset() {
+    setSelectedRating(null);
+    setComment("");
+    setSubmitted(false);
+  }
+
+  function handleToggle() {
+    if (open) {
+      setOpen(false);
+    } else {
+      reset();
+      setOpen(true);
+    }
+  }
+
+  async function handleSubmit() {
+    if (selectedRating === null) return;
+
+    setSubmitting(true);
+    try {
+      await onSubmit({
+        rating: selectedRating,
+        comment: comment.trim(),
+        page: page ?? getCurrentPage(),
+      });
+      setSubmitted(true);
+    } catch {
+      // Keep the panel open so the user can retry.
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        bottom: 24,
+        right: 24,
+        zIndex: 9998,
+        fontFamily: "system-ui, -apple-system, sans-serif",
+      }}
+    >
+      {/* --- Panel --- */}
+      {open && (
+        <div
+          ref={panelRef}
+          style={{
+            position: "absolute",
+            bottom: 56,
+            right: 0,
+            width: 320,
+            background: "#ffffff",
+            borderRadius: 12,
+            boxShadow: "0 8px 30px rgba(0,0,0,0.12)",
+            padding: 20,
+          }}
+        >
+          {/* Close */}
+          <button
+            onClick={handleClose}
+            aria-label="Close feedback"
+            style={{
+              position: "absolute",
+              top: 8,
+              right: 8,
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              padding: 4,
+              color: "#94a3b8",
+            }}
+          >
+            <X size={16} />
+          </button>
+
+          {submitted ? (
+            /* --- Thank you state --- */
+            <div style={{ textAlign: "center", padding: "8px 0" }}>
+              <p
+                style={{
+                  margin: "0 0 4px",
+                  fontSize: 16,
+                  fontWeight: 600,
+                  color: "#1e293b",
+                }}
+              >
+                Thank you!
+              </p>
+              <p style={{ margin: 0, fontSize: 13, color: "#64748b" }}>
+                We appreciate your feedback.
+              </p>
+            </div>
+          ) : (
+            /* --- Form --- */
+            <div>
+              <p
+                style={{
+                  margin: "0 0 14px",
+                  fontSize: 15,
+                  fontWeight: 500,
+                  color: "#1e293b",
+                }}
+              >
+                How is your experience?
+              </p>
+
+              {/* Rating buttons */}
+              <div
+                style={{
+                  display: "flex",
+                  gap: 12,
+                  justifyContent: "center",
+                  marginBottom: 14,
+                }}
+              >
+                {ratings.map((r) => (
+                  <button
+                    key={r.value}
+                    onClick={() => setSelectedRating(r.value)}
+                    aria-label={r.label}
+                    style={{
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      gap: 4,
+                      padding: "8px 14px",
+                      borderRadius: 10,
+                      border:
+                        selectedRating === r.value
+                          ? "2px solid #3b82f6"
+                          : "2px solid #e2e8f0",
+                      background:
+                        selectedRating === r.value ? "#eff6ff" : "#f8fafc",
+                      cursor: "pointer",
+                      transition: "all 0.15s",
+                    }}
+                  >
+                    <span style={{ fontSize: 24 }}>{r.symbol}</span>
+                    <span
+                      style={{
+                        fontSize: 11,
+                        color:
+                          selectedRating === r.value ? "#3b82f6" : "#64748b",
+                        fontWeight: selectedRating === r.value ? 600 : 400,
+                      }}
+                    >
+                      {r.label}
+                    </span>
+                  </button>
+                ))}
+              </div>
+
+              {/* Comment */}
+              <textarea
+                value={comment}
+                onChange={(e) => setComment(e.target.value)}
+                rows={3}
+                placeholder="Tell us more... (optional)"
+                style={{
+                  width: "100%",
+                  borderRadius: 8,
+                  border: "1px solid #e2e8f0",
+                  padding: "8px 12px",
+                  fontSize: 13,
+                  resize: "vertical",
+                  fontFamily: "inherit",
+                  boxSizing: "border-box",
+                }}
+              />
+
+              {/* Submit */}
+              <button
+                onClick={() => void handleSubmit()}
+                disabled={selectedRating === null || submitting}
+                style={{
+                  marginTop: 12,
+                  width: "100%",
+                  padding: "10px 0",
+                  borderRadius: 8,
+                  border: "none",
+                  background:
+                    selectedRating === null ? "#cbd5e1" : "#3b82f6",
+                  color: "#ffffff",
+                  fontSize: 14,
+                  fontWeight: 600,
+                  cursor: selectedRating === null ? "not-allowed" : "pointer",
+                  opacity: submitting ? 0.6 : 1,
+                  transition: "background 0.15s",
+                }}
+              >
+                {submitting ? "Sending..." : "Send Feedback"}
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* --- Floating trigger button --- */}
+      <button
+        onClick={handleToggle}
+        aria-label={open ? "Close feedback" : "Give feedback"}
+        style={{
+          width: 48,
+          height: 48,
+          borderRadius: "50%",
+          border: "none",
+          background: "#3b82f6",
+          color: "#ffffff",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          boxShadow: "0 4px 14px rgba(59,130,246,0.4)",
+          transition: "transform 0.15s",
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.transform = "scale(1.08)";
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.transform = "scale(1)";
+        }}
+      >
+        <MessageSquare size={22} />
+      </button>
+    </div>
+  );
+}