oddsgate-ds 1.0.174 → 1.0.175

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

@@ -1,48 +1,48 @@
-import { Direction, ICardMarquee } from './CardMarquee.interface';
-import { colors, radius } from '@/styles/variables';
-import styled, { css, keyframes } from 'styled-components';
-
-const getAnimation = (direction?: Direction) => {
-  switch (direction) {
-    case 'up':
-    case 'down':
-      return keyframes`
-        from { transform: translateY(0); }
-        to { transform: translateY(-100%); }
-      `;
-    case 'left':
-    case 'right':
-      return keyframes`
-        from { transform: translateX(0); }
-        to { transform: translateX(-100%); }
-      `;
-  }
-};
-
-export const StyledCardMarquee = styled.div<ICardMarquee>`
-  display: flex;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  &>div{
-    display: flex;
-    ${({ gap }) => css`gap: ${gap}`};
-    white-space: nowrap;
-    width: ${({ direction }) => (direction === 'left' || direction === 'right' ? '200%' : 'auto')};
-    height: ${({ direction }) => (direction === 'up' || direction === 'down' ? '200%' : 'auto')};
-    flex-direction: ${({ direction }) => (direction === 'up' || direction === 'down' ? 'column' : 'row')};
-
-    animation: ${({ direction, duration }) => css`
-      ${getAnimation(direction)} ${duration}s linear infinite
-    `};
-
-    animation-play-state: running; // Ensures the animation is running by default
-
-    &:hover {
-      animation-play-state: paused; // Pauses the animation when hovered
-    }
-  }
-
-`;
+import { Direction, ICardMarquee } from './CardMarquee.interface';
+import { colors, radius } from '@/styles/variables';
+import styled, { css, keyframes } from 'styled-components';
+
+const getAnimation = (direction?: Direction) => {
+  switch (direction) {
+    case 'up':
+    case 'down':
+      return keyframes`
+        from { transform: translateY(0); }
+        to { transform: translateY(-100%); }
+      `;
+    case 'left':
+    case 'right':
+      return keyframes`
+        from { transform: translateX(0); }
+        to { transform: translateX(-100%); }
+      `;
+  }
+};
+
+export const StyledCardMarquee = styled.div<ICardMarquee>`
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  &>div{
+    display: flex;
+    ${({ gap }) => css`gap: ${gap}`};
+    white-space: nowrap;
+    width: ${({ direction }) => (direction === 'left' || direction === 'right' ? '200%' : 'auto')};
+    height: ${({ direction }) => (direction === 'up' || direction === 'down' ? '200%' : 'auto')};
+    flex-direction: ${({ direction }) => (direction === 'up' || direction === 'down' ? 'column' : 'row')};
+
+    animation: ${({ direction, duration }) => css`
+      ${getAnimation(direction)} ${duration}s linear infinite
+    `};
+
+    animation-play-state: running; // Ensures the animation is running by default
+
+    &:hover {
+      animation-play-state: paused; // Pauses the animation when hovered
+    }
+  }
+
+`;

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

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

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

@@ -1,30 +1,30 @@
-import { IChip } from './Chip.interface'
-import React from 'react'
-import { StyledChip } from '@/components/atoms/Chip/Chip.theme'
-import cn from 'classnames'
-
-const Chip = ({
-  variant,
-  hover,
-  active,
-  className,
-  style,
-  children,
-  onClick,
-  ...props
-}: IChip) => {
-  return (
-    <StyledChip
-      $variant={variant}
-      $hover={hover}
-      $active={active}
-      className={cn('captions fw-bold', className)}
-      style={style}
-      onClick={onClick}
-    >
-      {children}
-    </StyledChip>
-  )
-}
-
-export default Chip
+import { IChip } from './Chip.interface'
+import React from 'react'
+import { StyledChip } from '@/components/atoms/Chip/Chip.theme'
+import cn from 'classnames'
+
+const Chip = ({
+  variant,
+  hover,
+  active,
+  className,
+  style,
+  children,
+  onClick,
+  ...props
+}: IChip) => {
+  return (
+    <StyledChip
+      $variant={variant}
+      $hover={hover}
+      $active={active}
+      className={cn('captions fw-bold', className)}
+      style={style}
+      onClick={onClick}
+    >
+      {children}
+    </StyledChip>
+  )
+}
+
+export default Chip

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

@@ -1,14 +1,14 @@
-import { CSSProperties } from 'react';
-
-export interface IChip {
-  variant?: string;
-  $variant?: string;
-  hover?: boolean,
-  $hover?: boolean,
-  active?: boolean,
-  $active?: boolean,
-  className?: string,
-  style?: CSSProperties
-  children?: React.ReactNode
-  onClick?: (event?: React.MouseEvent<HTMLElement>) => void
-}
+import { CSSProperties } from 'react';
+
+export interface IChip {
+  variant?: string;
+  $variant?: string;
+  hover?: boolean,
+  $hover?: boolean,
+  active?: boolean,
+  $active?: boolean,
+  className?: string,
+  style?: CSSProperties
+  children?: React.ReactNode
+  onClick?: (event?: React.MouseEvent<HTMLElement>) => void
+}

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

