trepur_components 2.3.9 → 2.3.10

package/src/components/Carousel/index.tsx

@@ -1,301 +0,0 @@
-import {
-  createContext,
-  forwardRef,
-  HTMLAttributes,
-  useContext,
-  useMemo,
-  useState,
-} from 'react';
-
-import { Icon } from '@components/Icon';
-import {
-  faChevronLeft,
-  faChevronRight,
-  faCircle,
-} from '@fortawesome/fontawesome-free-solid';
-import { Colours } from '@utils/controls';
-import clsx from 'clsx';
-import 'keen-slider/keen-slider.min.css';
-import {
-  useKeenSlider,
-  KeenSliderInstance,
-  KeenSliderHooks,
-  KeenSliderOptions,
-} from 'keen-slider/react';
-
-import { WheelControls } from './utils';
-
-export interface ArrowProps {
-  rightArrow?: boolean;
-  visible?: boolean;
-  disabled?: boolean;
-  onClick?: any;
-}
-
-export interface DotProps {
-  isActive?: boolean;
-  visible?: boolean;
-  onClick?: any;
-}
-
-export interface CarouselContextProps {
-  sliderRef?: any;
-  instanceRef?: any;
-  currentSlide?: number;
-  slideWrapperClassName?: string;
-  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 CarouselContext = createContext<CarouselContextProps | null>(null);
-
-const CarouselComponent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement> & CarouselContextProps
->(
-  (
-    {
-      breakpoints,
-      children,
-      className,
-      loop,
-      perView,
-      rubberband,
-      spacing,
-      ...props
-    },
-    ref,
-  ) => {
-    const [currentSlide, setCurrentSlide] = useState(1);
-    const [loaded, setLoaded] = useState(false);
-    const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>(
-      {
-        breakpoints,
-        loop,
-        rubberband,
-        slideChanged(slider) {
-          setCurrentSlide(slider.track.details.rel);
-        },
-        created() {
-          setLoaded(true);
-        },
-        slides: {
-          spacing,
-          perView,
-        },
-      },
-      [WheelControls],
-    );
-
-    const state = useMemo(
-      () => ({
-        sliderRef,
-        instanceRef,
-        currentSlide,
-        setCurrentSlide,
-        perView,
-        ...props,
-      }),
-      [
-        props,
-        sliderRef,
-        instanceRef.current,
-        currentSlide,
-        setCurrentSlide,
-        perView,
-        loaded,
-      ],
-    );
-
-    const onKeyDown = (e: any): void => {
-      if (e.key === 'Tab') {
-        instanceRef.current?.next();
-      }
-    };
-
-    return (
-      <CarouselContext.Provider value={state}>
-        <div
-          onKeyDown={onKeyDown}
-          className={clsx('navigation-wrapper w-full', className)}
-          ref={ref}
-          {...props}
-        >
-          {children}
-        </div>
-      </CarouselContext.Provider>
-    );
-  },
-);
-
-const CarouselContent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ children, className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={clsx(
-        'navigation-wrapper flex w-full justify-between gap-4',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
-
-const CarouselSlides = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement> & { rightArrow?: boolean }
->(({ className, children, rightArrow = false, ...props }) => {
-  const { sliderRef } = useContext(CarouselContext) || {};
-  return (
-    <div
-      ref={sliderRef}
-      className={clsx('keen-slider w-full pb-4', className)}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
-
-const CarouselArrow = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement> & ArrowProps
->(({ className, children, rightArrow = false, ...props }, ref) => {
-  const { instanceRef } = useContext(CarouselContext) || {};
-  return (
-    <div
-      ref={ref}
-      className={clsx(
-        'my-auto text-carousel-arrow-default hover:cursor-pointer hover:text-carousel-arrow-hover',
-        className,
-      )}
-      onClick={(e: any) => {
-        rightArrow
-          ? e.stopPropagation() !== undefined || instanceRef.current?.next()
-          : e.stopPropagation() !== undefined || instanceRef.current?.prev();
-      }}
-      {...props}
-    >
-      <a>
-        <Icon icon={rightArrow ? faChevronRight : faChevronLeft} size="3x" />
-      </a>
-    </div>
-  );
-});
-
-const CarouselDots = forwardRef<
-  HTMLButtonElement,
-  HTMLAttributes<HTMLButtonElement> & DotProps
->(({ className, children, onClick, ...props }, ref) => {
-  const {
-    instanceRef,
-    loop,
-    currentSlide = 1,
-    perView = 1,
-  } = useContext(CarouselContext) || {};
-  const length = instanceRef?.current?.track?.details?.slides?.length;
-  return (
-    <div className="flex justify-center">
-      {[...Array(length).keys()].map((idx) => {
-        const numberOfSlides =
-          instanceRef?.current?.track?.details?.slides?.length ?? 1;
-
-        const isActive = !loop
-          ? currentSlide === idx
-          : currentSlide + perView <= numberOfSlides
-            ? idx >= currentSlide && idx < currentSlide + perView
-            : idx >= currentSlide ||
-              currentSlide + perView - numberOfSlides - 1 >= idx;
-
-        return (
-          <button
-            ref={ref}
-            type="button"
-            onClick={() => {
-              instanceRef.current?.moveToIdx(idx);
-            }}
-            aria-label={`carousel-button${props.id ? `-${props.id}` : ''}`}
-          >
-            <Icon
-              className={clsx(
-                'hover:text-carousel-dots-hover',
-                isActive
-                  ? 'text-carousel-dots-active'
-                  : 'text-carousel-dots-default',
-              )}
-              icon={faCircle}
-              size="2x"
-            />
-          </button>
-        );
-      })}
-    </div>
-  );
-});
-
-CarouselComponent.displayName = 'Carousel';
-CarouselContent.displayName = 'Carousel.Content';
-CarouselArrow.displayName = 'Carousel.Arrow';
-CarouselDots.displayName = 'Carousel.Dots';
-CarouselSlides.displayName = 'Carousel.Slides';
-
-const Carousel = Object.assign(CarouselComponent, {
-  Content: CarouselContent,
-  Arrow: CarouselArrow,
-  Dots: CarouselDots,
-  Slides: CarouselSlides,
-});
-
-export { Carousel };

package/src/components/Carousel/utils.ts

@@ -1,53 +0,0 @@
-export 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,
-    });
-  });
-}

package/src/components/CarouselThumbnail/CarouselThumbnail.stories.tsx

@@ -1,29 +0,0 @@
-import { CarouselThumbnail } from './';
-import { Meta, StoryObj } from '@storybook/react';
-
-const meta = {
-  title: 'V2Components/CarouselThumbnail',
-  component: CarouselThumbnail,
-  args: {
-    children: [
-      <CarouselThumbnail.Slides>
-        <CarouselThumbnail.Slide src="https://picsum.photos/500/500" />
-        <CarouselThumbnail.Slide src="https://picsum.photos/501/500" />
-        <CarouselThumbnail.Slide src="https://picsum.photos/502/500" />
-        <CarouselThumbnail.Slide src="https://picsum.photos/503/500" />
-        <CarouselThumbnail.Slide src="https://picsum.photos/504/500" />
-        <CarouselThumbnail.Slide src="https://picsum.photos/505/500" />
-      </CarouselThumbnail.Slides>,
-    ],
-    loop: true,
-    drag: true,
-    rubberband: true,
-    spacing: 16,
-  },
-} satisfies Meta<typeof CarouselThumbnail>;
-
-export default meta;
-
-type Story = StoryObj<typeof CarouselThumbnail>;
-
-export const Default: Story = {};

package/src/components/CarouselThumbnail/const.ts

@@ -1,17 +0,0 @@
-export 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 },
-  },
-};

