frst-components 0.20.0

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

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

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

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

@@ -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/contentThumbnails/vectorUp.tsx

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

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

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

@@ -0,0 +1,24 @@
+.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;
+}