@scalemule/nextjs 0.1.0 → 0.1.1

package/dist/index.d.mts

@@ -429,6 +429,14 @@ interface FeedbackWidgetProps {
     theme?: 'light' | 'dark' | 'auto';
     /** Optional class for the trigger button (use to override styling). */
     className?: string;
+    /** Show the 1–5 star rating row. Default `true`. Rating is stored as a
+     *  `rating:N` tag on the feedback item — staff can filter on it from the
+     *  dashboard inbox. Optional per submission; users who skip it just submit
+     *  without a rating. */
+    enableRating?: boolean;
+    /** Label for the rating row when enabled. Default `How would you rate
+     *  your experience?`. */
+    ratingLabel?: string;
     /** Called after a successful submit. */
     onSubmitted?: (item: FeedbackItem) => void;
 }

package/dist/index.d.ts

@@ -429,6 +429,14 @@ interface FeedbackWidgetProps {
     theme?: 'light' | 'dark' | 'auto';
     /** Optional class for the trigger button (use to override styling). */
     className?: string;
+    /** Show the 1–5 star rating row. Default `true`. Rating is stored as a
+     *  `rating:N` tag on the feedback item — staff can filter on it from the
+     *  dashboard inbox. Optional per submission; users who skip it just submit
+     *  without a rating. */
+    enableRating?: boolean;
+    /** Label for the rating row when enabled. Default `How would you rate
+     *  your experience?`. */
+    ratingLabel?: string;
     /** Called after a successful submit. */
     onSubmitted?: (item: FeedbackItem) => void;
 }

package/dist/index.js

@@ -9778,6 +9778,8 @@ function FeedbackWidget(props) {
     triggerLabel = "Feedback",
     theme = "auto",
     className,
+    enableRating = true,
+    ratingLabel = "How would you rate your experience?",
     onSubmitted
   } = props;
   const sm = useScaleMule();
@@ -9787,6 +9789,8 @@ function FeedbackWidget(props) {
   const [title, setTitle] = react.useState("");
   const [description, setDescription] = react.useState("");
   const [email, setEmail] = react.useState("");
+  const [rating, setRating] = react.useState(null);
+  const [hoverRating, setHoverRating] = react.useState(null);
   const [submitting, setSubmitting] = react.useState(false);
   const [errMsg, setErrMsg] = react.useState(null);
   const [done, setDone] = react.useState(false);
@@ -9797,6 +9801,8 @@ function FeedbackWidget(props) {
     setTitle("");
     setDescription("");
     setEmail("");
+    setRating(null);
+    setHoverRating(null);
     setErrMsg(null);
     setDone(false);
   }
@@ -9810,11 +9816,13 @@ function FeedbackWidget(props) {
     setSubmitting(true);
     setErrMsg(null);
     try {
+      const tags = rating != null ? [`rating:${rating}`] : void 0;
       const item = await submit({
         type,
         title: title.trim(),
         description: description.trim(),
-        email: signedIn ? void 0 : email.trim() || void 0
+        email: signedIn ? void 0 : email.trim() || void 0,
+        tags
       });
       setDone(true);
       onSubmitted?.(item);
@@ -9873,6 +9881,53 @@ function FeedbackWidget(props) {
               }
             )
           ] }),
