frst-components 0.20.0 → 0.20.2

package/src/components/IJ/ContentCycle/index.tsx

@@ -1,85 +0,0 @@
-import Button from '@components/buttons'
-import { IContentCycleProps } from './ContentCycle'
-import * as S from './ContentCycleStyles'
-import * as Icons from '../../../shared/icons'
-import ModalVideo from '@components/modal/modalVideo'
-import { useState } from 'react'
-import Tooltip from '@components/LXP/tooltip'
-export default function ContentCycle({
-  title,
-  description,
-  selected,
-  listSkils,
-  urlPhoto,
-  urlVideo,
-  titleVideo,
-  progress,
-  started,
-  stepContent,
-  onSelect,
-  typeContent,
-  id
-}: IContentCycleProps) {
-  const [openModal, setOpenModal] = useState(false)
-
-  const defaultImage = {
-    video: 'https://lxp-cdn.frstfalconi.cloud/upload_content_video.png',
-    podcast: ' https://lxp-cdn.frstfalconi.cloud/upload_content_podcast.png',
-    text: 'https://lxp-cdn.frstfalconi.cloud/upload_content_text.png'
-  }
-
-  return (
-    <S.Container className={selected && 'selected'} onClick={() => onSelect()} id={id}>
-      <S.Thumbnail>
-        <img src={urlPhoto ? urlPhoto : defaultImage[typeContent]} alt={title} />
-      </S.Thumbnail>
-      <S.Content>
-        <S.Article>
-          <S.Options>
-            <S.Title>{title}</S.Title>
-            {stepContent && (
-              <Tooltip position="top" textTooltip="Remover">
-                <Icons.Trash />
-              </Tooltip>
-            )}
-          </S.Options>
-          <S.Description>{description}</S.Description>
-        </S.Article>
-        <S.SkillsList>
-          <p className="title">Competencias: </p>
-          {listSkils.map((skill, index) => {
-            return (
-              <S.Skill key={index} id={skill}>
-                {skill}
-              </S.Skill>
-            )
-          })}
-        </S.SkillsList>
-        {started ? (
-          <S.ContentBarProgess>
-            <S.BarProgress>
-              <S.Progress progress={progress}></S.Progress>
-            </S.BarProgress>
-            <p>{progress}%</p>
-          </S.ContentBarProgess>
-        ) : (
-          <Button
-            startIcon={<Icons.PlayLineIcon fill="#0645AD" />}
-            variant="link"
-            label="Ver Teaser"
-            handleClick={() => setOpenModal(true)}
-            sizeIcon="24px"
-          />
-        )}
-      </S.Content>
-      <ModalVideo
-        timeBegin={0}
-        open={openModal}
-        handleClose={() => setOpenModal(false)}
-        videoUrl={urlVideo}
-        nameVideo={titleVideo}
-        title={titleVideo}
-      />
-    </S.Container>
-  )
-}

package/src/components/IJ/ListContentCycle/ListContentCycle.d.ts

@@ -1,33 +0,0 @@
-import React from 'react'
-import { IContentCycleProps } from './../ContentCycle/ContentCycle.d'
-
-export type IListContentCycleProps = {
-  /**
-   * @prop {boolean} stepContentCompleted: Durante a criação de um novo ciclo, a fase de selecionar os conteudos ja foi concluida
-   * Default: false
-   */
-  stepContentCompleted?: boolean
-  /**
-   * @prop {IContentCycleProps[]} listContent: Lista de conteudos
-   */
-  listContent: IContentCycleProps[]
-  /**
-   * @prop {(id:number)} onSelect: 
-   * função para selecionar um conteudo
-   * const onSelect = (id: number) => {
-  const newList = listContent.map((content, index) => {
-    if (index === id) {
-      return {
-        ...content,
-        selected: !content.selected
-      }
-    } else {
-      return content
-    }
-  })
-  setListContent(newList)
-}
-   */
-  onSelect: (id: number) => void
-}
-const

package/src/components/IJ/ListContentCycle/ListContentCycle.stories.tsx

