@stamprally/ui 0.2.1 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,8 +1,61 @@
1
1
  import { resolveLocalizedText, DEFAULT_SHEET_THEME } from '@stamprally/core';
2
- import { useState, useEffect } from 'react';
2
+ import { useState, useEffect, useRef } from 'react';
3
3
  import { jsxs, jsx } from 'react/jsx-runtime';
4
4
 
5
5
  // src/index.tsx
6
+ function useFocusTrap(active, onClose, closeDisabled = false) {
7
+ const containerRef = useRef(null);
8
+ useEffect(() => {
9
+ if (!active) return;
10
+ const container = containerRef.current;
11
+ if (container === null) return;
12
+ const focusableSelector = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
13
+ const focusable = () => Array.from(container.querySelectorAll(focusableSelector));
14
+ const first = focusable()[0];
15
+ first?.focus();
16
+ const handleKeyDown = (event) => {
17
+ if (event.key === "Escape") {
18
+ if (!closeDisabled) {
19
+ event.preventDefault();
20
+ onClose?.();
21
+ }
22
+ return;
23
+ }
24
+ if (event.key !== "Tab") return;
25
+ const elements = focusable();
26
+ if (elements.length === 0) {
27
+ event.preventDefault();
28
+ container.focus();
29
+ return;
30
+ }
31
+ const firstElement = elements[0];
32
+ const lastElement = elements[elements.length - 1];
33
+ if (event.shiftKey && document.activeElement === firstElement) {
34
+ event.preventDefault();
35
+ lastElement?.focus();
36
+ } else if (!event.shiftKey && document.activeElement === lastElement) {
37
+ event.preventDefault();
38
+ firstElement?.focus();
39
+ }
40
+ };
41
+ document.addEventListener("keydown", handleKeyDown);
42
+ return () => document.removeEventListener("keydown", handleKeyDown);
43
+ }, [active, closeDisabled, onClose]);
44
+ return containerRef;
45
+ }
46
+ var FONT_STACKS = {
47
+ "system-ui": 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
48
+ serif: 'Georgia, "Times New Roman", "Yu Mincho", serif',
49
+ "rounded-sans": '"Arial Rounded MT Bold", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif',
50
+ monospace: 'ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace',
51
+ handwritten: '"Segoe Print", "Bradley Hand", "Comic Sans MS", cursive'
52
+ };
53
+ function formatStampDate(value) {
54
+ const date = new Date(value);
55
+ if (Number.isNaN(date.getTime())) return value;
56
+ const pad = (part) => String(part).padStart(2, "0");
57
+ return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
58
+ }
6
59
  function StampSlot({
7
60
  stamp,
8
61
  record,
@@ -13,9 +66,12 @@ function StampSlot({
13
66
  disabled = false,
14
67
  slotShape = "rounded",
15
68
  locale = "ja",
69
+ statusText,
16
70
  onSelect
17
71
  }) {
18
72
  const status = record === void 0 ? isNext ? "available" : "locked" : "stamped";
73
+ const resolvedStatus = statusText ?? status;
74
+ const statusSeparator = statusText !== void 0 && locale === "ja" ? "\u3001" : ", ";
19
75
  const name = resolveLocalizedText(stamp.name, locale);
20
76
  const label = presentation.label ?? stamp.condition.type;
21
77
  return /* @__PURE__ */ jsxs(
@@ -24,16 +80,38 @@ function StampSlot({
24
80
  type: "button",
25
81
  disabled,
26
82
  onClick: onSelect,
27
- "aria-label": `${slotNumber}. ${name} (${status})`,
83
+ "aria-label": `#${String(slotNumber).padStart(2, "0")} ${name}${statusSeparator}${resolvedStatus}`,
84
+ "aria-disabled": disabled,
28
85
  "data-status": status,
29
86
  "data-shape": slotShape,
30
- className: `stamp-slot stamp-slot--${status}${isAnimating ? " stamp-slot--animating" : ""}`,
87
+ className: `stamp-slot stamp-slot--${status} stamp-slot--${presentation.ink ?? "vermilion"} stamp-slot--shape-${slotShape}${isAnimating ? " stamp-slot--animating" : ""}`,
31
88
  style: { "--stamp-primary": "var(--stamprally-primary, #9e551e)" },
32
89
  children: [
33
- /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: presentation.icon ?? "\u2726" }),
34
- /* @__PURE__ */ jsx("strong", { children: name }),
35
- /* @__PURE__ */ jsx("small", { children: label }),
36
- record !== void 0 && /* @__PURE__ */ jsx("time", { dateTime: record.acquiredAt, children: record.acquiredAt })
90
+ /* @__PURE__ */ jsxs("span", { className: "stamp-slot__topline", children: [
91
+ /* @__PURE__ */ jsxs("span", { className: "stamp-slot__number", children: [
92
+ "#",
93
+ String(slotNumber).padStart(2, "0")
94
+ ] }),
95
+ /* @__PURE__ */ jsx("span", { className: `stamp-slot__state stamp-slot__state--${status}`, children: resolvedStatus })
96
+ ] }),
97
+ /* @__PURE__ */ jsx("span", { className: "stamp-slot__watermark", "aria-hidden": "true", children: presentation.icon ?? "\u2726" }),
98
+ /* @__PURE__ */ jsx("span", { className: "stamp-slot__name", children: name }),
99
+ /* @__PURE__ */ jsxs("span", { className: "stamp-slot__condition", children: [
100
+ /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: presentation.icon ?? "\u2726" }),
101
+ label
102
+ ] }),
103
+ record !== void 0 && /* @__PURE__ */ jsx(
104
+ "span",
105
+ {
106
+ className: `stamp-imprint ${isAnimating ? "stamp-press" : ""}`,
107
+ role: "img",
108
+ "aria-label": `Acquired at ${formatStampDate(record.acquiredAt)}`,
109
+ children: /* @__PURE__ */ jsxs("span", { className: "stamp-imprint__inner", children: [
110
+ /* @__PURE__ */ jsx("span", { className: "stamp-imprint__word", children: "STAMP" }),
111
+ /* @__PURE__ */ jsx("span", { className: "stamp-imprint__date", children: formatStampDate(record.acquiredAt) })
112
+ ] })
113
+ }
114
+ )
37
115
  ]
38
116
  }
39
117
  );