+          enableRating && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: STYLES.label, children: ratingLabel }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 4, marginTop: 4 }, children: [
+              [1, 2, 3, 4, 5].map((n) => {
+                const active = (hoverRating ?? rating ?? 0) >= n;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `${n} star${n === 1 ? "" : "s"}`,
+                    onClick: () => setRating(rating === n ? null : n),
+                    onMouseEnter: () => setHoverRating(n),
+                    onMouseLeave: () => setHoverRating(null),
+                    style: {
+                      background: "transparent",
+                      border: "none",
+                      cursor: "pointer",
+                      padding: 2,
+                      fontSize: 24,
+                      lineHeight: 1,
+                      color: active ? "#f59e0b" : "#cbd5e1",
+                      transition: "color 80ms ease"
+                    },
+                    children: active ? "\u2605" : "\u2606"
+                  },
+                  n
+                );
+              }),
+              rating != null && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setRating(null),
+                  style: {
+                    marginLeft: 8,
+                    background: "transparent",
+                    border: "none",
+                    color: "inherit",
+                    opacity: 0.6,
+                    fontSize: 12,
+                    cursor: "pointer"
+                  },
+                  children: "clear"
+                }
+              )
+            ] })
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: STYLES.label, children: "Type" }),
             /* @__PURE__ */ jsxRuntime.jsx(

package/dist/index.mjs

@@ -9777,6 +9777,8 @@ function FeedbackWidget(props) {
     triggerLabel = "Feedback",
     theme = "auto",
     className,
+    enableRating = true,
+    ratingLabel = "How would you rate your experience?",
     onSubmitted
   } = props;
   const sm = useScaleMule();
@@ -9786,6 +9788,8 @@ function FeedbackWidget(props) {
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
   const [email, setEmail] = useState("");
+  const [rating, setRating] = useState(null);
+  const [hoverRating, setHoverRating] = useState(null);
   const [submitting, setSubmitting] = useState(false);
   const [errMsg, setErrMsg] = useState(null);
   const [done, setDone] = useState(false);
@@ -9796,6 +9800,8 @@ function FeedbackWidget(props) {
     setTitle("");
     setDescription("");
     setEmail("");
+    setRating(null);
+    setHoverRating(null);
     setErrMsg(null);
     setDone(false);
   }
@@ -9809,11 +9815,13 @@ function FeedbackWidget(props) {
     setSubmitting(true);
     setErrMsg(null);
     try {
+      const tags = rating != null ? [`rating:${rating}`] : void 0;
       const item = await submit({
         type,
         title: title.trim(),
         description: description.trim(),
-        email: signedIn ? void 0 : email.trim() || void 0
+        email: signedIn ? void 0 : email.trim() || void 0,
+        tags
       });
       setDone(true);
       onSubmitted?.(item);
@@ -9872,6 +9880,53 @@ function FeedbackWidget(props) {
               }
             )
           ] }),
+          enableRating && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { style: STYLES.label, children: ratingLabel }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 4, marginTop: 4 }, children: [
+              [1, 2, 3, 4, 5].map((n) => {
+                const active = (hoverRating ?? rating ?? 0) >= n;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `${n} star${n === 1 ? "" : "s"}`,
+                    onClick: () => setRating(rating === n ? null : n),
+                    onMouseEnter: () => setHoverRating(n),
+                    onMouseLeave: () => setHoverRating(null),
+                    style: {
+                      background: "transparent",
+                      border: "none",
+                      cursor: "pointer",
+                      padding: 2,
+                      fontSize: 24,
+                      lineHeight: 1,
+                      color: active ? "#f59e0b" : "#cbd5e1",
+                      transition: "color 80ms ease"
+                    },
+                    children: active ? "\u2605" : "\u2606"
+                  },
+                  n
+                );
+              }),
+              rating != null && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setRating(null),
+                  style: {
+                    marginLeft: 8,
+                    background: "transparent",
+                    border: "none",
+                    color: "inherit",
+                    opacity: 0.6,
+                    fontSize: 12,
+                    cursor: "pointer"
+                  },
+                  children: "clear"
+                }
+              )
+            ] })
+          ] }),
           /* @__PURE__ */ jsxs("label", { children: [
             /* @__PURE__ */ jsx("div", { style: STYLES.label, children: "Type" }),
             /* @__PURE__ */ jsx(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalemule/nextjs",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "ScaleMule SDK for Next.js applications - authentication, storage, and user management",
   "main": "dist/index.js",
   "module": "dist/index.mjs",