Updates for Hero to support editor editing and Storybook fixes

src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Hero.tsx

@@ -1,7 +1,15 @@
 import React from 'react';
 import { Box, Heading, Text, Image, Flex, useBreakpointValue } from '@chakra-ui/react';
-import { Field, ImageField, LinkField } from '@sitecore-jss/sitecore-jss-nextjs';
+
+import {
+  TextField,
+  ImageField,
+  LinkField,
+  Text as JssText,
+} from '@sitecore-jss/sitecore-jss-nextjs';
+
 import { ButtonLink } from '../../basics/ButtonLink';
+
 import {
   isSitecoreLinkFieldPopulated,
   isSitecoreTextFieldPopulated,
@@ -10,13 +18,13 @@ import {
 // Define the type of props that Hero will accept
 interface Fields {
   /** Title of the event banner */
-  Headline: Field<string>;
+  Headline: TextField;
 
   /** Date of the event */
-  EventDate: Field<string>;
+  EventDate: TextField;
 
   /** Description of the event */
-  Text: Field<string>;
+  Text: TextField;
 
   /** Link to trigger when the button is clicked */
   CallToAction: LinkField;
@@ -51,16 +59,16 @@ export const HeroHomepage = (props: HeroProps): JSX.Element => {
       >
         <Box width="auto" alignSelf="end" maxWidth="620px" minWidth="360px">
           <Heading as="h2" fontSize="30px" fontWeight="bold" mb="33px">
-            {props.fields.Headline?.value}
+            <JssText field={props.fields.Headline} />
           </Heading>
           {isSitecoreTextFieldPopulated(props.fields.EventDate) && (
             <Text fontSize="18px" mb={6}>
-              {props.fields.EventDate?.value}
+              <JssText field={props.fields.EventDate} />
             </Text>
           )}
           {isSitecoreTextFieldPopulated(props.fields.Text) && (
             <Text mb={6} fontSize="18px">
-              {props.fields.Text?.value}
+              <JssText field={props.fields.Text} />
             </Text>
           )}
           {isSitecoreLinkFieldPopulated(props.fields.CallToAction) && (
@@ -103,11 +111,11 @@ export const HeroEvent = (props: HeroProps): JSX.Element => {
       >
         <Box width="auto" alignSelf="end" maxWidth="620px" minWidth="360px">
           <Heading as="h2" fontSize="30px" fontWeight="bold" mb="33px">
-            {props.fields.Headline?.value}
+            <JssText field={props.fields.Headline} />
           </Heading>
           {isSitecoreTextFieldPopulated(props.fields.Text) && (
             <Text mb={6} fontSize="18px">
-              {props.fields.Text?.value}
+              <JssText field={props.fields.Text} />
             </Text>
           )}
         </Box>
@@ -154,11 +162,11 @@ export const HeroJustificationLetter = (props: HeroProps): JSX.Element => {
         alignItems="flex-start"
       >
         <Heading as="h2" fontSize="30px" color="black" fontWeight="bold" mt={10} mb="33px">
-          {props.fields.Headline?.value}
+          <JssText field={props.fields.Headline} />
         </Heading>
         {isSitecoreTextFieldPopulated(props.fields.Text) && (
           <Text mb={6} fontSize="18px" color="black">
-            {props.fields.Text?.value}
+            <JssText field={props.fields.Text} />
           </Text>
         )}
         {isSitecoreLinkFieldPopulated(props.fields.CallToAction) && (

src/Project/Sugcon2024/Sugcon/src/lib/utils/sitecoreUtils.ts

@@ -1,3 +1,5 @@
+import { TextField } from '@sitecore-jss/sitecore-jss-nextjs';
+
 interface SitecoreLinkField {
   value?: {
     href?: string;
@@ -6,10 +8,6 @@ interface SitecoreLinkField {
   };
 }
 
-interface SitecoreTextField {
-  value?: string;
-}
-
 interface SitecoreImageField {
   value?: {
     src?: string;
@@ -20,7 +18,7 @@ export function isSitecoreLinkFieldPopulated(field?: SitecoreLinkField): boolean
   return Boolean(field?.value?.href && (field?.value?.text || field?.value?.anchor));
 }
 
-export function isSitecoreTextFieldPopulated(field: SitecoreTextField): boolean {
+export function isSitecoreTextFieldPopulated(field: TextField): boolean {
   return Boolean(field?.value);
 }
 

src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/HomepageHero.stories.ts → src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/HomepageHero.stories.tsx

@@ -1,12 +1,22 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { HeroHomepage } from '../../../components/Basic Components/Hero';
+import { SitecoreContext } from '@sitecore-jss/sitecore-jss-react';
+
 const meta = {
   title: 'Components/Hero',
   component: HeroHomepage,
   parameters: {
     layout: 'centered',
   },
   tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      // Assuming you might need to provide a mock context value
+      <SitecoreContext componentFactory={() => null}>
+        <Story />
+      </SitecoreContext>
+    ),
+  ],
   argTypes: {},
 } satisfies Meta<typeof HeroHomepage>;
 export default meta;

src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/JustificationLetterHero.stories.ts → src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/JustificationLetterHero.stories.tsx

@@ -1,12 +1,21 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { HeroJustificationLetter } from '../../../components/Basic Components/Hero';
+import { SitecoreContext } from '@sitecore-jss/sitecore-jss-react';
+
 const meta = {
   title: 'Components/Hero',
   component: HeroJustificationLetter,
   parameters: {
     layout: 'centered',
   },
   tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <SitecoreContext componentFactory={() => null}>
+        <Story />
+      </SitecoreContext>
+    ),
+  ],
   argTypes: {},
 } satisfies Meta<typeof HeroJustificationLetter>;
 export default meta;