frst-components 0.20.0

package/src/components/quantidadeDesafios/index.tsx

@@ -0,0 +1,152 @@
+import * as Styles from './quantidadeDesafios'
+
+interface ObjItemDesafio {
+  title: string
+  count: number
+  percentage: string
+  title_en?: string
+  title_es?: string
+}
+
+interface ObjQuantidadeDesafio {
+  definicao: ObjItemDesafio
+  hipoteses: ObjItemDesafio
+  testes: ObjItemDesafio
+  resultados: ObjItemDesafio
+  proximosPassos: ObjItemDesafio
+  finalizados: ObjItemDesafio
+  languagem?: string
+}
+
+export default function QuantidadeDesafios({
+  definicao,
+  hipoteses,
+  testes,
+  resultados,
+  proximosPassos,
+  finalizados,
+  languagem
+}: ObjQuantidadeDesafio) {
+  return (
+    <Styles.ContainerDesafios>
+      <Styles.ContainerItemDesafio>
+        <Styles.ItemDesafio>
+          <Styles.QuantidadeDesafio>
+            <h1>{definicao.count}</h1>
+            <p>{definicao.percentage}</p>
+          </Styles.QuantidadeDesafio>
+        </Styles.ItemDesafio>
+        <Styles.ItemDesafio>
+          <Styles.QuantidadeDesafio>
+            <h1>{hipoteses.count}</h1>
+            <p>{hipoteses.percentage}</p>
+          </Styles.QuantidadeDesafio>
+        </Styles.ItemDesafio>
+        <Styles.ItemDesafio>
+          <Styles.QuantidadeDesafio>
+            <h1>{testes.count}</h1>
+            <p>{testes.percentage}</p>
+          </Styles.QuantidadeDesafio>
+        </Styles.ItemDesafio>
+        <Styles.ItemDesafio>
+          <Styles.QuantidadeDesafio>
+            <h1>{resultados.count}</h1>
+            <p>{resultados.percentage}</p>
+          </Styles.QuantidadeDesafio>
+        </Styles.ItemDesafio>
+        <Styles.ItemDesafio>
+          <Styles.QuantidadeDesafio>
+            <h1>{proximosPassos.count}</h1>
+            <p>{proximosPassos.percentage}</p>
+          </Styles.QuantidadeDesafio>
+        </Styles.ItemDesafio>
+        <Styles.ItemDesafio>
+          <Styles.QuantidadeDesafio>
+            <h1>{finalizados.count}</h1>
+            <p>{finalizados.percentage}</p>
+          </Styles.QuantidadeDesafio>
+        </Styles.ItemDesafio>
+      </Styles.ContainerItemDesafio>
+      <Styles.containerTitleDesafio>
+        <Styles.TitleDesafiosWhite>
+          {languagem
+            ? languagem === 'en-US'
+              ? definicao.title_en
+                ? definicao.title_en
+                : definicao.title
+              : languagem === 'es'
+              ? definicao.title_es
+                ? definicao.title_es
+                : definicao.title
+              : definicao.title
+            : definicao.title}
+        </Styles.TitleDesafiosWhite>
+        <Styles.TitleDesafiosGrey>
+          {languagem
+            ? languagem === 'en-US'
+              ? hipoteses.title_en
+                ? hipoteses.title_en
+                : hipoteses.title
+              : languagem === 'es'
+              ? hipoteses.title_es
+                ? hipoteses.title_es
+                : hipoteses.title
+              : hipoteses.title
+            : hipoteses.title}
+        </Styles.TitleDesafiosGrey>
+        <Styles.TitleDesafiosWhite>
+          {languagem
+            ? languagem === 'en-US'
+              ? testes.title_en
+                ? testes.title_en
+                : testes.title
+              : languagem === 'es'
+              ? testes.title_es
+                ? testes.title_es
+                : testes.title
+              : testes.title
+            : testes.title}
+        </Styles.TitleDesafiosWhite>
+        <Styles.TitleDesafiosGrey>
+          {languagem
+            ? languagem === 'en-US'
+              ? resultados.title_en
+                ? resultados.title_en
+                : resultados.title
+              : languagem === 'es'
+              ? resultados.title_es
+                ? resultados.title_es
+                : resultados.title
+              : resultados.title
+            : resultados.title}
+        </Styles.TitleDesafiosGrey>
+        <Styles.TitleDesafiosWhite>
+          {languagem
+            ? languagem === 'en-US'
+              ? proximosPassos.title_en
+                ? proximosPassos.title_en
+                : proximosPassos.title
+              : languagem === 'es'
+              ? proximosPassos.title_es
+                ? proximosPassos.title_es
+                : proximosPassos.title
+              : proximosPassos.title
+            : proximosPassos.title}
+        </Styles.TitleDesafiosWhite>
+        <Styles.TitleDesafiosGrey>
+          {languagem
+            ? languagem === 'en-US'
+              ? finalizados.title_en
+                ? finalizados.title_en
+                : finalizados.title
+              : languagem === 'es'
+              ? finalizados.title_es
+                ? finalizados.title_es
+                : finalizados.title
+              : finalizados.title
+            : finalizados.title}
+        </Styles.TitleDesafiosGrey>
+      </Styles.containerTitleDesafio>
+    </Styles.ContainerDesafios>
+  )
+}

