oddsgate-ds 1.0.174 → 1.0.176

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

@@ -1,118 +1,118 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { ITabs } from './Tabs.interface'
-import React from 'react'
-import RichText from '@/components/atoms/RichText'
-import Tabs from './Tabs.component'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/Tabs',
-  component: Tabs
-} as Meta
-
-export const Simple: StoryObj<ITabs> = {
-  render: args => <Tabs {...args}></Tabs>,
-  args: {
-    title: 'Lorem ipsum dolor sit amet',
-    vertical: true,
-    menu: [
-      {
-        id: 'lorem-1',
-        label: 'Lorem 1',
-        content: (
-          <RichText style={{ color: 'var(--color-gray50)' }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est laborum.
-          </RichText>
-        ),
-        onClick: () => {
-          alert('Tab clicked')
-        }
-      },
-      {
-        id: 'lorem-2',
-        label: 'Lorem 2',
-        content: (
-          <RichText style={{ color: 'var(--color-gray50)' }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est eiusmod tempor
-            incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
-            ea commodo consequat. Duis aute irure dolor in reprehenderit in
-            voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-            officia deserunt mollit anim id est laborum.
-          </RichText>
-        )
-      },
-      {
-        id: 'lorem-3',
-        label: 'Lorem 3',
-        content: (
-          <RichText style={{ color: 'var(--color-gray50)' }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat. Duis aute irure dolor in
-          </RichText>
-        )
-      },
-      {
-        id: 'lorem-4',
-        label: 'Lorem 4',
-        content: (
-          <RichText style={{ color: 'var(--color-gray50)' }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est laborum.
-          </RichText>
-        )
-      },
-      {
-        id: 'lorem-5',
-        label: 'Lorem 5',
-        content: (
-          <RichText style={{ color: 'var(--color-gray50)' }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est laborum.
-          </RichText>
-        )
-      },
-      {
-        id: 'lorem-6',
-        label: 'Lorem 6',
-        content: (
-          <RichText style={{ color: 'var(--color-gray50)' }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est laborum.
-          </RichText>
-        )
-      }
-    ]
-  }
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ITabs } from './Tabs.interface'
+import React from 'react'
+import RichText from '@/components/atoms/RichText'
+import Tabs from './Tabs.component'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Tabs',
+  component: Tabs
+} as Meta
+
+export const Simple: StoryObj<ITabs> = {
+  render: args => <Tabs {...args}></Tabs>,
+  args: {
+    title: 'Lorem ipsum dolor sit amet',
+    vertical: true,
+    menu: [
+      {
+        id: 'lorem-1',
+        label: 'Lorem 1',
+        content: (
+          <RichText style={{ color: 'var(--color-gray50)' }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </RichText>
+        ),
+        onClick: () => {
+          alert('Tab clicked')
+        }
+      },
+      {
+        id: 'lorem-2',
+        label: 'Lorem 2',
+        content: (
+          <RichText style={{ color: 'var(--color-gray50)' }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat. Duis aute irure dolor in reprehenderit in
+            voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+            officia deserunt mollit anim id est laborum.
+          </RichText>
+        )
+      },
+      {
+        id: 'lorem-3',
+        label: 'Lorem 3',
+        content: (
+          <RichText style={{ color: 'var(--color-gray50)' }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+          </RichText>
+        )
+      },
+      {
+        id: 'lorem-4',
+        label: 'Lorem 4',
+        content: (
+          <RichText style={{ color: 'var(--color-gray50)' }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </RichText>
+        )
+      },
+      {
+        id: 'lorem-5',
+        label: 'Lorem 5',
+        content: (
+          <RichText style={{ color: 'var(--color-gray50)' }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </RichText>
+        )
+      },
+      {
+        id: 'lorem-6',
+        label: 'Lorem 6',
+        content: (
+          <RichText style={{ color: 'var(--color-gray50)' }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </RichText>
+        )
+      }
+    ]
+  }
+}

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

@@ -1,115 +1,115 @@
-import { ITabs, ITabsItem } from './Tabs.interface';
-import { colors, responsiveMedia } from '@/styles/variables';
-import styled, { css, keyframes } from 'styled-components';
-
-import ScrollingNav from '@/components/atoms/ScrollingNav/ScrollingNav.component';
-
-export const StyledTabsMenu = styled(ScrollingNav) <ITabs>`
-  @media only screen and (min-width: ${responsiveMedia}) {
-    align-items: center;
-    justify-content: center;
-  }
-`
-
-export const StyledTabsLinks = styled.a<ITabsItem>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  color: ${colors.secondary50};
-  background-color: ${colors.third10};
-  padding: 8px 26px;
-  border-radius: 50px;
-  transition: all 0.3s linear;
-  cursor: pointer;
-
-  &:hover{
-    background-color: ${colors.primary50};
-  }
-
-  ${({ $active }) => $active && `
-    background-color: ${colors.primary50};
-  `}
-`
-
-export const StyledTabsContent = styled.div<ITabsItem>`
-  position: absolute;
-  top: 0;
-  left: 0%;
-  display: flex;
-  flex-flow: row wrap;
-  height:100%;
-  min-height:320px;
-
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-
-  background-color: ${colors.primary50};
-  border-radius: 48px 0;
-  padding: 36px;
-
-  @media only screen and (min-width: ${responsiveMedia}) {
-    min-height: 40rem;
-  }
-
-  & > span{
-    display: flex;
-    align-items:center;
-    align-self: flex-end;
-    gap: 1rem;
-
-    width: 100%;
-
-    &:before{
-      content:'';
-      width: 3rem;
-      height: 3rem;
-      border-radius: 100%;
-      background-color: ${colors.third50};
-    }
-  }
-
-  ${({ $active }) => $active && `
-    opacity: 1;
-    visibility: visible;
-    pointer-events: auto;
-  `}
-
-`
-
-export const StyledTabs = styled.div<ITabs>`
-  position: relative;
-  display: flex;
-  flex-flow: column;
-  gap: 16px;
-
-  & > div{
-  width: 100%;
-  }
-
-  ${({ $vertical }) => $vertical && `
-    @media only screen and (min-width: ${responsiveMedia}) {
-      flex-flow: row;
-
-      & > div{
-        &:first-child{
-          width: 60%;
-          flex-grow: 1;
-        }
-        &:last-child{
-          width: 40%;
-          flex-shrink: 1;
-        }
-      }
-
-      ${StyledTabsMenu}{
-        display: inline-flex;
-        flex-flow: column;
-        align-items: stretch;
-        justify-content: flex-start;
-      }
-    }
-  `}
-`;
-
+import { ITabs, ITabsItem } from './Tabs.interface';
+import { colors, responsiveMedia } from '@/styles/variables';
+import styled, { css, keyframes } from 'styled-components';
+
+import ScrollingNav from '@/components/atoms/ScrollingNav/ScrollingNav.component';
+
+export const StyledTabsMenu = styled(ScrollingNav) <ITabs>`
+  @media only screen and (min-width: ${responsiveMedia}) {
+    align-items: center;
+    justify-content: center;
+  }
+`
+
+export const StyledTabsLinks = styled.a<ITabsItem>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  color: ${colors.secondary50};
+  background-color: ${colors.third10};
+  padding: 8px 26px;
+  border-radius: 50px;
+  transition: all 0.3s linear;
+  cursor: pointer;
+
+  &:hover{
+    background-color: ${colors.primary50};
+  }
+
+  ${({ $active }) => $active && `
+    background-color: ${colors.primary50};
+  `}
+`
+
+export const StyledTabsContent = styled.div<ITabsItem>`
+  position: absolute;
+  top: 0;
+  left: 0%;
+  display: flex;
+  flex-flow: row wrap;
+  height:100%;
+  min-height:320px;
+
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+
+  background-color: ${colors.primary50};
+  border-radius: 48px 0;
+  padding: 36px;
+
+  @media only screen and (min-width: ${responsiveMedia}) {
+    min-height: 40rem;
+  }
+
+  & > span{
+    display: flex;
+    align-items:center;
+    align-self: flex-end;
+    gap: 1rem;
+
+    width: 100%;
+
+    &:before{
+      content:'';
+      width: 3rem;
+      height: 3rem;
+      border-radius: 100%;
+      background-color: ${colors.third50};
+    }
+  }
+
+  ${({ $active }) => $active && `
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  `}
+
+`
+
+export const StyledTabs = styled.div<ITabs>`
+  position: relative;
+  display: flex;
+  flex-flow: column;
+  gap: 16px;
+
+  & > div{
+  width: 100%;
+  }
+
+  ${({ $vertical }) => $vertical && `
+    @media only screen and (min-width: ${responsiveMedia}) {
+      flex-flow: row;
+
+      & > div{
+        &:first-child{
+          width: 60%;
+          flex-grow: 1;
+        }
+        &:last-child{
+          width: 40%;
+          flex-shrink: 1;
+        }
+      }
+
+      ${StyledTabsMenu}{
+        display: inline-flex;
+        flex-flow: column;
+        align-items: stretch;
+        justify-content: flex-start;
+      }
+    }
+  `}
+`;
+

package/src/components/organisms/Tabs/index.ts

@@ -1 +1 @@
-export { default } from './Tabs.component'
+export { default } from './Tabs.component'

package/src/helpers/clickOutsideToClose.tsx

@@ -1,17 +1,17 @@
-import { useEffect } from 'react'
-
-export default function clickOutSideToClose(
-  ref: React.RefObject<HTMLDivElement>,
-  closeFunction: () => void
-) {
-  function handleClickOutside(event: MouseEvent) {
-    if (ref.current && !ref.current.contains(event.target as Node) ) {
-      closeFunction()
-    }
-  }
-
-  useEffect(() => {
-    document.addEventListener('mouseup', handleClickOutside, {passive: true})
-    return () => document.removeEventListener('mouseup', handleClickOutside)
-  }, [ref])
-}
+import { useEffect } from 'react'
+
+export default function clickOutSideToClose(
+  ref: React.RefObject<HTMLDivElement>,
+  closeFunction: () => void
+) {
+  function handleClickOutside(event: MouseEvent) {
+    if (ref.current && !ref.current.contains(event.target as Node) ) {
+      closeFunction()
+    }
+  }
+
+  useEffect(() => {
+    document.addEventListener('mouseup', handleClickOutside, {passive: true})
+    return () => document.removeEventListener('mouseup', handleClickOutside)
+  }, [ref])
+}

package/src/helpers/events.ts

@@ -1,9 +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);
-  };
-}
+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/exportCSS.tsx

@@ -1,27 +1,27 @@
-import { default as GlobalStyles } from '../styles/Global'
-import React from 'react'
-import { ServerStyleSheet } from 'styled-components'
-import { renderToString } from 'react-dom/server'
-import { useState } from 'react'
-
-const ReturnCss = () => {
-  const sheet = new ServerStyleSheet()
-
-  const html = renderToString(sheet.collectStyles(<GlobalStyles />))
-  const styleTags = sheet.getStyleElement()
-  sheet.instance.clearTag()
-
-  return styleTags[0]
-}
-
-export default ReturnCss
-
-export const ReturnCssString = () => {
-  const sheet = new ServerStyleSheet()
-
-  const html = renderToString(sheet.collectStyles(<GlobalStyles />))
-  const styleTags = sheet.getStyleElement()
-  sheet.instance.clearTag()
-
-  return styleTags[0].props.dangerouslySetInnerHTML.__html
-}
+import { default as GlobalStyles } from '../styles/Global'
+import React from 'react'
+import { ServerStyleSheet } from 'styled-components'
+import { renderToString } from 'react-dom/server'
+import { useState } from 'react'
+
+const ReturnCss = () => {
+  const sheet = new ServerStyleSheet()
+
+  const html = renderToString(sheet.collectStyles(<GlobalStyles />))
+  const styleTags = sheet.getStyleElement()
+  sheet.instance.clearTag()
+
+  return styleTags[0]
+}
+
+export default ReturnCss
+
+export const ReturnCssString = () => {
+  const sheet = new ServerStyleSheet()
+
+  const html = renderToString(sheet.collectStyles(<GlobalStyles />))
+  const styleTags = sheet.getStyleElement()
+  sheet.instance.clearTag()
+
+  return styleTags[0].props.dangerouslySetInnerHTML.__html
+}

package/src/helpers/getIcons.ts

@@ -1,5 +1,5 @@
-import selection from '../iconsList.json';
-
-export const iconsList = selection.icons.map(
-  (icon) => `icon-${icon.properties.name}`
-);
+import selection from '../iconsList.json';
+
+export const iconsList = selection.icons.map(
+  (icon) => `icon-${icon.properties.name}`
+);

package/src/helpers/isTouchDevice.tsx

@@ -1,11 +1,11 @@
-const isTouchDevice = () => {
-  try {
-    document.createEvent('TouchEvent');
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-
-export default isTouchDevice
+const isTouchDevice = () => {
+  try {
+    document.createEvent('TouchEvent');
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+
+export default isTouchDevice

package/src/helpers/useInterval.ts

@@ -1,25 +1,25 @@
-import { useEffect, useRef } from "react";
-
-export const useInterval = (callback, delay) => {
-  const savedCallback = useRef();
-  let id
-
-  useEffect(() => {
-    savedCallback.current = callback;
-  });
-
-  useEffect(() => {
-    function tick() {
-      if (savedCallback && savedCallback.current) {
-        const result = (savedCallback as unknown as any).current();
-        if (result === true) {// if callback returs true, clear timeout;
-          clearInterval(id);
-        }
-      }
-    }
-
-    id = setInterval(tick, delay);
-
-    return () => clearInterval(id);
-  }, [delay]);
-}
+import { useEffect, useRef } from "react";
+
+export const useInterval = (callback, delay) => {
+  const savedCallback = useRef();
+  let id
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  });
+
+  useEffect(() => {
+    function tick() {
+      if (savedCallback && savedCallback.current) {
+        const result = (savedCallback as unknown as any).current();
+        if (result === true) {// if callback returs true, clear timeout;
+          clearInterval(id);
+        }
+      }
+    }
+
+    id = setInterval(tick, delay);
+
+    return () => clearInterval(id);
+  }, [delay]);
+}