trepur_components 2.3.7 → 2.3.9

package/archive/CarouselThumbnail/CarouselThumbnail.stories.tsx

@@ -1,350 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import CarouselThumbnail from '.';
-
-const slides = [
-  <img
-    key={1}
-    className="keen-slider__slide number-slide1"
-    src="https://picsum.photos/500/300"
-  />,
-  <img
-    key={2}
-    className="keen-slider__slide number-slide2"
-    src="https://picsum.photos/500/301"
-  />,
-  <img
-    key={3}
-    className="keen-slider__slide number-slide3"
-    src="https://picsum.photos/500/302"
-  />,
-  <img
-    key={4}
-    className="keen-slider__slide number-slide4"
-    src="https://picsum.photos/500/303"
-  />,
-  <img
-    key={5}
-    className="keen-slider__slide number-slide5"
-    src="https://picsum.photos/500/304"
-  />,
-  <img
-    key={6}
-    className="keen-slider__slide number-slide6"
-    src="https://picsum.photos/500/30"
-  />,
-];
-
-const meta = {
-  title: 'Components/CarouselThumbnail',
-  component: CarouselThumbnail,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    breakpoints: {
-      type: { name: 'number', required: false },
-      description: 'The slide to begin on',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    defaultAnimation: {
-      type: { name: 'number', required: false },
-      description: 'The slide to begin on',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    drag: {
-      type: { name: 'boolean', required: false },
-      description: 'Can the carousel be dragged or not',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    dragSpeed: {
-      type: { name: 'number', required: false },
-      description: 'The slide to begin on',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    initial: {
-      type: { name: 'number', required: false },
-      description: 'The slide to begin on',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    loop: {
-      type: { name: 'boolean', required: false },
-      description: 'loop the end back to the start',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    mode: {
-      type: { name: 'string', required: false },
-      description: 'snap, free or snap-free',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    range: {
-      type: { name: 'number', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    renderMode: {
-      type: { name: 'number', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    rtl: {
-      type: { name: 'boolean', required: false },
-      description: 'to display right to left',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    rubberband: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    slides: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    vertical: {
-      type: { name: 'boolean', required: false },
-      description: 'displays the slider vertically',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    animationStarted: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    animationStopped: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    animationEnded: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    destroyed: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    detailsChanged: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    dragged: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    dragStarted: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    dragChecked: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    dragEnded: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    beforeOptionsChanged: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    optionsChanged: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    updated: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    perView: {
-      type: { name: 'number', required: false },
-      description: 'The number of slides to show at a time',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    spacing: {
-      type: { name: 'number', required: false },
-      description: 'The spacing left and right of each slide',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    number: {
-      type: { name: 'number', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    origin: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-  },
-  args: {
-    title: 'Card Carousel',
-    description: 'what do you think to this?',
-    loop: true,
-    drag: true,
-    slides,
-    spacing: 16,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/CarouselThumbnail/index.tsx

@@ -1,302 +0,0 @@
-import React from 'react';
-
-import ComponentWrapper from '@components/ComponentWrapper';
-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';
-
-
-
-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;
-  spacing?: number;
-  number?: number;
-  origin?: number | 'auto' | 'center';
-}
-
-const CarouselThumbnail: 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,
-  spacing,
-  number,
-  origin,
-}) => {
-  const classList = classNames(className, 'theme-local');
-
-  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,
-      });
-    });
-  }
-
-  function ThumbnailPlugin(mainRef: any) {
-    return (slider: any) => {
-      function removeActive(): void {
-        slider.slides.forEach((slide: any) => {
-          slide.classList.remove('active');
-        });
-      }
-
-      function addActive(idx: number): void {
-        slider.slides[idx].classList.add('active');
-      }
-
-      function addClickEvents(): void {
-        slider.slides.forEach((slide: any, idx: number) => {
-          slide.addEventListener('click', () => {
-            if (mainRef.current) mainRef.current.moveToIdx(idx);
-          });
-        });
-      }
-
-      slider.on('created', () => {
-        if (!mainRef.current) return;
-        addActive(slider.track.details.rel);
-        addClickEvents();
-        mainRef.current.on('animationStarted', (main: any) => {
-          removeActive();
-          const next = main.animator.targetIdx || 0;
-          addActive(main.track.absToRel(next));
-          slider.moveToIdx(Math.min(slider.track.details.maxIdx, next));
-        });
-      });
-    };
-  }
-
-  const breakpointsToRender: any = {
-    '(min-width: 320px)': {
-      slides: { perView: 1, spacing: 25 },
-    },
-    '(max-width: 500px)': {
-      slides: { perView: 1, spacing: 25 },
-    },
-    '(min-width: 768px)': {
-      slides: { perView: 1, spacing: 25 },
-    },
-    '(min-width: 1024px)': {
-      slides: { perView: 2, spacing: 20 },
-    },
-    '(min-width: 1280px)': {
-      slides: { perView: 2, spacing: 10 },
-    },
-  };
-
-  const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>(
-    {
-      initial,
-      breakpoints: breakpointsToRender,
-      defaultAnimation,
-      disabled,
-      drag,
-      dragSpeed,
-      loop,
-      mode,
-      range,
-      renderMode,
-      rtl,
-      rubberband,
-      vertical,
-      slideChanged() {},
-      // slideChanged: slideChanged,
-      // created: created,
-      animationStarted,
-      animationStopped,
-      animationEnded,
-      destroyed,
-      detailsChanged,
-      dragged,
-      dragStarted,
-      dragChecked,
-      dragEnded,
-      beforeOptionsChanged,
-      optionsChanged,
-      updated,
-      slides: {
-        spacing,
-        origin,
-        number,
-      },
-    },
-    [WheelControls],
-  );
-
-  const [thumbnailRef] = useKeenSlider(
-    {
-      initial: 0,
-      slides: {
-        perView: 4,
-        spacing: 10,
-      },
-    },
-    [ThumbnailPlugin(instanceRef)],
-  );
-
-  return (
-    <ComponentWrapper
-      id={id}
-      className={classList}
-      title={title}
-      description={description}
-      bgColour={bgColour}
-    >
-      <div
-        className={classNames(classList, style.classList, 'navigation-wrapper')}
-      >
-        <div
-          ref={sliderRef}
-          className={classNames(
-            style.slideWrapper,
-            slideWrapperClassName,
-            'keen-slider',
-          )}
-        >
-          {slides != null && slides}
-        </div>
-        <div className={style.thumbnailWrapper}>
-          <div
-            ref={thumbnailRef}
-            className={`keen-slider thumbnail ${style.thumbnail}`}
-          >
-            {slides != null && slides}
-          </div>
-        </div>
-      </div>
-    </ComponentWrapper>
-  );
-};
-
-export default CarouselThumbnail;

package/archive/CarouselThumbnail/style.module.css

@@ -1,67 +0,0 @@
-.classList {
-  @apply w-full;
-}
-
-.slideWrapper {
-  @apply h-96 w-full rounded-t-2xl pb-4;
-}
-
-.thumbnail {
-  @apply h-24 w-16 rounded-b-2xl;
-}
-
-.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;
-}