@stamprally/ui 0.10.0 → 0.12.0

package/README.md

@@ -0,0 +1,36 @@
+# @stamprally/ui
+
+Participant-facing React components for `@stamprally/core`.
+
+## Setup
+
+```tsx
+import { RallyViewer } from "@stamprally/ui";
+import "@stamprally/ui/styles.css";
+
+<RallyViewer config={publicConfig} locale="en" />;
+```
+
+For a stateful client, pass `client={new StampRallyClient(publicConfig, options)}`.
+The viewer subscribes to client state, renders all configured verification conditions,
+and exposes check-in and reward actions through the same client.
+
+## Render Props customization
+
+`renderSpotCard`, `renderRewardCard`, `renderStatusBadge`, and the header/footer slots
+allow a host application to replace presentation while retaining the domain engine.
+`customConditionRenderers` can provide an application-specific QR, NFC, or custom
+verification control. A custom renderer calls `onSubmit(proof)` when it has a proof.
+
+```tsx
+<RallyViewer
+  config={publicConfig}
+  locale="ja"
+  renderStatusBadge={({ status }) => <span data-status={status}>{status}</span>}
+  renderSpotCard={({ spot, children }) => <article><h2>{spot.name}</h2>{children}</article>}
+/>
+```
+
+Keep private condition secrets, staff passcodes, digital content URLs, and
+`serverMetadata` in the server-side `AdminRallyConfig`; publish only the result of
+`toPublicConfig`.

package/dist/index.cjs

@@ -6,11 +6,17 @@ var jsxRuntime = require('react/jsx-runtime');
 
 // src/index.tsx
 var label = (dictionary, locale, key, fallback) => dictionary?.[locale]?.[key] ?? fallback;
