oddsgate-ds 1.0.169 → 1.0.174

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

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

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

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

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

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

@@ -1,13 +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
-}
+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

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

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

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

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

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

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