TSOND-565 | Implementing Visual Builder

contentstack · Nov 11, 2024 · f6ce9bd · f6ce9bd
1 parent 1f976a3
commit f6ce9bd
Show file tree

Hide file tree

Showing 40 changed files with 1,127 additions and 905 deletions.
diff --git a/.env.sample b/.env.sample
@@ -32,9 +32,8 @@ CONTENTSTACK_LIVE_PREVIEW=true
 CONTENTSTACK_LIVE_EDIT_TAGS=true
 # To disable live editing tags for this project set CONTENTSTACK_LIVE_PREVIEW=false
 
-#Optional Environment variables
-LOCALE_COOKIE_NAME=YOUR_LOCALE_COOKIE_NAME
 DEFAULT_LOCALE=YOUR_STACKS_MASTER_LOCALE
+# Default Locale is used to fetch the personalized config from CMS
 
 # For Personalize
 CONTENTSTACK_PERSONALIZE_PROJECT_UID=YOUR_CONTENTSTACK_PERSONALIZE_PROJECT_UID
@@ -49,4 +48,12 @@ CONTENTSTACK_AB_LANDING_PAGE_PATH=/example-path
 # Your Landing Page Path where A/B test will trigger
 
 CONTENTSTACK_AB_PRIMARY_EVENT=Clicked
