frst-components 0.20.1 → 0.20.2

package/src/components/cardLT/TextIcon/textIcon.stories.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import StarIcon from './starIcon'
-import RocketButton from '../RocketButton/index'
-
-import TextIcon from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Card LT/TextIcon',
-    component: TextIcon,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <TextIcon {...args} />
-
-export const PrimaryButton = Template.bind({})
-PrimaryButton.args = {
-    description: "Tecnologia da Informação",
-    svg: <RocketButton tipoBotao={2}/>
-}
-

package/src/components/cardLT/selectCard/avatarWithInfo.module.css

@@ -1,20 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=VT323&display=swap');
-
-.container {
-  height: 48px;
-  padding: 4px 16px 4px 4px;
-  display: inline-flex;
-  justify-content: space-between;
-  align-items: center;
-  
-  border: 1px solid #BDBDBD;
-  border-radius: 25px;
-  background-color: #FFF;
-  font-size: 16px;
-  
-  flex-direction: row;
-  flex-wrap: nowrap;
-  font-family: 'Work Sans';
-  
-}
-

package/src/components/cardLT/selectCard/avatarWithInfo.stories.tsx

@@ -1,19 +0,0 @@
-import React from 'react'
-
-import AvatarWithInfo from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Card LT/Avatar With Info',
-    component: AvatarWithInfo,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <AvatarWithInfo {...args} />
-
-export const Teste1 = Template.bind({})
-Teste1.args = {
-  nomeCompleto: 'Roberto Lima',
-  cargo: 'Estudante/Universitário(a)'
-}
-

package/src/components/cardLT/selectCard/index.tsx

@@ -1,55 +0,0 @@
-
-import React, { useEffect, useState } from 'react'
-import style from './avatarWithInfo.module.css'
-import Avatar from '../../avatar'
-import Vector from './vector'
-
-
-///-----------------------------------------
-/// Interface do Componente
-interface AvatarWithInfoParams {
-  /**
-   * @prop {string} fotoAvatar: Foto do perfil do usuario
-   */
-   fotoAvatar ?: string;
-  /**
-   * @prop {string} nomeCompleto: nome completo do usuario
-   */
-   nomeCompleto : string;
-  /**
-   * @prop {string} cargo: Cargo do usuario
-   */
-   cargo : string;
-  /**
-   * @prop {React.CSSProperties} style: Styles de CSS adicional
-   */  
-  style?: React.CSSProperties;
-  
-}
-
-///-----------------------------------------
-/// Componente
-
-
-
-/**
- * 
- * @componente Planet: Componente responsável por gerenciar os controles dos steps das missões
- */
-export default function AvatarWithInfo(props: AvatarWithInfoParams) {
-
-
-  return (
-
-    <>    
-      <div className={style.container} style={{...props.style }}>
-
-        <Avatar size='40px' src={props.fotoAvatar}/>
-        <span style={{fontWeight:600, marginRight: 8, marginLeft: 12}}>{props.nomeCompleto}</span> <Vector /> <span style={{fontWeight:400, marginRight: 8, marginLeft: 8}}>{props.cargo}</span>
-               
-      </div>
-    </>
-  )
-
-
-}

package/src/components/cardLT/selectCard/vector.tsx

@@ -1,25 +0,0 @@
-
-///-----------------------------------------
-/// Interface do Componente
-interface VectorIconParam {
-    color?: string;  
-  }
-  
-  ///-----------------------------------------
-  /// Componente
-  
-  /**
-   * 
-   * @componente 
-   */
-  export default function Vector(props: VectorIconParam) {
-  
-    return (
-      <>    
-        <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M2 4C1.46957 4 0.960859 3.78929 0.585786 3.41421C0.210713 3.03914 0 2.53043 0 2C0 1.46957 0.210713 0.960859 0.585786 0.585786C0.960859 0.210713 1.46957 0 2 0C2.53043 0 3.03914 0.210713 3.41421 0.585786C3.78929 0.960859 4 1.46957 4 2C4 2.53043 3.78929 3.03914 3.41421 3.41421C3.03914 3.78929 2.53043 4 2 4Z" fill={props.color ? props.color : "#757575"}/>
-        </svg>
-
-      </>
-    )
-  }

