oddsgate-ds 1.0.2

package/src/index.ts

@@ -0,0 +1,53 @@
+import * as variables from './styles/variables';
+
+//atoms
+export { default as ImageWrapper } from './components/atoms/ImageWrapper'
+export { default as Heading } from './components/atoms/Heading'
+export { default as RichText } from './components/atoms/RichText'
+export { default as Button } from './components/atoms/Button'
+export { default as Spacer } from './components/atoms/Spacer'
+export { default as Separator } from './components/atoms/Separator'
+export { default as Flex } from './components/atoms/Flex'
+export { default as Icon } from './components/atoms/Icon'
+export { default as Chip } from './components/atoms/Chip'
+export { default as Quote } from './components/atoms/Quote'
+export { default as Video } from './components/atoms/Video'
+export { default as VideoEmbed } from './components/atoms/VideoEmbed'
+export { Row as Row } from './components/atoms/FlexGrid'
+export { Column as Column } from './components/atoms/FlexGrid'
+export { default as FormField } from './components/atoms/FormField'
+export { default as CheckRadioField } from './components/atoms/FormField/CheckRadioField'
+export { default as Loader } from './components/atoms/Loader'
+export { default as EmptyState } from './components/atoms/EmptyState'
+export { default as CloseButton } from './components/atoms/CloseButton'
+export { default as ScrollingNav } from './components/atoms/ScrollingNav'
+export { default as Marquee } from './components/atoms/Marquee'
+
+//common
+export { default as PortalComponent } from './components/common/PortalComponent'
+
+//molecules
+export { Accordion as Accordion } from './components/molecules/Accordion'
+export { AccordionItem as AccordionItem } from './components/molecules/Accordion'
+export { default as Modal } from './components/molecules/Modal'
+export { default as OffCanvas } from './components/molecules/OffCanvas'
+export { default as Dropdown } from './components/molecules/Dropdown'
+export { DropdownItem as DropdownItem } from './components/molecules/Dropdown'
+export { default as ShareModal } from './components/molecules/ShareModal'
+export { default as IconBox } from './components/molecules/IconBox'
+export { default as IconTitle } from './components/molecules/IconTitle'
+export { default as BlogCard } from './components/molecules/BlogCard'
+export { default as TeamCard } from './components/molecules/TeamCard'
+export { default as ProjectCard } from './components/molecules/ProjectCard'
+// //organisms
+export { default as Slider } from './components/organisms/Slider'
+export { default as Cover } from './components/organisms/Cover'
+
+export { iconsList } from './helpers/getIcons'
+
+export { default as GlobalStyles } from './styles/Global'
+
+export { default as clickOutSideToClose } from './helpers/clickOutsideToClose'
+
+export { variables };
+

package/src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

package/src/stories/Documentation/Colors.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Flex from '@/components/atoms/Flex'
+import React from 'react'
+import { colors } from '@/styles/variables'
+
+export default {
+  title: 'Documentation/Colors',
+  tags: ['autodocs']
+} as Meta
+
+export const Colors: StoryObj = {
+  render: args => (
+    <div style={{ width: '100%' }}>
+      <Flex direction={'row'} wrap={'wrap'} style={{ gap: '4px' }}>
+        {colors &&
+          Object.keys(colors).map((color, i) => (
+            <div
+              key={`color-${i}`}
+              style={{
+                background: `var(--color-${color})`,
+                width: '100px',
+                height: '75px'
+              }}
+            >
+              <span>{color}</span>
+            </div>
+          ))}
+      </Flex>
+    </div>
+  ),
+  args: {}
+}

package/src/stories/Documentation/Headings.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Heading from '@/components/atoms/Heading'
+import React from 'react'
+import { typography } from '@/styles/variables'
+
+export default {
+  title: 'Documentation/Typography',
+  tags: ['autodocs']
+} as Meta
+
+export const Typography: StoryObj = {
+  render: args => (
+    <div style={{ width: '100%' }}>
+      {typography &&
+        Object.keys(typography).map((typo, i) => (
+          <Heading key={`typo-${i}`} tag={'span'} size={typo}>
+            Lorem ipsum
+          </Heading>
+        ))}
+    </div>
+  ),
+  args: {}
+}