@@ -1,42 +1,42 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import Chip from './Chip.component'
-import { IChip } from './Chip.interface'
-import React from 'react'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/Chip',
-  component: Chip,
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {}
-} as Meta
-
-export const Dark: StoryObj<IChip> = {
-  render: args => (
-    <div className="bg-primary50 p-6">
-      <Chip {...args}>Category name</Chip>
-    </div>
-  ),
-  args: {
-    variant: 'dark',
-    hover: true
-  }
-}
-
-export const Light: StoryObj<IChip> = {
-  render: args => <Chip {...args}>Category name</Chip>,
-  args: {
-    variant: 'light',
-    hover: true
-  }
-}
-
-export const Active: StoryObj<IChip> = {
-  render: args => <Chip {...args}>Category name</Chip>,
-  args: {
-    variant: 'light',
-    active: true
-  }
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Chip from './Chip.component'
+import { IChip } from './Chip.interface'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Chip',
+  component: Chip,
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {}
+} as Meta
+
+export const Dark: StoryObj<IChip> = {
+  render: args => (
+    <div className="bg-primary50 p-6">
+      <Chip {...args}>Category name</Chip>
+    </div>
+  ),
+  args: {
+    variant: 'dark',
+    hover: true
+  }
+}
+
+export const Light: StoryObj<IChip> = {
+  render: args => <Chip {...args}>Category name</Chip>,
+  args: {
+    variant: 'light',
+    hover: true
+  }
+}
+
+export const Active: StoryObj<IChip> = {
+  render: args => <Chip {...args}>Category name</Chip>,
+  args: {
+    variant: 'light',
+    active: true
+  }
+}

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

@@ -1,57 +1,57 @@
-import styled, { css } from 'styled-components';
-
-import { IChip } from './Chip.interface';
-import { colors } from '@/styles/variables';
-
-export const StyledChip = styled.div<IChip>`
-  display: inline-block;
-  vertical-align: top;
-
-  border-radius: 50px;
-  padding: 8px 22px;
-  text-transform: uppercase;
-
-  ${(props) => {
-    switch (props.$variant) {
-      case "dark": default:
-        return css`
-          color: ${colors.secondary50};
-          background-color: ${colors.third50};
-
-          ${props.$hover && !props.$active && `
-            &:hover{
-              color: ${colors.secondary50};
-              background-color: ${colors.primary50};
-            }
-          `}
-
-          ${props.$active && `
-            color: ${colors.secondary50};
-            background-color: ${colors.primary50};
-          `}
-        `;
-      case "light":
-        return css`
-          color: ${colors.secondary50};
-          background-color: ${colors.primary50};
-
-          ${props.$hover && !props.$active && `
-            &:hover{
-              color: ${colors.secondary50};
-              background-color: ${colors.third50};
-            }
-          `}
-
-          ${props.$active && `
-            color: ${colors.secondary50};
-            background-color: ${colors.third50};
-          `}
-        `;
-    }
-  }}
-
-  ${({ $hover }) => $hover && `
-    transition: all 0.3s linear;
-    cursor:pointer;
-  `}
-`;
+import styled, { css } from 'styled-components';
+
+import { IChip } from './Chip.interface';
+import { colors } from '@/styles/variables';
+
+export const StyledChip = styled.div<IChip>`
+  display: inline-block;
+  vertical-align: top;
+
+  border-radius: 50px;
+  padding: 8px 22px;
+  text-transform: uppercase;
+
+  ${(props) => {
+    switch (props.$variant) {
+      case "dark": default:
+        return css`
+          color: ${colors.secondary50};
+          background-color: ${colors.third50};
+
+          ${props.$hover && !props.$active && `
+            &:hover{
+              color: ${colors.secondary50};
+              background-color: ${colors.primary50};
+            }
+          `}
+
+          ${props.$active && `
+            color: ${colors.secondary50};
+            background-color: ${colors.primary50};
+          `}
+        `;
+      case "light":
+        return css`
+          color: ${colors.secondary50};
+          background-color: ${colors.primary50};
+
+          ${props.$hover && !props.$active && `
+            &:hover{
+              color: ${colors.secondary50};
+              background-color: ${colors.third50};
+            }
+          `}
+
+          ${props.$active && `
+            color: ${colors.secondary50};
+            background-color: ${colors.third50};
+          `}
+        `;
+    }
+  }}
+
+  ${({ $hover }) => $hover && `
+    transition: all 0.3s linear;
+    cursor:pointer;
+  `}
+`;

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

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

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

