trepur_components 2.3.3 → 2.3.5

package/archive/CarouselThumbnail/CarouselThumbnail.stories.tsx

@@ -0,0 +1,350 @@
+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

@@ -0,0 +1,302 @@
+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

@@ -0,0 +1,67 @@
+.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;
+}