package/src/stories/Documentation/Icons.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Flex from '@/components/atoms/Flex'
+import Heading from '@/components/atoms/Heading'
+import Icon from '@/components/atoms/Icon'
+import React from 'react'
+import Spacer from '@/components/atoms/Spacer'
+import { iconsList } from '@/helpers/getIcons'
+
+export default {
+  title: 'Documentation/Icons',
+  tags: ['autodocs']
+} as Meta
+
+export const Icons: StoryObj = {
+  render: args => (
+    <div style={{ width: '100%' }}>
+      <div>
+        <Heading size={'h4'}>How To:</Heading>
+        <ol style={{ paddingLeft: '20px' }}>
+          <li>
+            Create your font at{' '}
+            <a href="https://icomoon.io/" target="_blank">
+              Icomoon
+            </a>
+          </li>
+          <li>Download your font</li>
+          <li>
+            Replace <em>/src/iconList.json</em> content with{' '}
+            <em>selection.json</em> content
+          </li>
+          <li>
+            Replace all the files from <em>/public/fonts/</em> with{' '}
+            <em>fonts/</em> from the zip
+          </li>
+          <li>
+            Replace all css rules in <em>/src/styles/Icon</em> with the new ones
+            from style.css
+          </li>
+          <li>Bump DS version</li>
+          <li>Move miewfont folder to nextjs public folder</li>
+        </ol>
+      </div>
+      <Spacer height={6} />
+      <span className="d-block h4 mb-adapt-4">
+        <strong>There are {Object.values(iconsList).length} icons</strong>
+      </span>
+      <Spacer height={3} />
+      <Flex direction={'row'} wrap={'wrap'} style={{ gap: '4px' }}>
+        {iconsList &&
+          iconsList.map((icon, i) => (
+            <span
+              key={i}
+              style={{
+                width: '16.666%',
+                border: '1px solid rgb(229, 229, 229)',
+                textAlign: 'center'
+              }}
+            >
+              <Icon icon={icon} style={{ fontSize: '3rem', padding: '2rem' }} />
+              <Heading
+                size={'h6'}
+                style={{ background: 'rgb(244, 244, 244)', lineHeight: '3em' }}
+              >
+                {icon}
+              </Heading>
+            </span>
+          ))}
+      </Flex>
+    </div>
+  ),
+  args: {}
+}

package/src/stories/Documentation/JWT.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import React from 'react'
+import RichText from '@/components/atoms/RichText'
+
+export default {
+  title: 'Documentation/JWT',
+  tags: ['autodocs']
+} as Meta
+
+export const JWT: StoryObj = {
+  render: args => (
+    <div style={{ width: '100%' }}>
+      <p>Generate token to enter in .env file</p>
+
+      <code style={{ display: 'block', margin: '24px 0' }}>
+        <RichText>
+          {`
+        mutation LoginUser {
+          login( input: {
+            clientMutationId: "uniqueId",
+            username: "your_login",
+            password: "your password"
+          } ) {
+            authToken
+            user {
+              id
+              name
+            }
+          }
+        }
+        `}
+        </RichText>
+      </code>
+      <p>
+        Then generate a salt to use in wp-config define var
+        <br />
+        https://api.wordpress.org/secret-key/1.1/salt/
+      </p>
+
+      <code style={{ display: 'block', margin: '24px 0' }}>
+        <RichText>
+          {`
+        mutation RefreshAuthToken {
+          refreshJwtAuthToken(
+            input: {
+              clientMutationId: "uniqueId"
+              jwtRefreshToken: "your_refresh_token",
+          }) {
+            authToken
+          }
+        }
+        `}
+        </RichText>
+      </code>
+      <p>Refresh code</p>
+    </div>
+  ),
+  args: {}
+}

package/src/stories/Documentation/Utilities.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Flex from '@/components/atoms/Flex'
+import Heading from '@/components/atoms/Heading'
+import React from 'react'
+import { grid_conf } from '@/styles/variables'
+import { utilities } from '@/styles/utilities'
+
+export default {
+  title: 'Documentation/Utilities',
+  tags: ['autodocs']
+} as Meta
+
+export const Utilities: StoryObj = {
+  render: args => (
+    <div style={{ width: '100%' }}>
+      <Flex
+        direction={'row'}
+        align={'center'}
+        wrap={'wrap'}
+        style={{ gap: '4px' }}
+      >
+        {Object.keys(utilities).map((utility, i) => {
+          const property = utilities[utility]?.property
+          const className = utilities[utility]?.class || property
+          const values = utilities[utility]?.values
+          const responsive = utilities[utility]?.responsive
+
+          return (
+            <div key={`utilities-${i}`} className={'w-100 mb-6'}>
+              <Heading tag="span" size="texts" style={{ fontWeight: 700 }}>
+                {utility}
+              </Heading>
+              <pre>
+                <code>
+                  {Object.keys(values as object).map((key, i) => {
+                    if (!values) return <></>
+
+                    return (
+                      <>
+                        <span key={`utility-${i}`}>
+                          {`.${`${className}-${key}`}{${property}: ${
+                            values[key]
+                          };}`}
+                          <br />
+                        </span>
+                        {responsive && (
+                          <span>
+                            {`.${className}-md-${key}{@media (min-width: ${grid_conf.breakpoints.$md}){ ${property}: ${values[key]};}}`}
+                            <br />
+                          </span>
+                        )}
+                      </>
+                    )
+                  })}
+                </code>
+              </pre>
+            </div>
+          )
+        })}
+      </Flex>
+    </div>
+  ),
+  args: {}
+}

