feature/add more params to sections: backgroundColor(theme), backgrou…

…ndImage, maxWidth. Fix pricing sections naming (#36) * Add more section params * Remove debug log * Update types & presets for storyblok * Add new section params to Sanity * Fix * Remove empty options * Add `light` class to page * Fix naming * Fix TS error * Rollback * PR fixes * Update presets and types * fix classnames for background color param * gen new types * fix types * fix max width and bg color for sanity * rename pricing table * cleanup and lgtm --------- Co-authored-by: maksim hodasevich <[email protected]>
focusreactive · Nov 7, 2024 · 6e4a566 · 6e4a566
1 parent e7dffbf
commit 6e4a566
Show file tree

Hide file tree

Showing 57 changed files with 5,130 additions and 2,541 deletions.
diff --git a/apps/sanity/src/app/globals.css b/apps/sanity/src/app/globals.css
@@ -8,7 +8,7 @@
 }
 
 .light {
-  --bg: #f6f6f6;
+  --bg: #fff;
   --text: #222222;
   --text-secondary: #666666;
   --primary: #4f46e5;
@@ -20,3 +20,17 @@
   --text-secondary: #999999;
   --primary: #4f46e5;
 }
+
+.light-gray {
+  --bg: #f6f6f6;
+  --text: #222222;
+  --text-secondary: #666666;
+  --primary: #4f46e5;
+}
+
+.dark-gray {
+  --bg: #5b5b5b;
+  --text: #f6f6f6;
+  --text-secondary: #bababa;
+  --primary: #4f46e5;
+}
diff --git a/apps/sanity/src/components/SectionContainer/index.tsx b/apps/sanity/src/components/SectionContainer/index.tsx
@@ -1,37 +1,68 @@
 import { stegaClean } from "@sanity/client/stega";
+import imageUrlBuilder from "@sanity/image-url";
 
 import { cn } from "@shared/ui";
 
+import { client } from "@/lib/api/client";
+
 import type { ISectionContainerProps } from "./types";
 
