oddsgate-ds 1.0.2

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

@@ -0,0 +1,35 @@
+import { ISocialLinks } from './SocialLinks.interface'
+import Icon from '../Icon/Icon.component'
+import React from 'react'
+import { StyledSocialLinks } from './SocialLinks.theme'
+
+const SocialLinks = ({
+  variant,
+  socials,
+  className,
+  style,
+  ...props
+}: ISocialLinks) => {
+  if (!socials) return <></>
+
+  return (
+    <StyledSocialLinks variant={variant} className={className} style={style}>
+      {Object.keys(socials).map((social: string) => {
+        return (
+          <li>
+            <a
+              href={socials[social]}
+              target="_blank"
+              aria-label={social}
+              rel="noreferrer"
+            >
+              <Icon icon={`icon-${social}`}></Icon>
+            </a>
+          </li>
+        )
+      })}
+    </StyledSocialLinks>
+  )
+}
+
+export default SocialLinks

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

@@ -0,0 +1,8 @@
+import { CSSProperties } from 'react';
+
+export type ISocialLinks = {
+  variant?: string
+  socials?: Record<string, string>
+  className?: string,
+  style?: CSSProperties
+}

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

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ISocialLinks } from './SocialLinks.interface'
+import React from 'react'
+import SocialLinks from './SocialLinks.component'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/SocialLinks',
+  component: SocialLinks,
+  tags: ['autodocs'],
+  argTypes: {}
+} as Meta
+
+export const Light: StoryObj<ISocialLinks> = {
+  render: args => <SocialLinks {...args} />,
+  args: {
+    variant: 'light',
+    socials: {
+      facebook: 'https://www.facebook.com/wearemiew',
+      instagram: 'https://www.instagram.com/wearemiew/',
+      youtube: 'https://www.youtube.com/user/miewshapes',
+      linkedIn: 'https://www.linkedin.com/company/2470068/admin/',
+      dribble: 'https://dribbble.com/wearemiew',
+      behance: 'https://www.behance.net/miew/',
+      medium: 'https://medium.com/@wearemiew'
+    }
+  }
+}
+
+export const Dark: StoryObj<ISocialLinks> = {
+  args: {
+    ...Light.args,
+    variant: 'dark'
+  }
+}

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

@@ -0,0 +1,52 @@
+import styled, { css } from 'styled-components';
+
+import { ISocialLinks } from './SocialLinks.interface';
+import { colors } from '@/styles/variables';
+
+export const StyledSocialLinks = styled.ul<ISocialLinks>`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  & li{
+    & a{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      width: 2.8rem;
+      height: 2.8rem;
+      border-radius: 50%;
+      text-align: center;
+
+      transition: all 0.3s linear;
+
+      &:hover{
+        opacity: 0.6;
+      }
+    }
+
+    & i{
+      font-size: 1.6rem;
+    }
+  }
+
+  ${(props) => {
+    switch (props.variant) {
+      case "light": default:
+        return css`
+          & li a{
+            color: ${colors.white};
+            background-color: ${colors.primary70};
+          }
+        `;
+      case "dark":
+        return css`
+          & li a{
+            color: ${colors.primary70};
+            background-color: ${colors.white};
+          }
+        `;
+    }
+  }}
+`;

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

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

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

@@ -0,0 +1,27 @@
+import { ISpacer } from './Spacer.interface'
+import React from 'react'
+import { StyledSpacer } from './Spacer.theme'
+
+const Spacer = ({
+  id,
+  color,
+  customHeight,
+  height,
+  className,
+  ...props
+}: ISpacer) => {
+  return (
+    <StyledSpacer
+      id={id}
+      className={className}
+      style={{
+        backgroundColor: color ? color : ``,
+        height: customHeight ? customHeight : `var(--space-${String(height)})`
+      }}
+      aria-hidden="true"
+      {...props}
+    />
+  )
+}
+
+export default Spacer

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

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+import { spaces } from '@/styles/variables';
+
+export type ISpacer = {
+  id?: string
+  color?: string
+  height?: keyof typeof spaces | string | number
+  customHeight?: string
+  className?: string;
+  style?: CSSProperties
+}

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

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ISpacer } from '../Spacer/Spacer.interface'
+import React from 'react'
+import Spacer from '../Spacer/Spacer.component'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Spacer',
+  component: Spacer,
+  tags: ['autodocs'],
+  // argTypes: {
+  //   height: {
+  //     control: 'text'
+  //   },
+  //   color: {
+  //     control: 'colorpicker'
+  //   }
+  // }
+} as Meta
+
+export const Simple: StoryObj<ISpacer> = {
+  render: args => <Spacer {...args} />,
+  args: {
+    customHeight: '50px',
+    color: '#000'
+  }
+}

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

