trepur_components 2.3.8 → 2.3.9

package/src/components/CarouselThumbnail/index.tsx

@@ -1,27 +1,31 @@
-import { ComponentWrapper } from '@components/ComponentWrapper';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
+import {
+  createContext,
+  forwardRef,
+  HTMLAttributes,
+  useContext,
+  useMemo,
+} from 'react';
+
+import clsx from 'clsx';
 import 'keen-slider/keen-slider.min.css';
 import {
   useKeenSlider,
-  type KeenSliderInstance,
-  type KeenSliderHooks,
-  type KeenSliderOptions,
+  KeenSliderInstance,
+  KeenSliderHooks,
+  KeenSliderOptions,
 } from 'keen-slider/react';
 
-export interface CarouselProps {
-  id?: string;
-  className?: string;
+import { breakpointsToRender } from './const';
+import { ThumbnailPlugin, WheelControls } from './utils';
+
+export interface CarouselThumbnailContextProps {
   slideWrapperClassName?: string;
-  title?: string;
-  description?: string;
-  bgColour?: Colours;
   breakpoints?: Record<
     string,
     Omit<KeenSliderOptions<{}, {}, KeenSliderHooks>, 'breakpoints'>
   >;
   defaultAnimation?: { duration?: number; easing?: (t: number) => number };
-  disabled: boolean;
+  disabled?: boolean;
   drag?: boolean;
   dragSpeed?: number;
   initial?: number;
@@ -64,191 +68,48 @@ export interface CarouselProps {
   origin?: number | 'auto' | 'center';
 }
 
-export const CarouselThumbnail = ({
-  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,
-}: CarouselProps) => {
-  const classList = className;
-
-  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');
-      }
+const CarouselThumbnailContext =
+  createContext<CarouselThumbnailContextProps | null>(null);
+
+const CarouselThumbnailComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & CarouselThumbnailContextProps
+>(({ children, className, ...props }, ref) => {
+  const state = useMemo(
+    () => ({
+      ...props,
+    }),
+    [props],
+  );
 
-      function addClickEvents(): void {
-        slider.slides.forEach((slide: any, idx: number) => {
-          slide.addEventListener('click', () => {
-            if (mainRef.current) mainRef.current.moveToIdx(idx);
-          })
-        });
-      }
+  return (
+    <CarouselThumbnailContext.Provider value={state}>
+      <div
+        ref={ref}
+        className={clsx('navigation-wrapper w-full', className)}
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselThumbnailContext.Provider>
+  );
+});
 
-      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 CarouselThumbnailSlides = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, children }) => {
+  const { rubberband, loop, ...props } =
+    useContext(CarouselThumbnailContext) || {};
 
   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(
     {
@@ -256,38 +117,53 @@ export const CarouselThumbnail = ({
       slides: {
         perView: 4,
         spacing: 10,
-      }
+      },
     },
     [ThumbnailPlugin(instanceRef)],
-  )
+  );
 
   return (
-    <ComponentWrapper
-      id={id}
-      className={classList}
-      title={title}
-      description={description}
-      bgColour={bgColour}
-    >
-      <div className={classNames(classList, 'navigation-wrapper w-full')}>
-        <div
-          ref={sliderRef}
-          className={classNames(
-            slideWrapperClassName,
-            'keen-slider h-96 w-full rounded-t-2xl pb-4',
-          )}
-        >
-          {slides != null && slides}
-        </div>
-        <div>
-          <div
-            ref={thumbnailRef}
-            className={'keen-slider thumbnail h-24 w-16 rounded-b-2xl'}
-          >
-            {slides != null && slides}
-          </div>
+    <>
+      <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>
-    </ComponentWrapper>
+    </>
   );
-}
+});
+
+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