package/src/styles/Global.ts

@@ -0,0 +1,296 @@
+import {
+  colors,
+  desktop_width,
+  fontName,
+  mobile_width,
+  radius,
+  responsiveMedia,
+  shadows,
+  spaces,
+  tablet_width,
+  typography,
+  zIndexes,
+} from '@/styles/variables'
+import { fontSize, generateUtilities, utilities } from './utilities';
+
+import { createGlobalStyle } from 'styled-components';
+import resetStyles from './reset';
+
+const GlobalStyles = createGlobalStyle`
+  :root {
+    --body-fontName: ${fontName};
+    --body-fontFamily: "${fontName}", sans-serif;
+
+    --responsiveMedia: ${responsiveMedia};
+
+    ${Object.keys(colors).map(
+  (color, i) => `--color-${color}: ${Object.values(colors)[i]};`
+)}
+
+    ${Object.keys(typography).map(
+  (typo, i) => `--fontSize-${typo}: ${Object.values(typography)[i].size};`
+)}
+
+    ${Object.keys(spaces).map(
+  (space, i) => `--space-${space}: ${Object.values(spaces)[i]};`
+)}
+
+    ${Object.keys(shadows).map(
+  (shadow, i) => `--shadow-${shadow}: ${Object.values(shadows)[i]};`
+)}
+
+    ${Object.keys(radius).map(
+  (radial, i) => `--radius-${radial}: ${Object.values(radius)[i]};`
+)}
+  }
+
+  ${resetStyles}
+
+  @font-face {
+    font-family: "miewfont";
+    src: url("/fonts/miewfont/miewfont.ttf");
+    src: url("/fonts/miewfont/miewfont.eot#iefix") format("embedded-opentype"),
+      url("/fonts/miewfont/miewfont.ttf") format("truetype"),
+      url("/fonts/miewfont/miewfont.woff") format("woff"),
+      url("/fonts/miewfont/miewfont.svg#miewfont") format("svg");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  *,
+  *:after,
+  *:before {
+    box-sizing: border-box;
+    text-decoration: none;
+  }
+
+  html,
+  body {
+    background: transparent;
+    min-height: 100%;
+  }
+
+  html {
+    font-size: clamp(14px, calc(100vw / ${mobile_width} * 14), 16px);  //reset font size for mobile
+    line-height: 1;
+
+    color: var(--color-gray90);
+    background: var(--color-white);
+
+    @media only screen and (min-width: 580px) { //reset font size for tablet
+      font-size: clamp(14px, calc(100vw / ${tablet_width} * 14), 16px) ;
+    }
+
+    @media only screen and (min-width: ${responsiveMedia}) {  //reset font size for desktop
+      font-size: clamp(14px, calc(100vw / ${desktop_width} * 16), 16px) ;
+    }
+
+    @media only screen and (min-width: 1680px) {  //reset font size for retina
+      //Needed for retina screens
+      font-size: 16px;
+    }
+  }
+
+  body {
+    position: relative;
+
+    font-family: var(--body-fontFamily);
+    ${fontSize('texts')};
+
+    -webkit-overflow-scrolling: touch;
+
+    -webkit-font-smoothing: antialiased !important;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility !important;
+  }
+
+  a {
+    color: inherit;
+    outline: none;
+    text-decoration: none;
+  }
+
+  img,
+  picture {
+    display: block;
+    max-width: 100%;
+    height: auto;
+  }
+
+  picture{
+    position: relative;
+  }
+
+  svg {
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 100%;
+  }
+
+  textarea {
+    resize: none;
+  }
+
+  strong {
+    font-weight: 700;
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  p a {
+    color: var(--color-secondary);
+  }
+
+  hr {
+    border: 0;
+    border-top: 1px solid;
+  }
+
+  pre {
+    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+    clear: both;
+    color: #fff;
+    background: #1b1b1b;
+    padding: 0;
+    -moz-tab-size: 2;
+    -o-tab-size: 2;
+    tab-size: 2;
+    -ms-word-break: normal;
+    word-break: normal;
+    -webkit-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+    position: relative;
+    line-height: 28px;
+    border-radius: 8px;
+    overflow: hidden;
+
+    & code {
+      background: none;
+      white-space: pre;
+      -webkit-overflow-scrolling: touch;
+      overflow-x: scroll;
+      display: block;
+      max-width: 100%;
+      min-width: 100px;
+      font-size: 16px;
+      padding: 15px 20px 12px 22px;
+      line-height: 1.75;
+    }
+  }
+
+  select{
+    -webkit-appearance:none;
+  }
+
+  .ios,
+  .ios * {
+    // causes dom events events to be fired
+    cursor: pointer;
+  }
+
+
+  /***************** TYPOGRAPHY *****************/
+  ${Object.keys(typography).map(
+  (typo, i) =>
+    `.${typo}{
+      ${fontSize(typo)}
+    }`
+)}
+
+  p, li{
+    ${fontSize('texts')}
+  }
+  /***************** LAYOUT *****************/
+  #progress-bar {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    height: 0.2rem;
+    width: 100%;
+
+    background: var(--color-secondary-70);
+
+    z-index: ${zIndexes.progress};
+
+    transition: all 0.1s $ease-out-expo;
+  }
+
+  #__next {
+    width: 100%;
+    height: 100%;
+    // overflow-x: hidden;
+  }
+
+  .main-page {
+    position: relative;
+    display: flex;
+    flex-flow: row wrap;
+    min-height: 100%;
+
+    z-index: ${zIndexes.content};
+    transition: all 1.3s $ease-out-expo;
+  }
+
+  .main-content {
+    position: relative;
+    width: 100%;
+    align-self: flex-start;
+    overflow-x: hidden;
+    z-index: 1;
+  }
+
+  .no-scroll{
+    overflow:hidden;
+  }
+
+  .preview-box {
+    position: fixed;
+    top: 12px;
+    left: 50%;
+
+    padding: 12px 22px;
+
+    color: var(--color-primary70);
+    background: var(--color-white);
+    box-shadow: 0px 2px 16px rgba(${colors.black}, 0.05);
+    border-radius: 50px;
+
+    transform: translateX(-50%);
+    z-index: ${zIndexes.preloader};
+  }
+
+  .textEllipsis{
+    display: -webkit-box !important;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: break-spaces;
+  }
+
+  .linker{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    text-indent: -200%;
+    white-space: nowrap;
+    font-size: 0;
+    opacity: 0;
+    z-index: 103;
+  }
+
+  ${Object.keys(utilities).map((util, i) => `${generateUtilities(util, '')}`)}
+`
+
+
+export default GlobalStyles;