@@ -0,0 +1,8 @@
+import styled, { css } from 'styled-components';
+
+import { ISpacer } from './Spacer.interface';
+
+export const StyledSpacer = styled.div<ISpacer>`
+
+
+`;

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

@@ -0,0 +1 @@
+export { default } from "./Spacer.component";

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

@@ -0,0 +1,116 @@
+import React, { useRef } from 'react'
+import { StyledVideo, StyledVideoMask, StyledVideoPlay } from './Video.theme'
+
+import { IVideo } from './Video.interface'
+
+const Video = ({
+  src,
+  poster,
+  autoplay,
+  controls,
+  loop,
+  muted,
+  playsInline,
+  className,
+  style,
+  ...props
+}: IVideo) => {
+  const maskRef: any = useRef()
+  const videoRef: any = useRef()
+  let isPlaying: boolean = false
+
+  const setFramed = () => {
+    const video = document.createElement('video')
+    const source = document.createElement('source')
+
+    autoplay && video.setAttribute('autoPlay', '')
+    controls && video.setAttribute('controls', '')
+    loop && video.setAttribute('loop', '')
+    muted && video.setAttribute('muted', '')
+    playsInline && video.setAttribute('playsInline', '')
+
+    source.setAttribute('src', src || '')
+    source.setAttribute('type', 'video/mp4')
+
+    video.appendChild(source)
+    video.pause()
+
+    video.onplaying = function () {
+      isPlaying = true
+    }
+    video.onpause = function () {
+      isPlaying = false
+    }
+
+    maskRef.current.replaceWith(video)
+
+    let observerObj = new IntersectionObserver(
+      (entries, observer) => {
+        const element: any = entries[0].target
+        if (entries[0].isIntersecting) {
+          if (
+            element.paused &&
+            !isPlaying &&
+            element.getAttribute('autoplay') != undefined
+          ) {
+            element.muted = true
+            element.play()
+          }
+        } else {
+          if (!element.paused && isPlaying) {
+            element.pause()
+          }
+        }
+      },
+      {
+        rootMargin: '0px',
+        threshold: 0.3
+      }
+    )
+
+    setTimeout(() => {
+      observerObj.observe(video)
+    }, 500)
+  }
+
+  return (
+    <StyledVideo className={className} style={style}>
+      {poster ? (
+        <StyledVideoMask
+          ref={maskRef}
+          style={{ backgroundImage: `url(${poster})` }}
+          onClick={() => {
+            setFramed()
+          }}
+        >
+          <StyledVideoPlay>
+            <svg
+              viewBox="0 0 62 72"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M1.30184 71.661C1.70029 71.8869 2.1419 72 2.58334 72C3.03735 72.0002 3.49152 71.8797 3.89774 71.6435L60.7311 38.2131C61.5182 37.7486 62 36.9073 62 35.9982C62 35.0891 61.5182 34.2478 60.7311 33.7832L3.89774 0.352633C3.10067 -0.109486 2.11412 -0.119525 1.30184 0.335024C0.496993 0.792041 0 1.64337 0 2.56761V69.4284C0 70.3526 0.496993 71.204 1.30184 71.661ZM5 65V7L54 36.0001L5 65Z"
+              />
+            </svg>
+          </StyledVideoPlay>
+        </StyledVideoMask>
+      ) : (
+        <video
+          autoPlay={autoplay}
+          controls={controls}
+          loop={loop}
+          muted={muted}
+          playsInline={playsInline}
+        >
+          <source type="video/mp4" src={src} />
+        </video>
+      )}
+
+    </StyledVideo>
+  )
+}
+
+export default Video

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

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react'
+
+export type IVideo = {
+  src?: string
+  poster?: string
+  autoplay?: boolean
+  controls?: boolean
+  loop?: boolean
+  muted?: boolean
+  playsInline?: boolean
+  className?: string
+  style?: CSSProperties
+}

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

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Heading from '@/components/atoms/Heading'
+import { IVideo } from './Video.interface'
+import React from 'react'
+import Spacer from '@/components/atoms/Spacer'
+import Video from './Video.component'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Video',
+  component: Video,
+  argTypes: {}
+} as Meta
+
+export const Default: StoryObj<IVideo> = {
+  render: args => (
+    <div>
+      <Video {...args} />
+      <Spacer customHeight={'3rem'} />
+      <Heading tag="h2" size="h2">
+        Scroll to see autoplay in action
+      </Heading>
+      <Spacer customHeight={'38rem'} />
+    </div>
+  ),
+  args: {
+    autoplay: true,
+    controls: true,
+    loop: true,
+    muted: true,
+    playsInline: true,
+    poster:
+      'https://miew.pt/wp-content/uploads/2021/02/featured-thumb-bmcar-2x-scaled.jpg',
+    src: 'https://miew.pt/wp-content/uploads/2021/01/miew_emotion_wide_v5.mp4'
+  }
+}

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