@@ -56,54 +134,96 @@ function StampSheet({
56
134
  const total = progress?.total ?? config.stamps.length;
57
135
  const percentage = progress?.percentage ?? (total === 0 ? 0 : count / total * 100);
58
136
  const style = {
59
- "--stamprally-primary": theme.primaryColor,
60
- "--stamprally-background": theme.backgroundColor ?? "transparent",
61
- "--stamprally-card": theme.cardBackgroundColor,
62
- "--stamprally-text": theme.textColor,
137
+ "--stamp-primary": `var(--stamprally-primary-override, ${theme.primaryColor})`,
138
+ "--stamp-bg": `var(--stamprally-background-override, ${theme.backgroundColor ?? DEFAULT_SHEET_THEME.backgroundColor ?? "#ffffff"})`,
139
+ "--stamp-card-bg": `var(--stamprally-card-override, ${theme.cardBackgroundColor})`,
140
+ "--stamp-text": `var(--stamprally-text-override, ${theme.textColor})`,
141
+ "--stamp-grid-cols": String(theme.gridColumns),
142
+ "--stamp-grid-cols-mobile": String(Math.min(theme.gridColumns, 2)),
143
+ "--stamp-unclaimed-opacity": String(theme.unclaimedOpacity ?? 1),
144
+ "--stamp-font-family": FONT_STACKS[theme.fontFamily ?? "serif"],
145
+ ...theme.completedStampColor === void 0 ? {} : { "--stamp-completed-color": theme.completedStampColor },
146
+ "--stamprally-primary": `var(--stamprally-primary-override, ${theme.primaryColor})`,
147
+ "--stamprally-background": `var(--stamprally-background-override, ${theme.backgroundColor ?? "transparent"})`,
148
+ "--stamprally-card": `var(--stamprally-card-override, ${theme.cardBackgroundColor})`,
149
+ "--stamprally-text": `var(--stamprally-text-override, ${theme.textColor})`,
63
150
  "--stamprally-columns": String(theme.gridColumns)
64
151
  };
152
+ const messages = locale === "en" ? {
153
+ available: "available",
154
+ locked: "locked",
155
+ stamped: "stamped",
156
+ remaining: (value) => `${value} spots remaining`,
157
+ completed: "RALLY COMPLETED"
158
+ } : {
159
+ available: "\u53D6\u5F97\u53EF\u80FD",
160
+ locked: "\u9806\u5E8F\u5F85\u3061",
161
+ stamped: "\u53D6\u5F97\u6E08\u307F",
162
+ remaining: (value) => `\u3042\u3068${value}\u7B87\u6240`,
163
+ completed: "\u30E9\u30EA\u30FC\u9054\u6210"
164
+ };
65
165
  return /* @__PURE__ */ jsxs(
66
166
  "section",
67
167
  {
68
- className: "stamprally-sheet",
168
+ className: `stamp-sheet ${percentage >= 100 ? "stamp-sheet--completed" : ""}`,
69
169
  style,
70
170
  "aria-label": resolveLocalizedText(title, locale) || config.id,
71
171
  children: [
72
- /* @__PURE__ */ jsxs("header", { children: [
172
+ /* @__PURE__ */ jsxs("header", { className: "stamp-sheet__header", children: [
73
173
  /* @__PURE__ */ jsx("h2", { children: resolveLocalizedText(title, locale) || config.id }),
74
- /* @__PURE__ */ jsxs("span", { "aria-live": "polite", children: [
174
+ /* @__PURE__ */ jsxs("span", { className: "stamp-sheet__score", role: "status", "aria-live": "polite", children: [
75
175
  count,
76
176
  " / ",
77
177
  total
78
178
  ] })
79
179
  ] }),
180
+ /* @__PURE__ */ jsxs("div", { className: "stamp-sheet__progress-label", children: [
181
+ /* @__PURE__ */ jsx("span", { children: messages.remaining(Math.max(0, total - count)) }),
182
+ /* @__PURE__ */ jsxs("strong", { children: [
183
+ Math.round(percentage),
184
+ "%"
185
+ ] })
186
+ ] }),
80
187
  /* @__PURE__ */ jsx(
81
188
  "div",
82
189
  {
190
+ className: "stamp-sheet__progress-track",
83
191
  role: "progressbar",
84
192
  "aria-valuemin": 0,
85
193
  "aria-valuemax": 100,
86
194
  "aria-valuenow": Math.round(percentage),
87
- "aria-label": "Rally progress",
88
- children: /* @__PURE__ */ jsx("span", { style: { display: "block", width: `${percentage}%` } })
195
+ "aria-label": locale === "en" ? "Rally progress" : "\u30B9\u30BF\u30F3\u30D7\u53D6\u5F97\u9032\u6357",
196
+ children: /* @__PURE__ */ jsx(
197
+ "span",
198
+ {
199
+ className: "stamp-sheet__progress-fill",
200
+ style: { display: "block", width: `${percentage}%` }
201
+ }
202
+ )
89
203
  }
90
204
  ),
91
- /* @__PURE__ */ jsx("div", { className: "stamprally-sheet__grid", children: config.stamps.map((stamp, index) => /* @__PURE__ */ jsx(
92
- StampSlot,
93
- {
94
- stamp,
95
- ...state?.records.find((record) => record.stampId === stamp.id) === void 0 ? {} : { record: state?.records.find((record) => record.stampId === stamp.id) },
96
- isNext: next.has(stamp.id),
97
- slotNumber: index + 1,
98
- ...presentations[stamp.id] === void 0 ? {} : { presentation: presentations[stamp.id] },
99
- isAnimating: animatedStampId === stamp.id,
100
- disabled,
101
- slotShape: theme.slotShape,
102
- locale,
103
- onSelect: () => onStampSelect?.(stamp.id)
104
- },
105
- stamp.id
106
- )) })
205
+ /* @__PURE__ */ jsx("div", { className: "stamp-sheet__grid", children: config.stamps.map((stamp, index) => {
206
+ const recordForStamp = state?.records.find((record) => record.stampId === stamp.id);
207
+ return /* @__PURE__ */ jsx(
208
+ StampSlot,
209
+ {
210
+ stamp,
211
+ ...recordForStamp === void 0 ? {} : { record: recordForStamp },
212
+ isNext: next.has(stamp.id),
213
+ slotNumber: index + 1,
214
+ ...presentations[stamp.id] === void 0 ? {} : { presentation: presentations[stamp.id] },
215
+ isAnimating: animatedStampId === stamp.id,
216
+ disabled,
217
+ slotShape: theme.slotShape,
218
+ locale,
219
+ statusText: recordForStamp === void 0 ? next.has(stamp.id) ? messages.available : messages.locked : messages.stamped,
220
+ onSelect: () => onStampSelect?.(stamp.id)
221
+ },
222
+ stamp.id
223
+ );
224
+ }) }),
225
+ percentage >= 100 && /* @__PURE__ */ jsx("div", { className: "stamp-sheet__complete-mark", role: "status", "aria-live": "polite", children: "COMPLETE!!" }),
226
+ percentage >= 100 && /* @__PURE__ */ jsx("div", { className: "stamp-sheet__complete-message", children: messages.completed })
107
227
  ]
108
228
  }
109
229
  );
@@ -121,6 +241,7 @@ function StampModal({
121
241
  onNotify
122
242
  }) {
123
243
  const [token, setToken] = useState("");
244
+ const modalRef = useFocusTrap(open && stamp !== null, onClose, isPending);
124
245
  useEffect(() => {
125
246
  if (!open) setToken("");
126
247
  }, [open]);
@@ -141,8 +262,18 @@ function StampModal({
141
262
  "aria-modal": "true",
142
263
  "aria-labelledby": "stamprally-modal-title",
143
264
  className: "stamprally-modal",
144
- children: /* @__PURE__ */ jsxs("div", { className: "stamprally-modal__panel", children: [
145
- /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close", onClick: onClose, disabled: isPending, children: "\xD7" }),
265
+ children: /* @__PURE__ */ jsxs("div", { className: "stamprally-modal__panel", ref: modalRef, tabIndex: -1, children: [
266
+ /* @__PURE__ */ jsx(
267
+ "button",
268
+ {
269
+ type: "button",
270
+ "aria-label": "Close stamp details",
271
+ "aria-disabled": isPending,
272
+ onClick: onClose,
273
+ disabled: isPending,
274
+ children: "\xD7"
275
+ }
276
+ ),
146
277
  /* @__PURE__ */ jsx("h2", { id: "stamprally-modal-title", children: name }),
147
278
  record !== void 0 ? /* @__PURE__ */ jsx("p", { children: "Already claimed." }) : /* @__PURE__ */ jsx("p", { children: resolveLocalizedText(stamp.description, locale) }),
148
279
  stamp.condition.type === "token" ? /* @__PURE__ */ jsxs(
@@ -157,13 +288,24 @@ function StampModal({
157
288
  "Passcode ",
158
289
  /* @__PURE__ */ jsx("input", { value: token, onChange: (event) => setToken(event.target.value) })
159
290
  ] }),
160
- /* @__PURE__ */ jsx("button", { type: "submit", disabled: !isAvailable || isPending, children: "Claim stamp" })
291
+ /* @__PURE__ */ jsx(
292
+ "button",
293
+ {
294
+ type: "submit",
295
+ "aria-label": "Claim stamp",
296
+ "aria-disabled": !isAvailable || isPending,
297
+ disabled: !isAvailable || isPending,
298
+ children: "Claim stamp"
299
+ }
300
+ )
161
301
  ]
162
302
  }
163
303
  ) : /* @__PURE__ */ jsx(
164
304
  "button",
165
305
  {
166
306
  type: "button",
307
+ "aria-label": "Claim stamp",
308
+ "aria-disabled": !isAvailable || isPending,
167
309
  onClick: () => void submit({ type: "instant" }),
168
310
  disabled: !isAvailable || isPending,
169
311
  children: "Claim stamp"
@@ -178,66 +320,105 @@ function RewardPanel({
178
320
  states,
179
321
  locale = "ja",
180
322
  isPending = false,
323
+ open = true,
324
+ onClose,
181
325
  onRedeem,
182
326
  onNotify
183
327
  }) {
184
328
  const [passcodes, setPasscodes] = useState({});
185
- return /* @__PURE__ */ jsxs("section", { "aria-labelledby": "stamprally-rewards-title", className: "stamprally-rewards", children: [
186
- /* @__PURE__ */ jsx("h2", { id: "stamprally-rewards-title", children: "Rewards" }),
187
- rewards.map((reward) => {
188
- const state = states.find((item) => item.rewardId === reward.id);
189
- const available = state?.status === "AVAILABLE";
190
- const redeem = async (options) => {
191
- const result = await onRedeem(reward.id, options);
192
- onNotify?.(result.ok, result.ok ? "Reward claimed." : result.error.code);
193
- };
194
- return /* @__PURE__ */ jsxs(
195
- "article",
196
- {
197
- className: `stamprally-reward stamprally-reward--${state?.status ?? "LOCKED"}`,
198
- children: [
199
- /* @__PURE__ */ jsx("h3", { children: resolveLocalizedText(reward.title, locale) }),
200
- /* @__PURE__ */ jsx("p", { children: resolveLocalizedText(reward.description, locale) }),
201
- /* @__PURE__ */ jsx("span", { children: state?.status ?? "LOCKED" }),
202
- reward.redemptionMethod === "staff_passcode" && /* @__PURE__ */ jsxs(
203
- "form",
204
- {
205
- onSubmit: (event) => {
206
- event.preventDefault();
207
- void redeem({ passcode: passcodes[reward.id] ?? "" });
208
- },
209
- children: [
210
- /* @__PURE__ */ jsxs("label", { children: [
211
- "Staff passcode",
212
- " ",
213
- /* @__PURE__ */ jsx(
214
- "input",
215
- {
216
- type: "password",
217
- value: passcodes[reward.id] ?? "",
218
- onChange: (event) => setPasscodes((current) => ({ ...current, [reward.id]: event.target.value }))
219
- }
220
- )
221
- ] }),
222
- /* @__PURE__ */ jsx("button", { type: "submit", disabled: !available || isPending, children: "Redeem" })
223
- ]
224
- }
225
- ),
226
- reward.redemptionMethod !== "staff_passcode" && /* @__PURE__ */ jsx(
227
- "button",
228
- {
229
- type: "button",
230
- disabled: !available || isPending,
231
- onClick: () => void redeem(),
232
- children: "Redeem"
233
- }
234
- )
235
- ]
236
- },
237
- reward.id
238
- );
239
- })
240
- ] });
329
+ const panelRef = useFocusTrap(open && onClose !== void 0, onClose, isPending);
330
+ if (!open) return null;
331
+ return /* @__PURE__ */ jsxs(
332
+ "section",
333
+ {
334
+ ref: panelRef,
335
+ role: "dialog",
336
+ "aria-labelledby": "stamprally-rewards-title",
337
+ "aria-modal": "true",
338
+ className: "stamprally-rewards",
339
+ tabIndex: -1,
340
+ children: [
341
+ /* @__PURE__ */ jsxs("header", { className: "stamprally-rewards__header", children: [
342
+ /* @__PURE__ */ jsx("h2", { id: "stamprally-rewards-title", children: "Rewards" }),
343
+ onClose !== void 0 && /* @__PURE__ */ jsx(
344
+ "button",
345
+ {
346
+ type: "button",
347
+ "aria-label": "Close rewards",
348
+ "aria-disabled": isPending,
349
+ disabled: isPending,
350
+ onClick: onClose,
351
+ children: "\xD7"
352
+ }
353
+ )
354
+ ] }),
355
+ rewards.map((reward) => {
356
+ const state = states.find((item) => item.rewardId === reward.id);
357
+ const available = state?.status === "AVAILABLE";
358
+ const redeem = async (options) => {
359
+ const result = await onRedeem(reward.id, options);
360
+ onNotify?.(result.ok, result.ok ? "Reward claimed." : result.error.code);
361
+ };
362
+ return /* @__PURE__ */ jsxs(
363
+ "article",
364
+ {
365
+ className: `stamprally-reward stamprally-reward--${state?.status ?? "LOCKED"}`,
366
+ children: [
367
+ /* @__PURE__ */ jsx("h3", { children: resolveLocalizedText(reward.title, locale) }),
368
+ /* @__PURE__ */ jsx("p", { children: resolveLocalizedText(reward.description, locale) }),
369
+ /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", children: state?.status ?? "LOCKED" }),
370
+ reward.redemptionMethod === "staff_passcode" && /* @__PURE__ */ jsxs(
371
+ "form",
372
+ {
373
+ onSubmit: (event) => {
374
+ event.preventDefault();
375
+ void redeem({ passcode: passcodes[reward.id] ?? "" });
376
+ },
377
+ children: [
378
+ /* @__PURE__ */ jsxs("label", { children: [
379
+ "Staff passcode",
380
+ " ",
381
+ /* @__PURE__ */ jsx(
382
+ "input",
383
+ {
384
+ type: "password",
385
+ value: passcodes[reward.id] ?? "",
386
+ onChange: (event) => setPasscodes((current) => ({ ...current, [reward.id]: event.target.value }))
387
+ }
388
+ )
389
+ ] }),
390
+ /* @__PURE__ */ jsx(
391
+ "button",
392
+ {
393
+ type: "submit",
394
+ "aria-label": `Redeem ${resolveLocalizedText(reward.title, locale)}`,
395
+ "aria-disabled": !available || isPending,
396
+ disabled: !available || isPending,
397
+ children: "Redeem"
398
+ }
399
+ )
400
+ ]
401
+ }
402
+ ),
403
+ reward.redemptionMethod !== "staff_passcode" && /* @__PURE__ */ jsx(
404
+ "button",
405
+ {
406
+ type: "button",
407
+ "aria-label": `Redeem ${resolveLocalizedText(reward.title, locale)}`,
408
+ "aria-disabled": !available || isPending,
409
+ disabled: !available || isPending,
410
+ onClick: () => void redeem(),
411
+ children: "Redeem"
412
+ }
413
+ )
414
+ ]
415
+ },
416
+ reward.id
417
+ );
418
+ })
419
+ ]
420
+ }
421
+ );
241
422
  }
242
423
 
243
424
  export { RewardPanel, StampModal, StampSheet, StampSlot };
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import {\n type ConsumeResult,\n DEFAULT_SHEET_THEME,\n type LocalizedText,\n type RallyConfig,\n type RewardItem,\n type RewardState,\n resolveLocalizedText,\n type SheetTheme,\n type SlotShape,\n type SpotItem,\n type StampRallyProgress,\n type StampRallyState,\n type SupportedLocale,\n type VerificationContext,\n} from \"@stamprally/core\";\nimport type { CSSProperties, FormEvent } from \"react\";\nimport { useEffect, useState } from \"react\";\n\nexport interface StampPresentation {\n readonly label?: string;\n readonly icon?: string;\n readonly ink?: \"vermilion\" | \"indigo\";\n}\n\nexport interface StampSlotProps {\n readonly stamp: SpotItem;\n readonly record?: StampRallyState[\"records\"][number] | undefined;\n readonly isNext?: boolean;\n readonly slotNumber?: number;\n readonly presentation?: StampPresentation | undefined;\n readonly isAnimating?: boolean;\n readonly disabled?: boolean;\n readonly slotShape?: SlotShape;\n readonly locale?: SupportedLocale;\n readonly onSelect?: () => void;\n}\n\nexport function StampSlot({\n stamp,\n record,\n isNext = false,\n slotNumber = 1,\n presentation = {},\n isAnimating = false,\n disabled = false,\n slotShape = \"rounded\",\n locale = \"ja\",\n onSelect,\n}: StampSlotProps) {\n const status = record === undefined ? (isNext ? \"available\" : \"locked\") : \"stamped\";\n const name = resolveLocalizedText(stamp.name, locale);\n const label = presentation.label ?? stamp.condition.type;\n return (\n <button\n type=\"button\"\n disabled={disabled}\n onClick={onSelect}\n aria-label={`${slotNumber}. ${name} (${status})`}\n data-status={status}\n data-shape={slotShape}\n className={`stamp-slot stamp-slot--${status}${isAnimating ? \" stamp-slot--animating\" : \"\"}`}\n style={{ \"--stamp-primary\": \"var(--stamprally-primary, #9e551e)\" } as CSSProperties}\n >\n <span aria-hidden=\"true\">{presentation.icon ?? \"✦\"}</span>\n <strong>{name}</strong>\n <small>{label}</small>\n {record !== undefined && <time dateTime={record.acquiredAt}>{record.acquiredAt}</time>}\n </button>\n );\n}\n\nexport interface StampSheetProps {\n readonly title?: LocalizedText;\n readonly config: RallyConfig;\n readonly state?: StampRallyState | null;\n readonly progress?: StampRallyProgress;\n readonly presentations?: Readonly<Record<string, StampPresentation>>;\n readonly animatedStampId?: string | null;\n readonly disabled?: boolean;\n readonly locale?: SupportedLocale;\n readonly theme?: SheetTheme;\n readonly onStampSelect?: (stampId: string) => void;\n}\n\nexport function StampSheet({\n title,\n config,\n state = null,\n progress,\n presentations = {},\n animatedStampId = null,\n disabled = false,\n locale = \"ja\",\n theme = config.theme ?? DEFAULT_SHEET_THEME,\n onStampSelect,\n}: StampSheetProps) {\n const acquired = new Set(state?.records.map((record) => record.stampId) ?? []);\n const next = new Set(progress?.nextAvailableStamps.map((stamp) => stamp.id) ?? []);\n const count = progress?.acquired ?? acquired.size;\n const total = progress?.total ?? config.stamps.length;\n const percentage = progress?.percentage ?? (total === 0 ? 0 : (count / total) * 100);\n const style = {\n \"--stamprally-primary\": theme.primaryColor,\n \"--stamprally-background\": theme.backgroundColor ?? \"transparent\",\n \"--stamprally-card\": theme.cardBackgroundColor,\n \"--stamprally-text\": theme.textColor,\n \"--stamprally-columns\": String(theme.gridColumns),\n } as CSSProperties;\n return (\n <section\n className=\"stamprally-sheet\"\n style={style}\n aria-label={resolveLocalizedText(title, locale) || config.id}\n >\n <header>\n <h2>{resolveLocalizedText(title, locale) || config.id}</h2>\n <span aria-live=\"polite\">\n {count} / {total}\n </span>\n </header>\n <div\n role=\"progressbar\"\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuenow={Math.round(percentage)}\n aria-label=\"Rally progress\"\n >\n <span style={{ display: \"block\", width: `${percentage}%` }} />\n </div>\n <div className=\"stamprally-sheet__grid\">\n {config.stamps.map((stamp, index) => (\n <StampSlot\n key={stamp.id}\n stamp={stamp}\n {...(state?.records.find((record) => record.stampId === stamp.id) === undefined\n ? {}\n : { record: state?.records.find((record) => record.stampId === stamp.id) })}\n isNext={next.has(stamp.id)}\n slotNumber={index + 1}\n {...(presentations[stamp.id] === undefined\n ? {}\n : { presentation: presentations[stamp.id] })}\n isAnimating={animatedStampId === stamp.id}\n disabled={disabled}\n slotShape={theme.slotShape}\n locale={locale}\n onSelect={() => onStampSelect?.(stamp.id)}\n />\n ))}\n </div>\n </section>\n );\n}\n\nexport interface AcquisitionFeedback {\n readonly ok: boolean;\n readonly message: string;\n}\nexport interface StampModalProps {\n readonly open: boolean;\n readonly stamp: SpotItem | null;\n readonly record?: StampRallyState[\"records\"][number] | undefined;\n readonly presentation?: StampPresentation | null;\n readonly requiredStampName?: string | null;\n readonly isAvailable?: boolean;\n readonly isPending?: boolean;\n readonly isCompleted?: boolean;\n readonly locale?: SupportedLocale;\n readonly onClose: () => void;\n readonly onAcquire?: (\n stampId: string,\n context: VerificationContext,\n ) => Promise<AcquisitionFeedback>;\n readonly onCheckIn?: (\n stampId: string,\n context: VerificationContext,\n ) => Promise<AcquisitionFeedback>;\n readonly onNotify?: (feedback: AcquisitionFeedback) => void;\n}\n\nexport function StampModal({\n open,\n stamp,\n record,\n isAvailable = true,\n isPending = false,\n locale = \"ja\",\n onClose,\n onAcquire,\n onCheckIn,\n onNotify,\n}: StampModalProps) {\n const [token, setToken] = useState(\"\");\n useEffect(() => {\n if (!open) setToken(\"\");\n }, [open]);\n if (!open || stamp === null) return null;\n const submit = async (context: VerificationContext): Promise<void> => {\n if (!isAvailable || record !== undefined) return;\n const handler = onAcquire ?? onCheckIn;\n if (handler === undefined) return;\n const feedback = await handler(stamp.id, context);\n onNotify?.(feedback);\n if (feedback.ok) onClose();\n };\n const name = resolveLocalizedText(stamp.name, locale);\n return (\n <div\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"stamprally-modal-title\"\n className=\"stamprally-modal\"\n >\n <div className=\"stamprally-modal__panel\">\n <button type=\"button\" aria-label=\"Close\" onClick={onClose} disabled={isPending}>\n ×\n </button>\n <h2 id=\"stamprally-modal-title\">{name}</h2>\n {record !== undefined ? (\n <p>Already claimed.</p>\n ) : (\n <p>{resolveLocalizedText(stamp.description, locale)}</p>\n )}\n {stamp.condition.type === \"token\" ? (\n <form\n onSubmit={(event: FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n void submit({ type: \"token\", token });\n }}\n >\n <label>\n Passcode <input value={token} onChange={(event) => setToken(event.target.value)} />\n </label>\n <button type=\"submit\" disabled={!isAvailable || isPending}>\n Claim stamp\n </button>\n </form>\n ) : (\n <button\n type=\"button\"\n onClick={() => void submit({ type: \"instant\" })}\n disabled={!isAvailable || isPending}\n >\n Claim stamp\n </button>\n )}\n </div>\n </div>\n );\n}\n\nexport interface RewardPanelProps {\n readonly rewards: ReadonlyArray<RewardItem>;\n readonly states: ReadonlyArray<RewardState>;\n readonly locale?: SupportedLocale;\n readonly isPending?: boolean;\n readonly onRedeem: (\n rewardId: string,\n options?: { readonly passcode?: string; readonly staffId?: string },\n ) => Promise<ConsumeResult>;\n readonly onNotify?: (ok: boolean, message: string) => void;\n}\n\nexport function RewardPanel({\n rewards,\n states,\n locale = \"ja\",\n isPending = false,\n onRedeem,\n onNotify,\n}: RewardPanelProps) {\n const [passcodes, setPasscodes] = useState<Readonly<Record<string, string>>>({});\n return (\n <section aria-labelledby=\"stamprally-rewards-title\" className=\"stamprally-rewards\">\n <h2 id=\"stamprally-rewards-title\">Rewards</h2>\n {rewards.map((reward) => {\n const state = states.find((item) => item.rewardId === reward.id);\n const available = state?.status === \"AVAILABLE\";\n const redeem = async (options?: { readonly passcode?: string }): Promise<void> => {\n const result = await onRedeem(reward.id, options);\n onNotify?.(result.ok, result.ok ? \"Reward claimed.\" : result.error.code);\n };\n return (\n <article\n key={reward.id}\n className={`stamprally-reward stamprally-reward--${state?.status ?? \"LOCKED\"}`}\n >\n <h3>{resolveLocalizedText(reward.title, locale)}</h3>\n <p>{resolveLocalizedText(reward.description, locale)}</p>\n <span>{state?.status ?? \"LOCKED\"}</span>\n {reward.redemptionMethod === \"staff_passcode\" && (\n <form\n onSubmit={(event) => {\n event.preventDefault();\n void redeem({ passcode: passcodes[reward.id] ?? \"\" });\n }}\n >\n <label>\n Staff passcode{\" \"}\n <input\n type=\"password\"\n value={passcodes[reward.id] ?? \"\"}\n onChange={(event) =>\n setPasscodes((current) => ({ ...current, [reward.id]: event.target.value }))\n }\n />\n </label>\n <button type=\"submit\" disabled={!available || isPending}>\n Redeem\n </button>\n </form>\n )}\n {reward.redemptionMethod !== \"staff_passcode\" && (\n <button\n type=\"button\"\n disabled={!available || isPending}\n onClick={() => void redeem()}\n >\n Redeem\n </button>\n )}\n </article>\n );\n })}\n </section>\n );\n}\n"]}
1
+ {"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import {\n type ConsumeResult,\n DEFAULT_SHEET_THEME,\n type LocalizedText,\n type RallyConfig,\n type RewardItem,\n type RewardState,\n resolveLocalizedText,\n type SheetTheme,\n type SlotShape,\n type SpotItem,\n type StampRallyProgress,\n type StampRallyState,\n type SupportedLocale,\n type VerificationContext,\n} from \"@stamprally/core\";\nimport type { CSSProperties, FormEvent, RefObject } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nfunction useFocusTrap(\n active: boolean,\n onClose: (() => void) | undefined,\n closeDisabled = false,\n): RefObject<HTMLDivElement | null> {\n const containerRef = useRef<HTMLDivElement | null>(null);\n\n useEffect(() => {\n if (!active) return;\n const container = containerRef.current;\n if (container === null) return;\n\n const focusableSelector =\n 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n const focusable = (): ReadonlyArray<HTMLElement> =>\n Array.from(container.querySelectorAll<HTMLElement>(focusableSelector));\n const first = focusable()[0];\n first?.focus();\n\n const handleKeyDown = (event: KeyboardEvent): void => {\n if (event.key === \"Escape\") {\n if (!closeDisabled) {\n event.preventDefault();\n onClose?.();\n }\n return;\n }\n if (event.key !== \"Tab\") return;\n\n const elements = focusable();\n if (elements.length === 0) {\n event.preventDefault();\n container.focus();\n return;\n }\n const firstElement = elements[0];\n const lastElement = elements[elements.length - 1];\n if (event.shiftKey && document.activeElement === firstElement) {\n event.preventDefault();\n lastElement?.focus();\n } else if (!event.shiftKey && document.activeElement === lastElement) {\n event.preventDefault();\n firstElement?.focus();\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [active, closeDisabled, onClose]);\n\n return containerRef;\n}\n\nexport interface StampPresentation {\n readonly label?: string;\n readonly icon?: string;\n readonly ink?: \"vermilion\" | \"indigo\";\n readonly channel?: \"instant\" | \"qr\" | \"nfc\" | \"geo\";\n}\n\nexport interface StampSlotProps {\n readonly stamp: SpotItem;\n readonly record?: StampRallyState[\"records\"][number] | undefined;\n readonly isNext?: boolean;\n readonly slotNumber?: number;\n readonly presentation?: StampPresentation | undefined;\n readonly isAnimating?: boolean;\n readonly disabled?: boolean;\n readonly slotShape?: SlotShape;\n readonly locale?: SupportedLocale;\n readonly statusText?: string;\n readonly onSelect?: () => void;\n}\n\nconst FONT_STACKS: Readonly<Record<NonNullable<SheetTheme[\"fontFamily\"]>, string>> = {\n \"system-ui\": 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n serif: 'Georgia, \"Times New Roman\", \"Yu Mincho\", serif',\n \"rounded-sans\": '\"Arial Rounded MT Bold\", \"Hiragino Maru Gothic ProN\", \"Yu Gothic\", sans-serif',\n monospace: 'ui-monospace, SFMono-Regular, Consolas, \"Liberation Mono\", monospace',\n handwritten: '\"Segoe Print\", \"Bradley Hand\", \"Comic Sans MS\", cursive',\n};\n\nfunction formatStampDate(value: string): string {\n const date = new Date(value);\n if (Number.isNaN(date.getTime())) return value;\n const pad = (part: number) => String(part).padStart(2, \"0\");\n return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;\n}\n\nexport function StampSlot({\n stamp,\n record,\n isNext = false,\n slotNumber = 1,\n presentation = {},\n isAnimating = false,\n disabled = false,\n slotShape = \"rounded\",\n locale = \"ja\",\n statusText,\n onSelect,\n}: StampSlotProps) {\n const status = record === undefined ? (isNext ? \"available\" : \"locked\") : \"stamped\";\n const resolvedStatus = statusText ?? status;\n const statusSeparator = statusText !== undefined && locale === \"ja\" ? \"、\" : \", \";\n const name = resolveLocalizedText(stamp.name, locale);\n const label = presentation.label ?? stamp.condition.type;\n return (\n <button\n type=\"button\"\n disabled={disabled}\n onClick={onSelect}\n aria-label={`#${String(slotNumber).padStart(2, \"0\")} ${name}${statusSeparator}${resolvedStatus}`}\n aria-disabled={disabled}\n data-status={status}\n data-shape={slotShape}\n className={`stamp-slot stamp-slot--${status} stamp-slot--${presentation.ink ?? \"vermilion\"} stamp-slot--shape-${slotShape}${isAnimating ? \" stamp-slot--animating\" : \"\"}`}\n style={{ \"--stamp-primary\": \"var(--stamprally-primary, #9e551e)\" } as CSSProperties}\n >\n <span className=\"stamp-slot__topline\">\n <span className=\"stamp-slot__number\">#{String(slotNumber).padStart(2, \"0\")}</span>\n <span className={`stamp-slot__state stamp-slot__state--${status}`}>{resolvedStatus}</span>\n </span>\n <span className=\"stamp-slot__watermark\" aria-hidden=\"true\">\n {presentation.icon ?? \"✦\"}\n </span>\n <span className=\"stamp-slot__name\">{name}</span>\n <span className=\"stamp-slot__condition\">\n <span aria-hidden=\"true\">{presentation.icon ?? \"✦\"}</span>\n {label}\n </span>\n {record !== undefined && (\n <span\n className={`stamp-imprint ${isAnimating ? \"stamp-press\" : \"\"}`}\n role=\"img\"\n aria-label={`Acquired at ${formatStampDate(record.acquiredAt)}`}\n >\n <span className=\"stamp-imprint__inner\">\n <span className=\"stamp-imprint__word\">STAMP</span>\n <span className=\"stamp-imprint__date\">{formatStampDate(record.acquiredAt)}</span>\n </span>\n </span>\n )}\n </button>\n );\n}\n\nexport interface StampSheetProps {\n readonly title?: LocalizedText;\n readonly config: RallyConfig;\n readonly state?: StampRallyState | null;\n readonly progress?: StampRallyProgress;\n readonly presentations?: Readonly<Record<string, StampPresentation>>;\n readonly animatedStampId?: string | null;\n readonly disabled?: boolean;\n readonly locale?: SupportedLocale;\n readonly theme?: SheetTheme;\n readonly onStampSelect?: (stampId: string) => void;\n}\n\nexport function StampSheet({\n title,\n config,\n state = null,\n progress,\n presentations = {},\n animatedStampId = null,\n disabled = false,\n locale = \"ja\",\n theme = config.theme ?? DEFAULT_SHEET_THEME,\n onStampSelect,\n}: StampSheetProps) {\n const acquired = new Set(state?.records.map((record) => record.stampId) ?? []);\n const next = new Set(progress?.nextAvailableStamps.map((stamp) => stamp.id) ?? []);\n const count = progress?.acquired ?? acquired.size;\n const total = progress?.total ?? config.stamps.length;\n const percentage = progress?.percentage ?? (total === 0 ? 0 : (count / total) * 100);\n const style = {\n \"--stamp-primary\": `var(--stamprally-primary-override, ${theme.primaryColor})`,\n \"--stamp-bg\": `var(--stamprally-background-override, ${theme.backgroundColor ?? DEFAULT_SHEET_THEME.backgroundColor ?? \"#ffffff\"})`,\n \"--stamp-card-bg\": `var(--stamprally-card-override, ${theme.cardBackgroundColor})`,\n \"--stamp-text\": `var(--stamprally-text-override, ${theme.textColor})`,\n \"--stamp-grid-cols\": String(theme.gridColumns),\n \"--stamp-grid-cols-mobile\": String(Math.min(theme.gridColumns, 2)),\n \"--stamp-unclaimed-opacity\": String(theme.unclaimedOpacity ?? 1),\n \"--stamp-font-family\": FONT_STACKS[theme.fontFamily ?? \"serif\"],\n ...(theme.completedStampColor === undefined\n ? {}\n : { \"--stamp-completed-color\": theme.completedStampColor }),\n \"--stamprally-primary\": `var(--stamprally-primary-override, ${theme.primaryColor})`,\n \"--stamprally-background\": `var(--stamprally-background-override, ${theme.backgroundColor ?? \"transparent\"})`,\n \"--stamprally-card\": `var(--stamprally-card-override, ${theme.cardBackgroundColor})`,\n \"--stamprally-text\": `var(--stamprally-text-override, ${theme.textColor})`,\n \"--stamprally-columns\": String(theme.gridColumns),\n } as CSSProperties;\n const messages =\n locale === \"en\"\n ? {\n available: \"available\",\n locked: \"locked\",\n stamped: \"stamped\",\n remaining: (value: number) => `${value} spots remaining`,\n completed: \"RALLY COMPLETED\",\n }\n : {\n available: \"取得可能\",\n locked: \"順序待ち\",\n stamped: \"取得済み\",\n remaining: (value: number) => `あと${value}箇所`,\n completed: \"ラリー達成\",\n };\n return (\n <section\n className={`stamp-sheet ${percentage >= 100 ? \"stamp-sheet--completed\" : \"\"}`}\n style={style}\n aria-label={resolveLocalizedText(title, locale) || config.id}\n >\n <header className=\"stamp-sheet__header\">\n <h2>{resolveLocalizedText(title, locale) || config.id}</h2>\n <span className=\"stamp-sheet__score\" role=\"status\" aria-live=\"polite\">\n {count} / {total}\n </span>\n </header>\n <div className=\"stamp-sheet__progress-label\">\n <span>{messages.remaining(Math.max(0, total - count))}</span>\n <strong>{Math.round(percentage)}%</strong>\n </div>\n <div\n className=\"stamp-sheet__progress-track\"\n role=\"progressbar\"\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuenow={Math.round(percentage)}\n aria-label={locale === \"en\" ? \"Rally progress\" : \"スタンプ取得進捗\"}\n >\n <span\n className=\"stamp-sheet__progress-fill\"\n style={{ display: \"block\", width: `${percentage}%` }}\n />\n </div>\n <div className=\"stamp-sheet__grid\">\n {config.stamps.map((stamp, index) => {\n const recordForStamp = state?.records.find((record) => record.stampId === stamp.id);\n return (\n <StampSlot\n key={stamp.id}\n stamp={stamp}\n {...(recordForStamp === undefined ? {} : { record: recordForStamp })}\n isNext={next.has(stamp.id)}\n slotNumber={index + 1}\n {...(presentations[stamp.id] === undefined\n ? {}\n : { presentation: presentations[stamp.id] })}\n isAnimating={animatedStampId === stamp.id}\n disabled={disabled}\n slotShape={theme.slotShape}\n locale={locale}\n statusText={\n recordForStamp === undefined\n ? next.has(stamp.id)\n ? messages.available\n : messages.locked\n : messages.stamped\n }\n onSelect={() => onStampSelect?.(stamp.id)}\n />\n );\n })}\n </div>\n {percentage >= 100 && (\n <div className=\"stamp-sheet__complete-mark\" role=\"status\" aria-live=\"polite\">\n COMPLETE!!\n </div>\n )}\n {percentage >= 100 && (\n <div className=\"stamp-sheet__complete-message\">{messages.completed}</div>\n )}\n </section>\n );\n}\n\nexport interface AcquisitionFeedback {\n readonly ok: boolean;\n readonly message: string;\n}\nexport interface StampModalProps {\n readonly open: boolean;\n readonly stamp: SpotItem | null;\n readonly record?: StampRallyState[\"records\"][number] | undefined;\n readonly presentation?: StampPresentation | null;\n readonly requiredStampName?: string | null;\n readonly isAvailable?: boolean;\n readonly isPending?: boolean;\n readonly isCompleted?: boolean;\n readonly locale?: SupportedLocale;\n readonly onClose: () => void;\n readonly onAcquire?: (\n stampId: string,\n context: VerificationContext,\n ) => Promise<AcquisitionFeedback>;\n readonly onCheckIn?: (\n stampId: string,\n context: VerificationContext,\n ) => Promise<AcquisitionFeedback>;\n readonly onNotify?: (feedback: AcquisitionFeedback) => void;\n}\n\nexport function StampModal({\n open,\n stamp,\n record,\n isAvailable = true,\n isPending = false,\n locale = \"ja\",\n onClose,\n onAcquire,\n onCheckIn,\n onNotify,\n}: StampModalProps) {\n const [token, setToken] = useState(\"\");\n const modalRef = useFocusTrap(open && stamp !== null, onClose, isPending);\n useEffect(() => {\n if (!open) setToken(\"\");\n }, [open]);\n if (!open || stamp === null) return null;\n const submit = async (context: VerificationContext): Promise<void> => {\n if (!isAvailable || record !== undefined) return;\n const handler = onAcquire ?? onCheckIn;\n if (handler === undefined) return;\n const feedback = await handler(stamp.id, context);\n onNotify?.(feedback);\n if (feedback.ok) onClose();\n };\n const name = resolveLocalizedText(stamp.name, locale);\n return (\n <div\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"stamprally-modal-title\"\n className=\"stamprally-modal\"\n >\n <div className=\"stamprally-modal__panel\" ref={modalRef} tabIndex={-1}>\n <button\n type=\"button\"\n aria-label=\"Close stamp details\"\n aria-disabled={isPending}\n onClick={onClose}\n disabled={isPending}\n >\n ×\n </button>\n <h2 id=\"stamprally-modal-title\">{name}</h2>\n {record !== undefined ? (\n <p>Already claimed.</p>\n ) : (\n <p>{resolveLocalizedText(stamp.description, locale)}</p>\n )}\n {stamp.condition.type === \"token\" ? (\n <form\n onSubmit={(event: FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n void submit({ type: \"token\", token });\n }}\n >\n <label>\n Passcode <input value={token} onChange={(event) => setToken(event.target.value)} />\n </label>\n <button\n type=\"submit\"\n aria-label=\"Claim stamp\"\n aria-disabled={!isAvailable || isPending}\n disabled={!isAvailable || isPending}\n >\n Claim stamp\n </button>\n </form>\n ) : (\n <button\n type=\"button\"\n aria-label=\"Claim stamp\"\n aria-disabled={!isAvailable || isPending}\n onClick={() => void submit({ type: \"instant\" })}\n disabled={!isAvailable || isPending}\n >\n Claim stamp\n </button>\n )}\n </div>\n </div>\n );\n}\n\nexport interface RewardPanelProps {\n readonly rewards: ReadonlyArray<RewardItem>;\n readonly states: ReadonlyArray<RewardState>;\n readonly locale?: SupportedLocale;\n readonly isPending?: boolean;\n readonly open?: boolean;\n readonly onClose?: () => void;\n readonly onRedeem: (\n rewardId: string,\n options?: { readonly passcode?: string; readonly staffId?: string },\n ) => Promise<ConsumeResult>;\n readonly onNotify?: (ok: boolean, message: string) => void;\n}\n\nexport function RewardPanel({\n rewards,\n states,\n locale = \"ja\",\n isPending = false,\n open = true,\n onClose,\n onRedeem,\n onNotify,\n}: RewardPanelProps) {\n const [passcodes, setPasscodes] = useState<Readonly<Record<string, string>>>({});\n const panelRef = useFocusTrap(open && onClose !== undefined, onClose, isPending);\n if (!open) return null;\n return (\n <section\n ref={panelRef}\n role=\"dialog\"\n aria-labelledby=\"stamprally-rewards-title\"\n aria-modal=\"true\"\n className=\"stamprally-rewards\"\n tabIndex={-1}\n >\n <header className=\"stamprally-rewards__header\">\n <h2 id=\"stamprally-rewards-title\">Rewards</h2>\n {onClose !== undefined && (\n <button\n type=\"button\"\n aria-label=\"Close rewards\"\n aria-disabled={isPending}\n disabled={isPending}\n onClick={onClose}\n >\n ×\n </button>\n )}\n </header>\n {rewards.map((reward) => {\n const state = states.find((item) => item.rewardId === reward.id);\n const available = state?.status === \"AVAILABLE\";\n const redeem = async (options?: { readonly passcode?: string }): Promise<void> => {\n const result = await onRedeem(reward.id, options);\n onNotify?.(result.ok, result.ok ? \"Reward claimed.\" : result.error.code);\n };\n return (\n <article\n key={reward.id}\n className={`stamprally-reward stamprally-reward--${state?.status ?? \"LOCKED\"}`}\n >\n <h3>{resolveLocalizedText(reward.title, locale)}</h3>\n <p>{resolveLocalizedText(reward.description, locale)}</p>\n <span role=\"status\" aria-live=\"polite\">\n {state?.status ?? \"LOCKED\"}\n </span>\n {reward.redemptionMethod === \"staff_passcode\" && (\n <form\n onSubmit={(event) => {\n event.preventDefault();\n void redeem({ passcode: passcodes[reward.id] ?? \"\" });\n }}\n >\n <label>\n Staff passcode{\" \"}\n <input\n type=\"password\"\n value={passcodes[reward.id] ?? \"\"}\n onChange={(event) =>\n setPasscodes((current) => ({ ...current, [reward.id]: event.target.value }))\n }\n />\n </label>\n <button\n type=\"submit\"\n aria-label={`Redeem ${resolveLocalizedText(reward.title, locale)}`}\n aria-disabled={!available || isPending}\n disabled={!available || isPending}\n >\n Redeem\n </button>\n </form>\n )}\n {reward.redemptionMethod !== \"staff_passcode\" && (\n <button\n type=\"button\"\n aria-label={`Redeem ${resolveLocalizedText(reward.title, locale)}`}\n aria-disabled={!available || isPending}\n disabled={!available || isPending}\n onClick={() => void redeem()}\n >\n Redeem\n </button>\n )}\n </article>\n );\n })}\n </section>\n );\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stamprally/ui",
3
- "version": "0.2.1",
3
+ "version": "0.4.0",
4
4
  "description": "Accessible participant UI components for stamp rallies.",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -15,8 +15,7 @@
15
15
  "type": "module",
16
16
  "sideEffects": false,
17
17
  "files": [
18
- "dist",
19
- "src/styles.css"
18
+ "dist"
20
19
  ],
21
20
  "main": "./dist/index.cjs",
22
21
  "module": "./dist/index.js",
@@ -27,11 +26,11 @@
27
26
  "import": "./dist/index.js",
28
27
  "require": "./dist/index.cjs"
29
28
  },
30
- "./styles.css": "./src/styles.css"
29
+ "./styles.css": "./dist/index.css"
31
30
  },
32
31
  "dependencies": {
33
- "@stamprally/core": "0.2.1",
34
- "@stamprally/react": "0.2.1"
32
+ "@stamprally/core": "0.4.0",
33
+ "@stamprally/react": "0.4.0"
35
34
  },
36
35
  "peerDependencies": {
37
36
  "react": "^18.0.0 || ^19.0.0",
@@ -48,7 +47,7 @@
48
47
  "vitest": "^4.1.11"
49
48
  },
50
49
  "scripts": {
51
- "build": "tsup",
50
+ "build": "tsup && node ../../scripts/copy-package-css.mjs packages/ui",
52
51
  "dev": "tsup --watch",
53
52
  "test": "vitest run",
54
53
  "typecheck": "tsc -p tsconfig.json"