package/src/styles/grid.ts

@@ -0,0 +1,70 @@
+// @ts-nocheck
+/* eslint-disable */
+
+import { css } from 'styled-components';
+import { grid_conf } from '@/styles/variables';
+
+const BASE_CONF = grid_conf
+
+const configCache: { container: any; breakpoints: any; media: any; }[] = []
+const makeCacheId = () => JSON.stringify({})
+const resolveConfig = () => {
+  const conf = {
+    ...BASE_CONF,
+    container: {
+      ...BASE_CONF.container as object,
+    },
+    breakpoints: {
+      ...BASE_CONF.breakpoints as object,
+    },
+    media: {},
+    mediaContainer: {}
+  }
+
+  conf.media = Object.keys(conf.breakpoints).reduce((media, breakpoint) => {
+    const breakpointWidth = conf.breakpoints[breakpoint]
+    media[breakpoint] = makeMedia(
+      [conf.mediaQuery, breakpoint !== 0 && `(min-width: ${breakpointWidth})`]
+        .filter(Boolean)
+        .join(' and ')
+    )
+    return media
+  }, {})
+
+  conf.mediaContainer = Object.keys(conf.container).reduce((media, container) => {
+    const containerWidth = conf.container[container]
+    media[container] = makeMedia(
+      [conf.mediaQuery, container !== 0 && `(min-width: ${containerWidth})`]
+        .filter(Boolean)
+        .join(' and ')
+    )
+    return media
+  }, {})
+
+  return conf
+}
+
+export const DIMENSION_NAMES = Object.keys(BASE_CONF.breakpoints)
+export const CONTAINER_NAMES = Object.keys(BASE_CONF.container)
+
+export default function config(props) {
+  const cacheId = makeCacheId(props)
+  if (configCache[0] === cacheId) {
+    return configCache[1]
+  }
+
+  const conf = resolveConfig(props)
+
+  configCache[0] = cacheId
+  configCache[1] = conf
+
+  return conf
+}
+
+export function makeMedia(media) {
+  return (...args) => css`
+    @media ${media} {
+      ${css(...args)}
+    }
+  `
+}