oddsgate-ds 1.0.2

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

@@ -0,0 +1,34 @@
+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-primary70 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
+  }
+}

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

@@ -0,0 +1,47 @@
+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.white};
+          border: 1px solid ${colors.white};
+
+          ${props.hover && `
+            &:hover{
+              color: ${colors.black};
+              background-color: ${colors.white};
+            }
+          `}
+        `;
+      case "light":
+        return css`
+          color: ${colors.black};
+          border: 1px solid ${colors.black};
+
+          ${props.hover && `
+            &:hover{
+              color: ${colors.white};
+              background-color: ${colors.black};
+            }
+          `}
+        `;
+    }
+  }}
+
+  ${({ hover }) => hover && `
+    transition: all 0.3s linear;
+    cursor:pointer;
+  `}
+`;

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

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

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

@@ -0,0 +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

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +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'
+  }
+}

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

@@ -0,0 +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;
+        `;
+    }
+  }}
+`;

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

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

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

@@ -0,0 +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

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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +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-primary70 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

@@ -0,0 +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.primary70} !important;
+          }
+        `;
+    }
+  }}
+`;

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

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

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

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

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

@@ -0,0 +1,22 @@
+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',
+}
+export interface IFlexSC extends IFlexBase {
+  $direction?: 'row' | 'column',
+  $align?: flexAlign,
+  $justify?: flexJustify,
+  $wrap?: 'wrap' | 'nowrap',
+}

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

@@ -0,0 +1,11 @@
+import styled, { css } from 'styled-components';
+
+import { IFlexSC } from './Flex.interface';
+
+export const StyledFlex = styled.div<IFlexSC>`
+  display: flex;
+  flex-direction: ${props => props.$direction ? props.$direction : "row"};
+  align-items: ${props => props.$align ? props.$align : "center"};
+  justify-content: ${props => props.$justify ? props.$justify : "start"};
+  flex-wrap: ${props => props.$wrap ? props.$wrap : "wrap"};
+`;

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

@@ -0,0 +1 @@
+export { default } from './Flex.component'

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

@@ -0,0 +1,61 @@
+import { IColumn, IRow } from './FlexGrid.interface'
+import { StyledColumn, StyledContainer, StyledRow } from './FlexGrid.theme'
+
+import React from 'react'
+
+export const Row = ({
+  fluid,
+  direction,
+  align,
+  justify,
+  wrap,
+  mobileSpace,
+  className,
+  style,
+  children,
+  ...props
+}: IRow) => {
+  return (
+    <StyledContainer $fluid={fluid} className={className} style={style}>
+      <StyledRow
+        $direction={direction}
+        $align={align}
+        $justify={justify}
+        $wrap={wrap}
+        $mobileSpace={mobileSpace}
+      >
+        {children}
+      </StyledRow>
+    </StyledContainer>
+  )
+}
+
+export const Column = ({
+  xs,
+  sm,
+  md,
+  lg,
+  align,
+  mobileOrder,
+  children,
+  className,
+  style,
+  ...props
+}: IColumn) => {
+  return (
+    <StyledColumn
+      $xs={xs}
+      $sm={sm}
+      $md={md}
+      $lg={lg}
+      $align={align}
+      $mobileOrder={mobileOrder}
+      className={className}
+      style={style}
+    >
+      {children}
+    </StyledColumn>
+  )
+}
+
+export default Row

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

@@ -0,0 +1,55 @@
+import { flexAlign, flexJustify } from '../Flex/Flex.interface';
+
+import { CSSProperties } from 'react';
+
+export interface IRowBase {
+  className?: string,
+  style?: CSSProperties
+  children?: React.ReactNode
+}
+export interface IRow extends IRowBase {
+  fluid?: boolean,
+  direction?: 'row' | 'column',
+  align?: flexAlign,
+  justify?: flexJustify,
+  wrap?: 'wrap' | 'nowrap',
+  mobileSpace?: boolean
+}
+export interface IRowSC extends IRowBase {
+  $fluid?: boolean,
+  $direction?: 'row' | 'column',
+  $align?: flexAlign,
+  $justify?: flexJustify,
+  $wrap?: 'wrap' | 'nowrap',
+  $mobileSpace?: boolean
+}
+
+export type IColumnsSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | number;
+
+export interface IColumnBase {
+  className?: string,
+  style?: CSSProperties
+  children?: React.ReactNode
+}
+
+export interface IColumnSC extends IColumnBase {
+  $align?: flexAlign,
+  $lg?: IColumnsSize
+  $md?: IColumnsSize
+  $sm?: IColumnsSize
+  $xs?: IColumnsSize
+  $mobileOrder?: number
+}
+
+export interface IColumn extends IColumnBase {
+  align?: flexAlign,
+  lg?: IColumnsSize
+  md?: IColumnsSize
+  sm?: IColumnsSize
+  xs?: IColumnsSize
+  mobileOrder?: number
+}
+
+
+export type Flex = IRow
+

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

