trepur_components 2.3.7 → 2.3.9

package/src/components/Carousel/index.tsx

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

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

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

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

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

@@ -0,0 +1,87 @@
+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.stories.tsx

@@ -0,0 +1,27 @@
+import { Checkbox } from './';
+import { action } from '@storybook/addon-actions';
+import { StoryObj, Meta } from '@storybook/react';
+
+const meta = {
+  title: 'V2Components/Checkbox',
+  component: Checkbox,
+  args: {
+    onClick: action('clicked'),
+    children: [<Checkbox.Label>Label</Checkbox.Label>],
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+  },
+};
+
+export const Unchecked: Story = {
+  args: {
+    checked: false,
+  },
+};