frst-components 0.20.0 → 0.20.2

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

@@ -1,52 +0,0 @@
-.container {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-direction: column;
-    position: relative;
-
-    width: 343px;
-    height: 265px;
-    padding: 24px;
-    border: 1px solid #BDBDBD;
-    border-radius: 8px;
-    font-family: 'work sans';
-    word-wrap: break-word;
-}
-
-.container:hover {
-    box-shadow: 0px 0px 20px -7px #BDBDBD;
-}
-
-.container:active {
-    box-shadow: 0px 0px 20px -7px #BDBDBD;
-    background-color: #FF4D0D;
-}
-
-.cardAvatar {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: row;
-}
-
-.description {
-    max-height: 100px !important;
-    width: 300px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 4; /** número de linhas que você quer exibir */
-    -webkit-box-orient: vertical;
-    word-wrap: break-word;
-}
-
-.verMais {
-    position:absolute;
-    color: #0645AD;
-    font-weight: 700;
-    right: 0;
-    bottom: 0;
-    margin-right: 20px;
-    margin-bottom: 12px;
-}

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

@@ -1,35 +0,0 @@
-import { Abc } from '@mui/icons-material'
-import React from 'react'
-
-import CardResultConquista from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Cards/cardResultConquista',
-    component: CardResultConquista,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <CardResultConquista {...args} />
-
-export const Conquista = Template.bind({})
-Conquista.args = {
-    statusCard: 1,
-    userName: 'Érica Heim',
-    userArea: 'Customer Experience',
-    problemId: 'Abc',
-    textMoreDetails: 'Mais detalhes',    
-    description: 'Aumentei o tempo médio de uso da plataforma de 8 horas/semana para 12 horas/semana ao final do ciclo ágil, mandando um texto para testar o tamanho do acccaradasdasd',
-    onClick: (problemID) => { alert(problemID)}
-}
-
-export const Aprendizado = Template.bind({})
-Aprendizado.args = {
-    statusCard: 2,
-    userName: 'Érica Heim',
-    userArea: 'Customer Experience',
-    problemId: 'Abc',
-    textMoreDetails: 'Mais detalhes', 
-    description: 'Descobri fatores que estão contribuindo negativamente para que os alunos não engajem na plataforma',
-    onClick: (problemID) => { alert(problemID)}
-}

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

@@ -1,76 +0,0 @@
-import Avatar from '@components/avatar'
-import '../../../shared/global.css'
-import {FRSTTheme} from '../../../theme'
-import style from './cardResultConquista.module.css'
-import Conquista from './Icons/Conquista.png'
-import ConquistaPressed from './Icons/ConquistaPressed.png'
-import Aprendizado from './Icons/Aprendizado.png'
-import AprendizadoPressed from './Icons/AprendizadoPressed.png'
-import { ApiRounded } from '@mui/icons-material'
-import { useEffect, useState } from 'react'
-
-interface CardResultConquistaProps {
-    userAvatar ?: string
-    /**
-        * @prop {number} statusCard: Qual card será exibido: 1 - Conquista, 2 - Aprendizado
-    */
-    statusCard: number
-    userName: string
-    userArea: string
-    description: string
-    problemId: string
-
-    onClick?: (problemId: string) => void
-
-    textMoreDetails ?: string
-    style?: React.CSSProperties
-}
-
-
-/**
- * @param {CardResultConquistaProps} props
- */
-export default function CardResultConquista(props: CardResultConquistaProps) {
-    const [isPressed, setIsPressed] = useState(false)
-    useEffect(() => {
-        const timer = setTimeout(() => setIsPressed(false), 1000);
-        return () => clearTimeout(timer);
-    },[isPressed])
-
-    const [btnViewMore, setBtnViewMore] = useState('')
-    useEffect(() => {
-        setBtnViewMore(props.textMoreDetails)
-    }, [props.textMoreDetails]);
-
-    return (
-        <div className={style.container} style={{ ...props.style, cursor:'pointer', backgroundColor: isPressed ? '#FF4D0D' : '#FFF'}} onClick={() => 
-            {
-                props.onClick(props.problemId)
-                setIsPressed(true)
-            }}> 
-            <div className={style.cardAvatar}>
-                <Avatar size='50px' src={props.userAvatar} />
-                <span>&nbsp;&nbsp;</span>
-                {props.statusCard === 1 ?
-                    isPressed ? 
-                        <img src={ConquistaPressed} alt="Icone de conquista" />
-                        :
-                        <img src={Conquista} alt="Icone de conquista" />
-                    :
-                    isPressed ?
-                        <img src={AprendizadoPressed} alt="Icone de aprendizado" />
-                        :
-                        <img src={Aprendizado} alt="Icone de aprendizado" />
-                }
-            </div>
-            
-            <span style={{color: isPressed ? '#FFF' : '#222', fontWeight: 600, fontSize: 16, marginTop: 12}}>{props.userName}</span>
-            <span style={{color: isPressed ? '#FFF' : '#222', fontWeight: 400, fontSize: 12, marginTop: 4}}>{props.userArea}</span>
-           
-            <div className={style.description} style={{color: isPressed ? '#FFD600' : '#FF4D0D',fontWeight: 500, fontSize: 16, textAlign:'center', marginTop: 12}}>
-                {props.description}
-            </div>
-            <div className={style.verMais}>{btnViewMore ? btnViewMore : "Mais detalhes"}</div>
-        </div>
-    )
-}

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

