oddsgate-ds 1.0.112 → 1.0.114

package/src/components/organisms/CircularSliderTeste/CircularSliderTeste.component.tsx

@@ -0,0 +1,190 @@
+import React, { useEffect, useRef, useState } from 'react'
+import {
+  StyledCircularSliderTeste,
+  StyledCircularSliderTesteContent,
+  StyledCircularSliderTesteSlide,
+  StyledCircularSliderTesteSlides,
+  StyledCircularSliderTesteWrapper
+} from './CircularSliderTeste.theme'
+
+import Heading from '@/components/atoms/Heading/Heading.component';
+import { ICircularSliderTeste } from './CircularSliderTeste.interface'
+import { debounce } from '@/helpers/events';
+import useMediaMatch from '@/helpers/useMediaMatch';
+
+const CircularSliderTeste = ({
+  cta,
+  content,
+  style,
+  className,
+}: ICircularSliderTeste) => {
+
+  const [slideContent, setSlideContent] = useState({
+    name: content && content[0].name,
+    role: content && content[0].role,
+  });
+  const slider = useRef<HTMLDivElement>();
+  const wrapper = useRef<HTMLDivElement>();
+  const slidesHolder = useRef<HTMLDivElement>();
+  const contentHolder = useRef<HTMLDivElement>();
+
+  //force 12 items
+  if (content && content.length < 12) {
+    let counter = 0;
+    for (let i = content.length; i <= 12; i++) {
+      content[i] = content[counter];
+      counter++;
+    }
+  }
+
+  useEffect(() => {
+    if (!slidesHolder.current) return //bail out;
+
+    const animationDuration = 600;
+
+    const slides = Array.prototype.slice.call(slidesHolder?.current?.children);
+
+    let slidesSize = 0;
+
+    let currentAngle =  -180;
+
+    const stepAngle = 2 * Math.PI / slidesHolder?.current?.children.length;
+    // const stepAngle = 0.52;
+
+    let currentSlide = 0;
+
+    slidesHolder.current.style.transitionDuration = animationDuration + 'ms';
+    const slidesRepositioning = (r) => {
+      for (let i = 0; i < slides.length; i++) {
+
+        let x = r * Math.cos(stepAngle * i - Math.PI / 2),
+          y = r * Math.sin(stepAngle * i - Math.PI / 2);
+
+        slides[i].style.transform = 'translate( ' + x + 'px, ' + y + 'px ) rotate( ' + ((stepAngle * 180 / Math.PI * i) + 4) + 'deg )';
+        // slides[i].style.transform = 'translate( ' + x + 'px, ' + y + 'px )';
+      };
+    }
+    const setSize = (radius: number) => {
+      if (!wrapper.current || !slidesHolder.current) return //bail out;
+
+      const slideSize = 0.15;
+
+      wrapper.current.style.width = 2 * radius + 'px';
+      wrapper.current.style.height = 2 * radius + 'px';
+
+      let r = 2 * radius * (1 - slideSize);
+      slidesHolder.current.style.width = r*2 + 'px';
+      slidesHolder.current.style.height = r/2 + 'px';
+      slidesRepositioning(r / 2);
+
+      slidesSize = Math.min(2 * radius * slideSize, stepAngle * radius * (1 - slideSize) - 50);
+
+      for (let i = 0; i < slides.length; i++) {
+        slides[i].style.width = slides[i].style.height = slidesSize + 'px';
+      };
+
+    }
+
+    const sliderResize = debounce(() => {
+      const sliderSize = 1;
+
+      let radius,
+        w = slider?.current ? slider?.current?.getBoundingClientRect().width : 0,
+        h = slider?.current ? slider?.current.getBoundingClientRect().height : 0;
+
+      2 * h <= w ? radius = h * sliderSize : radius = (w / 2) * sliderSize;
+
+      setSize(Math.round(radius));
+    }, 250)
+
+    const addStyle = () => {
+      setTimeout(() => {
+        contentHolder?.current?.classList.add('active');
+        slides[currentSlide].classList.add('active');
+      }, 400);
+    };
+    const removeStyle = () => {
+      contentHolder?.current?.classList.remove('active');
+      const prevElement = slides[currentSlide];
+      setTimeout(() => {
+        content && setSlideContent(content[currentSlide] as any)
+        prevElement.classList.remove('active');
+      }, 400);
+    };
+
+    const rotateSlider = (e) => {
+      const newSlide = slides.indexOf(e.target);
+
+      if (currentSlide === newSlide || !slidesHolder?.current) return;
+
+      removeStyle();
+
+      let multiplier = 0;
+      let direction = "";
+
+      if (currentSlide === 0 && newSlide === (slides.length - 1)) {
+        multiplier = -1;
+        direction = "-";
+      } else if (currentSlide === (slides.length - 1) && newSlide === 0) {
+        multiplier = 1;
+        direction = "+";
+      } else {
+        multiplier = newSlide - currentSlide
+        direction = currentSlide < newSlide ? "+" : "-";
+      }
+
+      const newAngle = Math.abs((stepAngle * 180 / Math.PI) * multiplier);
+
+
+      currentAngle = direction === "-" ? (currentAngle + newAngle) : (currentAngle - newAngle);
+      currentSlide = newSlide;
+
+      slidesHolder.current.style.transform = 'rotate( ' + currentAngle + 'deg )';
+      addStyle();
+    }
+
+    sliderResize();
+    addStyle();
+
+
+    for (let i = 0; i < slides.length; i++) {
+      slides[i].addEventListener('click', rotateSlider, { passive: true });
+    };
+
+    window.addEventListener('resize', sliderResize)
+
+    return () => {
+      for (let i = 0; i < slides.length; i++) {
+        slides[i].removeEventListener('click', rotateSlider);
+      };
+
+      window.removeEventListener('resize', sliderResize)
+    }
+  }, [])
+
+  if (!content) return <></>
+
+  return (
+    <StyledCircularSliderTeste ref={slider as any} className={className} style={style}>
+      <StyledCircularSliderTesteWrapper ref={wrapper as any}>
+        <StyledCircularSliderTesteSlides ref={slidesHolder as any}>
+          {content?.map((item, index) => {
+            return (
+              <StyledCircularSliderTesteSlide key={`slide-${index}`}>{item.img}</StyledCircularSliderTesteSlide>
+            )
+          })}
+        </StyledCircularSliderTesteSlides>
+      </StyledCircularSliderTesteWrapper>
+      <StyledCircularSliderTesteContent ref={contentHolder as any}>
+        <div className='mb-4'>
+          <Heading tag="span" size="h2" className='color-primary50 fw-bold'>{slideContent?.name}</Heading>
+          <Heading tag="span" size="h4" className='color-secondary50'>{slideContent?.role}</Heading>
+        </div>
+        {cta}
+      </StyledCircularSliderTesteContent>
+    </StyledCircularSliderTeste>
+
+  )
+}
+
+export default CircularSliderTeste

