frst-components 0.20.1 → 0.20.2

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

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

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

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

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

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

@@ -1,25 +0,0 @@
-///-----------------------------------------
-
-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

@@ -1,38 +0,0 @@
-///-----------------------------------------
-
-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

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

@@ -1,19 +0,0 @@
-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"
-}