-# Your Event name on which A/B test will trigger impression
+# Your Event name on which A/B test will trigger impression
+
+# For Visual Experience
+CONTENTSTACK_VISUAL_BUILDER_MODE=builder
+# To switch off builder mode set CONTENTSTACK_VISUAL_BUILDER_MODE=preview
+# if CONTENTSTACK_LIVE_PREVIEW=false then builder/preview will be disabled
+
+#Optional Environment variables
+LOCALE_COOKIE_NAME=YOUR_LOCALE_COOKIE_NAME
diff --git a/app/[locale]/[...slug]/page.tsx b/app/[locale]/[...slug]/page.tsx
@@ -51,8 +51,8 @@ export default function LandingPage () {
     return (<>
         {data
             ? <PageWrapper {...data} contentType='landing_page'>
-                {data?.components && Object.keys(data.components)?.length
-                    ? <RenderComponents
+                {data?.components
+                    ? <RenderComponents $={data?.$}
                         components={data?.components}
                         isABEnabled={abEnabled}
                     /> : ''}

diff --git a/app/[locale]/article/[...slug]/page.tsx b/app/[locale]/article/[...slug]/page.tsx
@@ -115,7 +115,7 @@ export default function Article () {
                     relatedLinksLabel={related_links}
                     $={data?.$}
                 />}
-                {show_related_articles && <RelatedArticles
+                {show_related_articles && relatedArticles && relatedArticles.length > 0 && <RelatedArticles
                     related_articles={related_articles}
                     cards={relatedArticles}
                 />}

diff --git a/app/[locale]/articles/[...slug]/page.tsx b/app/[locale]/articles/[...slug]/page.tsx
@@ -97,8 +97,8 @@ export default function Article () {
             {data?.title && <div className='pt-16 px-8 mb-16 bg-background-primary dark:bg-white text-center max-w-7xl mx-auto'>
                 <h1 className='mx-auto text-black' {...data?.$?.title}>{data?.title}</h1>
             </div>}
-            {data?.components && Object.keys(data.components)?.length ? (
-                <RenderComponents
+            {data?.components ? (
+                <RenderComponents $={data?.$}
                     components={data?.components}
                 />
             ) : <></>}

diff --git a/app/[locale]/articles/page.tsx b/app/[locale]/articles/page.tsx
@@ -79,8 +79,8 @@ export default function ArticleListing () {
             {data?.title && <div className='pt-16 px-8 mb-16 bg-background-primary dark:bg-white text-center max-w-7xl mx-auto'>
                 <h1 data-id='h1' className='mx-auto text-black' {...data?.$?.title}>{data?.title}</h1>
             </div>}
-            {data?.components && Object.keys(data.components)?.length ? (
-                <RenderComponents
+            {data?.components ? (
+                <RenderComponents $={data?.$}
                     components={data?.components}
                 />
             ) : <></>}

diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
@@ -36,13 +36,13 @@ export default function Home () {
         <>
             {data
                 ? <PageWrapper {...data} contentType='landing_page'>
-                    {data?.components && Object.keys(data.components)?.length
-                        ? <RenderComponents
+                    {data?.components
+                        ? <RenderComponents $={data?.$}
                             components={[
                                 // eslint-disable-next-line no-unsafe-optional-chaining
-                                ...data?.components,
-                                { featured_articles: data?.featured_articles }
+                                ...data?.components
                             ]}
+                            featured_articles={data?.featured_articles}
                         /> : ''}
                 </PageWrapper>
                 : <>

diff --git a/app/globals.css b/app/globals.css
@@ -104,6 +104,14 @@ body {
     overflow: hidden;
   }
 
+  .card-subtitle {
+    display: -webkit-box;
+    max-width: 100%;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
   .card-content {
     display: -webkit-box;
     max-width: 100%;

diff --git a/components/Article/ArticleCover.tsx b/components/Article/ArticleCover.tsx
@@ -12,10 +12,11 @@ const ArticleCover:React.FC<ArticleCoverType> = (props:ArticleCoverType) => {
             {title && <h1 data-id='h1-text' {...$?.title}>{title}</h1>}
             <div className={'relative overflow-hidden mt-6'}>
                 {/* eslint-disable-next-line jsx-a11y/alt-text */}
-                {cover_image?.url && <Image
+                <Image
                     image={cover_image}
+                    $={$}
                     className={'w-full max-auto object-cover aspect-[2] md:aspect-[5/2] object-center bg-white/5 shadow-2xl ring-1 ring-white/10 dark:text-white'}
-                />}
+                />
             </div>
             {summary && <p data-id='paragraph-text' className='mt-2 !text-lg leading-5 text-black/60 dark:text-white' {...$?.summary}>
                 {summary}

diff --git a/components/Article/RelatedLinks.tsx b/components/Article/RelatedLinks.tsx
@@ -7,18 +7,17 @@ const RelatedLinks: React.FC<RelatedLinksType> = (props: RelatedLinksType) => {
 
     return (<div className={'px-8 my-16'} id='related-region-topics'>
         <div className='container mx-auto'>
-            {relatedLinks && relatedLinks.length > 0 && <div><span {...$?.related_links} data-id='span-text' className='font-semibold text-sm inline-block mt-2'>{relatedLinksLabel?.text || 'Related Links'}: &nbsp;</span>
-                <span {...$?.taxonomies}>
-                    {relatedLinks.map((elem, ind: number) => (
-                        <span key={`related-link-${ind}`}>
-                            <Link url={elem?.url}
-                                className='font-montserrat border-b-2 border-transparent text-purple hover:border-purple cursor-pointer font-semibold text-sm capitalize'
-                            >
-                                {elem?.title ?? ''}
-                            </Link>
-                            <span className='mr-2'>{relatedLinks[ind + 1] ? ',' : ''}</span>
-                        </span>
-                    ))}</span>
+            {relatedLinks && <div><span {...relatedLinksLabel?.$?.text} data-id='span-text' className='font-semibold text-sm inline-block mt-2'>{relatedLinksLabel?.text || 'Related Links'}: &nbsp;</span>
+                {relatedLinks.map((elem, ind: number) => (
+                    <span key={`related-link-${ind}`} {...$?.[`taxonomies__${ind}`]}>
+                        <Link url={elem?.url}
+                            className='font-montserrat border-b-2 border-transparent text-purple hover:border-purple cursor-pointer font-semibold text-sm capitalize'
+                        >
+                            {elem?.title ?? ''}
+                        </Link>
+                        <span className='mr-2'>{relatedLinks[ind + 1] ? ',' : ''}</span>
+                    </span>
+                ))}
             </div>}
 
         </div>

diff --git a/components/Card/Card.tsx b/components/Card/Card.tsx
@@ -8,18 +8,19 @@ const Card: React.FC<ImageCardItem> = (props: ImageCardItem) => {
     const { $, image, image_alt_text, title, cta, content, count, key, id } = props
 
     {/* eslint-disable-next-line jsx-a11y/alt-text */ }
-    const cardImage = image ? <Image
+    const cardImage = <Image
         image={image}
+        $={$}
         image_alt_text={image_alt_text}
         className={classNames(
-            count === 1 ? 'h-auto w-auto'
-                : count === 2 ? 'h-48 lg:h-64'
+            count === 1 ? 'h-[24rem] w-auto'
+                : count === 2 ? 'h-[24rem] lg:h-64'
                     : count === 3 ? 'h-48 lg:h-52'
                         : count && count >= 4 ? 'h-48 lg:h-52'
                             : '',
             'w-full object-center object-fit object-cover hover:opacity-90 hover:cursor-pointer'
         )}
-    /> : <></>
+    /> 
 
     return (
         <Link
@@ -28,7 +29,6 @@ const Card: React.FC<ImageCardItem> = (props: ImageCardItem) => {
             <div
                 id={`card-${id}-${key}`}
                 className={'group h-full relative flex flex-col justify-between'}
-                {...$?.title}
             >
                 <div className='flex flex-col'>
                     {cta ? <Link
@@ -43,26 +43,29 @@ const Card: React.FC<ImageCardItem> = (props: ImageCardItem) => {
                         {title
                             && <h4
                                 data-id='h4-text'
-                                className='font-bold card-title'>
+                                className='font-bold card-title'
+                                {...$?.title}>
                                 {title}
                             </h4>
                         }
                     </div>
                     {content && <p
                         data-id='paragraph-text'
-                        className='mt-4 p-0 text-base leading-5 text-black dark:text-white card-content'
+                        className='mt-4 p-0 text-base leading-5 text-black dark:text-white card-content whitespace-break-spaces'
+                        {...$?.content}
                     >
                         {content}
                     </p>
                     }
                 </div>
                 <div>
-                    {cta && !isString(cta) && cta?.text && <p className='mt-3 text-base font-semibold !text-purple'>
+                    {cta && !isString(cta) && cta?.text && <p className='mt-3 text-base font-semibold !text-purple'
+                        {...cta.$?.link}>
                         <Link
                             url={resolveCardCta(cta)}
                             className='!text-purple hover:border-b-2  hover:border-purple cursor-pointer'
                         >
-                            {cta.text}
+                            {cta.text && cta.text !== '' ? <span {...cta?.$?.text}>{cta.text}</span> : <span {...cta?.$?.text}>CTA PLACEHOLDER</span>}
                         </Link> &rarr;
                     </p>
                     }

diff --git a/components/CardCollection/CardCollection.tsx b/components/CardCollection/CardCollection.tsx
@@ -9,7 +9,7 @@ import { CardCollectionBody } from './CardCollectionBody'
 import { CardTiles } from './CardTiles'
 
 const CardCollection: React.FC<CardCollectionProps> = (props: CardCollectionProps) => {
-    const { header, cards, totalCount, id } = props
+    const { header, cards, totalCount, id, $ } = props
 
     /**
      * ? Method to conditionally render the card collection or card tiles based on the total number of cards
@@ -25,6 +25,7 @@ const CardCollection: React.FC<CardCollectionProps> = (props: CardCollectionProp
                     id={id}
                     cards={cards}
                     totalCount={totalCount ? totalCount : (cards ? cards?.length : 0)}
+                    $={$}
                 />
             )
 
@@ -35,6 +36,7 @@ const CardCollection: React.FC<CardCollectionProps> = (props: CardCollectionProp
                 id={id}
                 cards={cards}
                 totalCount={totalCount ? totalCount : (cards ? cards?.length : 0)}
+                $={$}
             />
         )
 

diff --git a/components/CardCollection/CardCollectionBody.tsx b/components/CardCollection/CardCollectionBody.tsx
@@ -1,8 +1,9 @@
 import { classNames } from '@/utils'
-import { ImageCardItem } from '@/types/components'
+import { CardCollection, ImageCardItem } from '@/types/components'
+import { MappedPreview } from '@/types/common'
 import { Card } from '../Card'
 
-const CardCollectionBody = ({cards, totalCount, id}:{ id?: string, cards?: ImageCardItem[]|[], totalCount: number }) => {
+const CardCollectionBody = ({cards, totalCount, id, $}:{ id?: string, cards?: ImageCardItem[]|[], totalCount: number, $: MappedPreview<CardCollection | undefined> }) => {
 
     const gridConfigurator  = () => {
 
@@ -32,15 +33,19 @@ const CardCollectionBody = ({cards, totalCount, id}:{ id?: string, cards?: Image
                     'grid grid-cols-1 gap-y-12 sm:gap-x-6 xl:gap-x-8'
                 )
             }
+            {...$?.cards}
         >
             {cards?.map((cardData: ImageCardItem, idx: number) => {
-                return (<Card
-                    id={id}
-                    key={idx}
-                    {...cardData}
-                    count={cards.length}
-                    totalCount={totalCount}
-                />
+                return (
+                    <div {...$?.[`cards__${idx}`]} key={idx}>
+                        <Card
+                            id={id}
+                            key={idx}
+                            {...cardData}
+                            count={cards.length}
+                            totalCount={totalCount}
+                        />
+                    </div>
                 )
             })
             }

diff --git a/components/CardCollection/CardTiles.tsx b/components/CardCollection/CardTiles.tsx
@@ -1,11 +1,12 @@
 'use client'
 import { useEffect, useState } from 'react'
 import { classNames } from '@/utils'
-import { ImageCardItem } from '@/types/components'
+import { CardCollection, ImageCardItem } from '@/types/components'
+import { MappedPreview } from '@/types/common'
 import { CardTile } from '../CardTile'
 
 
-const CardTiles = ({cards, totalCount, id}:{ id?: string | number, cards?: ImageCardItem[]|[], totalCount: number }) => {
+const CardTiles = ({cards, totalCount, id, $}:{ id?: string | number, cards?: ImageCardItem[]|[], totalCount: number , $: MappedPreview<CardCollection | undefined>}) => {
 
     const [subTitle, setSubTitle] = useState(false)
 
@@ -46,6 +47,7 @@ const CardTiles = ({cards, totalCount, id}:{ id?: string | number, cards?: Image
                     'sm:grid-cols-2 lg:grid-cols-2 grid grid-cols-1 gap-y-12 sm:gap-x-6 xl:gap-x-8'
                 )
             }
+            {...$?.cards}
         >
             {cards?.map((cardData: ImageCardItem, idx: number) => {
                 return (<CardTile
@@ -55,6 +57,8 @@ const CardTiles = ({cards, totalCount, id}:{ id?: string | number, cards?: Image
                     count={cards.length}
                     totalCount={totalCount}
                     subtitleExists={subTitle}
+                    $ = {cardData.$ && $ ? { ...cardData.$, ...$ } : undefined}
+                    index={idx}
                 />
                 )
             })

diff --git a/components/CardTile/CardTile.tsx b/components/CardTile/CardTile.tsx
@@ -6,7 +6,7 @@ import { classNames, equalHeight, resolveCardCta } from '@/utils'
 import styles from './cardTile.module.css'
 
 const CardTile: React.FC<ImageCardItem> = (props: ImageCardItem) => {
-    const { $, image, image_alt_text, title, subtitle, cta, content, count, id, key, subtitleExists , is_thumbnail} = props
+    const { $, image, image_alt_text, title, subtitle, cta, content, count, id, key, subtitleExists, is_thumbnail, index } = props
 
     useEffect(() => {
         equalHeight('.card-tile-title') // onload
@@ -16,43 +16,46 @@ const CardTile: React.FC<ImageCardItem> = (props: ImageCardItem) => {
     })
 
     {/* eslint-disable-next-line jsx-a11y/alt-text */ }
-    const cardImage = image ? <Image
+    const cardImage = <Image
         image={image}
+        $={$}
         image_alt_text={image_alt_text}
         is_thumbnail={is_thumbnail}
         className={classNames(
-            count === 1 ? 'h-auto w-auto'
-                : count === 2 ? 'h-48 lg:h-64'
+            count === 1 ? 'h-[24rem] w-auto'
+                : count === 2 ? 'h-[24rem]'
                     : count === 3 ? 'h-48 lg:h-52'
                         : count && count >= 4 ? 'h-48 lg:h-52'
                             : '',
             'w-full object-center object-fit object-cover hover:opacity-90 hover:cursor-pointer rounded mt-6'
         )}
-    /> : <></>
+    />
 
     return (
         <div
             id={`card-tile-${id}-${key}`}
             key={`card-tile-${id}-${key}`}
             className={`group h-full relative flex flex-col justify-between ${styles.card}`}
-            {...$?.title}
+            {...$?.[`cards__${index}`]}
         >
             <div className='flex flex-col'>
                 <div className='text-xl text-gray-500 dark:text-white text-center'>
                     {title
                         && <h4
                             data-id='h4-text'
-                            className='block text-4xl font-montserrat font-semibold text-black card-tile-title'>
+                            className='block text-4xl font-montserrat font-semibold text-black card-tile-title'
+                            {...$?.title}>
                             {title}
                         </h4>
                     }
                 </div>
 
                 {
-                    subtitleExists && <div className=' mt-4 text-center'>
+                    subtitleExists && <div className='mt-4 text-center'>
                         <span
                             data-id='span-text'
-                            className='text-2xl font-montserrat text-black font-normal'>
+                            className='text-2xl font-montserrat text-black font-normal card-subtitle'
+                            {...$?.subtitle}>
                             {subtitle ? subtitle : '\xa0'}
                         </span>
                     </div>
@@ -67,19 +70,20 @@ const CardTile: React.FC<ImageCardItem> = (props: ImageCardItem) => {
                     {cardImage}
                 </>}
 
-                {content && <p data-id='paragraph-text' className='mt-6 p-0 text-base leading-5 text-black dark:text-white card-content'
+                {content && <p data-id='paragraph-text' className='mt-6 p-0 text-base leading-5 text-black dark:text-white card-content whitespace-break-spaces'
+                    {...$?.content}
                 >
                     {content}
                 </p>
                 }
             </div>
             <div>
-                {cta?.text && cta?.link && !isString(cta) && cta?.text && <p className='mt-6 text-base font-semibold !text-black/50 flex flex-row items-center gap-[8px] '>
+                {cta?.text && cta?.link && !isString(cta) && cta?.text && <p className='mt-6 text-base font-semibold !text-black/50 flex flex-row items-center gap-[8px]' {...cta?.$?.link}>
                     <Link
                         url={resolveCardCta(cta)}
                         className='!text-black/50 font-montserrat text-sm border-b-2 border-transparent hover:border-black/50 !leading-[20px]'
                     >
-                        {(cta.text).toUpperCase()}
+                        {cta.text && cta.text !== '' ? <span {...cta?.$?.text}>{(cta.text).toUpperCase()}</span> : <span {...cta?.$?.text}>CTA PLACEHOLDER</span>}
                     </Link>
                     <svg
                         xmlns='http://www.w3.org/2000/svg'