oddsgate-ds 1.0.87 → 1.0.89

package/dist/esm/types/helpers/events.d.ts

@@ -0,0 +1 @@
+export declare const debounce: (callback: any, wait: number) => (...args: any) => void;

package/dist/esm/types/index.d.ts

@@ -48,4 +48,5 @@ export { iconsList } from './helpers/getIcons';
 export { default as GlobalStyles } from './styles/Global';
 export { default as clickOutSideToClose } from './helpers/clickOutsideToClose';
 export { default as isTouchDevice } from './helpers/isTouchDevice';
+export { debounce } from './helpers/events';
 export { variables };

package/dist/types.d.ts

@@ -637,4 +637,6 @@ declare function clickOutSideToClose(ref: React.RefObject<HTMLDivElement>, close
 
 declare const isTouchDevice: () => boolean;
 
-export { Accordion, AccordionItem, BlogCard, Button, CareersCard, CheckRadioField, Chip, CircularSlider, CloseButton, Column, Counter, Cover, Dropdown, DropdownItem, EmptyState, EventsCard, Flex, FormField, GlobalStyles, Heading, Icon, IconBox, IconTitle, ImageWrapper, LicenseCard, Loader, LogosCard, Marquee, Modal, NewsCard, OffCanvas, PortalComponent, ProductCard, Quote, RichText, Row, ScrollingNav, Separator, ShareModal, Slider, SocialLinks, Spacer, Tabs, TeamCard, Video, VideoEmbed, clickOutSideToClose, iconsList, isTouchDevice, variables };
+declare const debounce: (callback: any, wait: number) => (...args: any) => void;
+
+export { Accordion, AccordionItem, BlogCard, Button, CareersCard, CheckRadioField, Chip, CircularSlider, CloseButton, Column, Counter, Cover, Dropdown, DropdownItem, EmptyState, EventsCard, Flex, FormField, GlobalStyles, Heading, Icon, IconBox, IconTitle, ImageWrapper, LicenseCard, Loader, LogosCard, Marquee, Modal, NewsCard, OffCanvas, PortalComponent, ProductCard, Quote, RichText, Row, ScrollingNav, Separator, ShareModal, Slider, SocialLinks, Spacer, Tabs, TeamCard, Video, VideoEmbed, clickOutSideToClose, debounce, iconsList, isTouchDevice, variables };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.87",
+  "version": "1.0.89",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -42,7 +42,7 @@
     "@storybook/addon-essentials": "^8.1.5",
     "@storybook/addon-interactions": "^8.1.5",
     "@storybook/addon-links": "^8.1.5",
-    "@storybook/addon-styling": "^1.3.2",
+    "@storybook/addon-styling": "^1.3.7",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.3",
     "@storybook/blocks": "^8.1.5",
     "@storybook/react": "^8.1.5",
@@ -80,6 +80,7 @@
   "dependencies": {
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-url": "^8.0.1",
+    "@washingtonpost/storybook-addon-web-vitals": "^0.3.0",
     "blaze-slider": "^1.9.3",
     "classnames": "^2.3.2",
     "formik": "^2.4.2",

package/src/components/atoms/Button/Button.theme.ts

@@ -113,6 +113,7 @@ export const StyledButton = styled.a<IButtonSC>`
         return css`
             ${fontSize('h5')};
             text-transform:uppercase;
+            padding: 0;
 
             ${props.$mode === "light" ? `
               color: ${colors.third50};

package/src/components/organisms/CircularSlider/CircularSlider.component.tsx

@@ -9,6 +9,7 @@ import {
 
 import Heading from '@/components/atoms/Heading/Heading.component';
 import { ICircularSlider } from './CircularSlider.interface'
+import { debounce } from '@/helpers/events';
 import isTouchDevice from '@/helpers/isTouchDevice';
 
 const CircularSlider = ({
@@ -27,6 +28,7 @@ const CircularSlider = ({
   const contentHolder = useRef<HTMLDivElement>();
 
   const isMobile = isTouchDevice();
+  console.log(isMobile);
 
   const sliderSize = isMobile ? 2.6 : 1;
   const slideSize = isMobile ? 0.12 : 0.15;
@@ -88,7 +90,7 @@ const CircularSlider = ({
 
     }
 
-    const sliderResize = () => {
+    const sliderResize = debounce(() => {
       let radius,
         w = slider?.current ? slider?.current?.getBoundingClientRect().width : 0,
         h = slider?.current ? slider?.current.getBoundingClientRect().height : 0;
@@ -96,7 +98,7 @@ const CircularSlider = ({
       2 * h <= w ? radius = h * sliderSize : radius = (w / 2) * sliderSize;
 
       setSize(Math.round(radius));
-    }
+    }, 250)
 
     const addStyle = () => {
       setTimeout(() => {
@@ -126,10 +128,10 @@ const CircularSlider = ({
       if (currentSlide === 0 && newSlide === (slides.length - 1)) {
         multiplier = -1;
         direction = "-";
-      } else if(currentSlide === (slides.length - 1) && newSlide === 0) {
+      } else if (currentSlide === (slides.length - 1) && newSlide === 0) {
         multiplier = 1;
         direction = "+";
-      }else{
+      } else {
         multiplier = newSlide - currentSlide
         direction = currentSlide < newSlide ? "+" : "-";
       }
@@ -149,7 +151,7 @@ const CircularSlider = ({
 
 
     for (let i = 0; i < slides.length; i++) {
-      slides[i].addEventListener('click', rotateSlider, {passive: true});
+      slides[i].addEventListener('click', rotateSlider, { passive: true });
     };
 
     window.addEventListener('resize', sliderResize)

package/src/components/organisms/CircularSlider/CircularSlider.theme.ts

@@ -54,6 +54,7 @@ export const StyledCircularSliderSlide = styled.div<ICircularSlider>`
   transform-origin: center;
   transition: .3s linear all;
   filter: brightness(70%);
+  cursor: pointer;
 
   & img{
     height: 100%;

package/src/components/organisms/Tabs/Tabs.component.tsx

@@ -8,6 +8,7 @@ import {
 
 import Heading from '@/components/atoms/Heading/Heading.component'
 import { ITabs } from './Tabs.interface'
+import { debounce } from '@/helpers/events'
 
 const Tabs = ({ id, title, menu, vertical, className, style }: ITabs) => {
   const [active, setActive] = useState(0)
@@ -19,7 +20,8 @@ const Tabs = ({ id, title, menu, vertical, className, style }: ITabs) => {
     setActive(index);
   }
 
-  const setTabsHeight = () => {
+
+  const setTabsHeight = debounce(() => {
     if (!tabsContent.current) return;
 
     const heights: number[] = [];
@@ -27,7 +29,7 @@ const Tabs = ({ id, title, menu, vertical, className, style }: ITabs) => {
       heights.push(child?.offsetHeight as number)
     })
     tabsContent.current.style.height = `${Math.max(...heights)}px`;
-  }
+  }, 250)
 
   useEffect(()=>{
     setTabsHeight();

package/src/helpers/events.ts

@@ -0,0 +1,9 @@
+export const debounce = (callback: any, wait: number) => {
+  let timeoutId: number | null = null;
+  return (...args: any) => {
+    timeoutId && window.clearTimeout(timeoutId);
+    timeoutId = window.setTimeout(() => {
+      callback(...args);
+    }, wait);
+  };
+}

package/src/helpers/isTouchDevice.tsx

@@ -1,11 +1,35 @@
+import { useEffect, useRef, useState } from "react";
+
+import { responsiveMedia } from "@/styles/variables";
+
 const isTouchDevice = () => {
-  try {
-    document.createEvent('TouchEvent');
-    return true;
-  } catch (e) {
-    return false;
-  }
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    const observedElementRef = document.querySelector('body > main');
+    if (observedElementRef) {
+      const observer = new ResizeObserver((entries) => {
+        for (let entry of entries) {
+          setDimensions({
+            width: entry.contentRect.width,
+            height: entry.contentRect.height,
+          });
+        }
+      });
+
+      observer.observe(observedElementRef);
+
+      // Cleanup function
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, []);
+
+  console.log(dimensions);
+  return dimensions.width < parseInt(responsiveMedia);
 }
 
 
+
 export default isTouchDevice

package/src/helpers/useMediaQuery.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react';
 
+import { debounce } from './events';
+
 function useMediaQuery(query: string) {
   const [matches, setMatches] = useState<boolean>(false)
 
@@ -11,7 +13,9 @@ function useMediaQuery(query: string) {
         setMatches(media.matches)
       }
 
-      const listener = () => setMatches(media.matches)
+      const listener = debounce(() => {
+        setMatches(media.matches)
+      }, 250)
       window.addEventListener('resize', listener)
 
       return () => window.removeEventListener('resize', listener)

package/src/index.ts

@@ -58,6 +58,7 @@ export { default as GlobalStyles } from './styles/Global'
 
 export { default as clickOutSideToClose } from './helpers/clickOutsideToClose'
 export { default as isTouchDevice } from './helpers/isTouchDevice'
+export { debounce } from './helpers/events'
 
 export { variables };
 

package/src/styles/utilities.ts

@@ -184,6 +184,12 @@ export const utilities: {
       last: 6,
     },
   },
+  "gap": {
+    responsive: true,
+    property: "gap",
+    class: "gap",
+    values: spacers
+  },
   "margin": {
     responsive: true,
     property: "margin",