@veluai/velu 0.1.13 → 0.1.15

package/runtime/velu-ui/components/PageFeedback.jsx

@@ -1,219 +1,219 @@
-import React, { useState, useMemo, useId } from 'react';
-import resolveIcon from '../lib/resolveIcon.jsx';
-import Stack from '../primitives/Stack.jsx';
-import Cluster from '../primitives/Cluster.jsx';
-
-/* Improvement reasons shown in the "No" follow-up form. */
-const REASONS = [
-  'Help me get started faster',
-  "Make it easier to find what I'm looking for",
-  'Make it easy to understand the product and features',
-  'Update this documentation',
-  'Something else',
-];
-
-/* HeartBurst — a one-shot celebratory burst of hearts. Renders a fan of
-   small hearts that pop up-and-out from their anchor point, tilt, and
-   fade. Mounted only after a click (never during SSR), so the per-heart
-   Math.random() can't cause a hydration mismatch. Re-key it to replay. */
-const HEART_COUNT = 14;
-const HEART_SPREAD = 3.4; // em — horizontal half-width of the fan
-const HEART_PATH =
-  'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z';
-
-function HeartBurst() {
-  const hearts = useMemo(
-    () =>
-      Array.from({ length: HEART_COUNT }, () => ({
-        tx: `${((Math.random() * 2 - 1) * HEART_SPREAD).toFixed(2)}em`,
-        ty: `${(-(0.4 + Math.random() * 0.9) * HEART_SPREAD).toFixed(2)}em`,
-        rot: `${Math.round(Math.random() * 120 - 60)}deg`, // gentle tilt
-        delay: `${(Math.random() * 0.08).toFixed(3)}s`,
-        shade: Math.floor(Math.random() * 4),
-      })),
-    [],
-  );
-  return (
-    <span className="velu-feedback__hearts" aria-hidden="true">
-      {hearts.map((h, i) => (
-        <svg
-          key={i}
-          className={`velu-feedback__heart velu-feedback__heart--${h.shade}`}
-          viewBox="0 0 24 24"
-          style={{
-            '--hb-tx': h.tx,
-            '--hb-ty': h.ty,
-            '--hb-rot': h.rot,
-            animationDelay: h.delay,
-          }}
-        >
-          <path d={HEART_PATH} />
-        </svg>
-      ))}
-    </span>
-  );
-}
-
-/**
- * PageFeedback — the "Was this page helpful?" row at the foot of a docs
- * page. A question label + Yes / No buttons (thumbs-up / thumbs-down).
- *
- *   <PageFeedback onVote={(v) => …} />   // v is 'yes' | 'no'
- *
- * The chosen button takes an accent state. Choosing "Yes" fires a
- * small burst of hearts; choosing "No" expands an improvement form
- * (reason radio group + optional detail + Submit / Cancel). Once the
- * form is submitted — or "Yes" is chosen — a thank-you line shows.
- *
- *  - `question`     the prompt (default "Was this page helpful?")
- *  - `onVote(vote)` fired on every Yes/No change
- *  - `onSubmit({ vote, reason, detail })` fired when the "No" form's
- *    Submit button is pressed
- */
-
-export default function PageFeedback({
-  question = 'Was this page helpful?',
-  onVote,
-  onSubmit,
-  className = '',
-  ...rest
-}) {
-  const [vote, setVote] = useState(null);
-  // Increments each time "Yes" is (re-)chosen — keys <HeartBurst> so
-  // the burst replays.
-  const [burst, setBurst] = useState(0);
-  const [reason, setReason] = useState('');
-  const [detail, setDetail] = useState('');
-  const [submitted, setSubmitted] = useState(false);
-  const radioName = useId();
-
-  function choose(v) {
-    if (v === vote) return; // already selected — no-op
-    setVote(v);
-    setSubmitted(false);
-    onVote?.(v);
-    if (v === 'yes') setBurst((b) => b + 1);
-  }
-
-  function cancel() {
-    setVote(null);
-    setReason('');
-    setDetail('');
-  }
-
-  function submit() {
-    setSubmitted(true);
-    onSubmit?.({ vote: 'no', reason, detail });
-  }
-
-  const showForm = vote === 'no' && !submitted;
-
-  return (
-    <Stack
-      space="var(--s0)"
-      className={`velu-feedback ${className}`.trim()}
-      {...rest}
-    >
-      <Cluster space="var(--s0)" align="center" className="velu-feedback__bar">
-        <span className="velu-feedback__question">{question}</span>
-
-        <Cluster space="var(--s-2)" align="center">
-          <button
-            type="button"
-            className={`velu-feedback__btn${
-              vote === 'yes' ? ' velu-feedback__btn--chosen' : ''
-            }`}
-            onClick={() => choose('yes')}
-            aria-pressed={vote === 'yes'}
-          >
-            <span>Yes</span>
-            {resolveIcon('thumbs-up', { size: '1em' })}
-            {burst > 0 && <HeartBurst key={burst} />}
-          </button>
-          <button
-            type="button"
-            className={`velu-feedback__btn${
-              vote === 'no' ? ' velu-feedback__btn--chosen' : ''
-            }`}
-            onClick={() => choose('no')}
-            aria-pressed={vote === 'no'}
-          >
-            <span>No</span>
-            {resolveIcon('thumbs-down', { size: '1em' })}
-          </button>
-        </Cluster>
-
-        {vote === 'yes' && (
-          <span className="velu-feedback__thanks" role="status">
-            Thanks for your feedback
-          </span>
-        )}
-      </Cluster>
-
-      {showForm && (
-        <Stack space="var(--s1)" className="velu-feedback__form">
-          <h3 className="velu-feedback__form-title">
-            How can we improve our product?
-          </h3>
-
-          <Stack as="div" space="var(--s-2)">
-            {REASONS.map((r) => (
-              <label key={r} className="velu-feedback__radio">
-                <input
-                  type="radio"
-                  name={radioName}
-                  value={r}
-                  checked={reason === r}
-                  onChange={() => setReason(r)}
-                />
-                <span
-                  className="velu-feedback__radio-mark"
-                  aria-hidden="true"
-                />
-                <span className="velu-feedback__radio-label">{r}</span>
-              </label>
-            ))}
-          </Stack>
-
-          <textarea
-            className="velu-feedback__detail"
-            placeholder="(optional) Could you share more about your experience?"
-            value={detail}
-            onChange={(e) => setDetail(e.target.value)}
-            rows={3}
-          />
-
-          <Cluster space="var(--s-1)">
-            <button
-              type="button"
-              className="velu-feedback__action velu-feedback__action--cancel"
-              onClick={cancel}
-            >
-              Cancel
-            </button>
-            <button
-              type="button"
-              className="velu-feedback__action velu-feedback__action--submit"
-              onClick={submit}
-            >
-              Submit Feedback
-            </button>
-          </Cluster>
-        </Stack>
-      )}
-
-      {submitted && (
-        <Stack
-          space="var(--s-5)"
-          className="velu-feedback__sent"
-          role="status"
-        >
-          <span className="velu-feedback__sent-title">Feedback sent</span>
-          <span className="velu-feedback__sent-note">
-            Thanks for feedback
-          </span>
-        </Stack>
-      )}
-    </Stack>
-  );
-}
+import React, { useState, useMemo, useId } from 'react';
+import resolveIcon from '../lib/resolveIcon.jsx';
+import Stack from '../primitives/Stack.jsx';
+import Cluster from '../primitives/Cluster.jsx';
+
+/* Improvement reasons shown in the "No" follow-up form. */
+const REASONS = [
+  'Help me get started faster',
+  "Make it easier to find what I'm looking for",
+  'Make it easy to understand the product and features',
+  'Update this documentation',
+  'Something else',
+];
+
+/* HeartBurst — a one-shot celebratory burst of hearts. Renders a fan of
+   small hearts that pop up-and-out from their anchor point, tilt, and
+   fade. Mounted only after a click (never during SSR), so the per-heart
+   Math.random() can't cause a hydration mismatch. Re-key it to replay. */
+const HEART_COUNT = 14;
+const HEART_SPREAD = 3.4; // em — horizontal half-width of the fan
+const HEART_PATH =
+  'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z';
+
+function HeartBurst() {
+  const hearts = useMemo(
+    () =>
+      Array.from({ length: HEART_COUNT }, () => ({
+        tx: `${((Math.random() * 2 - 1) * HEART_SPREAD).toFixed(2)}em`,
+        ty: `${(-(0.4 + Math.random() * 0.9) * HEART_SPREAD).toFixed(2)}em`,
+        rot: `${Math.round(Math.random() * 120 - 60)}deg`, // gentle tilt
+        delay: `${(Math.random() * 0.08).toFixed(3)}s`,
+        shade: Math.floor(Math.random() * 4),
+      })),
+    [],
+  );
+  return (
+    <span className="velu-feedback__hearts" aria-hidden="true">
+      {hearts.map((h, i) => (
+        <svg
+          key={i}
+          className={`velu-feedback__heart velu-feedback__heart--${h.shade}`}
+          viewBox="0 0 24 24"
+          style={{
+            '--hb-tx': h.tx,
+            '--hb-ty': h.ty,
+            '--hb-rot': h.rot,
+            animationDelay: h.delay,
+          }}
+        >
+          <path d={HEART_PATH} />
+        </svg>
+      ))}
+    </span>
+  );
+}
+
+/**
+ * PageFeedback — the "Was this page helpful?" row at the foot of a docs
+ * page. A question label + Yes / No buttons (thumbs-up / thumbs-down).
+ *
+ *   <PageFeedback onVote={(v) => …} />   // v is 'yes' | 'no'
+ *
+ * The chosen button takes an accent state. Choosing "Yes" fires a
+ * small burst of hearts; choosing "No" expands an improvement form
+ * (reason radio group + optional detail + Submit / Cancel). Once the
+ * form is submitted — or "Yes" is chosen — a thank-you line shows.
+ *
+ *  - `question`     the prompt (default "Was this page helpful?")
+ *  - `onVote(vote)` fired on every Yes/No change
+ *  - `onSubmit({ vote, reason, detail })` fired when the "No" form's
+ *    Submit button is pressed
+ */
+
+export default function PageFeedback({
+  question = 'Was this page helpful?',
+  onVote,
+  onSubmit,
+  className = '',
+  ...rest
+}) {
+  const [vote, setVote] = useState(null);
+  // Increments each time "Yes" is (re-)chosen — keys <HeartBurst> so
+  // the burst replays.
+  const [burst, setBurst] = useState(0);
+  const [reason, setReason] = useState('');
+  const [detail, setDetail] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+  const radioName = useId();
+
+  function choose(v) {
+    if (v === vote) return; // already selected — no-op
+    setVote(v);
+    setSubmitted(false);
+    onVote?.(v);
+    if (v === 'yes') setBurst((b) => b + 1);
+  }
+
+  function cancel() {
+    setVote(null);
+    setReason('');
+    setDetail('');
+  }
+
+  function submit() {
+    setSubmitted(true);
+    onSubmit?.({ vote: 'no', reason, detail });
+  }
+
+  const showForm = vote === 'no' && !submitted;
+
+  return (
+    <Stack
+      space="var(--s0)"
+      className={`velu-feedback ${className}`.trim()}
+      {...rest}
+    >
+      <Cluster space="var(--s0)" align="center" className="velu-feedback__bar">
+        <span className="velu-feedback__question">{question}</span>
+
+        <Cluster space="var(--s-2)" align="center">
+          <button
+            type="button"
+            className={`velu-feedback__btn${
+              vote === 'yes' ? ' velu-feedback__btn--chosen' : ''
+            }`}
+            onClick={() => choose('yes')}
+            aria-pressed={vote === 'yes'}
+          >
+            <span>Yes</span>
+            {resolveIcon('thumbs-up', { size: '1em' })}
+            {burst > 0 && <HeartBurst key={burst} />}
+          </button>
+          <button
+            type="button"
+            className={`velu-feedback__btn${
+              vote === 'no' ? ' velu-feedback__btn--chosen' : ''
+            }`}
+            onClick={() => choose('no')}
+            aria-pressed={vote === 'no'}
+          >
+            <span>No</span>
+            {resolveIcon('thumbs-down', { size: '1em' })}
+          </button>
+        </Cluster>
+
+        {vote === 'yes' && (
+          <span className="velu-feedback__thanks" role="status">
+            Thanks for your feedback
+          </span>
+        )}
+      </Cluster>
+
+      {showForm && (
+        <Stack space="var(--s1)" className="velu-feedback__form">
+          <h3 className="velu-feedback__form-title">
+            How can we improve our product?
+          </h3>
+
+          <Stack as="div" space="var(--s-2)">
+            {REASONS.map((r) => (
+              <label key={r} className="velu-feedback__radio">
+                <input
+                  type="radio"
+                  name={radioName}
+                  value={r}
+                  checked={reason === r}
+                  onChange={() => setReason(r)}
+                />
+                <span
+                  className="velu-feedback__radio-mark"
+                  aria-hidden="true"
+                />
+                <span className="velu-feedback__radio-label">{r}</span>
+              </label>
+            ))}
+          </Stack>
+
+          <textarea
+            className="velu-feedback__detail"
+            placeholder="(optional) Could you share more about your experience?"
+            value={detail}
+            onChange={(e) => setDetail(e.target.value)}
+            rows={3}
+          />
+
+          <Cluster space="var(--s-1)">
+            <button
+              type="button"
+              className="velu-feedback__action velu-feedback__action--cancel"
+              onClick={cancel}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              className="velu-feedback__action velu-feedback__action--submit"
+              onClick={submit}
+            >
+              Submit Feedback
+            </button>
+          </Cluster>
+        </Stack>
+      )}
+
+      {submitted && (
+        <Stack
+          space="var(--s-5)"
+          className="velu-feedback__sent"
+          role="status"
+        >
+          <span className="velu-feedback__sent-title">Feedback sent</span>
+          <span className="velu-feedback__sent-note">
+            Thanks for feedback
+          </span>
+        </Stack>
+      )}
+    </Stack>
+  );
+}