package/src/components/cards/base/base.stories.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-
-import BaseCard from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Base/Card',
-    component: BaseCard,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <BaseCard {...args} />
-
-export const empty = Template.bind({})
-// empty.args = {
-//     loading: true,
-// }
-
-export const text = (args) => (
-    <BaseCard>
-        <p>Some text just to display</p>
-    </BaseCard>
-)

package/src/components/cards/base/index.tsx

@@ -1,10 +0,0 @@
-import '../../../shared/global.css'
-
-export default function EmptyCard(props) {
-
-    return (
-        <div className='cardContent' style={{ height: '100%' }}>
-            {props.children}
-        </div >
-    )
-}

package/src/components/cards/cardDefinicaoProblema/cardDefinicaoProblema.module.css

@@ -1,88 +0,0 @@
-.container {
-    width: 282px;
-    height: 445px;
-
-    color: #222222;
-    background-color: #FFF;
-    border-radius: 10px;
-
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    position: relative;
-}
-
-.tagStatusProblem {
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    font-size: 12px;
-    font-weight: 500;
-    padding: 8px;
-
-    border-bottom-left-radius: 10px;
-    border-top-right-radius: 10px;
-
-
-}
-
-
-.headerContainer {
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    height: 200px;
-
-}
-
-.headerContainer img {
-    width: 100%;
-    height: 100%;
-}
-
-.descriptionContainer {
-
-    padding: 20px;
-    height: 197px;
-
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-direction: column;
-    flex-wrap: wrap;
-
-}
-
-.footerContainer {
-    height: 48px;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    border-top: 1px solid #E8E8E8;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    padding: 15px;
-    gap: 32px;
-}
-
-.footerContainerType2 {
-    position: relative;
-}
-
-.footerContainerType2::after {
-    content: "";
-    position: absolute;
-    background-color: #E8E8E8;
-    width: 1px;
-    height: 100%;
-    left: 50%;
-}
-
-.footerContainer svg {
-    max-height: 100% !important;
-}

package/src/components/cards/cardDefinicaoProblema/cardDefinicaoProblema.stories.tsx

@@ -1,95 +0,0 @@
-import React from 'react'
-
-import CardDefinicaoProblema from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Cards/CardDefinicaoProblema',
-    component: CardDefinicaoProblema,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <CardDefinicaoProblema {...args} />
-
-
-
-export const NovoProblema = Template.bind({})
-NovoProblema.args = {
-
-    problemStatus: "naoIniciou",
-
-    cardTitle: "Space Race Game",
-    cardDescription: "Nossa ferramenta guia de resolução de problemas em ciclos ágeis de aprendizado, colaboração e experimentação.",
-    typeButton: 1,
-    problemId: '123',
-    handleClick: (problemId) => { alert(problemId)}
-}
-
-export const NovoProblemaTranslate = Template.bind({})
-NovoProblemaTranslate.args = {
-
-    statusTextNaoIniciou: 'Not started',
-    textStatusFinalizado: 'Finished',
-    textStatusProximosPassos: 'Next steps',
-    textStatusResultadosAprendizados: 'Tests performed',
-    textStatusTestesRealizados: 'Tests Performed',
-    textStatusHipotesesLevantadas: 'Hypotheses raised',
-    textsStatusProblemaDefinido: 'Problem Defined',
-    textStatusProblemaCriado: 'Problem created',
-    textButtomDefinirProblema: 'Define Problem',
-    textButtomHipotesesLevantadas: 'Hypotheses raised',
-    textButtonVisualizar: 'To view',
-    textButtonContinue:'Continue',
-
-    problemStatus: "naoIniciou",
-
-    cardTitle: "Space Race Game",
-    cardDescription: "Nossa ferramenta guia de resolução de problemas em ciclos ágeis de aprendizado, colaboração e experimentação.",
-    typeButton: 1,
-    problemId: '123',
-    handleClick: (problemId) => { alert(problemId)}
-}
-
-
-export const EditarProblema = Template.bind({})
-EditarProblema.args = {
-
-    problemStatus: "problemaDefinido",
-
-    cardTitle: "Problema",
-    cardDescription: "Aumentar o engajamento dos alunos na plataforma",
-    typeButton: 2,
-    problemId: '123',
-    handleClick: (problemId) => { alert(problemId)},
-    handleToView: () => { alert('View')}
-
-}
-
-export const EditarProblemaTranslate = Template.bind({})
-EditarProblemaTranslate.args = {
-
-    statusTextNaoIniciou: 'Not started',
-    textStatusFinalizado: 'Finished',
-    textStatusProximosPassos: 'Next steps',
-    textStatusResultadosAprendizados: 'Tests performed',
-    textStatusTestesRealizados: 'Tests Performed',
-    textStatusHipotesesLevantadas: 'Hypotheses raised',
-    textsStatusProblemaDefinido: 'Problem Defined',
-    textStatusProblemaCriado: 'Problem created',
-    textButtomDefinirProblema: 'Define Problem',
-    textButtomHipotesesLevantadas: 'Hypotheses raised',
-    textButtonVisualizar: 'To view',
-    textButtonContinue:'Continue',
-
-    problemStatus: "problemaDefinido",
-
-    cardTitle: "Problema",
-    cardDescription: "Aumentar o engajamento dos alunos na plataforma",
-    typeButton: 2,
-    problemId: '123',
-    handleClick: (problemId) => { alert(problemId)},
-    handleToView: () => { alert('View')}
-
-    
-
-}