@@ -1,77 +0,0 @@
-import React from 'react'
-import ListContentCycle from './index'
-
-export default {
-  title: 'IJ/ListContentCycle',
-  component: ListContentCycle
-}
-const Template = (args) => <ListContentCycle {...args} />
-export const normal = Template.bind({})
-normal.args = {
-  listContent: [
-    {
-      id: 'cttLQI02',
-      title: 'Liderança que inspira',
-      description: `Description bacon ipsum dolor amet landjaeger pastrami pork belly flank shankle ground round. 
-       Chicken tri-tip alcatra, pastrami buffalo pork chop shoulder drumstick ham hock landjaeger. Short
-       loin hamburger tri-tip, chuck flank pork chop doner porchetta.  Tenderloin tri-tip meatloaf cow brisket
-       `,
-      selected: false,
-      listSkils: ['Liderança', 'colaboração'],
-      urlPhoto: '',
-      urlVideo: 'https://vimeo.com/367756121',
-      titleVideo: 'Um video Legal',
-      progress: 0,
-      started: false,
-      typeContent: 'video'
-    },
-    {
-      id: 'cttLQI03',
-      title: 'Liderança que inspira',
-      description: `Description bacon ipsum dolor amet landjaeger pastrami pork belly flank shankle ground round. 
-       Chicken tri-tip alcatra, pastrami buffalo pork chop shoulder drumstick ham hock landjaeger. Short
-       loin hamburger tri-tip, chuck flank pork chop doner porchetta.  Tenderloin tri-tip meatloaf cow brisket
-       `,
-      selected: false,
-      listSkils: ['Liderança', 'colaboração'],
-      urlPhoto: '',
-      urlVideo: 'https://vimeo.com/367756121',
-      titleVideo: 'Um video Legal',
-      progress: 0,
-      started: false,
-      typeContent: 'text'
-    },
-    {
-      id: 'cttLQI04',
-      title: 'Liderança que inspira',
-      description: `Description bacon ipsum dolor amet landjaeger pastrami pork belly flank shankle ground round. 
-       Chicken tri-tip alcatra, pastrami buffalo pork chop shoulder drumstick ham hock landjaeger. Short
-       loin hamburger tri-tip, chuck flank pork chop doner porchetta.  Tenderloin tri-tip meatloaf cow brisket
-       `,
-      selected: false,
-      listSkils: ['Liderança', 'colaboração'],
-      urlPhoto: '',
-      urlVideo: 'https://vimeo.com/367756121',
-      titleVideo: 'Um video Legal',
-      progress: 0,
-      started: false,
-      typeContent: 'podcast'
-    },
-    {
-      id: 'cttLQI05',
-      title: 'Liderança que inspira',
-      description: `Description bacon ipsum dolor amet landjaeger pastrami pork belly flank shankle ground round. 
-       Chicken tri-tip alcatra, pastrami buffalo pork chop shoulder drumstick ham hock landjaeger. Short
-       loin hamburger tri-tip, chuck flank pork chop doner porchetta.  Tenderloin tri-tip meatloaf cow brisket
-       `,
-      selected: false,
-      listSkils: ['Liderança', 'colaboração'],
-      urlPhoto: 'https://lxp-cdn.frstfalconi.cloud/Thumb.png',
-      urlVideo: 'https://vimeo.com/367756121',
-      titleVideo: 'Um video Legal',
-      progress: 0,
-      started: false,
-      typeContent: 'text'
-    }
-  ]
-}

package/src/components/IJ/ListContentCycle/ListContentCycleStyles.ts

@@ -1,10 +0,0 @@
-import styled from 'styled-components'
-
-export const Container = styled.div`
-  width: 100%;
-  height: auto;
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  flex-direction: column;
-`

package/src/components/IJ/ListContentCycle/index.tsx

@@ -1,35 +0,0 @@
-import React, { useState } from 'react'
-import ContentCycle from '../ContentCycle'
-import { IListContentCycleProps } from './ListContentCycle'
-import * as S from './ListContentCycleStyles'
-
-export default function ListContentCycle({
-  stepContentCompleted = false,
-  listContent,
-  onSelect
-}: IListContentCycleProps) {
-  return (
-    <S.Container>
-      {listContent.map((content, index) => {
-        return (
-          <ContentCycle
-            key={content.id}
-            id={content.id}
-            description={content.description}
-            onSelect={() => onSelect(index)}
-            selected={content.selected}
-            title={content.title}
-            listSkils={content.listSkils}
-            urlPhoto={content.urlPhoto}
-            urlVideo={content.urlVideo}
-            titleVideo={content.titleVideo}
-            progress={content.progress}
-            started={content.started}
-            stepContent={stepContentCompleted}
-            typeContent={content.typeContent}
-          />
-        )
-      })}
-    </S.Container>
-  )
-}

package/src/components/IJ/StepLearningCycle/StepLearningCycle.d.ts