@@ -1,22 +1,15 @@
-import { type StoryObj, Meta } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Checkbox } from '.';
+import { Checkbox } from './';
+import { action } from '@storybook/addon-actions';
+import { StoryObj, Meta } from '@storybook/react';
 
 const meta = {
-  title: 'Components/Checkbox',
+  title: 'V2Components/Checkbox',
   component: Checkbox,
-  argTypes: {
-    ...idAndClassName,
-    label: {
-      description: '',
-      table: {},
-    }
-  },
   args: {
-    label: '{{ label }}',
-  }
-}
+    onClick: action('clicked'),
+    children: [<Checkbox.Label>Label</Checkbox.Label>],
+  },
+} satisfies Meta<typeof Checkbox>;
 
 export default meta;
 type Story = StoryObj<typeof Checkbox>;
@@ -24,11 +17,11 @@ type Story = StoryObj<typeof Checkbox>;
 export const Checked: Story = {
   args: {
     checked: true,
-  }
-}
+  },
+};
 
 export const Unchecked: Story = {
   args: {
     checked: false,
-  }
-}
+  },
+};

package/src/components/Checkbox/index.tsx

@@ -1,41 +1,44 @@
-import React, { useState } from 'react';
+import { forwardRef, HTMLAttributes, useState } from 'react';
 
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  label: string;
-  onClick?: (label: string, isChecked: boolean) => void;
+export interface CheckboxProps {
+  label?: string;
+  onClick?: (isChecked: boolean) => void;
   checked?: boolean;
 }
 
-export const Checkbox = ({ id, label, onClick, checked = false }: Props) => {
+const CheckboxComponent = forwardRef<
+  HTMLLabelElement,
+  HTMLAttributes<HTMLLabelElement> & CheckboxProps
+>(({ children, checked, onClick }, ref) => {
   const [isChecked, setIsChecked] = useState(checked);
-
-  const classList = 'checkbox-wrapper';
-  const checkBoxClassList = classNames(
-    {
-      'bg-facebook': isChecked,
-    },
-    'h-6 w-6 appearance-none rounded border-2 hover:cursor-pointer',
-  )
-
   return (
-    <div id={id} className={classList}>
-      <label className="flex  hover:cursor-pointer">
-        <input
-          className={checkBoxClassList}
-          onChange={() => {
-            setIsChecked(!isChecked);
-          }}
-          onClick={() => {
-            onClick?.(label, !isChecked);
-          }}
-          type="checkbox"
-          checked={isChecked}
-        />
-        <span className="my-auto px-2">{label}</span>
-      </label>
-    </div>
+    <label ref={ref} className="flex items-center gap-4 hover:cursor-pointer">
+      <input
+        className="h-6 w-6 rounded border-2"
+        onChange={() => {
+          setIsChecked(!isChecked);
+        }}
+        onClick={() => onClick?.(!isChecked)}
+        type="checkbox"
+        checked={isChecked}
+      />
+      {children}
+    </label>
   );
-}
+});
+
+const CheckboxLabel = forwardRef<
+  HTMLSpanElement,
+  HTMLAttributes<HTMLSpanElement> & CheckboxProps
+>(({ children }, ref) => {
+  return <span ref={ref}>{children}</span>;
+});
+
+CheckboxComponent.displayName = 'Checkbox';
+CheckboxLabel.displayName = 'Checkbox.Label';
+
+const Checkbox = Object.assign(CheckboxComponent, {
+  Label: CheckboxLabel,
+});
+
+export { Checkbox };

package/src/components/Collapsible/Collapsible.stories.tsx

