oddsgate-ds 1.0.168 → 1.0.171

package/src/components/atoms/Counter/Counter.component.tsx

@@ -1,99 +1,99 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
-
-import Heading from '../Heading/Heading.component'
-import { ICounter } from './Counter.interface'
-import { StyledCounter } from '@/components/atoms/Counter/Counter.theme'
-import { useInterval } from '@/helpers/useInterval'
-
-const Counter = ({
-  title,
-  number,
-  prefix,
-  suffix,
-  className,
-  style,
-}: ICounter) => {
-  if (!number) return <></>;
-
-  const savedCallback: any = useRef();
-  const targetRef = useRef<HTMLDivElement>()
-  const [counterValue, setCounterValue] = useState<number>(0);
-  const [counterVisible, setCounterVisible] = useState<boolean>(false);
-
-  let timeout
-  const speed = 50;
-  const increment = Math.trunc(number / speed) < 1 ? 1 : Math.trunc(number / speed);
-
-
-  useEffect(() => {
-    savedCallback.current = () => {
-      if (counterValue != number) {
-        if (counterValue > number) {
-          setCounterValue(number)
-        } else {
-          setCounterValue(counterValue + increment);
-        }
-      } else {
-        return true;
-      }
-    };
-  });
-
-  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(timeout);
-        }
-      }
-    }
-
-    if (counterVisible) timeout = setInterval(tick, speed);
-
-    return () => clearInterval(timeout);
-  }, [counterVisible]);
-
-  useEffect(() => {
-    let observer = new IntersectionObserver((entries, observer) => {
-      entries.forEach((entry) => {
-        const element = targetRef.current;
-
-        if (!entry.target || !element) return;
-
-        if (entry.intersectionRatio > 0) {
-          setCounterVisible(true);
-          observer.unobserve(element);
-        }
-      });
-    }, {});
-
-    observer.observe(targetRef.current as any);
-
-    // Cleanup function to unobserve when the component unmounts
-    return () => {
-      if (targetRef.current) {
-        observer.unobserve(targetRef.current);
-      }
-    };
-  }, []);
-
-
-
-  return (
-    <StyledCounter
-      ref={targetRef as any}
-      className={className}
-      style={style}
-    >
-      <Heading tag="span" size="h1" className='d-flex align-items-center color-primary50 fw-bold'>
-        {prefix && prefix}
-        <span>{counterValue}</span>
-        {suffix && suffix}
-      </Heading>
-      {title && <Heading tag="span" size="h5" className='color-secondary50 fw-bold'>{title}</Heading>}
-    </StyledCounter>
-  )
-}
-
-export default Counter
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+
+import Heading from '../Heading/Heading.component'
+import { ICounter } from './Counter.interface'
+import { StyledCounter } from '@/components/atoms/Counter/Counter.theme'
+import { useInterval } from '@/helpers/useInterval'
+
+const Counter = ({
+  title,
+  number,
+  prefix,
+  suffix,
+  className,
+  style,
+}: ICounter) => {
+  if (!number) return <></>;
+
+  const savedCallback: any = useRef();
+  const targetRef = useRef<HTMLDivElement>()
+  const [counterValue, setCounterValue] = useState<number>(0);
+  const [counterVisible, setCounterVisible] = useState<boolean>(false);
+
+  let timeout
+  const speed = 50;
+  const increment = Math.trunc(number / speed) < 1 ? 1 : Math.trunc(number / speed);
+
+
+  useEffect(() => {
+    savedCallback.current = () => {
+      if (counterValue != number) {
+        if (counterValue > number) {
+          setCounterValue(number)
+        } else {
+          setCounterValue(counterValue + increment);
+        }
+      } else {
+        return true;
+      }
+    };
+  });
+
+  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(timeout);
+        }
+      }
+    }
+
+    if (counterVisible) timeout = setInterval(tick, speed);
+
+    return () => clearInterval(timeout);
+  }, [counterVisible]);
+
+  useEffect(() => {
+    let observer = new IntersectionObserver((entries, observer) => {
+      entries.forEach((entry) => {
+        const element = targetRef.current;
+
+        if (!entry.target || !element) return;
+
+        if (entry.intersectionRatio > 0) {
+          setCounterVisible(true);
+          observer.unobserve(element);
+        }
+      });
+    }, {});
+
+    observer.observe(targetRef.current as any);
+
+    // Cleanup function to unobserve when the component unmounts
+    return () => {
+      if (targetRef.current) {
+        observer.unobserve(targetRef.current);
+      }
+    };
+  }, []);
+
+
+
+  return (
+    <StyledCounter
+      ref={targetRef as any}
+      className={className}
+      style={style}
+    >
+      <Heading tag="span" size="h1" className='d-flex align-items-center color-primary50 fw-bold'>
+        {prefix && prefix}
+        <span>{counterValue}</span>
+        {suffix && suffix}
+      </Heading>
+      {title && <Heading tag="span" size="h5" className='color-secondary50 fw-bold'>{title}</Heading>}
+    </StyledCounter>
+  )
+}
+
+export default Counter

