feat: components with global data (#69)

* fix: header footer slugs, moved to components folder * feat: add ability to create global components and edit them from a single place * feat: remove utility to resolve header and footer relations, move resolving relations to the component level, reusing useGlobalComponent hook * feat: rename globalComponent to globalData, update stories, schemas, types * feat: add globalData to hero for sanity component, change hero query to resolve globalData, add comment to use CSS variables as section background
focusreactive · Dec 16, 2024 · 29d640f · 29d640f
1 parent 4c844f4
commit 29d640f
Show file tree

Hide file tree

Showing 30 changed files with 996 additions and 423 deletions.
diff --git a/apps/sanity/src/components/SectionContainer/index.tsx b/apps/sanity/src/components/SectionContainer/index.tsx
@@ -36,7 +36,7 @@ export default function SectionContainer({
 
   const cleanMarginTop = stegaClean(marginTop);
   const cleanMarginBottom = stegaClean(marginBottom);
-  const cleanBackgroundColor = stegaClean(backgroundColor);
+  const cleanBackgroundColor = stegaClean(backgroundColor); // implement using CSS variables
   const cleanMaxWidth = stegaClean(maxWidth);
 
   return (
@@ -45,7 +45,7 @@ export default function SectionContainer({
       className={cn(
         "bg-bgColor overflow-x-hidden",
         className,
-        cleanBackgroundColor,
+        cleanBackgroundColor, // implement using CSS variables
         {
           "mt-0": cleanMarginTop === "none",
           "mb-0": cleanMarginBottom === "none",

diff --git a/apps/sanity/src/contentSections/Hero/index.tsx b/apps/sanity/src/contentSections/Hero/index.tsx
@@ -12,11 +12,31 @@ import type { IHeroSectionProps } from "./types";
 export default function HeroSection({ data }: IHeroSectionProps) {
   if (!data) return null;
 
-  const { title, text, image, links } = data;
+  const { title, text, image, links, globalData } = data;
 
   if (!title && !text?.text && !image?.image && (!links || links.length === 0))
     return <EmptyBlock name="Hero Section" />;
 
+  if (globalData) {
+    const {
+      title: globalTitle,
+      text: globalText,
+      image: globalImage,
+      links: globalLinks,
+    } = globalData as any;
+
+    return (
+      <SectionContainer sectionData={globalData as any}>
+        <Hero
+          title={globalTitle}
+          text={prepareRichTextProps(globalText)}
+          image={prepareImageProps(globalImage)}
+          links={globalLinks?.map(prepareLinkProps) || []}
+        />
+      </SectionContainer>
+    );
+  }
+
   return (
     <SectionContainer sectionData={data}>
       <Hero

diff --git a/apps/sanity/src/contentSections/Hero/query.ts b/apps/sanity/src/contentSections/Hero/query.ts
@@ -2,6 +2,12 @@ import { LINK_FRAGMENT } from "@/lib/api/fragments";
 
 export const HERO_FRAGMENT = `
   ...,
+  globalData->{
+  ...,
+    links[] {
+      ${LINK_FRAGMENT}
+    },
+  },
   links[] {
     ${LINK_FRAGMENT}
   }

diff --git a/apps/sanity/src/contentSections/Hero/schema.ts b/apps/sanity/src/contentSections/Hero/schema.ts
@@ -13,9 +13,16 @@ export default {
   options: {},
   name: "section.hero",
   title: "Hero",
-  type: "object",
+  type: "document",
   groups: commonGroups,
   fields: [
+    defineField({
+      name: "globalData",
+      title: "Global Data",
+      type: "reference",
+      to: [{ type: "section.hero" }],
+      group: CommonGroup.Content,
+    }),
     defineField({
       name: "title",
       type: "string",