@@ -1,64 +1,64 @@
-import { Meta, type StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
 import { Collapsible } from '.';
 
 const meta = {
-  title: 'Components/Collapsible',
+  title: 'V2Components/Collapsible',
   component: Collapsible,
   parameters: {},
   argTypes: {
     ...idAndClassName,
-
-    preText: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    title: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    subtitle: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      }
-    },
-    children: {
-      description: '',
-      control: 'array',
-      table: {
-        category: '',
-      }
-    }
   },
   args: {
-    preText: 'this is some text',
-    title: 'Sheffield Hallam University',
-    subtitle: 'This is a subtitle',
-    imageProps: {
-      src: 'https://picsum.photos/500/300',
-    },
-    children: (
-      <p>
-        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, unde
-        perferendis quibusdam eos repellendus vero rerum sunt reiciendis velit
-        autem odio, fuga molestiae perspiciatis dolor voluptatum mollitia quos
-        ipsa! Doloribus? Lorem ipsum, dolor sit amet consectetur adipisicing
-        elit. Reiciendis ducimus, dolorum tempore unde earum aspernatur placeat
-        magnam, alias neque, blanditiis esse tenetur dignissimos in optio nihil
-        libero cum cupiditate debitis?
-      </p>
-    ),
-  }
-}
+    children: [
+      <Collapsible.Header>
+        <Collapsible.Image src="https://picsum.photos/500/300" />
+        <Collapsible.HeaderContent>
+          <Collapsible.Label>This is a label</Collapsible.Label>
+          <Collapsible.Title>This is a title</Collapsible.Title>
+          <Collapsible.Subtitle>This is a subtitle</Collapsible.Subtitle>
+        </Collapsible.HeaderContent>
+      </Collapsible.Header>,
+      <Collapsible.Content>
+        <Collapsible.Text>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi,
+          nesciunt. Accusamus earum dolorum est, error dolor ipsam, consequatur
+          id corrupti atque nesciunt velit nam quibusdam voluptatem animi iusto,
+          numquam eaque! Lorem ipsum dolor sit amet consectetur adipisicing
+          elit. Nisi, nesciunt. Accusamus earum dolorum est, error dolor ipsam,
+          consequatur id corrupti atque nesciunt velit nam quibusdam voluptatem
+          animi iusto, numquam eaque! Lorem ipsum dolor sit amet consectetur
+          adipisicing elit. Nisi, nesciunt. Accusamus earum dolorum est, error
+          dolor ipsam, consequatur id corrupti atque nesciunt velit nam
+          quibusdam voluptatem animi iusto, numquam eaque! Lorem ipsum dolor sit
+          amet consectetur adipisicing elit. Nisi, nesciunt. Accusamus earum
+          dolorum est, error dolor ipsam, consequatur id corrupti atque nesciunt
+          velit nam quibusdam voluptatem animi iusto, numquam eaque! Lorem ipsum
+          dolor sit amet consectetur adipisicing elit. Nisi, nesciunt. Accusamus
+          earum dolorum est, error dolor ipsam, consequatur id corrupti atque
+          nesciunt velit nam quibusdam voluptatem animi iusto, numquam eaque!
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi,
+          nesciunt. Accusamus earum dolorum est, error dolor ipsam, consequatur
+          id corrupti atque nesciunt velit nam quibusdam voluptatem animi iusto,
+          numquam eaque! Lorem ipsum dolor sit amet consectetur adipisicing
+          elit. Nisi, nesciunt. Accusamus earum dolorum est, error dolor ipsam,
+          consequatur id corrupti atque nesciunt velit nam quibusdam voluptatem
+          animi iusto, numquam eaque! Lorem ipsum dolor sit amet consectetur
+          adipisicing elit. Nisi, nesciunt. Accusamus earum dolorum est, error
+          dolor ipsam, consequatur id corrupti atque nesciunt velit nam
+          quibusdam voluptatem animi iusto, numquam eaque! Lorem ipsum dolor sit
+          amet consectetur adipisicing elit. Nisi, nesciunt. Accusamus earum
+          dolorum est, error dolor ipsam, consequatur id corrupti atque nesciunt
+          velit nam quibusdam voluptatem animi iusto, numquam eaque! Lorem ipsum
+          dolor sit amet consectetur adipisicing elit. Nisi, nesciunt. Accusamus
+          earum dolorum est, error dolor ipsam, consequatur id corrupti atque
+          nesciunt velit nam quibusdam voluptatem animi iusto, numquam eaque!
+        </Collapsible.Text>
+      </Collapsible.Content>,
+    ],
+  },
+} satisfies Meta<typeof Collapsible>;
 
 export default meta;