+const builder = imageUrlBuilder(client);
+
 export default function SectionContainer({
   children,
   className,
   sectionData,
 }: ISectionContainerProps) {
-  const { _key, marginTop, marginBottom, paddingX, paddingY, noMaxWidth } =
-    sectionData;
+  const {
+    _key,
+    marginTop,
+    marginBottom,
+    paddingX,
+    paddingY,
+    maxWidth,
+    backgroundColor,
+    backgroundImage,
+  } = sectionData;
+
+  const backgroundImageUrl = backgroundImage
+    ? builder.image(backgroundImage).auto("format").fit("max").url()
+    : null;
+  const style = backgroundImageUrl
+    ? {
+        background: `url(${backgroundImageUrl}) no-repeat center/cover`,
+      }
+    : {};
 
   const cleanMarginTop = stegaClean(marginTop);
   const cleanMarginBottom = stegaClean(marginBottom);
+  const cleanBackgroundColor = stegaClean(backgroundColor);
+  const cleanMaxWidth = stegaClean(maxWidth);
 
   return (
     <section
       id={_key}
-      className={cn("overflow-x-hidden", className, {
-        "mt-0": cleanMarginTop === "none",
-        "mb-0": cleanMarginBottom === "none",
-        "mt-sectionBase": cleanMarginTop === "base",
-        "mb-sectionBase": cleanMarginBottom === "base",
-        "mt-sectionLg": cleanMarginTop === "lg",
-        "mb-sectionLg": cleanMarginBottom === "lg",
-      })}
+      className={cn(
+        "bg-bgColor overflow-x-hidden",
+        className,
+        cleanBackgroundColor,
+        {
+          "mt-0": cleanMarginTop === "none",
+          "mb-0": cleanMarginBottom === "none",
+          "mt-sectionBase": cleanMarginTop === "base",
+          "mb-sectionBase": cleanMarginBottom === "base",
+          "mt-sectionLg": cleanMarginTop === "lg",
+          "mb-sectionLg": cleanMarginBottom === "lg",
+        },
+      )}
+      style={style}
     >
       <div
-        className={cn("mx-auto max-w-screen-xl px-4 py-8", {
+        className={cn("mx-auto px-4 py-8", {
           "px-0": paddingX === "none",
           "py-0": paddingY === "none",
-          "max-w-none": noMaxWidth,
+          "max-w-screen-xl": cleanMaxWidth === "base",
+          "max-w-screen-sm": cleanMaxWidth === "small",
         })}
       >
         {children}

diff --git a/apps/sanity/src/components/SectionContainer/types.ts b/apps/sanity/src/components/SectionContainer/types.ts
@@ -1,10 +1,14 @@
+import type { SectionHero } from "@/generated/extracted-types";
+
 interface ISectionData {
   _key: string;
   paddingX?: "none";
   paddingY?: "none";
   marginTop?: "none" | "base" | "lg";
   marginBottom?: "none" | "base" | "lg";
-  noMaxWidth?: boolean;
+  maxWidth?: SectionHero["maxWidth"];
+  backgroundColor?: SectionHero["backgroundColor"];
+  backgroundImage?: SectionHero["backgroundImage"];
 }
 
 export interface ISectionContainerProps {

diff --git a/apps/sanity/src/contentSections/Blog/schema.ts b/apps/sanity/src/contentSections/Blog/schema.ts
@@ -5,7 +5,7 @@ import customRichText from "@/lib/schemas/customRichText";
 import {
   CommonGroup,
   commonGroups,
-  sectionMarginFields,
+  sectionCommonFields,
 } from "../commonFields";
 
 export const blogPost = defineType({
@@ -90,7 +90,7 @@ export default {
       of: [{ type: blogPost.name }],
       validation: (Rule) => Rule.required(),
     }),
-    ...sectionMarginFields,
+    ...sectionCommonFields,
   ],
   preview: {
     select: {

diff --git a/apps/sanity/src/contentSections/CardsGrid/schema.ts b/apps/sanity/src/contentSections/CardsGrid/schema.ts
@@ -5,7 +5,7 @@ import customImage from "@/lib/schemas/customImage";
 import {
   CommonGroup,
   commonGroups,
-  sectionMarginFields,
+  sectionCommonFields,
 } from "../commonFields";
 
 const featurePointStyles = [
@@ -108,7 +108,7 @@ export default {
       of: [{ type: "defaultCard" }],
       validation: (Rule) => Rule.required().min(1),
     }),
-    ...sectionMarginFields,
+    ...sectionCommonFields,
   ],
   preview: {
     select: {

diff --git a/...ctions/carousels/SimpleCarousel/index.tsx → ...ty/src/contentSections/Carousel/index.tsx b/...ctions/carousels/SimpleCarousel/index.tsx → ...ty/src/contentSections/Carousel/index.tsx
@@ -1,23 +1,23 @@
 import { stegaClean } from "@sanity/client/stega";
 import EmptyBlock from "@shared/ui/components/EmptyBlock";
 
-import { SimpleCarousel as SimpleCarouselUI } from "@shared/ui";
+import { Carousel as CarouselUI } from "@shared/ui";
 
 import { prepareImageProps } from "@/lib/adapters/prepareImageProps";
 import { prepareRichTextProps } from "@/lib/adapters/prepareRichTextProps";
 import SectionContainer from "@/components/SectionContainer";
 
-import type { ISimpleCarouselProps } from "./types";
+import type { ICarouselProps } from "./types";
 
-export default function SimpleCarousel({ data }: ISimpleCarouselProps) {
+export default function Carousel({ data }: ICarouselProps) {
   if (!data) return null;
 
-  const { text, slides, fullWidth, params } = data;
+  const { text, slides, params } = data;
   const effect = stegaClean(data.effect);
   const { loop, slidesPerView, spaceBetween } = params || {};
 
   if (!slides || slides.length === 0)
-    return <EmptyBlock name="Simple Carousel" />;
+    return <EmptyBlock name="Carousel" />;
 
   const carouselSlides = slides.map((slide) => ({
     image: prepareImageProps(slide.image),
@@ -30,10 +30,9 @@ export default function SimpleCarousel({ data }: ISimpleCarouselProps) {
       sectionData={{
         ...data,
         paddingX: "none",
-        noMaxWidth: fullWidth,
       }}
     >
-      <SimpleCarouselUI
+      <CarouselUI
         text={prepareRichTextProps(text)}
         slides={carouselSlides}
         effect={effect}

diff --git a/...ctions/carousels/SimpleCarousel/schema.ts → ...ty/src/contentSections/Carousel/schema.ts b/...ctions/carousels/SimpleCarousel/schema.ts → ...ty/src/contentSections/Carousel/schema.ts
@@ -5,13 +5,13 @@ import customImage from "@/lib/schemas/customImage";
 import {
   CommonGroup,
   commonGroups,
-  sectionMarginFields,
-} from "../../commonFields";
+  sectionCommonFields,
+} from "../commonFields";
 
-export const simpleCarouselCard = defineType({
-  name: "simpleCarouselCard",
+export const carouselCard = defineType({
+  name: "carouselCard",
   type: "object",
-  title: "Simple Carousel Card",
+  title: "Carousel Card",
   options: {},
   fields: [
     defineField({
@@ -39,8 +39,8 @@ export const simpleCarouselCard = defineType({
 
 export default {
   options: {},
-  name: "section.simpleCarousel",
-  title: "Simple Carousel",
+  name: "section.carousel",
+  title: "Carousel",
   type: "object",
   groups: commonGroups,
   fields: [
@@ -53,7 +53,7 @@ export default {
       group: CommonGroup.Content,
       name: "slides",
       type: "array",
-      of: [{ type: "simpleCarouselCard" }],
+      of: [{ type: "carouselCard" }],
       validation: (Rule) => Rule.required(),
     }),
     defineField({
@@ -73,11 +73,6 @@ export default {
       },
       initialValue: "slide",
     }),
-    defineField({
-      name: "fullWidth",
-      type: "boolean",
-      group: CommonGroup.Style,
-    }),
     defineField({
       name: "params",
       type: "object",
@@ -97,14 +92,14 @@ export default {
         }),
       ],
     }),
-    ...sectionMarginFields,
+    ...sectionCommonFields,
   ],
   preview: {
     select: {
       slides: "slides",
     },
     prepare: ({ slides }: any) => ({
-      title: `Simple Carousel - ${slides.length} slides`,
+      title: `Carousel - ${slides.length} slides`,
     }),
   },
 };
diff --git a/apps/sanity/src/contentSections/Carousel/types.ts b/apps/sanity/src/contentSections/Carousel/types.ts
@@ -0,0 +1,7 @@
+import { type SectionCarousel } from "@/generated/extracted-types";
+
+export interface ICarouselProps {
+  data: SectionCarousel & {
+    _key: string;
+  };
+}
diff --git a/apps/sanity/src/contentSections/Copy/schema.ts b/apps/sanity/src/contentSections/Copy/schema.ts
@@ -5,7 +5,7 @@ import customRichText from "@/lib/schemas/customRichText";
 import {
   CommonGroup,
   commonGroups,
-  sectionMarginFields,
+  sectionCommonFields,
 } from "../commonFields";
 
 export default {
@@ -26,11 +26,11 @@ export default {
     defineField({
       name: "isReversedOnMobile",
       type: "boolean",
-      group: CommonGroup.Style, 
+      group: CommonGroup.Style,
       initialValue: false,
       validation: (Rule) => Rule.required(),
     }),
-    ...sectionMarginFields,
+    ...sectionCommonFields,
   ],
   preview: {
     select: {

diff --git a/apps/sanity/src/contentSections/Hero/schema.ts b/apps/sanity/src/contentSections/Hero/schema.ts
@@ -6,7 +6,7 @@ import customLink from "@/lib/schemas/customLink";
 import {
   CommonGroup,
   commonGroups,
-  sectionMarginFields,
+  sectionCommonFields,
 } from "../commonFields";
 
 export default {
@@ -39,7 +39,7 @@ export default {
       of: [{ type: customLink.name }],
       validation: (Rule) => Rule.required(),
     }),
-    ...sectionMarginFields,
+    ...sectionCommonFields,
   ],
   preview: {
     select: {

diff --git a/apps/sanity/src/contentSections/LinksList/schema.ts b/apps/sanity/src/contentSections/LinksList/schema.ts
@@ -6,7 +6,7 @@ import customLink from "@/lib/schemas/customLink";
 import {
   CommonGroup,
   commonGroups,
-  sectionMarginFields,
+  sectionCommonFields,
 } from "../commonFields";
 
 export default {
@@ -38,7 +38,7 @@ export default {
       validation: (Rule) => Rule.required(),
       initialValue: AlignVariant.Left,
     }),
-    ...sectionMarginFields,
+    ...sectionCommonFields,
   ],
   preview: {
     select: {

diff --git a/apps/sanity/src/contentSections/Logos/schema.ts b/apps/sanity/src/contentSections/Logos/schema.ts
@@ -7,7 +7,7 @@ import customLink from "@/lib/schemas/customLink";
 import {
   CommonGroup,
   commonGroups,
-  sectionMarginFields,
+  sectionCommonFields,
 } from "../commonFields";
 
 export const logoItem = defineType({
@@ -78,7 +78,7 @@ export default {
       validation: (Rule) => Rule.required(),
       initialValue: AlignVariant.Left,
     }),
-    ...sectionMarginFields,
+    ...sectionCommonFields,
   ],
   preview: {
     prepare: () => ({

diff --git a/apps/sanity/src/contentSections/Pricing/types.ts b/apps/sanity/src/contentSections/Pricing/types.ts
diff --git a/...ity/src/contentSections/Pricing/index.tsx → ...rc/contentSections/PricingTable/index.tsx b/...ity/src/contentSections/Pricing/index.tsx → ...rc/contentSections/PricingTable/index.tsx
@@ -1,16 +1,16 @@
 import EmptyBlock from "@shared/ui/components/EmptyBlock";
 
-import { Pricing } from "@shared/ui";
+import { PricingTable as PricingTableUI } from "@shared/ui";
 
 import { prepareImageProps } from "@/lib/adapters/prepareImageProps";
 import { prepareLinkProps } from "@/lib/adapters/prepareLinkProps";
 import SectionContainer from "@/components/SectionContainer";
 
-import type { IPricingSectionProps } from "./types";
+import type { IPricingTableProps } from "./types";
 
-export default function PricingSection({ data }: IPricingSectionProps) {
+export default function PricingTable({ data }: IPricingTableProps) {
   if (!data || data.tiers.length === 0)
-    return <EmptyBlock name="Pricing Section" />;
+    return <EmptyBlock name="Pricing table" />;
 
   const { tiers } = data;
 
@@ -22,7 +22,7 @@ export default function PricingSection({ data }: IPricingSectionProps) {
 
   return (
     <SectionContainer sectionData={data}>
-      <Pricing {...data} tiers={formattedTiers} />
+      <PricingTableUI {...data} tiers={formattedTiers} />
     </SectionContainer>
   );
 }