package/src/components/quantidadeDesafios/quantidadeDesafios.stories.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+
+import QuantidadeDesafios from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Base/QuantidadeDesafios',
+  component: QuantidadeDesafios
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <QuantidadeDesafios {...args} />
+
+export const normal = Template.bind({})
+normal.args = {
+  languagem: 'es',
+  definicao: {
+    title: 'definicao',
+    count: 111,
+    percentage: '10%',
+    title_en: 'definition',
+    title_es: 'definición'
+  },
+  hipoteses: {
+    title: 'hipoteses',
+    count: 222,
+    percentage: '20%'
+  },
+  testes: {
+    title: 'testes',
+    count: 333,
+    percentage: '30%'
+  },
+  resultados: {
+    title: 'resultados',
+    count: 444,
+    percentage: '40%'
+  },
+  proximosPassos: {
+    title: 'Próximos Passos',
+    count: 555,
+    percentage: '50%'
+  },
+  finalizados: {
+    title: 'finalizados',
+    count: 777,
+    percentage: '70%'
+  }
+}

package/src/components/quantidadeDesafios/quantidadeDesafios.ts

@@ -0,0 +1,121 @@
+import styled from 'styled-components'
+import imgSeta from './imgSetas/setasDesafios.svg'
+
+export const ContainerDesafios = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`
+export const ContainerItemDesafio = styled.div`
+  width: 100%;
+  background-image: url(${imgSeta});
+  background-repeat: no-repeat;
+  padding: 1rem;
+  display: flex;
+  background-size: 100%;
+  background-position: top 5rem;
+  background-position: -2rem;
+  justify-content: center;
+  margin-bottom: 1rem;
+`
+
+export const ItemDesafio = styled.div`
+  width: 14%;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-right: 1.2rem;
+  margin-left: 0.1rem;
+`
+
+export const QuantidadeDesafio = styled.div`
+  width: 85%;
+  background: #ffffff;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  margin-bottom: 1.5rem;
+  margin-top: 1rem;
+  height: 8rem;
+  border-radius: 100%;
+  border-width: 0px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  h1 {
+    margin: 0;
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 28px;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    color: #222222;
+    word-wrap: break-word;
+    max-width: 90%;
+    word-break: break-all;
+  }
+  p {
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19px;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    color: #222222;
+  }
+`
+
+export const containerTitleDesafio = styled.div`
+  width: 100%;
+  height: 24px;
+  padding: 0 4rem;
+  display: flex;
+  flex-direction: row;
+`
+
+export const TitleDesafiosWhite = styled.div`
+  width: 240px;
+  height: 24px;
+  background: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 30px;
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 15px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: #d14211;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  z-index: 9999;
+  margin-right: -2rem;
+  margin-left: -2rem;
+`
+export const TitleDesafiosGrey = styled.div`
+  width: 240px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.4);
+  border: 1px solid #d1d5db;
+  border-radius: 30px;
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 15px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: #d14211;
+  display: flex;
+  justify-content: center;
+  position: relative;
+`

package/src/components/sandbox.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import PageSandbox from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Page/Sandbox',
+    component: PageSandbox,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <PageSandbox {...args} />
+
+export const sandboxPage = Template.bind({})
+sandboxPage.args = {
+    pageHeight: '340px',
+    pageWidth: '500px'
+}

package/src/components/scroll-container/index.tsx

@@ -0,0 +1,189 @@
+import React, { useEffect, useState } from 'react'
+import '../../shared/global.css'
+import { ThemeProvider } from 'styled-components'
+import { FRSTTheme } from '../../theme'
+import * as Styles from './scrollContainerStyles'
+
+import { ArrowScrollLeft, ArrowScrollRight } from '@shared/icons'
+import { IScrollContainer } from './scrollContainer'
+import { randID } from './scrollContainer.utils'
+
+import { WrapperHorizontal, WrapperContent, ButtonControll, CardTest } from './scrollContainerStyles'
+
+export default function ScrollContainer({
+  children,
+  type,
+  isVisibleControlsButtons,
+  positionArrowButton,
+  marginTopArrrowButton,
+  stepMove,
+  className,
+  styles,
+  sizeArrowButton,
+  marginsArrowButton,
+  horizontalMarginInternScroll,
+  refreshResize
+}: IScrollContainer) {
+  const [actionAreaButtonLeft, setActionAreaButtonLeft] = useState(false)
+  const [actionAreaButtonRight, setActionAreaButtonRight] = useState(false)
+
+  const [iDScroll, setIDScroll] = useState(`iDScroll-${randID()}`)
+
+  const [isVisibleArrowButtonLeft, setIsVisibleArrowButtonLeft] = useState(false)
+  const [isVisibleArrowButtonRight, setIsVisibleArrowButtonRight] = useState(false)
+
+  const scrollToLeft = () => {
+    var objDiv = document.getElementById(iDScroll)
+    if (objDiv !== null) {
+      objDiv.scrollLeft - stepMove <= 0 ? setIsVisibleArrowButtonLeft(false) : setIsVisibleArrowButtonLeft(true)
+      setIsVisibleArrowButtonRight(true)
+      objDiv.scrollLeft = objDiv.scrollLeft - stepMove
+    }
+  }
+
+  const scrollToRight = () => {
+    var objDiv = document.getElementById(iDScroll)
+    if (objDiv !== null) {
+      objDiv.scrollLeft + stepMove <= 0 ? setIsVisibleArrowButtonLeft(false) : setIsVisibleArrowButtonLeft(true)
+      objDiv.offsetWidth + objDiv.scrollLeft + stepMove >= objDiv.scrollWidth
+        ? setIsVisibleArrowButtonRight(false)
+        : setIsVisibleArrowButtonRight(true)
+      objDiv.scrollLeft = objDiv.scrollLeft + stepMove
+    }
+  }
+
+  useEffect(() => {
+    var objDiv = document.getElementById(iDScroll)
+    if (objDiv && objDiv.clientWidth && objDiv.clientWidth < objDiv.scrollWidth) setIsVisibleArrowButtonRight(true)
+    else setIsVisibleArrowButtonRight(false)
+  }, [])
+
+  useEffect(() => {
+    updateSize()
+  }, [refreshResize])
+
+  const updateSize = () => {
+    var objDiv = document.getElementById(iDScroll)
+    if (objDiv !== null) {
+      objDiv.offsetWidth + objDiv.scrollLeft >= objDiv.scrollWidth
+        ? setIsVisibleArrowButtonRight(false)
+        : setIsVisibleArrowButtonRight(true)
+      objDiv.scrollLeft - stepMove <= 0 ? setIsVisibleArrowButtonLeft(false) : setIsVisibleArrowButtonLeft(true)
+
+      if (objDiv && objDiv.clientWidth && objDiv.clientWidth < objDiv.scrollWidth) setIsVisibleArrowButtonRight(true)
+      else setIsVisibleArrowButtonRight(false)
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('resize', updateSize)
+    updateSize()
+    return () => window.removeEventListener('resize', updateSize)
+  }, [])
+
+  return (
+    <ThemeProvider theme={FRSTTheme}>
+      <div style={{ ...styles }} className={className}>
+        <WrapperHorizontal>
+          {isVisibleControlsButtons && positionArrowButton != 'bottom' && (
+            <ButtonArrow
+              isLeftButton={true}
+              onClick={scrollToLeft}
+              onActionArea={setActionAreaButtonLeft}
+              actionArea={actionAreaButtonLeft}
+              sizeButton={sizeArrowButton}
+              isVisible={isVisibleArrowButtonLeft}
+              margin={marginsArrowButton ? (marginsArrowButton + 50) * -1 + 'px' : '-138px'}
+              ArrowScroll={ArrowScrollLeft}
+              marginTopArrrowButton={marginTopArrrowButton}
+            />
+          )}
+          <WrapperContent
+            id={iDScroll}
+            paddingIntern={horizontalMarginInternScroll ? horizontalMarginInternScroll : '150px'}
+          >
+            {children}
+          </WrapperContent>
+          {isVisibleControlsButtons && positionArrowButton != 'bottom' && (
+            <ButtonArrow
+              isLeftButton={false}
+              onClick={scrollToRight}
+              onActionArea={setActionAreaButtonRight}
+              actionArea={actionAreaButtonRight}
+              sizeButton={sizeArrowButton}
+              isVisible={isVisibleArrowButtonRight}
+              margin={marginsArrowButton ? (marginsArrowButton + 50) * -1 + 'px' : '-138px'}
+              ArrowScroll={ArrowScrollRight}
+              marginTopArrrowButton={marginTopArrrowButton}
+            />
+          )}
+        </WrapperHorizontal>
+        <div style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
+          {isVisibleControlsButtons && positionArrowButton == 'bottom' && (
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'row',
+                marginTop: marginTopArrrowButton ? marginTopArrrowButton : '5px'
+              }}
+            >
+              <ButtonArrow
+                isLeftButton={true}
+                onClick={scrollToLeft}
+                onActionArea={setActionAreaButtonLeft}
+                actionArea={actionAreaButtonLeft}
+                sizeButton={sizeArrowButton}
+                isVisible={isVisibleArrowButtonLeft}
+                margin={marginsArrowButton ? marginsArrowButton + 'px' : '10px'}
+                ArrowScroll={ArrowScrollLeft}
+                marginTopArrrowButton={marginTopArrrowButton}
+              />
+              <ButtonArrow
+                isLeftButton={false}
+                onClick={scrollToRight}
+                onActionArea={setActionAreaButtonRight}
+                actionArea={actionAreaButtonRight}
+                sizeButton={sizeArrowButton}
+                isVisible={isVisibleArrowButtonRight}
+                margin={marginsArrowButton ? marginsArrowButton + 'px' : '10px'}
+                ArrowScroll={ArrowScrollRight}
+                marginTopArrrowButton={marginTopArrrowButton}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </ThemeProvider>
+  )
+}
+
+function ButtonArrow({
+  isLeftButton,
+  onClick,
+  onActionArea,
+  actionArea,
+  sizeButton,
+  isVisible,
+  margin,
+  ArrowScroll,
+  marginTopArrrowButton
+}) {
+  return (
+    <ButtonControll
+      isLeftButton={isLeftButton}
+      onClick={onClick}
+      onMouseOver={() => onActionArea(true)}
+      onMouseOut={() => onActionArea(false)}
+      sizeButton={sizeButton ? sizeButton : 80}
+      visibility={isVisible ? 'visible' : 'hidden'}
+      marginsArrowButton={margin}
+      marginTopArrrowButton={marginTopArrrowButton}
+    >
+      <ArrowScroll
+        fill={actionArea ? '#fff' : '#000'}
+        height={sizeButton ? (sizeButton / 2.3).toFixed(0).toString() : '34'}
+        width={sizeButton ? (sizeButton / 4.3).toFixed(0).toString() : '18'}
+      />
+    </ButtonControll>
+  )
+}

package/src/components/scroll-container/scrollContainer.d.ts

@@ -0,0 +1,17 @@
+import React from "react"
+
+export interface IScrollContainer {
+    children?: any,
+    type?: string,
+    stepMove?: number,
+    isVisibleControlsButtons?: boolean,
+    handleClick?:() => void, 
+    className?: string,
+    styles?: any,
+    sizeArrowButton?: number,
+    marginsArrowButton?: number,
+    horizontalMarginInternScroll?: string,
+    positionArrowButton?: string,
+    marginTopArrrowButton?: string,
+    refreshResize?: number
+}

package/src/components/scroll-container/scrollContainer.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+import ScrollContainer from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Learning Tech/Scroll Container',
+    component: ScrollContainer,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <ScrollContainer {...args} />
+
+export const normal = Template.bind({})
+normal.args = {
+    type: "horizontal",
+    stepMove: 100,
+    isVisibleControlsButtons: true,
+    handleClick: (e : any) => { alert(e) }, 
+    className: null,
+    styles: {marginLeft:'0'},
+    sizeArrowButton: 80,
+    marginsArrowButton: 50,
+    children: 
+    <>
+        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+    </>
+}
+
+export const bottom = Template.bind({})
+bottom.args = {
+    type: "horizontal",
+    stepMove: 100,
+    isVisibleControlsButtons: true,
+    handleClick: (e : any) => { alert(e) }, 
+    className: null,
+    styles: {marginLeft:'0'},
+    sizeArrowButton: 80,
+    marginsArrowButton: 50,
+    positionArrowButton: 'bottom',
+    children: 
+    <>
+        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+    </>
+}

package/src/components/scroll-container/scrollContainer.utils.ts

@@ -0,0 +1,11 @@
+import React from "react"
+
+interface IUtilsConvertStringLink {
+    value: string
+}
+
+export function randID() {
+    return Math.random()
+        .toString(36)
+        .substr(2, 9);
+};