package/src/components/cards/cardDefinicaoProblema/index.tsx

@@ -1,98 +0,0 @@
-import '../../../shared/global.css'
-import { useState, useEffect } from 'react'
-import { AddIcon, EditIcon, OpenedEye } from '@shared/icons'
-import style from './cardDefinicaoProblema.module.css'
-import Button from '@components/buttons'
-
-interface CardDefinicaoProblemaProps {
-
-    problemId: string
-    problemStatus: string
-    backgroundImage?: string
-
-    cardTitle?: string
-    cardDescription?: string
-
-    /**
-    * @prop {number} typeButton: Tipos de botão (1 - novo problema, 2 - editar problema)
-    */
-    typeButton: number
-
-    handleClick: (problemId: string) => void
-    /**
-     * @prop {event} event: Evento de click do visualizar problema
-    */
-    handleToView: () => void
-
-}
-
-export interface CardDefinicaoProblemaTranslateProps  extends CardDefinicaoProblemaProps{
-    statusTextNaoIniciou?: string
-    textStatusFinalizado?: string
-    textStatusProximosPassos?: string
-    textStatusResultadosAprendizados?: string
-    textStatusTestesRealizados?: string
-    textStatusHipotesesLevantadas?: string
-    textsStatusProblemaDefinido?: string
-    textStatusProblemaCriado?: string
-    textButtonDefinirProblema?: string
-    textHipotesesLevantadas?: string
-    textButtonVisualizar?: string
-    textButtonContinue?: string
-}
-
-
-/**
- * @param {CardDefinicaoProblemaTranslateProps} props
- */
-export default function CardDefinicaoProblema(props: CardDefinicaoProblemaTranslateProps) {
-
-    const [statusName, setStatusName] = useState((props.statusTextNaoIniciou ? props.statusTextNaoIniciou :'Não iniciou'))
-
-    const [statusColor, setStatusColor] = useState('#757575')
-
-    useEffect(() => {
-        switch (props.problemStatus) {
-            case 'finalizado': setStatusColor("#158214"), setStatusName(props.textStatusFinalizado? props.textStatusFinalizado : "Finalizado"); break 
-            case 'proxPassos': setStatusColor("#222222"), setStatusName(props.textStatusProximosPassos? props.textStatusProximosPassos : "Próximos passos"); break
-            case 'resultadosAprendizados': setStatusColor("#AD005C"), setStatusName(props.textStatusResultadosAprendizados? props.textStatusResultadosAprendizados : "Resultados e aprendizados"); break
-            case 'testesRealizados': setStatusColor("#663366"), setStatusName(props.textStatusTestesRealizados? props.textStatusTestesRealizados : "Testes realizados"); break
-            case 'hipoteseLevantada': setStatusColor("#F8B911"), setStatusName(props.textStatusHipotesesLevantadas? props.textStatusHipotesesLevantadas : "Hipóteses levantadas"); break
-            case 'problemaDefinido': setStatusColor("#252BB1"), setStatusName(props.textsStatusProblemaDefinido? props.textsStatusProblemaDefinido : "Problema definido"); break
-            case 'problemaCriado':
-            default: setStatusColor("#757575"), setStatusName(props.textStatusProblemaCriado?  props.textStatusProblemaCriado : "Problema criado"); break
-        }
-    }, [props.problemStatus])
-
-
-    return (
-
-        <div className={style.container} >
-            {
-                props.typeButton !== 1 &&
-                    <div className={style.tagStatusProblem} style={{background: statusColor, color: statusName=== (props.textHipotesesLevantadas ? props.textHipotesesLevantadas : "Hipóteses Levantadas") ? '#222222' : '#FFF'}}>
-                        {statusName}
-                    </div>
-            }
-
-            <div className={style.headerContainer}>
-                <img src={'https://api-motor.s3.amazonaws.com/background-prezi.png'} />
-            </div>
-            <div className={style.descriptionContainer}>
-                <span style={{fontSize: 16, fontWeight: 500}}> {props.cardTitle}</span>
-                <span style={{fontSize: 16, fontWeight: 400, marginTop: 16}}> {props.cardDescription}</span>
-
-            </div>
-            <div className={`${style.footerContainer} ${props.typeButton === 2 && style.footerContainerType2}`}>
-                {props.typeButton === 2 && <Button variant='link' label= {props.textButtonVisualizar ? props.textButtonVisualizar : "Visualizar"} startIcon={<OpenedEye />} handleClick={() => props.handleToView()} /> }
-                <Button 
-                    variant='link' 
-                    label={props.typeButton === 1 ? (props.textButtonDefinirProblema ? props.textButtonDefinirProblema : 'Definir novo problema') : (props.textButtonContinue ? props.textButtonContinue: 'Continuar')} 
-                    startIcon={props.typeButton === 1 ? <AddIcon /> : <EditIcon/>} 
-                    handleClick={() => props.handleClick(props.problemId)} 
-                />
-            </div>
-
-        </div>
-    )
-}

