trepur_components 2.3.7 → 2.3.8

package/{archive → src/components}/CarouselThumbnail/CarouselThumbnail.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import CarouselThumbnail from '.';
+import { CarouselThumbnail } from '.';
 
 const slides = [
   <img
@@ -34,7 +34,7 @@ const slides = [
     className="keen-slider__slide number-slide6"
     src="https://picsum.photos/500/30"
   />,
-];
+]
 
 const meta = {
   title: 'Components/CarouselThumbnail',
@@ -50,7 +50,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'number' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     defaultAnimation: {
       type: { name: 'number', required: false },
@@ -60,7 +60,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'number' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     drag: {
       type: { name: 'boolean', required: false },
@@ -70,7 +70,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     dragSpeed: {
       type: { name: 'number', required: false },
@@ -80,7 +80,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'number' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     initial: {
       type: { name: 'number', required: false },
@@ -90,7 +90,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'number' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     loop: {
       type: { name: 'boolean', required: false },
@@ -100,7 +100,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     mode: {
       type: { name: 'string', required: false },
@@ -110,7 +110,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'string' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     range: {
       type: { name: 'number', required: false },
@@ -120,7 +120,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'number' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     renderMode: {
       type: { name: 'number', required: false },
@@ -130,7 +130,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'number' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     rtl: {
       type: { name: 'boolean', required: false },
@@ -140,7 +140,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     rubberband: {
       type: { name: 'boolean', required: false },
@@ -150,7 +150,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     slides: {
       type: { name: 'boolean', required: false },
@@ -160,7 +160,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     vertical: {
       type: { name: 'boolean', required: false },
@@ -170,7 +170,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     animationStarted: {
       type: { name: 'boolean', required: false },
@@ -180,7 +180,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     animationStopped: {
       type: { name: 'boolean', required: false },
@@ -190,7 +190,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     animationEnded: {
       type: { name: 'boolean', required: false },
@@ -200,7 +200,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     destroyed: {
       type: { name: 'boolean', required: false },
@@ -210,7 +210,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     detailsChanged: {
       type: { name: 'boolean', required: false },
@@ -220,7 +220,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     dragged: {
       type: { name: 'boolean', required: false },
@@ -230,7 +230,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     dragStarted: {
       type: { name: 'boolean', required: false },
@@ -240,7 +240,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     dragChecked: {
       type: { name: 'boolean', required: false },
@@ -250,7 +250,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     dragEnded: {
       type: { name: 'boolean', required: false },
@@ -260,7 +260,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     beforeOptionsChanged: {
       type: { name: 'boolean', required: false },
@@ -270,7 +270,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     optionsChanged: {
       type: { name: 'boolean', required: false },
@@ -280,7 +280,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     updated: {
       type: { name: 'boolean', required: false },
@@ -290,7 +290,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     perView: {
       type: { name: 'number', required: false },
@@ -300,7 +300,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'number' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     spacing: {
       type: { name: 'number', required: false },
@@ -310,7 +310,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'number' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     number: {
       type: { name: 'number', required: false },
@@ -320,7 +320,7 @@ const meta = {
         subcategory: '',
         type: { summary: 'number' },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     origin: {
       type: { name: 'boolean', required: false },
@@ -330,8 +330,8 @@ const meta = {
         subcategory: '',
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
-      },
-    },
+      }
+    }
   },
   args: {
     title: 'Card Carousel',
@@ -340,11 +340,11 @@ const meta = {
     drag: true,
     slides,
     spacing: 16,
-  },
-};
+  }
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof CarouselThumbnail>;
 
 export const Default: Story = {};

package/{archive → src/components}/CarouselThumbnail/index.tsx

@@ -1,6 +1,4 @@
-import React from 'react';
-
-import ComponentWrapper from '@components/ComponentWrapper';
+import { ComponentWrapper } from '@components/ComponentWrapper';
 import { type Colours } from '@utils/controls';
 import classNames from 'classnames';
 import 'keen-slider/keen-slider.min.css';
@@ -11,9 +9,7 @@ import {
   type KeenSliderOptions,
 } from 'keen-slider/react';
 
-
-
-export interface Props {
+export interface CarouselProps {
   id?: string;
   className?: string;
   slideWrapperClassName?: string;
@@ -68,7 +64,7 @@ export interface Props {
   origin?: number | 'auto' | 'center';
 }
 
-const CarouselThumbnail: React.FC<Props> = ({
+export const CarouselThumbnail = ({
   id,
   className,
   slideWrapperClassName,
@@ -106,8 +102,8 @@ const CarouselThumbnail: React.FC<Props> = ({
   spacing,
   number,
   origin,
-}) => {
-  const classList = classNames(className, 'theme-local');
+}: CarouselProps) => {
+  const classList = className;
 
   function WheelControls(slider: any): void {
     let touchTimeout: any;
@@ -122,16 +118,16 @@ const CarouselThumbnail: React.FC<Props> = ({
           detail: {
             x: position.x,
             y: position.y,
-          },
+          }
         }),
-      );
+      )
     }
 
     function wheelStart(e: any): void {
       position = {
         x: e.pageX,
         y: e.pageY,
-      };
+      }
       dispatch(e, 'ksDragStart');
     }
 
@@ -159,7 +155,7 @@ const CarouselThumbnail: React.FC<Props> = ({
     slider.on('created', () => {
       slider.container.addEventListener('wheel', eventWheel, {
         passive: true,
-      });
+      })
     });
   }
 
@@ -168,7 +164,7 @@ const CarouselThumbnail: React.FC<Props> = ({
       function removeActive(): void {
         slider.slides.forEach((slide: any) => {
           slide.classList.remove('active');
-        });
+        })
       }
 
       function addActive(idx: number): void {
@@ -179,7 +175,7 @@ const CarouselThumbnail: React.FC<Props> = ({
         slider.slides.forEach((slide: any, idx: number) => {
           slide.addEventListener('click', () => {
             if (mainRef.current) mainRef.current.moveToIdx(idx);
-          });
+          })
         });
       }
 
@@ -192,9 +188,9 @@ const CarouselThumbnail: React.FC<Props> = ({
           const next = main.animator.targetIdx || 0;
           addActive(main.track.absToRel(next));
           slider.moveToIdx(Math.min(slider.track.details.maxIdx, next));
-        });
+        })
       });
-    };
+    }
   }
 
   const breakpointsToRender: any = {
@@ -212,8 +208,8 @@ const CarouselThumbnail: React.FC<Props> = ({
     },
     '(min-width: 1280px)': {
       slides: { perView: 2, spacing: 10 },
-    },
-  };
+    }
+  }
 
   const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>(
     {
@@ -249,10 +245,10 @@ const CarouselThumbnail: React.FC<Props> = ({
         spacing,
         origin,
         number,
-      },
+      }
     },
     [WheelControls],
-  );
+  )
 
   const [thumbnailRef] = useKeenSlider(
     {
@@ -260,10 +256,10 @@ const CarouselThumbnail: React.FC<Props> = ({
       slides: {
         perView: 4,
         spacing: 10,
-      },
+      }
     },
     [ThumbnailPlugin(instanceRef)],
-  );
+  )
 
   return (
     <ComponentWrapper
@@ -273,23 +269,20 @@ const CarouselThumbnail: React.FC<Props> = ({
       description={description}
       bgColour={bgColour}
     >
-      <div
-        className={classNames(classList, style.classList, 'navigation-wrapper')}
-      >
+      <div className={classNames(classList, 'navigation-wrapper w-full')}>
         <div
           ref={sliderRef}
           className={classNames(
-            style.slideWrapper,
             slideWrapperClassName,
-            'keen-slider',
+            'keen-slider h-96 w-full rounded-t-2xl pb-4',
           )}
         >
           {slides != null && slides}
         </div>
-        <div className={style.thumbnailWrapper}>
+        <div>
           <div
             ref={thumbnailRef}
-            className={`keen-slider thumbnail ${style.thumbnail}`}
+            className={'keen-slider thumbnail h-24 w-16 rounded-b-2xl'}
           >
             {slides != null && slides}
           </div>
@@ -297,6 +290,4 @@ const CarouselThumbnail: React.FC<Props> = ({
       </div>
     </ComponentWrapper>
   );
-};
-
-export default CarouselThumbnail;
+}

package/{archive → src/components}/Checkbox/Checkbox.stories.tsx

@@ -1,7 +1,7 @@
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type StoryObj, Meta } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import Checkbox from '.';
+import { Checkbox } from '.';
 
 const meta = {
   title: 'Components/Checkbox',
@@ -11,12 +11,12 @@ const meta = {
     label: {
       description: '',
       table: {},
-    },
+    }
   },
   args: {
     label: '{{ label }}',
-  },
-};
+  }
+}
 
 export default meta;
 type Story = StoryObj<typeof Checkbox>;
@@ -24,11 +24,11 @@ type Story = StoryObj<typeof Checkbox>;
 export const Checked: Story = {
   args: {
     checked: true,
-  },
-};
+  }
+}
 
 export const Unchecked: Story = {
   args: {
     checked: false,
-  },
-};
+  }
+}

package/{archive → src/components}/Checkbox/index.tsx

@@ -2,35 +2,27 @@ import React, { useState } from 'react';
 
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   label: string;
   onClick?: (label: string, isChecked: boolean) => void;
-
   checked?: boolean;
 }
 
-const Checkbox: React.FC<Props> = ({
-  id,
-  label,
-  onClick,
-  checked = false,
-}: Props): JSX.Element => {
+export const Checkbox = ({ id, label, onClick, checked = false }: Props) => {
   const [isChecked, setIsChecked] = useState(checked);
 
-  const classList = classNames('checkbox-wrapper theme-local');
+  const classList = 'checkbox-wrapper';
   const checkBoxClassList = classNames(
     {
-      [style.checked]: isChecked,
+      'bg-facebook': isChecked,
     },
-    style.checkbox,
-  );
+    'h-6 w-6 appearance-none rounded border-2 hover:cursor-pointer',
+  )
 
   return (
     <div id={id} className={classList}>
-      <label className={style.label}>
+      <label className="flex  hover:cursor-pointer">
         <input
           className={checkBoxClassList}
           onChange={() => {
@@ -42,10 +34,8 @@ const Checkbox: React.FC<Props> = ({
           type="checkbox"
           checked={isChecked}
         />
-        <span className={style.span}>{label}</span>
+        <span className="my-auto px-2">{label}</span>
       </label>
     </div>
   );
-};
-
-export default Checkbox;
+}

package/{archive → src/components}/Collapsible/Collapsible.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import Collapsible from '.';
+import { Collapsible } from '.';
 
 const meta = {
   title: 'Components/Collapsible',
@@ -15,29 +15,29 @@ const meta = {
       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',
@@ -57,11 +57,11 @@ const meta = {
         libero cum cupiditate debitis?
       </p>
     ),
-  },
-};
+  }
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Collapsible>;
 
 export const Default: Story = {};