Use graphql queries

.storybook/stories/config-pages/GlobalMessage.stories.tsx

@@ -1,6 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react';
 
-import GlobalMessage from "@components/config-pages/global-message/global-message";
+import GlobalMessage from "../../../src/components/config-pages/global-message";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof GlobalMessage> = {

.storybook/stories/media.tsx

@@ -1,19 +1,18 @@
-export const ImageMedia = () => {
+import {DrupalImageMediaType, DrupalVideoMediaType} from "../../src/lib/types";
+
+export const ImageMedia = (): DrupalImageMediaType => {
   return {
-    field_media_image: {
-      image_style_uri: {
-        breakpoint_2xl_2x: "https://placekitten.com/1500/1500",
-        card_1900x950: "https://placekitten.com/1900/950",
-      },
-      resourceIdObjMeta:{
-        alt: "Kittens"
-      }
-  }
-  }
+    mediaImage: {
+      url: "https://placekitten.com/1500/1500",
+      height: 1500,
+      width: 1500,
+      alt: "kittens"
+    }
+  } as DrupalImageMediaType
 }
 
-export const VideoMedia = () => {
+export const VideoMedia = (): DrupalVideoMediaType => {
   return {
-    field_media_oembed_video: "https://www.youtube.com/watch?v=9P8mASSREYM"
-  }
+    mediaOembedVideo: "https://www.youtube.com/watch?v=9P8mASSREYM"
+  } as DrupalVideoMediaType
 }

.storybook/stories/nodes/cards/BasicPageCard.stories.tsx

@@ -1,6 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react';
 
-import StanfordPageCard from "@components/nodes/cards/stanford-page/stanford-page-card";
+import StanfordPageCard from "../../../../src/components/nodes/cards/stanford-page/stanford-page-card";
 import {ImageMedia} from "../../media";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
@@ -9,7 +9,7 @@ const meta: Meta<typeof StanfordPageCard> = {
   component: StanfordPageCard,
   tags: ['autodocs'],
   argTypes: {
-    su_page_image: {
+    suPageImage: {
       options: ["image", "none"],
       control: {type: "select"}
     },
@@ -30,19 +30,14 @@ type Story = StoryObj<typeof StanfordPageCard>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const PageCard: Story = {
-  render: ({headingLevel, path, ...args}) => {
-    args.su_page_image = args.su_page_image === "image" ? ImageMedia() : undefined;
-
-    args.path = {
-      alias: path
-    }
-
+  render: ({headingLevel, ...args}) => {
+    args.suPageImage = args.suPageImage === "image" ? ImageMedia() : undefined;
     return <StanfordPageCard node={args} headingLevel={headingLevel}/>
   },
   args: {
-    su_page_image: "image",
+    suPageImage: "image",
     path: "/foo-bar",
     title: "title",
-    su_page_description: "su_page_description",
+    suPageDescription: "su_page_description",
   },
 };

.storybook/stories/nodes/cards/CourseCard.stories.tsx

@@ -25,26 +25,22 @@ type Story = StoryObj<typeof StanfordCourseCard>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const CourseCard: Story = {
-  render: ({headingLevel, path, ...args}) => {
-    args.path = {
-      alias: path
-    }
-
+  render: ({headingLevel, ...args}) => {
     return <StanfordCourseCard node={args} headingLevel={headingLevel}/>
   },
   args: {
     path: "/foo-bar",
     title: "title",
-    body: "body",
-    su_course_academic_year: "2022-2023",
-    su_course_code: "271",
-    su_course_id: "222980",
-    su_course_instructors: ["su_course_instructors1", "su_course_instructors2"],
-    su_course_link:{url: "#", title: "su_course_link"},
-    su_course_quarters: [{id: 1, name: "Spring"}, {id: 1, name: "Autumn"}],
-    su_course_section_units: 5,
-    su_course_subject: {id: 1, name: "su_course_subject"},
-    su_course_tags: [{id:1, name: "su_course_tags1"}, {id:1, name: "su_course_tags2"}],
-    su_shared_tags: [{id:1, name: "su_shared_tags1"}, {id:1, name: "su_shared_tags2"}]
+    body: {processed: "body"},
+    suCourseAcademicYear: "2022-2023",
+    suCourseCode: "271",
+    suCourseId: "222980",
+    suCourseInstructors: ["su_course_instructors1", "su_course_instructors2"],
+    suCourseLink:{url: "#", title: "su_course_link"},
+    suCourseQuarters: [{id: 1, name: "Spring"}, {id: 1, name: "Autumn"}],
+    suCourseSectionUnits: 5,
+    suCourseSubject: {id: 1, name: "su_course_subject"},
+    suCourseTags: [{id:1, name: "su_course_tags1"}, {id:1, name: "su_course_tags2"}],
+    suSharedTags: [{id:1, name: "su_shared_tags1"}, {id:1, name: "su_shared_tags2"}]
   },
 };

.storybook/stories/nodes/cards/EventCard.stories.tsx

@@ -25,12 +25,8 @@ type Story = StoryObj<typeof StanfordEventCard>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const EventCard: Story = {
-  render: ({start_date, end_date, headingLevel, path, ...args}) => {
-    args.path = {
-      alias: path
-    }
-
-    args.su_event_date_time = {
+  render: ({start_date, end_date, headingLevel, ...args}) => {
+    args.suEventDateTime = {
       value: Math.round(new Date(start_date).getTime() / 1000),
       end_value: Math.round(new Date(end_date).getTime() / 1000),
     }
@@ -39,12 +35,13 @@ export const EventCard: Story = {
   args: {
     path: "/foo-bar",
     title: "title",
+    body: {process: "body"},
     start_date: new Date().toUTCString(),
     end_date: new Date().toUTCString(),
-    su_event_type: [{name: "su_event_type"}],
-    su_event_alt_loc: "su_event_alt_loc",
-    su_event_subheadline: "su_event_subheadline",
-    su_event_location: {
+    suEventType: [{id: "suEventType", name: "su_event_type"}],
+    suEventAltLoc: "su_event_alt_loc",
+    suEventSubheadline: "su_event_subheadline",
+    suEventLocation: {
       address_line1: "address_line1",
       address_line2: "address_line2",
       administrative_area: "administrative_area",

.storybook/stories/nodes/cards/EventSeriesCard.stories.tsx

@@ -26,21 +26,16 @@ type Story = StoryObj<typeof StanfordEventSeriesCard>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const EventSeriesCard: Story = {
-  render: ({headingLevel, path, ...args}) => {
-    args.path = {
-      alias: path
-    }
-
+  render: ({headingLevel, ...args}) => {
     return <StanfordEventSeriesCard node={args} headingLevel={headingLevel}/>
   },
   args: {
     path: "/foo-bar",
     title: "title",
-    su_event_series_dek: "su_event_series_dek",
-    su_event_series_event: [],
-    su_event_series_subheadline: "su_event_series_subheadline",
-    su_event_series_type: [{id: 1, name: "su_event_series_type1"}, {id: 2, name: "su_event_series_type2"}],
-    su_event_series_weight: 987,
-    su_shared_tags: [{id: 1, name: "su_shared_tags1"}, {id: 1, name: "su_shared_tags2"}]
+    suEventSeriesDek: "su_event_series_dek",
+    suEventSeriesEvent: [],
+    suEventSeriesSubheadline: "su_event_series_subheadline",
+    suEventSeriesType: [{id: 1, name: "su_event_series_type1"}, {id: 2, name: "su_event_series_type2"}],
+    suSharedTags: [{id: 1, name: "su_shared_tags1"}, {id: 1, name: "su_shared_tags2"}]
   },
 };

.storybook/stories/nodes/cards/NewsCard.stories.tsx

@@ -9,11 +9,11 @@ const meta: Meta<typeof StanfordNewsCard> = {
   component: StanfordNewsCard,
   tags: ['autodocs'],
   argTypes: {
-    su_news_banner: {
+    suNewsBanner: {
       options: ["image", "video", "none"],
       control: {type: "select"}
     },
-    su_news_featured_media: {
+    suNewsFeaturedMedia: {
       options: ["image", "video", "none"],
       control: {type: "select"}
     },
@@ -34,41 +34,41 @@ type Story = StoryObj<typeof StanfordNewsCard>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const NewsCard: Story = {
-  render: ({headingLevel, path, ...args}) => {
-    if (args.su_news_featured_media === 'image') {
-      args.su_news_featured_media = ImageMedia();
-    }
-    if (args.su_news_featured_media === 'video') {
-      args.su_news_featured_media = VideoMedia();
-    }
+  render: ({headingLevel, ...args}) => {
 
-    if (args.su_news_banner === 'image') {
-      args.su_news_banner = ImageMedia();
-    }
-    if (args.su_news_banner === 'video') {
-      args.su_news_banner = VideoMedia();
+    if (args.suNewsFeaturedMedia === 'image') {
+      args.suNewsFeaturedMedia = ImageMedia();
+    } else if (args.suNewsFeaturedMedia === 'video') {
+      args.suNewsFeaturedMedia = VideoMedia();
+    } else {
+      args.suNewsFeaturedMedia = undefined
     }
 
-    args.path = {
-      alias: path
+    if (args.suNewsBanner === 'image') {
+      args.suNewsBanner = ImageMedia();
+    } else if (args.suNewsBanner === 'video') {
+      args.suNewsBanner = VideoMedia();
+    } else {
+      args.suNewsBanner = undefined
     }
+
     return <StanfordNewsCard node={args} headingLevel={headingLevel}/>
   },
   args: {
     path: "/foo-bar",
     title: "title",
-    su_news_banner: "image",
-    su_news_featured_media: "image",
-    su_news_publishing_date: new Date().toLocaleDateString(),
-    su_news_banner_media_caption: "su_news_banner_media_caption",
-    su_news_byline: "su_news_byline",
-    su_news_dek: "su_news_dek",
-    su_news_topics: [
+    suNewsBanner: "image",
+    suNewsFeaturedMedia: "image",
+    suNewsPublishingDate: {value: new Date().toLocaleDateString()},
+    suNewsBannerMediaCaption: "su_news_banner_media_caption",
+    suNewsByline: "su_news_byline",
+    suNewsDek: "su_news_dek",
+    suNewsTopics: [
       {id: 1, name: "su_news_topics 1"},
       {id: 2, name: "su_news_topics 2"},
       {id: 3, name: "su_news_topics 3"},
     ],
-    su_shared_tags: [{id: 1, name: "su_shared_tags1"}, {id: 2, name: "su_shared_tags2"}],
-    su_news_hide_social: false,
+    suSharedTags: [{id: 1, name: "su_shared_tags1"}, {id: 2, name: "su_shared_tags2"}],
+    suNewsHideSocial: false,
   },
 };

.storybook/stories/nodes/cards/PersonCard.stories.tsx

@@ -2,16 +2,14 @@ import type {Meta, StoryObj} from '@storybook/react';
 
 import StanfordPersonCard from "@components/nodes/cards/stanford-person/stanford-person-card";
 import {ImageMedia} from "../../media";
-import {DrupalParagraph, DrupalTaxonomyTerm} from "next-drupal";
-import {DrupalImageMediaType, DrupalLinkFieldType} from "@lib/types";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof StanfordPersonCard> = {
   title: 'Design/Nodes/Cards/Person Card',
   component: StanfordPersonCard,
   tags: ['autodocs'],
   argTypes: {
-    su_person_photo: {
+    suPersonPhoto: {
       options: ["image", "none"],
       control: {type: "select"}
     },
@@ -32,43 +30,39 @@ type Story = StoryObj<typeof StanfordPersonCard>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const PersonCard: Story = {
-  render: ({headingLevel, path, ...args}) => {
-    args.su_person_photo = args.su_page_image === "image" ? ImageMedia() : undefined;
-
-    args.path = {
-      alias: path
-    }
+  render: ({headingLevel, ...args}) => {
+    args.suPersonPhoto = args.suPersonPhoto === "image" ? ImageMedia() : undefined;
 
     return <StanfordPersonCard node={args} headingLevel={headingLevel}/>
   },
   args: {
     path: "/foo-bar",
     title: "title",
-    su_person_photo: "image",
-    body: "body",
-    su_person_academic_appt: "su_person_academic_appt",
-    su_person_address: "su_person_address",
-    su_person_admin_appts: "su_person_admin_appts",
-    su_person_affiliations: [{url: "#", title: "su_person_affiliations"}],
-    su_person_education: ["su_person_education1", "su_person_education2"],
-    su_person_email: "su_person_email",
-    su_person_fax: "su_person_fax",
-    su_person_first_name: "su_person_first_name",
-    su_person_full_title: "su_person_full_title",
-    su_person_last_name: "su_person_last_name",
-    su_person_links: [{url: "#", title: "su_person_links"}],
-    su_person_location_address: "su_person_location_address",
-    su_person_location_name: "su_person_location_name",
-    su_person_mail_code: "su_person_mail_code",
-    su_person_map_url: {url: "#", title: "su_person_map_url"},
-    su_person_mobile_phone: "su_person_mobile_phone",
-    su_person_profile_link: {url: "#", title: "su_person_profile_link"},
-    su_person_research: ["su_person_research1", "su_person_research2"],
-    su_person_research_interests: "su_person_research_interests",
-    su_person_scholarly_interests: "su_person_scholarly_interests",
-    su_person_short_title: "su_person_short_title",
-    su_person_telephone: "su_person_telephone",
-    su_person_type_group: [{id: 1, name: "su_person_type_group1"}, {id: 2, name: "su_person_type_group2"}],
-    su_shared_tags: [{id: 1, name: "su_shared_tags1"}, {id: 2, name: "su_shared_tags2"}],
+    suPersonPhoto: "image",
+    body: {processed: "body"},
+    suPersonAcademicAppt: "su_person_academic_appt",
+    suPersonAdminAppts: "su_person_admin_appts",
+    suPersonAffiliations: [{url: "#", title: "su_person_affiliations"}],
+    suPersonEducation: ["su_person_education1", "su_person_education2"],
+    suPersonEmail: "su_person_email",
+    suPersonFax: "su_person_fax",
+    suPersonFirstName: "su_person_first_name",
+    suPersonFullTitle: "su_person_full_title",
+    suPersonLastName: "su_person_last_name",
+    suPersonLinks: [{url: "#", title: "su_person_links"}],
+    suPersonLocationAddress: {processed: "su_person_location_address"},
+    suPersonLocationName: "su_person_location_name",
+    suPersonMailCode: "su_person_mail_code",
+    suPersonMapUrl: {url: "#", title: "su_person_map_url"},
+    suPersonMobilePhone: "su_person_mobile_phone",
+    suPersonProfileLink: {url: "#", title: "su_person_profile_link"},
+    suPersonPronouns: "Dr",
+    suPersonResearch: ["su_person_research1", "su_person_research2"],
+    suPersonResearchInterests: "su_person_research_interests",
+    suPersonScholarlyInterests: "su_person_scholarly_interests",
+    suPersonShortTitle: "su_person_short_title",
+    suPersonTelephone: "su_person_telephone",
+    suPersonTypeGroup: [{id: 1, name: "su_person_type_group1"}, {id: 2, name: "su_person_type_group2"}],
+    suSharedTags: [{id: 1, name: "su_shared_tags1"}, {id: 2, name: "su_shared_tags2"}],
   },
 };