@@ -0,0 +1,44 @@
+import { colors, radius } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { IVideo } from './Video.interface';
+
+export const StyledVideo = styled.div<IVideo>`
+  display: block;
+  position: relative;
+  border-radius: ${radius.md};
+  overflow: hidden;
+
+  & video {
+    width: 100%;
+    border-radius: inherit;
+  }
+`;
+export const StyledVideoMask = styled.div<IVideo>`
+  aspect-ratio: 16/9;
+
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  cursor: pointer;
+`;
+
+
+export const StyledVideoPlay = styled.div<IVideo>`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 10%;
+  transform: translate(-50%,-50%);
+  z-index: 1;
+
+  pointer-events: none;
+
+  & svg {
+    fill: ${colors.white};
+    width: 100%;
+    height: auto;
+    transition: all 0.4s linear;
+  }
+`;

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

@@ -0,0 +1 @@
+export { default } from "./Video.component";

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

@@ -0,0 +1,109 @@
+import React, { useRef } from 'react'
+import {
+  StyledVideo,
+  StyledVideoMask,
+  StyledVideoPlay
+} from './VideoEmbed.theme'
+
+import { IVideoEmbed } from './VideoEmbed.interface'
+
+const VideoEmbed = ({
+  embed,
+  poster,
+  autoplay,
+  controls,
+  loop,
+  muted,
+  playsInline,
+  className,
+  style,
+  ...props
+}: IVideoEmbed) => {
+  const maskRef: any = useRef()
+
+  const framed: boolean = false
+  let videoId: any = []
+  let thumb: string = poster || ''
+  let embedElement: string = ''
+
+  if (embed && !framed) {
+    if (embed.indexOf('/watch?v=') !== -1) {
+      videoId = embed.split('/watch?v=')
+      videoId = videoId[videoId.length - 1]
+      if (embed.indexOf('&') !== -1) {
+        videoId = videoId.split('&')
+        videoId = videoId[0]
+      }
+    } else if (embed.indexOf('/') !== -1) {
+      videoId = embed.split('/')
+      videoId = videoId[videoId.length - 1]
+      if (embed.indexOf('?') !== -1) {
+        videoId = videoId.split('?')
+        videoId = videoId[0]
+      }
+    }
+
+    const videoAttrs = `autoPlay=${autoplay}&controls=${controls}&loop=${loop}&muted=${muted}&playsInline=${playsInline}`
+
+    if (embed.indexOf('youtube') >= 0) {
+      embedElement = `https://www.youtube.com/embed/${videoId}?${videoAttrs}&enablejsapi=1`
+
+      if (!poster) {
+        thumb = `https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`
+      }
+    } else if (embed.indexOf('vimeo') >= 0) {
+      embedElement = `https://player.vimeo.com/video/${videoId}?${videoAttrs}`
+
+      if (!poster) {
+        thumb = `https://i.vimeocdn.com/video/${videoId}_640.jpg`
+      }
+    }
+  }
+
+  const setFramed = () => {
+    const iframe = document.createElement('iframe')
+
+    iframe.setAttribute('frameborder', '0')
+    iframe.setAttribute('allow', 'fullscreen; autoplay')
+    iframe.setAttribute('allowfullscreen', '1')
+
+    iframe.setAttribute('src', embedElement)
+
+    maskRef.current.replaceWith(iframe)
+
+    setTimeout(() => {
+      iframe?.contentWindow?.postMessage(
+        '{"event":"command","func":"playVideo","args":""}',
+        '*'
+      )
+    }, 500)
+  }
+
+  return (
+    <StyledVideo className={className} style={style}>
+      <StyledVideoMask
+        ref={maskRef}
+        style={{ backgroundImage: `url(${thumb})` }}
+        onClick={() => {
+          setFramed()
+        }}
+      >
+        <StyledVideoPlay>
+          <svg
+            viewBox="0 0 62 72"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M1.30184 71.661C1.70029 71.8869 2.1419 72 2.58334 72C3.03735 72.0002 3.49152 71.8797 3.89774 71.6435L60.7311 38.2131C61.5182 37.7486 62 36.9073 62 35.9982C62 35.0891 61.5182 34.2478 60.7311 33.7832L3.89774 0.352633C3.10067 -0.109486 2.11412 -0.119525 1.30184 0.335024C0.496993 0.792041 0 1.64337 0 2.56761V69.4284C0 70.3526 0.496993 71.204 1.30184 71.661ZM5 65V7L54 36.0001L5 65Z"
+            />
+          </svg>
+        </StyledVideoPlay>
+      </StyledVideoMask>
+    </StyledVideo>
+  )
+}
+
+export default VideoEmbed

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

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react'
+
+export type IVideoEmbed = {
+  embed?: string
+  poster?: string
+  autoplay?: boolean
+  controls?: boolean
+  loop?: boolean
+  muted?: boolean
+  playsInline?: boolean
+  className?: string
+  style?: CSSProperties
+}

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

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { IVideoEmbed } from './VideoEmbed.interface'
+import VideoEmbed from './VideoEmbed.component'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/VideoEmbed',
+  component: VideoEmbed,
+  argTypes: {}
+} as Meta
+
+export const Embed: StoryObj<IVideoEmbed> = {
+  args: {
+    autoplay: true,
+    controls: true,
+    loop: true,
+    muted: true,
+    playsInline: true,
+    poster: '',
+    embed: 'https://www.youtube.com/watch?v=Ijk4j-r7qPA'
+  }
+}

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

