frst-components 0.20.0

package/src/components/LXP/thumbnails/thumbnails.d.ts

@@ -0,0 +1,36 @@
+import React from "react"
+//import * as Icons from '../../shared/icons'
+//mport { content } from '../../shared/icons'
+
+type enumVariant =  'default' | 'add' 
+
+export interface IThumbnails {
+    src?: string,
+    isDisabled: boolean,    
+    isActive?: boolean, 
+    isLoading?: boolean
+    showSwitch?: boolean,  
+    handleClickCourse?: () => void,
+    handleSwitchAtivar?: (checkedValue: boolean) => void,
+    handleClickNew?: () => void,
+    handleClickContent?: () => void, 
+    handleClickPopOverEdit?: () => void,
+    handleClickPopOverMove?: () => void,
+    handleClickPopOverDelete?: () => void,   
+    variant?: enumVariant,
+    title?: string   
+    id?: string,
+    index?: string,
+    provided?: any
+}
+
+export interface IThumbnailsTranslate extends IThumbnails {
+    txtButtonLabel?: string
+    txtAtivarCurso?: string
+    txtCriarNovoCurso?: string
+    txtCriarNovoCurso2?: string
+    txtPopOverEditContent?: string
+    txtPopOverMoveToTrails?: string
+    txtPopOverDeleteContent?: string
+}
+

package/src/components/LXP/thumbnails/thumbnails.stories.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import Thumbnails from './thumbnails'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'LXP/Thumbnails',
+    component: Thumbnails,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <Thumbnails {...args} />
+
+export const Loading = Template.bind({})
+Loading.args = {
+    variant: 'default',
+    isLoading: true,
+}
+
+export const Default = Template.bind({})
+Default.args = {
+    variant: 'default',
+    label: 'Label',
+    src: '',
+    title: 'Blockchain e criptomoedas',    
+    id: 0,
+    index: 0,
+    handleClickCourse: () => { alert('Indo para o curso') },
+    handleClickContent: () => { alert('Click conteúdo') },
+    handleChange: (checkedValue) => { console.log(`curso ativado=${checkedValue}`)},
+    handleClickPopOverEdit: () => { alert('editar conteúdo')},
+    handleClickPopOverMove: () => { alert('mover para trilha')},
+    handleClickPopOverDelete: () => {alert('deletar conteúdo')},
+    txtButtonLabel: "See content",
+    txtAtivarCurso: "Activate Trail",
+    txtPopOverEditContent: "Edit content",
+    txtPopOverMoveToTrails: "Move to Trails",
+    txtPopOverDeleteContent:"Delete content",
+}
+
+export const Add = Template.bind({})
+Add.args = {
+    variant: 'add',
+    handleClickNew: () => { alert('Adicionado novo curso') },
+    txtCriarNovoCurso: "Create new",
+    txtCriarNovoCurso2: "content"
+}
+

package/src/components/LXP/thumbnails/thumbnails.tsx