package/src/components/atoms/Counter/Counter.interface.ts

@@ -1,10 +1,10 @@
-import { CSSProperties } from 'react';
-
-export interface ICounter {
-  title?: string,
-  number?: number,
-  prefix?: string,
-  suffix?: string,
-  className?: string,
-  style?: CSSProperties
-}
+import { CSSProperties } from 'react';
+
+export interface ICounter {
+  title?: string,
+  number?: number,
+  prefix?: string,
+  suffix?: string,
+  className?: string,
+  style?: CSSProperties
+}

package/src/components/atoms/Counter/Counter.stories.tsx

@@ -1,29 +1,29 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import Counter from './Counter.component'
-import { ICounter } from './Counter.interface'
-import React from 'react'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/Counter',
-  component: Counter,
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {}
-} as Meta
-
-export const Example: StoryObj<ICounter> = {
-  render: args => (
-    <>
-      <div style={{ height: '2000px' }}></div>
-      <Counter {...args}></Counter>
-    </>
-  ),
-  args: {
-    title: 'lorem ipsum',
-    number: 30,
-    prefix: '+',
-    suffix: '%'
-  }
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Counter from './Counter.component'
+import { ICounter } from './Counter.interface'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Counter',
+  component: Counter,
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {}
+} as Meta
+
+export const Example: StoryObj<ICounter> = {
+  render: args => (
+    <>
+      <div style={{ height: '2000px' }}></div>
+      <Counter {...args}></Counter>
+    </>
+  ),
+  args: {
+    title: 'lorem ipsum',
+    number: 30,
+    prefix: '+',
+    suffix: '%'
+  }
+}

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

@@ -1,27 +1,27 @@
-import { colors, responsiveMedia } from '@/styles/variables';
-import styled, { css } from 'styled-components';
-
-import { ICounter } from './Counter.interface';
-
-export const StyledCounter = styled.div<ICounter>`
-  display: inline-flex;
-  vertical-align: top;
-  flex-flow: column;
-  justify-content: center;
-  align-items: center;
-
-  min-width: 10rem;
-  min-height: 10rem;
-
-  padding: 8px 22px;
-  border-radius: 100%;
-  text-align: center;
-  margin: 12px;
-
-  background-color: ${colors.third10};
-
-  @media only screen and (min-width: ${responsiveMedia}) {
-    min-width: 20rem;
-    min-height: 20rem;
-  }
-`;
+import { colors, responsiveMedia } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { ICounter } from './Counter.interface';
+
+export const StyledCounter = styled.div<ICounter>`
+  display: inline-flex;
+  vertical-align: top;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+
+  min-width: 10rem;
+  min-height: 10rem;
+
+  padding: 8px 22px;
+  border-radius: 100%;
+  text-align: center;
+  margin: 12px;
+
+  background-color: ${colors.third10};
+
+  @media only screen and (min-width: ${responsiveMedia}) {
+    min-width: 20rem;
+    min-height: 20rem;
+  }
+`;

package/src/components/atoms/Counter/index.ts

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

package/src/components/atoms/EmptyState/EmptyState.component.tsx

