FEAT: Add templating support for collection, story, and moment fields #189

kennethsn · 2025-11-01T22:12:44Z

Also renames award & id badge moments to awards and id badges moments to be consistent with other [Plural]Moment naming conventions
Adds some cleanup to awards+id badge interfaces and integrations

…eat/169_id-badge-ksn

also refactors id badge and awards moments BREAKING CHANGE: - award moment -> awards moment #169

Copilot

Pull Request Overview

This PR implements several significant features and refactoring improvements to the Stories API:

Adds template string interpolation with dot-notation support for accessing nested object properties
Renames and restructures "Award" and "IdBadge" moment types to their plural forms ("Awards", "IdBadges") for consistency
Introduces a new "Mirador" moment type for displaying IIIF content
Enhances the CardsBrowser component with multiple layout options (minimal, standard, tool)
Updates various type definitions from enums to union types and adjusts property naming conventions

Reviewed Changes

Copilot reviewed 65 out of 66 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/utils/string.ts	Updated `formatString` to support nested object access via dot-notation and iterative replacement
src/utils/object.ts	Added `getValue` helper function for accessing nested properties with array index support
src/constants.ts	Updated `FORMATTER_TEMPLATE_REGEX` to support dot-notation in template strings
src/types.ts	Renamed Award/IdBadge moment types to plural forms, updated property naming to snake_case, converted StatType enum to union type
src/state/storyStore.ts	Added `typographyFormatter` getter for template string interpolation
src/state/momentStore.ts	Added `muiTheme` property, `typographyFormatter` getter, and refactored `getField` to use `getValue` utility
src/state/moments/*.ts	Created new MiradorMomentStore, renamed AwardMomentStore to AwardsMomentStore, IdBadgeMomentStore to IdBadgesMomentStore
src/state/collectionStore.ts	Added `layout` property, `typographyFormatter` getter, and story key management
src/components/UI/EditableTypography/*	Added formatter support for template string interpolation in typography
src/components/UI/CardsBrowser/*	Enhanced with multiple layout options (minimal, standard, tool)
src/components/UI/Cards/*	Updated Swiper configurations for carousel and row layouts, removed redundant imports
src/components/UI/IdBadge/*	Updated to accept idBadge as nested prop instead of spread props
src/components/Moments/AwardsMoment/*	Renamed from AwardMoment to AwardsMoment with corresponding file and variable updates
src/components/Moments/IdBadgesMoment/*	Renamed from IdBadgeMoment to IdBadgesMoment with updated structure
src/components/Moments/MiradorMoment/*	New component for displaying Mirador IIIF viewer in an iframe
src/components/Moments/IFrameMoment/*	Added postMessage support for sending configuration to iframes
package.json	Updated version to 1.0.0-dev-51 and react-resizable-panels dependency

Comments suppressed due to low confidence (1)

src/components/UI/Cards/CardsRowLayout.tsx:1

The 'loop' prop was removed from the Swiper configuration without corresponding removal from the module imports. Additionally, if looping was previously enabled by default, removing it changes the carousel behavior. Consider making this configurable through layoutOptions.loop like in CardsCarouselLayout.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-11-01T22:15:12Z

src/components/Moments/LibraryMoment/LibraryMoment.tsx

+        // @ts-expect-error TS2345 - Need to fix type issue later.
+        items={shelf.items}


A @ts-expect-error directive is used to suppress a type error rather than fixing the underlying type mismatch. This creates technical debt and masks potential runtime issues. Consider updating the type definitions in Bookshelf.types.ts to match the LibraryShelf item structure, or add proper type transformation.

Suggested change

// @ts-expect-error TS2345 - Need to fix type issue later.

items={shelf.items}

items={shelf.items as any} {/* TODO: Replace 'any' with the correct type transformation */}

Copilot · 2025-11-01T22:15:12Z

src/components/Moments/IdBadgesMoment/IdBadgesMoment.tsx

