[templates/nextjs-sxa] SXA components has been reworked with supporting metadata approach

Author: Rmatkovsky

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx

@@ -10,7 +10,7 @@ import {
 } from '@sitecore-jss/sitecore-jss-nextjs';
 
 interface Fields {
-  Image: ImageField;
+  Image: ImageField & { metadata?: { [key: string]: unknown } };
   ImageCaption: Field<string>;
   TargetUrl: LinkField;
 }
@@ -31,19 +31,22 @@ const ImageDefault = (props: ImageProps): JSX.Element => (
 export const Banner = (props: ImageProps): JSX.Element => {
   const { sitecoreContext } = useSitecoreContext();
   const isPageEditing = sitecoreContext.pageEditing;
+  const isMetadataMode = sitecoreContext?.editMode === 'metadata';
   const classHeroBannerEmpty =
     isPageEditing && props.fields?.Image?.value?.class === 'scEmptyImage'
       ? 'hero-banner-empty'
       : '';
   const backgroundStyle = (props?.fields?.Image?.value?.src && {
     backgroundImage: `url('${props.fields.Image.value.src}')`,
   }) as CSSProperties;
-  const modifyImageProps = {
-    ...props.fields.Image,
-    editable: props?.fields?.Image?.editable
-      ?.replace(`width="${props?.fields?.Image?.value?.width}"`, 'width="100%"')
-      .replace(`height="${props?.fields?.Image?.value?.height}"`, 'height="100%"'),
-  };
+  const modifyImageProps = !isMetadataMode
+    ? {
+        ...props.fields.Image,
+        editable: props?.fields?.Image?.editable
+          ?.replace(`width="${props?.fields?.Image?.value?.width}"`, 'width="100%"')
+          .replace(`height="${props?.fields?.Image?.value?.height}"`, 'height="100%"'),
+      }
+    : { ...props.fields.Image };
   const id = props.params.RenderingIdentifier;
 
   return (

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Navigation.tsx

@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
 import {
   Link,
   LinkField,
   Text,
   TextField,
   useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
+import React, { useState } from 'react';
 
 interface Fields {
   Id: string;
@@ -108,13 +108,14 @@ export const Default = (props: NavigationProps): JSX.Element => {
 };
 
 const NavigationList = (props: NavigationProps) => {
+  let children: JSX.Element[] = [];
   const { sitecoreContext } = useSitecoreContext();
   const [active, setActive] = useState(false);
   const classNameList = `${props.fields.Styles.concat('rel-level' + props.relativeLevel).join(
     ' '
   )}`;
+  const isMetadataMode = sitecoreContext?.editMode === 'metadata';
 
-  let children: JSX.Element[] = [];
   if (props.fields.Children && props.fields.Children.length) {
     children = props.fields.Children.map((element: Fields, index: number) => (
       <NavigationList
@@ -134,8 +135,8 @@ const NavigationList = (props: NavigationProps) => {
       >
         <Link
           field={getLinkField(props)}
-          editable={sitecoreContext.pageEditing}
           onClick={props.handleClick}
+          {...(!isMetadataMode ? { editable: sitecoreContext.pageEditing } : '')}
         >
           {getNavigationText(props)}
         </Link>

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Title.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
 import {
   Link,
-  Text,
-  useSitecoreContext,
   LinkField,
+  Text,
   TextField,
+  useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
+import React from 'react';
 
 interface Fields {
   data: {
@@ -17,7 +17,7 @@ interface Fields {
       field: {
         jsonValue: {
           value: string;
-          editable: string;
+          editable?: string;
         };
       };
     };
@@ -29,7 +29,8 @@ interface Fields {
       field: {
         jsonValue: {
           value: string;
-          editable: string;
+          editable?: string;
+          metadata?: object;
         };
       };
     };
@@ -61,16 +62,21 @@ const ComponentContent = (props: ComponentContentProps) => {
 export const Default = (props: TitleProps): JSX.Element => {
   const datasource = props.fields?.data?.datasource || props.fields?.data?.contextItem;
   const { sitecoreContext } = useSitecoreContext();
+  const isMetadataMode = sitecoreContext?.editMode === 'metadata';
 
   const text: TextField = {
     value: datasource?.field?.jsonValue?.value,
-    editable: datasource?.field?.jsonValue?.editable,
+    ...(isMetadataMode
+      ? { metadata: props?.fields?.data?.contextItem?.field?.jsonValue?.metadata }
+      : { editable: datasource?.field?.jsonValue?.editable }),
   };
   const link: LinkField = {
     value: {
       href: datasource?.url?.path,
       title: datasource?.field?.jsonValue?.value,
-      editable: true,
+      ...(isMetadataMode
+        ? { metadata: props?.fields?.data?.contextItem?.field?.jsonValue?.metadata }
+        : { editable: true }),
     },
   };
   if (sitecoreContext.pageState !== 'normal') {