trepur_components 2.3.7 → 2.3.9

package/archive/Carousel/index.tsx

@@ -1,388 +0,0 @@
-import React, { useState } from 'react';
-
-import ComponentWrapper from '@components/ComponentWrapper';
-import Icon from '@components/Icon';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-import 'keen-slider/keen-slider.min.css';
-import {
-  useKeenSlider,
-  type KeenSliderInstance,
-  type KeenSliderHooks,
-  type KeenSliderOptions,
-} from 'keen-slider/react';
-
-
-
-interface ArrowProps {
-  visible?: boolean;
-  left?: boolean;
-  right?: boolean;
-  disabled?: boolean;
-  onClick?: any;
-  colour?: Colours;
-  bgColour?: Colours;
-  hoverColour?: Colours;
-  hoverBgColour?: Colours;
-}
-
-interface DotProps {
-  id?: string;
-  isActive?: boolean;
-  visible?: boolean;
-  onClick?: any;
-  colour?: Colours;
-  bgColour?: Colours;
-  hoverColour?: Colours;
-  hoverBgColour?: Colours;
-
-  wrapperBgColour: Colours;
-}
-
-export interface Props {
-  id?: string;
-  className?: string;
-  slideWrapperClassName?: string;
-  title?: string;
-  description?: string;
-  bgColour?: Colours;
-  breakpoints?: Record<
-    string,
-    Omit<KeenSliderOptions<{}, {}, KeenSliderHooks>, 'breakpoints'>
-  >;
-  defaultAnimation?: { duration?: number; easing?: (t: number) => number };
-  disabled: boolean;
-  drag?: boolean;
-  dragSpeed?: number;
-  initial?: number;
-  loop?: boolean;
-  mode?: 'snap' | 'free' | 'free-snap';
-  range?: { align?: boolean; min?: number; max?: number };
-  renderMode?: 'precision' | 'performance' | 'custom';
-  rtl?: boolean;
-  rubberband?: boolean;
-  slides?: any[];
-  vertical?: boolean;
-  animationStarted?: (
-    slider: KeenSliderInstance<{}, {}, KeenSliderHooks>,
-  ) => void;
-  animationStopped?: (
-    slider: KeenSliderInstance<{}, {}, KeenSliderHooks>,
-  ) => void;
-  animationEnded?: (
-    slider: KeenSliderInstance<{}, {}, KeenSliderHooks>,
-  ) => void;
-  created?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
-  destroyed?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
-  detailsChanged?: (
-    slider: KeenSliderInstance<{}, {}, KeenSliderHooks>,
-  ) => void;
-  dragged?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
-  dragStarted?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
-  dragChecked?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
-  dragEnded?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
-  beforeOptionsChanged?: (
-    slider: KeenSliderInstance<{}, {}, KeenSliderHooks>,
-  ) => void;
-  optionsChanged?: (
-    slider: KeenSliderInstance<{}, {}, KeenSliderHooks>,
-  ) => void;
-  slideChanged?: boolean;
-  updated?: (slider: KeenSliderInstance<{}, {}, KeenSliderHooks>) => void;
-  perView?: number;
-  spacing?: number;
-  number?: number;
-  origin?: number | 'auto' | 'center';
-  arrows?: ArrowProps;
-  dots?: DotProps;
-}
-
-const Carousel: React.FC<Props> = ({
-  id,
-  className,
-  slideWrapperClassName,
-  title,
-  description,
-  bgColour,
-  breakpoints,
-  defaultAnimation,
-  disabled,
-  drag,
-  dragSpeed,
-  initial,
-  loop = true,
-  mode = 'snap',
-  range,
-  renderMode,
-  rtl,
-  rubberband,
-  slides,
-  vertical,
-  animationStarted,
-  animationStopped,
-  animationEnded,
-  created,
-  destroyed,
-  detailsChanged,
-  dragged,
-  dragStarted,
-  dragChecked,
-  dragEnded,
-  beforeOptionsChanged,
-  optionsChanged,
-  slideChanged,
-  updated,
-  perView = 1,
-  spacing,
-  number,
-  origin,
-  arrows,
-  dots,
-}) => {
-  const classList = classNames(className, 'theme-local');
-  const [currentSlide, setCurrentSlide] = useState(0);
-  const [loaded, setLoaded] = useState(false);
-
-  function WheelControls(slider: any): void {
-    let touchTimeout: any;
-    let position: any;
-    let wheelActive: boolean;
-
-    function dispatch(e: any, name: string): void {
-      position.x -= e.deltaX;
-      position.y -= e.deltaY;
-      slider.container.dispatchEvent(
-        new CustomEvent(name, {
-          detail: {
-            x: position.x,
-            y: position.y,
-          },
-        }),
-      );
-    }
-
-    function wheelStart(e: any): void {
-      position = {
-        x: e.pageX,
-        y: e.pageY,
-      };
-      dispatch(e, 'ksDragStart');
-    }
-
-    function wheel(e: any): void {
-      dispatch(e, 'ksDrag');
-    }
-
-    function wheelEnd(e: any): void {
-      dispatch(e, 'ksDragEnd');
-    }
-
-    function eventWheel(e: any): void {
-      if (!wheelActive) {
-        wheelStart(e);
-        wheelActive = true;
-      }
-      wheel(e);
-      clearTimeout(touchTimeout);
-      touchTimeout = setTimeout(() => {
-        wheelActive = false;
-        wheelEnd(e);
-      }, 50);
-    }
-
-    slider.on('created', () => {
-      slider.container.addEventListener('wheel', eventWheel, {
-        passive: true,
-      });
-    });
-  }
-
-  const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>(
-    {
-      initial,
-      breakpoints,
-      defaultAnimation,
-      disabled,
-      drag,
-      dragSpeed,
-      loop,
-      mode,
-      range,
-      renderMode,
-      rtl,
-      rubberband,
-      vertical,
-      slideChanged(slider) {
-        setCurrentSlide(slider.track.details.rel);
-      },
-      // slideChanged: slideChanged,
-      created() {
-        setLoaded(true);
-      },
-      // created: created,
-      animationStarted,
-      animationStopped,
-      animationEnded,
-      destroyed,
-      detailsChanged,
-      dragged,
-      dragStarted,
-      dragChecked,
-      dragEnded,
-      beforeOptionsChanged,
-      optionsChanged,
-      updated,
-      slides: {
-        perView,
-        spacing,
-        origin,
-        number,
-      },
-    },
-    [WheelControls],
-  );
-
-  const onKeyDown = (e: any): void => {
-    if (e.key === 'Tab') {
-      instanceRef.current?.next();
-    }
-  };
-
-  return (
-    <ComponentWrapper
-      id={id}
-      className={classList}
-      title={title}
-      description={description}
-      bgColour={bgColour}
-    >
-      <div
-        onKeyDown={onKeyDown}
-        className={classNames(
-          classList,
-          arrows?.visible === true && style.visibleArrows,
-          style.classList,
-          'navigation-wrapper',
-        )}
-      >
-        {arrows?.visible === true &&
-          loaded &&
-          instanceRef.current !== undefined && (
-            <div className={style.arrowWrapper}>
-              <Arrow
-                left
-                onClick={(e: any) => {
-                  e.stopPropagation() !== undefined ||
-                    instanceRef.current?.prev();
-                }}
-                disabled={currentSlide === 0}
-                {...arrows}
-              />
-            </div>
-          )}
-        <div
-          ref={sliderRef}
-          className={classNames(
-            style.slideWrapper,
-            slideWrapperClassName,
-            'keen-slider',
-          )}
-        >
-          {slides != null && slides}
-        </div>
-        {arrows?.visible === true &&
-          loaded &&
-          instanceRef.current !== undefined && (
-            <div className={style.arrowWrapper}>
-              <Arrow
-                right
-                onClick={(e: any) => {
-                  e.stopPropagation() !== undefined ||
-                    instanceRef.current?.next();
-                }}
-                disabled={
-                  currentSlide ===
-                  instanceRef?.current?.track?.details?.slides?.length
-                }
-                {...arrows}
-              />
-            </div>
-          )}
-      </div>
-      {dots?.visible === true && loaded && instanceRef.current != null && (
-        <div className={style.dotWrapper}>
-          {[
-            ...Array(
-              instanceRef?.current?.track?.details?.slides?.length,
-            ).keys(),
-          ].map((idx, i) => {
-            const numberOfSlides =
-              instanceRef?.current?.track?.details?.slides?.length ?? 1;
-            return (
-              <Dot
-                key={`dot_${i}`}
-                isActive={
-                  !loop
-                    ? currentSlide === idx
-                    : currentSlide + perView <= numberOfSlides
-                      ? idx >= currentSlide && idx < currentSlide + perView
-                      : idx >= currentSlide ||
-                        currentSlide + perView - numberOfSlides - 1 >= idx
-                }
-                onClick={() => {
-                  instanceRef.current?.moveToIdx(idx);
-                }}
-                {...dots}
-                wrapperBgColour={bgColour ?? 'white'}
-              />
-            );
-          })}
-        </div>
-      )}
-    </ComponentWrapper>
-  );
-};
-
-function Arrow(props: ArrowProps): JSX.Element {
-  return (
-    <div className={style.arrowWrapper}>
-      <a onClick={props?.onClick}>
-        <Icon
-          type={props?.left ? 'chevron-left' : 'chevron-right'}
-          className={style.arrowIconClassList}
-          size={3}
-          rounded
-          bgColour={props?.bgColour}
-          colour={props?.colour}
-          hoverBgColour={props?.hoverBgColour}
-          hoverColour={props?.hoverColour}
-        />
-      </a>
-    </div>
-  );
-}
-
-function Dot(props: DotProps): JSX.Element {
-  const bg = props?.wrapperBgColour ?? 'white';
-  return (
-    <button
-      className={classNames(style.dotButtonClassList, style[bg])}
-      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}
-        colour={props?.isActive ? props.hoverColour : props.colour}
-        hoverBgColour={props?.hoverBgColour}
-        hoverColour={props?.hoverColour}
-      />
-    </button>
-  );
-}
-
-export default Carousel;