@@ -1,17 +1,17 @@
-import { ICloseButton } from './CloseButton.interface'
-import React from 'react'
-import { StyledCloseButton } from './CloseButton.theme'
-import cn from 'classnames'
-
-const CloseButton = ({ variant, className, onClick, ...props }: ICloseButton) => {
-  return (
-    <StyledCloseButton
-      $variant={variant}
-      className={cn(className)}
-      onClick={onClick}
-      {...props}
-    />
-  )
-}
-
-export default CloseButton
+import { ICloseButton } from './CloseButton.interface'
+import React from 'react'
+import { StyledCloseButton } from './CloseButton.theme'
+import cn from 'classnames'
+
+const CloseButton = ({ variant, className, onClick, ...props }: ICloseButton) => {
+  return (
+    <StyledCloseButton
+      $variant={variant}
+      className={cn(className)}
+      onClick={onClick}
+      {...props}
+    />
+  )
+}
+
+export default CloseButton

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

@@ -1,9 +1,9 @@
-import { CSSProperties } from 'react';
-
-export type ICloseButton = {
-  variant?: string
-  $variant?: string
-  className?: string,
-  style?: CSSProperties
-  onClick?: () => void
-}
+import { CSSProperties } from 'react';
+
+export type ICloseButton = {
+  variant?: string
+  $variant?: string
+  className?: string,
+  style?: CSSProperties
+  onClick?: () => void
+}

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

@@ -1,24 +1,24 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import CloseButton from './CloseButton.component'
-import { ICloseButton } from './CloseButton.interface'
-import React from 'react'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/CloseButton',
-  component: CloseButton,
-  tags: ['autodocs'],
-  argTypes: {}
-} as Meta
-
-export const Simple: StoryObj<ICloseButton> = {
-  render: args => <CloseButton {...args} />,
-  args: {}
-}
-export const Small: StoryObj<ICloseButton> = {
-  render: args => <CloseButton {...args} />,
-  args: {
-    variant: 'sm'
-  }
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import CloseButton from './CloseButton.component'
+import { ICloseButton } from './CloseButton.interface'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/CloseButton',
+  component: CloseButton,
+  tags: ['autodocs'],
+  argTypes: {}
+} as Meta
+
+export const Simple: StoryObj<ICloseButton> = {
+  render: args => <CloseButton {...args} />,
+  args: {}
+}
+export const Small: StoryObj<ICloseButton> = {
+  render: args => <CloseButton {...args} />,
+  args: {
+    variant: 'sm'
+  }
+}

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

@@ -1,66 +1,66 @@
-import styled, { css } from 'styled-components';
-
-import { ICloseButton } from './CloseButton.interface';
-
-export const StyledCloseButton = styled.div<ICloseButton>`
-  font-family: arial, "sans-serif" !important;
-  position: absolute;
-  top: 15px;
-  right: 15px;
-
-  color: currentColor;
-  font-size: 0;
-
-  background: none;
-
-  cursor: pointer;
-  z-index: 5;
-
-  &:before,
-  &:after {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    display: block;
-    margin: auto;
-
-    width: 100%;
-    height: 0;
-    border-top: 1px solid currentColor;
-
-    transform-origin: center;
-    transition: all 0.3s linear;
-  }
-
-  &:before {
-    transform: translate(-50%,-50%) rotate(45deg);
-  }
-  &:after {
-    transform: translate(-50%,-50%) rotate(-45deg);
-  }
-
-  &:hover {
-    &:before {
-      transform: translate(-50%,-50%) rotate(25deg);
-    }
-    &:after {
-      transform: translate(-50%,-50%) rotate(-25deg);
-    }
-  }
-
-  ${(props) => {
-    switch (props.$variant) {
-      case "md": default:
-        return css`
-          width: 3rem !important;
-          height: 3rem !important;
-        `;
-      case "sm":
-        return css`
-          width: 1.2rem !important;
-          height: 1.2rem !important;
-        `;
-    }
-  }}
-`;
+import styled, { css } from 'styled-components';
+
+import { ICloseButton } from './CloseButton.interface';
+
+export const StyledCloseButton = styled.div<ICloseButton>`
+  font-family: arial, "sans-serif" !important;
+  position: absolute;
+  top: 15px;
+  right: 15px;
+
+  color: currentColor;
+  font-size: 0;
+
+  background: none;
+
+  cursor: pointer;
+  z-index: 5;
+
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: block;
+    margin: auto;
+
+    width: 100%;
+    height: 0;
+    border-top: 1px solid currentColor;
+
+    transform-origin: center;
+    transition: all 0.3s linear;
+  }
+
+  &:before {
+    transform: translate(-50%,-50%) rotate(45deg);
+  }
+  &:after {
+    transform: translate(-50%,-50%) rotate(-45deg);
+  }
+
+  &:hover {
+    &:before {
+      transform: translate(-50%,-50%) rotate(25deg);
+    }
+    &:after {
+      transform: translate(-50%,-50%) rotate(-25deg);
+    }
+  }
+
+  ${(props) => {
+    switch (props.$variant) {
+      case "md": default:
+        return css`
+          width: 3rem !important;
+          height: 3rem !important;
+        `;
+      case "sm":
+        return css`
+          width: 1.2rem !important;
+          height: 1.2rem !important;
+        `;
+    }
+  }}
+`;

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

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