@@ -0,0 +1,217 @@
+import '../../../shared/global.css'
+import { ThemeProvider } from 'styled-components'
+import { FRSTTheme } from '../../../theme'
+import * as Styles from './thumbnailsStyle'
+import { IThumbnails, IThumbnailsTranslate } from './thumbnails.d'
+import VectorEllipse from './vectorEllipse'
+import VectorCross from './vectorCross'
+import React, { useState, useEffect } from 'react'
+import * as Icons from '../../../shared/icons'
+import Switch from 'react-switch'
+import Button from '../../buttons'
+import { styled } from '@mui/material/styles';
+// import Tooltip from '@components/LXP/tooltip'
+import  PopOver,{ PopOverItem } from '../popOver'
+import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
+
+export default function Thumbnails({ 
+  variant, 
+  src, 
+  showSwitch,
+  handleClickCourse, 
+  handleClickNew, 
+  handleSwitchAtivar,
+  handleClickPopOverDelete,
+  handleClickPopOverEdit,
+  title, 
+  provided, 
+  isDisabled,
+  isLoading,
+  txtButtonLabel, 
+  txtCriarNovoCurso,
+  txtCriarNovoCurso2, 
+  txtAtivarCurso,
+  txtPopOverDeleteContent,
+  txtPopOverMoveToTrails,
+  txtPopOverEditContent,
+  isActive
+}: IThumbnailsTranslate) {
+
+  const defaultImg = "https://i.gyazo.com/35d9c18bbdc6a48d843b0aa24ab2499e.png"
+  const [ativo, setAtivo] = useState<boolean>(isDisabled)
+  const [showModules, setShowModules] = useState<boolean>(false)
+  const [ElementPopover, setElementPopover] = useState(null);
+  const [Loading, setLoading] = useState(isLoading);
+
+  useEffect (() => {
+    setAtivo(isDisabled)
+  }, [isDisabled])
+
+  useEffect(() => {
+    setLoading(isLoading)
+  }, [isLoading]);
+
+  const handleChangeCheck = (checkedValue: boolean) => {
+    setAtivo(checkedValue)
+    handleSwitchAtivar(checkedValue)
+  };
+
+  const handleHoverImage = () => {
+    if (!showModules) {
+      setShowModules(true)
+    }
+  }
+
+  const handleHoverImageOut = () => {
+    if (showModules) {
+      setShowModules(false)
+    }
+  }
+
+  const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
+    <Tooltip {...props} classes={{ popper: className }} />
+  ))(({ theme }) => ({
+    [`& .${tooltipClasses.tooltip}`]: {
+      backgroundColor: theme.palette.common.white,
+      color: 'rgba(0, 0, 0, 0.87)',
+      boxShadow: theme.shadows[1],
+      fontSize: 11,
+    },
+  }));
+
+  return (
+    <>    
+      <ThemeProvider theme={FRSTTheme}>
+        {variant === 'default' ?
+          <>
+            {Loading ?
+              <Styles.LoadingContainer>
+                <Styles.LoadingImage/>
+                <Styles.LoadingContent/>
+                <Styles.LoadingContent style={{width: '50%'}} />
+              </Styles.LoadingContainer>
+              :
+              <Styles.ContainerThumbnails showSwitchIndividual={showSwitch} className={variant = 'default'} ref={provided ? provided.innerRef : null} {...provided ? provided.draggableProps : null}>
+                <Styles.ContainerButton onMouseOut={handleHoverImageOut} className='buttonVisible' active={showModules}>
+                  <Button label={txtButtonLabel ? txtButtonLabel : 'Ver conteúdo'} variant='primary' handleClick={handleClickCourse} />
+                </Styles.ContainerButton>
+                <Styles.GeralThumbnails ref={provided ? provided.innerRef : null} {...provided ? provided.dragHandleProps : null}>
+                  <Styles.Thumbnails>
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                  </Styles.Thumbnails>
+                  <Styles.Thumbnails >
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                  </Styles.Thumbnails>
+                  <Styles.Thumbnails >
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                    <VectorEllipse />
+                  </Styles.Thumbnails>
+                </Styles.GeralThumbnails>
+                <Styles.Image onMouseEnter={handleHoverImage} className='imageHover' src={src || defaultImg} active={ativo} />
+                <Styles.ContainerMain>                  
+                  <LightTooltip title={title}>
+                    <Styles.Typography style={{ color: ativo ? '#000000' : '#bdbdbd' }}>{title && title?.length > 17 ? `${title.substring(0, 17)}...` : title}</Styles.Typography>
+                  </LightTooltip> 
+                  <Styles.IconVertical onClick={(element: any) => {
+                    setElementPopover(element.currentTarget)
+                  }}>
+                    <Icons.MoreVertical fill={ativo ? '#000000' : '#bdbdbd'} />
+                  </Styles.IconVertical>
+                </Styles.ContainerMain>
+                {
+                  showSwitch &&
+                  <Styles.ContainerAtivar>
+                    <Styles.TypographyAtivar active={ativo} style={{ fontWeight: ativo ? 700 : 400 }}>
+                      {txtAtivarCurso ? txtAtivarCurso : 'Ativar Curso'}
+                    </Styles.TypographyAtivar>
+                  </Styles.ContainerAtivar>                
+                }              
+              </Styles.ContainerThumbnails>
+            }
+          </>
+          : variant === 'add' ?
+            <>
+            {Loading ?
+              <Styles.LoadingContainer>
+                <Styles.LoadingImage/>
+                <Styles.LoadingContent />
+                <Styles.LoadingContent style={{width: '50%'}} />
+              </Styles.LoadingContainer>
+              :
+              <Styles.ContainerThumbnailsAdd>
+                <Styles.ContainerEllipse onClick={handleClickNew}>
+                  <VectorCross />
+                </Styles.ContainerEllipse>
+                <Styles.TypographyAdd >
+                  {txtCriarNovoCurso ? txtCriarNovoCurso : 'Criar novo conteúdo'}
+                </Styles.TypographyAdd>
+              </Styles.ContainerThumbnailsAdd>
+            }
+            </>
+            : null
+        }
+        <PopOver
+          element={ElementPopover}
+          onClosePopover={() => {
+            setElementPopover(null)
+          }}
+          variant={'upRight'}
+        >
+          <div style={{display: 'flex', flexDirection: 'column', padding: 0}}>            
+            <PopOverItem 
+              label={txtPopOverEditContent ? txtPopOverEditContent : "Editar Conteúdo"}
+              onClick={() => {
+                handleClickPopOverEdit()
+                setElementPopover(null)
+              }}
+              style={{
+                borderBottom: '1px black solid'
+              }}
+            />
+            {/* <PopOverItem 
+              label={txtPopOverMoveToTrails ? txtPopOverMoveToTrails : "Mover para Trilhas"}
+              onClick={handleClickPopOverMove}
+            /> */}
+            <PopOverItem 
+              label={txtPopOverDeleteContent ? txtPopOverDeleteContent : "Excluir Conteúdo"}
+              onClick={() => {
+                handleClickPopOverDelete()
+                setElementPopover(null)
+              }}
+              icon={<Icons.Trash fill='#C00F00'/>}
+              noBorder={true}
+              isFontBold={true}
+              color={'#C00F00'}
+            />
+          </div>
+        </PopOver>       
+      </ThemeProvider>
+    </>
+  )
+}

