trepur_components 2.3.6 → 2.3.8

package/{archive → src/components}/Carousel/Carousel.stories.tsx

@@ -1,8 +1,8 @@
-import Card from '@components/Card';
-import { Meta, StoryObj } from '@storybook/react';
+import { Card } from '@components/Card';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import Carousel from '.';
+import { Carousel } from '.';
 
 const slides = [
   <Card
@@ -120,7 +120,7 @@ const slides = [
     description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga excepturi itaque in. Debitis et velit explicabo id quo repellendus architecto hic quis repellat corporis cumque dolorem officiis animi, dicta praesentium."
     href="/"
   />,
-];
+]
 
 const meta = {
   title: 'Components/Carousel',
@@ -136,7 +136,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'number' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     defaultAnimation: {
       type: { name: 'number', required: false },
@@ -146,7 +146,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'number' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     drag: {
       type: { name: 'boolean', required: false },
@@ -156,7 +156,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     dragSpeed: {
       type: { name: 'number', required: false },
@@ -166,7 +166,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'number' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     initial: {
       type: { name: 'number', required: false },
@@ -176,7 +176,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'number' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     loop: {
       type: { name: 'boolean', required: false },
@@ -186,7 +186,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     mode: {
       type: { name: 'string', required: false },
@@ -196,7 +196,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'string' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     range: {
       type: { name: 'number', required: false },
@@ -206,7 +206,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'number' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     renderMode: {
       type: { name: 'number', required: false },
@@ -216,7 +216,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'number' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     rtl: {
       type: { name: 'boolean', required: false },
@@ -226,7 +226,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     rubberband: {
       type: { name: 'boolean', required: false },
@@ -236,7 +236,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     slides: {
       type: { name: 'boolean', required: false },
@@ -246,7 +246,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     vertical: {
       type: { name: 'boolean', required: false },
@@ -256,7 +256,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     animationStarted: {
       type: { name: 'boolean', required: false },
@@ -266,7 +266,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     animationStopped: {
       type: { name: 'boolean', required: false },
@@ -276,7 +276,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     animationEnded: {
       type: { name: 'boolean', required: false },
@@ -286,7 +286,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     destroyed: {
       type: { name: 'boolean', required: false },
@@ -296,7 +296,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     detailsChanged: {
       type: { name: 'boolean', required: false },
@@ -306,7 +306,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     dragged: {
       type: { name: 'boolean', required: false },
@@ -316,7 +316,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     dragStarted: {
       type: { name: 'boolean', required: false },
@@ -326,7 +326,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     dragChecked: {
       type: { name: 'boolean', required: false },
@@ -336,7 +336,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     dragEnded: {
       type: { name: 'boolean', required: false },
@@ -346,7 +346,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     beforeOptionsChanged: {
       type: { name: 'boolean', required: false },
@@ -356,7 +356,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     optionsChanged: {
       type: { name: 'boolean', required: false },
@@ -366,7 +366,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     updated: {
       type: { name: 'boolean', required: false },
@@ -376,7 +376,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     perView: {
       type: { name: 'number', required: false },
@@ -386,7 +386,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'number' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     spacing: {
       type: { name: 'number', required: false },
@@ -396,7 +396,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'number' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     number: {
       type: { name: 'number', required: false },
@@ -406,7 +406,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'number' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     origin: {
       type: { name: 'boolean', required: false },
@@ -416,8 +416,8 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
-    },
+      }
+    }
   },
   args: {
     title: 'Card Carousel',
@@ -441,11 +441,11 @@ const meta = {
       hoverColour: 'secondary',
       hoverBgColour: 'secondary',
       wrapperBgColour: 'white',
-    },
-  },
+    }
+  }
 };
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Carousel>;
 
 export const Default: Story = {};

package/{archive → src/components}/Carousel/index.tsx

@@ -1,7 +1,13 @@
 import React, { useState } from 'react';
 
-import ComponentWrapper from '@components/ComponentWrapper';
-import Icon from '@components/Icon';
+import { ComponentWrapper } from '@components/ComponentWrapper';
+import { Icon } from '@components/Icon';
+import {
+  faChevronLeft,
+  faChevronRight,
+  faCircle,
+} from '@fortawesome/fontawesome-free-solid';
+import { type IconProp } from '@fortawesome/fontawesome-svg-core';
 import { type Colours } from '@utils/controls';
 import classNames from 'classnames';
 import 'keen-slider/keen-slider.min.css';
@@ -12,8 +18,6 @@ import {
   type KeenSliderOptions,
 } from 'keen-slider/react';
 
-
-
 interface ArrowProps {
   visible?: boolean;
   left?: boolean;
@@ -97,7 +101,7 @@ export interface Props {
   dots?: DotProps;
 }
 
-const Carousel: React.FC<Props> = ({
+export const Carousel: React.FC<Props> = ({
   id,
   className,
   slideWrapperClassName,
@@ -139,7 +143,7 @@ const Carousel: React.FC<Props> = ({
   arrows,
   dots,
 }) => {
-  const classList = classNames(className, 'theme-local');
+  const classList = className;
   const [currentSlide, setCurrentSlide] = useState(0);
   const [loaded, setLoaded] = useState(false);
 
@@ -156,16 +160,16 @@ const Carousel: React.FC<Props> = ({
           detail: {
             x: position.x,
             y: position.y,
-          },
+          }
         }),
-      );
+      )
     }
 
     function wheelStart(e: any): void {
       position = {
         x: e.pageX,
         y: e.pageY,
-      };
+      }
       dispatch(e, 'ksDragStart');
     }
 
@@ -193,7 +197,7 @@ const Carousel: React.FC<Props> = ({
     slider.on('created', () => {
       slider.container.addEventListener('wheel', eventWheel, {
         passive: true,
-      });
+      })
     });
   }
 
@@ -237,10 +241,10 @@ const Carousel: React.FC<Props> = ({
         spacing,
         origin,
         number,
-      },
+      }
     },
     [WheelControls],
-  );
+  )
 
   const onKeyDown = (e: any): void => {
     if (e.key === 'Tab') {
@@ -260,15 +264,14 @@ const Carousel: React.FC<Props> = ({
         onKeyDown={onKeyDown}
         className={classNames(
           classList,
-          arrows?.visible === true && style.visibleArrows,
-          style.classList,
-          'navigation-wrapper',
+          arrows?.visible === true && 'flex justify-between',
+          'navigation-wrapper w-full',
         )}
       >
         {arrows?.visible === true &&
           loaded &&
           instanceRef.current !== undefined && (
-            <div className={style.arrowWrapper}>
+            <div className="my-auto">
               <Arrow
                 left
                 onClick={(e: any) => {
@@ -283,9 +286,8 @@ const Carousel: React.FC<Props> = ({
         <div
           ref={sliderRef}
           className={classNames(
-            style.slideWrapper,
             slideWrapperClassName,
-            'keen-slider',
+            'keen-slider w-full pb-12 pt-4',
           )}
         >
           {slides != null && slides}
@@ -293,7 +295,7 @@ const Carousel: React.FC<Props> = ({
         {arrows?.visible === true &&
           loaded &&
           instanceRef.current !== undefined && (
-            <div className={style.arrowWrapper}>
+            <div className="my-auto">
               <Arrow
                 right
                 onClick={(e: any) => {
@@ -310,7 +312,7 @@ const Carousel: React.FC<Props> = ({
           )}
       </div>
       {dots?.visible === true && loaded && instanceRef.current != null && (
-        <div className={style.dotWrapper}>
+        <div className="my-2 flex justify-center">
           {[
             ...Array(
               instanceRef?.current?.track?.details?.slides?.length,
@@ -341,48 +343,40 @@ const Carousel: React.FC<Props> = ({
       )}
     </ComponentWrapper>
   );
-};
+}
 
-function Arrow(props: ArrowProps): JSX.Element {
+function Arrow(props: ArrowProps) {
   return (
-    <div className={style.arrowWrapper}>
+    <div className="my-auto">
       <a onClick={props?.onClick}>
         <Icon
-          type={props?.left ? 'chevron-left' : 'chevron-right'}
-          className={style.arrowIconClassList}
-          size={3}
-          rounded
-          bgColour={props?.bgColour}
+          icon={
+            props?.left
+              ? (faChevronLeft as IconProp)
+              : (faChevronRight as IconProp)
+          }
+          size="3x"
           colour={props?.colour}
-          hoverBgColour={props?.hoverBgColour}
-          hoverColour={props?.hoverColour}
         />
       </a>
     </div>
   );
 }
 
-function Dot(props: DotProps): JSX.Element {
+function Dot(props: DotProps) {
   const bg = props?.wrapperBgColour ?? 'white';
   return (
     <button
-      className={classNames(style.dotButtonClassList, style[bg])}
+      className={classNames('border-transparent py-2')}
       type="button"
       onClick={props?.onClick}
       aria-label={`carousel-button${props.id ? `-${props.id}` : ''}`}
     >
       <Icon
-        type="circle"
-        className={style.dotIconClassList}
-        size={2}
-        rounded
-        bgColour={props?.isActive ? props.hoverBgColour : props.bgColour}
+        icon={faCircle as IconProp}
+        size="2x"
         colour={props?.isActive ? props.hoverColour : props.colour}
-        hoverBgColour={props?.hoverBgColour}
-        hoverColour={props?.hoverColour}
       />
     </button>
   );
 }
-
-export default Carousel;