@@ -1,39 +0,0 @@
-import React from 'react'
-
-export type StepLearningCycle = {
-  /**
-   * @prop {string} title: Titulo do step
-   */
-  title: string
-  /**
-   * @prop {string} description: descrição do step
-   */
-  description?: string
-  /**
-   * @prop {string} status: Status do step
-   */
-  status: string
-}
-
-export type StepsLearningCycle = {
-  /**
-   * @prop {boolean} completed: Todas as etapas foram concluidas
-   */
-  completed: boolean
-  /**
-   * @prop {StepLearningCycle[]} listSteps: Lista com os steps
-   */
-  listSteps: StepLearningCycle[]
-  /**
-   * @prop {()=>void} setListSteps: Lista com os steps
-   */
-  setListSteps: (listSteps: StepLearningCycle[]) => void
-  /**
-   * @prop {string} direction: Orientação da lista (Vertical ou horizontal)
-   */
-  direction: 'row' | 'column'
-  /**
-   * @prop {string} size: Orientação da lista (Vertical ou horizontal)
-   */
-  size: 'small' | 'medium' | 'large'
-}

package/src/components/IJ/StepLearningCycle/StepLearningCycle.stories.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-
-import StepLearningCycle from './index'
-
-export default {
-  title: 'IJ/StepLearningCycle',
-  component: StepLearningCycle
-}
-
-const Template = (args) => <StepLearningCycle {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-  listSteps: [
-    { title: 'Criar ciclo de aprendizagem', description: '', status: 'finished' },
-    {
-      title: 'Grupo de participantes',
-      description: 'Crie ou selecione um grupo de participantes para relacioná-lo a um ou mais conteúdos.',
-      status: 'inProgress'
-    },
-    { title: 'Conteúdos', description: '', status: 'waiting' },
-    { title: 'Calendário', description: '', status: 'waiting' }
-  ]
-}

package/src/components/IJ/StepLearningCycle/StepLearningCycleStyle.ts