@@ -1,204 +0,0 @@
-import '../../../shared/global.css'
-import { useState, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Button, Tooltip } from '@mui/material'
-import { EditIcon, CheckboxChecked, CheckboxEmpty } from '@shared/icons'
-import Tag from '@components/tag'
-
-type statusAssessment = 'not-started' | 'started' | 'finished'
-
-interface UserCardProps {
-    loading: boolean
-    selected: boolean
-    handleSelect: (id: string) => void
-    userID: string
-    userName: string
-    userEmail: string
-    userStatus: string
-    userAvatar?: string
-    userArea?: string
-    userPosition?: string
-    licenses: string[]
-    assessment?: statusAssessment
-    editAction?: () => void
-    newFormat?: boolean
-    newLicenses?: any[]
-    newTexts?: any
-}
-
-
-/**
- * @param {UserCardProps} props
- */
-export default function CalendarCard(props: UserCardProps) {
-    const { t } = useTranslation()
-
-    const [selected, setSelected] = useState(props.selected)
-
-    const setClass = () => {
-        setSelected(!selected)
-        props.handleSelect(props.userID)
-    }
-    const [statusColor, setStatusColor] = useState('#A6A6A6')
-
-    const hasCurrentData = () => {
-        return props.newLicenses.filter(el => el.isCurrent)
-    }
-    const hasAssignedLicenseData = () => {
-        return props.newLicenses.filter(el => el.isCurrent && el.hasLicense && !el.hasTrail && !el.hasEnrollment)
-    }
-    const hasDefinedTrailData = () => {
-        return props.newLicenses.filter(el => el.isCurrent && el.hasTrail && !el.hasEnrollment)
-    }
-    const hasEnrollmentsData = () => {
-        return props.newLicenses.filter(el => el.isCurrent && el.hasEnrollment)
-    }
-    const hasPreviusData = () => {
-        return props.newLicenses.filter(el => !el.isCurrent)
-    }
-
-    const newFormatHtml = () => {
-        const hasCurrent = hasCurrentData()
-        const hasAssignedLicense = hasAssignedLicenseData()
-        const hasDefinedTrail = hasDefinedTrailData()
-        const hasEnrollments = hasEnrollmentsData()
-        const hasPrevius = hasPreviusData()
-        return (
-            <div>
-                {hasCurrent.length > 0 && 
-                    <>
-                        <div style={{ fontSize: '16px', fontWeight: '700', paddingBottom: '8px' }}>{props.newTexts.current}</div>
-                        {hasAssignedLicense.length > 0 && 
-                            <div style={{ fontSize: '16px', paddingBottom: '8px' }}>
-                                {props.newTexts.assignedLicense}: {' '}
-                                {hasAssignedLicense.map(p => <Tag title={p.name} color='#000' selected={selected} inverted={false} />)}
-                                {!hasDefinedTrail && !hasEnrollments && (props.assessment === 'not-started' || props.assessment === 'started') && <Tag title={'Assessment'} color='#000' selected={selected} inverted={false} iconType="warning" />}
-                            </div>
-                        }
-                        {hasDefinedTrail.length > 0 && 
-                            <div style={{ fontSize: '16px', paddingBottom: '8px' }}>
-                                {props.newTexts.definedTrail}: {' '}
-                                {hasDefinedTrail.map(p => <Tag title={p.name} color='#000' selected={selected} inverted={false} />)}
-                                {!hasEnrollments && (props.assessment === 'not-started' || props.assessment === 'started') && <Tag title={'Assessment'} color='#000' selected={selected} inverted={false} iconType="warning" />}
-                            </div>
-                        }
-                        {hasEnrollments.length > 0 && 
-                            <div style={{ fontSize: '16px', paddingBottom: '8px' }}>
-                                {props.newTexts.enrollments}: {' '}
-                                {hasEnrollments.map(p => <Tag title={p.name} color='#000' selected={selected} inverted={false} />)}
-                                {(props.assessment === 'not-started' || props.assessment === 'started') && <Tag title={'Assessment'} color='#000' selected={selected} inverted={false} iconType="warning" />}
-                            </div>
-                        }
-                    </>
-                }
-                {hasPrevius.length > 0 &&
-                    <>
-                        <div style={{ fontSize: '16px', fontWeight: '700', paddingBottom: '8px' }}>{props.newTexts.previus}</div>
-                        <div style={{ fontSize: '16px', paddingBottom: '8px' }}>
-                            {hasPrevius.map(p => <Tag title={p.name} color='#BDBDBD' selected={selected} inverted={false} />)}
-                            {props.assessment === 'finished' && <Tag title={'Assessment'} color='#BDBDBD' selected={selected} inverted={false} iconType="checked" />}
-                        </div>
-                    </>
-                }
-            </div>
-        )
-    }
-
-    useEffect(() => {
-        switch (props.userStatus) {
-            case 'complete': setStatusColor("#2CA92A"); break
-            case 'enrolled': setStatusColor("#222222"); break
-            case 'defined': setStatusColor("#FFD600"); break
-            case 'error': setStatusColor("#FF0000"); break
-            case 'incomplete':
-            default: setStatusColor("#A6A6A6"); break
-        }
-    }, [props.userStatus])
-
-    useEffect(() => {
-        setSelected(props.selected)
-    }, [props.selected])
-
-    return (
-        <>
-            {
-                props.loading ?
-                    <div className='cardContentNoMargin' >
-                        <div className='shimmer cardTopRightConner' style={{ color: statusColor, background: statusColor, padding: '4px' }}>
-                            Status
-                        </div>
-
-                        <div className='content' >
-                            <div className='centeredVertically' style={{ paddingBottom: '16px' }}>
-                                {selected ? <CheckboxChecked /> : <CheckboxEmpty />}
-                                <div style={{ marginLeft: '16px', marginRight: '16px' }} className="avatar shimmer" />
-                                <div style={{ display: 'inline-grid' }}>
-                                    <div className="shimmer">ShimmerName</div>
-                                    <div className="shimmer">ShimmerEmail</div>
-                                </div>
-                            </div>
-                            <div className='innerContent' style={{ paddingBottom: '0px !important' }}>
-                                <div className="shimmer">Area: </div>
-                                <div className="shimmer">Cargo:</div>
-                                <Tag title='Product Tag' color='#000' loading={true} selected={false} inverted={false} />
-                                <Tag title='Product Tag' color='#000' loading={true} selected={false} inverted={false} />
-                            </div>
-                        </div>
-                        <Button className='shimmer frstButton blue' fullWidth>
-                        </Button>
-                    </div>
-                    :
-                    <div onClick={setClass} className='cardContentNoMargin' style={{ color: selected ? '#fff' : '#000', border: `1px solid ${statusColor}`, background: selected ? "#ff4d0d" : "#fff" }}>
-
-                        {/* Status */}
-                        <div className='cardTopRightConner' style={{ color: '#fff', background: statusColor, padding: '4px' }}>
-                            {t(`user.card.status.${props.userStatus}`)}
-                        </div>
-
-                        <div className='content' style={{ marginBottom: '46px' }} >
-                            {/* Fist Row of data */}
-                            <div className='centeredVertically' style={{ paddingBottom: '16px' }}>
-                                <div style={{ paddingRight: '8px' }}> {selected ? <CheckboxChecked /> : <CheckboxEmpty />}</div>
-                                <img src={props.userAvatar || "https://certificates-mentor.s3.amazonaws.com/frst-avatar-default.png"} alt="Avatar" className="avatar" />
-                                {/* Name + Email */}
-                                <div style={{ paddingLeft: '8px', display: 'grid' }}>
-                                    <p style={{ fontSize: '24px', fontWeight: '700', paddingBottom: '8px' }}>{props.userName}</p>
-                                    <Tooltip title={[props.userEmail]}>
-                                        <p style={{ fontSize: '16px', fontWeight: '700', color: selected ? "#F3D224" : '#AEB0B3' }} className='ellipsis'>{props.userEmail}</p>
-                                    </Tooltip>
-                                </div>
-                            </div>
-
-                            {/* Area, Position and tags */}
-                            <div className='innerContent'>
-                                <div style={{ display: 'block' }}>
-                                    {props.userArea && <p style={{ fontSize: '16px', fontWeight: '700', paddingBottom: '8px' }}>{t('user.card.area')}: {props.userArea}</p>}
-                                    {props.userPosition && <p style={{ fontSize: '16px', fontWeight: '400', paddingBottom: '8px' }}>{t('user.card.position')}: {props.userPosition}</p>}
-                                    {props.newFormat ? 
-                                        <div>{newFormatHtml()}</div>
-                                    :
-                                        <div>
-                                            {
-                                                props.licenses.length > 0 ?
-                                                    props.licenses.map((p) => {
-                                                        return <Tag title={p} color='#000' selected={selected} inverted={false} />
-                                                    })
-                                                    :
-                                                    <Tag title={t('user.card.noProduct')} color='#FF0000' selected={selected} inverted />
-                                            }
-                                            {(props.assessment === 'not-started' || props.assessment === 'started') && <Tag title={'Assessment'} color='#000' selected={selected} inverted={false} iconType="warning" />}
-                                            {props.assessment === 'finished' && <Tag title={'Assessment'} color='#000' selected={selected} inverted={false} iconType="checked" />}
-                                        </div>
-                                    }
-                                </div>
-                            </div>
-                        </div>
-                        {/* Button */}
-                        <Button onClick={props.editAction} className='frstButton blue fixedBottom' fullWidth>
-                            <EditIcon /><span style={{ paddingLeft: '8px' }}>{t('globals.edit')}</span>
-                        </Button>
-                    </div>
-            }
-        </>
-    )
-}

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

