Make component fields optional in props across multiple components for Skate Park

examples/kit-nextjs-skate-park/src/__tests__/components/image/Image.test.tsx

@@ -172,8 +172,8 @@ describe('Image Component Edge Cases should', () => {
     const propsWithoutImage = {
       ...mockImagePropsComplete,
       fields: {
-        ImageCaption: mockImagePropsComplete.fields.ImageCaption,
-        TargetUrl: mockImagePropsComplete.fields.TargetUrl,
+        ImageCaption: mockImagePropsComplete.fields?.ImageCaption,
+        TargetUrl: mockImagePropsComplete.fields?.TargetUrl,
       } as unknown as typeof mockImagePropsComplete.fields,
     };
 

examples/kit-nextjs-skate-park/src/__tests__/components/link-list/LinkList.test.tsx

@@ -211,7 +211,7 @@ describe('LinkList Component Edge Cases should', () => {
       fields: {
         data: {
           datasource: {
-            field: mockLinkListProps.fields.data.datasource.field,
+            field: mockLinkListProps.fields?.data?.datasource?.field,
             children: {
               results: [],
             },

examples/kit-nextjs-skate-park/src/components/content-block/ContentBlock.tsx

@@ -11,9 +11,9 @@ import { ContentBlockProps } from './content-block.props';
  */
 const ContentBlock = ({ fields }: ContentBlockProps): JSX.Element => (
   <section 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} />
   </section>
 );
 

examples/kit-nextjs-skate-park/src/components/content-block/content-block.props.ts

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

examples/kit-nextjs-skate-park/src/components/image/Image.tsx

@@ -21,7 +21,7 @@ const ImageDefault: React.FC<ImageProps> = ({ params }) => (
 
 export const Banner: React.FC<ImageProps> = ({ params, fields }) => {
   const { styles, RenderingIdentifier: id } = params;
-  const baseImageField = getFieldValue(fields.Image);
+  const baseImageField = getFieldValue(fields?.Image);
   const imageField = baseImageField && {
     ...baseImageField,
     value: {

examples/kit-nextjs-skate-park/src/components/image/image.props.ts

@@ -3,13 +3,13 @@ import { Field, ImageField, LinkField } from '@sitecore-content-sdk/nextjs';
 import type React from 'react';
 
 export interface ImageFields {
-  Image: CompatibleField<ImageField>;
-  ImageCaption: CompatibleField<Field<string>>;
-  TargetUrl: CompatibleField<LinkField>;
+  Image?: CompatibleField<ImageField>;
+  ImageCaption?: CompatibleField<Field<string>>;
+  TargetUrl?: CompatibleField<LinkField>;
 }
 
 export interface ImageProps extends ComponentProps {
-  fields: ImageFields;
+  fields?: ImageFields;
 }
 
 export interface ImageWrapperProps {

examples/kit-nextjs-skate-park/src/components/link-list/LinkList.tsx

@@ -36,10 +36,12 @@ export const Default = ({ params, fields }: LinkListProps) => {
     }
 
     const links = results
-      .filter((element) => element?.field?.link)
+      .filter((element): element is typeof element & { field: { link: LinkField } } =>
+        Boolean(element?.field?.link)
+      )
       .map((element, index) => (
         <LinkListItem
-          key={`${index}-${element.field?.link}`}
+          key={`${index}-${element.field.link.value?.href ?? index}`}
           index={index}
           total={results.length}
           field={element.field.link}

examples/kit-nextjs-skate-park/src/components/link-list/link-list.props.ts

@@ -2,16 +2,16 @@ import { CompatibleDatasource, ComponentProps } from 'lib/component-props';
 import { LinkField, TextField } from '@sitecore-content-sdk/nextjs';
 
 export interface LinkListProps extends ComponentProps {
-  fields: CompatibleDatasource<{
-    children: {
-      results: Array<{
-        field: {
-          link: LinkField;
+  fields?: CompatibleDatasource<{
+    children?: {
+      results?: Array<{
+        field?: {
+          link?: LinkField;
         };
       }>;
     };
-    field: {
-      title: TextField;
+    field?: {
+      title?: TextField;
     };
   }>;
 }

examples/kit-nextjs-skate-park/src/components/navigation/Navigation.tsx

@@ -5,7 +5,11 @@ import { CompatibleLink } from 'components/content-sdk/CompatibleLink';
 import { getFieldValue } from 'lib/component-props';
 import { NavigationFields as Fields, NavigationListItemProps, NavigationProps } from './navigation.props';
 
-const getTextContent = (fields: Fields): JSX.Element | string => {
+const getTextContent = (fields?: Fields): JSX.Element | string => {
+  if (!fields) {
+    return '';
+  }
+
   const navigationTitle = getFieldValue(fields.NavigationTitle);
   const title = getFieldValue(fields.Title);
 
@@ -14,14 +18,14 @@ const getTextContent = (fields: Fields): JSX.Element | string => {
   return fields.DisplayName;
 };
 
-const getLinkField = (fields: Fields): LinkField => ({
+const getLinkField = (fields?: Fields): LinkField => ({
   value: {
-    href: fields.Href,
+    href: fields?.Href ?? '',
     title:
-      getFieldValue(fields.NavigationTitle)?.value?.toString() ??
-      getFieldValue(fields.Title)?.value?.toString() ??
-      fields.DisplayName,
-    querystring: fields.Querystring,
+      getFieldValue(fields?.NavigationTitle)?.value?.toString() ??
+      getFieldValue(fields?.Title)?.value?.toString() ??
+      fields?.DisplayName,
+    querystring: fields?.Querystring ?? '',
   },
 });
 
@@ -30,6 +34,10 @@ const NavigationListItem: React.FC<NavigationListItemProps> = ({
   handleClick,
   relativeLevel,
 }) => {
+  if (!fields) {
+    return null;
+  }
+
   const [isActive, setIsActive] = useState(false);
   const { page } = useSitecore();
 
@@ -69,7 +77,7 @@ export const Default = ({ params, fields }: NavigationProps) => {
   const { page } = useSitecore();
   const { styles, RenderingIdentifier: id } = params;
 
-  if (!Object.values(fields).length) {
+  if (!fields || !Object.values(fields).length) {
     return (
       <div className={`component navigation ${styles}`} id={id}>
         <div className="component-content">[Navigation]</div>

examples/kit-nextjs-skate-park/src/components/navigation/navigation.props.ts

@@ -13,13 +13,13 @@ export interface NavigationFields {
 }
 
 export interface NavigationListItemProps {
-  fields: NavigationFields;
+  fields?: NavigationFields;
   handleClick: (event?: React.MouseEvent<HTMLElement>) => void;
   relativeLevel: number;
 }
 
 export interface NavigationProps extends ComponentProps {
-  fields: NavigationFields;
+  fields?: NavigationFields;
 }
 
 export type NavigationLinkField = LinkField;

examples/kit-nextjs-skate-park/src/components/page-content/page-content.props.ts

@@ -2,9 +2,9 @@ import { RichTextField } from '@sitecore-content-sdk/nextjs';
 import { ComponentProps } from 'lib/component-props';
 
 export interface PageContentFields {
-  Content: RichTextField;
+  Content?: RichTextField;
 }
 
 export type PageContentProps = ComponentProps & {
-  fields: PageContentFields;
+  fields?: PageContentFields;
 };

examples/kit-nextjs-skate-park/src/components/promo/promo.props.ts

@@ -3,14 +3,14 @@ import { ImageField, Field, LinkField } from '@sitecore-content-sdk/nextjs';
 import type { JSX } from 'react';
 
 export interface PromoFields {
-  PromoIcon: CompatibleField<ImageField>;
-  PromoText: CompatibleField<Field<string>>;
-  PromoLink: CompatibleField<LinkField>;
-  PromoText2: CompatibleField<Field<string>>;
+  PromoIcon?: CompatibleField<ImageField>;
+  PromoText?: CompatibleField<Field<string>>;
+  PromoLink?: CompatibleField<LinkField>;
+  PromoText2?: CompatibleField<Field<string>>;
 }
 
 export type PromoProps = ComponentProps & {
-  fields: PromoFields;
+  fields?: PromoFields;
 };
 
 export interface PromoContentProps extends PromoProps {

examples/kit-nextjs-skate-park/src/components/rich-text/RichText.tsx

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

examples/kit-nextjs-skate-park/src/components/rich-text/rich-text.props.ts

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

examples/kit-nextjs-skate-park/src/components/title/title.props.ts

@@ -11,7 +11,7 @@ export interface TitleItem {
 }
 
 export interface TitleProps extends ComponentProps {
-  fields: CompatibleDatasource<TitleItem>;
+  fields?: CompatibleDatasource<TitleItem>;
 }
 
 export interface TitleComponentContentProps {