package/src/components/CarouselThumbnail/index.tsx

@@ -1,169 +0,0 @@
-import {
-  createContext,
-  forwardRef,
-  HTMLAttributes,
-  useContext,
-  useMemo,
-} from 'react';
-
-import clsx from 'clsx';
-import 'keen-slider/keen-slider.min.css';
-import {
-  useKeenSlider,
-  KeenSliderInstance,
-  KeenSliderHooks,
-  KeenSliderOptions,
-} from 'keen-slider/react';
-
-import { breakpointsToRender } from './const';
-import { ThumbnailPlugin, WheelControls } from './utils';
-
-export interface CarouselThumbnailContextProps {
-  slideWrapperClassName?: string;
-  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 CarouselThumbnailContext =
-  createContext<CarouselThumbnailContextProps | null>(null);
-
-const CarouselThumbnailComponent = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement> & CarouselThumbnailContextProps
->(({ children, className, ...props }, ref) => {
-  const state = useMemo(
-    () => ({
-      ...props,
-    }),
-    [props],
-  );
-
-  return (
-    <CarouselThumbnailContext.Provider value={state}>
-      <div
-        ref={ref}
-        className={clsx('navigation-wrapper w-full', className)}
-        {...props}
-      >
-        {children}
-      </div>
-    </CarouselThumbnailContext.Provider>
-  );
-});
-
-const CarouselThumbnailSlides = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ className, children }) => {
-  const { rubberband, loop, ...props } =
-    useContext(CarouselThumbnailContext) || {};
-
-  const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>(
-    {
-      breakpoints: breakpointsToRender,
-      loop,
-      rubberband,
-    },
-    [WheelControls],
-  );
-
-  const [thumbnailRef] = useKeenSlider(
-    {
-      initial: 0,
-      slides: {
-        perView: 4,
-        spacing: 10,
-      },
-    },
-    [ThumbnailPlugin(instanceRef)],
-  );
-
-  return (
-    <>
-      <div
-        ref={sliderRef}
-        className={clsx(
-          'keen-slider h-96 w-full rounded-t-2xl pb-4',
-          className,
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-      <div>
-        <div ref={thumbnailRef} className={'keen-slider thumbnail h-24 w-16'}>
-          {children}
-        </div>
-      </div>
-    </>
-  );
-});
-
-const CarouselThumbnailSlide = forwardRef<
-  HTMLImageElement,
-  HTMLAttributes<HTMLImageElement> & { src: string }
->(({ src, ...props }) => {
-  return (
-    <img
-      className={`keen-slider__slide rounded-t-2xl object-cover`}
-      src={src}
-      {...props}
-    />
-  );
-});
-
-CarouselThumbnailComponent.displayName = 'CarouselThumbnail';
-CarouselThumbnailSlides.displayName = 'CarouselThumbnail.Slides';
-
-CarouselThumbnailSlide.displayName = 'CarouselThumbnail.Slide';
-
-const CarouselThumbnail = Object.assign(CarouselThumbnailComponent, {
-  Slides: CarouselThumbnailSlides,
-  Slide: CarouselThumbnailSlide,
-});
-
-export { CarouselThumbnail };

package/src/components/CarouselThumbnail/utils.ts

@@ -1,87 +0,0 @@
-export 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,
-    });
-  });
-}
-
-export 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));
-      });
-    });
-  };
-}

package/src/components/Checkbox/Checkbox.mdx

@@ -1,33 +0,0 @@
-{/* Checkbox.mdx */}
-
-import { Meta, Primary, Controls, Story } from '@storybook/blocks';
-
-import * as CheckboxStories from './Checkbox.stories';
-
-<Meta of={CheckboxStories} />
-
-# Checkbox
-
-A checkbox is an interactive component with and optional label.
-
-It is able to display two states to the end user.
-
-The state of the checkbox can toggled by clicking on the component.
-
-<Primary />
-
-## Props
-
-<Controls />
-
-## Variants
-
-A checkbox can exist in two different states:
-
-### Checked
-
-<Story of={CheckboxStories.Checked} />
-
-### Unchecked
-
-<Story of={CheckboxStories.Unchecked} />