@@ -1,172 +0,0 @@
-import React from 'react'
-
-import UserCard from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Cards/User',
-    component: UserCard,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <UserCard {...args} />
-
-export const loading = Template.bind({})
-loading.args = {
-    loading: true,
-    selected: false,
-    handleSelect: (id) => { alert(`Select (or not) ${id}`) },
-    userID: "bla-blu-fla",
-    userName: "Nome Sobrenome",
-    userEmail: "email@dominio.com",
-    userStatus: "normal",
-    userArea: "Desenvolvimento",
-    userPosition: "FullFull Strack",
-    licenses: [],
-    assessment: 'not-started',
-    editAction: () => { alert('Edit') },
-    // newFormat: true,
-    // newLicenses: [],
-}
-
-export const incomplete = Template.bind({})
-incomplete.args = {
-    loading: false,
-    selected: false,
-    handleSelect: (id) => { alert(`Select (or not) ${id}`) },
-    userID: "bla-blu-fla",
-    userName: "Nome Sobrenome",
-    userEmail: "email@dominio.com",
-    userStatus: "incomplete",
-    userArea: "Desenvolvimento",
-    userPosition: "FullFull Strack",
-    licenses: [],
-    assessment: 'started',
-    editAction: () => { alert('Edit') },
-    // newFormat: true,
-    // newLicenses: [],
-}
-
-export const complete = Template.bind({})
-complete.args = {
-    loading: false,
-    selected: false,
-    handleSelect: (id) => { alert(`Select (or not) ${id}`) },
-    userID: "bla-blu-fla",
-    userName: "Nome Sobrenome",
-    userEmail: "email@dominio.com",
-    userStatus: "complete",
-    userArea: "Desenvolvimento",
-    userPosition: "FullFull Strack",
-    licenses: [],
-    assessment: 'started',
-    editAction: () => { alert('Edit') },
-    // newFormat: true,
-    // newLicenses: [],
-}
-
-export const enrolled = Template.bind({})
-enrolled.args = {
-    loading: false,
-    selected: false,
-    handleSelect: (id) => { alert(`Select (or not) ${id}`) },
-    userID: "bla-blu-fla",
-    userName: "Nome Sobrenome",
-    userEmail: "email@dominio.com",
-    userStatus: "enrolled",
-    userArea: "Desenvolvimento",
-    userPosition: "FullFull Strack",
-    licenses: ['Produto 01'],
-    assessment: 'finished',
-    editAction: () => { alert('Edit') },
-    // newFormat: true,
-    // newLicenses: [{}],
-}
-
-export const enrolledMany = Template.bind({})
-enrolledMany.args = {
-    loading: false,
-    selected: false,
-    handleSelect: (id) => { alert(`Select (or not) ${id}`) },
-    userID: "bla-blu-fla",
-    userName: "Nome Sobrenome",
-    userEmail: "email@dominio.com",
-    userStatus: "enrolled",
-    userArea: "Desenvolvimento",
-    userPosition: "FullFull Strack",
-    licenses: ['Produto 01', 'Produto 03'],
-    assessment: 'finished',
-    editAction: () => { alert('Edit') },
-    newFormat: true,
-    newLicenses: [
-        {hasLicense: true, hasTrail: false, hasEnrollment: false, isCurrent: true, name: 'Produto 1'},
-        {hasLicense: true, hasTrail: false, hasEnrollment: false, isCurrent: true, name: 'Produto 2'},
-        {hasLicense: true, hasTrail: true, hasEnrollment: false, isCurrent: true, name: 'Produto 3'},
-        {hasLicense: true, hasTrail: true, hasEnrollment: false, isCurrent: true, name: 'Produto 4'},
-        {hasLicense: true, hasTrail: true, hasEnrollment: true, isCurrent: true, name: 'Produto 5'},
-        {hasLicense: true, hasTrail: true, hasEnrollment: true, isCurrent: true, name: 'Produto 6'},
-        {hasLicense: true, hasTrail: true, hasEnrollment: true, isCurrent: false, name: 'Produto 7'},
-        {hasLicense: true, hasTrail: true, hasEnrollment: true, isCurrent: false, name: 'Produto 8'},
-    ],
-    newTexts: { 
-        current: 'Atual',
-        assignedLicense: 'Licença atribuida',
-        definedTrail: 'Trilha definida',
-        enrollments: 'Matriculado',
-        previus: 'Anteriores',
-    }
-}
-
-export const defined = Template.bind({})
-defined.args = {
-    loading: false,
-    selected: false,
-    handleSelect: (id) => { alert(`Select (or not) ${id}`) },
-    userID: "bla-blu-fla",
-    userName: "Nome Sobrenome",
-    userEmail: "email@dominio.com",
-    userStatus: "defined",
-    userArea: "Desenvolvimento",
-    userPosition: "FullFull Strack",
-    licenses: ['Produto 03'],
-    assessment: 'finished',
-    editAction: () => { alert('Edit') },
-    // newFormat: true,
-    // newLicenses: [],
-}
-
-export const error = Template.bind({})
-error.args = {
-    loading: false,
-    selected: false,
-    handleSelect: (id) => { alert(`Select (or not) ${id}`) },
-    userID: "bla-blu-fla",
-    userName: "Nome Sobrenome",
-    userEmail: "email@don.com",
-    userStatus: "error",
-    userArea: "Desenvolvimento",
-    userPosition: "FullFull Strack",
-    licenses: [],
-    assessment: 'finished',
-    editAction: () => { alert('Edit') },
-    // newFormat: true,
-    // newLicenses: [],
-}
-
-export const bigEmail = Template.bind({})
-bigEmail.args = {
-    loading: false,
-    selected: false,
-    handleSelect: (id) => { alert(`Select (or not) ${id}`) },
-    userID: "bla-blu-fla",
-    userName: "Nome Sobrenome Só que muito grande ",
-    userEmail: "superdupermegauberhugeemail@frst.com",
-    userStatus: "complete",
-    userArea: "Desenvolvimento",
-    userPosition: "FullFull Strack",
-    licenses: [],
-    assessment: 'finished',
-    editAction: () => { alert('Edit') },
-    // newFormat: true,
-    // newLicenses: [],
-}

