frst-components 0.20.0

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

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

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

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

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

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

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

@@ -0,0 +1,43 @@
+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'),
+    
+}