Carousel simpler (#36)

* carousel: new simpler carousel, no deps, scroll and css based, slide width is configurable

* carousel: add example wit custom slides width

* carousel: don't use min width, just use flex widths

* carousel: fix forgotten @ts-ignore

* carousel: cleanup comments

* fix type err

Co-authored-by: Amin Mahboubi <aminmahboobi@gmail.com>

Author: kuus

package.json

@@ -46,7 +46,6 @@
     "dayjs": "^1.9.7",
     "ical-expander": "^3.1.0",
     "linkifyjs": "^2.1.9",
-    "pure-react-carousel": "^1.27.6",
     "react-markdown": "^5.0.3",
     "react-virtuoso": "^0.20.3"
   },

src/components/Carousel.mdx

@@ -71,3 +71,34 @@ It displays a sliding carousel
   `}
   />
 </Playground>
+
+## With custom slides width
+
+<Playground>
+  <MML
+    source={`
+    <mml>
+      <carousel slideWidth="60%">
+        <item width="150px">
+            <image src="https://getstream.github.io/mml-react/public/door.jpg" />
+            <md>**Door**</md>
+            <text>Locks, hinges, screens, stuck...</text>
+            <button name="action" value="door">Select</button>
+        </item>
+        <item>
+            <image src="https://getstream.github.io/mml-react/public/window.jpg" />
+            <md>**Window**</md>
+            <text>Glass, slide, locks, broken, damage...</text>
+            <button name="action" value="window">Select</button>
+        </item>
+        <item>
+            <image src="https://getstream.github.io/mml-react/public/sliding-door.jpg" />
+            <md>**Sliding door**</md>
+            <text>Locks, hinges, screens, stuck...</text>
+            <button name="action" value="sliding-door">Select</button>
+        </item>
+      </carousel>
+    </mml>
+  `}
+  />
+</Playground>

src/components/Carousel.tsx

@@ -1,51 +1,41 @@
-import React, { FC, ReactElement } from 'react';
-import { CarouselProvider, Slider } from 'pure-react-carousel';
+import React, { FC, ReactElement, Children, cloneElement } from 'react';
 import { CarouselItemProps } from './CarouselItem';
 
 export type CarouselProps = {
-  /** Infinite loop */
-  infinite?: boolean;
-  /** Amount of slides per view */
-  perView?: number;
-  /** Amount of slides per move */
-  perMove?: number;
-  /** Auto calculate slides' height */
-  autoHeight?: boolean;
-  /** Ideal slide width */
-  slideWidth?: number;
-  /** Ideal slide height */
-  slideHeight?: number;
-  /** A list of carousel items */
+  /**
+   * The only children of the Carousel are the carousel item.
+   */
   children?: ReactElement<CarouselItemProps>[] | ReactElement<CarouselItemProps>;
+  /**
+   * Base slide width set on the `Carousel` component level, it can be overriden for each CarouselItem by setting
+   * a `width` attribute on the `<item>` component.
+   *
+   * It can be set to either a percentage, e.g. `slideWidth="40%"` or to a pixel based value `slideWidth="200px"`.
+   *
+   * @default '120px'
+   */
+  slideWidth?: string;
+  /**
+   * Additional carousel class name
+   */
+  className?: string;
 };
 
 /**
- * A carousel is a nice mobile friendly way of letting a user select
- * something
+ * A carousel is a nice mobile friendly way of letting a user select something
+ *
+ * Super simple scroll based carousel slightly inspired by [react-scroll-snap-slider](https://github.com/lifarl/react-scroll-snap-slider)
  */
-export const Carousel: FC<CarouselProps> = ({
-  infinite = true,
-  perView = 2.5,
-  perMove = 1,
-  autoHeight = true,
-  slideWidth = 100,
-  slideHeight = 125,
-  children,
-}) => {
+export const Carousel: FC<CarouselProps> = ({ children, slideWidth = '120px', className = '' }) => {
   return (
-    <div className="mml-carousel">
-      <CarouselProvider
-        className="mml"
-        infinite={infinite}
-        visibleSlides={perView}
-        step={perMove}
-        isIntrinsicHeight={autoHeight}
-        naturalSlideWidth={slideWidth}
-        naturalSlideHeight={slideHeight}
-        totalSlides={React.Children.count(children)}
-      >
-        <Slider>{children}</Slider>
-      </CarouselProvider>
+    <div className={`mml-carousel ${className}`}>
+      <div className="mml-carousel__track">
+        <div className="mml-carousel__slides">
+          {Children.map(children as ReactElement, (child) =>
+            cloneElement(child, { className: 'mml-carousel__slide', slideWidth }),
+          )}
+        </div>
+      </div>
     </div>
   );
 };

src/components/CarouselItem.tsx

@@ -1,20 +1,32 @@
 import React, { FC, ReactNode } from 'react';
-import { Slide } from 'pure-react-carousel';
+import { CarouselProps } from './Carousel';
 
 export type CarouselItemProps = {
-  /** The error message */
+  /**
+   * The carousel item inner components can contain any type of nodes, such as buttons, images, etc.
+   */
   children?: ReactNode;
-};
+  /**
+   * Determines the slide width, it can be set to either a percentage, e.g. `width="40%"` or to a pixel based value `width="200px"`.
+   * It defaults to the `slideWidth` prop set at the `<carousel>` level
+   *
+   * @default ''
+   */
+  width?: string;
+  /**
+   * Additional carousel item class name
+   */
+  className?: string;
+} & Pick<CarouselProps, 'slideWidth'>;
 
 /**
- * The only children of the Carousel are the carousel item.
- * A carousel item can contain any type of nodes, such as buttons, images etc.
+ * A carousel item
  */
-export const CarouselItem: FC<CarouselItemProps> = ({ children }) => {
-  //TODO: index should come from parser as prop
+export const CarouselItem: FC<CarouselItemProps> = ({ children, slideWidth, width = '', className = '' }) => {
+  const finalWidth = width || slideWidth;
   return (
-    <Slide index={0} className="mml-carousel-item">
+    <div className={`mml-carousel-item ${className}`} style={{ flex: `0 0 ${finalWidth}`, minWidth: finalWidth }}>
       {children}
-    </Slide>
+    </div>
   );
 };