@@ -0,0 +1,55 @@
+import { Column, Row } from './FlexGrid.component'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { IRow } from './FlexGrid.interface'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/FlexGrid',
+  component: Row,
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {}
+} as Meta
+
+export const Simple: StoryObj<IRow> = {
+  render: args => (
+    <Row {...args}>
+      <Column xs={6} md={8} lg={10}>
+        Column sm-6 md-8 lg-10
+      </Column>
+      <Column xs={6} md={4} lg={2}>
+        Column sm-6 md-4 lg-2
+      </Column>
+    </Row>
+  ),
+  args: {}
+}
+export const Fluid: StoryObj<IRow> = {
+  render: args => (
+    <Row {...args}>
+      <Column md={8}>Column sm-6 md-8 lg-10</Column>
+      <Column md={4}>Column sm-6 md-4 lg-2</Column>
+    </Row>
+  ),
+  args: {
+    fluid: true
+  }
+}
+
+export const Order: StoryObj<IRow> = {
+  render: args => (
+    <Row {...args}>
+      <Column md={8} mobileOrder={2}>
+        mobile order 2
+      </Column>
+      <Column md={4} mobileOrder={1}>
+        mobile order 1
+      </Column>
+    </Row>
+  ),
+  args: {
+    fluid: true
+  }
+}

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

@@ -0,0 +1,79 @@
+// @ts-nocheck
+/* eslint-disable */
+
+import { IColumnSC, IRowSC } from './FlexGrid.interface';
+import config, { CONTAINER_NAMES, DIMENSION_NAMES } from '@/styles/grid';
+import { grid_conf, gutter, responsiveMedia, spaces } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+export const StyledContainer = styled.div<IRowSC>`
+  position: relative;
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+
+  padding-right: ${props => props.$fluid ? "0" : `1rem`};
+  padding-left: ${props => props.$fluid ? "0" : `1rem`};
+  z-index: 1;
+
+
+  ${Object.keys(CONTAINER_NAMES)
+    .sort((k1, k2) => CONTAINER_NAMES.indexOf(k1) - CONTAINER_NAMES.indexOf(k2))
+    .map(k => config(CONTAINER_NAMES).mediaContainer[CONTAINER_NAMES[k]]`
+        max-width: ${grid_conf.container[CONTAINER_NAMES[k]]};
+    `)}
+
+`
+
+export const StyledRow = styled.div<IRowSC>`
+  display: flex;
+  flex-direction: ${props => props.$direction ? props.$direction : "row"};
+  align-items: ${props => props.$align ? props.$align : "stretch"};
+  justify-content: ${props => props.$justify ? props.$justify : "flex-start"};
+  flex-wrap: ${props => props.$wrap ? props.$wrap : "wrap"};
+
+  margin-right: -${gutter};
+  margin-left: -${gutter};
+
+  @media only screen and (max-width: ${responsiveMedia}) {
+     ${({ $mobileSpace }) => $mobileSpace && `
+      gap: 1.6rem;
+    `}
+  }
+`;
+
+export const StyledColumn = styled.div<IColumnSC>`
+  width: 100%;
+  padding-right: ${gutter};
+  padding-left: ${gutter};
+
+  ${({ $xs }) => $xs && `
+    flex-basis: ${100 / grid_conf.gridSize * $xs}%;
+    max-width: ${100 / grid_conf.gridSize * $xs}%;
+  `}
+
+  ${props => Object.keys(props)
+    .filter(k => ~DIMENSION_NAMES.indexOf(k))
+    .sort((k1, k2) => DIMENSION_NAMES.indexOf(k1) - DIMENSION_NAMES.indexOf(k2))
+    .map(k => config(props).media[k]`${Number.isInteger(props[k])
+
+      // Integer value
+      && `
+        flex-basis: ${100 / config(props).gridSize * props[k]}%;
+        max-width: ${100 / config(props).gridSize * props[k]}%;
+      `}
+    `)
+  }
+
+  @media only screen and (max-width: ${responsiveMedia}) {
+    ${({ $mobileOrder }) => $mobileOrder && `
+      order: ${$mobileOrder};
+    `}
+
+    &:empty{
+      display:none
+    }
+  }
+`;
+
+

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

@@ -0,0 +1 @@
+export { Column, Row } from './FlexGrid.component'

package/src/components/atoms/FormField/CheckRadioField/CheckRadioField.component.tsx

@@ -0,0 +1,22 @@
+import React, { Children } from 'react'
+
+import { Field } from 'formik'
+import { ICheckRadioField } from './CheckRadioField.interface'
+import { StyledCheckRadioField } from './CheckRadioField.theme'
+
+const CheckRadioField = ({
+  id,
+  label,
+  className,
+  children,
+  ...props
+}: ICheckRadioField) => {
+  return (
+    <StyledCheckRadioField>
+      {children}
+      <label htmlFor={id}>{label}</label>
+    </StyledCheckRadioField>
+  )
+}
+
+export default CheckRadioField

package/src/components/atoms/FormField/CheckRadioField/CheckRadioField.interface.tsx

@@ -0,0 +1,6 @@
+export type ICheckRadioField = {
+  id?: string
+  label?: string
+  className?: string
+  children?: React.ReactNode
+}