@@ -1,27 +1,27 @@
-import Heading from '../Heading/Heading.component'
-import { IEmptyState } from './EmptyState.interface'
-import React from 'react'
-import { ReactSVG } from 'react-svg'
-import { StyledEmptyState } from '@/components/atoms/EmptyState/EmptyState.theme'
-
-const EmptyState = ({
-  variant,
-  label,
-  children,
-  className,
-  style,
-  ...props
-}: IEmptyState) => {
-  return (
-    <StyledEmptyState $variant={variant} className={className} style={style}>
-      <ReactSVG src={`/assets/empty-state.svg`} />
-      {label && (
-        <Heading tag="span" size="h4" className="fw-semibold mt-4">
-          {label}
-        </Heading>
-      )}
-    </StyledEmptyState>
-  )
-}
-
-export default EmptyState
+import Heading from '../Heading/Heading.component'
+import { IEmptyState } from './EmptyState.interface'
+import React from 'react'
+import { ReactSVG } from 'react-svg'
+import { StyledEmptyState } from '@/components/atoms/EmptyState/EmptyState.theme'
+
+const EmptyState = ({
+  variant,
+  label,
+  children,
+  className,
+  style,
+  ...props
+}: IEmptyState) => {
+  return (
+    <StyledEmptyState $variant={variant} className={className} style={style}>
+      <ReactSVG src={`/assets/empty-state.svg`} />
+      {label && (
+        <Heading tag="span" size="h4" className="fw-semibold mt-4">
+          {label}
+        </Heading>
+      )}
+    </StyledEmptyState>
+  )
+}
+
+export default EmptyState

package/src/components/atoms/EmptyState/EmptyState.interface.ts

@@ -1,10 +1,10 @@
-import { CSSProperties } from 'react';
-
-export interface IEmptyState {
-  variant?: string;
-  $variant?: string;
-  label?: string,
-  className?: string,
-  style?: CSSProperties
-  children?: React.ReactNode
-}
+import { CSSProperties } from 'react';
+
+export interface IEmptyState {
+  variant?: string;
+  $variant?: string;
+  label?: string,
+  className?: string,
+  style?: CSSProperties
+  children?: React.ReactNode
+}

package/src/components/atoms/EmptyState/EmptyState.stories.tsx

@@ -1,34 +1,34 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import EmptyState from './EmptyState.component'
-import { IEmptyState } from './EmptyState.interface'
-import React from 'react'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/EmptyState',
-  component: EmptyState,
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {}
-} as Meta
-
-export const Light: StoryObj<IEmptyState> = {
-  render: args => <EmptyState {...args}></EmptyState>,
-  args: {
-    variant: 'light',
-    label: 'No results for this search...'
-  }
-}
-
-export const Dark: StoryObj<IEmptyState> = {
-  render: args => (
-    <div className="bg-primary50 color-white p-8">
-      <EmptyState {...args}></EmptyState>
-    </div>
-  ),
-  args: {
-    variant: 'dark',
-    label: 'No results for this search...'
-  }
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import EmptyState from './EmptyState.component'
+import { IEmptyState } from './EmptyState.interface'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/EmptyState',
+  component: EmptyState,
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {}
+} as Meta
+
+export const Light: StoryObj<IEmptyState> = {
+  render: args => <EmptyState {...args}></EmptyState>,
+  args: {
+    variant: 'light',
+    label: 'No results for this search...'
+  }
+}
+
+export const Dark: StoryObj<IEmptyState> = {
+  render: args => (
+    <div className="bg-primary50 color-white p-8">
+      <EmptyState {...args}></EmptyState>
+    </div>
+  ),
+  args: {
+    variant: 'dark',
+    label: 'No results for this search...'
+  }
+}

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

