Refactor CMSSlider component to use consistent naming for CMS items

- Updated variable names from `slideElements` to `items` for clarity and consistency across the CMSSlider and SlideItem components.
- Adjusted the useCMSCollectionItems hook to reflect the new naming convention, enhancing code readability.

Author: viratatwebflow

cms-slider/src/components/CMSSlider/CMSSlider.tsx

@@ -33,8 +33,9 @@ const CMSSlider = (props: CMSSliderProps) => {
   const parentRef = useRef<HTMLDivElement>(null);
 
   // Extract CMS collection items from Webflow slot
-  const { cmsCollectionComponentSlotRef, slideElements } =
-    useCMSCollectionItems("cmsCollectionComponentSlot");
+  const { cmsCollectionComponentSlotRef, items } = useCMSCollectionItems(
+    "cmsCollectionComponentSlot"
+  );
 
   // Inject global styles into shadow DOM
   useShadowGlobalStyles(parentRef);
@@ -50,7 +51,7 @@ const CMSSlider = (props: CMSSliderProps) => {
       </div>
 
       {/* Render slider once CMS items are extracted */}
-      {slideElements && slideElements.length > 0 && (
+      {items && items.length > 0 && (
         <SlickSlider
           infinite={infinite}
           slidesToShow={slidesToShow}
@@ -61,8 +62,8 @@ const CMSSlider = (props: CMSSliderProps) => {
           autoplaySpeed={autoplaySpeed}
           swipeToSlide={true}
         >
-          {slideElements.map((slide, index) => (
-            <SlideItem key={index} slide={slide} index={index} />
+          {items.map((item, index) => (
+            <SlideItem key={index} item={item} index={index} />
           ))}
         </SlickSlider>
       )}

cms-slider/src/components/CMSSlider/SlideItem.tsx

@@ -3,18 +3,18 @@ import { useEffect, useRef } from "react";
 /**
  * Wrapper component that renders a single CMS collection item as a slide
  */
-const SlideItem = (props: { slide: HTMLDivElement; index: number }) => {
-  const { slide, index } = props;
-  const slideRef = useRef<HTMLDivElement>(null);
+const SlideItem = (props: { item: HTMLDivElement; index: number }) => {
+  const { item, index } = props;
+  const itemRef = useRef<HTMLDivElement>(null);
 
   // Append the cloned slide element to the container
   useEffect(() => {
-    if (slideRef.current) {
-      slideRef.current.appendChild(slide.cloneNode(true) as HTMLDivElement);
+    if (itemRef.current) {
+      itemRef.current.appendChild(item.cloneNode(true) as HTMLDivElement);
     }
-  }, [slide]);
+  }, [item]);
 
-  return <div ref={slideRef} data-index={index}></div>;
+  return <div ref={itemRef} data-index={index}></div>;
 };
 
 export default SlideItem;

cms-slider/src/components/CMSSlider/useCMSCollectionItems.ts

@@ -7,12 +7,10 @@ import { useEffect, useMemo, useRef, useState } from "react";
  */
 export function useCMSCollectionItems(slotName: string) {
   const cmsCollectionComponentSlotRef = useRef<HTMLDivElement>(null);
-  const [slideElements, setSlideElements] = useState<HTMLDivElement[] | null>(
-    null
-  );
+  const [items, setItems] = useState<HTMLDivElement[] | null>(null);
 
   useEffect(() => {
-    if (slideElements === null && cmsCollectionComponentSlotRef.current) {
+    if (items === null && cmsCollectionComponentSlotRef.current) {
       // Find the slot element by name
       const slot = cmsCollectionComponentSlotRef.current.querySelector(
         `[name="${slotName}"]`
@@ -29,22 +27,20 @@ export function useCMSCollectionItems(slotName: string) {
               )
             ) as HTMLDivElement[]
           ).map((slide) => slide.cloneNode(true) as HTMLDivElement);
-          setSlideElements(slides);
+          setItems(slides);
         }
       }
     }
-  }, [cmsCollectionComponentSlotRef.current, slideElements]);
+  }, [cmsCollectionComponentSlotRef.current, items]);
 
   // Filter out empty slides and memoize for performance
-  const memoizedSlideElements = useMemo(
-    () =>
-      slideElements?.filter((slide) => slide && slide.children.length > 0) ??
-      [],
-    [slideElements]
+  const memoizedItems = useMemo(
+    () => items?.filter((item) => item && item.children.length > 0) ?? [],
+    [items]
   );
 
   return {
     cmsCollectionComponentSlotRef,
-    slideElements: memoizedSlideElements,
+    items: memoizedItems,
   };
 }