+      {badges.map((idBadge, index) => (
+        <IdBadge
+          key={idBadge.content?.id || idBadge.logo?.url || `badge-${index}`}
+          // @ts-expect-error -- caption is passed through for the zigzag card layout


Using @ts-expect-error to bypass type checking for the caption prop indicates that the IdBadge component types don't match the actual usage pattern. The IdBadgeProps type should be updated to include the optional caption property if it's a valid prop used by the zigzag layout.

Suggested change

// @ts-expect-error -- caption is passed through for the zigzag card layout

Copilot · 2025-11-01T22:15:12Z

src/components/UI/Cards/CardsRowLayout.tsx

-        slidesPerView={slidesPerView}
+        slidesOffsetAfter={24}
+        slidesOffsetBefore={24}
+        slidesPerView="auto"


The slidesPerView property is now hardcoded to 'auto', completely ignoring the layoutOptions?.slides_per_view configuration that was removed from line 24. This breaks the API contract where users could configure the number of slides per view through layoutOptions. Consider restoring this configuration option.

Copilot · 2025-11-01T22:15:13Z

src/components/UI/Cards/CardsCarouselLayout.tsx

+  const slidesPerView = layoutOptions?.slides_per_view ?? 'auto';
+  const slideGap = layoutOptions?.slide_gap;


The default for slidesPerView changed from 3 to 'auto', and slideGap no longer has a default value (was 16). These breaking changes to default behavior should be documented or reconsidered to maintain backward compatibility.

Copilot · 2025-11-01T22:15:13Z

src/components/Moments/IFrameMoment/IFrameMoment.tsx

+    iframeWindow.postMessage(
+      JSON.parse(JSON.stringify(moment.message)),
+      '*',


Using '*' as the targetOrigin in postMessage allows any origin to receive the message, creating a potential security vulnerability. Consider restricting the targetOrigin to specific domains or extracting it from the iframe URL to prevent unintended message interception.

Suggested change

iframeWindow.postMessage(

JSON.parse(JSON.stringify(moment.message)),

'*',

// Extract the origin from the iframe URL to use as targetOrigin

let targetOrigin = '*';

try {

targetOrigin = new URL(moment.url).origin;

} catch (e) {

// If parsing fails, default to '*' (not recommended, but prevents crash)

}

iframeWindow.postMessage(

JSON.parse(JSON.stringify(moment.message)),

targetOrigin,

Copilot · 2025-11-01T22:15:13Z

src/utils/object.ts

+      current = current[Number(field)];
+    } else if (
+      typeof current === 'object'
+      && current !== null


Variable 'current' is of type date, object or regular expression, but it is compared to an expression of type null.

emulatingkat

Thank you for this work!

kennethsn added 5 commits October 29, 2025 14:02

FEAT: export shared store classes

3ffb644

FEAT: add support for Mirador viewer and misc cleanup

e3bde08

Merge remote-tracking branch 'origin/feat/169_id-badge-moment' into f…

81c7e3a

…eat/169_id-badge-ksn

DOCS: release dev version 1.0.0-dev-50

0ade119

FEAT: add templating logic for moment, story, and collection fields

3994509

also refactors id badge and awards moments BREAKING CHANGE: - award moment -> awards moment #169

kennethsn added this to the Version 1 milestone Nov 1, 2025

kennethsn requested review from Copilot, emulatingkat and vsealsnutt November 1, 2025 22:12

kennethsn self-assigned this Nov 1, 2025

Copilot AI reviewed Nov 1, 2025

View reviewed changes

emulatingkat approved these changes Nov 2, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FEAT: Add templating support for collection, story, and moment fields #189

FEAT: Add templating support for collection, story, and moment fields #189

Uh oh!

kennethsn commented Nov 1, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Nov 1, 2025

Uh oh!

Copilot AI Nov 1, 2025

Uh oh!

Copilot AI Nov 1, 2025

Uh oh!

Copilot AI Nov 1, 2025

Uh oh!

Copilot AI Nov 1, 2025

Uh oh!

Copilot AI Nov 1, 2025

Uh oh!

emulatingkat left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		// @ts-expect-error TS2345 - Need to fix type issue later.
		items={shelf.items}

	// @ts-expect-error TS2345 - Need to fix type issue later.
	items={shelf.items}
	items={shelf.items as any} {/* TODO: Replace 'any' with the correct type transformation */}

		const slidesPerView = layoutOptions?.slides_per_view ?? 'auto';
		const slideGap = layoutOptions?.slide_gap;

-    iframeWindow.postMessage(
-      JSON.parse(JSON.stringify(moment.message)),
-      '*',
+    // Extract the origin from the iframe URL to use as targetOrigin
+    let targetOrigin = '*';
+    try {
+      targetOrigin = new URL(moment.url).origin;
+    } catch (e) {
+      // If parsing fails, default to '*' (not recommended, but prevents crash)
+    }
+    iframeWindow.postMessage(
+      JSON.parse(JSON.stringify(moment.message)),
+      targetOrigin,

FEAT: Add templating support for collection, story, and moment fields #189

Are you sure you want to change the base?

FEAT: Add templating support for collection, story, and moment fields #189

Uh oh!

Conversation

kennethsn commented Nov 1, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Nov 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 1, 2025

Choose a reason for hiding this comment

Uh oh!

emulatingkat left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants