Make component fields optional in props across multiple components for Alaris

examples/kit-nextjs-location-finder/src/components/sxa/ContentBlock.tsx

@@ -11,9 +11,9 @@ import { JSX } from 'react';
  */
 const ContentBlock = ({ fields }: ContentBlockProps): JSX.Element => (
   <div className="contentBlock">
-    <Text tag="h2" className="contentTitle" field={fields.heading} />
+    <Text tag="h2" className="contentTitle" field={fields?.heading} />
 
-    <RichText className="contentDescription" field={fields.content} />
+    <RichText className="contentDescription" field={fields?.content} />
   </div>
 );
 

examples/kit-nextjs-location-finder/src/components/sxa/Image.tsx

@@ -1,23 +1,13 @@
 import {
-  Field,
-  ImageField,
   NextImage as ContentSdkImage,
   Link as ContentSdkLink,
-  LinkField,
   Text,
 } from '@sitecore-content-sdk/nextjs';
 import React from 'react';
 import { ComponentProps } from '@/lib/component-props';
+import type { SxaImageProps } from './sxa-image.props';
 
-interface ImageFields {
-  Image: ImageField;
-  ImageCaption: Field<string>;
-  TargetUrl: LinkField;
-}
-
-interface ImageProps extends ComponentProps {
-  fields: ImageFields;
-}
+type ImageProps = ComponentProps & SxaImageProps;
 
 const ImageWrapper: React.FC<{
   className: string;
@@ -92,7 +82,7 @@ export const Default: React.FC<ImageProps> = (props) => {
       className={`component image ${styles ?? ''}`}
       id={typeof id === 'string' ? id : undefined}
     >
-      {shouldWrapWithLink ? (
+      {shouldWrapWithLink && fields.TargetUrl ? (
         <ContentSdkLink field={fields.TargetUrl}>
           <Image />
         </ContentSdkLink>

examples/kit-nextjs-location-finder/src/components/sxa/LinkList.tsx

@@ -37,13 +37,14 @@ export const Default = (props: LinkListProps): JSX.Element => {
   const id = props.params.RenderingIdentifier;
 
   if (datasource) {
-    const list = datasource.children.results
+    const results = datasource.children?.results ?? [];
+    const list = results
       .filter((element: LinkListResultFieldLink) => element?.field?.link)
       .map((element: LinkListResultFieldLink, key: number) => (
         <LinkListItem
           index={key}
           key={`${key}${element.field.link}`}
-          total={datasource.children.results.length}
+          total={results.length}
           field={element.field.link}
         />
       ));
@@ -115,7 +116,8 @@ export const AnchorNav = (props: LinkListProps): JSX.Element => {
   }, []);
 
   if (datasource) {
-    const list = datasource.children.results
+    const results = datasource.children?.results ?? [];
+    const list = results
       .filter((element: LinkListResultFieldLink) => element?.field?.link)
       .map((element: LinkListResultFieldLink, key: number) => {
         const link = element.field.link;

examples/kit-nextjs-location-finder/src/components/sxa/Navigation.tsx

@@ -12,36 +12,46 @@ import type { NavigationFields, NavigationProps } from './navigation.props';
 
 export type { NavigationFields, NavigationProps };
 
-const getNavigationText = function (props: { fields: NavigationFields }): JSX.Element | string {
+const getNavigationText = function (props: { fields?: NavigationFields }): JSX.Element | string {
+  const navigationFields = props.fields;
+  if (!navigationFields) {
+    return '';
+  }
+
   let text;
 
-  if (props.fields.NavigationTitle) {
-    text = <Text field={props.fields.NavigationTitle} />;
-  } else if (props.fields.Title) {
-    text = <Text field={props.fields.Title} />;
+  if (navigationFields.NavigationTitle) {
+    text = <Text field={navigationFields.NavigationTitle} />;
+  } else if (navigationFields.Title) {
+    text = <Text field={navigationFields.Title} />;
   } else {
-    text = props.fields.DisplayName;
+    text = navigationFields.DisplayName;
   }
 
   return text;
 };
 
-const getLinkField = (props: { fields: NavigationFields }): LinkField => ({
+const getLinkField = (props: { fields?: NavigationFields }): LinkField => ({
   value: {
-    href: props.fields.Href,
+    href: props.fields?.Href ?? '',
     title: getLinkTitle(props),
-    querystring: props.fields.Querystring,
+    querystring: props.fields?.Querystring ?? '',
   },
 });
 
-const getLinkTitle = (props: { fields: NavigationFields }): string | undefined => {
+const getLinkTitle = (props: { fields?: NavigationFields }): string | undefined => {
+  const navigationFields = props.fields;
+  if (!navigationFields) {
+    return undefined;
+  }
+
   let title;
-  if (props.fields.NavigationTitle?.value) {
-    title = props.fields.NavigationTitle.value.toString();
-  } else if (props.fields.Title?.value) {
-    title = props.fields.Title.value.toString();
+  if (navigationFields.NavigationTitle?.value) {
+    title = navigationFields.NavigationTitle.value.toString();
+  } else if (navigationFields.Title?.value) {
+    title = navigationFields.Title.value.toString();
   } else {
-    title = props.fields.DisplayName;
+    title = navigationFields.DisplayName;
   }
 
   return title;
@@ -59,7 +69,7 @@ export const Default = (props: NavigationProps): JSX.Element => {
       : '';
   const id = props.params != null ? props.params.RenderingIdentifier : null;
 
-  if (!Object.values(props.fields).length) {
+  if (!props.fields || !Object.values(props.fields).length) {
     return (
       <div className={`component navigation ${styles}`} id={id ? id : undefined}>
         <div className="component-content">[Navigation]</div>
@@ -72,7 +82,7 @@ export const Default = (props: NavigationProps): JSX.Element => {
     props.handleClick(event);
   };
 
-  const list = Object.values(props.fields)
+  const list = Object.values(props.fields ?? {})
     .filter((element) => element)
     .map((element: NavigationFields, key: number) => (
       <NavigationList
@@ -103,7 +113,7 @@ export const Default = (props: NavigationProps): JSX.Element => {
 };
 
 export const ButtonNavigation = (props: NavigationProps): JSX.Element => {
-  const list = Object.values(props.fields).filter((element) => element);
+  const list = Object.values(props.fields ?? {}).filter((element) => element);
 
   return (
     <section className="py-16">

examples/kit-nextjs-location-finder/src/components/sxa/NavigationList.client.tsx

@@ -8,12 +8,12 @@ import type { JSX } from 'react';
 import type { NavigationFields } from './navigation.props';
 
 type NavigationListProps = {
-  fields: NavigationFields;
+  fields?: NavigationFields;
   handleClick: (event?: React.MouseEvent<HTMLElement>) => void;
   relativeLevel: number;
   isEditing: boolean;
-  getLinkField: (props: { fields: NavigationFields }) => LinkField;
-  getNavigationText: (props: { fields: NavigationFields }) => JSX.Element | string;
+  getLinkField: (props: { fields?: NavigationFields }) => LinkField;
+  getNavigationText: (props: { fields?: NavigationFields }) => JSX.Element | string;
 };
 
 /**
@@ -27,6 +27,10 @@ export const NavigationList = ({
   getLinkField,
   getNavigationText,
 }: NavigationListProps) => {
+  if (!fields) {
+    return null;
+  }
+
   const [active, setActive] = useState(false);
   const classNameList = `${fields.Styles.concat('rel-level' + relativeLevel).join(' ')}`;
 

examples/kit-nextjs-location-finder/src/components/sxa/Promo.tsx

@@ -63,7 +63,7 @@ export const Default = (props: PromoProps): JSX.Element => {
             className="font-bold py-1 px-3 mx-6 mb-4 mt-auto relative b-0"
             asChild
           >
-            <ContentSdkLink field={props.fields.PromoLink} />
+            {props.fields.PromoLink ? <ContentSdkLink field={props.fields.PromoLink} /> : null}
           </Button>
         </aside>
       </div>
@@ -112,7 +112,7 @@ export const CenteredCard = (props: PromoProps): JSX.Element => {
             className="font-bold text-xl text-center w-full py-1 px-3 ml-4 mb-4 relative b-0"
             asChild
           >
-            <ContentSdkLink field={props.fields.PromoLink} />
+            {props.fields.PromoLink ? <ContentSdkLink field={props.fields.PromoLink} /> : null}
           </Button>
         </aside>
       </div>

examples/kit-nextjs-location-finder/src/components/sxa/RichText.tsx

@@ -10,7 +10,7 @@ export const Default = ({ params, fields }: RichTextProps): JSX.Element => {
       <div className="component-content">
         {fields ? (
           <section>
-            <ContentSdkRichText field={fields.Text} />
+            <ContentSdkRichText field={fields?.Text} />
           </section>
         ) : (
           <span className="is-empty-hint">Rich text</span>

examples/kit-nextjs-location-finder/src/components/sxa/content-block.props.ts

@@ -2,11 +2,11 @@ import type { Field } from '@sitecore-content-sdk/nextjs';
 import type { OptionalComponentProps } from '@/lib/component-props';
 
 export type ContentBlockFields = {
-  heading: Field<string>;
-  content: Field<string>;
+  heading?: Field<string>;
+  content?: Field<string>;
 };
 
 export type ContentBlockProps = OptionalComponentProps & {
-  fields: ContentBlockFields;
+  fields?: ContentBlockFields;
 };
 

examples/kit-nextjs-location-finder/src/components/sxa/link-list.props.ts

@@ -8,20 +8,20 @@ export type LinkListResultFieldLink = {
 };
 
 export type LinkListFields = {
-  data: {
-    datasource: {
-      children: {
-        results: LinkListResultFieldLink[];
+  data?: {
+    datasource?: {
+      children?: {
+        results?: LinkListResultFieldLink[];
       };
-      field: {
-        title: TextField;
+      field?: {
+        title?: TextField;
       };
     };
   };
 };
 
 export type LinkListProps = OptionalComponentProps & {
-  fields: LinkListFields;
+  fields?: LinkListFields;
 };
 
 export type LinkListItemProps = {

examples/kit-nextjs-location-finder/src/components/sxa/navigation.props.ts

@@ -13,7 +13,7 @@ export type NavigationFields = {
 };
 
 export type NavigationProps = OptionalComponentProps & {
-  fields: Record<string, NavigationFields>;
+  fields?: Record<string, NavigationFields>;
   handleClick: (event?: React.MouseEvent<HTMLElement>) => void;
   relativeLevel: number;
   isEditing?: boolean;

examples/kit-nextjs-location-finder/src/components/sxa/page-content.props.ts

@@ -2,13 +2,13 @@ import type { LinkField, RichTextField, TextField } from '@sitecore-content-sdk/
 import type { OptionalComponentProps } from '@/lib/component-props';
 
 export type PageContentFields = {
-  Title: TextField;
-  Content: RichTextField;
-  MainLink: LinkField;
+  Title?: TextField;
+  Content?: RichTextField;
+  MainLink?: LinkField;
 };
 
 export type PageContentProps = OptionalComponentProps & {
-  fields: PageContentFields;
+  fields?: PageContentFields;
 };
 
 export type PageContentComponentContentProps = {

examples/kit-nextjs-location-finder/src/components/sxa/promo.props.ts

@@ -2,14 +2,14 @@ import type { Field, ImageField, LinkField } from '@sitecore-content-sdk/nextjs'
 import type { OptionalComponentProps } from '@/lib/component-props';
 
 export type PromoFields = {
-  PromoIcon: ImageField;
-  PromoText: Field<string>;
-  PromoLink: LinkField;
-  PromoText2: Field<string>;
-  PromoText3: Field<string>;
+  PromoIcon?: ImageField;
+  PromoText?: Field<string>;
+  PromoLink?: LinkField;
+  PromoText2?: Field<string>;
+  PromoText3?: Field<string>;
 };
 
 export type PromoProps = OptionalComponentProps & {
-  fields: PromoFields;
+  fields?: PromoFields;
 };
 

examples/kit-nextjs-location-finder/src/components/sxa/rich-text.props.ts

@@ -2,10 +2,10 @@ import type { Field } from '@sitecore-content-sdk/nextjs';
 import type { OptionalComponentProps } from '@/lib/component-props';
 
 export type RichTextFields = {
-  Text: Field<string>;
+  Text?: Field<string>;
 };
 
 export type RichTextProps = OptionalComponentProps & {
-  fields: RichTextFields;
+  fields?: RichTextFields;
 };
 

examples/kit-nextjs-location-finder/src/components/sxa/sxa-image.props.ts

@@ -8,6 +8,6 @@ export type SxaImageFields = {
 };
 
 export type SxaImageProps = OptionalComponentProps & {
-  fields: SxaImageFields;
+  fields?: SxaImageFields;
 };
 

examples/kit-nextjs-location-finder/src/components/sxa/title.props.ts

@@ -1,26 +1,26 @@
 import type { OptionalComponentProps } from '@/lib/component-props';
 
 export type TitleFields = {
-  data: {
-    datasource: {
-      url: {
+  data?: {
+    datasource?: {
+      url?: {
         path: string;
         siteName: string;
       };
-      field: {
-        jsonValue: {
+      field?: {
+        jsonValue?: {
           value: string;
           metadata?: { [key: string]: unknown };
         };
       };
     };
-    contextItem: {
-      url: {
+    contextItem?: {
+      url?: {
         path: string;
         siteName: string;
       };
-      field: {
-        jsonValue: {
+      field?: {
+        jsonValue?: {
           value: string;
           metadata?: { [key: string]: unknown };
         };
@@ -30,7 +30,7 @@ export type TitleFields = {
 };
 
 export type TitleProps = OptionalComponentProps & {
-  fields: TitleFields;
+  fields?: TitleFields;
 };
 
 export type TitleComponentContentProps = {