package/archive/Carousel/style.module.css

@@ -1,99 +0,0 @@
-.classList {
-  @apply w-full;
-}
-
-.visibleArrows {
-  @apply flex justify-between;
-}
-
-.slideWrapper {
-  @apply w-full pb-12 pt-4;
-}
-
-.dotWrapper {
-  @apply my-2 flex justify-center;
-}
-
-.dotButtonClassList {
-  @apply border-transparent py-2;
-}
-
-.dotButtonClassList:focus {
-  @apply border border-2;
-}
-
-.dotIconClassList {
-  @apply mx-1;
-}
-
-.dotIconClassList:hover {
-  @apply cursor-pointer;
-}
-
-.arrowWrapper {
-  @apply my-auto;
-}
-
-.arrowIconClassList {
-  @apply mx-auto;
-}
-
-.arrowIconClassList:hover {
-  @apply cursor-pointer;
-}
-
-.primary {
-  @apply border-white;
-}
-
-.white {
-  @apply border-primary;
-}
-
-.grey {
-  @apply border-primary;
-}
-
-.gold {
-  @apply border-primary;
-}
-
-.facebook {
-  @apply border-white;
-}
-
-.linkedin {
-  @apply border-white;
-}
-
-.email {
-  @apply border-white;
-}
-
-.instagram {
-  @apply border-primary;
-}
-
-.github {
-  @apply border-white;
-}
-
-.interactive-facebook {
-  @apply border-primary;
-}
-
-.interactive-email {
-  @apply border-primary;
-}
-
-.interactive-linkedin {
-  @apply border-primary;
-}
-
-.interactive-instagram {
-  @apply border-primary;
-}
-
-.interactive-github {
-  @apply border-primary;
-}