From 3b867ce08621ac93209738bef7ab21b95bc59390 Mon Sep 17 00:00:00 2001 From: Esari Upendri <236554266+sc-esariupendri@users.noreply.github.com> Date: Tue, 20 Jan 2026 09:12:38 +0530 Subject: [PATCH 1/5] .gitignore file updated --- examples/kit-nextjs-article-starter/.gitignore | 1 + examples/kit-nextjs-location-finder/.gitignore | 2 ++ examples/kit-nextjs-product-listing/.gitignore | 4 +++- examples/kit-nextjs-skate-park/.gitignore | 2 ++ 4 files changed, 8 insertions(+), 1 deletion(-) diff --git a/examples/kit-nextjs-article-starter/.gitignore b/examples/kit-nextjs-article-starter/.gitignore index 29f355cfe..093af0709 100644 --- a/examples/kit-nextjs-article-starter/.gitignore +++ b/examples/kit-nextjs-article-starter/.gitignore @@ -32,3 +32,4 @@ !.sitecore/component-map.ts !.sitecore/component-map.client.ts !.sitecore/import-map.ts +.jest-cache \ No newline at end of file diff --git a/examples/kit-nextjs-location-finder/.gitignore b/examples/kit-nextjs-location-finder/.gitignore index f71608f67..cd5baa32b 100644 --- a/examples/kit-nextjs-location-finder/.gitignore +++ b/examples/kit-nextjs-location-finder/.gitignore @@ -27,3 +27,5 @@ !.sitecore/component-map.ts !.sitecore/component-map.client.ts !.sitecore/import-map.ts +/coverage +/.jest-cache \ No newline at end of file diff --git a/examples/kit-nextjs-product-listing/.gitignore b/examples/kit-nextjs-product-listing/.gitignore index f14362f07..57a100633 100644 --- a/examples/kit-nextjs-product-listing/.gitignore +++ b/examples/kit-nextjs-product-listing/.gitignore @@ -26,4 +26,6 @@ # except for component-map !.sitecore/component-map.ts !.sitecore/import-map.ts -!.sitecore/component-map.client.ts \ No newline at end of file +!.sitecore/component-map.client.ts +/coverage +/.jest-cache \ No newline at end of file diff --git a/examples/kit-nextjs-skate-park/.gitignore b/examples/kit-nextjs-skate-park/.gitignore index f71608f67..cd5baa32b 100644 --- a/examples/kit-nextjs-skate-park/.gitignore +++ b/examples/kit-nextjs-skate-park/.gitignore @@ -27,3 +27,5 @@ !.sitecore/component-map.ts !.sitecore/component-map.client.ts !.sitecore/import-map.ts +/coverage +/.jest-cache \ No newline at end of file From 5daa52d6bd78189b9311e61e8313e95efc260c40 Mon Sep 17 00:00:00 2001 From: Esari Upendri <236554266+sc-esariupendri@users.noreply.github.com> Date: Thu, 22 Jan 2026 11:23:45 +0530 Subject: [PATCH 2/5] Updated .gitignore file --- examples/kit-nextjs-article-starter/.gitignore | 2 +- examples/kit-nextjs-location-finder/.gitignore | 5 ++++- examples/kit-nextjs-product-listing/.gitignore | 2 +- examples/kit-nextjs-skate-park/.gitignore | 2 +- 4 files changed, 7 insertions(+), 4 deletions(-) diff --git a/examples/kit-nextjs-article-starter/.gitignore b/examples/kit-nextjs-article-starter/.gitignore index 093af0709..545775186 100644 --- a/examples/kit-nextjs-article-starter/.gitignore +++ b/examples/kit-nextjs-article-starter/.gitignore @@ -32,4 +32,4 @@ !.sitecore/component-map.ts !.sitecore/component-map.client.ts !.sitecore/import-map.ts -.jest-cache \ No newline at end of file +.jest-cache diff --git a/examples/kit-nextjs-location-finder/.gitignore b/examples/kit-nextjs-location-finder/.gitignore index cd5baa32b..eb6b4f6e2 100644 --- a/examples/kit-nextjs-location-finder/.gitignore +++ b/examples/kit-nextjs-location-finder/.gitignore @@ -27,5 +27,8 @@ !.sitecore/component-map.ts !.sitecore/component-map.client.ts !.sitecore/import-map.ts + +# testing +.jest-cache /coverage -/.jest-cache \ No newline at end of file + diff --git a/examples/kit-nextjs-product-listing/.gitignore b/examples/kit-nextjs-product-listing/.gitignore index 57a100633..b82ec08a6 100644 --- a/examples/kit-nextjs-product-listing/.gitignore +++ b/examples/kit-nextjs-product-listing/.gitignore @@ -28,4 +28,4 @@ !.sitecore/import-map.ts !.sitecore/component-map.client.ts /coverage -/.jest-cache \ No newline at end of file +/.jest-cache diff --git a/examples/kit-nextjs-skate-park/.gitignore b/examples/kit-nextjs-skate-park/.gitignore index cd5baa32b..e3bf67d87 100644 --- a/examples/kit-nextjs-skate-park/.gitignore +++ b/examples/kit-nextjs-skate-park/.gitignore @@ -28,4 +28,4 @@ !.sitecore/component-map.client.ts !.sitecore/import-map.ts /coverage -/.jest-cache \ No newline at end of file +/.jest-cache From 60dae3431471ced2ea2666712540e464b1a4e7eb Mon Sep 17 00:00:00 2001 From: Esari Upendri <236554266+sc-esariupendri@users.noreply.github.com> Date: Thu, 22 Jan 2026 11:47:30 +0530 Subject: [PATCH 3/5] Added prettier rules --- examples/kit-nextjs-article-starter/.prettierrc | 8 ++++++++ examples/kit-nextjs-location-finder/.prettierrc | 8 ++++++++ examples/kit-nextjs-product-listing/.prettierrc | 2 +- examples/kit-nextjs-skate-park/.prettierrc | 8 ++++++++ 4 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 examples/kit-nextjs-article-starter/.prettierrc create mode 100644 examples/kit-nextjs-location-finder/.prettierrc create mode 100644 examples/kit-nextjs-skate-park/.prettierrc diff --git a/examples/kit-nextjs-article-starter/.prettierrc b/examples/kit-nextjs-article-starter/.prettierrc new file mode 100644 index 000000000..0839848ea --- /dev/null +++ b/examples/kit-nextjs-article-starter/.prettierrc @@ -0,0 +1,8 @@ +{ + "endOfLine": "auto", + "semi": true, + "singleQuote": true, + "tabWidth": 2, + "trailingComma": "es5", + "printWidth": 100 +} \ No newline at end of file diff --git a/examples/kit-nextjs-location-finder/.prettierrc b/examples/kit-nextjs-location-finder/.prettierrc new file mode 100644 index 000000000..0839848ea --- /dev/null +++ b/examples/kit-nextjs-location-finder/.prettierrc @@ -0,0 +1,8 @@ +{ + "endOfLine": "auto", + "semi": true, + "singleQuote": true, + "tabWidth": 2, + "trailingComma": "es5", + "printWidth": 100 +} \ No newline at end of file diff --git a/examples/kit-nextjs-product-listing/.prettierrc b/examples/kit-nextjs-product-listing/.prettierrc index e36af9ba4..a0106e676 100644 --- a/examples/kit-nextjs-product-listing/.prettierrc +++ b/examples/kit-nextjs-product-listing/.prettierrc @@ -5,4 +5,4 @@ "tabWidth": 2, "trailingComma": "es5", "printWidth": 100 -} +} \ No newline at end of file diff --git a/examples/kit-nextjs-skate-park/.prettierrc b/examples/kit-nextjs-skate-park/.prettierrc new file mode 100644 index 000000000..0839848ea --- /dev/null +++ b/examples/kit-nextjs-skate-park/.prettierrc @@ -0,0 +1,8 @@ +{ + "endOfLine": "auto", + "semi": true, + "singleQuote": true, + "tabWidth": 2, + "trailingComma": "es5", + "printWidth": 100 +} \ No newline at end of file From eaf85d57a5adbc532e7f9257e94bad5c0f7aa7ae Mon Sep 17 00:00:00 2001 From: Esari Upendri <236554266+sc-esariupendri@users.noreply.github.com> Date: Wed, 21 Jan 2026 12:07:07 +0530 Subject: [PATCH 4/5] Updated component files to resolve lint errors --- .../kit-nextjs-article-starter/src/Layout.tsx | 23 +--- .../[site]/[locale]/[[...path]]/not-found.tsx | 1 - .../app/[site]/[locale]/[[...path]]/page.tsx | 34 ++---- .../src/app/layout.tsx | 6 +- .../src/assets/styles/column-splitter.css | 1 - .../assets/styles/tailwind-bootstrap-grid.css | 1 - .../article-header/ArticleHeader.tsx | 9 +- .../article-listing/ArticleListing.tsx | 15 +-- .../src/components/card/Card.dev.tsx | 20 +--- .../container-25252525/Container25252525.tsx | 23 +--- .../container-303030/Container303030.tsx | 18 +-- .../container-3070/Container3070.tsx | 13 +-- .../container-4060/Container4060.tsx | 13 +-- .../container-5050/Container5050.tsx | 16 ++- .../container-6040/Container6040.tsx | 13 +-- .../container-6321/Container6321.tsx | 30 ++--- .../container/container-70/Container70.tsx | 3 +- .../container-7030/Container7030.tsx | 13 +-- .../ContainerFullBleed.tsx | 74 +++++------- .../ContainerFullWidth.tsx | 7 +- .../src/components/flex/Flex.dev.tsx | 34 ++---- .../src/components/icon/Icon.tsx | 1 - .../src/components/image/ImageWrapper.dev.tsx | 2 +- .../src/components/logo-tabs/LogoTabs.tsx | 6 +- .../multi-promo-tabs/MultiPromoTabs.tsx | 17 +-- .../src/components/page-header/PageHeader.tsx | 34 ++---- .../src/components/sxa/ColumnSplitter.tsx | 6 +- .../src/components/sxa/Container.tsx | 20 +--- .../sxa/PartialDesignDynamicPlaceholder.tsx | 9 +- .../src/components/sxa/RowSplitter.tsx | 11 +- .../text-banner/TextBanner02.dev.tsx | 6 +- .../src/i18n/request.ts | 2 +- .../kit-nextjs-location-finder/src/Layout.tsx | 11 +- .../src/Providers.tsx | 8 +- .../app/[site]/[locale]/[[...path]]/page.tsx | 25 ++-- .../src/assets/styles/column-splitter.css | 1 - .../assets/styles/tailwind-bootstrap-grid.css | 1 - .../Accordion5050TitleAbove.dev.tsx | 67 ++++------- .../AccordionBlockCentered.dev.tsx | 4 +- .../AccordionBlockDefault.dev.tsx | 4 +- .../AccordionBlockOneColumnTitleLeft.dev.tsx | 4 +- .../AccordionBlockTwoColumnTitleLeft.dev.tsx | 4 +- .../button-component/ButtonComponent.tsx | 58 ++------- .../src/components/card/Card.dev.tsx | 15 ++- .../component-library/PlaceholderTabs.tsx | 8 +- .../component-library/Testimonials.tsx | 38 +++++- .../container-25252525/Container25252525.tsx | 28 ++++- .../container-303030/Container303030.tsx | 21 +++- .../container-3070/Container3070.tsx | 14 ++- .../container-4060/Container4060.tsx | 14 ++- .../container-5050/Container5050.tsx | 14 ++- .../container-6040/Container6040.tsx | 14 ++- .../container-6321/Container6321.tsx | 42 ++++++- .../container/container-70/Container70.tsx | 7 +- .../container-7030/Container7030.tsx | 14 ++- .../ContainerFullBleed.tsx | 7 +- .../ContainerFullWidth.tsx | 7 +- .../components/content-sdk/CdpPageView.tsx | 2 +- .../src/components/flex/Flex.dev.tsx | 16 ++- .../floating-dock/floating-dock.dev.tsx | 6 +- .../GlobalFooterBlueCompact.dev.tsx | 2 +- .../global-footer/GlobalFooterDefault.dev.tsx | 2 +- .../GlobalHeaderCentered.dev.tsx | 110 ++++++------------ .../global-header/GlobalHeaderDefault.dev.tsx | 110 ++++++------------ .../hero/HeroImageBackground.dev.tsx | 4 +- .../ImageCarouselDefault.dev.tsx | 6 +- .../ImageCarouselThumbnails.dev.tsx | 6 +- .../ImageGalleryNoSpacing.dev.tsx | 28 ++++- .../src/components/image/ImageBlock.tsx | 6 +- .../src/components/image/ImageWrapper.dev.tsx | 17 +-- .../image/image-optimization.context.tsx | 2 +- .../multi-promo-tabs/MultiPromoTab.dev.tsx | 6 +- .../ProductListingCard.dev.tsx | 6 +- .../components/site-metadata/SiteMetadata.tsx | 2 +- .../src/components/sxa/ColumnSplitter.tsx | 14 ++- .../src/components/sxa/Container.tsx | 15 ++- .../src/components/sxa/Image.tsx | 6 +- .../sxa/PartialDesignDynamicPlaceholder.tsx | 7 +- .../src/components/sxa/RowSplitter.tsx | 14 ++- .../src/components/video/Video.tsx | 4 +- .../src/config/image-config.ts | 1 - .../src/lib/component-props/index.ts | 7 +- examples/kit-nextjs-skate-park/package.json | 1 + examples/kit-nextjs-skate-park/src/Layout.tsx | 18 +-- .../kit-nextjs-skate-park/src/Providers.tsx | 16 ++- .../[site]/[locale]/[[...path]]/not-found.tsx | 1 - .../app/[site]/[locale]/[[...path]]/page.tsx | 44 +++---- .../src/app/api/editing/config/route.ts | 8 +- .../src/app/api/editing/render/route.ts | 2 +- .../kit-nextjs-skate-park/src/app/layout.tsx | 18 ++- .../column-splitter/ColumnSplitter.tsx | 16 +-- .../src/components/container/Container.tsx | 14 +-- .../src/components/image/Image.tsx | 23 ++-- .../components/page-content/PageContent.tsx | 5 +- .../PartialDesignDynamicPlaceholder.tsx | 8 +- .../components/row-splitter/RowSplitter.tsx | 14 +-- .../kit-nextjs-skate-park/src/i18n/request.ts | 2 +- 97 files changed, 675 insertions(+), 825 deletions(-) diff --git a/examples/kit-nextjs-article-starter/src/Layout.tsx b/examples/kit-nextjs-article-starter/src/Layout.tsx index f7f0c8766..c2845c4ca 100644 --- a/examples/kit-nextjs-article-starter/src/Layout.tsx +++ b/examples/kit-nextjs-article-starter/src/Layout.tsx @@ -55,21 +55,16 @@ const Layout = ({ page }: LayoutProps): JSX.Element => { const classNamesMain = `${mainClassPageEditing} ${body.variable} ${heading.variable} main-layout`; const metaTitle = - fields?.metadataTitle?.value?.toString() || - fields?.pageTitle?.value?.toString() || - 'Page'; + fields?.metadataTitle?.value?.toString() || fields?.pageTitle?.value?.toString() || 'Page'; const metaDescription = - fields?.metadataDescription?.value?.toString() || - fields?.pageSummary?.value?.toString() || - ''; + fields?.metadataDescription?.value?.toString() || fields?.pageSummary?.value?.toString() || ''; const metaKeywords = fields?.metadataKeywords?.value?.toString() || ''; const ogTitle = fields?.ogTitle?.value?.toString() || fields?.metadataTitle?.value?.toString() || fields?.pageTitle?.value?.toString() || 'Page'; - const ogImage = - fields?.ogImage?.value?.src || fields?.thumbnailImage?.value?.src; + const ogImage = fields?.ogImage?.value?.src || fields?.thumbnailImage?.value?.src; const ogDescription = fields?.ogDescription?.value?.toString() || fields?.metadataDescription?.value?.toString() || @@ -82,15 +77,11 @@ const Layout = ({ page }: LayoutProps): JSX.Element => { {metaTitle} - {metaDescription && ( - - )} + {metaDescription && } {metaKeywords && } {ogTitle && } - {ogDescription && ( - - )} + {ogDescription && } {ogImage && } @@ -102,9 +93,7 @@ const Layout = ({ page }: LayoutProps): JSX.Element => { page={page} rendering={route} componentMap={componentMap} - loadServerImportMap={() => - import('.sitecore/import-map.server') - } + loadServerImportMap={() => import('.sitecore/import-map.server')} /> ) ) : ( diff --git a/examples/kit-nextjs-article-starter/src/app/[site]/[locale]/[[...path]]/not-found.tsx b/examples/kit-nextjs-article-starter/src/app/[site]/[locale]/[[...path]]/not-found.tsx index 89c3cea31..cbe4b561f 100644 --- a/examples/kit-nextjs-article-starter/src/app/[site]/[locale]/[[...path]]/not-found.tsx +++ b/examples/kit-nextjs-article-starter/src/app/[site]/[locale]/[[...path]]/not-found.tsx @@ -8,7 +8,6 @@ import Layout from 'src/Layout'; import Providers from 'src/Providers'; import { NextIntlClientProvider } from 'next-intl'; - export default async function NotFound() { const headersList = await headers(); const { site, locale } = parseRewriteHeader(headersList); diff --git a/examples/kit-nextjs-article-starter/src/app/[site]/[locale]/[[...path]]/page.tsx b/examples/kit-nextjs-article-starter/src/app/[site]/[locale]/[[...path]]/page.tsx index 1c163c8c9..2285f122e 100644 --- a/examples/kit-nextjs-article-starter/src/app/[site]/[locale]/[[...path]]/page.tsx +++ b/examples/kit-nextjs-article-starter/src/app/[site]/[locale]/[[...path]]/page.tsx @@ -48,11 +48,7 @@ export default async function Page({ params, searchParams }: PageProps) { } // Fetch the component data from Sitecore (Likely will be deprecated) - const componentProps = await client.getComponentData( - page.layout, - {}, - components, - ); + const componentProps = await client.getComponentData(page.layout, {}, components); return ( @@ -75,10 +71,7 @@ export const generateStaticParams = async () => { .filter((site: SiteInfo) => site.name === defaultSite) .map((site: SiteInfo) => site.name) : sites.map((site: SiteInfo) => site.name); - return await client.getAppRouterStaticParams( - allowedSites, - routing.locales.slice(), - ); + return await client.getAppRouterStaticParams(allowedSites, routing.locales.slice()); } return []; }; @@ -95,31 +88,20 @@ export const generateMetadata = async ({ params }: PageProps) => { // The same call as for rendering the page. Should be cached by default react behavior const page = await client.getPage(path ?? [], { site, locale }); return { - title: - ( - page?.layout.sitecore.route?.fields as RouteFields - )?.Title?.value?.toString() || 'Page', + title: (page?.layout.sitecore.route?.fields as RouteFields)?.Title?.value?.toString() || 'Page', description: - ( - page?.layout.sitecore.route?.fields as RouteFields - )?.ogDescription?.value?.toString() || + (page?.layout.sitecore.route?.fields as RouteFields)?.ogDescription?.value?.toString() || 'Sitecore Next.js App Router Example', openGraph: { title: - ( - page?.layout.sitecore.route?.fields as RouteFields - )?.ogTitle?.value?.toString() || 'Page', + (page?.layout.sitecore.route?.fields as RouteFields)?.ogTitle?.value?.toString() || 'Page', description: - ( - page?.layout.sitecore.route?.fields as RouteFields - )?.ogDescription?.value?.toString() || + (page?.layout.sitecore.route?.fields as RouteFields)?.ogDescription?.value?.toString() || 'Sitecore Next.js App Router Example', url: url, images: - (page?.layout.sitecore.route?.fields as RouteFields)?.ogImage?.value - ?.src || - (page?.layout.sitecore.route?.fields as RouteFields)?.thumbnailImage - ?.value?.src, + (page?.layout.sitecore.route?.fields as RouteFields)?.ogImage?.value?.src || + (page?.layout.sitecore.route?.fields as RouteFields)?.thumbnailImage?.value?.src, }, }; }; diff --git a/examples/kit-nextjs-article-starter/src/app/layout.tsx b/examples/kit-nextjs-article-starter/src/app/layout.tsx index 5bb42882e..d834c4c34 100644 --- a/examples/kit-nextjs-article-starter/src/app/layout.tsx +++ b/examples/kit-nextjs-article-starter/src/app/layout.tsx @@ -1,10 +1,6 @@ import './globals.css'; -export default function RootLayout({ - children, -}: { - children: React.ReactNode; -}) { +export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} diff --git a/examples/kit-nextjs-article-starter/src/assets/styles/column-splitter.css b/examples/kit-nextjs-article-starter/src/assets/styles/column-splitter.css index 54367c042..20c6f393f 100644 --- a/examples/kit-nextjs-article-starter/src/assets/styles/column-splitter.css +++ b/examples/kit-nextjs-article-starter/src/assets/styles/column-splitter.css @@ -5,4 +5,3 @@ @apply px-[5px]; } } - diff --git a/examples/kit-nextjs-article-starter/src/assets/styles/tailwind-bootstrap-grid.css b/examples/kit-nextjs-article-starter/src/assets/styles/tailwind-bootstrap-grid.css index 527e48d04..9c62ef865 100644 --- a/examples/kit-nextjs-article-starter/src/assets/styles/tailwind-bootstrap-grid.css +++ b/examples/kit-nextjs-article-starter/src/assets/styles/tailwind-bootstrap-grid.css @@ -367,4 +367,3 @@ .offset-xxl-11 { @apply 2xl:offset-11; } - diff --git a/examples/kit-nextjs-article-starter/src/components/article-header/ArticleHeader.tsx b/examples/kit-nextjs-article-starter/src/components/article-header/ArticleHeader.tsx index 289bafd66..cfebbe35a 100644 --- a/examples/kit-nextjs-article-starter/src/components/article-header/ArticleHeader.tsx +++ b/examples/kit-nextjs-article-starter/src/components/article-header/ArticleHeader.tsx @@ -5,14 +5,7 @@ import { useState, useEffect, useRef } from 'react'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Facebook, Linkedin, Twitter, Link, Check, Mail } from 'lucide-react'; import { cn } from '@/lib/utils'; -import { - Field, - Item, - ImageField, - LinkField, - Text, - DateField, -} from '@sitecore-content-sdk/nextjs'; +import { Field, Item, ImageField, LinkField, Text, DateField } from '@sitecore-content-sdk/nextjs'; import { ComponentProps } from '@/lib/component-props'; import { NoDataFallback } from '@/utils/NoDataFallback'; diff --git a/examples/kit-nextjs-article-starter/src/components/article-listing/ArticleListing.tsx b/examples/kit-nextjs-article-starter/src/components/article-listing/ArticleListing.tsx index 8fb76a304..97606f098 100644 --- a/examples/kit-nextjs-article-starter/src/components/article-listing/ArticleListing.tsx +++ b/examples/kit-nextjs-article-starter/src/components/article-listing/ArticleListing.tsx @@ -2,13 +2,7 @@ import React from 'react'; import Image from 'next/image'; -import { - Link, - Text, - Field, - ImageField, - LinkField, -} from '@sitecore-content-sdk/nextjs'; +import { Link, Text, Field, ImageField, LinkField } from '@sitecore-content-sdk/nextjs'; import { cn } from '@/lib/utils'; import { EditableButton as Button } from '@/components/button-component/ButtonComponent'; import { ComponentProps } from '@/lib/component-props'; @@ -144,12 +138,7 @@ export const Default: React.FC = ({
{isPageEditing ? (
- {article.title} + {article.title}
) : (
= (props) => { - const { image, heading, description, link, className, icon, editable } = - props; + const { image, heading, description, link, className, icon, editable } = props; return ( - + @@ -51,8 +40,7 @@ export const Default: React.FC = (props) => { {editable && ( <> - {link?.value?.text}{' '} - + {link?.value?.text} )} diff --git a/examples/kit-nextjs-article-starter/src/components/container/container-25252525/Container25252525.tsx b/examples/kit-nextjs-article-starter/src/components/container/container-25252525/Container25252525.tsx index b1ea1db1d..ee671cbf9 100644 --- a/examples/kit-nextjs-article-starter/src/components/container/container-25252525/Container25252525.tsx +++ b/examples/kit-nextjs-article-starter/src/components/container/container-25252525/Container25252525.tsx @@ -22,22 +22,10 @@ export const Default: React.FC = (props) => { const isPageEditing = page.mode.isEditing; - const col1Placeholder = getContainerPlaceholderProps( - 'container-25-one', - props.params, - ); - const col2Placeholder = getContainerPlaceholderProps( - 'container-25-two', - props.params, - ); - const col3Placeholder = getContainerPlaceholderProps( - 'container-25-three', - props.params, - ); - const col4Placeholder = getContainerPlaceholderProps( - 'container-25-four', - props.params, - ); + const col1Placeholder = getContainerPlaceholderProps('container-25-one', props.params); + const col2Placeholder = getContainerPlaceholderProps('container-25-two', props.params); + const col3Placeholder = getContainerPlaceholderProps('container-25-three', props.params); + const col4Placeholder = getContainerPlaceholderProps('container-25-four', props.params); const isEmptyPlaceholder = isContainerPlaceholderEmpty(rendering, col1Placeholder, col1) && @@ -49,8 +37,7 @@ export const Default: React.FC = (props) => { return null; } - const excludeTopMargin = - props?.params?.excludeTopMargin === '1' ? true : false; + const excludeTopMargin = props?.params?.excludeTopMargin === '1' ? true : false; return (
= (props) => { const isPageEditing = page.mode.isEditing; - const leftPlaceholder = getContainerPlaceholderProps( - 'container-thirty-left', - props.params, - ); - const centerPlaceholder = getContainerPlaceholderProps( - 'container-thirty-center', - props.params, - ); - const rightPlaceholder = getContainerPlaceholderProps( - 'container-thirty-right', - props.params, - ); + const leftPlaceholder = getContainerPlaceholderProps('container-thirty-left', props.params); + const centerPlaceholder = getContainerPlaceholderProps('container-thirty-center', props.params); + const rightPlaceholder = getContainerPlaceholderProps('container-thirty-right', props.params); const isEmptyPlaceholder = isContainerPlaceholderEmpty(rendering, leftPlaceholder, left) && @@ -48,8 +39,7 @@ export const Default: React.FC = (props) => { return null; } - const excludeTopMargin = - props?.params?.excludeTopMargin === '1' ? true : false; + const excludeTopMargin = props?.params?.excludeTopMargin === '1' ? true : false; return (
= (props) => { const isPageEditing = page.mode.isEditing; - const leftPlaceholders = getContainerPlaceholderProps( - 'container-thirty-left', - props.params, - ); - const rightPlaceholders = getContainerPlaceholderProps( - 'container-seventy-right', - props.params, - ); + const leftPlaceholders = getContainerPlaceholderProps('container-thirty-left', props.params); + const rightPlaceholders = getContainerPlaceholderProps('container-seventy-right', props.params); const isEmptyPlaceholder = isContainerPlaceholderEmpty(rendering, leftPlaceholders, left) && @@ -41,8 +35,7 @@ export const Default: React.FC = (props) => { return null; } - const excludeTopMargin = - props?.params?.excludeTopMargin === '1' ? true : false; + const excludeTopMargin = props?.params?.excludeTopMargin === '1' ? true : false; return (
= (props) => { const isPageEditing = page.mode.isEditing; - const leftPlaceholders = getContainerPlaceholderProps( - 'container-forty-left', - props.params, - ); - const rightPlaceholders = getContainerPlaceholderProps( - 'container-sixty-right', - props.params, - ); + const leftPlaceholders = getContainerPlaceholderProps('container-forty-left', props.params); + const rightPlaceholders = getContainerPlaceholderProps('container-sixty-right', props.params); const isEmptyPlaceholder = isContainerPlaceholderEmpty(rendering, leftPlaceholders, left) && @@ -42,8 +36,7 @@ export const Default: React.FC = (props) => { return null; } - const excludeTopMargin = - props?.params?.excludeTopMargin === '1' ? true : false; + const excludeTopMargin = props?.params?.excludeTopMargin === '1' ? true : false; return (
= (props) => { > - + - +
diff --git a/examples/kit-nextjs-article-starter/src/components/container/container-6040/Container6040.tsx b/examples/kit-nextjs-article-starter/src/components/container/container-6040/Container6040.tsx index cd53cd502..a9f89ae4e 100644 --- a/examples/kit-nextjs-article-starter/src/components/container/container-6040/Container6040.tsx +++ b/examples/kit-nextjs-article-starter/src/components/container/container-6040/Container6040.tsx @@ -25,14 +25,8 @@ export const Default: React.FC = (props) => { const isPageEditing = page.mode.isEditing; - const leftPlaceholders = getContainerPlaceholderProps( - 'container-sixty-left', - props.params, - ); - const rightPlaceholders = getContainerPlaceholderProps( - 'container-forty-right', - props.params, - ); + const leftPlaceholders = getContainerPlaceholderProps('container-sixty-left', props.params); + const rightPlaceholders = getContainerPlaceholderProps('container-forty-right', props.params); const isEmptyPlaceholder = isContainerPlaceholderEmpty(rendering, leftPlaceholders, left) && @@ -42,8 +36,7 @@ export const Default: React.FC = (props) => { return null; } - const excludeTopMargin = - props?.params?.excludeTopMargin === '1' ? true : false; + const excludeTopMargin = props?.params?.excludeTopMargin === '1' ? true : false; return (
= (props) => { const isPageEditing = page.mode.isEditing; - const col1Placeholder = getContainerPlaceholderProps( - 'container-sixty-thirty-one', - props.params, - ); - const col2Placeholder = getContainerPlaceholderProps( - 'container-sixty-thirty-two', - props.params, - ); + const col1Placeholder = getContainerPlaceholderProps('container-sixty-thirty-one', props.params); + const col2Placeholder = getContainerPlaceholderProps('container-sixty-thirty-two', props.params); const col3Placeholder = getContainerPlaceholderProps( 'container-sixty-thirty-three', - props.params, - ); - const col4Placeholder = getContainerPlaceholderProps( - 'container-sixty-thirty-four', - props.params, - ); - const col5Placeholder = getContainerPlaceholderProps( - 'container-sixty-thirty-five', - props.params, - ); - const col6Placeholder = getContainerPlaceholderProps( - 'container-sixty-thirty-six', - props.params, + props.params ); + const col4Placeholder = getContainerPlaceholderProps('container-sixty-thirty-four', props.params); + const col5Placeholder = getContainerPlaceholderProps('container-sixty-thirty-five', props.params); + const col6Placeholder = getContainerPlaceholderProps('container-sixty-thirty-six', props.params); const isEmptyPlaceholder = isContainerPlaceholderEmpty(rendering, col1Placeholder, col1) && @@ -61,8 +46,7 @@ export const Default: React.FC = (props) => { return null; } - const excludeTopMargin = - props?.params?.excludeTopMargin === '1' ? true : false; + const excludeTopMargin = props?.params?.excludeTopMargin === '1' ? true : false; return (
= (props) => { return null; } - const excludeTopMargin = - props?.params?.excludeTopMargin === '1' ? true : false; + const excludeTopMargin = props?.params?.excludeTopMargin === '1' ? true : false; return (
= (props) => { const isPageEditing = page.mode.isEditing; - const leftPlaceholders = getContainerPlaceholderProps( - 'container-seventy-left', - props.params, - ); - const rightPlaceholders = getContainerPlaceholderProps( - 'container-thirty-right', - props.params, - ); + const leftPlaceholders = getContainerPlaceholderProps('container-seventy-left', props.params); + const rightPlaceholders = getContainerPlaceholderProps('container-thirty-right', props.params); const isEmptyPlaceholder = isContainerPlaceholderEmpty(rendering, leftPlaceholders, left) && @@ -42,8 +36,7 @@ export const Default: React.FC = (props) => { return null; } - const excludeTopMargin = - props?.params?.excludeTopMargin === '1' ? true : false; + const excludeTopMargin = props?.params?.excludeTopMargin === '1' ? true : false; return (
= (props) => { const backgroundColor = props?.params?.backgroundColor; const inset = - backgroundColor === 'transparent' - ? false - : props?.params?.inset === '1' - ? true - : false; + backgroundColor === 'transparent' ? false : props?.params?.inset === '1' ? true : false; const padding = - inset === true || - backgroundColor === 'transparent' || - backgroundColor === undefined + inset === true || backgroundColor === 'transparent' || backgroundColor === undefined ? 'noPadding' : 'backgroundPadding'; - const margin = - props?.params?.excludeTopMargin === '1' ? 'excludeMargin' : 'defaultMargin'; + const margin = props?.params?.excludeTopMargin === '1' ? 'excludeMargin' : 'defaultMargin'; // Variants - const containerVariants = cva( - ['group @container container--full-bleed', props?.params?.styles], - { - variants: { - backgroundColor: { - primary: ['has-bg bg-primary text-primary-foreground'], - secondary: ['has-bg bg-secondary text-secondary-foreground'], - tertiary: ['has-bg bg-tertiary text-tertiary-foreground'], - transparent: 'bg-transparent', - }, - inset: { - false: null, - true: [ - 'is-inset px-4 sm:px-8 md:px-16 2xl:px-24 mx-4 overflow-hidden rounded-3xl min-[1440px]:mx-auto max-w-[1408px]', - ], - }, - margin: { - defaultMargin: 'my-8 sm:my-16', - excludeMargin: 'mt-0 mb-0', - }, - padding: { - backgroundPadding: 'py-4 sm:py-16', - noPadding: 'py-0', - }, + const containerVariants = cva(['group @container container--full-bleed', props?.params?.styles], { + variants: { + backgroundColor: { + primary: ['has-bg bg-primary text-primary-foreground'], + secondary: ['has-bg bg-secondary text-secondary-foreground'], + tertiary: ['has-bg bg-tertiary text-tertiary-foreground'], + transparent: 'bg-transparent', }, - defaultVariants: { - backgroundColor: 'transparent', - inset: false, - margin: 'defaultMargin', - padding: 'noPadding', + inset: { + false: null, + true: [ + 'is-inset px-4 sm:px-8 md:px-16 2xl:px-24 mx-4 overflow-hidden rounded-3xl min-[1440px]:mx-auto max-w-[1408px]', + ], + }, + margin: { + defaultMargin: 'my-8 sm:my-16', + excludeMargin: 'mt-0 mb-0', + }, + padding: { + backgroundPadding: 'py-4 sm:py-16', + noPadding: 'py-0', }, }, - ); + defaultVariants: { + backgroundColor: 'transparent', + inset: false, + margin: 'defaultMargin', + padding: 'noPadding', + }, + }); return (
= (props) => { return null; } - const excludeTopMargin = - props?.params?.excludeTopMargin === '1' ? true : false; + const excludeTopMargin = props?.params?.excludeTopMargin === '1' ? true : false; return (
( key: T, - value: EnumValues<(typeof flexVariants)[T]>, + value: EnumValues<(typeof flexVariants)[T]> ) => { return flexVariants[key][value as keyof (typeof flexVariants)[T]] || ''; }; @@ -300,7 +300,7 @@ export const Flex: React.FC = ({ getVariantString('align', align), getVariantString('gap', gap), getVariantString('wrap', wrap), - className, + className )} > {children} @@ -329,7 +329,7 @@ export const FlexItem: React.FC = ({ `md:${getVariantString('width', basis)}`, getVariantString('alignSelf', alignSelf), 'w-full', - className, + className )} > {children} @@ -337,12 +337,7 @@ export const FlexItem: React.FC = ({ ); }; -export const XMFlex: React.FC = ({ - params, - rendering, - fields, - page, -}) => { +export const XMFlex: React.FC = ({ params, rendering, fields, page }) => { const phKey = `flex-${params.DynamicPlaceholderId}`; return ( = ({ gap={getFieldValue(fields, 'gap')} className={getFieldValue(fields, 'className')} > - + ); }; -export const XMFlexItem: React.FC = ({ - params, - rendering, - fields, - page, -}) => { +export const XMFlexItem: React.FC = ({ params, rendering, fields, page }) => { const phKey = `flex-item-${params.DynamicPlaceholderId}`; return ( = ({ alignSelf={getFieldValue(fields, 'alignSelf')} className={getFieldValue(fields, 'className')} > - + ); }; diff --git a/examples/kit-nextjs-article-starter/src/components/icon/Icon.tsx b/examples/kit-nextjs-article-starter/src/components/icon/Icon.tsx index baa9ee6b1..879d72197 100644 --- a/examples/kit-nextjs-article-starter/src/components/icon/Icon.tsx +++ b/examples/kit-nextjs-article-starter/src/components/icon/Icon.tsx @@ -21,7 +21,6 @@ export type IconProps = SvgProps & { export const defaultSvgProps = {}; export const sharedAttributes = (props: SvgProps): Record => { - const { isAriaHidden = true, altText, ...rest } = props; // attributes where a blank value would not affect user experience can be defined here as default diff --git a/examples/kit-nextjs-article-starter/src/components/image/ImageWrapper.dev.tsx b/examples/kit-nextjs-article-starter/src/components/image/ImageWrapper.dev.tsx index 1b687d99d..08e2aea18 100644 --- a/examples/kit-nextjs-article-starter/src/components/image/ImageWrapper.dev.tsx +++ b/examples/kit-nextjs-article-starter/src/components/image/ImageWrapper.dev.tsx @@ -45,7 +45,7 @@ export const Default: React.FC = (props) => { const imageSrc = image?.value?.src ? image?.value?.src : ''; const isSvg = imageSrc.includes('.svg'); - + // if unoptimized || svg || external // Check if image is from external domain (not current hostname) // Only check window.location after hydration is complete to avoid hydration mismatch diff --git a/examples/kit-nextjs-article-starter/src/components/logo-tabs/LogoTabs.tsx b/examples/kit-nextjs-article-starter/src/components/logo-tabs/LogoTabs.tsx index f31bd3fa3..62dc94069 100644 --- a/examples/kit-nextjs-article-starter/src/components/logo-tabs/LogoTabs.tsx +++ b/examples/kit-nextjs-article-starter/src/components/logo-tabs/LogoTabs.tsx @@ -8,7 +8,11 @@ import { LogoItem } from './LogoItem'; import { EditableButton as Button } from '@/components/button-component/ButtonComponent'; import { cn } from '@/lib/utils'; -export const Default: React.FC = ({ fields, page, isPageEditing: propIsPageEditing }) => { +export const Default: React.FC = ({ + fields, + page, + isPageEditing: propIsPageEditing, +}) => { const isPageEditing = propIsPageEditing || page.mode.isEditing; const { title, backgroundImage, logos, logoTabContent } = fields?.data?.datasource ?? {}; const [activeTabIndex, setActiveTabIndex] = useState(0); diff --git a/examples/kit-nextjs-article-starter/src/components/multi-promo-tabs/MultiPromoTabs.tsx b/examples/kit-nextjs-article-starter/src/components/multi-promo-tabs/MultiPromoTabs.tsx index 19107da3c..a575d3db9 100644 --- a/examples/kit-nextjs-article-starter/src/components/multi-promo-tabs/MultiPromoTabs.tsx +++ b/examples/kit-nextjs-article-starter/src/components/multi-promo-tabs/MultiPromoTabs.tsx @@ -26,12 +26,10 @@ export const Default: React.FC = (props) => { if (fields) { const tabItems = fields.data?.datasource?.children?.results ?? []; // Get the initially selected tab title for the dropdown display - const initialTabTitle = - tabItems[0]?.title?.jsonValue?.value || 'Select an option'; + const initialTabTitle = tabItems[0]?.title?.jsonValue?.value || 'Select an option'; // Get dropdown label text or use default const droplistLabelText = - fields.data?.datasource?.droplistLabel?.jsonValue?.value || - 'Select a value'; + fields.data?.datasource?.droplistLabel?.jsonValue?.value || 'Select a value'; // When in editor mode, render all tabs stacked if (isEditMode) { @@ -78,19 +76,12 @@ export const Default: React.FC = (props) => { onValueChange={(value) => setActiveTab(Number(value))} defaultValue={activeTab.toString()} > - + {tabItems.map((item, index) => ( - + {item.title?.jsonValue.value || `Tab ${index + 1}`} ))} diff --git a/examples/kit-nextjs-article-starter/src/components/page-header/PageHeader.tsx b/examples/kit-nextjs-article-starter/src/components/page-header/PageHeader.tsx index b792fb600..ec7bd7c0e 100644 --- a/examples/kit-nextjs-article-starter/src/components/page-header/PageHeader.tsx +++ b/examples/kit-nextjs-article-starter/src/components/page-header/PageHeader.tsx @@ -20,18 +20,12 @@ const pageHeaderComponentClasses = cva( secondary: 'bg-secondary text-secondary-foreground', }, }, - }, + } ); -export const Default: React.FC = ({ - fields, - params, - page, -}) => { - const { imageRequired, videoOptional, logoText, children } = - fields?.data?.datasource || {}; - const { pageHeaderTitle, pageTitle, pageSubtitle } = - fields?.data?.externalFields || {}; +export const Default: React.FC = ({ fields, params, page }) => { + const { imageRequired, videoOptional, logoText, children } = fields?.data?.datasource || {}; + const { pageHeaderTitle, pageTitle, pageSubtitle } = fields?.data?.externalFields || {}; const title = pageHeaderTitle?.jsonValue ?? pageTitle?.jsonValue; const subtitle = pageSubtitle?.jsonValue; @@ -53,10 +47,7 @@ export const Default: React.FC = ({
{/* Left */}
- + = ({ /> {children?.results && ( - +
= ({
{/* Right */}
- + - +
{videoOptional?.jsonValue?.value?.href ? (
diff --git a/examples/kit-nextjs-location-finder/src/components/container/container-303030/Container303030.tsx b/examples/kit-nextjs-location-finder/src/components/container/container-303030/Container303030.tsx index 62aefca70..b132a3446 100644 --- a/examples/kit-nextjs-location-finder/src/components/container/container-303030/Container303030.tsx +++ b/examples/kit-nextjs-location-finder/src/components/container/container-303030/Container303030.tsx @@ -36,13 +36,28 @@ export const Default: React.FC = (props) => { >
- + - + - +
diff --git a/examples/kit-nextjs-location-finder/src/components/container/container-3070/Container3070.tsx b/examples/kit-nextjs-location-finder/src/components/container/container-3070/Container3070.tsx index ced49e9c6..4304e6ba5 100644 --- a/examples/kit-nextjs-location-finder/src/components/container/container-3070/Container3070.tsx +++ b/examples/kit-nextjs-location-finder/src/components/container/container-3070/Container3070.tsx @@ -34,10 +34,20 @@ export const Default: React.FC = (props) => { > - + - +
diff --git a/examples/kit-nextjs-location-finder/src/components/container/container-4060/Container4060.tsx b/examples/kit-nextjs-location-finder/src/components/container/container-4060/Container4060.tsx index f080c637c..69786df89 100644 --- a/examples/kit-nextjs-location-finder/src/components/container/container-4060/Container4060.tsx +++ b/examples/kit-nextjs-location-finder/src/components/container/container-4060/Container4060.tsx @@ -34,10 +34,20 @@ export const Default: React.FC = (props) => { > - + - +
diff --git a/examples/kit-nextjs-location-finder/src/components/container/container-5050/Container5050.tsx b/examples/kit-nextjs-location-finder/src/components/container/container-5050/Container5050.tsx index deb57497e..6d3c5e713 100644 --- a/examples/kit-nextjs-location-finder/src/components/container/container-5050/Container5050.tsx +++ b/examples/kit-nextjs-location-finder/src/components/container/container-5050/Container5050.tsx @@ -34,10 +34,20 @@ export const Default: React.FC = (props) => { > - + - +
diff --git a/examples/kit-nextjs-location-finder/src/components/container/container-6040/Container6040.tsx b/examples/kit-nextjs-location-finder/src/components/container/container-6040/Container6040.tsx index a4ab7beef..5957bbc97 100644 --- a/examples/kit-nextjs-location-finder/src/components/container/container-6040/Container6040.tsx +++ b/examples/kit-nextjs-location-finder/src/components/container/container-6040/Container6040.tsx @@ -35,10 +35,20 @@ export const Default: React.FC = (props) => { > - + - +
diff --git a/examples/kit-nextjs-location-finder/src/components/container/container-6321/Container6321.tsx b/examples/kit-nextjs-location-finder/src/components/container/container-6321/Container6321.tsx index f3c6a9bde..88b006ddd 100644 --- a/examples/kit-nextjs-location-finder/src/components/container/container-6321/Container6321.tsx +++ b/examples/kit-nextjs-location-finder/src/components/container/container-6321/Container6321.tsx @@ -56,22 +56,52 @@ export const Default: React.FC = (props) => { >
- + - + - + - + - + - +
diff --git a/examples/kit-nextjs-location-finder/src/components/container/container-70/Container70.tsx b/examples/kit-nextjs-location-finder/src/components/container/container-70/Container70.tsx index c7c3f6d86..3c626edfe 100644 --- a/examples/kit-nextjs-location-finder/src/components/container/container-70/Container70.tsx +++ b/examples/kit-nextjs-location-finder/src/components/container/container-70/Container70.tsx @@ -35,7 +35,12 @@ export const Default: React.FC = (props) => {
- +
diff --git a/examples/kit-nextjs-location-finder/src/components/container/container-7030/Container7030.tsx b/examples/kit-nextjs-location-finder/src/components/container/container-7030/Container7030.tsx index 93d1582e1..817c491bc 100644 --- a/examples/kit-nextjs-location-finder/src/components/container/container-7030/Container7030.tsx +++ b/examples/kit-nextjs-location-finder/src/components/container/container-7030/Container7030.tsx @@ -34,10 +34,20 @@ export const Default: React.FC = (props) => { > - + - +
diff --git a/examples/kit-nextjs-location-finder/src/components/container/container-full-bleed/ContainerFullBleed.tsx b/examples/kit-nextjs-location-finder/src/components/container/container-full-bleed/ContainerFullBleed.tsx index 7b641557c..1048288c4 100644 --- a/examples/kit-nextjs-location-finder/src/components/container/container-full-bleed/ContainerFullBleed.tsx +++ b/examples/kit-nextjs-location-finder/src/components/container/container-full-bleed/ContainerFullBleed.tsx @@ -66,7 +66,12 @@ export const Default: React.FC = (props) => { > - +
diff --git a/examples/kit-nextjs-location-finder/src/components/container/container-full-width/ContainerFullWidth.tsx b/examples/kit-nextjs-location-finder/src/components/container/container-full-width/ContainerFullWidth.tsx index 692481b20..1699ba0a9 100644 --- a/examples/kit-nextjs-location-finder/src/components/container/container-full-width/ContainerFullWidth.tsx +++ b/examples/kit-nextjs-location-finder/src/components/container/container-full-width/ContainerFullWidth.tsx @@ -32,7 +32,12 @@ export const Default: React.FC = (props) => { > - + diff --git a/examples/kit-nextjs-location-finder/src/components/content-sdk/CdpPageView.tsx b/examples/kit-nextjs-location-finder/src/components/content-sdk/CdpPageView.tsx index be419ff66..ea1a96218 100644 --- a/examples/kit-nextjs-location-finder/src/components/content-sdk/CdpPageView.tsx +++ b/examples/kit-nextjs-location-finder/src/components/content-sdk/CdpPageView.tsx @@ -11,7 +11,7 @@ import { JSX } from 'react'; * It uses the Sitecore Cloud SDK to enable page view events on the client-side. * See Sitecore Cloud SDK documentation for details. * https://www.npmjs.com/package/@sitecore-cloudsdk/events - * + * * Note: This component uses useSitecore() hook because it's a client-side tracking component * that runs outside the normal component rendering flow and needs to access page context * from the SitecoreProvider. diff --git a/examples/kit-nextjs-location-finder/src/components/flex/Flex.dev.tsx b/examples/kit-nextjs-location-finder/src/components/flex/Flex.dev.tsx index 9af089009..a6da8be1e 100644 --- a/examples/kit-nextjs-location-finder/src/components/flex/Flex.dev.tsx +++ b/examples/kit-nextjs-location-finder/src/components/flex/Flex.dev.tsx @@ -340,7 +340,13 @@ export const FlexItem: React.FC = ({ ); }; -export const XMFlex: React.FC = ({ params, rendering, fields, page, componentMap }) => { +export const XMFlex: React.FC = ({ + params, + rendering, + fields, + page, + componentMap, +}) => { const phKey = `flex-${params.DynamicPlaceholderId}`; return ( = ({ params, rendering, fields, page, ); }; -export const XMFlexItem: React.FC = ({ params, rendering, fields, page, componentMap }) => { +export const XMFlexItem: React.FC = ({ + params, + rendering, + fields, + page, + componentMap, +}) => { const phKey = `flex-item-${params.DynamicPlaceholderId}`; return ( - {open && } + {open && ( + + + + )} diff --git a/examples/kit-nextjs-location-finder/src/components/global-footer/GlobalFooterBlueCompact.dev.tsx b/examples/kit-nextjs-location-finder/src/components/global-footer/GlobalFooterBlueCompact.dev.tsx index 111e752fb..4aabb01f8 100644 --- a/examples/kit-nextjs-location-finder/src/components/global-footer/GlobalFooterBlueCompact.dev.tsx +++ b/examples/kit-nextjs-location-finder/src/components/global-footer/GlobalFooterBlueCompact.dev.tsx @@ -1,4 +1,4 @@ -'use client' +'use client'; import { useRef } from 'react'; import { Text } from '@sitecore-content-sdk/nextjs'; import { GlobalFooterProps } from '@/components/global-footer/global-footer.props'; diff --git a/examples/kit-nextjs-location-finder/src/components/global-footer/GlobalFooterDefault.dev.tsx b/examples/kit-nextjs-location-finder/src/components/global-footer/GlobalFooterDefault.dev.tsx index 0cb42f281..f7bf76d9e 100644 --- a/examples/kit-nextjs-location-finder/src/components/global-footer/GlobalFooterDefault.dev.tsx +++ b/examples/kit-nextjs-location-finder/src/components/global-footer/GlobalFooterDefault.dev.tsx @@ -1,4 +1,4 @@ -'use client' +'use client'; import { useRef } from 'react'; import { Text } from '@sitecore-content-sdk/nextjs'; import { GlobalFooterProps } from '@/components/global-footer/global-footer.props'; diff --git a/examples/kit-nextjs-location-finder/src/components/global-header/GlobalHeaderCentered.dev.tsx b/examples/kit-nextjs-location-finder/src/components/global-header/GlobalHeaderCentered.dev.tsx index a17b5a66d..c0a7ef2e0 100644 --- a/examples/kit-nextjs-location-finder/src/components/global-header/GlobalHeaderCentered.dev.tsx +++ b/examples/kit-nextjs-location-finder/src/components/global-header/GlobalHeaderCentered.dev.tsx @@ -21,8 +21,7 @@ import { AnimatedHoverNav } from '@/components/ui/animated-hover-nav'; export const GlobalHeaderCentered: React.FC = (props) => { const { fields, isPageEditing } = props ?? {}; - const { logo, primaryNavigationLinks, headerContact } = - fields?.data?.item ?? {}; + const { logo, primaryNavigationLinks, headerContact } = fields?.data?.item ?? {}; const [isOpen, setIsOpen] = useState(false); const [sheetAnimationComplete, setSheetAnimationComplete] = useState(false); const [visible, setVisible] = useState(true); @@ -64,7 +63,7 @@ export const GlobalHeaderCentered: React.FC = (props) => { animate={{ opacity: visible ? 1 : 0 }} transition={{ duration: isReducedMotion ? 0 : 0.2 }} className={cn( - 'bg-background/80 @container sticky top-0 z-50 flex h-[96px] w-full items-center justify-center border-b backdrop-blur-md', + 'bg-background/80 @container sticky top-0 z-50 flex h-[96px] w-full items-center justify-center border-b backdrop-blur-md' )} >
@@ -81,9 +80,7 @@ export const GlobalHeaderCentered: React.FC = (props) => { {primaryNavigationLinks?.targetItems && primaryNavigationLinks.targetItems.length > 0 && primaryNavigationLinks?.targetItems.map((item, index) => ( - + {isPageEditing ? ( @@ -145,14 +139,8 @@ export const GlobalHeaderCentered: React.FC = (props) => { ) : ( headerContact.jsonValue.value.href && ( - @@ -175,11 +163,7 @@ export const GlobalHeaderCentered: React.FC = (props) => { )} - @@ -208,54 +192,39 @@ export const GlobalHeaderCentered: React.FC = (props) => { > {primaryNavigationLinks?.targetItems && primaryNavigationLinks.targetItems.length > 0 && - primaryNavigationLinks?.targetItems.map( - (item, index) => ( - - {isPageEditing ? ( - + ) : ( + item.link?.jsonValue?.value?.href && ( + - ) : ( - item.link?.jsonValue?.value?.href && ( - - ) - )} - - ), - )} + ) + )} + + ))} {headerContact?.jsonValue?.value && ( = (props) => { > {isPageEditing ? ( ) : ( headerContact.jsonValue.value.href && ( - diff --git a/examples/kit-nextjs-location-finder/src/components/global-header/GlobalHeaderDefault.dev.tsx b/examples/kit-nextjs-location-finder/src/components/global-header/GlobalHeaderDefault.dev.tsx index 74a52d10c..8b8adb27f 100644 --- a/examples/kit-nextjs-location-finder/src/components/global-header/GlobalHeaderDefault.dev.tsx +++ b/examples/kit-nextjs-location-finder/src/components/global-header/GlobalHeaderDefault.dev.tsx @@ -22,8 +22,7 @@ import { AnimatedHoverNav } from '@/components/ui/animated-hover-nav'; export const GlobalHeaderDefault: React.FC = (props) => { const { fields, isPageEditing } = props ?? {}; - const { logo, primaryNavigationLinks, headerContact } = - fields?.data?.item ?? {}; + const { logo, primaryNavigationLinks, headerContact } = fields?.data?.item ?? {}; const [isOpen, setIsOpen] = useState(false); const [sheetAnimationComplete, setSheetAnimationComplete] = useState(false); const [visible, setVisible] = useState(true); @@ -65,7 +64,7 @@ export const GlobalHeaderDefault: React.FC = (props) => { animate={{ opacity: visible ? 1 : 0 }} transition={{ duration: isReducedMotion ? 0 : 0.2 }} className={cn( - 'bg-background/80 @container sticky top-0 z-50 flex h-[96px] w-full items-center justify-center border-b backdrop-blur-md', + 'bg-background/80 @container sticky top-0 z-50 flex h-[96px] w-full items-center justify-center border-b backdrop-blur-md' )} >
@@ -105,9 +104,7 @@ export const GlobalHeaderDefault: React.FC = (props) => { {primaryNavigationLinks?.targetItems && primaryNavigationLinks.targetItems.length > 0 && primaryNavigationLinks?.targetItems.map((item, index) => ( - + {isPageEditing ? ( @@ -148,14 +142,8 @@ export const GlobalHeaderDefault: React.FC = (props) => { ) : ( headerContact.jsonValue.value.href && ( - @@ -178,11 +166,7 @@ export const GlobalHeaderDefault: React.FC = (props) => { )} - @@ -211,54 +195,39 @@ export const GlobalHeaderDefault: React.FC = (props) => { > {primaryNavigationLinks?.targetItems && primaryNavigationLinks.targetItems.length > 0 && - primaryNavigationLinks?.targetItems.map( - (item, index) => ( - - {isPageEditing ? ( - + ) : ( + item.link?.jsonValue?.value?.href && ( + - ) : ( - item.link?.jsonValue?.value?.href && ( - - ) - )} - - ), - )} + ) + )} + + ))} {headerContact?.jsonValue?.value && ( = (props) => { > {isPageEditing ? ( ) : ( headerContact.jsonValue.value.href && ( - diff --git a/examples/kit-nextjs-location-finder/src/components/hero/HeroImageBackground.dev.tsx b/examples/kit-nextjs-location-finder/src/components/hero/HeroImageBackground.dev.tsx index 2061860aa..a248dbbf4 100644 --- a/examples/kit-nextjs-location-finder/src/components/hero/HeroImageBackground.dev.tsx +++ b/examples/kit-nextjs-location-finder/src/components/hero/HeroImageBackground.dev.tsx @@ -49,8 +49,8 @@ export const HeroImageBackground: React.FC = (props) => { wrapperClass="absolute w-full inset-0 scrim-background/50 scrim-l-full group-[.position-right]:scrim-r-full group-[.position-right]:scrim-l-0 group-[.position-center]:scrim-l-0 group-[.position-center]:scrim-b-full" className="h-full w-full object-cover opacity-80" priority={true} - loading='eager' - fetchPriority='high' + loading="eager" + fetchPriority="high" page={props.page} /> diff --git a/examples/kit-nextjs-location-finder/src/components/image-carousel/ImageCarouselDefault.dev.tsx b/examples/kit-nextjs-location-finder/src/components/image-carousel/ImageCarouselDefault.dev.tsx index d4ba13f29..fdf9be75d 100644 --- a/examples/kit-nextjs-location-finder/src/components/image-carousel/ImageCarouselDefault.dev.tsx +++ b/examples/kit-nextjs-location-finder/src/components/image-carousel/ImageCarouselDefault.dev.tsx @@ -158,7 +158,11 @@ export const ImageCarouselDefault = (props: ImageCarouselProps) => {
)}
- + ))} diff --git a/examples/kit-nextjs-location-finder/src/components/image-carousel/ImageCarouselThumbnails.dev.tsx b/examples/kit-nextjs-location-finder/src/components/image-carousel/ImageCarouselThumbnails.dev.tsx index 0db694b3f..eab9d5220 100644 --- a/examples/kit-nextjs-location-finder/src/components/image-carousel/ImageCarouselThumbnails.dev.tsx +++ b/examples/kit-nextjs-location-finder/src/components/image-carousel/ImageCarouselThumbnails.dev.tsx @@ -136,7 +136,11 @@ export const ImageCarouselThumbnails = (props: ImageCarouselProps) => { data-component-part="carousel item" >
- +
= (props) => { data-speed={isMdContainer ? '0.2' : '0.1'} > {image1 && ( - + )}
@@ -79,7 +84,12 @@ export const ImageGalleryNoSpacing: React.FC = (props) => { data-speed={isMdContainer ? '0.1' : '-0.0'} > {image1 && ( - + )}
@@ -89,7 +99,12 @@ export const ImageGalleryNoSpacing: React.FC = (props) => { data-speed={isMdContainer ? '0.05' : '-0.05'} > {image3 && ( - + )}
@@ -100,7 +115,12 @@ export const ImageGalleryNoSpacing: React.FC = (props) => { data-speed={isMdContainer ? '0.0' : '-0.1'} > {image4 && ( - + )} diff --git a/examples/kit-nextjs-location-finder/src/components/image/ImageBlock.tsx b/examples/kit-nextjs-location-finder/src/components/image/ImageBlock.tsx index 343e71dc3..efbd42677 100644 --- a/examples/kit-nextjs-location-finder/src/components/image/ImageBlock.tsx +++ b/examples/kit-nextjs-location-finder/src/components/image/ImageBlock.tsx @@ -13,7 +13,11 @@ export const Default: React.FC = (props) => { if (fields !== undefined) { return (
- +

diff --git a/examples/kit-nextjs-location-finder/src/components/image/ImageWrapper.dev.tsx b/examples/kit-nextjs-location-finder/src/components/image/ImageWrapper.dev.tsx index a5a0ef59b..8106574ce 100644 --- a/examples/kit-nextjs-location-finder/src/components/image/ImageWrapper.dev.tsx +++ b/examples/kit-nextjs-location-finder/src/components/image/ImageWrapper.dev.tsx @@ -1,9 +1,5 @@ import { cn } from '@/lib/utils'; -import { - ImageField, - Image as ContentSdkImage, - Page, -} from '@sitecore-content-sdk/nextjs'; +import { ImageField, Image as ContentSdkImage, Page } from '@sitecore-content-sdk/nextjs'; import NextImage, { ImageProps } from 'next/image'; import placeholderImageLoader from '@/utils/placeholderImageLoader'; import { IMAGE_REMOTE_PATTERNS } from '@/config/image-config'; @@ -69,13 +65,10 @@ export const Default: React.FC = (props) => { }; return IMAGE_REMOTE_PATTERNS.some((pattern) => { - const protocolMatch = - !pattern.protocol || pattern.protocol === url.protocol.slice(0, -1); + const protocolMatch = !pattern.protocol || pattern.protocol === url.protocol.slice(0, -1); if (!protocolMatch) return false; - const hostnameRegex = new RegExp( - '^' + convertToRegex(pattern.hostname) + '$' - ); + const hostnameRegex = new RegExp('^' + convertToRegex(pattern.hostname) + '$'); return hostnameRegex.test(url.hostname); }); } catch { @@ -89,9 +82,7 @@ export const Default: React.FC = (props) => { // - SVG files (can't be optimized) // - External images that don't match remotePatterns const isUnoptimized = - unoptimized || - isSvg || - (imageSrc.startsWith('http') && !shouldOptimize(imageSrc)); + unoptimized || isSvg || (imageSrc.startsWith('http') && !shouldOptimize(imageSrc)); return (
diff --git a/examples/kit-nextjs-location-finder/src/components/image/image-optimization.context.tsx b/examples/kit-nextjs-location-finder/src/components/image/image-optimization.context.tsx index 165047adb..317608cd8 100644 --- a/examples/kit-nextjs-location-finder/src/components/image/image-optimization.context.tsx +++ b/examples/kit-nextjs-location-finder/src/components/image/image-optimization.context.tsx @@ -1,4 +1,4 @@ -'use client' +'use client'; import { createContext } from 'react'; interface ImageOptions { diff --git a/examples/kit-nextjs-location-finder/src/components/multi-promo-tabs/MultiPromoTab.dev.tsx b/examples/kit-nextjs-location-finder/src/components/multi-promo-tabs/MultiPromoTab.dev.tsx index fedffc437..4f3927927 100644 --- a/examples/kit-nextjs-location-finder/src/components/multi-promo-tabs/MultiPromoTab.dev.tsx +++ b/examples/kit-nextjs-location-finder/src/components/multi-promo-tabs/MultiPromoTab.dev.tsx @@ -41,7 +41,11 @@ const Default = (props: MultiPromoTabsFields) => { } >
- +
{link1?.jsonValue && (
)} diff --git a/examples/kit-nextjs-location-finder/src/config/image-config.ts b/examples/kit-nextjs-location-finder/src/config/image-config.ts index 6560d5bb6..0800e379c 100644 --- a/examples/kit-nextjs-location-finder/src/config/image-config.ts +++ b/examples/kit-nextjs-location-finder/src/config/image-config.ts @@ -15,4 +15,3 @@ export const IMAGE_REMOTE_PATTERNS = [ port: '', }, ] as const; - diff --git a/examples/kit-nextjs-location-finder/src/lib/component-props/index.ts b/examples/kit-nextjs-location-finder/src/lib/component-props/index.ts index 72dd2f089..8a8ee5cca 100644 --- a/examples/kit-nextjs-location-finder/src/lib/component-props/index.ts +++ b/examples/kit-nextjs-location-finder/src/lib/component-props/index.ts @@ -1,4 +1,9 @@ -import { ComponentParams, ComponentRendering, Page, NextjsContentSdkComponent } from '@sitecore-content-sdk/nextjs'; +import { + ComponentParams, + ComponentRendering, + Page, + NextjsContentSdkComponent, +} from '@sitecore-content-sdk/nextjs'; /** * Shared component props diff --git a/examples/kit-nextjs-skate-park/package.json b/examples/kit-nextjs-skate-park/package.json index d7ec29fcc..a84ecd9d4 100644 --- a/examples/kit-nextjs-skate-park/package.json +++ b/examples/kit-nextjs-skate-park/package.json @@ -42,6 +42,7 @@ "eslint": "^9.33.0", "eslint-config-next": "15.5.0", "npm-run-all2": "^8.0.4", + "prettier": "3.6.2", "tailwindcss": "^4", "typescript": "~5.8.3" }, diff --git a/examples/kit-nextjs-skate-park/src/Layout.tsx b/examples/kit-nextjs-skate-park/src/Layout.tsx index fe9906873..6e3cb3860 100644 --- a/examples/kit-nextjs-skate-park/src/Layout.tsx +++ b/examples/kit-nextjs-skate-park/src/Layout.tsx @@ -1,10 +1,10 @@ -import React, { JSX } from "react"; -import { Field, Page } from "@sitecore-content-sdk/nextjs"; -import Scripts from "src/Scripts"; -import SitecoreStyles from "components/content-sdk/SitecoreStyles"; -import { DesignLibraryApp } from "@sitecore-content-sdk/nextjs"; -import { AppPlaceholder } from "@sitecore-content-sdk/nextjs"; -import componentMap from ".sitecore/component-map"; +import React, { JSX } from 'react'; +import { Field, Page } from '@sitecore-content-sdk/nextjs'; +import Scripts from 'src/Scripts'; +import SitecoreStyles from 'components/content-sdk/SitecoreStyles'; +import { DesignLibraryApp } from '@sitecore-content-sdk/nextjs'; +import { AppPlaceholder } from '@sitecore-content-sdk/nextjs'; +import componentMap from '.sitecore/component-map'; interface LayoutProps { page: Page; @@ -18,7 +18,7 @@ export interface RouteFields { const Layout = ({ page }: LayoutProps): JSX.Element => { const { layout, mode } = page; const { route } = layout.sitecore; - const mainClassPageEditing = mode.isEditing ? "editing-mode" : "prod-mode"; + const mainClassPageEditing = mode.isEditing ? 'editing-mode' : 'prod-mode'; return ( <> @@ -32,7 +32,7 @@ const Layout = ({ page }: LayoutProps): JSX.Element => { page={page} rendering={route} componentMap={componentMap} - loadServerImportMap={() => import(".sitecore/import-map.server")} + loadServerImportMap={() => import('.sitecore/import-map.server')} /> ) ) : ( diff --git a/examples/kit-nextjs-skate-park/src/Providers.tsx b/examples/kit-nextjs-skate-park/src/Providers.tsx index ac1b11d7b..f3b2c73e9 100644 --- a/examples/kit-nextjs-skate-park/src/Providers.tsx +++ b/examples/kit-nextjs-skate-park/src/Providers.tsx @@ -1,13 +1,13 @@ -"use client"; -import React from "react"; +'use client'; +import React from 'react'; import { ComponentPropsCollection, ComponentPropsContext, Page, SitecoreProvider, -} from "@sitecore-content-sdk/nextjs"; -import scConfig from "sitecore.config"; -import components from ".sitecore/component-map.client"; +} from '@sitecore-content-sdk/nextjs'; +import scConfig from 'sitecore.config'; +import components from '.sitecore/component-map.client'; export default function Providers({ children, @@ -23,11 +23,9 @@ export default function Providers({ api={scConfig.api} componentMap={components} page={page} - loadImportMap={() => import(".sitecore/import-map.client")} + loadImportMap={() => import('.sitecore/import-map.client')} > - - {children} - + {children} ); } diff --git a/examples/kit-nextjs-skate-park/src/app/[site]/[locale]/[[...path]]/not-found.tsx b/examples/kit-nextjs-skate-park/src/app/[site]/[locale]/[[...path]]/not-found.tsx index 89c3cea31..cbe4b561f 100644 --- a/examples/kit-nextjs-skate-park/src/app/[site]/[locale]/[[...path]]/not-found.tsx +++ b/examples/kit-nextjs-skate-park/src/app/[site]/[locale]/[[...path]]/not-found.tsx @@ -8,7 +8,6 @@ import Layout from 'src/Layout'; import Providers from 'src/Providers'; import { NextIntlClientProvider } from 'next-intl'; - export default async function NotFound() { const headersList = await headers(); const { site, locale } = parseRewriteHeader(headersList); diff --git a/examples/kit-nextjs-skate-park/src/app/[site]/[locale]/[[...path]]/page.tsx b/examples/kit-nextjs-skate-park/src/app/[site]/[locale]/[[...path]]/page.tsx index a9dfa30f9..d77dafbe6 100644 --- a/examples/kit-nextjs-skate-park/src/app/[site]/[locale]/[[...path]]/page.tsx +++ b/examples/kit-nextjs-skate-park/src/app/[site]/[locale]/[[...path]]/page.tsx @@ -1,16 +1,16 @@ -import { isDesignLibraryPreviewData } from "@sitecore-content-sdk/nextjs/editing"; -import { notFound } from "next/navigation"; -import { draftMode } from "next/headers"; -import { SiteInfo } from "@sitecore-content-sdk/nextjs"; -import sites from ".sitecore/sites.json"; -import { routing } from "src/i18n/routing"; -import scConfig from "sitecore.config"; -import client from "src/lib/sitecore-client"; -import Layout, { RouteFields } from "src/Layout"; -import components from ".sitecore/component-map"; -import Providers from "src/Providers"; -import { NextIntlClientProvider } from "next-intl"; -import { setRequestLocale } from "next-intl/server"; +import { isDesignLibraryPreviewData } from '@sitecore-content-sdk/nextjs/editing'; +import { notFound } from 'next/navigation'; +import { draftMode } from 'next/headers'; +import { SiteInfo } from '@sitecore-content-sdk/nextjs'; +import sites from '.sitecore/sites.json'; +import { routing } from 'src/i18n/routing'; +import scConfig from 'sitecore.config'; +import client from 'src/lib/sitecore-client'; +import Layout, { RouteFields } from 'src/Layout'; +import components from '.sitecore/component-map'; +import Providers from 'src/Providers'; +import { NextIntlClientProvider } from 'next-intl'; +import { setRequestLocale } from 'next-intl/server'; type PageProps = { params: Promise<{ @@ -48,11 +48,7 @@ export default async function Page({ params, searchParams }: PageProps) { } // Fetch the component data from Sitecore (Likely will be deprecated) - const componentProps = await client.getComponentData( - page.layout, - {}, - components - ); + const componentProps = await client.getComponentData(page.layout, {}, components); return ( @@ -66,7 +62,7 @@ export default async function Page({ params, searchParams }: PageProps) { // This function gets called at build and export time to determine // pages for SSG ("paths", as tokenized array). export const generateStaticParams = async () => { - if (process.env.NODE_ENV !== "development" && scConfig.generateStaticPaths) { + if (process.env.NODE_ENV !== 'development' && scConfig.generateStaticPaths) { // Filter sites to only include the sites this starter is designed to serve. // This prevents cross-site build errors when multiple starters share the same XM Cloud instance. const defaultSite = scConfig.defaultSite; @@ -76,10 +72,7 @@ export const generateStaticParams = async () => { .map((site: SiteInfo) => site.name) : sites.map((site: SiteInfo) => site.name); - return await client.getAppRouterStaticParams( - allowedSites, - routing.locales.slice() - ); + return await client.getAppRouterStaticParams(allowedSites, routing.locales.slice()); } return []; }; @@ -91,9 +84,6 @@ export const generateMetadata = async ({ params }: PageProps) => { // The same call as for rendering the page. Should be cached by default react behavior const page = await client.getPage(path ?? [], { site, locale }); return { - title: - ( - page?.layout.sitecore.route?.fields as RouteFields - )?.Title?.value?.toString() || "Page", + title: (page?.layout.sitecore.route?.fields as RouteFields)?.Title?.value?.toString() || 'Page', }; }; diff --git a/examples/kit-nextjs-skate-park/src/app/api/editing/config/route.ts b/examples/kit-nextjs-skate-park/src/app/api/editing/config/route.ts index f09d79762..c9dfa732c 100644 --- a/examples/kit-nextjs-skate-park/src/app/api/editing/config/route.ts +++ b/examples/kit-nextjs-skate-park/src/app/api/editing/config/route.ts @@ -1,7 +1,7 @@ -import { createEditingConfigRouteHandler } from "@sitecore-content-sdk/nextjs/route-handler"; -import components from ".sitecore/component-map"; -import metadata from ".sitecore/metadata.json"; -import clientComponents from ".sitecore/component-map.client"; +import { createEditingConfigRouteHandler } from '@sitecore-content-sdk/nextjs/route-handler'; +import components from '.sitecore/component-map'; +import metadata from '.sitecore/metadata.json'; +import clientComponents from '.sitecore/component-map.client'; /** * This API route is used by Sitecore Editor in XM Cloud diff --git a/examples/kit-nextjs-skate-park/src/app/api/editing/render/route.ts b/examples/kit-nextjs-skate-park/src/app/api/editing/render/route.ts index b5cbebf80..0a0d0a597 100644 --- a/examples/kit-nextjs-skate-park/src/app/api/editing/render/route.ts +++ b/examples/kit-nextjs-skate-park/src/app/api/editing/render/route.ts @@ -1,4 +1,4 @@ -import { createEditingRenderRouteHandlers } from "@sitecore-content-sdk/nextjs/route-handler"; +import { createEditingRenderRouteHandlers } from '@sitecore-content-sdk/nextjs/route-handler'; /** * API route to handler Sitecore Editor rendeing. diff --git a/examples/kit-nextjs-skate-park/src/app/layout.tsx b/examples/kit-nextjs-skate-park/src/app/layout.tsx index eded71c6c..db73fab23 100644 --- a/examples/kit-nextjs-skate-park/src/app/layout.tsx +++ b/examples/kit-nextjs-skate-park/src/app/layout.tsx @@ -1,19 +1,15 @@ -import "./globals.css"; -import { Roboto } from "next/font/google"; +import './globals.css'; +import { Roboto } from 'next/font/google'; // Configure the font const roboto = Roboto({ - subsets: ["latin"], // required subset - weight: ["300", "400", "500", "700"], // weights you need - display: "swap", // ensures non-blocking text rendering - variable: "--font-roboto", // optional CSS variable for easier usage + subsets: ['latin'], // required subset + weight: ['300', '400', '500', '700'], // weights you need + display: 'swap', // ensures non-blocking text rendering + variable: '--font-roboto', // optional CSS variable for easier usage }); -export default function RootLayout({ - children, -}: { - children: React.ReactNode; -}) { +export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} diff --git a/examples/kit-nextjs-skate-park/src/components/column-splitter/ColumnSplitter.tsx b/examples/kit-nextjs-skate-park/src/components/column-splitter/ColumnSplitter.tsx index dab1f8b2e..0b7f59231 100644 --- a/examples/kit-nextjs-skate-park/src/components/column-splitter/ColumnSplitter.tsx +++ b/examples/kit-nextjs-skate-park/src/components/column-splitter/ColumnSplitter.tsx @@ -1,7 +1,7 @@ import React, { JSX } from 'react'; import { ComponentProps } from 'lib/component-props'; import componentMap from '.sitecore/component-map'; -import { AppPlaceholder } from "@sitecore-content-sdk/nextjs"; +import { AppPlaceholder } from '@sitecore-content-sdk/nextjs'; /** * The number of columns that can be inserted into the column splitter component. @@ -26,24 +26,20 @@ type ColumnStyles = { }; interface ColumnSplitterProps extends ComponentProps { - params: ComponentProps["params"] & ColumnWidths & ColumnStyles; + params: ComponentProps['params'] & ColumnWidths & ColumnStyles; } -export const Default = ({ - params, - rendering, - page, -}: ColumnSplitterProps): JSX.Element => { +export const Default = ({ params, rendering, page }: ColumnSplitterProps): JSX.Element => { const { EnabledPlaceholders, RenderingIdentifier: id, styles } = params; - const enabledColumns = EnabledPlaceholders?.split(",") ?? []; + const enabledColumns = EnabledPlaceholders?.split(',') ?? []; return (
{enabledColumns.map((columnNum, index) => { const num = Number(columnNum) as ColumnNumber; - const columnWidth = params[`ColumnWidth${num}`] ?? ""; - const columnStyle = params[`Styles${num}`] ?? ""; + const columnWidth = params[`ColumnWidth${num}`] ?? ''; + const columnStyle = params[`Styles${num}`] ?? ''; const columnClassNames = `${columnWidth} ${columnStyle}`.trim(); return ( diff --git a/examples/kit-nextjs-skate-park/src/components/container/Container.tsx b/examples/kit-nextjs-skate-park/src/components/container/Container.tsx index 9206f2dd8..d1f47c7a2 100644 --- a/examples/kit-nextjs-skate-park/src/components/container/Container.tsx +++ b/examples/kit-nextjs-skate-park/src/components/container/Container.tsx @@ -1,20 +1,16 @@ import React, { JSX } from 'react'; import { ComponentProps } from 'lib/component-props'; import componentMap from '.sitecore/component-map'; -import { AppPlaceholder } from "@sitecore-content-sdk/nextjs"; +import { AppPlaceholder } from '@sitecore-content-sdk/nextjs'; interface ContainerProps extends ComponentProps { - params: ComponentProps["params"] & { + params: ComponentProps['params'] & { BackgroundImage?: string; DynamicPlaceholderId: string; }; } -const Container = ({ - params, - rendering, - page, -}: ContainerProps): JSX.Element => { +const Container = ({ params, rendering, page }: ContainerProps): JSX.Element => { const { styles, RenderingIdentifier: id, @@ -24,12 +20,12 @@ const Container = ({ const phKey = `container-${DynamicPlaceholderId}`; // Extract the mediaurl from rendering parameters - const mediaUrlPattern = new RegExp(/mediaurl=\"([^"]*)\"/, "i"); + const mediaUrlPattern = new RegExp(/mediaurl=\"([^"]*)\"/, 'i'); let backgroundStyle: { [key: string]: string } = {}; if (backgroundImage && backgroundImage.match(mediaUrlPattern)) { - const mediaUrl = backgroundImage.match(mediaUrlPattern)?.[1] || ""; + const mediaUrl = backgroundImage.match(mediaUrlPattern)?.[1] || ''; backgroundStyle = { backgroundImage: `url('${mediaUrl}')`, diff --git a/examples/kit-nextjs-skate-park/src/components/image/Image.tsx b/examples/kit-nextjs-skate-park/src/components/image/Image.tsx index 90fa8f843..5e0162b84 100644 --- a/examples/kit-nextjs-skate-park/src/components/image/Image.tsx +++ b/examples/kit-nextjs-skate-park/src/components/image/Image.tsx @@ -5,9 +5,9 @@ import { Link as ContentSdkLink, LinkField, Text, -} from "@sitecore-content-sdk/nextjs"; -import React from "react"; -import { ComponentProps } from "lib/component-props"; +} from '@sitecore-content-sdk/nextjs'; +import React from 'react'; +import { ComponentProps } from 'lib/component-props'; interface ImageFields { Image: ImageField; @@ -41,18 +41,14 @@ export const Banner: React.FC = ({ params, fields }) => { ...fields.Image, value: { ...fields.Image.value, - style: { objectFit: "cover", width: "100%", height: "100%" }, + style: { objectFit: 'cover', width: '100%', height: '100%' }, }, }; return (
- +
); @@ -67,8 +63,7 @@ export const Default: React.FC = (props) => { } const Image = () => ; - const shouldWrapWithLink = - !page.mode.isEditing && fields.TargetUrl?.value?.href; + const shouldWrapWithLink = !page.mode.isEditing && fields.TargetUrl?.value?.href; return ( @@ -79,11 +74,7 @@ export const Default: React.FC = (props) => { ) : ( )} - + ); }; diff --git a/examples/kit-nextjs-skate-park/src/components/page-content/PageContent.tsx b/examples/kit-nextjs-skate-park/src/components/page-content/PageContent.tsx index f9c7c8340..3f470f7e1 100644 --- a/examples/kit-nextjs-skate-park/src/components/page-content/PageContent.tsx +++ b/examples/kit-nextjs-skate-park/src/components/page-content/PageContent.tsx @@ -1,8 +1,5 @@ import React, { JSX } from 'react'; -import { - RichText as ContentSdkRichText, - RichTextField, -} from '@sitecore-content-sdk/nextjs'; +import { RichText as ContentSdkRichText, RichTextField } from '@sitecore-content-sdk/nextjs'; import { ComponentProps } from 'lib/component-props'; interface Fields { diff --git a/examples/kit-nextjs-skate-park/src/components/partial-design-dynamic-placeholder/PartialDesignDynamicPlaceholder.tsx b/examples/kit-nextjs-skate-park/src/components/partial-design-dynamic-placeholder/PartialDesignDynamicPlaceholder.tsx index 47607cfb6..93bb4f026 100644 --- a/examples/kit-nextjs-skate-park/src/components/partial-design-dynamic-placeholder/PartialDesignDynamicPlaceholder.tsx +++ b/examples/kit-nextjs-skate-park/src/components/partial-design-dynamic-placeholder/PartialDesignDynamicPlaceholder.tsx @@ -1,14 +1,12 @@ import React, { JSX } from 'react'; import { ComponentProps } from 'lib/component-props'; import componentMap from '.sitecore/component-map'; -import { AppPlaceholder } from "@sitecore-content-sdk/nextjs"; +import { AppPlaceholder } from '@sitecore-content-sdk/nextjs'; -const PartialDesignDynamicPlaceholder = ( - props: ComponentProps -): JSX.Element => { +const PartialDesignDynamicPlaceholder = (props: ComponentProps): JSX.Element => { return ( { - const enabledPlaceholders = params.EnabledPlaceholders?.split(",") ?? []; +export const Default = ({ params, rendering, page }: RowSplitterProps): JSX.Element => { + const enabledPlaceholders = params.EnabledPlaceholders?.split(',') ?? []; const id = params.RenderingIdentifier; return ( @@ -36,7 +32,7 @@ export const Default = ({ {enabledPlaceholders.map((ph, index) => { const num = Number(ph) as RowNumber; const placeholderKey = `row-${num}-{*}`; - const rowStyles = `${params[`Styles${num}`] ?? ""}`.trimEnd(); + const rowStyles = `${params[`Styles${num}`] ?? ''}`.trimEnd(); return (
diff --git a/examples/kit-nextjs-skate-park/src/i18n/request.ts b/examples/kit-nextjs-skate-park/src/i18n/request.ts index c3813c12e..a8297b779 100644 --- a/examples/kit-nextjs-skate-park/src/i18n/request.ts +++ b/examples/kit-nextjs-skate-park/src/i18n/request.ts @@ -7,7 +7,7 @@ export default getRequestConfig(async ({ requestLocale }: GetRequestConfigParams // Provide a static locale, fetch a user setting, // read from `cookies()`, `headers()`, etc. // Since this function is executed during the Server Components render pass, you can call functions like cookies() and headers() to return configuration that is request-specific. https://next-intl.dev/docs/usage/configuration - + // set by the catch-all route setRequestLocale // to support SSG and multisite here we expect both site and locale in the format {site}_{locale} const requested = await requestLocale; From fbd8a9d12e4b646950efedba1534792896f7c9c7 Mon Sep 17 00:00:00 2001 From: Esari Upendri <236554266+sc-esariupendri@users.noreply.github.com> Date: Wed, 21 Jan 2026 14:19:51 +0530 Subject: [PATCH 5/5] Fixed product-listing files type failures --- .../src/Bootstrap.tsx | 2 +- .../src/Providers.tsx | 26 +++++++++---------- .../src/app/api/editing/render/route.ts | 2 +- .../src/app/api/robots/route.ts | 3 +-- .../src/app/api/sitemap/route.ts | 2 +- .../src/app/layout.tsx | 6 ++++- .../src/app/not-found.tsx | 1 - .../src/assets/styles/column-splitter.css | 1 - .../assets/styles/tailwind-bootstrap-grid.css | 1 - .../src/components/sxa/LinkList.tsx | 8 +++++- .../src/components/sxa/Title.tsx | 12 ++++----- .../src/i18n/request.ts | 2 +- 12 files changed, 35 insertions(+), 31 deletions(-) diff --git a/examples/kit-nextjs-product-listing/src/Bootstrap.tsx b/examples/kit-nextjs-product-listing/src/Bootstrap.tsx index b765a6404..3489a65e6 100644 --- a/examples/kit-nextjs-product-listing/src/Bootstrap.tsx +++ b/examples/kit-nextjs-product-listing/src/Bootstrap.tsx @@ -41,4 +41,4 @@ const Bootstrap = ({ return null; }; -export default Bootstrap; \ No newline at end of file +export default Bootstrap; diff --git a/examples/kit-nextjs-product-listing/src/Providers.tsx b/examples/kit-nextjs-product-listing/src/Providers.tsx index ad462202c..e4fa7e8c1 100644 --- a/examples/kit-nextjs-product-listing/src/Providers.tsx +++ b/examples/kit-nextjs-product-listing/src/Providers.tsx @@ -28,18 +28,18 @@ export default function Providers({ loadImportMap={() => import('.sitecore/import-map.client')} > - - - {children} - - - - + + + {children} + + + + ); } diff --git a/examples/kit-nextjs-product-listing/src/app/api/editing/render/route.ts b/examples/kit-nextjs-product-listing/src/app/api/editing/render/route.ts index 378312771..0a0d0a597 100644 --- a/examples/kit-nextjs-product-listing/src/app/api/editing/render/route.ts +++ b/examples/kit-nextjs-product-listing/src/app/api/editing/render/route.ts @@ -12,4 +12,4 @@ import { createEditingRenderRouteHandlers } from '@sitecore-content-sdk/nextjs/r * 4. Return the rendered HTML for editing mode */ -export const { GET, POST, OPTIONS } = createEditingRenderRouteHandlers({}); \ No newline at end of file +export const { GET, POST, OPTIONS } = createEditingRenderRouteHandlers({}); diff --git a/examples/kit-nextjs-product-listing/src/app/api/robots/route.ts b/examples/kit-nextjs-product-listing/src/app/api/robots/route.ts index 89428f5c6..7575bd04f 100644 --- a/examples/kit-nextjs-product-listing/src/app/api/robots/route.ts +++ b/examples/kit-nextjs-product-listing/src/app/api/robots/route.ts @@ -18,7 +18,6 @@ const { GET: sitecoreGET } = createRobotsRouteHandler({ sites, }); - // Custom GET handler that ensures indexing is allowed export async function GET(request: NextRequest) { try { @@ -66,4 +65,4 @@ Sitemap: ${new URL('/sitemap.xml', request.url).toString()}`; }, }); } -} \ No newline at end of file +} diff --git a/examples/kit-nextjs-product-listing/src/app/api/sitemap/route.ts b/examples/kit-nextjs-product-listing/src/app/api/sitemap/route.ts index e6d1b92f9..c004e12c0 100644 --- a/examples/kit-nextjs-product-listing/src/app/api/sitemap/route.ts +++ b/examples/kit-nextjs-product-listing/src/app/api/sitemap/route.ts @@ -14,4 +14,4 @@ export const dynamic = 'force-dynamic'; export const { GET } = createSitemapRouteHandler({ client, sites, -}); \ No newline at end of file +}); diff --git a/examples/kit-nextjs-product-listing/src/app/layout.tsx b/examples/kit-nextjs-product-listing/src/app/layout.tsx index 2d087af08..7bcc4f5ba 100644 --- a/examples/kit-nextjs-product-listing/src/app/layout.tsx +++ b/examples/kit-nextjs-product-listing/src/app/layout.tsx @@ -34,7 +34,11 @@ const accent = IBM_Plex_Mono({ export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - + {children} ); diff --git a/examples/kit-nextjs-product-listing/src/app/not-found.tsx b/examples/kit-nextjs-product-listing/src/app/not-found.tsx index 8d1d84646..cb53cc60a 100644 --- a/examples/kit-nextjs-product-listing/src/app/not-found.tsx +++ b/examples/kit-nextjs-product-listing/src/app/not-found.tsx @@ -29,4 +29,3 @@ export default async function NotFound() {
); } - diff --git a/examples/kit-nextjs-product-listing/src/assets/styles/column-splitter.css b/examples/kit-nextjs-product-listing/src/assets/styles/column-splitter.css index 54367c042..20c6f393f 100644 --- a/examples/kit-nextjs-product-listing/src/assets/styles/column-splitter.css +++ b/examples/kit-nextjs-product-listing/src/assets/styles/column-splitter.css @@ -5,4 +5,3 @@ @apply px-[5px]; } } - diff --git a/examples/kit-nextjs-product-listing/src/assets/styles/tailwind-bootstrap-grid.css b/examples/kit-nextjs-product-listing/src/assets/styles/tailwind-bootstrap-grid.css index 527e48d04..9c62ef865 100644 --- a/examples/kit-nextjs-product-listing/src/assets/styles/tailwind-bootstrap-grid.css +++ b/examples/kit-nextjs-product-listing/src/assets/styles/tailwind-bootstrap-grid.css @@ -367,4 +367,3 @@ .offset-xxl-11 { @apply 2xl:offset-11; } - diff --git a/examples/kit-nextjs-product-listing/src/components/sxa/LinkList.tsx b/examples/kit-nextjs-product-listing/src/components/sxa/LinkList.tsx index 256b779ac..97677273b 100644 --- a/examples/kit-nextjs-product-listing/src/components/sxa/LinkList.tsx +++ b/examples/kit-nextjs-product-listing/src/components/sxa/LinkList.tsx @@ -1,7 +1,13 @@ 'use client'; import React, { useEffect, useState, type JSX } from 'react'; -import { Link as ContentSdkLink, Text, LinkField, TextField, useSitecore } from '@sitecore-content-sdk/nextjs'; +import { + Link as ContentSdkLink, + Text, + LinkField, + TextField, + useSitecore, +} from '@sitecore-content-sdk/nextjs'; import Link from 'next/link'; type ResultsFieldLink = { diff --git a/examples/kit-nextjs-product-listing/src/components/sxa/Title.tsx b/examples/kit-nextjs-product-listing/src/components/sxa/Title.tsx index 78b53449b..d4e8b26b9 100644 --- a/examples/kit-nextjs-product-listing/src/components/sxa/Title.tsx +++ b/examples/kit-nextjs-product-listing/src/components/sxa/Title.tsx @@ -83,14 +83,12 @@ export const Default = (props: TitleProps): JSX.Element => { <> {mode.isEditing ? ( - ) : ( - link?.value?.href ? ( - - - - ) : ( + ) : link?.value?.href ? ( + - ) + + ) : ( + )} diff --git a/examples/kit-nextjs-product-listing/src/i18n/request.ts b/examples/kit-nextjs-product-listing/src/i18n/request.ts index 72481b1a8..184d7afc3 100644 --- a/examples/kit-nextjs-product-listing/src/i18n/request.ts +++ b/examples/kit-nextjs-product-listing/src/i18n/request.ts @@ -18,7 +18,7 @@ export default getRequestConfig(async ({ requestLocale }: GetRequestConfigParams locale, site: parsedSite, }); - + return { locale, messages,