frst-components 0.20.1 → 0.20.2

package/src/components/LXP/contentThumbnails/contentThumbnailsStyle.ts

@@ -1,170 +0,0 @@
-import styled, { css } from 'styled-components'
-
-export const Container = styled.div`
-    width: 270px;
-    min-height: 409px;
-    background-color: ${({ theme }) => theme.colors.primary2};
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center; 
-    position: relative;
-    box-sizing: border-box;
-    padding: 16px 16px 24px 16px;
-`
-export const Image = styled.img`
-    width: 236px;
-    height: 310px;
-    border-radius: 8px;
-    object-fit: cover;
-    object-position: center;
-`
-export const Content = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    position: relative;
-    width: 100%;
-    margin-top: 20px;
-`
-export const Typography = styled.p`     
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 20px;
-    line-height: 23px;
-    display: flex;
-    align-items: center;
-    margin-right: 20px;
-    color: ${({ theme }) => theme.colors.shadeWhite};
-    word-wrap: break-word;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 4; /* start showing ellipsis when 3rd line is reached */
-    white-space: pre-wrap;
-    text-overflow: ellipsis;
-`
-export const Select = styled.div`
-    background: none;
-    width: 20px;
-    height: 20px;
-    position: absolute;
-    right: 0;
-    top: 0;
-    cursor: pointer;
-
-    &:hover {
-        opacity: 0.5;
-    }
-`
-export const ContainerCard = styled.div`
-    width: 270px;
-    height: 76px;
-    background-color: ${({ theme }) => theme.colors.shadeWhite};
-    display: flex;
-    align-items: center;
-    padding: 8px;
-    position: relative;
-    overflow: hidden;
-    border-bottom: 1px solid ${({theme}) => theme.colors.borderPrimary};
-
-    &:hover {
-        background-color: ${({ theme }) => theme.colors.neutralsGrey9};
-    }
-
-    &:active {
-        background-color: ${({theme}) => theme.colors.neutralsGrey6};
-    }
-    
-    &:hover .trash {
-        right: 15px;       
-    }
-`
-export const Thumbnails = styled.div`
-    width: 17.29px;
-    height: 51px;    
-    margin-left: -11px;       
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;    
-`
-export const Title = styled.div`
-    width: 166px;
-    margin-left: 12px;
-    word-wrap: break-word;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2; /* start showing ellipsis when 3rd line is reached */
-    white-space: pre-wrap;
-    text-overflow: ellipsis;
-` 
-export const IconTrash = styled.div`
-    cursor: pointer;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    right: -15px;
-    position: absolute;
-    transition: all .5s linear;
-    
-`
-// ##############TRILHA##############
-
-export const ContainerTrilha = styled.div`
-    width: 270px;
-    height: 499px;
-    background-color: ${({ theme }) => theme.colors.primary2};
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    position: relative;       
-
-`
-export const ContainerChoice = styled.div`
-    width: 232px;
-    height: 75px;
-    position: absolute;
-    top: 0;
-    margin: 20px;    
-`
-export const TypographyChoice = styled.p`            
-        font-family: 'PT Sans';
-        font-style: normal;
-        font-weight: 400;
-        font-size: 16px;
-        line-height: 21px;
-        color: #ffffff;
-        padding-bottom: 8px;
-        white-space: nowrap;    
-`
-export const SelectChoice = styled.select`    
-        width: 232px;
-        height: 48px;
-        border-radius: 8px;
-        border: 1px solid #E0E0E0;
-        color: #9c9c9c;
-        padding-left: 10px;
-`
-export const ImageChoice = styled.img`
-    width: 232px;
-    height: 310px;
-    margin-bottom: 70px;
-    border-radius: 8px;
-    position: absolute;
-    object-fit: cover;
-    bottom: 0;    
-`
-export const ContentChoice = styled.div`
-    display: flex;
-    flex-direction: row;
-    position: absolute ;
-    margin-top: 425px;
-`
-export const OptionChoice = styled.option`
-    color: #9c9c9c;
-`

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

@@ -1,208 +0,0 @@
-import '../../../shared/global.css'
-import { ThemeProvider } from 'styled-components'
-import { FRSTTheme } from '../../../theme'
-import * as Styles from './contentThumbnailsStyle'
-import { IContentThumbnails } from './contentThumbnails'
-import VectorDown from './vectorDown'
-import VectorUp from './vectorUp'
-import VectorEllipse from './vectorEllipse'
-import { useEffect, useState } from 'react'
-import * as Icons from '../../../shared/icons'
-import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
-// import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'
-
-export enum typeContent {
-  Content,
-  Video,
-  PodCast,
-  QuizSucessError,
-  Quiz,
-  Certificate
-}
-
-export default function ContentThumbnails({
-  label,
-  contentList,
-  variant,
-  src,
-  disabled,
-  icon,
-  onChange,
-  handleClick,
-  handleReloadItens,
-  title,
-  removeContentList,
-  onChangeOrder,
-  isOpen
-}: IContentThumbnails) {
-  const defaultImg =
-    'https://i.gyazo.com/35d9c18bbdc6a48d843b0aa24ab2499e.png'
-
-  const iconList = [
-    <Icons.Content fill={'#EE4C15'} />,
-    <Icons.Video fill={'#EE4C15'} />,
-    <Icons.PodCast fill={'#EE4C15'} />,
-    <Icons.QuizSucessError fill={'#EE4C15'} />,
-    <Icons.Quiz fill={'#EE4C15'} />,
-    <Icons.Certificate fill={'#EE4C15'} />
-  ]
-
-  const [contentListData, setContentListData] = useState(contentList ? contentList : [])
-  const [up, setUp] = useState(isOpen)
-
-  const reorder = (list, startIndex, endIndex) => {
-    const result = Array.from(list)
-    const [removed] = result.splice(startIndex, 1)
-    result.splice(endIndex, 0, removed)
-
-    return result
-  }
-  const change = () => {
-    {
-      up ? setUp(false) : setUp(true)
-      return handleReloadItens()
-    }
-  }
-
-  useEffect(() => {
-    setContentListData(contentList ? contentList : [])
-  }, [contentList])
-
-  const onDragEnd = (result) => {
-    if (!result.destination) {
-      return
-    }
-    const reorderedItems = reorder(contentListData, result.source.index, result.destination.index)
-    setContentListData(reorderedItems)
-    onChangeOrder(reorderedItems)
-  }
-
-  function Exibir() {
-
-    return (
-      <DragDropContext onDragEnd={onDragEnd}>
-        <Droppable droppableId="contentListData">
-          {(provided: any) => (
-            <div style={{backgroundColor: '#D1D5DB', height: contentListData.length > 0 ? 'auto' : '100vh', width: 270}} ref={provided.innerRef}>
-              {contentListData?.map((item, index) => {
-                return (
-                  <Draggable draggableId={item.title} index={index} key={index}>
-                    {(provided: any) => (
-                      <Styles.ContainerCard ref={provided.innerRef} {...provided.draggableProps}>
-                        <Styles.Thumbnails
-                          ref={provided.innerRef}
-                          {...provided.draggableProps}
-                          {...provided.dragHandleProps}
-                        >
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                        </Styles.Thumbnails>
-                        <Styles.Thumbnails
-                          ref={provided.innerRef}
-                          {...provided.draggableProps}
-                          {...provided.dragHandleProps}
-                        >
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                        </Styles.Thumbnails>
-                        <Styles.Thumbnails
-                          ref={provided.innerRef}
-                          {...provided.draggableProps}
-                          {...provided.dragHandleProps}
-                        >
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                          <VectorEllipse />
-                        </Styles.Thumbnails>
-                        <div onClick={() => {handleClick(item)}} style={{display: 'flex', flexDirection: 'row', alignItems: 'center', height: '100%', cursor: 'pointer'}}>
-                          {iconList[item.type]}
-                          <Styles.Title >{item.title}</Styles.Title>
-                        </div>
-                        <Styles.IconTrash className="trash" onClick={() => {removeContentList(item)}} >
-                          <Icons.TrashIcon fill={'#C00F00'} />
-                        </Styles.IconTrash>
-                      </Styles.ContainerCard>
-                    )}
-                  </Draggable>
-                )
-              })}
-            </div>
-          )}
-        </Droppable>
-      </DragDropContext>
-    )
-  }
-
-  return (
-    <ThemeProvider theme={FRSTTheme}>
-      {variant === 'individualCourse' ? (
-        <div>
-          <Styles.Container className={(variant = 'individualCourse')}>
-            <Styles.Image src={src || defaultImg} />
-            <Styles.Content>
-              <Styles.Typography>{title}</Styles.Typography>
-              <Styles.Select onClick={change}>{up ? <VectorUp /> : <VectorDown />}</Styles.Select>
-            </Styles.Content>
-          </Styles.Container>
-
-          <div >
-          {up ? (
-            <Exibir />
-          ) : null}
-          </div>
-        </div>
-      ) : variant === 'trilha' ? (
-        <div>
-          <Styles.ContainerTrilha className={(variant = 'trilha')}>
-            <Styles.ContainerChoice>
-              <Styles.TypographyChoice>Escolha o curso que deseja editar</Styles.TypographyChoice>
-              <Styles.SelectChoice placeholder={title} value={title} onChange={onChange}>
-                <Styles.OptionChoice value={title}>{title}</Styles.OptionChoice>
-              </Styles.SelectChoice>
-            </Styles.ContainerChoice>
-            <Styles.ImageChoice src={src || defaultImg} />
-            <Styles.ContentChoice>
-              <Styles.Typography>{title}</Styles.Typography>
-              <Styles.Select onClick={change}>{up ? <VectorUp /> : <VectorDown />}</Styles.Select>
-            </Styles.ContentChoice>
-          </Styles.ContainerTrilha>
-
-          {up ? (
-            <div style={{backgroundColor: '#D1D5DB', width: 270}}>
-              <Exibir />
-            </div>
-          ) : null}
-        </div>
-      ) : null}
-    </ThemeProvider>
-  )
-}

package/src/components/LXP/contentThumbnails/vectorDown.tsx

@@ -1,26 +0,0 @@
-///-----------------------------------------
-
-import React from "react";
-
-/// Interface do Componente
-interface VectorIconParam {
-    color?: string;
-}
-
-///-----------------------------------------
-/// Componente
-
-/**
- * 
- * @componente 
- */
-export default function VectorDown(props: VectorIconParam) {
-
-    return (
-        <>
-            <svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M17 1L9 9L1 0.999999" stroke="white" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
-        </>
-    )
-}

package/src/components/LXP/contentThumbnails/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/contentThumbnails/vectorUp.tsx

@@ -1,26 +0,0 @@
-///-----------------------------------------
-
-import React from "react";
-
-/// Interface do Componente
-interface VectorIconParam {
-    color?: string;
-}
-
-///-----------------------------------------
-/// Componente
-
-/**
- * 
- * @componente 
- */
-export default function VectorUp(props: VectorIconParam) {
-
-    return (
-        <>
-            <svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M1 9L9 1L17 9" stroke="white" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
-        </>
-    )
-}

package/src/components/LXP/extraContent/adminExtraContent.tsx

@@ -1,127 +0,0 @@
-import { IExtraContent } from "./extraContent";
-import React, { useState } from "react";
-import { Tab, Tabs } from "@mui/material";
-import style from './extraContent.module.css'
-import TextArea from '../../form-elements/textarea'
-import FileUpload from "../fileUpload";
-import TextField from "@components/form-elements/textfield";
-import Button from "@components/buttons";
-import { AddIcon } from "@shared/icons";
-
-
-
-export default function AdminExtraContent ( props : IExtraContent) {
-    const [valueTabs, setValueTabs] = useState(0)
-    const [transcriptionText, setTranscriptionText] = useState('')
-
-    const handleChangeTabs = ( e, newTab ) => {
-        setValueTabs(newTab)
-    }
-    const [books, setBooks] = useState([])
-    
-    function BooksInfo ( books : any[] ) {
-        let bookInfo : { 
-            name: string
-            autor: string
-            link: string
-            file: any
-        }
-        
-        return(
-            <div style={{marginTop: 16}}>
-                
-                <TextField label="Nome do livro" onChange={(e)=> bookInfo.name = e.target.value} />
-                
-                <TextField label="Nome do autor" onChange={(e)=> bookInfo.autor = e.target.value} />
-                
-                <TextField label="Link para compra" onChange={(e)=> bookInfo.link = e.target.value} />
-                <div style={{marginBottom: 8}}>
-                    <span > Faça upload da capa do livro abaixo</span>
-                </div>
-                <FileUpload  variant="landscape" />
-                    
-               
-            </div>
-        )
-    }
-    return (
-        <div className={style.container}>
-            <span style={{fontSize: 18, fontWeight: 700}}>Material extra</span>
-            <div className={style.contentTabs}> 
-                <Tabs value={valueTabs}  
-                    onChange={handleChangeTabs}
-                    sx={{
-                        '& .Mui-selected ' : {
-                            color: '#FF4D0D !important',
-                            fontWeight: '700 !important'
-                        },
-                        '& .MuiTab-root' : {
-                            fontFamily: 'PT Sans !important',
-                            textTransform: 'none !important',
-                            fontWeight: '400 !important',
-                        },
-                        '& .MuiTabs-indicator' : {
-                            backgroundColor: '#FF5427 !important',
-                        }}
-                    }
-                >
-                    <Tab label='Transcrição' value={0} />
-                    
-                    <Tab label='Material de apoio' value={1} />
-
-                    <Tab label='Livros' value={2} />
-
-                </Tabs>
-            </div>
-            <div className={style.contentInfo}>
-                {valueTabs === 0 &&
-                    <div>
-                        <div>
-                            <span style={{fontSize: 16, fontWeight: 400}}>
-                                Para ajudar as pessoas com algum problema auditivo ou que somente desejam revisar de forma rápida o conteúdo, transcreva abaixo o que foi dito durante o vídeo.
-                            </span>
-                        </div>
-                        
-                        <TextArea  label="Transcrição" style={{marginTop: 24}} height='150px' 
-                            onChange={(e) => {
-                                setTranscriptionText(e.target.value)
-                            }} />
-                    </div>
-                }
-                {valueTabs === 1 &&
-                    <div>
-                        <div>
-                            <span style={{fontSize: 16, fontWeight: 400}}>
-                                Adicone materiais extras como PDFs e PPTs que ajudem seus alunos a se desenvolverem neste assunto.
-                            </span>
-                        </div>
-                        <div style={{marginTop: 24, marginBottom: 8}}>
-                            <span style={{fontSize: 16, fontWeight: 400}}>
-                                Faça o upload dos arquivos abaixo
-                            </span>
-                        </div>
-                        <FileUpload variant="landscape"  />
-                    </div>
-                }
-                {valueTabs === 2 &&
-                    <div>
-
-                        <span style={{fontSize: 16, fontWeight: 400}}>Adicione abaixo links de compra dos livros que podem ajudar seus alunos a se desenvolverem nesta área.</span>
-                        
-                        {BooksInfo(books)}
-                        
-                        <div style={{marginTop: 24}} >
-                            <Button 
-                                variant="expandedSecondary"
-                                label="Adicionar"
-                                startIcon={<AddIcon fill="#FF4D0D"/>} 
-                                handleClick={() => {  }}
-                            />              
-                        </div>
-                    </div>
-                }
-            </div>
-
-        </div>
-    )
-}

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

@@ -1,42 +0,0 @@
-import React from 'react'
-
-interface IExtraContent {
-    /**
-   * @prop {number} typeExhibition: Types of exhibition in extra content: 1 - admin, 2 - student
-   */ 
-    typeExhibition : number
-    /**
-   * @prop {array} bookList: An array of books: {id, img, title and autor}
-   */ 
-    bookList ?: [{
-        id : string
-        img : any
-        title : string
-        autor : string
-    }]
-    /**
-   * @prop {string} transcription: a string for the transcription content
-   */ 
-    transcription ?: string
-    /**
-   * @prop {string} userAvatar: the user avatar
-   */ 
-    userAvatar ?: string
-    /**
-   * @prop {array} commentList: An array of comments
-   */ 
-    commentList ?: any[]
-    /**
-   * @prop {array} suportMaterial: An array of suportMaterials: {id, img, description}
-   */ 
-    suportMaterial ?: [{
-        id : string
-        img : any
-        description : string
-    }]
-
-    onClickBook ?: (id) => void
-    onClickSuportMaterial ?: (id) => void
-
-    onSaveTranscription ?: (text) => void
-}

package/src/components/LXP/extraContent/extraContent.module.css

@@ -1,24 +0,0 @@
-.container {
-    background-color: #E0E0E0;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    font-family: 'PT Sans';
-    padding: 20px;
-}
-
-.contentInfo {
-    padding: 32px 20px;
-}
-
-.notes {
-    display: flex;
-    flex-direction: column;
-}
-
-.saveNotes {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    margin-top: 24px;
-}