package/src/components/challenge-cards/challengeCard.d.ts

@@ -1,17 +0,0 @@
-
-import React from "react"
-
-type enumStep = 'srg' | 'incompleteMars' | 'mars' | 'jupiter' | 'saturn' | 'uranus' | 'neptune' | 'completed';
-type enumLang = 'pt-BR' | 'pt-PT' | 'en-US' | 'es';
-
-export interface IChallengeCard {
-    variant: enumStep,
-    description: string,
-    language?: enumLang,
-    onClickView?: () => void,
-    onClickNewProject?: () => void,
-    onClickContinue?: () => void,
-    onClickDelete?: () => void,
-    onClickEdit?: () => void,
-    style?: React.CSSProperties
-}

package/src/components/challenge-cards/challengeCard.stories.tsx

@@ -1,43 +0,0 @@
-import React from 'react'
-
-import ChallengeCard from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'Components/Challenge Card',
-    component: ChallengeCard,
-    argTypes: {
-        language: {
-            control: 'select',
-            options: ['pt-BR', 'pt-PT', 'en-US', 'es']
-        },
-        variant: {
-            control: 'select',
-            options: ['srg', 'incompleteMars', 'mars', 'jupiter', 'saturn', 'uranus', 'neptune', 'completed']
-        }
-    }
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <ChallengeCard {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-    variant: 'mars',
-    description: 'Aumentar em 50% o engajamento dos alunos na plataforma.',
-    language: 'pt-BR',
-    onClickView: () => alert('view project'),
-    onClickNewProject: () => alert('new project'),
-    onClickContinue: () => alert('click continue'),
-    onClickDelete: () => alert('click delete'),
-    onClickEdit: () => alert('click edit'),
-}
-
-export const exibition = Template.bind({})
-exibition.args = {
-    variant: 'mars',
-    description: 'Aumentar em 50% o engajamento dos alunos na plataforma.',
-    language: 'pt-BR',
-    onClickView: () => alert('view project'),
-    
-}