+var join = (...names) => {
+  const value = names.filter((name) => name !== void 0 && name !== "").join(" ");
+  return value === "" ? void 0 : value;
+};
 function DefaultCondition({
   condition,
   dictionary,
   locale,
   disabled,
+  classNames,
+  styles,
   onSubmit
 }) {
   const [value, setValue] = react.useState("");
@@ -32,17 +38,9 @@ function DefaultCondition({
       setError(text("verificationFailed", "Verification failed."));
     }
   };
-  const submit = (event) => {
-    event.preventDefault();
-    if (condition.type === "gps") return;
-    if (condition.type === "nfc") return;
-    void verify(condition.type === "passcode" ? value : value);
-  };
-  const scanQr = () => {
-    if (videoRef.current === null) return;
+  const readLocation = () => {
     setStatus("loading");
-    setError(null);
-    void core.readQrContext(videoRef.current).then((result) => {
+    void core.getCurrentGeoContext().then((result) => {
       if (result.ok) void verify(result.value);
       else {
         setStatus("error");
@@ -50,10 +48,9 @@ function DefaultCondition({
       }
     });
   };
-  const readLocation = () => {
+  const readNfc = () => {
     setStatus("loading");
-    setError(null);
-    void core.getCurrentGeoContext().then((result) => {
+    void core.readNfcContext().then((result) => {
       if (result.ok) void verify(result.value);
       else {
         setStatus("error");
@@ -61,10 +58,10 @@ function DefaultCondition({
       }
     });
   };
-  const readNfc = () => {
+  const scanQr = () => {
+    if (videoRef.current === null) return;
     setStatus("loading");
-    setError(null);
-    void core.readNfcContext().then((result) => {
+    void core.readQrContext(videoRef.current).then((result) => {
       if (result.ok) void verify(result.value);
       else {
         setStatus("error");
@@ -99,45 +96,76 @@ function DefaultCondition({
         "button",
         {
           type: "button",
-          className: "sry-action",
+          className: join("sry-action", classNames?.action, classNames?.button),
+          style: styles?.button ?? styles?.action,
           disabled: disabled || !core.isQrSupported(),
           onClick: scanQr,
           children: text("scanQr", "Scan QR")
         }
       )
     ] }),
-    condition.type === "gps" && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "sry-action", disabled, onClick: readLocation, children: text("checkLocation", "Check location") }),
+    condition.type === "gps" && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: join("sry-action", classNames?.action, classNames?.button),
+        style: styles?.button ?? styles?.action,
+        disabled,
+        onClick: readLocation,
+        children: text("checkLocation", "Check location")
+      }
+    ),
     condition.type === "nfc" && /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
-        className: "sry-action",
+        className: join("sry-action", classNames?.action, classNames?.button),
+        style: styles?.button ?? styles?.action,
         disabled: disabled || !core.isNfcSupported(),
         onClick: readNfc,
         children: text("readNfc", "Read NFC")
       }
     ),
-    (condition.type === "passcode" || condition.type === "custom" || condition.type === "qr") && /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: submit, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-        text(
-          condition.type === "passcode" ? "passcode" : "proof",
-          condition.type === "passcode" ? "Passcode" : "Proof"
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            "aria-label": text("proof", "Proof"),
-            value,
-            onChange: (event) => setValue(event.target.value)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: "sry-action", disabled: disabled || value.trim() === "", children: text("checkIn", "Check in") })
-    ] }),
+    (condition.type === "passcode" || condition.type === "custom" || condition.type === "qr") && /* @__PURE__ */ jsxRuntime.jsxs(
+      "form",
+      {
+        onSubmit: (event) => {
+          event.preventDefault();
+          void verify(value);
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+            text(
+              condition.type === "passcode" ? "passcode" : "proof",
+              condition.type === "passcode" ? "Passcode" : "Proof"
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                "aria-label": text("proof", "Proof"),
+                value,
+                onChange: (event) => setValue(event.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "submit",
+              className: join("sry-action", classNames?.action, classNames?.button),
+              style: styles?.button ?? styles?.action,
+              disabled: disabled || value.trim() === "",
+              children: text("checkIn", "Check in")
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: "sry-feedback",
+        className: join("sry-feedback", classNames?.feedback),
+        style: styles?.feedback,
         "aria-live": "polite",
         role: status === "error" ? "alert" : void 0,
         children: [
@@ -149,6 +177,35 @@ function DefaultCondition({
     )
   ] });
 }
+function DefaultRewardCard({
+  reward,
+  state,
+  locale,
+  dictionary,
+  onClaim,
+  classNames,
+  styles
+}) {
+  const status = state?.status ?? "LOCKED";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: join(classNames?.reward, classNames?.button),
+      style: styles?.reward ?? styles?.button,
+      disabled: status !== "AVAILABLE" || onClaim === void 0,
+      onClick: () => {
+        if (onClaim !== void 0) void onClaim(reward.id);
+      },
+      children: [
+        core.resolveLocalizedText(reward.title, locale),
+        " (",
+        label(dictionary, locale, `status.${status.toLowerCase()}`, status),
+        ")"
+      ]
+    }
+  );
+}
 function RallyViewer({
   config: providedConfig,
   client,
@@ -156,12 +213,22 @@ function RallyViewer({
   locale,
   dictionary,
   classNames = {},
+  styles = {},
   style,
-  customConditionRenderers = {}
+  customConditionRenderers = {},
+  headerSlot,
+  footerSlot,
+  renderSpotCard,
+  renderRewardCard,
+  renderStatusBadge,
+  renderVerifyingState,
+  renderSuccessFeedback,
+  renderErrorFeedback
 }) {
   const config = providedConfig ?? client?.getConfig() ?? adapter?.config;
   const [state, setState] = react.useState(() => client?.getState() ?? null);
   const [busy, setBusy] = react.useState(null);
+  const [feedback, setFeedback] = react.useState(null);
   react.useEffect(() => {
     if (client === void 0) return;
     const unsubscribe = client.subscribe(setState);
@@ -169,20 +236,26 @@ function RallyViewer({
     return unsubscribe;
   }, [client]);
   if (config === void 0) throw new Error("RallyViewer requires config, client, or adapter.");
+  const currentState = state ?? {
+    rallyId: config.id,
+    userId: null,
+    records: [],
+    rewards: [],
+    updatedAt: ""
+  };
   const progress = react.useMemo(
-    () => core.calculateProgress(
-      state ?? { rallyId: config.id, userId: null, records: [], rewards: [], updatedAt: "" },
-      config
-    ),
-    [config, state]
+    () => core.calculateProgress(currentState, config),
+    [config, currentState]
   );
   const checkIn = adapter?.onCheckIn ?? (client === void 0 ? void 0 : (spotId, proof, options) => client.checkIn(spotId, proof, options));
   const claim = adapter?.onClaimReward ?? (client === void 0 ? void 0 : (rewardId, options) => client.claimReward(rewardId, options));
   const submit = react.useCallback(
-    (spotId, proof) => {
-      if (checkIn === void 0) return Promise.resolve(void 0);
+    async (spotId, proof) => {
+      if (checkIn === void 0) return void 0;
       setBusy(spotId);
-      return checkIn(spotId, proof).finally(() => setBusy(null));
+      const result = await checkIn(spotId, proof).finally(() => setBusy(null));
+      setFeedback(result);
+      return result;
     },
     [checkIn]
   );
@@ -190,111 +263,143 @@ function RallyViewer({
     "section",
     {
       className: classNames.root,
-      style,
+      style: styles.root ?? style,
       "aria-label": label(dictionary, locale, "viewer", "Stamp rally"),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { children: core.resolveLocalizedText(config.title, locale) || config.id }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "progress",
-          {
-            "aria-label": label(dictionary, locale, "progress", "Progress"),
-            max: 100,
-            value: progress.percentage
-          }
-        ),
-        " ",
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-          progress.acquired,
-          "/",
-          progress.total
+        /* @__PURE__ */ jsxRuntime.jsxs("header", { className: classNames.header, style: styles.header, children: [
+          typeof headerSlot === "function" ? headerSlot({ config, state: currentState }) : headerSlot,
+          headerSlot === void 0 && /* @__PURE__ */ jsxRuntime.jsx("h1", { children: core.resolveLocalizedText(config.title, locale) || config.id }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "progress",
+            {
+              "aria-label": label(dictionary, locale, "progress", "Progress"),
+              max: 100,
+              value: progress.percentage
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            progress.acquired,
+            "/",
+            progress.total
+          ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { children: config.spots.map(
-          (spot) => spot.conditions.map((condition) => {
+        busy !== null && renderVerifyingState?.(),
+        feedback?.ok === true && renderSuccessFeedback?.(feedback),
+        feedback?.ok === false && renderErrorFeedback?.(
+          "message" in feedback.error ? feedback.error.message : feedback.error.code
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: config.spots.map((spot) => {
+          const claimed = currentState.records.some((record) => record.stampId === spot.id);
+          const status = busy === spot.id ? "verifying" : claimed ? "claimed" : "available";
+          const children = spot.conditions.map((condition) => {
             const Renderer = customConditionRenderers[condition.type] ?? DefaultCondition;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "article",
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
               {
                 className: classNames.condition,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("h2", { children: core.resolveLocalizedText(spot.name, locale) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    Renderer,
-                    {
-                      spot,
-                      condition,
-                      locale,
-                      ...dictionary === void 0 ? {} : { dictionary },
-                      disabled: busy !== null,
-                      onSubmit: (proof) => submit(spot.id, proof)
-                    }
-                  )
-                ]
+                style: styles.condition,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Renderer,
+                  {
+                    spot,
+                    condition,
+                    locale,
+                    ...dictionary === void 0 ? {} : { dictionary },
+                    disabled: busy !== null || claimed,
+                    ...Object.keys(classNames).length === 0 ? {} : { classNames },
+                    ...Object.keys(styles).length === 0 ? {} : { styles },
+                    onSubmit: (proof) => submit(spot.id, proof)
+                  }
+                )
               },
               `${spot.id}-${condition.type}-${JSON.stringify(condition)}`
             );
-          })
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("section", { "aria-label": label(dictionary, locale, "rewards", "Rewards"), children: config.rewards.map((reward) => /* @__PURE__ */ jsxRuntime.jsx(
-          RewardButton,
-          {
+          });
+          const props = {
+            spot,
+            state: currentState,
+            status,
+            locale,
+            ...dictionary === void 0 ? {} : { dictionary },
+            children
+          };
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames.card, style: styles.card, children: renderSpotCard?.(props) ?? /* @__PURE__ */ jsxRuntime.jsxs("article", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { children: core.resolveLocalizedText(spot.name, locale) }),
+            renderStatusBadge?.({ status }) ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: classNames.badge, style: styles.badge, children: status }),
+            children
+          ] }) }, spot.id);
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("section", { "aria-label": label(dictionary, locale, "rewards", "Rewards"), children: config.rewards.map((reward) => {
+          const props = {
             reward,
-            state: state?.rewards.find((item) => item.rewardId === reward.id),
+            state: currentState.rewards.find((item) => item.rewardId === reward.id),
             locale,
             ...dictionary === void 0 ? {} : { dictionary },
-            ...classNames.reward === void 0 ? {} : { className: classNames.reward },
             onClaim: claim
-          },
-          reward.id
-        )) })
+          };
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames.reward, style: styles.reward, children: renderRewardCard?.(props) ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultRewardCard, { ...props, classNames, styles }) }, reward.id);
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("footer", { className: classNames.footer, style: styles.footer, children: footerSlot })
       ]
     }
   );
 }
-function RewardButton({
-  reward,
+function StampSheet({
+  config,
   state,
-  locale,
+  title,
+  progress,
+  locale = "en",
   dictionary,
-  className,
-  onClaim
+  classNames = {},
+  styles = {},
+  style,
+  headerSlot,
+  footerSlot,
+  renderSpotCard,
+  renderStatusBadge
 }) {
-  const status = state?.status ?? "LOCKED";
+  const currentState = state ?? {
+    rallyId: config.id,
+    userId: null,
+    records: [],
+    rewards: [],
+    updatedAt: ""
+  };
+  const current = progress ?? core.calculateProgress(currentState, config);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
+    "section",
     {
-      type: "button",
-      className,
-      disabled: status !== "AVAILABLE" || onClaim === void 0,
-      onClick: () => {
-        if (onClaim !== void 0) void onClaim(reward.id);
-      },
+      className: classNames.root,
+      style: styles.root ?? style,
+      "aria-label": title ?? label(dictionary, locale, "stampSheet", "Stamp sheet"),
       children: [
-        core.resolveLocalizedText(reward.title, locale),
-        " (",
-        label(dictionary, locale, `status.${status.toLowerCase()}`, status),
-        ")"
+        /* @__PURE__ */ jsxRuntime.jsxs("header", { className: classNames.header, style: styles.header, children: [
+          typeof headerSlot === "function" ? headerSlot({ config, state: currentState }) : headerSlot ?? /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title ?? core.resolveLocalizedText(config.title, locale) }),
+          /* @__PURE__ */ jsxRuntime.jsx("progress", { max: 100, value: current.percentage })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: config.spots.map((spot) => {
+          const claimed = currentState.records.some((record) => record.stampId === spot.id);
+          const status = claimed ? "claimed" : "available";
+          const props = {
+            spot,
+            state: currentState,
+            status,
+            locale,
+            ...dictionary === void 0 ? {} : { dictionary },
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: classNames.slot, style: styles.slot, children: claimed ? "\u2713" : "\u25CB" })
+          };
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames.card, style: styles.card, children: renderSpotCard?.(props) ?? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: classNames.slot, style: styles.slot, children: [
+            core.resolveLocalizedText(spot.name, locale),
+            " ",
+            renderStatusBadge?.({ status }) ?? (claimed ? "\u2713" : "\u25CB")
+          ] }) }, spot.id);
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("footer", { className: classNames.footer, style: styles.footer, children: footerSlot })
       ]
     }
   );
 }
-function StampSheet({
-  config,
-  state,
-  title,
-  progress,
-  locale = "en",
-  dictionary
-}) {
-  const current = progress ?? core.calculateProgress(
-    state ?? { rallyId: config.id, userId: null, records: [], rewards: [], updatedAt: "" },
-    config
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": title ?? label(dictionary, locale, "stampSheet", "Stamp sheet"), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title ?? core.resolveLocalizedText(config.title, locale) }),
-    /* @__PURE__ */ jsxRuntime.jsx("progress", { max: 100, value: current.percentage }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { children: config.spots.map((spot) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: state?.records.some((record) => record.stampId === spot.id) ? "\u2713" : "\u25CB" }, spot.id)) })
-  ] });
-}
 
 exports.RallyViewer = RallyViewer;
 exports.StampSheet = StampSheet;