package/src/components/cards/cardProblem/cardProblem.module.css

@@ -1,114 +0,0 @@
-.container {
-    width: 100%;
-    border-radius: 10px;
-    padding-right: 24px;
-    padding-left: 48px;
-    padding-top: 40px;
-    padding-bottom: 24px;
-
-
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-direction: row;
-    position: relative;
-}
-
-.container:hover {
-    box-shadow: 4px 8px 8px rgba(0, 0, 0, 0.2);
-}
-
-.contentCard:hover {
-    cursor: pointer;
-}
-
-.tagStatusProblem {
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    font-size: 12px;
-    font-weight: 500;
-    padding: 8px;
-
-    border-bottom-left-radius: 8px;
-    border-top-right-radius: 5px;
-
-}
-
-.checkBox {
-
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    height: 100%;
-    padding-top: 17px;
-    padding-left: 16px;
-
-
-    position: absolute;
-    left: 0;
-
-}
-
-.contentCard {
-
-    margin-left: 8px;
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    flex-direction: column;
-}
-
-.avatarInfoUser {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: row;
-    margin-bottom: 24px;
-    
-
-}
-
-.infoUser {
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    flex-direction: column;
-    margin-left: 16px;
-}
-
-.tituloCard {
-
-    margin-top: 4px;
-    margin-bottom: 8px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-
-    font-weight: 600;
-    font-size: 18px;
-    word-break: break-all;
-}
-
-.tagsContainer {
-
-
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-wrap: wrap;
-}
-
-.buttonVerMais {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    font-weight: 600;
-
-    margin-bottom: 26px;
-    margin-right: 30px;
-}