Make SimpleCarousel not so simple (#35)

* Make SimpleCarousel not so simple * Fix TS error
focusreactive · Nov 4, 2024 · 63ea4ec · 63ea4ec
1 parent f72654a
commit 63ea4ec
Show file tree

Hide file tree

Showing 17 changed files with 461 additions and 33 deletions.
diff --git a/apps/sanity/src/components/SectionContainer/index.tsx b/apps/sanity/src/components/SectionContainer/index.tsx
@@ -9,8 +9,15 @@ export default function SectionContainer({
   className,
   sectionData,
 }: ISectionContainerProps) {
-  const { _key, theme, marginTop, marginBottom, paddingX, paddingY } =
-    sectionData;
+  const {
+    _key,
+    theme,
+    marginTop,
+    marginBottom,
+    paddingX,
+    paddingY,
+    noMaxWidth,
+  } = sectionData;
 
   const cleanMarginTop = stegaClean(marginTop);
   const cleanMarginBottom = stegaClean(marginBottom);
@@ -31,6 +38,7 @@ export default function SectionContainer({
         className={cn("mx-auto max-w-screen-xl px-4 py-8", {
           "px-0": paddingX === "none",
           "py-0": paddingY === "none",
+          "max-w-none": noMaxWidth,
         })}
       >
         {children}

diff --git a/apps/sanity/src/components/SectionContainer/types.ts b/apps/sanity/src/components/SectionContainer/types.ts
@@ -5,6 +5,7 @@ interface ISectionData {
   paddingY?: "none";
   marginTop?: "none" | "base" | "lg";
   marginBottom?: "none" | "base" | "lg";
+  noMaxWidth?: boolean;
 }
 
 export interface ISectionContainerProps {

diff --git a/apps/sanity/src/contentSections/carousels/SimpleCarousel/index.tsx b/apps/sanity/src/contentSections/carousels/SimpleCarousel/index.tsx
@@ -1,27 +1,48 @@
+import { stegaClean } from "@sanity/client/stega";
 import EmptyBlock from "@shared/ui/components/EmptyBlock";
 
 import { SimpleCarousel as SimpleCarouselUI } 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";
 
 export default function SimpleCarousel({ data }: ISimpleCarouselProps) {
   if (!data) return null;
 
-  const { slides } = data;
+  const { text, slides, fullWidth, params } = data;
+  const effect = stegaClean(data.effect);
+  const { loop, slidesPerView, spaceBetween } = params || {};
 
   if (!slides || slides.length === 0)
     return <EmptyBlock name="Simple Carousel" />;
 
   const carouselSlides = slides.map((slide) => ({
     image: prepareImageProps(slide.image),
+    text: prepareRichTextProps(slide.text),
+    effect,
   }));
 
   return (
-    <SectionContainer sectionData={data}>
-      <SimpleCarouselUI slides={carouselSlides} />
+    <SectionContainer
+      sectionData={{
+        ...data,
+        paddingX: "none",
+        noMaxWidth: fullWidth,
+      }}
+    >
+      <SimpleCarouselUI
+        text={prepareRichTextProps(text)}
+        slides={carouselSlides}
+        effect={effect}
+        params={{
+          loop,
+          slidesPerView: slidesPerView || (effect === "cards" ? 1 : 3),
+          spaceBetween: spaceBetween || 20,
+        }}
+      />
     </SectionContainer>
   );
 }
diff --git a/apps/sanity/src/contentSections/carousels/SimpleCarousel/schema.ts b/apps/sanity/src/contentSections/carousels/SimpleCarousel/schema.ts
@@ -14,6 +14,10 @@ export const simpleCarouselCard = defineType({
   title: "Simple Carousel Card",
   options: {},
   fields: [
+    defineField({
+      name: "text",
+      type: "customRichText",
+    }),
     defineField({
       name: "image",
       type: customImage.name,
@@ -26,6 +30,7 @@ export const simpleCarouselCard = defineType({
     },
     prepare({ image }) {
       return {
+        title: "Slide",
         media: image,
       };
     },
@@ -39,18 +44,64 @@ export default {
   type: "object",
   groups: commonGroups,
   fields: [
+    defineField({
+      group: CommonGroup.Content,
+      name: "text",
+      type: "customRichText",
+    }),
     defineField({
       group: CommonGroup.Content,
       name: "slides",
       type: "array",
       of: [{ type: "simpleCarouselCard" }],
       validation: (Rule) => Rule.required(),
     }),
+    defineField({
+      name: "effect",
+      type: "string",
+      group: CommonGroup.Style,
+      options: {
+        list: [
+          { title: "Slide", value: "slide" },
+          { title: "Coverflow", value: "coverflow" },
+          { title: "Cube", value: "cube" },
+          { title: "Fade", value: "fade" },
+          { title: "Flip", value: "flip" },
+          { title: "Cards", value: "cards" },
+        ],
+        layout: "radio",
+      },
+      initialValue: "slide",
+    }),
+    defineField({
+      name: "fullWidth",
+      type: "boolean",
+      group: CommonGroup.Style,
+    }),
+    defineField({
+      name: "params",
+      type: "object",
+      group: CommonGroup.Style,
+      fields: [
+        defineField({
+          name: "loop",
+          type: "boolean",
+        }),
+        defineField({
+          name: "slidesPerView",
+          type: "number",
+        }),
+        defineField({
+          name: "spaceBetween",
+          type: "number",
+        }),
+      ],
+    }),
     ...sectionMarginFields,
   ],
   preview: {
     select: {
-      slides: "preview.slides",
+      slides: "slides",
     },
     prepare: ({ slides }: any) => ({
       title: `Simple Carousel - ${slides.length} slides`,

diff --git a/apps/sanity/src/generated/extracted-schema.json b/apps/sanity/src/generated/extracted-schema.json
@@ -805,6 +805,14 @@
             "value": "section.simpleCarousel"
           }
         },
+        "text": {
+          "type": "objectAttribute",
+          "value": {
+            "type": "inline",
+            "name": "customRichText"
+          },
+          "optional": true
+        },
         "slides": {
           "type": "objectAttribute",
           "value": {
@@ -827,6 +835,76 @@
           },
           "optional": false
         },
+        "effect": {
+          "type": "objectAttribute",
+          "value": {
+            "type": "union",
+            "of": [
+              {
+                "type": "string",
+                "value": "slide"
+              },
+              {
+                "type": "string",
+                "value": "coverflow"
+              },
+              {
+                "type": "string",
+                "value": "cube"
+              },
+              {
+                "type": "string",
+                "value": "fade"
+              },
+              {
+                "type": "string",
+                "value": "flip"
+              },
+              {
+                "type": "string",
+                "value": "cards"
+              }
+            ]
+          },
+          "optional": true
+        },
+        "fullWidth": {
+          "type": "objectAttribute",
+          "value": {
+            "type": "boolean"
+          },
+          "optional": true
+        },
+        "params": {
+          "type": "objectAttribute",
+          "value": {
+            "type": "object",
+            "attributes": {
+              "loop": {
+                "type": "objectAttribute",
+                "value": {
+                  "type": "boolean"
+                },
+                "optional": true
+              },
+              "slidesPerView": {
+                "type": "objectAttribute",
+                "value": {
+                  "type": "number"
+                },
+                "optional": true
+              },
+              "spaceBetween": {
+                "type": "objectAttribute",
+                "value": {
+                  "type": "number"
+                },
+                "optional": true
+              }
+            }
+          },
+          "optional": true
+        },
         "marginTop": {
           "type": "objectAttribute",
           "value": {
@@ -1601,6 +1679,14 @@
             "value": "simpleCarouselCard"
           }
         },
+        "text": {
+          "type": "objectAttribute",
+          "value": {
+            "type": "inline",
+            "name": "customRichText"
+          },
+          "optional": true
+        },
         "image": {
           "type": "objectAttribute",
           "value": {

diff --git a/apps/sanity/src/generated/extracted-types.ts b/apps/sanity/src/generated/extracted-types.ts
@@ -131,11 +131,19 @@ export type SectionWideSimpleCarousel = {
 
 export type SectionSimpleCarousel = {
   _type: "section.simpleCarousel";
+  text?: CustomRichText;
   slides: Array<
     {
       _key: string;
     } & SimpleCarouselCard
   >;
+  effect?: "slide" | "coverflow" | "cube" | "fade" | "flip" | "cards";
+  fullWidth?: boolean;
+  params?: {
+    loop?: boolean;
+    slidesPerView?: number;
+    spaceBetween?: number;
+  };
   marginTop: "none" | "base" | "lg";
   marginBottom: "none" | "base" | "lg";
 };
@@ -234,6 +242,7 @@ export type WideSimpleCarouselCard = {
 
 export type SimpleCarouselCard = {
   _type: "simpleCarouselCard";
+  text?: CustomRichText;
   image: CustomImage;
 };
 
@@ -884,11 +893,19 @@ export type PAGE_BY_SLUG_QUERYResult = {
     | {
         _key: string;
         _type: "section.simpleCarousel";
+        text?: CustomRichText;
         slides: Array<
           {
             _key: string;
           } & SimpleCarouselCard
         >;
+        effect?: "cards" | "coverflow" | "cube" | "fade" | "flip" | "slide";
+        fullWidth?: boolean;
+        params?: {
+          loop?: boolean;
+          slidesPerView?: number;
+          spaceBetween?: number;
+        };
         marginTop: "base" | "lg" | "none";
         marginBottom: "base" | "lg" | "none";
       }

diff --git a/apps/sanity/src/lib/adapters/prepareImageProps.tsx b/apps/sanity/src/lib/adapters/prepareImageProps.tsx
@@ -15,7 +15,7 @@ export const urlForImage = (source: CustomImage["image"]) => {
     return undefined;
   }
 
-  return builder.image(source).auto("format").fit("max");
+  return builder.image(source);
 };
 
 export const prepareImageProps = (props?: CustomImage): IImageProps => {
@@ -28,8 +28,13 @@ export const prepareImageProps = (props?: CustomImage): IImageProps => {
       fit: "cover",
     };
 
-  const url =
-    urlForImage(props.image)?.height(props.height).fit("crop").url() || "";
+  const url = props.image.asset?._ref.endsWith("svg")
+    ? urlForImage(props.image)?.url() || ""
+    : urlForImage(props.image)
+        ?.height(props.height)
+        .fit("max")
+        .auto("format")
+        .url() || "";
 
   return {
     src: url,

diff --git a/apps/storyblok/src/components/SectionContainer/index.tsx b/apps/storyblok/src/components/SectionContainer/index.tsx
@@ -11,7 +11,8 @@ export default function SectionContainer({
   blok,
   className,
 }: ISectionContainerProps) {
-  const { _uid, paddingX, paddingY, marginTop, marginBottom } = blok;
+  const { _uid, paddingX, paddingY, marginTop, marginBottom, noMaxWidth } =
+    blok;
 
   if (isDraftMode) {
     return (
@@ -31,6 +32,7 @@ export default function SectionContainer({
           className={cn("mx-auto max-w-screen-xl px-4 py-8", {
             "px-0": paddingX === "none",
             "py-0": paddingY === "none",
+            "max-w-none": noMaxWidth,
           })}
         >
           {children}
@@ -55,6 +57,7 @@ export default function SectionContainer({
         className={cn("mx-auto max-w-screen-xl px-4 py-8", {
           "px-0": paddingX === "none",
           "py-0": paddingY === "none",
+          "max-w-none": noMaxWidth,
         })}
       >
         {children}

diff --git a/apps/storyblok/src/components/SectionContainer/types.ts b/apps/storyblok/src/components/SectionContainer/types.ts
@@ -5,6 +5,7 @@ export interface ISectionContainer extends SbBlokData {
   marginBottom?: "none" | "base" | "lg";
   paddingX?: "none";
   paddingY?: "none";
+  noMaxWidth?: boolean;
 }
 
 export interface ISectionContainerProps {