@@ -1,27 +1,27 @@
-import styled, { css } from 'styled-components';
-
-import { IEmptyState } from './EmptyState.interface';
-import { colors } from '@/styles/variables';
-
-export const StyledEmptyState = styled.div<IEmptyState>`
-  display: flex;
-  flex-flow: column;
-  text-align: center;
-
-  ${(props) => {
-    switch (props.$variant) {
-      case "dark": default:
-        return css`
-          & svg path{
-            fill: ${colors.white} !important;
-          }
-        `;
-      case "light":
-        return css`
-          & svg path{
-            fill: ${colors.primary50} !important;
-          }
-        `;
-    }
-  }}
-`;
+import styled, { css } from 'styled-components';
+
+import { IEmptyState } from './EmptyState.interface';
+import { colors } from '@/styles/variables';
+
+export const StyledEmptyState = styled.div<IEmptyState>`
+  display: flex;
+  flex-flow: column;
+  text-align: center;
+
+  ${(props) => {
+    switch (props.$variant) {
+      case "dark": default:
+        return css`
+          & svg path{
+            fill: ${colors.white} !important;
+          }
+        `;
+      case "light":
+        return css`
+          & svg path{
+            fill: ${colors.primary50} !important;
+          }
+        `;
+    }
+  }}
+`;

package/src/components/atoms/EmptyState/index.ts

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

package/src/components/atoms/Flex/Flex.component.tsx

@@ -1,30 +1,30 @@
-import { IFlex } from './Flex.interface';
-import React from 'react';
-import { StyledFlex } from '@/components/atoms/Flex/Flex.theme';
-
-const Flex = ({
-  direction,
-  align,
-  justify,
-  wrap,
-  gap,
-  children,
-  className,
-  ...props
-}: IFlex) => {
-  return (
-    <StyledFlex
-      $direction={direction}
-      $align={align}
-      $justify={justify}
-      $wrap={wrap}
-      $gap={gap}
-      className={className}
-      {...props}
-    >
-      {children}
-    </StyledFlex>
-  )
-}
-
-export default Flex
+import { IFlex } from './Flex.interface';
+import React from 'react';
+import { StyledFlex } from '@/components/atoms/Flex/Flex.theme';
+
+const Flex = ({
+  direction,
+  align,
+  justify,
+  wrap,
+  gap,
+  children,
+  className,
+  ...props
+}: IFlex) => {
+  return (
+    <StyledFlex
+      $direction={direction}
+      $align={align}
+      $justify={justify}
+      $wrap={wrap}
+      $gap={gap}
+      className={className}
+      {...props}
+    >
+      {children}
+    </StyledFlex>
+  )
+}
+
+export default Flex

package/src/components/atoms/Flex/Flex.interface.ts

@@ -1,24 +1,24 @@
-import { CSSProperties } from 'react';
-
-interface IFlexBase {
-  className?: string,
-  style?: CSSProperties
-  children?: React.ReactNode
-}
-export type flexAlign = 'flex-start' | 'center' | 'flex-end' | 'stretch' | string
-export type flexJustify = 'flex-start' | 'center' | 'flex-end' | 'space-between' | string
-
-export interface IFlex extends IFlexBase{
-  direction?: 'row' | 'column',
-  align?: flexAlign,
-  justify?: flexJustify,
-  wrap?: 'wrap' | 'nowrap',
-  gap?: string,
-}
-export interface IFlexSC extends IFlexBase {
-  $direction?: 'row' | 'column',
-  $align?: flexAlign,
-  $justify?: flexJustify,
-  $wrap?: 'wrap' | 'nowrap',
-  $gap?: string,
-}
+import { CSSProperties } from 'react';
+
+interface IFlexBase {
+  className?: string,
+  style?: CSSProperties
+  children?: React.ReactNode
+}
+export type flexAlign = 'flex-start' | 'center' | 'flex-end' | 'stretch' | string
+export type flexJustify = 'flex-start' | 'center' | 'flex-end' | 'space-between' | string
+
+export interface IFlex extends IFlexBase{
+  direction?: 'row' | 'column',
+  align?: flexAlign,
+  justify?: flexJustify,
+  wrap?: 'wrap' | 'nowrap',
+  gap?: string,
+}
+export interface IFlexSC extends IFlexBase {
+  $direction?: 'row' | 'column',
+  $align?: flexAlign,
+  $justify?: flexJustify,
+  $wrap?: 'wrap' | 'nowrap',
+  $gap?: string,
+}