chore: restore index page component changes

[seaerchin]

Problem

Closes #1903 (reverts the revert)

The previous PR #1903 reverted index page component changes. This PR restores those changes.

Solution

This reverts commit 54a2e25 (fix: revert index page component changes (#1903)), effectively restoring the original index page component improvements.

Breaking Changes

• Yes - this PR contains breaking changes
• No - this PR is backwards compatible

Features:

• Adds maxColumns option for ChildrenPages "boxes" variant (2 or 3 columns)
• Adds imageFit option for ChildrenPages component (cover/contain)
• Adds new JsonFormsMaxColumnsControl for the Studio form builder

Improvements:

• Refactors ImageClient to be a shared internal component
• Moves imageFit schema to a shared location for reuse across components
• Simplifies image URL handling by centralizing assetsBaseUrl logic in ImageClient
• ChildrenPages "boxes" variant now reuses InfoCardWithImage and InfoCardNoImage components
• Updates ChildrenPages "rows" variant styling with improved hover states and arrow icons
• Extracts IMAGE_FIT constants to a shared location

Bug Fixes:

• N/A

Before & After Screenshots

N/A - This restores previously tested changes.

Tests

• Existing Storybook stories updated with new story variants (RowsWithContainAndThumbnail, BoxesWithContainAndThumbnail)
• MSW handlers updated for test coverage

New scripts:

• N/A

New dependencies:

• N/A

New dev dependencies:

• N/A

[Copilot]

Pull request overview

Restores the previously reverted IndexPage/ChildrenPages component enhancements in the @opengovsg/isomer-components Next template, including new layout/image options and Studio form-builder support.

Changes:

• Reintroduces maxColumns (2/3) and imageFit (cover/contain) options for ChildrenPages, with updated Stories/MSW fixtures.
• Refactors image URL prefixing by centralizing assetsBaseUrl handling in a shared internal ImageClient, and updates consuming components accordingly.
• Adds reusable imageFit schemas/constants and a new Studio JsonForms control (JsonFormsMaxColumnsControl) to drive the new maxColumns option.

Reviewed changes

Copilot reviewed 43 out of 43 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/components/src/templates/next/layouts/IndexPage/IndexPage.stories.tsx	Adds new IndexPage story variants for imageFit="contain" scenarios.
packages/components/src/templates/next/layouts/Collection/utils/processCollectionItems.ts	Stops prefixing collection card image URLs here; defers to ImageClient.
packages/components/src/templates/next/components/internal/Navbar/NavbarClient.tsx	Updates ImageClient import to the new internal shared component.
packages/components/src/templates/next/components/internal/Navbar/Navbar.tsx	Passes raw logoUrl and relies on ImageClient for prefixing.
packages/components/src/templates/next/components/internal/ImageClient/index.ts	Adds barrel export for internal ImageClient.
packages/components/src/templates/next/components/internal/ImageClient/ImageClient.tsx	Centralizes assetsBaseUrl prefixing + error fallback behavior.
packages/components/src/templates/next/components/internal/ContentPageHeader/ContentPageHeader.tsx	Switches to internal shared ImageClient.
packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx	Switches to internal shared ImageClient.
packages/components/src/templates/next/components/internal/BlogCard/BlogCard.tsx	Switches to internal shared ImageClient.
packages/components/src/templates/next/components/complex/Video/LiteYouTubeEmbed.tsx	Switches to internal shared ImageClient.
packages/components/src/templates/next/components/complex/Video/LiteVimeoEmbed.tsx	Switches to internal shared ImageClient.
packages/components/src/templates/next/components/complex/LogoCloud/LogoCloud.tsx	Uses internal ImageClient directly for logo rendering/prefixing.
packages/components/src/templates/next/components/complex/Infopic/components/BlockInfopic.tsx	Switches to internal shared ImageClient.
packages/components/src/templates/next/components/complex/InfoCards/components/InfoCardWithImage.tsx	Adds isFallback plumbing into image card rendering.
packages/components/src/templates/next/components/complex/InfoCards/components/InfoCardWithFullImage.tsx	Adds isFallback plumbing into full-image card rendering.
packages/components/src/templates/next/components/complex/InfoCards/components/InfoCardImage.tsx	Removes local URL prefixing; delegates to internal ImageClient.
packages/components/src/templates/next/components/complex/InfoCards/common.ts	Adds styling tweaks + fallback-image styling variants.
packages/components/src/templates/next/components/complex/ImageGallery/ImageGalleryClient.tsx	Switches to internal shared ImageClient.
packages/components/src/templates/next/components/complex/Image/index.ts	Stops re-exporting ImageClient from complex/Image.
packages/components/src/templates/next/components/complex/Image/Image.tsx	Delegates URL prefixing to internal ImageClient.
packages/components/src/templates/next/components/complex/Hero/HeroSearchbar/HeroSearchbar.tsx	Delegates URL prefixing to internal ImageClient.
packages/components/src/templates/next/components/complex/Hero/HeroLargeImage/ImageContainer.tsx	Threads assetsBaseUrl through so ImageClient can prefix URLs.
packages/components/src/templates/next/components/complex/Hero/HeroLargeImage/HeroLargeImage.tsx	Passes assetsBaseUrl down for correct hero image URL handling.
packages/components/src/templates/next/components/complex/Hero/HeroGradient.tsx	Delegates URL prefixing to internal ImageClient.
packages/components/src/templates/next/components/complex/Hero/HeroFloating.tsx	Delegates URL prefixing to internal ImageClient.
packages/components/src/templates/next/components/complex/Hero/HeroBlock.tsx	Delegates URL prefixing to internal ImageClient.
packages/components/src/templates/next/components/complex/Contentpic/Contentpic.tsx	Delegates URL prefixing to internal ImageClient.
packages/components/src/templates/next/components/complex/CollectionBlock/CollectionBlock.tsx	Delegates URL prefixing to internal ImageClient in card thumbnails.
packages/components/src/templates/next/components/complex/ChildrenPages/ChildrenPages.tsx	Restores enhanced ChildrenPages layouts, adds maxColumns + imageFit, and reuses InfoCard components.
packages/components/src/templates/next/components/complex/ChildrenPages/ChildrenPages.stories.tsx	Adds new ChildrenPages story variants for contain thumbnails.
packages/components/src/templates/next/components/complex/Blockquote/Blockquote.tsx	Delegates URL prefixing to internal ImageClient.
packages/components/src/schemas/internal/index.ts	Re-exports the new shared image-fit schema.
packages/components/src/schemas/internal/imageFitSchema.ts	Adds shared TypeBox schemas for imageFit used across components.
packages/components/src/interfaces/constants.ts	Introduces shared IMAGE_FIT constants.
packages/components/src/interfaces/complex/InfoCards.ts	Reuses the shared image-fit schema; adds isFallback to props type.
packages/components/src/interfaces/complex/ChildrenPages/ChildrenPages.ts	Adds maxColumns + shared imageFit schema to ChildrenPages schema.
apps/studio/tests/msw/handlers/page.ts	Updates MSW fixture to use restored ChildrenPages fields (showThumbnail, imageFit, ordering).
apps/studio/tests/msw/handlers/folder.ts	Adds MSW handler for folder.listChildPages to support ordering UI.
apps/studio/src/stories/Page/EditPage/EditIndexPage.stories.tsx	Registers new folder MSW handler for the EditIndexPage story.
apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/index.ts	Exports the new JsonFormsMaxColumnsControl.
apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsMaxColumnsControl.tsx	Adds a conditional control to select max columns for ChildrenPages boxes variant.
apps/studio/src/features/editing-experience/components/form-builder/FormBuilder.tsx	Registers the new max-columns renderer in JsonForms renderers list.
apps/studio/src/constants/formBuilder.ts	Adds a ranking constant for the new ChildrenPages max-columns control.

---

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

[Copilot]

variant is being read from ctx.core.data.variant, but for ChildrenPages blocks this data is nested (e.g. content.0.variant). As written, this control will almost always return null and never render. Consider deriving the sibling path from the current path (e.g. read ${getParentPath(path)}.variant) so it works for nested objects/arrays.