package/src/components/LXP/thumbnails/thumbnailsDraggable.tsx

@@ -0,0 +1,73 @@
+import '../../../shared/global.css'
+import { IThumbnailsTranslate } from './thumbnails.d'
+import Thumbnails from './thumbnails'
+import { Draggable } from '@hello-pangea/dnd'
+// import { Draggable } from 'react-beautiful-dnd'
+
+export default function ThumbnailsDraggable({
+   variant, 
+   src, 
+   handleClickCourse, 
+   handleClickNew, 
+   handleClickContent, 
+   handleSwitchAtivar, 
+   title, 
+   id, 
+   index, 
+   isDisabled, 
+   isLoading, 
+   txtButtonLabel, 
+   txtAtivarCurso, 
+   showSwitch,
+   txtCriarNovoCurso,
+   txtCriarNovoCurso2,
+   handleClickPopOverDelete,
+   handleClickPopOverEdit,
+   handleClickPopOverMove,
+   txtPopOverDeleteContent,
+   txtPopOverEditContent,
+   isActive,
+   txtPopOverMoveToTrails 
+  }: IThumbnailsTranslate) {
+
+  return (
+    <>    
+      <Draggable
+        key={id}
+        index={parseInt(index)}
+        draggableId={id}
+      >
+        {(provided) => {
+          return (
+            <Thumbnails 
+              src={src}
+              isDisabled={isDisabled}
+              handleClickCourse={handleClickCourse}
+              handleSwitchAtivar={handleSwitchAtivar}
+              handleClickNew={handleClickNew}
+              handleClickContent={handleClickContent}
+              variant={variant}
+              title={title}
+              id={id}
+              isActive={isActive}
+              isLoading={isLoading}
+              showSwitch={showSwitch}
+              index={index}    
+              provided={provided}
+              txtButtonLabel={txtButtonLabel}
+              txtAtivarCurso={txtAtivarCurso}
+              txtCriarNovoCurso={txtCriarNovoCurso}
+              txtCriarNovoCurso2={txtCriarNovoCurso2}
+              handleClickPopOverDelete={handleClickPopOverDelete}
+              handleClickPopOverEdit={handleClickPopOverEdit}
+              handleClickPopOverMove={handleClickPopOverMove}
+              txtPopOverDeleteContent={txtPopOverDeleteContent}
+              txtPopOverEditContent={txtPopOverEditContent}
+              txtPopOverMoveToTrails={txtPopOverMoveToTrails}
+            />
+          )}
+        }
+      </Draggable>
+    </>
+  )
+}