@@ -1,93 +0,0 @@
-import styled from 'styled-components'
-
-export const ContainerStepLearningCycle = styled.div`
-  background: #f7f9fc;
-  border-bottom: 1px solid #bdbdbd;
-  justify-content: space-between;
-
-  &&.row {
-    width: 100%;
-    padding: 25px;
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-  }
-
-  &&.column {
-    width: 18.5rem;
-    gap: 30px;
-    display: flex;
-    flex-direction: column;
-    padding: 24px;
-  }
-`
-export const StepCycle = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: 10px;
-
-  > p {
-    max-width: 250px;
-    margin-left: 15%;
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 400;
-    line-height: 110%;
-    color: #444444;
-  }
-
-  &&.finished {
-    color: #444444;
-  }
-
-  &&.inProgress {
-    color: #000000;
-  }
-  &&.waiting {
-    color: #9c9c9c;
-  }
-`
-export const StepCycleArticle = styled.article`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: 10px;
-  color: inherit;
-  > h2 {
-    margin: 0;
-    font-family: 'Work Sans';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 24px;
-    line-height: 130%;
-    color: inherit;
-  }
-`
-
-export const IconStatus = styled.span`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  font-weight: 500;
-  cursor: pointer;
-
-  &&.finished {
-    border: 2px solid #2ca92a;
-    background: #d1f6d1;
-  }
-
-  &&.inProgress {
-    border: 2px solid #0645ad;
-
-    color: #0645ad;
-  }
-  &&.waiting {
-    border: 2px solid rgba(138, 153, 168, 0.5);
-
-    color: rgba(0, 0, 0, 0.65);
-  }
-`

package/src/components/IJ/StepLearningCycle/index.tsx

@@ -1,153 +0,0 @@
-import { Icon } from '@mui/material'
-import React, { useEffect, useState } from 'react'
-import { StepsLearningCycle } from './StepLearningCycle'
-import * as S from './StepLearningCycleStyle'
-import * as Icons from '../../../shared/icons'
-export default function StepLearningCycle({
-  listSteps,
-  setListSteps,
-  direction = 'row',
-  size = 'medium',
-  completed = false
-}: StepsLearningCycle) {
-  const [stepsList, setStepsList] = useState<any>(listSteps)
-
-  useEffect(() => {
-    if (completed) {
-      const newSteps = listSteps.map((step) => {
-        return {
-          ...step,
-          status: 'finished'
-        }
-      })
-      setStepsList(newSteps)
-      setListSteps(newSteps)
-    }
-  }, [completed])
-
-  useEffect(() => {
-    setStepsList(listSteps)
-  }, [listSteps])
-
-  const handleChangeStep = (id: number) => {
-    const newListStep = stepsList.map((step, index) => {
-      if (index < id) {
-        return {
-          ...step,
-          status: 'finished'
-        }
-      } else if (index === id) {
-        return {
-          ...step,
-          status: 'inProgress'
-        }
-      } else {
-        return {
-          ...step,
-          status: 'waiting'
-        }
-      }
-    })
-
-    setStepsList(newListStep)
-    setListSteps(newListStep)
-  }
-
-  const variantsChek = {
-    large: {
-      width: '14.17px',
-      heigth: '11px'
-    },
-    medium: {
-      width: '9.45px',
-      heigth: '7.33px'
-    },
-    small: {
-      width: '8px',
-      heigth: '6px'
-    }
-  }
-
-  const variantsSize = {
-    large: {
-      icon: {
-        width: '46px',
-        height: '36px',
-        fontSize: '18px'
-      },
-      title: {
-        fontWeight: 700,
-        fontSize: '24px',
-        lineHeight: '130%'
-      },
-      description: {
-        fontSize: '16px',
-        marginLeft: '51px'
-      }
-    },
-
-    medium: {
-      icon: {
-        width: '29px',
-        height: '24px',
-        fontSize: '16px',
-        lineHeight: '19px'
-      },
-      title: {
-        fontWeight: 500,
-        fontSize: '18px',
-        lineHeight: '21px'
-      },
-      description: {
-        fontSize: '14px',
-        marginLeft: '39px'
-      }
-    },
-    small: {
-      icon: {
-        width: '20px',
-        height: '17px',
-        fontSize: '1px'
-      },
-      title: {
-        fontWeight: 500,
-        fontSize: '16px',
-        lineHeight: '19px'
-      },
-      description: {
-        display: 'none'
-      }
-    }
-  }
-
-  return (
-    <S.ContainerStepLearningCycle className={direction}>
-      {stepsList &&
-        stepsList.map((step, i) => {
-          return (
-            <S.StepCycle key={i + 1} className={step.status}>
-              <S.StepCycleArticle>
-                <S.IconStatus
-                  className={step.status}
-                  style={variantsSize[size].icon}
-                  onClick={() => handleChangeStep(i)}
-                >
-                  {step.status === 'finished' ? (
-                    <Icons.CheckIconSimple height={variantsChek[size].heigth} width={variantsChek[size].width} />
-                  ) : (
-                    i + 1
-                  )}
-                </S.IconStatus>
-
-                <h2 style={variantsSize[size].title}>{step.title}</h2>
-              </S.StepCycleArticle>
-
-              {step.status === 'inProgress' && step.description && (
-                <p style={variantsSize[size].description}>{step.description}</p>
-              )}
-            </S.StepCycle>
-          )
-        })}
-    </S.ContainerStepLearningCycle>
-  )
-}

package/src/components/IJ/favorite/favorite.stories.tsx

@@ -1,19 +0,0 @@
-import React from 'react'
-
-import Favorite from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'IJ/Favorite',
-  component: Favorite
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <Favorite {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-  variant: 'default',
-  disable: false,
-  action: () => alert('clicou')
-}

package/src/components/IJ/favorite/favoriteStyles.ts

@@ -1,15 +0,0 @@
-import styled from 'styled-components'
-
-export const SFavorite = styled.div`
-  padding: 12px 20px;
-  background-color: transparent;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 64px;
-  cursor: pointer;
-
-  &.disable {
-    cursor: not-allowed;
-  }
-`

package/src/components/IJ/favorite/index.tsx

@@ -1,44 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { SFavorite } from './favoriteStyles'
-import { StarFavorite } from '@shared/icons'
-export type IFavoriteProps = {
-  variant: 'default' | 'pressed'
-  disable?: boolean
-  action: Function
-}
-
-export default function Favorite({ variant, disable = false, action }: IFavoriteProps) {
-  const types = {
-    default: {
-      name: 'default',
-      fill: '#E0E0E0',
-      stroke: '#BDBDBD'
-    },
-    pressed: {
-      name: 'pressed',
-      fill: '#FFD600',
-      stroke: '#FDAE15'
-    },
-    disabled: {
-      name: 'disabled',
-      fill: '#757575',
-      stroke: '#BDBDBD'
-    }
-  }
-  const [status, setStatus] = useState(types[variant])
-
-  function handleSetStatus() {
-    const newStatus = status.name === 'default' ? 'pressed' : 'default'
-    setStatus(types[newStatus])
-    action()
-  }
-
-  useEffect(() => {
-    setStatus(types[!disable ? variant : 'disabled'])
-  }, [disable])
-  return (
-    <SFavorite onClick={!disable && handleSetStatus} className={disable && 'disable'}>
-      <StarFavorite fill={status.fill} stroke={status.stroke} />
-    </SFavorite>
-  )
-}