package/src/components/organisms/CircularSliderTeste/CircularSliderTeste.interface.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+
+export type ICircularSliderTeste = {
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  content?: {
+    name?: string,
+    role?: string,
+    img?: React.ReactNode
+  }[],
+  cta?: React.ReactNode
+}

package/src/components/organisms/CircularSliderTeste/CircularSliderTeste.stories.tsx

@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Button from '@/components/atoms/Button/Button.component'
+import CircularSliderTeste from './CircularSliderTeste.component'
+import { ICircularSliderTeste } from './CircularSliderTeste.interface'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/CircularSliderTeste',
+  component: CircularSliderTeste,
+  tags: ['autodocs']
+} as Meta
+
+const image = (
+  <img
+    width="100%"
+    height="100%"
+    sizes="100vw"
+    decoding="async"
+    src="/assets/placeholder.png"
+    alt="Empty state"
+  />
+)
+
+export const Simple: StoryObj<ICircularSliderTeste> = {
+  render: args => <div style={{ width: "100%", height: "200dvh" }}><CircularSliderTeste {...args}></CircularSliderTeste></div>,
+  args: {
+    cta: <Button variant={'secondary'}>Join the Team</Button>,
+    content: [
+      {
+        name: 'My name 1',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 2',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 3',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 4',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 5',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 6',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 7',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 9',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 9',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 10',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 11',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 1§2',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 13',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 14',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 15',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 16',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 17',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 19',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 19',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 20',
+        role: 'My role',
+        img: image
+      }
+    ],
+    className: "h-100",
+  }
+}

package/src/components/organisms/CircularSliderTeste/CircularSliderTeste.theme.ts

@@ -0,0 +1,65 @@
+import { ICircularSliderTeste } from './CircularSliderTeste.interface';
+import { responsiveMedia } from '@/styles/variables';
+import styled from 'styled-components';
+
+export const StyledCircularSliderTeste = styled.div<ICircularSliderTeste>`
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+`;
+
+export const StyledCircularSliderTesteWrapper = styled.div<ICircularSliderTeste>`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  margin: 0 auto;
+  margin-right: 0;
+`;
+
+export const StyledCircularSliderTesteSlides = styled.div<ICircularSliderTeste>`
+  transform-origin: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  z-index: 100;
+  transform: rotate(-180deg);
+`;
+export const StyledCircularSliderTesteSlide = styled.div<ICircularSliderTeste>`
+  position: absolute;
+  transform-origin: center;
+  transition: .3s linear all;
+  filter: brightness(70%);
+  cursor: pointer;
+
+  & img{
+    height: 100%;
+    object-fit: cover;
+    pointer-events:none;
+    filter: grayscale(100%);
+    transform: rotate(90deg);
+  }
+
+  &.active{
+    filter: brightness(100%);
+  }
+`;
+
+export const StyledCircularSliderTesteContent = styled.div<ICircularSliderTeste>`
+  width: 50%;
+  text-align: center;
+  margin: auto;
+
+  &>div{
+    opacity: 0;
+    transform: translate(0%, 5%);
+    transition: all 0.3s ease;
+  }
+  &.active{
+    &>div{
+      opacity: 1;
+      transform: translate(0%, 0%);
+    }
+  }
+`;
+

package/src/components/organisms/CircularSliderTeste/index.ts

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