package/src/components/LXP/thumbnails/thumbnailsStyle.ts

@@ -0,0 +1,183 @@
+import styled, { css } from 'styled-components'
+
+interface IImageBackground {
+    active: boolean
+}
+
+interface IContainerThumbnails {
+    showSwitchIndividual: boolean
+}
+
+
+export const ContainerThumbnails = styled.div<IContainerThumbnails>`
+    width: 180px;
+    min-width: 180px;
+    height: ${( props ) => `${props.showSwitchIndividual ? '352px' : '300px'}`};
+    border-radius: 8px;
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    box-sizing: border-box;
+    position: relative;
+    padding-top: 8px;    
+    z-index: 9999px;
+    user-select: none;
+`
+export const LoadingContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 12px;
+    width: 180px;
+    height: 320px;
+    border-radius: 8px;
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    box-sizing: border-box;
+    position: relative;
+    padding-top: 8px;    
+    z-index: 9999px;
+    user-select: none;
+    
+`
+export const ContainerButton = styled.div<IImageBackground>`    
+    position: absolute;
+    width: 155px;
+    height: 205px;
+    margin-top: 24px;
+    margin-left: 12px;
+    border-radius: 4px;
+    z-index: 1;
+    background-color: #00000090;
+    
+    padding: 0;
+    border: none;
+    display: ${( props ) => `${props.active ? 'flex' : 'none'}`};
+    justify-content: center;
+    align-items: center;
+`
+export const Thumbnails = styled.div`
+    display: flex;
+    justify-content: center;   
+`
+export const Image = styled.img<IImageBackground>`
+    width: 155px;
+    height: 205px;
+    border-radius: 4px;
+    position: absolute;
+    object-fit: cover;
+    margin-top: 10px;
+    margin-left: 12px;
+    filter: ${( props ) => `grayscale(${props.active ? '0' : '1'})`};   
+`
+export const LoadingImage = styled.div`
+    width: 155px;
+    height: 205px;
+    margin-top: 12px;
+    border-radius: 4px;
+    object-fit: cover;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(90deg, rgba(123, 129, 136, 0) 6.43%, rgba(123, 129, 136, 0.2) 22.38%), #D9D9D9;
+    -webkit-animation-duration: 4s;
+    -webkit-animation-fill-mode: forwards;
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-name: placeholderShimmer;
+    -webkit-animation-timing-function: linear;
+`
+
+export const LoadingContent = styled.div`
+    background: linear-gradient(90deg, rgba(123, 129, 136, 0) 6.43%, rgba(123, 129, 136, 0.2) 22.38%), #D9D9D9;
+    color: transparent;
+    border-radius: 16px;
+    width: 90%;
+    height: 0.45em;
+    
+    -webkit-animation-duration: 4s;
+    -webkit-animation-fill-mode: forwards;
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-name: placeholderShimmer;
+    -webkit-animation-timing-function: linear;
+
+`
+
+export const GeralThumbnails = styled.div`    
+   margin: 0;
+`
+export const ContainerMain = styled.div`
+    display: flex;
+    margin-top: 235px;
+    position: relative;
+    align-items: center;
+`
+export const Typography = styled.div`
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 21px;
+    color: ${({ theme }) => theme.colors.shadeBlack};
+    margin-left: 12px; 
+    white-space: wrap;
+    position: absolute;
+`
+export const IconVertical = styled.div`
+    margin-left: 150px;
+    margin-top: 10px;
+    width: 34px;
+    cursor: pointer;
+    position: absolute;
+`
+export const ContainerAtivar = styled.div`
+    display: flex;
+    gap: 6px;
+    margin-top: 45px;
+    position: absolute;
+`
+export const TypographyAtivar = styled.span<IImageBackground>`
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-size: 16px;
+    line-height: 21px;
+    text-align: right;
+    width: 120px;
+    color: ${({ theme }) => theme.colors.shadeBlack};
+`
+/* ################addNew############################ */
+
+export const ContainerThumbnailsAdd = styled.div`
+    width: 177px;
+    height: 352px;
+    border-radius: 8px;
+    border: 1px dashed ${({ theme }) => theme.colors.neutralsGrey5};
+    background-color: ${({ theme }) => theme.colors.neutralsGrey6};
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;    
+    gap: 10px;
+`
+export const ContainerEllipse = styled.button`
+    width: 46px;
+    height: 46px;
+    border-radius: 50%;
+    border: none;
+    background-color: ${({ theme }) => theme.colors.neutralsGrey4};
+    cursor: pointer;
+    padding-top: 5px;
+`
+export const TypographyAdd = styled.div`
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    width: 140px;
+    height: 60px;    
+    line-height: 19px;     
+    color: ${({ theme }) => theme.colors.neutralsGrey4};
+    text-align: center;
+    word-wrap: break-all !important;     
+    white-space:pre-wrap; 
+`

package/src/components/LXP/thumbnails/vectorCross.tsx

@@ -0,0 +1,25 @@
+///-----------------------------------------
+
+import React from "react";
+
+/// Interface do Componente
+interface VectorIconParam {
+    color?: string;
+}
+
+///-----------------------------------------
+/// Componente
+
+/**
+ * 
+ * @componente 
+ */
+export default function VectorCross(props: VectorIconParam) {
+
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12.2051 1.53845V22.8718" stroke="#EBEBEB" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        <path d="M1.53809 12.2051H22.8714" stroke="#EBEBEB" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+    )
+}

package/src/components/LXP/thumbnails/vectorEllipse.tsx

@@ -0,0 +1,38 @@
+///-----------------------------------------
+
+import React from "react";
+
+/// Interface do Componente
+interface VectorIconParam {
+    color?: string;
+}
+
+///-----------------------------------------
+/// Componente
+
+/**
+ * 
+ * @componente 
+ */
+export default function VectorEllipse(props: VectorIconParam) {
+
+    return (
+        <>
+            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <ellipse cx="2.57143" cy="2.35" rx="1.65" ry="1.57143" transform="rotate(-90 2.57143 2.35)" fill="url(#paint0_angular_4285_2572)" />
+                <ellipse cx="2.57143" cy="2.35" rx="1.65" ry="1.57143" transform="rotate(-90 2.57143 2.35)" fill="url(#paint1_radial_4285_2572)" fillOpacity="0.6" />
+                <ellipse cx="2.57143" cy="2.35" rx="1.65" ry="1.57143" transform="rotate(-90 2.57143 2.35)" stroke="#BDBDBD" strokeWidth="0.1" />
+                <defs>
+                    <radialGradient id="paint0_angular_4285_2572" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(2.57143 2.35) rotate(90) scale(1.57143 1.65)">
+                        <stop stopColor="#757575" />
+                        <stop offset="0.526042" stopColor="#757575" stopOpacity="0" />
+                    </radialGradient>
+                    <radialGradient id="paint1_radial_4285_2572" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(2.57143 2.35) rotate(90) scale(1.57143 1.65)">
+                        <stop offset="0.380208" stopColor="white" />
+                        <stop offset="1" stopColor="#EBEBEB" stopOpacity="0" />
+                    </radialGradient>
+                </defs>
+            </svg>
+        </>
+    )
+}

package/src/components/LXP/tooltip/index.tsx

@@ -0,0 +1,15 @@
+import '../../../shared/global.css'
+import { ThemeProvider } from 'styled-components'
+import { FRSTTheme } from '../../../theme'
+import * as Styles from './tooltipStyle'
+
+export default function Tooltip(props) {
+    return (
+        <ThemeProvider theme={FRSTTheme}>
+        <Styles.Tooltip position={props.position}>
+            {props?.children}
+            <Styles.Tooltiptext id="tooltipinfo" position={props.position}>{props?.textTooltip}</Styles.Tooltiptext>
+        </Styles.Tooltip>
+        </ThemeProvider>
+    )
+}

package/src/components/LXP/tooltip/tooltip.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import Tooltip from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'LXP/Tooltip',
+    component: Tooltip,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <Tooltip {...args} />
+
+export const normal = Template.bind({})
+normal.args = {    
+    position: 'top',
+    children: <div>elemento</div>,
+    textTooltip: "Teste"
+}