@@ -0,0 +1,45 @@
+import { colors, radius } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { IVideoEmbed } from './VideoEmbed.interface';
+
+export const StyledVideo = styled.div<IVideoEmbed>`
+  display: block;
+  position: relative;
+  border-radius: ${radius.md};
+  overflow: hidden;
+
+  & iframe {
+    width: 100%;
+    aspect-ratio: 16/9;
+    border-radius: inherit;
+  }
+`;
+
+export const StyledVideoMask = styled.div<IVideoEmbed>`
+  aspect-ratio: 16/9;
+
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  cursor: pointer;
+`;
+
+export const StyledVideoPlay = styled.div<IVideoEmbed>`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 10%;
+  transform: translate(-50%,-50%);
+  z-index: 1;
+
+  pointer-events: none;
+
+  & svg {
+    fill: ${colors.white};
+    width: 100%;
+    height: auto;
+    transition: all 0.4s linear;
+  }
+`;

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

@@ -0,0 +1 @@
+export { default } from "./VideoEmbed.component";

package/src/components/common/PortalComponent/PortalComponent.tsx

@@ -0,0 +1,48 @@
+import { useLayoutEffect, useState } from 'react'
+
+import { createPortal } from 'react-dom'
+
+function createWrapperAndAppendToBody(wrapperId: string) {
+  const wrapperElement = document.createElement('div')
+  wrapperElement.setAttribute('id', wrapperId)
+  document.body.appendChild(wrapperElement)
+  return wrapperElement
+}
+
+type PortalComponentProps = {
+  wrapperId: string
+  children?: React.ReactNode
+}
+
+function PortalComponent({
+  wrapperId = 'react-portal-wrapper',
+  children
+}: PortalComponentProps): React.ReactPortal | null {
+  const [wrapperElement, setWrapperElement] = useState<HTMLElement | null>(null)
+
+  useLayoutEffect(() => {
+    let element = document.getElementById(wrapperId)
+    let systemCreated = false
+    // if element is not found with wrapperId or wrapperId is not provided,
+    // create and append to body
+    if (!element) {
+      systemCreated = true
+      element = createWrapperAndAppendToBody(wrapperId)
+    }
+    setWrapperElement(element)
+
+    return () => {
+      // delete the programatically created element
+      if (systemCreated && element && element.parentNode) {
+        element.parentNode.removeChild(element)
+      }
+    }
+  }, [wrapperId])
+
+  // wrapperElement state will be null on very first render.
+  if (wrapperElement === null) return null
+
+  return createPortal(children, wrapperElement)
+}
+
+export default PortalComponent

package/src/components/common/PortalComponent/index.ts

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