@eifi1/ui-kit 0.6.1 → 0.7.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/README.md +69 -33
- package/dist/chart.d.ts +1 -0
- package/dist/components/account-settings.js +3 -2
- package/dist/components/account-settings.js.map +1 -1
- package/dist/components/amount-input.d.ts +3 -0
- package/dist/components/amount-input.js +6 -4
- package/dist/components/amount-input.js.map +1 -1
- package/dist/components/autocomplete.d.ts +33 -6
- package/dist/components/autocomplete.js +62 -16
- package/dist/components/autocomplete.js.map +1 -1
- package/dist/components/calculator.d.ts +3 -0
- package/dist/components/calculator.js +2 -1
- package/dist/components/calculator.js.map +1 -1
- package/dist/components/chart-zoom.js +2 -1
- package/dist/components/chart-zoom.js.map +1 -1
- package/dist/components/chart.d.ts +33 -2
- package/dist/components/chart.js +20 -8
- package/dist/components/chart.js.map +1 -1
- package/dist/components/chip.d.ts +34 -14
- package/dist/components/chip.js +63 -28
- package/dist/components/chip.js.map +1 -1
- package/dist/components/choice-card.d.ts +18 -1
- package/dist/components/choice-card.js +21 -8
- package/dist/components/choice-card.js.map +1 -1
- package/dist/components/combobox-core.d.ts +61 -2
- package/dist/components/combobox-core.js +68 -17
- package/dist/components/combobox-core.js.map +1 -1
- package/dist/components/combobox.d.ts +11 -7
- package/dist/components/combobox.js +51 -28
- package/dist/components/combobox.js.map +1 -1
- package/dist/components/currency-select.js +3 -3
- package/dist/components/currency-select.js.map +1 -1
- package/dist/components/danger-confirm.d.ts +30 -6
- package/dist/components/danger-confirm.js +51 -32
- package/dist/components/danger-confirm.js.map +1 -1
- package/dist/components/data-table-filter-popover.d.ts +1 -1
- package/dist/components/data-table-filters.d.ts +1 -1
- package/dist/components/data-table-pagination.d.ts +6 -3
- package/dist/components/data-table-pagination.js +6 -5
- package/dist/components/data-table-pagination.js.map +1 -1
- package/dist/components/data-table.d.ts +1 -1
- package/dist/components/data-table.js +332 -248
- package/dist/components/data-table.js.map +1 -1
- package/dist/components/date-picker.js +17 -7
- package/dist/components/date-picker.js.map +1 -1
- package/dist/components/dialog-frame.d.ts +28 -3
- package/dist/components/dialog-frame.js +47 -11
- package/dist/components/dialog-frame.js.map +1 -1
- package/dist/components/disclosure.d.ts +22 -2
- package/dist/components/disclosure.js +41 -8
- package/dist/components/disclosure.js.map +1 -1
- package/dist/components/dropdown.d.ts +7 -3
- package/dist/components/dropdown.js +6 -2
- package/dist/components/dropdown.js.map +1 -1
- package/dist/components/entity-combobox.d.ts +17 -8
- package/dist/components/entity-combobox.js +7 -5
- package/dist/components/entity-combobox.js.map +1 -1
- package/dist/components/file-button.d.ts +36 -5
- package/dist/components/file-button.js +23 -2
- package/dist/components/file-button.js.map +1 -1
- package/dist/components/file-dropzone.d.ts +9 -5
- package/dist/components/file-dropzone.js +14 -19
- package/dist/components/file-dropzone.js.map +1 -1
- package/dist/components/grouped-picker.js +2 -2
- package/dist/components/grouped-picker.js.map +1 -1
- package/dist/components/hover-menu.d.ts +8 -3
- package/dist/components/hover-menu.js +88 -4
- package/dist/components/hover-menu.js.map +1 -1
- package/dist/components/icon-picker.d.ts +10 -1
- package/dist/components/icon-picker.js +5 -1
- package/dist/components/icon-picker.js.map +1 -1
- package/dist/components/measured-grid.d.ts +165 -0
- package/dist/components/measured-grid.js +559 -0
- package/dist/components/measured-grid.js.map +1 -0
- package/dist/components/mini-calendar.js +7 -8
- package/dist/components/mini-calendar.js.map +1 -1
- package/dist/components/month-picker.js +13 -9
- package/dist/components/month-picker.js.map +1 -1
- package/dist/components/multi-entity-combobox.js +2 -2
- package/dist/components/multi-entity-combobox.js.map +1 -1
- package/dist/components/multi-select.d.ts +9 -1
- package/dist/components/multi-select.js +22 -8
- package/dist/components/multi-select.js.map +1 -1
- package/dist/components/number-field.d.ts +3 -0
- package/dist/components/number-input.d.ts +3 -0
- package/dist/components/number-input.js +3 -3
- package/dist/components/number-input.js.map +1 -1
- package/dist/components/numpad-sheet.d.ts +3 -0
- package/dist/components/numpad-sheet.js +3 -3
- package/dist/components/numpad-sheet.js.map +1 -1
- package/dist/components/picker-sheet.js +1 -1
- package/dist/components/picker-sheet.js.map +1 -1
- package/dist/components/popover.js +11 -2
- package/dist/components/popover.js.map +1 -1
- package/dist/components/series-chart-ticks.d.ts +13 -0
- package/dist/components/series-chart-ticks.js +29 -0
- package/dist/components/series-chart-ticks.js.map +1 -0
- package/dist/components/series-chart.js +33 -27
- package/dist/components/series-chart.js.map +1 -1
- package/dist/components/swatch-picker.d.ts +10 -1
- package/dist/components/swatch-picker.js +2 -0
- package/dist/components/swatch-picker.js.map +1 -1
- package/dist/components/swipeable-row.d.ts +11 -2
- package/dist/components/swipeable-row.js +5 -3
- package/dist/components/swipeable-row.js.map +1 -1
- package/dist/components/tile-radio.js +5 -7
- package/dist/components/tile-radio.js.map +1 -1
- package/dist/components/toggle-group.d.ts +13 -3
- package/dist/components/toggle-group.js +21 -1
- package/dist/components/toggle-group.js.map +1 -1
- package/dist/components/toggle-legend.js +1 -2
- package/dist/components/toggle-legend.js.map +1 -1
- package/dist/components/treemap.d.ts +6 -1
- package/dist/components/treemap.js +16 -6
- package/dist/components/treemap.js.map +1 -1
- package/dist/components/ui.d.ts +31 -7
- package/dist/components/ui.js +26 -18
- package/dist/components/ui.js.map +1 -1
- package/dist/components/use-anchor-dir.d.ts +15 -0
- package/dist/components/use-anchor-dir.js +14 -0
- package/dist/components/use-anchor-dir.js.map +1 -0
- package/dist/components/use-mobile-reveal.d.ts +8 -1
- package/dist/components/use-mobile-reveal.js +3 -2
- package/dist/components/use-mobile-reveal.js.map +1 -1
- package/dist/components/use-table-state.d.ts +4 -4
- package/dist/components/use-table-state.js +12 -5
- package/dist/components/use-table-state.js.map +1 -1
- package/dist/{data-table-filters-DM1auUfH.d.ts → data-table-filters-noy0Abvi.d.ts} +40 -7
- package/dist/data-table.d.ts +1 -1
- package/dist/data-table.js.map +1 -1
- package/dist/feedback/feedback-attachment.d.ts +22 -3
- package/dist/feedback/feedback-attachment.js +15 -7
- package/dist/feedback/feedback-attachment.js.map +1 -1
- package/dist/feedback/feedback-dialog.d.ts +3 -2
- package/dist/feedback/feedback-dialog.js.map +1 -1
- package/dist/feedback.d.ts +1 -1
- package/dist/hooks/use-windowed-rows.d.ts +29 -0
- package/dist/hooks/use-windowed-rows.js +31 -0
- package/dist/hooks/use-windowed-rows.js.map +1 -0
- package/dist/i18n/defaults.d.ts +3 -0
- package/dist/i18n/defaults.js +5 -1
- package/dist/i18n/defaults.js.map +1 -1
- package/dist/i18n/kit-labels.d.ts +5 -0
- package/dist/i18n/kit-labels.js.map +1 -1
- package/dist/i18n/locales/de-CH.d.ts +43 -0
- package/dist/i18n/locales/de-CH.js +21 -0
- package/dist/i18n/locales/de-CH.js.map +1 -0
- package/dist/i18n/locales/de.d.ts +43 -0
- package/dist/i18n/locales/de.js +344 -0
- package/dist/i18n/locales/de.js.map +1 -0
- package/dist/i18n/locales/es.d.ts +43 -0
- package/dist/i18n/locales/es.js +339 -0
- package/dist/i18n/locales/es.js.map +1 -0
- package/dist/i18n/locales/fr.d.ts +43 -0
- package/dist/i18n/locales/fr.js +344 -0
- package/dist/i18n/locales/fr.js.map +1 -0
- package/dist/i18n/locales/hu.d.ts +43 -0
- package/dist/i18n/locales/hu.js +343 -0
- package/dist/i18n/locales/hu.js.map +1 -0
- package/dist/i18n/locales/it.d.ts +43 -0
- package/dist/i18n/locales/it.js +342 -0
- package/dist/i18n/locales/it.js.map +1 -0
- package/dist/i18n/locales/zh.d.ts +43 -0
- package/dist/i18n/locales/zh.js +338 -0
- package/dist/i18n/locales/zh.js.map +1 -0
- package/dist/index.d.ts +6 -3
- package/dist/index.js +4 -1
- package/dist/index.js.map +1 -1
- package/dist/lib/direction.d.ts +24 -0
- package/dist/lib/direction.js +19 -0
- package/dist/lib/direction.js.map +1 -0
- package/dist/rhf/form.js.map +1 -1
- package/dist/search/command-palette.d.ts +5 -0
- package/dist/search/command-palette.js +80 -50
- package/dist/search/command-palette.js.map +1 -1
- package/dist/shell/app-shell.d.ts +13 -1
- package/dist/shell/app-shell.js +133 -84
- package/dist/shell/app-shell.js.map +1 -1
- package/dist/shell/topbar-action-menu.js +1 -1
- package/dist/shell/topbar-action-menu.js.map +1 -1
- package/dist/shell/topbar-controls.d.ts +7 -3
- package/dist/shell/topbar-controls.js +38 -31
- package/dist/shell/topbar-controls.js.map +1 -1
- package/dist/theme/chart-palette.d.ts +7 -1
- package/dist/theme/chart-palette.js +2 -1
- package/dist/theme/chart-palette.js.map +1 -1
- package/dist/tour/tour.d.ts +11 -5
- package/dist/tour/tour.js +124 -58
- package/dist/tour/tour.js.map +1 -1
- package/dist/wizard/use-wizard.js +30 -13
- package/dist/wizard/use-wizard.js.map +1 -1
- package/dist/wizard/wizard-summary.js +1 -1
- package/dist/wizard/wizard-summary.js.map +1 -1
- package/package.json +12 -2
- package/src/components/account-settings.tsx +6 -2
- package/src/components/amount-input.tsx +10 -8
- package/src/components/autocomplete.tsx +110 -24
- package/src/components/calculator.tsx +5 -1
- package/src/components/chart-zoom.tsx +8 -1
- package/src/components/chart.tsx +68 -7
- package/src/components/chip.tsx +131 -49
- package/src/components/choice-card.tsx +77 -36
- package/src/components/combobox-core.tsx +147 -20
- package/src/components/combobox.tsx +100 -44
- package/src/components/currency-select.tsx +6 -6
- package/src/components/danger-confirm.tsx +90 -36
- package/src/components/data-table-pagination.tsx +32 -19
- package/src/components/data-table.tsx +198 -36
- package/src/components/date-picker.tsx +24 -7
- package/src/components/dialog-frame.tsx +97 -22
- package/src/components/disclosure.tsx +75 -13
- package/src/components/dropdown.tsx +17 -5
- package/src/components/entity-combobox.tsx +26 -13
- package/src/components/file-button.tsx +74 -5
- package/src/components/file-dropzone.tsx +44 -35
- package/src/components/grouped-picker.tsx +2 -2
- package/src/components/hover-menu.tsx +139 -10
- package/src/components/icon-picker.tsx +14 -1
- package/src/components/measured-grid.tsx +852 -0
- package/src/components/mini-calendar.tsx +11 -8
- package/src/components/month-picker.tsx +18 -11
- package/src/components/multi-entity-combobox.tsx +2 -2
- package/src/components/multi-select.tsx +34 -7
- package/src/components/number-input.tsx +4 -4
- package/src/components/numpad-sheet.tsx +5 -3
- package/src/components/picker-sheet.tsx +1 -1
- package/src/components/popover.tsx +18 -3
- package/src/components/series-chart-ticks.ts +52 -0
- package/src/components/series-chart.tsx +39 -31
- package/src/components/swatch-picker.tsx +11 -0
- package/src/components/swipeable-row.tsx +21 -6
- package/src/components/tile-radio.tsx +5 -7
- package/src/components/toggle-group.tsx +39 -3
- package/src/components/toggle-legend.tsx +5 -2
- package/src/components/treemap.tsx +28 -5
- package/src/components/ui.tsx +74 -30
- package/src/components/use-anchor-dir.ts +20 -0
- package/src/components/use-mobile-reveal.ts +10 -2
- package/src/components/use-table-state.ts +44 -7
- package/src/data-table.ts +1 -0
- package/src/feedback/feedback-attachment.tsx +36 -9
- package/src/feedback/feedback-dialog.tsx +3 -2
- package/src/hooks/use-windowed-rows.ts +69 -0
- package/src/i18n/defaults.ts +4 -0
- package/src/i18n/kit-labels.tsx +4 -0
- package/src/i18n/locales/de-CH.ts +30 -0
- package/src/i18n/locales/de.ts +365 -0
- package/src/i18n/locales/es.ts +358 -0
- package/src/i18n/locales/fr.ts +371 -0
- package/src/i18n/locales/hu.ts +359 -0
- package/src/i18n/locales/it.ts +360 -0
- package/src/i18n/locales/zh.ts +348 -0
- package/src/index.ts +10 -1
- package/src/lib/direction.ts +37 -0
- package/src/rhf/form.tsx +21 -0
- package/src/search/command-palette.tsx +77 -19
- package/src/shell/app-shell.tsx +200 -129
- package/src/shell/topbar-action-menu.tsx +1 -1
- package/src/shell/topbar-controls.tsx +19 -8
- package/src/theme/chart-palette.ts +9 -2
- package/src/tour/tour.tsx +119 -18
- package/src/wizard/use-wizard.ts +55 -17
- package/src/wizard/wizard-summary.tsx +1 -1
package/dist/tour/tour.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tour/tour.tsx"],"sourcesContent":["import {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Button } from \"../components/ui\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\n\nexport type TourPlacement = \"top\" | \"right\" | \"bottom\" | \"left\" | \"center\";\n\nexport interface TourStep {\n /** CSS selector for the element to spotlight. Omit for a centered step\n * (welcome/finish). If the target isn't found/visible, the step centers. */\n target?: string;\n title: string;\n body: ReactNode;\n /** Extra footer content, e.g. a \"load sample data\" shortcut. */\n action?: ReactNode;\n /** Spotlight padding around the target, px (default 8). */\n padding?: number;\n /** Where the card sits relative to the target. Omit for auto placement\n * (below → above → centered). \"center\" ignores the target and centers on\n * screen. An explicit side flips to the opposite side if it would overflow,\n * then clamps into the viewport. */\n placement?: TourPlacement;\n /** Advance only when the user clicks the spotlighted target itself (not the\n * card's Next button). Requires `target`: the real control's own handler runs\n * first, then the tour steps forward on a microtask. The overlay stays\n * click-through to the target. */\n awaitClick?: boolean;\n /** Runs before the step is shown — e.g. navigate to a route, open a panel.\n * May be async; the step waits for it, then locates the target. */\n beforeStep?: () => void | Promise<void>;\n}\n\nexport interface TourLabels {\n next: string;\n back: string;\n skip: string;\n done: string;\n /** Shown in place of the Next button on an `awaitClick` step. */\n awaitClickHint: string;\n /** Step counter, e.g. (2, 7) => \"2 / 7\". */\n step: (current: number, total: number) => string;\n}\n\nexport const DEFAULT_TOUR_LABELS: TourLabels = {\n next: \"Next\",\n back: \"Back\",\n skip: \"Skip\",\n done: \"Done\",\n awaitClickHint: \"Click the highlighted element to continue\",\n step: (c, t) => `${c} / ${t}`,\n};\n\ninterface StartOptions {\n /** Stable id of the tour, surfaced as `activeId` so the app can mirror it to\n * the URL (deep-link / evaluation tracking) and record completion. */\n id?: string;\n /** Start at this step index instead of 0 (clamped) — for URL/deep-link resume. */\n startIndex?: number;\n /** Fires synchronously when the tour starts (e.g. enable a mock interceptor). */\n onStart?: () => void;\n onFinish?: () => void;\n onSkip?: () => void;\n}\n\ninterface TourContextValue {\n active: boolean;\n /** Id of the running tour (from {@link StartOptions.id}), else null. */\n activeId: string | null;\n /** Start a tour with the given steps. */\n start: (steps: TourStep[], opts?: StartOptions) => void;\n /** End the current tour (no callbacks fire). */\n stop: () => void;\n /** Advance one step; past the last step it finishes the tour (fires onFinish). */\n next: () => void;\n /** Go back one step (no-op on the first). */\n prev: () => void;\n /** Jump to a step by index, clamped to range — e.g. for URL/deep-link resume. */\n goToStep: (index: number) => void;\n /** Current step (0-based; 0 while inactive). */\n index: number;\n /** Total steps (0 while inactive). */\n total: number;\n}\n\nconst TourContext = createContext<TourContextValue | null>(null);\n\nexport function useTour(): TourContextValue {\n const ctx = useContext(TourContext);\n if (!ctx) throw new Error(\"useTour must be used within <TourProvider>\");\n return ctx;\n}\n\n/**\n * The tour engine if it is there, `null` if it is not — for a control that is a\n * DECORATION rather than a participant.\n *\n * {@link useTour}'s throw is correct and stays: a component that runs a tour cannot do\n * its job without the provider, and failing loudly is how that gets fixed. But the\n * throw's blast radius is whatever error boundary is above it, and for a launcher in\n * the app shell that is the whole app.\n *\n * Keksdose feedback dev#524 is what that costs: an `@hb/ui` module was edited while a\n * dev server was running, vite re-evaluated it, and the module's freshly created\n * context object was no longer the one the mounted provider was providing. React's\n * `useContext` then answers `null` for a provider that is, structurally, right there —\n * and the top bar's tour menu took the entire shell down with it. **Build-time module\n * graphs cannot produce that**, so it is a development-only failure; a menu that\n * disappears for a second is the proportionate response to it either way.\n *\n * Only for controls that can honestly render nothing. If a component would show a\n * broken half of itself without the tour, it wants {@link useTour}.\n */\nexport function useTourOptional(): TourContextValue | null {\n return useContext(TourContext);\n}\n\n/**\n * Provides the guided-tour engine: a dimmed spotlight overlay + step card driven\n * by a list of {@link TourStep}s. Domain-free — the app supplies the steps (copy,\n * selectors, per-step navigation, placement) and the translated {@link TourLabels}.\n * Mount once inside the router; start a tour from anywhere via {@link useTour},\n * which also exposes step control (`next`/`prev`/`goToStep`) and the current\n * `index`/`total` for URL mirroring, `awaitClick` and deep-link resume.\n */\nexport function TourProvider({\n children,\n labels,\n}: {\n children: ReactNode;\n labels?: Partial<TourLabels>;\n}) {\n // `labels` over the provider's `tour` over English. Resolved once here and handed\n // down: the step card is portalled, but context crosses portals anyway — this is\n // simply the one place that already owned the merge.\n const merged = useKitLabels(\"tour\", DEFAULT_TOUR_LABELS, labels);\n const [steps, setSteps] = useState<TourStep[] | null>(null);\n const [index, setIndex] = useState(0);\n const [activeId, setActiveId] = useState<string | null>(null);\n const optsRef = useRef<StartOptions>({});\n // Live mirrors so the step-control callbacks can stay stable (identity-safe for\n // consumers) while still reading the current steps/index.\n const stepsRef = useRef<TourStep[] | null>(null);\n stepsRef.current = steps;\n const indexRef = useRef(0);\n indexRef.current = index;\n const active = !!steps && steps.length > 0;\n const total = steps?.length ?? 0;\n\n const start = useCallback((s: TourStep[], opts?: StartOptions) => {\n optsRef.current = opts ?? {};\n optsRef.current.onStart?.();\n setIndex(Math.min(Math.max(0, opts?.startIndex ?? 0), Math.max(0, s.length - 1)));\n setActiveId(opts?.id ?? null);\n setSteps(s);\n }, []);\n const stop = useCallback(() => {\n setSteps(null);\n setActiveId(null);\n }, []);\n const finish = useCallback(() => {\n optsRef.current.onFinish?.();\n setSteps(null);\n setActiveId(null);\n }, []);\n const skip = useCallback(() => {\n optsRef.current.onSkip?.();\n setSteps(null);\n setActiveId(null);\n }, []);\n\n const goToStep = useCallback((i: number) => {\n const len = stepsRef.current?.length ?? 0;\n if (len === 0) return;\n setIndex(Math.min(Math.max(0, i), len - 1));\n }, []);\n const next = useCallback(() => {\n const len = stepsRef.current?.length ?? 0;\n if (len === 0) return;\n if (indexRef.current >= len - 1) finish();\n else setIndex(indexRef.current + 1);\n }, [finish]);\n const prev = useCallback(() => {\n if (indexRef.current > 0) setIndex(indexRef.current - 1);\n }, []);\n\n return (\n <TourContext.Provider value={{ active, activeId, start, stop, next, prev, goToStep, index, total }}>\n {children}\n {active && (\n <TourOverlay\n steps={steps!}\n index={index}\n labels={merged}\n onNext={next}\n onPrev={prev}\n onSkip={skip}\n />\n )}\n </TourContext.Provider>\n );\n}\n\ninterface Rect {\n top: number;\n left: number;\n width: number;\n height: number;\n}\n\nfunction isVisible(el: Element): boolean {\n // A non-zero box already rules out display:none on the element or any ancestor\n // (an unrendered element measures 0x0). We deliberately do NOT test\n // offsetParent: it is null for position:fixed elements even when fully visible,\n // which made the mobile bottom-nav bar (fixed) un-highlightable on mobile\n // (feedback #313). visibility:hidden keeps a box, so check it explicitly.\n const r = el.getBoundingClientRect();\n if (r.width <= 0 || r.height <= 0) return false;\n const style = getComputedStyle(el);\n return style.visibility !== \"hidden\" && style.display !== \"none\";\n}\n\n// The first VISIBLE element matching the selector, not merely the first in DOM\n// order. This lets a step target the same control across layouts with one\n// combined selector — e.g. the desktop sidebar link AND the mobile bottom-bar\n// link — where the off-layout copy is present but `display:none` (feedback\n// #313). Returns null while none is visible so the finder keeps retrying.\nfunction queryVisibleTarget(selector: string): Element | null {\n const els = document.querySelectorAll(selector);\n for (const el of els) {\n if (isVisible(el)) return el;\n }\n return null;\n}\n\nfunction sameRect(a: Rect | null, b: Rect | null): boolean {\n if (a === b) return true;\n if (!a || !b) return false;\n return a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height;\n}\n\nfunction TourOverlay({\n steps,\n index,\n labels,\n onNext,\n onPrev,\n onSkip,\n}: {\n steps: TourStep[];\n index: number;\n labels: TourLabels;\n onNext: () => void;\n onPrev: () => void;\n onSkip: () => void;\n}) {\n const step = steps[index];\n const isFirst = index === 0;\n const isLast = index === steps.length - 1;\n const [rect, setRect] = useState<Rect | null>(null);\n const [ready, setReady] = useState(false);\n\n // Run beforeStep, then locate the target (retrying across route/render lag).\n useEffect(() => {\n let cancelled = false;\n let raf = 0;\n setReady(false);\n setRect(null);\n void (async () => {\n await step.beforeStep?.();\n if (cancelled) return;\n if (!step.target) {\n setReady(true);\n return;\n }\n let tries = 0;\n const find = () => {\n if (cancelled) return;\n const el = queryVisibleTarget(step.target!);\n if (el) {\n el.scrollIntoView({ block: \"center\", behavior: \"smooth\" });\n const r = el.getBoundingClientRect();\n setRect({ top: r.top, left: r.left, width: r.width, height: r.height });\n setReady(true);\n return;\n }\n if (tries++ < 45) raf = requestAnimationFrame(find);\n else setReady(true); // give up → render centered\n };\n find();\n })();\n return () => {\n cancelled = true;\n cancelAnimationFrame(raf);\n };\n }, [index, step]);\n\n // Follow the target as the page scrolls / reflows.\n useEffect(() => {\n if (!step.target) return;\n const update = () => {\n const el = queryVisibleTarget(step.target!);\n if (el) {\n const r = el.getBoundingClientRect();\n const next = { top: r.top, left: r.left, width: r.width, height: r.height };\n setRect((prev) => (sameRect(prev, next) ? prev : next));\n }\n };\n window.addEventListener(\"scroll\", update, true);\n window.addEventListener(\"resize\", update);\n const id = window.setInterval(update, 250);\n return () => {\n window.removeEventListener(\"scroll\", update, true);\n window.removeEventListener(\"resize\", update);\n clearInterval(id);\n };\n }, [index, step]);\n\n // awaitClick: advance when the *real* target is clicked. The overlay is\n // click-through (pointer-events-none except the card) so the element's own\n // handler runs first; we step forward on the next macrotask.\n useEffect(() => {\n if (!ready || !step.awaitClick || !step.target) return;\n const el = queryVisibleTarget(step.target);\n if (!el) return;\n const onClick = () => window.setTimeout(() => onNext(), 0);\n el.addEventListener(\"click\", onClick, { once: true });\n return () => el.removeEventListener(\"click\", onClick);\n }, [ready, index, step, onNext]);\n\n // Keyboard: Esc skips, →/Enter advance, ← goes back. On awaitClick steps Enter\n // is ignored (it would fire the target's click AND advance) — → stays as an\n // escape hatch.\n useEffect(() => {\n const onKey = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n onSkip();\n } else if (e.key === \"ArrowRight\") {\n e.preventDefault();\n onNext();\n } else if (e.key === \"Enter\") {\n if (step.awaitClick) return;\n e.preventDefault();\n onNext();\n } else if (e.key === \"ArrowLeft\") {\n if (!isFirst) onPrev();\n }\n };\n document.addEventListener(\"keydown\", onKey);\n return () => document.removeEventListener(\"keydown\", onKey);\n }, [isFirst, step, onNext, onPrev, onSkip]);\n\n if (!ready) return null;\n\n const pad = step.padding ?? 8;\n const spot: Rect | null = rect\n ? { top: rect.top - pad, left: rect.left - pad, width: rect.width + pad * 2, height: rect.height + pad * 2 }\n : null;\n\n return createPortal(\n <div className=\"pointer-events-none fixed inset-0 z-[60]\" role=\"dialog\" aria-modal=\"true\" aria-label={step.title}>\n {spot ? (\n <div\n className=\"pointer-events-none fixed rounded-lg transition-all duration-200 ease-out\"\n style={{\n top: spot.top,\n left: spot.left,\n width: spot.width,\n height: spot.height,\n // A two-tone frame, not a single translucent ring.\n //\n // The old treatment was `ring-2 ring-white/80` over a 55% scrim, and it\n // \"was barely visible\" on the app's blue-tinted surfaces. Two reasons,\n // and a single ring can't fix either: at 55% the surround stays bright\n // enough that the un-dimmed hole barely reads AS a hole, and a 80%-white\n // ring sitting on the edge of a light card is white-on-near-white.\n //\n // So: an opaque white band immediately around the target, a dark keyline\n // outside it, then the scrim. Whatever the target's own colour is, one of\n // the two bands is always in contrast with it and the other is always in\n // contrast with the dimmed surround — there is no background that can\n // swallow both. The blurred layer between them softens the step so the\n // frame reads as lighting rather than as a pasted-on rectangle.\n boxShadow: [\n \"0 0 0 3px rgba(255,255,255,0.98)\",\n \"0 0 0 5px rgba(15,23,42,0.92)\",\n \"0 0 18px 6px rgba(15,23,42,0.45)\",\n \"0 0 0 9999px rgba(15,23,42,0.70)\",\n ].join(\", \"),\n }}\n />\n ) : (\n <div className=\"pointer-events-auto fixed inset-0 bg-black/70\" />\n )}\n <TourCard\n step={step}\n index={index}\n total={steps.length}\n labels={labels}\n isFirst={isFirst}\n isLast={isLast}\n rect={spot}\n onBack={onPrev}\n onNext={onNext}\n onSkip={onSkip}\n />\n </div>,\n document.body,\n );\n}\n\n/**\n * Card position (viewport px) for the given placement relative to the padded\n * spotlight `rect`. Omitted placement keeps the original auto behavior\n * (below → above → vertically centered); an explicit side flips to its opposite\n * if it would overflow, then clamps into the viewport. \"center\" (or no rect)\n * centers on screen.\n */\nfunction placeCard(\n rect: Rect | null,\n cw: number,\n ch: number,\n vw: number,\n vh: number,\n m: number,\n placement?: TourPlacement,\n): { top: number; left: number } {\n if (!rect || placement === \"center\") {\n return { top: Math.max(m, (vh - ch) / 2), left: Math.max(m, (vw - cw) / 2) };\n }\n const clampX = (x: number) => Math.min(Math.max(m, x), Math.max(m, vw - cw - m));\n const clampY = (y: number) => Math.min(Math.max(m, y), Math.max(m, vh - ch - m));\n const centerX = clampX(rect.left + rect.width / 2 - cw / 2);\n const centerY = clampY(rect.top + rect.height / 2 - ch / 2);\n const belowTop = rect.top + rect.height + m;\n const aboveTop = rect.top - ch - m;\n const rightLeft = rect.left + rect.width + m;\n const leftLeft = rect.left - cw - m;\n const fitsBelow = belowTop + ch <= vh;\n const fitsAbove = aboveTop >= 0;\n const fitsRight = rightLeft + cw <= vw;\n const fitsLeft = leftLeft >= 0;\n\n switch (placement) {\n case \"top\":\n return { top: fitsAbove ? aboveTop : fitsBelow ? belowTop : clampY(aboveTop), left: centerX };\n case \"bottom\":\n return { top: fitsBelow ? belowTop : fitsAbove ? aboveTop : clampY(belowTop), left: centerX };\n case \"right\":\n return { top: centerY, left: fitsRight ? rightLeft : fitsLeft ? leftLeft : clampX(rightLeft) };\n case \"left\":\n return { top: centerY, left: fitsLeft ? leftLeft : fitsRight ? rightLeft : clampX(leftLeft) };\n default:\n if (fitsBelow) return { top: belowTop, left: centerX };\n if (fitsAbove) return { top: aboveTop, left: centerX };\n return { top: Math.max(m, (vh - ch) / 2), left: centerX };\n }\n}\n\nfunction TourCard({\n step,\n index,\n total,\n labels,\n isFirst,\n isLast,\n rect,\n onBack,\n onNext,\n onSkip,\n}: {\n step: TourStep;\n index: number;\n total: number;\n labels: TourLabels;\n isFirst: boolean;\n isLast: boolean;\n rect: Rect | null;\n onBack: () => void;\n onNext: () => void;\n onSkip: () => void;\n}) {\n const ref = useRef<HTMLDivElement>(null);\n const [style, setStyle] = useState<CSSProperties>({ opacity: 0 });\n\n /**\n * The card holds the focus, because the card is what the tour IS.\n *\n * The overlay above declares `role=\"dialog\" aria-modal=\"true\"` — it always has — and\n * then left focus wherever the page had put it. For a tour that is the most pointed\n * version of the audit's *\"Only Modal manages focus\"*: the whole component exists to\n * say \"look here\", and for a keyboard user \"here\" is the focus ring. They were told\n * the page was hidden, given no way to reach the Next button without Tabbing through\n * it, and left on a control the screen reader would no longer describe.\n *\n * It re-engages on every step, without any bookkeeping here, because `TourOverlay`\n * returns null while it re-locates the next target: the card genuinely unmounts and\n * remounts between steps. That is what keeps focus honest when the BUTTONS change —\n * \"Back\" does not exist on the first step, so stepping back onto it destroys the\n * control the press came from, and focus would otherwise fall to `<body>`, outside\n * this trap's own listener, where Tab walks straight into the page the overlay claims\n * to have hidden.\n *\n * **The cost, written down:** on an `awaitClick` step the user is asked to click the\n * spotlighted element, and they can no longer Tab to it. ArrowRight still advances\n * (the key handler in `TourOverlay` is on the document and does not care where focus\n * is), which is the escape hatch that step already documents for the case where the\n * target cannot be found. Containment is worth that: an `awaitClick` step is a\n * minority of steps, while focus stranded behind `aria-modal` is every step.\n */\n useFocusTrap(ref, { active: true });\n\n useLayoutEffect(() => {\n const card = ref.current;\n if (!card) return;\n setStyle(\n placeCard(rect, card.offsetWidth, card.offsetHeight, window.innerWidth, window.innerHeight, 12, step.placement),\n );\n }, [rect, index, step.placement]);\n\n return (\n <div\n ref={ref}\n // Focusable but not tabbable: the trap above focuses the card itself rather than\n // its first button, so a screen reader reads the step's title and body before it\n // reads \"Next\" — and without this the container cannot take focus at all and the\n // trap silently does nothing.\n tabIndex={-1}\n style={style}\n className=\"pointer-events-auto fixed z-[61] w-80 max-w-[calc(100vw-1.5rem)] rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-4 shadow-xl outline-none transition-all duration-200 ease-out\"\n >\n <div className=\"text-sm font-semibold text-[var(--text-primary)]\">{step.title}</div>\n <div className=\"mt-1 text-sm leading-relaxed text-[var(--text-secondary)]\">{step.body}</div>\n {step.action && <div className=\"mt-3\">{step.action}</div>}\n <div className=\"mt-4 space-y-2\">\n <div className=\"flex items-center justify-between gap-2\">\n <button\n type=\"button\"\n onClick={onSkip}\n className=\"text-xs text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]\"\n >\n {labels.skip}\n </button>\n <div className=\"flex items-center gap-2\">\n <span className=\"whitespace-nowrap text-xs tabular-nums text-[var(--text-placeholder)]\">\n {labels.step(index + 1, total)}\n </span>\n {!isFirst && (\n <Button variant=\"secondary\" onClick={onBack} className=\"px-2.5 py-1 text-xs\">\n {labels.back}\n </Button>\n )}\n {/* On an awaitClick step the Next button is replaced by a hint on its\n own row below, so it doesn't cram the counter + buttons and wrap.\n Only when the target was actually FOUND, though — `rect` is null\n when the finder gave up, and the click listener early-returns on\n the same absence. Keyed on `step.target` alone this hid the only\n way forward on any step whose anchor happens not to be rendered\n for this user (a guest sees no \"add account\" button), leaving the\n undocumented ArrowRight key as the sole escape. */}\n {!(step.awaitClick && step.target && rect) && (\n <Button variant=\"brand\" onClick={onNext} className={cn(\"px-2.5 py-1 text-xs\")}>\n {isLast ? labels.done : labels.next}\n </Button>\n )}\n </div>\n </div>\n {step.awaitClick && step.target && rect && (\n <div className=\"text-center text-xs italic text-[var(--text-placeholder)]\">\n {labels.awaitClickHint}\n </div>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/tour/tour.tsx"],"sourcesContent":["import {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Button } from \"../components/ui\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { dirOf, horizontalStep } from \"../lib/direction\";\nimport type { Direction } from \"../lib/direction\";\n\n/**\n * `start`/`end` follow the reading direction (`end` is the right side in LTR and the\n * left side in RTL) and are what a translated app wants. `left`/`right` stay physical\n * for the steps that genuinely mean a screen side.\n */\nexport type TourPlacement = \"top\" | \"right\" | \"bottom\" | \"left\" | \"start\" | \"end\" | \"center\";\n\nexport interface TourStep {\n /** CSS selector for the element to spotlight. Omit for a centered step\n * (welcome/finish). If the target isn't found/visible, the step centers. */\n target?: string;\n title: string;\n body: ReactNode;\n /** Extra footer content, e.g. a \"load sample data\" shortcut. */\n action?: ReactNode;\n /** Spotlight padding around the target, px (default 8). */\n padding?: number;\n /** Where the card sits relative to the target. Omit for auto placement\n * (below → above → centered). \"center\" ignores the target and centers on\n * screen. \"start\"/\"end\" are the logical sides and flip in RTL; \"left\"/\"right\"\n * are physical. An explicit side flips to the opposite side if it would\n * overflow, then clamps into the viewport. */\n placement?: TourPlacement;\n /** Advance only when the user clicks the spotlighted target itself (not the\n * card's Next button). Requires `target`: the real control's own handler runs\n * first, then the tour steps forward on a microtask. The spotlight hole stays\n * click-through to the target; the rest of the page does not. */\n awaitClick?: boolean;\n /** Runs before the step is shown — e.g. navigate to a route, open a panel.\n * May be async; the step waits for it, then locates the target. */\n beforeStep?: () => void | Promise<void>;\n}\n\nexport interface TourLabels {\n next: string;\n back: string;\n skip: string;\n done: string;\n /** Shown in place of the Next button on an `awaitClick` step. */\n awaitClickHint: string;\n /** Step counter, e.g. (2, 7) => \"2 / 7\". */\n step: (current: number, total: number) => string;\n}\n\nexport const DEFAULT_TOUR_LABELS: TourLabels = {\n next: \"Next\",\n back: \"Back\",\n skip: \"Skip\",\n done: \"Done\",\n awaitClickHint: \"Click the highlighted element to continue\",\n step: (c, t) => `${c} / ${t}`,\n};\n\ninterface StartOptions {\n /** Stable id of the tour, surfaced as `activeId` so the app can mirror it to\n * the URL (deep-link / evaluation tracking) and record completion. */\n id?: string;\n /** Start at this step index instead of 0 (clamped) — for URL/deep-link resume. */\n startIndex?: number;\n /** Fires synchronously when the tour starts (e.g. enable a mock interceptor). */\n onStart?: () => void;\n onFinish?: () => void;\n onSkip?: () => void;\n}\n\ninterface TourContextValue {\n active: boolean;\n /** Id of the running tour (from {@link StartOptions.id}), else null. */\n activeId: string | null;\n /** Start a tour with the given steps. */\n start: (steps: TourStep[], opts?: StartOptions) => void;\n /** End the current tour (no callbacks fire). */\n stop: () => void;\n /** Advance one step; past the last step it finishes the tour (fires onFinish). */\n next: () => void;\n /** Go back one step (no-op on the first). */\n prev: () => void;\n /** Jump to a step by index, clamped to range — e.g. for URL/deep-link resume. */\n goToStep: (index: number) => void;\n /** Current step (0-based; 0 while inactive). */\n index: number;\n /** Total steps (0 while inactive). */\n total: number;\n}\n\nconst TourContext = createContext<TourContextValue | null>(null);\n\nexport function useTour(): TourContextValue {\n const ctx = useContext(TourContext);\n if (!ctx) throw new Error(\"useTour must be used within <TourProvider>\");\n return ctx;\n}\n\n/**\n * The tour engine if it is there, `null` if it is not — for a control that is a\n * DECORATION rather than a participant.\n *\n * {@link useTour}'s throw is correct and stays: a component that runs a tour cannot do\n * its job without the provider, and failing loudly is how that gets fixed. But the\n * throw's blast radius is whatever error boundary is above it, and for a launcher in\n * the app shell that is the whole app.\n *\n * Keksdose feedback dev#524 is what that costs: an `@hb/ui` module was edited while a\n * dev server was running, vite re-evaluated it, and the module's freshly created\n * context object was no longer the one the mounted provider was providing. React's\n * `useContext` then answers `null` for a provider that is, structurally, right there —\n * and the top bar's tour menu took the entire shell down with it. **Build-time module\n * graphs cannot produce that**, so it is a development-only failure; a menu that\n * disappears for a second is the proportionate response to it either way.\n *\n * Only for controls that can honestly render nothing. If a component would show a\n * broken half of itself without the tour, it wants {@link useTour}.\n */\nexport function useTourOptional(): TourContextValue | null {\n return useContext(TourContext);\n}\n\n/**\n * Provides the guided-tour engine: a dimmed spotlight overlay + step card driven\n * by a list of {@link TourStep}s. Domain-free — the app supplies the steps (copy,\n * selectors, per-step navigation, placement) and the translated {@link TourLabels}.\n * Mount once inside the router; start a tour from anywhere via {@link useTour},\n * which also exposes step control (`next`/`prev`/`goToStep`) and the current\n * `index`/`total` for URL mirroring, `awaitClick` and deep-link resume.\n */\nexport function TourProvider({\n children,\n labels,\n}: {\n children: ReactNode;\n labels?: Partial<TourLabels>;\n}) {\n // `labels` over the provider's `tour` over English. Resolved once here and handed\n // down: the step card is portalled, but context crosses portals anyway — this is\n // simply the one place that already owned the merge.\n const merged = useKitLabels(\"tour\", DEFAULT_TOUR_LABELS, labels);\n const [steps, setSteps] = useState<TourStep[] | null>(null);\n const [index, setIndex] = useState(0);\n const [activeId, setActiveId] = useState<string | null>(null);\n const optsRef = useRef<StartOptions>({});\n // Live mirrors so the step-control callbacks can stay stable (identity-safe for\n // consumers) while still reading the current steps/index.\n const stepsRef = useRef<TourStep[] | null>(null);\n stepsRef.current = steps;\n const indexRef = useRef(0);\n indexRef.current = index;\n const active = !!steps && steps.length > 0;\n const total = steps?.length ?? 0;\n\n const start = useCallback((s: TourStep[], opts?: StartOptions) => {\n optsRef.current = opts ?? {};\n optsRef.current.onStart?.();\n setIndex(Math.min(Math.max(0, opts?.startIndex ?? 0), Math.max(0, s.length - 1)));\n setActiveId(opts?.id ?? null);\n setSteps(s);\n }, []);\n const stop = useCallback(() => {\n setSteps(null);\n setActiveId(null);\n }, []);\n const finish = useCallback(() => {\n optsRef.current.onFinish?.();\n setSteps(null);\n setActiveId(null);\n }, []);\n const skip = useCallback(() => {\n optsRef.current.onSkip?.();\n setSteps(null);\n setActiveId(null);\n }, []);\n\n const goToStep = useCallback((i: number) => {\n const len = stepsRef.current?.length ?? 0;\n if (len === 0) return;\n setIndex(Math.min(Math.max(0, i), len - 1));\n }, []);\n const next = useCallback(() => {\n const len = stepsRef.current?.length ?? 0;\n if (len === 0) return;\n if (indexRef.current >= len - 1) finish();\n else setIndex(indexRef.current + 1);\n }, [finish]);\n const prev = useCallback(() => {\n if (indexRef.current > 0) setIndex(indexRef.current - 1);\n }, []);\n\n return (\n <TourContext.Provider value={{ active, activeId, start, stop, next, prev, goToStep, index, total }}>\n {children}\n {active && (\n <TourOverlay\n steps={steps!}\n index={index}\n labels={merged}\n onNext={next}\n onPrev={prev}\n onSkip={skip}\n />\n )}\n </TourContext.Provider>\n );\n}\n\ninterface Rect {\n top: number;\n left: number;\n width: number;\n height: number;\n}\n\nfunction isVisible(el: Element): boolean {\n // A non-zero box already rules out display:none on the element or any ancestor\n // (an unrendered element measures 0x0). We deliberately do NOT test\n // offsetParent: it is null for position:fixed elements even when fully visible,\n // which made the mobile bottom-nav bar (fixed) un-highlightable on mobile\n // (feedback #313). visibility:hidden keeps a box, so check it explicitly.\n const r = el.getBoundingClientRect();\n if (r.width <= 0 || r.height <= 0) return false;\n const style = getComputedStyle(el);\n return style.visibility !== \"hidden\" && style.display !== \"none\";\n}\n\n// The first VISIBLE element matching the selector, not merely the first in DOM\n// order. This lets a step target the same control across layouts with one\n// combined selector — e.g. the desktop sidebar link AND the mobile bottom-bar\n// link — where the off-layout copy is present but `display:none` (feedback\n// #313). Returns null while none is visible so the finder keeps retrying.\nfunction queryVisibleTarget(selector: string): Element | null {\n const els = document.querySelectorAll(selector);\n for (const el of els) {\n if (isVisible(el)) return el;\n }\n return null;\n}\n\nfunction sameRect(a: Rect | null, b: Rect | null): boolean {\n if (a === b) return true;\n if (!a || !b) return false;\n return a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height;\n}\n\nfunction TourOverlay({\n steps,\n index,\n labels,\n onNext,\n onPrev,\n onSkip,\n}: {\n steps: TourStep[];\n index: number;\n labels: TourLabels;\n onNext: () => void;\n onPrev: () => void;\n onSkip: () => void;\n}) {\n const step = steps[index];\n const isFirst = index === 0;\n const isLast = index === steps.length - 1;\n const [rect, setRect] = useState<Rect | null>(null);\n const [ready, setReady] = useState(false);\n // The overlay is portalled to <body>, out of whatever `dir` subtree the app set, so it\n // takes the direction of the element it spotlights (the document's for a centered\n // step). Arrow keys and start/end placement read it.\n const [dir, setDir] = useState<Direction>(() => dirOf(null));\n const rootRef = useRef<HTMLDivElement>(null);\n\n // Run beforeStep, then locate the target (retrying across route/render lag).\n useEffect(() => {\n let cancelled = false;\n let raf = 0;\n setReady(false);\n setRect(null);\n void (async () => {\n await step.beforeStep?.();\n if (cancelled) return;\n if (!step.target) {\n setDir(dirOf(null));\n setReady(true);\n return;\n }\n let tries = 0;\n const find = () => {\n if (cancelled) return;\n const el = queryVisibleTarget(step.target!);\n if (el) {\n el.scrollIntoView({ block: \"center\", behavior: \"smooth\" });\n const r = el.getBoundingClientRect();\n setRect({ top: r.top, left: r.left, width: r.width, height: r.height });\n setDir(dirOf(el));\n setReady(true);\n return;\n }\n if (tries++ < 45) raf = requestAnimationFrame(find);\n else {\n setDir(dirOf(null));\n setReady(true); // give up → render centered\n }\n };\n find();\n })();\n return () => {\n cancelled = true;\n cancelAnimationFrame(raf);\n };\n }, [index, step]);\n\n // Follow the target as the page scrolls / reflows.\n useEffect(() => {\n if (!step.target) return;\n const update = () => {\n const el = queryVisibleTarget(step.target!);\n if (el) {\n const r = el.getBoundingClientRect();\n const next = { top: r.top, left: r.left, width: r.width, height: r.height };\n setRect((prev) => (sameRect(prev, next) ? prev : next));\n }\n };\n window.addEventListener(\"scroll\", update, true);\n window.addEventListener(\"resize\", update);\n const id = window.setInterval(update, 250);\n return () => {\n window.removeEventListener(\"scroll\", update, true);\n window.removeEventListener(\"resize\", update);\n clearInterval(id);\n };\n }, [index, step]);\n\n // awaitClick: advance when the *real* target is clicked. The spotlight hole is\n // click-through (see the shields in the render below) so the element's own\n // handler runs first; we step forward on the next macrotask.\n useEffect(() => {\n if (!ready || !step.awaitClick || !step.target) return;\n const el = queryVisibleTarget(step.target);\n if (!el) return;\n const onClick = () => window.setTimeout(() => onNext(), 0);\n el.addEventListener(\"click\", onClick, { once: true });\n return () => el.removeEventListener(\"click\", onClick);\n }, [ready, index, step, onNext]);\n\n // Keyboard: Esc skips, Enter and the reading-direction arrow advance (→ in LTR,\n // ← in RTL), the other arrow goes back. On awaitClick steps Enter is ignored (it\n // would fire the target's click AND advance) — the forward arrow stays as an escape\n // hatch.\n //\n // Enter on a focused control belongs to that control. This used to advance from\n // anywhere, so Enter on a focused Skip or Back ran the button's own click AND stepped\n // forward: Back moved nowhere, Skip skipped and then called `next` on a dead tour.\n // The same goes for arrows in a text field a step's `action` might contain.\n useEffect(() => {\n const onKey = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n onSkip();\n return;\n }\n if (e.key === \"Enter\") {\n if (step.awaitClick || ownsKey(e.target, \"Enter\")) return;\n e.preventDefault();\n onNext();\n return;\n }\n if (ownsKey(e.target, e.key)) return;\n // The overlay root carries `dir`; before it paints, the document's answers.\n const delta = horizontalStep(e.key, rootRef.current);\n if (delta === 1) {\n e.preventDefault();\n onNext();\n } else if (delta === -1) {\n if (!isFirst) onPrev();\n }\n };\n document.addEventListener(\"keydown\", onKey);\n return () => document.removeEventListener(\"keydown\", onKey);\n }, [isFirst, step, onNext, onPrev, onSkip]);\n\n if (!ready) return null;\n\n const pad = step.padding ?? 8;\n const spot: Rect | null = rect\n ? { top: rect.top - pad, left: rect.left - pad, width: rect.width + pad * 2, height: rect.height + pad * 2 }\n : null;\n\n // `aria-modal` promises the page behind is out of reach, and the card's focus trap\n // keeps that promise for the keyboard. The pointer used to get no such treatment: the\n // root is `pointer-events-none` so that the spotlight hole can stay live for\n // `awaitClick`, and the scrim is a box-shadow, which takes no clicks — so every\n // control on the dimmed page stayed clickable. Four shields now tile the viewport\n // around the hole: the page is blocked, the card and the spotlighted target are not.\n // Keeping `aria-modal` (rather than dropping it) is the coherent half: the tour\n // really is modal — focus is trapped and Esc/Skip is the way out.\n return createPortal(\n <div\n ref={rootRef}\n className=\"pointer-events-none fixed inset-0 z-[60]\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={step.title}\n dir={dir}\n >\n {spot && <SpotlightShields spot={spot} />}\n {spot ? (\n <div\n className=\"pointer-events-none fixed rounded-lg transition-all duration-200 ease-out\"\n style={{\n top: spot.top,\n left: spot.left,\n width: spot.width,\n height: spot.height,\n // A two-tone frame, not a single translucent ring.\n //\n // The old treatment was `ring-2 ring-white/80` over a 55% scrim, and it\n // \"was barely visible\" on the app's blue-tinted surfaces. Two reasons,\n // and a single ring can't fix either: at 55% the surround stays bright\n // enough that the un-dimmed hole barely reads AS a hole, and a 80%-white\n // ring sitting on the edge of a light card is white-on-near-white.\n //\n // So: an opaque white band immediately around the target, a dark keyline\n // outside it, then the scrim. Whatever the target's own colour is, one of\n // the two bands is always in contrast with it and the other is always in\n // contrast with the dimmed surround — there is no background that can\n // swallow both. The blurred layer between them softens the step so the\n // frame reads as lighting rather than as a pasted-on rectangle.\n boxShadow: [\n \"0 0 0 3px rgba(255,255,255,0.98)\",\n \"0 0 0 5px rgba(15,23,42,0.92)\",\n \"0 0 18px 6px rgba(15,23,42,0.45)\",\n \"0 0 0 9999px rgba(15,23,42,0.70)\",\n ].join(\", \"),\n }}\n />\n ) : (\n <div className=\"pointer-events-auto fixed inset-0 bg-black/70\" />\n )}\n <TourCard\n step={step}\n index={index}\n total={steps.length}\n labels={labels}\n isFirst={isFirst}\n isLast={isLast}\n rect={spot}\n dir={dir}\n onBack={onPrev}\n onNext={onNext}\n onSkip={onSkip}\n />\n </div>,\n document.body,\n );\n}\n\n/** Does the focused element handle `key` itself? Enter on a button or link, and any\n * editing key in a text field or select, is the control's — not the tour's. */\nfunction ownsKey(target: EventTarget | null, key: string): boolean {\n if (!(target instanceof HTMLElement)) return false;\n if (target.isContentEditable) return true;\n const tag = target.tagName;\n if (tag === \"TEXTAREA\" || tag === \"SELECT\") return true;\n if (tag === \"INPUT\") {\n const type = (target as HTMLInputElement).type;\n // Enter on a checkbox does nothing natively, but ←/→ on a radio moves it.\n return key !== \"Enter\" || type !== \"checkbox\";\n }\n if (key !== \"Enter\") return false;\n return (\n tag === \"BUTTON\" ||\n (tag === \"A\" && target.hasAttribute(\"href\")) ||\n target.getAttribute(\"role\") === \"button\" ||\n target.getAttribute(\"role\") === \"link\"\n );\n}\n\n/**\n * Transparent pointer blockers tiling the viewport around the spotlight hole: one\n * full-width band above and below, one on each side at the hole's own height. The hole\n * itself stays uncovered, so the target keeps its clicks.\n */\nfunction SpotlightShields({ spot }: { spot: Rect }) {\n const shield = \"pointer-events-auto fixed\";\n const bottom = spot.top + spot.height;\n return (\n <>\n <div data-tour-shield=\"\" className={shield} style={{ top: 0, left: 0, right: 0, height: Math.max(0, spot.top) }} />\n <div data-tour-shield=\"\" className={shield} style={{ top: bottom, left: 0, right: 0, bottom: 0 }} />\n <div\n data-tour-shield=\"\"\n className={shield}\n style={{ top: spot.top, left: 0, width: Math.max(0, spot.left), height: spot.height }}\n />\n <div\n data-tour-shield=\"\"\n className={shield}\n style={{ top: spot.top, left: spot.left + spot.width, right: 0, height: spot.height }}\n />\n </>\n );\n}\n\n/**\n * Card position (viewport px) for the given placement relative to the padded\n * spotlight `rect`. Omitted placement keeps the original auto behavior\n * (below → above → vertically centered); an explicit side flips to its opposite\n * if it would overflow, then clamps into the viewport. \"center\" (or no rect)\n * centers on screen.\n */\nfunction placeCard(\n rect: Rect | null,\n cw: number,\n ch: number,\n vw: number,\n vh: number,\n m: number,\n placement?: TourPlacement,\n dir: Direction = \"ltr\",\n): { top: number; left: number } {\n // The logical sides resolve to a physical one here, and only here.\n if (placement === \"start\") placement = dir === \"rtl\" ? \"right\" : \"left\";\n else if (placement === \"end\") placement = dir === \"rtl\" ? \"left\" : \"right\";\n if (!rect || placement === \"center\") {\n return { top: Math.max(m, (vh - ch) / 2), left: Math.max(m, (vw - cw) / 2) };\n }\n const clampX = (x: number) => Math.min(Math.max(m, x), Math.max(m, vw - cw - m));\n const clampY = (y: number) => Math.min(Math.max(m, y), Math.max(m, vh - ch - m));\n const centerX = clampX(rect.left + rect.width / 2 - cw / 2);\n const centerY = clampY(rect.top + rect.height / 2 - ch / 2);\n const belowTop = rect.top + rect.height + m;\n const aboveTop = rect.top - ch - m;\n const rightLeft = rect.left + rect.width + m;\n const leftLeft = rect.left - cw - m;\n const fitsBelow = belowTop + ch <= vh;\n const fitsAbove = aboveTop >= 0;\n const fitsRight = rightLeft + cw <= vw;\n const fitsLeft = leftLeft >= 0;\n\n switch (placement) {\n case \"top\":\n return { top: fitsAbove ? aboveTop : fitsBelow ? belowTop : clampY(aboveTop), left: centerX };\n case \"bottom\":\n return { top: fitsBelow ? belowTop : fitsAbove ? aboveTop : clampY(belowTop), left: centerX };\n case \"right\":\n return { top: centerY, left: fitsRight ? rightLeft : fitsLeft ? leftLeft : clampX(rightLeft) };\n case \"left\":\n return { top: centerY, left: fitsLeft ? leftLeft : fitsRight ? rightLeft : clampX(leftLeft) };\n default:\n if (fitsBelow) return { top: belowTop, left: centerX };\n if (fitsAbove) return { top: aboveTop, left: centerX };\n return { top: Math.max(m, (vh - ch) / 2), left: centerX };\n }\n}\n\nfunction TourCard({\n step,\n index,\n total,\n labels,\n isFirst,\n isLast,\n rect,\n dir,\n onBack,\n onNext,\n onSkip,\n}: {\n step: TourStep;\n index: number;\n total: number;\n labels: TourLabels;\n isFirst: boolean;\n isLast: boolean;\n rect: Rect | null;\n dir: Direction;\n onBack: () => void;\n onNext: () => void;\n onSkip: () => void;\n}) {\n const ref = useRef<HTMLDivElement>(null);\n const [style, setStyle] = useState<CSSProperties>({ opacity: 0 });\n\n /**\n * The card holds the focus, because the card is what the tour IS.\n *\n * The overlay above declares `role=\"dialog\" aria-modal=\"true\"` — it always has — and\n * then left focus wherever the page had put it. For a tour that is the most pointed\n * version of the audit's *\"Only Modal manages focus\"*: the whole component exists to\n * say \"look here\", and for a keyboard user \"here\" is the focus ring. They were told\n * the page was hidden, given no way to reach the Next button without Tabbing through\n * it, and left on a control the screen reader would no longer describe.\n *\n * It re-engages on every step, without any bookkeeping here, because `TourOverlay`\n * returns null while it re-locates the next target: the card genuinely unmounts and\n * remounts between steps. That is what keeps focus honest when the BUTTONS change —\n * \"Back\" does not exist on the first step, so stepping back onto it destroys the\n * control the press came from, and focus would otherwise fall to `<body>`, outside\n * this trap's own listener, where Tab walks straight into the page the overlay claims\n * to have hidden.\n *\n * **The cost, written down:** on an `awaitClick` step the user is asked to click the\n * spotlighted element, and they can no longer Tab to it. ArrowRight still advances\n * (the key handler in `TourOverlay` is on the document and does not care where focus\n * is), which is the escape hatch that step already documents for the case where the\n * target cannot be found. Containment is worth that: an `awaitClick` step is a\n * minority of steps, while focus stranded behind `aria-modal` is every step.\n */\n useFocusTrap(ref, { active: true });\n\n useLayoutEffect(() => {\n const card = ref.current;\n if (!card) return;\n setStyle(\n placeCard(rect, card.offsetWidth, card.offsetHeight, window.innerWidth, window.innerHeight, 12, step.placement, dir),\n );\n }, [rect, index, step.placement, dir]);\n\n return (\n <div\n ref={ref}\n // Focusable but not tabbable: the trap above focuses the card itself rather than\n // its first button, so a screen reader reads the step's title and body before it\n // reads \"Next\" — and without this the container cannot take focus at all and the\n // trap silently does nothing.\n tabIndex={-1}\n style={style}\n className=\"pointer-events-auto fixed z-[61] w-80 max-w-[calc(100vw-1.5rem)] rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-4 shadow-xl outline-none transition-all duration-200 ease-out\"\n >\n <div className=\"text-sm font-semibold text-[var(--text-primary)]\">{step.title}</div>\n <div className=\"mt-1 text-sm leading-relaxed text-[var(--text-secondary)]\">{step.body}</div>\n {step.action && <div className=\"mt-3\">{step.action}</div>}\n <div className=\"mt-4 space-y-2\">\n <div className=\"flex items-center justify-between gap-2\">\n <button\n type=\"button\"\n onClick={onSkip}\n className=\"text-xs text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]\"\n >\n {labels.skip}\n </button>\n <div className=\"flex items-center gap-2\">\n <span className=\"whitespace-nowrap text-xs tabular-nums text-[var(--text-placeholder)]\">\n {labels.step(index + 1, total)}\n </span>\n {!isFirst && (\n <Button variant=\"secondary\" onClick={onBack} className=\"px-2.5 py-1 text-xs\">\n {labels.back}\n </Button>\n )}\n {/* On an awaitClick step the Next button is replaced by a hint on its\n own row below, so it doesn't cram the counter + buttons and wrap.\n Only when the target was actually FOUND, though — `rect` is null\n when the finder gave up, and the click listener early-returns on\n the same absence. Keyed on `step.target` alone this hid the only\n way forward on any step whose anchor happens not to be rendered\n for this user (a guest sees no \"add account\" button), leaving the\n undocumented ArrowRight key as the sole escape. */}\n {!(step.awaitClick && step.target && rect) && (\n <Button variant=\"brand\" onClick={onNext} className={cn(\"px-2.5 py-1 text-xs\")}>\n {isLast ? labels.done : labels.next}\n </Button>\n )}\n </div>\n </div>\n {step.awaitClick && step.target && rect && (\n <div className=\"text-center text-xs italic text-[var(--text-placeholder)]\">\n {labels.awaitClickHint}\n </div>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -7,6 +7,7 @@ function createReducer(stepCount) {
|
|
|
7
7
|
return function reducer(state, action) {
|
|
8
8
|
switch (action.type) {
|
|
9
9
|
case "GO_NEXT": {
|
|
10
|
+
if (action.from !== state.currentStepIndex) return state;
|
|
10
11
|
const completed = new Set(state.completedSteps);
|
|
11
12
|
completed.add(state.currentStepIndex);
|
|
12
13
|
const nextIndex = Math.min(state.currentStepIndex + 1, stepCount - 1);
|
|
@@ -24,6 +25,7 @@ function createReducer(stepCount) {
|
|
|
24
25
|
return { ...state, currentStepIndex: action.index };
|
|
25
26
|
}
|
|
26
27
|
case "SKIP": {
|
|
28
|
+
if (action.from !== state.currentStepIndex) return state;
|
|
27
29
|
const skipped = new Set(state.skippedSteps);
|
|
28
30
|
skipped.add(state.currentStepIndex);
|
|
29
31
|
const nextIndex = Math.min(state.currentStepIndex + 1, stepCount - 1);
|
|
@@ -138,11 +140,19 @@ function useWizard(options) {
|
|
|
138
140
|
}
|
|
139
141
|
return true;
|
|
140
142
|
}, [state.currentStepIndex, missingRequired, onValidationFailed]);
|
|
143
|
+
const advancingRef = useRef(false);
|
|
141
144
|
const goNext = useCallback(async () => {
|
|
142
|
-
if (
|
|
143
|
-
|
|
145
|
+
if (advancingRef.current) return;
|
|
146
|
+
advancingRef.current = true;
|
|
147
|
+
const from = state.currentStepIndex;
|
|
148
|
+
try {
|
|
149
|
+
if (await runStepValidators()) {
|
|
150
|
+
dispatch({ type: "GO_NEXT", from });
|
|
151
|
+
}
|
|
152
|
+
} finally {
|
|
153
|
+
advancingRef.current = false;
|
|
144
154
|
}
|
|
145
|
-
}, [runStepValidators]);
|
|
155
|
+
}, [runStepValidators, state.currentStepIndex]);
|
|
146
156
|
const goBack = useCallback(() => {
|
|
147
157
|
dispatch({ type: "GO_BACK" });
|
|
148
158
|
}, []);
|
|
@@ -150,8 +160,9 @@ function useWizard(options) {
|
|
|
150
160
|
dispatch({ type: "GO_TO_STEP", index });
|
|
151
161
|
}, []);
|
|
152
162
|
const skip = useCallback(() => {
|
|
153
|
-
|
|
154
|
-
|
|
163
|
+
if (advancingRef.current) return;
|
|
164
|
+
dispatch({ type: "SKIP", from: state.currentStepIndex });
|
|
165
|
+
}, [state.currentStepIndex]);
|
|
155
166
|
const cancel = useCallback(() => {
|
|
156
167
|
dispatch({ type: "SHOW_CANCEL_DIALOG", show: true });
|
|
157
168
|
}, []);
|
|
@@ -173,16 +184,22 @@ function useWizard(options) {
|
|
|
173
184
|
}, []);
|
|
174
185
|
const finish = useCallback(async () => {
|
|
175
186
|
if (!onComplete || !canFinish) return;
|
|
176
|
-
if (
|
|
177
|
-
|
|
178
|
-
dispatch({ type: "SET_ERROR", error: null });
|
|
187
|
+
if (advancingRef.current) return;
|
|
188
|
+
advancingRef.current = true;
|
|
179
189
|
try {
|
|
180
|
-
await
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
190
|
+
if (!await runStepValidators()) return;
|
|
191
|
+
dispatch({ type: "SET_SUBMITTING", value: true });
|
|
192
|
+
dispatch({ type: "SET_ERROR", error: null });
|
|
193
|
+
try {
|
|
194
|
+
await onComplete(state.data);
|
|
195
|
+
} catch (err) {
|
|
196
|
+
const message = err instanceof Error && err.message ? err.message : genericError;
|
|
197
|
+
dispatch({ type: "SET_ERROR", error: message });
|
|
198
|
+
} finally {
|
|
199
|
+
dispatch({ type: "SET_SUBMITTING", value: false });
|
|
200
|
+
}
|
|
184
201
|
} finally {
|
|
185
|
-
|
|
202
|
+
advancingRef.current = false;
|
|
186
203
|
}
|
|
187
204
|
}, [onComplete, canFinish, state.data, runStepValidators, genericError]);
|
|
188
205
|
const stepStatus = useCallback(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/wizard/use-wizard.ts"],"sourcesContent":["/**\n * The multi-step wizard state machine: step index, completed/skipped sets,\n * per-step async validators, collected data, field errors, submit and the\n * cancel-confirm gate.\n *\n * Domain-free, but NOT router-free: it mirrors the active step to `?step=N`, so\n * it must be mounted inside a react-router context — the same requirement\n * `DataTable` already carries. It only ever WRITES that param (see the note on\n * `initialStep` below for why it deliberately does not read it back).\n */\nimport { useCallback, useEffect, useReducer, useRef, useState } from \"react\";\nimport { useSearchParams } from \"react-router\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { DEFAULT_WIZARD_LABELS } from \"./types\";\nimport type {\n FieldErrors,\n StepStatus,\n UseWizardOptions,\n UseWizardReturn,\n ValidateResult,\n WizardStepConfig,\n} from \"./types\";\n\ninterface WizardState<TData> {\n currentStepIndex: number;\n completedSteps: Set<number>;\n skippedSteps: Set<number>;\n data: TData;\n isSubmitting: boolean;\n error: string | null;\n fieldErrors: FieldErrors;\n showCancelDialog: boolean;\n}\n\ntype WizardAction<TData> =\n | { type: \"GO_NEXT\" }\n | { type: \"GO_BACK\" }\n | { type: \"GO_TO_STEP\"; index: number }\n | { type: \"SKIP\" }\n | { type: \"UPDATE_DATA\"; partial: Partial<TData> }\n | { type: \"SET_SUBMITTING\"; value: boolean }\n | { type: \"SET_ERROR\"; error: string | null }\n | { type: \"SET_FIELD_ERRORS\"; errors: FieldErrors }\n | { type: \"SHOW_CANCEL_DIALOG\"; show: boolean };\n\nfunction createReducer<TData>(stepCount: number) {\n return function reducer(\n state: WizardState<TData>,\n action: WizardAction<TData>,\n ): WizardState<TData> {\n switch (action.type) {\n case \"GO_NEXT\": {\n const completed = new Set(state.completedSteps);\n completed.add(state.currentStepIndex);\n const nextIndex = Math.min(state.currentStepIndex + 1, stepCount - 1);\n return { ...state, currentStepIndex: nextIndex, completedSteps: completed, fieldErrors: {} };\n }\n case \"GO_BACK\": {\n const prevIndex = Math.max(state.currentStepIndex - 1, 0);\n return { ...state, currentStepIndex: prevIndex, fieldErrors: {} };\n }\n case \"GO_TO_STEP\": {\n if (action.index < 0 || action.index >= stepCount) return state;\n if (!state.completedSteps.has(action.index) && action.index > state.currentStepIndex) {\n return state;\n }\n return { ...state, currentStepIndex: action.index };\n }\n case \"SKIP\": {\n const skipped = new Set(state.skippedSteps);\n skipped.add(state.currentStepIndex);\n const nextIndex = Math.min(state.currentStepIndex + 1, stepCount - 1);\n return { ...state, currentStepIndex: nextIndex, skippedSteps: skipped };\n }\n case \"UPDATE_DATA\": {\n // Clear error for any field that is now being edited (so typing makes\n // the red message disappear).\n const nextErrors = { ...state.fieldErrors };\n for (const key of Object.keys(action.partial)) {\n delete nextErrors[key];\n }\n return { ...state, data: { ...state.data, ...action.partial }, fieldErrors: nextErrors };\n }\n case \"SET_SUBMITTING\":\n return { ...state, isSubmitting: action.value };\n case \"SET_ERROR\":\n return { ...state, error: action.error };\n case \"SET_FIELD_ERRORS\":\n return { ...state, fieldErrors: action.errors };\n case \"SHOW_CANCEL_DIALOG\":\n return { ...state, showCancelDialog: action.show };\n default:\n return state;\n }\n };\n}\n\nexport function useWizard<TData extends Record<string, unknown>>(\n options: UseWizardOptions<TData>,\n): UseWizardReturn<TData> {\n const { steps, initialData, onComplete, onCancel, missingRequiredMessage, onValidationFailed } =\n options;\n const stepsRef = useRef<WizardStepConfig[]>(steps);\n stepsRef.current = steps;\n // A hook, not a component, but it produces two sentences of its own — the\n // \"fill in the required fields\" toast and the fallback submit error — and both\n // reach the user. So it reads the provider like any component does; only the two\n // strings are depended on below, so the callbacks stay stable across renders.\n // The `??` is for the type only: both keys are optional on `WizardLabels` (see\n // there), and the merge never replaces a default with `undefined`.\n const wizardLabels = useKitLabels(\"wizard\", DEFAULT_WIZARD_LABELS, {\n missingRequired: missingRequiredMessage,\n });\n const missingRequired = wizardLabels.missingRequired ?? DEFAULT_WIZARD_LABELS.missingRequired;\n const genericError = wizardLabels.genericError ?? DEFAULT_WIZARD_LABELS.genericError;\n\n // Validators registered by the CURRENT step's mounted components (RHF steps\n // register via `useRhfWizardStep` through the wizard context). Only the active\n // step's validators are present — each unregisters on unmount. `goNext` and\n // `finish` run them (via `runStepValidators`) alongside the step config's own\n // `validate`.\n const validatorsRef = useRef(\n new Map<symbol, () => ValidateResult | Promise<ValidateResult>>(),\n );\n const registerStepValidate = useCallback(\n (fn: () => ValidateResult | Promise<ValidateResult>) => {\n const token = Symbol();\n validatorsRef.current.set(token, fn);\n return () => {\n validatorsRef.current.delete(token);\n };\n },\n [],\n );\n\n const [, setUrlParams] = useSearchParams();\n // The wizard's entered `data` and `completedSteps` are NOT persisted across a\n // reload / deep-link (the reducer re-inits to empty defaults on every mount).\n // Restoring a later step index from `?step=N` would therefore leave the wizard\n // on (or past) the last step with an EMPTY data set, letting Finish submit an\n // empty payload. Always start at step 0 so a reload re-runs the wizard from a\n // valid state instead of losing the entered data silently.\n const initialStep = 0;\n\n const reducer = createReducer<TData>(steps.length);\n const [state, dispatch] = useReducer(reducer, {\n currentStepIndex: initialStep,\n completedSteps: new Set<number>(),\n skippedSteps: new Set<number>(),\n data: (initialData ?? {}) as TData,\n isSubmitting: false,\n error: null,\n fieldErrors: {},\n showCancelDialog: false,\n });\n\n // A mounted step can DISABLE forward navigation (Next/Skip) while its own\n // state is invalid (e.g. tenant shares != 100%). Defaults to false, so\n // wizards that never call setNextBlocked behave exactly as before.\n const [nextBlocked, setNextBlockedState] = useState(false);\n const setNextBlocked = useCallback(\n (blocked: boolean) => setNextBlockedState(blocked),\n [],\n );\n\n // Sync step index to URL\n useEffect(() => {\n setUrlParams((prev) => {\n prev.set(\"step\", String(state.currentStepIndex));\n return prev;\n }, { replace: true });\n }, [state.currentStepIndex, setUrlParams]);\n\n const currentStep = stepsRef.current[state.currentStepIndex];\n const isFirstStep = state.currentStepIndex === 0;\n const isLastStep = state.currentStepIndex === stepsRef.current.length - 1;\n // Finish is only valid once every step before the last has actually been\n // walked through (completed or skipped). Guards against a restored/last-step\n // index submitting a payload built from empty defaults.\n const canFinish = stepsRef.current.every(\n (_, index) =>\n index === stepsRef.current.length - 1 ||\n state.completedSteps.has(index) ||\n state.skippedSteps.has(index),\n );\n\n // Runs the active step's config `validate` plus every validator its mounted\n // components registered (RHF steps via useRhfWizardStep), AND-combining the\n // results and merging any per-field errors. Returns `true` when the step\n // passes (or registered no validators). Shared by `goNext` and `finish` so a\n // form-bearing last step is validated (and its values flushed) on Finish too.\n const runStepValidators = useCallback(async (): Promise<boolean> => {\n const step = stepsRef.current[state.currentStepIndex];\n const validators = [...validatorsRef.current.values()];\n if (step.validate) validators.push(step.validate);\n if (validators.length === 0) return true;\n let ok = true;\n let errors: FieldErrors = {};\n try {\n for (const validate of validators) {\n const result = await validate();\n const vOk = typeof result === \"boolean\" ? result : result.ok;\n if (!vOk) {\n ok = false;\n if (typeof result !== \"boolean\" && result.errors) {\n errors = { ...errors, ...result.errors };\n }\n }\n }\n } catch (err) {\n // FALL THROUGH, do not return. A bare `return false` here blocked Next while\n // skipping the `if (!ok)` block below — the only thing that shows a message,\n // and whose own comment is \"say something anyway, so the user is not left with\n // a Next button that silently does nothing\". So a validator that threw (an\n // async one whose request rejected, a null dereference in a field rule)\n // produced exactly the outcome that block was written to prevent: no field\n // errors, no toast, `onValidationFailed` never called, nothing in the console.\n //\n // The step still must not advance; `ok = false` is what says so. Whatever\n // partial `errors` the loop had collected before the throw are kept — they are\n // real, and an empty set is what routes this to the generic message.\n console.error(\"[wizard] a step validator threw\", err);\n ok = false;\n }\n if (!ok) {\n dispatch({ type: \"SET_FIELD_ERRORS\", errors });\n if (Object.keys(errors).length === 0) {\n // No per-field detail (e.g. an RHF step surfacing its own inline\n // message) — say something anyway, so the user is not left with a Next\n // button that silently does nothing.\n const message = missingRequired;\n if (onValidationFailed) {\n onValidationFailed(message);\n } else {\n // sonner is an optional peer: imported here, on the failure path only,\n // so an app that never trips this never has to install it.\n const { toast } = await import(\"sonner\");\n toast.error(message);\n }\n }\n return false;\n }\n return true;\n }, [state.currentStepIndex, missingRequired, onValidationFailed]);\n\n const goNext = useCallback(async () => {\n if (await runStepValidators()) {\n dispatch({ type: \"GO_NEXT\" });\n }\n }, [runStepValidators]);\n\n const goBack = useCallback(() => {\n dispatch({ type: \"GO_BACK\" });\n }, []);\n\n const goToStep = useCallback((index: number) => {\n dispatch({ type: \"GO_TO_STEP\", index });\n }, []);\n\n const skip = useCallback(() => {\n dispatch({ type: \"SKIP\" });\n }, []);\n\n const cancel = useCallback(() => {\n dispatch({ type: \"SHOW_CANCEL_DIALOG\", show: true });\n }, []);\n\n const confirmCancel = useCallback(() => {\n dispatch({ type: \"SHOW_CANCEL_DIALOG\", show: false });\n onCancel?.();\n }, [onCancel]);\n\n const dismissCancel = useCallback(() => {\n dispatch({ type: \"SHOW_CANCEL_DIALOG\", show: false });\n }, []);\n\n const updateData = useCallback((partial: Partial<TData>) => {\n dispatch({ type: \"UPDATE_DATA\", partial });\n }, []);\n\n const clearError = useCallback(() => {\n dispatch({ type: \"SET_ERROR\", error: null });\n }, []);\n\n const clearFieldErrors = useCallback(() => {\n dispatch({ type: \"SET_FIELD_ERRORS\", errors: {} });\n }, []);\n\n const finish = useCallback(async () => {\n if (!onComplete || !canFinish) return;\n // Validate the (possibly form-bearing) last step before submitting, matching\n // the Next gate — review-only steps register no validators and pass through.\n if (!(await runStepValidators())) return;\n dispatch({ type: \"SET_SUBMITTING\", value: true });\n dispatch({ type: \"SET_ERROR\", error: null });\n try {\n await onComplete(state.data);\n } catch (err) {\n const message = err instanceof Error && err.message ? err.message : genericError;\n dispatch({ type: \"SET_ERROR\", error: message });\n } finally {\n dispatch({ type: \"SET_SUBMITTING\", value: false });\n }\n }, [onComplete, canFinish, state.data, runStepValidators, genericError]);\n\n const stepStatus = useCallback(\n (index: number): StepStatus => {\n if (index === state.currentStepIndex) return \"active\";\n if (state.skippedSteps.has(index)) return \"skipped\";\n if (state.completedSteps.has(index)) return \"completed\";\n return \"upcoming\";\n },\n [state.currentStepIndex, state.completedSteps, state.skippedSteps],\n );\n\n return {\n currentStepIndex: state.currentStepIndex,\n currentStep,\n steps: stepsRef.current,\n isFirstStep,\n isLastStep,\n canFinish,\n goNext,\n goBack,\n goToStep,\n skip,\n cancel,\n finish,\n registerStepValidate,\n nextBlocked,\n setNextBlocked,\n stepStatus,\n completedSteps: state.completedSteps,\n data: state.data,\n updateData,\n isSubmitting: state.isSubmitting,\n error: state.error,\n clearError,\n fieldErrors: state.fieldErrors,\n clearFieldErrors,\n showCancelDialog: state.showCancelDialog,\n confirmCancel,\n dismissCancel,\n };\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/wizard/use-wizard.ts"],"sourcesContent":["/**\n * The multi-step wizard state machine: step index, completed/skipped sets,\n * per-step async validators, collected data, field errors, submit and the\n * cancel-confirm gate.\n *\n * Domain-free, but NOT router-free: it mirrors the active step to `?step=N`, so\n * it must be mounted inside a react-router context — the same requirement\n * `DataTable` already carries. It only ever WRITES that param (see the note on\n * `initialStep` below for why it deliberately does not read it back).\n */\nimport { useCallback, useEffect, useReducer, useRef, useState } from \"react\";\nimport { useSearchParams } from \"react-router\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { DEFAULT_WIZARD_LABELS } from \"./types\";\nimport type {\n FieldErrors,\n StepStatus,\n UseWizardOptions,\n UseWizardReturn,\n ValidateResult,\n WizardStepConfig,\n} from \"./types\";\n\ninterface WizardState<TData> {\n currentStepIndex: number;\n completedSteps: Set<number>;\n skippedSteps: Set<number>;\n data: TData;\n isSubmitting: boolean;\n error: string | null;\n fieldErrors: FieldErrors;\n showCancelDialog: boolean;\n}\n\ntype WizardAction<TData> =\n // `from` is the step the move was decided ON. A move whose step is no longer the\n // current one is stale — see `goNext` — and is dropped rather than applied relative\n // to wherever the wizard has got to since.\n | { type: \"GO_NEXT\"; from: number }\n | { type: \"GO_BACK\" }\n | { type: \"GO_TO_STEP\"; index: number }\n | { type: \"SKIP\"; from: number }\n | { type: \"UPDATE_DATA\"; partial: Partial<TData> }\n | { type: \"SET_SUBMITTING\"; value: boolean }\n | { type: \"SET_ERROR\"; error: string | null }\n | { type: \"SET_FIELD_ERRORS\"; errors: FieldErrors }\n | { type: \"SHOW_CANCEL_DIALOG\"; show: boolean };\n\nfunction createReducer<TData>(stepCount: number) {\n return function reducer(\n state: WizardState<TData>,\n action: WizardAction<TData>,\n ): WizardState<TData> {\n switch (action.type) {\n case \"GO_NEXT\": {\n if (action.from !== state.currentStepIndex) return state;\n const completed = new Set(state.completedSteps);\n completed.add(state.currentStepIndex);\n const nextIndex = Math.min(state.currentStepIndex + 1, stepCount - 1);\n return { ...state, currentStepIndex: nextIndex, completedSteps: completed, fieldErrors: {} };\n }\n case \"GO_BACK\": {\n const prevIndex = Math.max(state.currentStepIndex - 1, 0);\n return { ...state, currentStepIndex: prevIndex, fieldErrors: {} };\n }\n case \"GO_TO_STEP\": {\n if (action.index < 0 || action.index >= stepCount) return state;\n if (!state.completedSteps.has(action.index) && action.index > state.currentStepIndex) {\n return state;\n }\n return { ...state, currentStepIndex: action.index };\n }\n case \"SKIP\": {\n if (action.from !== state.currentStepIndex) return state;\n const skipped = new Set(state.skippedSteps);\n skipped.add(state.currentStepIndex);\n const nextIndex = Math.min(state.currentStepIndex + 1, stepCount - 1);\n return { ...state, currentStepIndex: nextIndex, skippedSteps: skipped };\n }\n case \"UPDATE_DATA\": {\n // Clear error for any field that is now being edited (so typing makes\n // the red message disappear).\n const nextErrors = { ...state.fieldErrors };\n for (const key of Object.keys(action.partial)) {\n delete nextErrors[key];\n }\n return { ...state, data: { ...state.data, ...action.partial }, fieldErrors: nextErrors };\n }\n case \"SET_SUBMITTING\":\n return { ...state, isSubmitting: action.value };\n case \"SET_ERROR\":\n return { ...state, error: action.error };\n case \"SET_FIELD_ERRORS\":\n return { ...state, fieldErrors: action.errors };\n case \"SHOW_CANCEL_DIALOG\":\n return { ...state, showCancelDialog: action.show };\n default:\n return state;\n }\n };\n}\n\nexport function useWizard<TData extends Record<string, unknown>>(\n options: UseWizardOptions<TData>,\n): UseWizardReturn<TData> {\n const { steps, initialData, onComplete, onCancel, missingRequiredMessage, onValidationFailed } =\n options;\n const stepsRef = useRef<WizardStepConfig[]>(steps);\n stepsRef.current = steps;\n // A hook, not a component, but it produces two sentences of its own — the\n // \"fill in the required fields\" toast and the fallback submit error — and both\n // reach the user. So it reads the provider like any component does; only the two\n // strings are depended on below, so the callbacks stay stable across renders.\n // The `??` is for the type only: both keys are optional on `WizardLabels` (see\n // there), and the merge never replaces a default with `undefined`.\n const wizardLabels = useKitLabels(\"wizard\", DEFAULT_WIZARD_LABELS, {\n missingRequired: missingRequiredMessage,\n });\n const missingRequired = wizardLabels.missingRequired ?? DEFAULT_WIZARD_LABELS.missingRequired;\n const genericError = wizardLabels.genericError ?? DEFAULT_WIZARD_LABELS.genericError;\n\n // Validators registered by the CURRENT step's mounted components (RHF steps\n // register via `useRhfWizardStep` through the wizard context). Only the active\n // step's validators are present — each unregisters on unmount. `goNext` and\n // `finish` run them (via `runStepValidators`) alongside the step config's own\n // `validate`.\n const validatorsRef = useRef(\n new Map<symbol, () => ValidateResult | Promise<ValidateResult>>(),\n );\n const registerStepValidate = useCallback(\n (fn: () => ValidateResult | Promise<ValidateResult>) => {\n const token = Symbol();\n validatorsRef.current.set(token, fn);\n return () => {\n validatorsRef.current.delete(token);\n };\n },\n [],\n );\n\n const [, setUrlParams] = useSearchParams();\n // The wizard's entered `data` and `completedSteps` are NOT persisted across a\n // reload / deep-link (the reducer re-inits to empty defaults on every mount).\n // Restoring a later step index from `?step=N` would therefore leave the wizard\n // on (or past) the last step with an EMPTY data set, letting Finish submit an\n // empty payload. Always start at step 0 so a reload re-runs the wizard from a\n // valid state instead of losing the entered data silently.\n const initialStep = 0;\n\n const reducer = createReducer<TData>(steps.length);\n const [state, dispatch] = useReducer(reducer, {\n currentStepIndex: initialStep,\n completedSteps: new Set<number>(),\n skippedSteps: new Set<number>(),\n data: (initialData ?? {}) as TData,\n isSubmitting: false,\n error: null,\n fieldErrors: {},\n showCancelDialog: false,\n });\n\n // A mounted step can DISABLE forward navigation (Next/Skip) while its own\n // state is invalid (e.g. tenant shares != 100%). Defaults to false, so\n // wizards that never call setNextBlocked behave exactly as before.\n const [nextBlocked, setNextBlockedState] = useState(false);\n const setNextBlocked = useCallback(\n (blocked: boolean) => setNextBlockedState(blocked),\n [],\n );\n\n // Sync step index to URL\n useEffect(() => {\n setUrlParams((prev) => {\n prev.set(\"step\", String(state.currentStepIndex));\n return prev;\n }, { replace: true });\n }, [state.currentStepIndex, setUrlParams]);\n\n const currentStep = stepsRef.current[state.currentStepIndex];\n const isFirstStep = state.currentStepIndex === 0;\n const isLastStep = state.currentStepIndex === stepsRef.current.length - 1;\n // Finish is only valid once every step before the last has actually been\n // walked through (completed or skipped). Guards against a restored/last-step\n // index submitting a payload built from empty defaults.\n const canFinish = stepsRef.current.every(\n (_, index) =>\n index === stepsRef.current.length - 1 ||\n state.completedSteps.has(index) ||\n state.skippedSteps.has(index),\n );\n\n // Runs the active step's config `validate` plus every validator its mounted\n // components registered (RHF steps via useRhfWizardStep), AND-combining the\n // results and merging any per-field errors. Returns `true` when the step\n // passes (or registered no validators). Shared by `goNext` and `finish` so a\n // form-bearing last step is validated (and its values flushed) on Finish too.\n const runStepValidators = useCallback(async (): Promise<boolean> => {\n const step = stepsRef.current[state.currentStepIndex];\n const validators = [...validatorsRef.current.values()];\n if (step.validate) validators.push(step.validate);\n if (validators.length === 0) return true;\n let ok = true;\n let errors: FieldErrors = {};\n try {\n for (const validate of validators) {\n const result = await validate();\n const vOk = typeof result === \"boolean\" ? result : result.ok;\n if (!vOk) {\n ok = false;\n if (typeof result !== \"boolean\" && result.errors) {\n errors = { ...errors, ...result.errors };\n }\n }\n }\n } catch (err) {\n // FALL THROUGH, do not return. A bare `return false` here blocked Next while\n // skipping the `if (!ok)` block below — the only thing that shows a message,\n // and whose own comment is \"say something anyway, so the user is not left with\n // a Next button that silently does nothing\". So a validator that threw (an\n // async one whose request rejected, a null dereference in a field rule)\n // produced exactly the outcome that block was written to prevent: no field\n // errors, no toast, `onValidationFailed` never called, nothing in the console.\n //\n // The step still must not advance; `ok = false` is what says so. Whatever\n // partial `errors` the loop had collected before the throw are kept — they are\n // real, and an empty set is what routes this to the generic message.\n console.error(\"[wizard] a step validator threw\", err);\n ok = false;\n }\n if (!ok) {\n dispatch({ type: \"SET_FIELD_ERRORS\", errors });\n if (Object.keys(errors).length === 0) {\n // No per-field detail (e.g. an RHF step surfacing its own inline\n // message) — say something anyway, so the user is not left with a Next\n // button that silently does nothing.\n const message = missingRequired;\n if (onValidationFailed) {\n onValidationFailed(message);\n } else {\n // sonner is an optional peer: imported here, on the failure path only,\n // so an app that never trips this never has to install it.\n const { toast } = await import(\"sonner\");\n toast.error(message);\n }\n }\n return false;\n }\n return true;\n }, [state.currentStepIndex, missingRequired, onValidationFailed]);\n\n /**\n * One forward move at a time. A double-click on Next used to validate the CURRENT\n * step twice and then advance twice — the second GO_NEXT landing on a step whose\n * own validators never ran, so a required field two steps in could be walked past.\n * Two layers, because either alone leaves a gap:\n *\n * - this ref refuses a second `goNext`/`skip`/`finish` while one is in flight,\n * which covers an async validator (a server check) of any length;\n * - the `from` on each action drops a move decided on a step that is no longer\n * current, which covers the click that arrives after the first move resolved\n * but before React re-rendered — its closure still holds the old step index.\n */\n const advancingRef = useRef(false);\n\n const goNext = useCallback(async () => {\n if (advancingRef.current) return;\n advancingRef.current = true;\n const from = state.currentStepIndex;\n try {\n if (await runStepValidators()) {\n dispatch({ type: \"GO_NEXT\", from });\n }\n } finally {\n advancingRef.current = false;\n }\n }, [runStepValidators, state.currentStepIndex]);\n\n const goBack = useCallback(() => {\n dispatch({ type: \"GO_BACK\" });\n }, []);\n\n const goToStep = useCallback((index: number) => {\n dispatch({ type: \"GO_TO_STEP\", index });\n }, []);\n\n const skip = useCallback(() => {\n // Not while Next is validating: the skip would land first and the pending GO_NEXT\n // would then be stale anyway — but the user asked for one move, not a race.\n if (advancingRef.current) return;\n dispatch({ type: \"SKIP\", from: state.currentStepIndex });\n }, [state.currentStepIndex]);\n\n const cancel = useCallback(() => {\n dispatch({ type: \"SHOW_CANCEL_DIALOG\", show: true });\n }, []);\n\n const confirmCancel = useCallback(() => {\n dispatch({ type: \"SHOW_CANCEL_DIALOG\", show: false });\n onCancel?.();\n }, [onCancel]);\n\n const dismissCancel = useCallback(() => {\n dispatch({ type: \"SHOW_CANCEL_DIALOG\", show: false });\n }, []);\n\n const updateData = useCallback((partial: Partial<TData>) => {\n dispatch({ type: \"UPDATE_DATA\", partial });\n }, []);\n\n const clearError = useCallback(() => {\n dispatch({ type: \"SET_ERROR\", error: null });\n }, []);\n\n const clearFieldErrors = useCallback(() => {\n dispatch({ type: \"SET_FIELD_ERRORS\", errors: {} });\n }, []);\n\n const finish = useCallback(async () => {\n if (!onComplete || !canFinish) return;\n // The same re-entry guard as `goNext`: a double-click on Finish would otherwise\n // validate twice and call `onComplete` twice — `isSubmitting` is only set once\n // validation has passed, too late to stop the second click.\n if (advancingRef.current) return;\n advancingRef.current = true;\n try {\n // Validate the (possibly form-bearing) last step before submitting, matching\n // the Next gate — review-only steps register no validators and pass through.\n if (!(await runStepValidators())) return;\n dispatch({ type: \"SET_SUBMITTING\", value: true });\n dispatch({ type: \"SET_ERROR\", error: null });\n try {\n await onComplete(state.data);\n } catch (err) {\n const message = err instanceof Error && err.message ? err.message : genericError;\n dispatch({ type: \"SET_ERROR\", error: message });\n } finally {\n dispatch({ type: \"SET_SUBMITTING\", value: false });\n }\n } finally {\n advancingRef.current = false;\n }\n }, [onComplete, canFinish, state.data, runStepValidators, genericError]);\n\n const stepStatus = useCallback(\n (index: number): StepStatus => {\n if (index === state.currentStepIndex) return \"active\";\n if (state.skippedSteps.has(index)) return \"skipped\";\n if (state.completedSteps.has(index)) return \"completed\";\n return \"upcoming\";\n },\n [state.currentStepIndex, state.completedSteps, state.skippedSteps],\n );\n\n return {\n currentStepIndex: state.currentStepIndex,\n currentStep,\n steps: stepsRef.current,\n isFirstStep,\n isLastStep,\n canFinish,\n goNext,\n goBack,\n goToStep,\n skip,\n cancel,\n finish,\n registerStepValidate,\n nextBlocked,\n setNextBlocked,\n stepStatus,\n completedSteps: state.completedSteps,\n data: state.data,\n updateData,\n isSubmitting: state.isSubmitting,\n error: state.error,\n clearError,\n fieldErrors: state.fieldErrors,\n clearFieldErrors,\n showCancelDialog: state.showCancelDialog,\n confirmCancel,\n dismissCancel,\n };\n}\n"],"mappings":"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","names":[]}
|
|
@@ -31,7 +31,7 @@ function WizardSummary({
|
|
|
31
31
|
iIdx > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 border-t border-[var(--border)]", role: "presentation" }),
|
|
32
32
|
/* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
|
|
33
33
|
/* @__PURE__ */ jsx("dt", { className: "text-[var(--text-muted)]", children: item.label }),
|
|
34
|
-
/* @__PURE__ */ jsx("dd", { className: "text-
|
|
34
|
+
/* @__PURE__ */ jsx("dd", { className: "text-end font-medium text-[var(--text-primary)]", children: item.value })
|
|
35
35
|
] })
|
|
36
36
|
] }, iIdx)) }) })
|
|
37
37
|
] }, sIdx))
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/wizard/wizard-summary.tsx"],"sourcesContent":["import { Pencil } from \"lucide-react\";\nimport { Card, CardAction, CardContent, CardHeader, CardTitle, IconButton } from \"../components/ui\";\nimport type { SummarySection, WizardLabels } from \"./types\";\nimport { DEFAULT_WIZARD_LABELS } from \"./types\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * The review step: one card per section, each row a label/value pair, each card\n * carrying an edit button back to the step it came from.\n *\n * Sections are data, not children, because \"jump back to step N\" is the whole\n * point of the component and a caller assembling its own cards invariably drops\n * it. Labels and values are `ReactNode`, so a value can be a badge or a link.\n */\nexport function WizardSummary({\n sections,\n onEditStep,\n labels,\n}: {\n sections: SummarySection[];\n onEditStep: (stepIndex: number) => void;\n labels?: Partial<WizardLabels>;\n}) {\n const l = useKitLabels(\"wizard\", DEFAULT_WIZARD_LABELS, labels);\n\n return (\n <div className=\"space-y-4\">\n <h2 className=\"text-lg font-semibold text-[var(--text-primary)]\">{l.reviewTitle}</h2>\n {sections.map((section, sIdx) => (\n <Card key={sIdx}>\n {/* CardHeader is a grid, and CardAction is the top-right column it\n reserves — the edit button has to go through it or it stacks under\n the title instead of sitting beside it. */}\n <CardHeader className=\"pb-2\">\n <CardTitle className=\"text-base\">{section.label}</CardTitle>\n <CardAction>\n <IconButton\n size=\"sm\"\n variant=\"ghost\"\n aria-label={l.edit}\n title={l.edit}\n onClick={() => onEditStep(section.stepIndex)}\n >\n <Pencil />\n </IconButton>\n </CardAction>\n </CardHeader>\n <CardContent>\n <dl className=\"grid gap-2 text-sm\">\n {section.items.map((item, iIdx) => (\n <div key={iIdx}>\n {iIdx > 0 && (\n <div className=\"mb-2 border-t border-[var(--border)]\" role=\"presentation\" />\n )}\n <div className=\"flex items-start justify-between gap-4\">\n <dt className=\"text-[var(--text-muted)]\">{item.label}</dt>\n <dd className=\"text-
|
|
1
|
+
{"version":3,"sources":["../../src/wizard/wizard-summary.tsx"],"sourcesContent":["import { Pencil } from \"lucide-react\";\nimport { Card, CardAction, CardContent, CardHeader, CardTitle, IconButton } from \"../components/ui\";\nimport type { SummarySection, WizardLabels } from \"./types\";\nimport { DEFAULT_WIZARD_LABELS } from \"./types\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * The review step: one card per section, each row a label/value pair, each card\n * carrying an edit button back to the step it came from.\n *\n * Sections are data, not children, because \"jump back to step N\" is the whole\n * point of the component and a caller assembling its own cards invariably drops\n * it. Labels and values are `ReactNode`, so a value can be a badge or a link.\n */\nexport function WizardSummary({\n sections,\n onEditStep,\n labels,\n}: {\n sections: SummarySection[];\n onEditStep: (stepIndex: number) => void;\n labels?: Partial<WizardLabels>;\n}) {\n const l = useKitLabels(\"wizard\", DEFAULT_WIZARD_LABELS, labels);\n\n return (\n <div className=\"space-y-4\">\n <h2 className=\"text-lg font-semibold text-[var(--text-primary)]\">{l.reviewTitle}</h2>\n {sections.map((section, sIdx) => (\n <Card key={sIdx}>\n {/* CardHeader is a grid, and CardAction is the top-right column it\n reserves — the edit button has to go through it or it stacks under\n the title instead of sitting beside it. */}\n <CardHeader className=\"pb-2\">\n <CardTitle className=\"text-base\">{section.label}</CardTitle>\n <CardAction>\n <IconButton\n size=\"sm\"\n variant=\"ghost\"\n aria-label={l.edit}\n title={l.edit}\n onClick={() => onEditStep(section.stepIndex)}\n >\n <Pencil />\n </IconButton>\n </CardAction>\n </CardHeader>\n <CardContent>\n <dl className=\"grid gap-2 text-sm\">\n {section.items.map((item, iIdx) => (\n <div key={iIdx}>\n {iIdx > 0 && (\n <div className=\"mb-2 border-t border-[var(--border)]\" role=\"presentation\" />\n )}\n <div className=\"flex items-start justify-between gap-4\">\n <dt className=\"text-[var(--text-muted)]\">{item.label}</dt>\n <dd className=\"text-end font-medium text-[var(--text-primary)]\">\n {item.value}\n </dd>\n </div>\n </div>\n ))}\n </dl>\n </CardContent>\n </Card>\n ))}\n </div>\n );\n}\n"],"mappings":";AA2BM,cAMI,YANJ;AA3BN,SAAS,cAAc;AACvB,SAAS,MAAM,YAAY,aAAa,YAAY,WAAW,kBAAkB;AAEjF,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAUtB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,IAAI,aAAa,UAAU,uBAAuB,MAAM;AAE9D,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,wBAAC,QAAG,WAAU,oDAAoD,YAAE,aAAY;AAAA,IAC/E,SAAS,IAAI,CAAC,SAAS,SACtB,qBAAC,QAIC;AAAA,2BAAC,cAAW,WAAU,QACpB;AAAA,4BAAC,aAAU,WAAU,aAAa,kBAAQ,OAAM;AAAA,QAChD,oBAAC,cACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,cAAY,EAAE;AAAA,YACd,OAAO,EAAE;AAAA,YACT,SAAS,MAAM,WAAW,QAAQ,SAAS;AAAA,YAE3C,8BAAC,UAAO;AAAA;AAAA,QACV,GACF;AAAA,SACF;AAAA,MACA,oBAAC,eACC,8BAAC,QAAG,WAAU,sBACX,kBAAQ,MAAM,IAAI,CAAC,MAAM,SACxB,qBAAC,SACE;AAAA,eAAO,KACN,oBAAC,SAAI,WAAU,wCAAuC,MAAK,gBAAe;AAAA,QAE5E,qBAAC,SAAI,WAAU,0CACb;AAAA,8BAAC,QAAG,WAAU,4BAA4B,eAAK,OAAM;AAAA,UACrD,oBAAC,QAAG,WAAU,mDACX,eAAK,OACR;AAAA,WACF;AAAA,WATQ,IAUV,CACD,GACH,GACF;AAAA,SAlCS,IAmCX,CACD;AAAA,KACH;AAEJ;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eifi1/ui-kit",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
|
|
6
6
|
"_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",
|
|
@@ -52,6 +52,10 @@
|
|
|
52
52
|
"types": "./dist/rhf.d.ts",
|
|
53
53
|
"import": "./dist/rhf.js"
|
|
54
54
|
},
|
|
55
|
+
"./i18n/*": {
|
|
56
|
+
"types": "./dist/i18n/locales/*.d.ts",
|
|
57
|
+
"import": "./dist/i18n/locales/*.js"
|
|
58
|
+
},
|
|
55
59
|
"./tokens.css": "./tokens.css",
|
|
56
60
|
"./package.json": "./package.json"
|
|
57
61
|
},
|
|
@@ -76,7 +80,11 @@
|
|
|
76
80
|
"dev:showcase": "vite --config showcase/vite.config.ts",
|
|
77
81
|
"build:showcase": "vite build --config showcase/vite.config.ts",
|
|
78
82
|
"preview:showcase": "vite preview --config showcase/vite.config.ts",
|
|
79
|
-
"prepublishOnly": "npm run build"
|
|
83
|
+
"prepublishOnly": "npm run build",
|
|
84
|
+
"release": "commit-and-tag-version",
|
|
85
|
+
"release:dry": "commit-and-tag-version --dry-run",
|
|
86
|
+
"commitlint": "node scripts/check-commit-range.cjs",
|
|
87
|
+
"prepare": "husky || true"
|
|
80
88
|
},
|
|
81
89
|
"peerDependencies": {
|
|
82
90
|
"lucide-react": ">=0.400.0 <2",
|
|
@@ -112,6 +120,7 @@
|
|
|
112
120
|
"@types/react-dom": "^19.2.3",
|
|
113
121
|
"@vitejs/plugin-react": "^4.5.2",
|
|
114
122
|
"@vitest/coverage-v8": "^4.1.11",
|
|
123
|
+
"commit-and-tag-version": "^13.2.1",
|
|
115
124
|
"eslint": "^9.39.5",
|
|
116
125
|
"eslint-import-resolver-typescript": "^4.4.5",
|
|
117
126
|
"eslint-plugin-import-x": "^4.17.1",
|
|
@@ -119,6 +128,7 @@
|
|
|
119
128
|
"eslint-plugin-react-hooks": "^7.1.1",
|
|
120
129
|
"flag-icons": "^7.5.0",
|
|
121
130
|
"globals": "^17.12.0",
|
|
131
|
+
"husky": "^9.1.7",
|
|
122
132
|
"jsdom": "^30.0.1",
|
|
123
133
|
"lucide-react": "^0.511.0",
|
|
124
134
|
"react-hook-form": "^7.88.0",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useState } from "react";
|
|
1
|
+
import { useId, useState } from "react";
|
|
2
2
|
import type { KeyboardEvent, ReactNode } from "react";
|
|
3
3
|
import { Button, Card, FIELD_WRITABLE_LOOK, Input } from "./ui";
|
|
4
4
|
import { UserAvatar } from "./user-avatar";
|
|
@@ -42,6 +42,10 @@ export function ProfileSetting({
|
|
|
42
42
|
labels: ProfileSettingLabels;
|
|
43
43
|
}) {
|
|
44
44
|
const dirty = value.trim().length > 0 && value.trim() !== (name ?? "");
|
|
45
|
+
// Generated, not the literal "display-name" it was: two of these on one page (an
|
|
46
|
+
// admin editing someone else's profile beside their own) shared an id, and the
|
|
47
|
+
// second label pointed at the first field.
|
|
48
|
+
const inputId = useId();
|
|
45
49
|
return (
|
|
46
50
|
<Card className="p-4 space-y-3">
|
|
47
51
|
<div className="flex items-center gap-3">
|
|
@@ -58,7 +62,7 @@ export function ProfileSetting({
|
|
|
58
62
|
<span>{memberSince ?? "—"}</span>
|
|
59
63
|
</div>
|
|
60
64
|
<Input
|
|
61
|
-
id=
|
|
65
|
+
id={inputId}
|
|
62
66
|
label={labels.displayName}
|
|
63
67
|
value={value}
|
|
64
68
|
onChange={(e) => onChange(e.target.value)}
|
|
@@ -189,7 +189,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
|
|
|
189
189
|
const editable = !!onCurrencyChange;
|
|
190
190
|
// On phones we suppress the OS keyboard (inputMode="none" below) and show our
|
|
191
191
|
// own calculator numpad, so the desktop popover trigger is hidden. The
|
|
192
|
-
//
|
|
192
|
+
// end padding keys off showCalc, so it tightens up automatically.
|
|
193
193
|
const isMobile = useMediaQuery(PHONE_QUERY, false);
|
|
194
194
|
const showCalc = !disabled && !isMobile;
|
|
195
195
|
const [focused, setFocused] = useState(false);
|
|
@@ -335,14 +335,14 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
|
|
|
335
335
|
// 375px screen those 16px are the difference between a readable figure
|
|
336
336
|
// and a clipped one (feedback #430 rework).
|
|
337
337
|
asDisplay
|
|
338
|
-
? currency ? (editable ? "
|
|
338
|
+
? currency ? (editable ? "pe-16" : "pe-12") : "pe-0"
|
|
339
339
|
: showCalc
|
|
340
|
-
? currency ? (editable ? "
|
|
341
|
-
: currency ? (editable ? "
|
|
340
|
+
? currency ? (editable ? "pe-24" : "pe-16") : "pe-10"
|
|
341
|
+
: currency ? (editable ? "pe-20" : "pe-14") : "pe-3",
|
|
342
342
|
// Centred display shape: centre in what is LEFT of the currency chip.
|
|
343
343
|
// `text-center` alone would centre the figure in the whole box, i.e.
|
|
344
344
|
// partly underneath the chip; the padding above is what takes the chip
|
|
345
|
-
// out of the centring, and nothing is added
|
|
345
|
+
// out of the centring, and nothing is added at the start because a
|
|
346
346
|
// mirrored reservation would spend the width twice (see `align`).
|
|
347
347
|
asDisplay && align === "center" && "text-center",
|
|
348
348
|
// Last, so it wins over the base class's own text colour.
|
|
@@ -363,12 +363,14 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
|
|
|
363
363
|
{/* Trailing controls share one flex track so the calculator icon and the
|
|
364
364
|
currency suffix/picker sit side by side without overlapping. */}
|
|
365
365
|
{/* The display shape has no box to inset from, so the controls align to the
|
|
366
|
-
figure's own
|
|
366
|
+
figure's own end edge and its baseline strip (`bottom-1`, matching the
|
|
367
367
|
input's pb-1) instead of floating inside a field. */}
|
|
368
368
|
<div
|
|
369
369
|
className={cn(
|
|
370
370
|
"absolute flex items-center gap-0.5",
|
|
371
|
-
|
|
371
|
+
// Logical `end-*`: the chip and the calculator are the figure's trailing
|
|
372
|
+
// controls, so a right-to-left form carries them on the left.
|
|
373
|
+
asDisplay ? "bottom-1 end-0" : "inset-y-1 end-1",
|
|
372
374
|
)}
|
|
373
375
|
>
|
|
374
376
|
{showCalc && (
|
|
@@ -437,7 +439,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
|
|
|
437
439
|
setOpen(false);
|
|
438
440
|
}}
|
|
439
441
|
className={cn(
|
|
440
|
-
"flex w-full items-center gap-2 px-3 py-1.5 text-sm text-
|
|
442
|
+
"flex w-full items-center gap-2 px-3 py-1.5 text-sm text-start hover:bg-[var(--bg-hover)]",
|
|
441
443
|
active && "bg-[var(--bg-active)]",
|
|
442
444
|
)}
|
|
443
445
|
>
|