frst-components 0.20.0

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

@@ -0,0 +1,124 @@
+import style from './MessageBox.module.css'
+
+import SuccessIcon from './icons/successIcon'
+import ErrorIcon from './icons/errorIcon'
+import WarningIcon from './icons/warningIcon'
+import { CloseIcon, SaveIcon } from '@shared/icons';
+
+
+///-----------------------------------------
+/// Interface do Componente
+interface MessageBoxParams {
+  texto: string;
+  descricao?: string;
+
+  hasClickExit ?: boolean;
+  hasHover?: boolean;
+  /**
+   * @prop {number} tipoVisualizacao: Estilo de card (1- Mensagem sucesso, 2- Mensagem alerta, 3- Mensagem erro, 4- Notificação arquivo, 5- Erro Notificação arquivo)
+   */
+  tipoVisualizacao: number;
+  /**
+   * @prop {React.CSSProperties} style: Styles de CSS adicional
+   */
+  style?: React.CSSProperties;
+
+  /**
+ * @prop {() => void} onClick: Função que será executada quando houver o click do botão
+ */
+  onClick?: () => void
+
+  /**
+ * @prop {() => void} onClickExit: Função que será executada quando houver o click do botão de saida
+ */
+  onClickExit?: () => void
+
+}
+
+///-----------------------------------------
+/// Componente
+
+/**
+ * 
+ * @componente 
+ */
+export default function MessageBox(props: MessageBoxParams): any {
+
+  const MapBorderColor = [
+    '#2CA92A',
+    '#FFC200',
+    '#EA0000',
+    '#757575',
+    '#EA0000',
+  ]
+
+  const MapBackgroundColor = [
+    '#D1F6D1',
+    '#FEF0D4',
+    '#FFE5E5',
+    '#F2F2F2',
+    '#FFE5E5',
+  ]
+
+  const MapIconList = [
+    <SuccessIcon />,
+    <WarningIcon />,
+    <ErrorIcon />,
+    <SaveIcon />,
+    <SaveIcon fill='red'/>
+  ]
+
+
+  return (
+    <div style={{position: 'relative'}}>
+      <div
+        className={
+          props.hasHover ?
+            `${props.tipoVisualizacao === 1 ? style.success
+              : props.tipoVisualizacao === 2 ? style.warning
+                : props.tipoVisualizacao === 3 ? style.error
+                  : props.tipoVisualizacao === 4 ? style.notificacao
+                    : props.tipoVisualizacao === 5 ? style.notificacaoErro
+                      : ''} ${style.container}`
+            :
+            `${props.tipoVisualizacao === 1 ? style.successNoHover
+              : props.tipoVisualizacao === 2 ? style.warningNoHover
+                : props.tipoVisualizacao === 3 ? style.errorNoHover
+                  : props.tipoVisualizacao === 4 ? style.notificacaoNoHover
+                    : props.tipoVisualizacao === 5 ? style.notificacaoErroNoHover
+                      : ''} ${style.container}`
+        }
+        style={{
+          cursor: props.onClick ? 'pointer' : 'default',
+          ...props.style
+        }}
+        onClick={
+          props.onClick
+        }
+      >
+        <div className={style.square} style={{ backgroundColor: MapBorderColor[props.tipoVisualizacao - 1] }}>
+          {MapIconList[props.tipoVisualizacao - 1]}
+
+        </div>
+        <div style={{ display: 'inline-flex', width: 'calc(100% - 30px)' }}>
+          {props.texto}
+          <span> &nbsp;{props.descricao ? props.descricao : ''}</span>
+        </div>
+      </div>
+      {props.hasClickExit &&
+        <div style={{ 
+          display: 'inline-flex', 
+          position: 'absolute', 
+          width: '40px',
+          height: '100%',
+          justifyContent: 'center',
+          alignItems: 'center',
+          right: 0, 
+          top: 0, 
+          cursor: 'pointer' }} onClick={props.onClickExit}> <CloseIcon width='9' /> </div>
+      }
+    </div>
+  )
+
+
+}

package/src/components/cardLT/MessageBox/messageBox.stories.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import MessageBox from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Card LT/MessageBox',
+    component: MessageBox,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <MessageBox {...args} />
+
+export const WarningMessage = Template.bind({})
+WarningMessage.args = {
+    texto: 'Aguardando aprovação',
+    tipoVisualizacao: 2,
+    
+}
+
+export const SuccessMessage = Template.bind({})
+SuccessMessage.args = {
+    texto: 'Problema aprovado - 30 de abr. 2022',
+    tipoVisualizacao: 1,
+    
+}
+
+export const ErrorMessage = Template.bind({})
+ErrorMessage.args = {
+    texto: 'Revisar problema proposto',
+    tipoVisualizacao: 3,
+    
+}
+
+export const NotificacaoArquivo = Template.bind({})
+NotificacaoArquivo.args = {
+    texto: 'Budget_Final_Q1.xlxs',
+    descricao: '(570K)',
+    tipoVisualizacao: 4,
+    hasClickExit: true,
+    onClickExit: () =>{alert('Fechado!')},
+    onClick: () =>{alert('clicado!')}
+    
+}
+
+export const NotificacaoErroArquivo = Template.bind({})
+NotificacaoErroArquivo.args = {
+    texto: 'Tipo de arquivo não permitido! (.psd)',
+    tipoVisualizacao: 5,
+    hasClickExit: true,
+    onClickExit: () =>{alert('Fechado!')},
+    onClick: () =>{alert('clicado!')}
+    
+}

package/src/components/cardLT/Rating/Rating.module.css

@@ -0,0 +1,50 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=VT323&display=swap');
+
+.container {
+  width: 150px;
+  padding: 8px;
+  height: 80px;
+  display: flex;
+  justify-content: 'flex-start';
+  align-items: 'center';
+  position: relative;
+  margin-left: 16px;
+  flex-direction: row;
+  flex-wrap: wrap;
+  font-family: 'Work Sans';
+  
+}
+
+.titulo{
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 600px;
+}
+
+.content{
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+  align-items: flex-start;
+  
+}
+
+.star{
+  display: inline-flex;
+  width: 35px; 
+  height: 35px; 
+  position: relative; 
+  justify-content: center; 
+  align-items: center;
+}
+
+.avaliacao{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100px;
+  height: 100%;
+  margin-left: 4px;
+}

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

@@ -0,0 +1,92 @@
+
+import { NoBackpackSharp } from '@mui/icons-material';
+import style from './Rating.module.css'
+import StarIcon from './starIcon'
+
+///-----------------------------------------
+/// Interface do Componente
+interface RatingParams {
+   titulo: string;
+  /**
+   * @prop {number} nota: Valor da média da avaliação
+   */
+   nota: number;
+  /**
+   * @prop {string} descricaoAvaliacao: Descrição da avaliação (Ótimo, Bom...)
+   */  
+  descricaoAvaliacao: string;
+  /**
+   * @prop {string} nomeAvaliacao: nome da avaliação (avaliação...)
+   */  
+   nomeAvaliacao: string;
+   /**
+   * @prop {number} qtdeAvaliacao: Valor a ser exibido como (23 avaliações)
+   */  
+  qtdeAvaliacao: number;
+  /**
+   * @prop {number} tipoVisualizacao: Estilo de card (1- Estrela Amarela, 2- Estrela Negra, 3- Estrela Branca)
+   */  
+   tipoVisualizacao: number;  
+   /**
+    * @prop {React.CSSProperties} style: Styles de CSS adicional
+    */  
+  style?: React.CSSProperties;
+}
+
+///-----------------------------------------
+/// Componente
+
+
+
+/**
+ * 
+ * @componente 
+ */
+export default function Rating(props: RatingParams) {
+
+  const MapColorStar = [
+    '#FFC200',
+    '#000000',
+    '#FFFFFF',
+  ]
+  const MapColorNumberStar = [
+      '#FFFFFF',
+      '#FFFFFF',
+      '#FFC200',
+      '#FF4D0D',
+  ]
+
+  return (
+
+    <>    
+      <div className={style.container} style={{...props.style }}>
+
+        <div className={style.titulo} style={{display: 'flex', justifyContent: 'flex-start', alignItems: 'center', fontSize: 16, fontWeight: 600}}>
+          {props.titulo}
+        </div>
+
+        <div className={style.content} style={{display: 'flex', width: '100%', justifyContent: 'flex-start', alignItems: 'flex-start'}}>
+          
+          <div className={style.star} style={{display: 'inline-flex', width: 35, height: 35, position: 'relative',justifyContent: 'center', alignItems: 'center'}}>
+            <StarIcon color={MapColorStar[props.tipoVisualizacao-1]} />
+            <span style={{position: 'absolute', fontSize: 10, color: MapColorNumberStar[props.tipoVisualizacao-1], fontWeight: 'bold', top: 12, textAlign: 'center'}}>
+              {props.nota}
+            </span>
+          </div>
+          <div className={style.avaliacao} style={{justifyContent: props.descricaoAvaliacao ? 'flex-start' : 'center'}}>
+            <span style={{fontSize: 14, fontWeight: 600}}>{props.descricaoAvaliacao }</span>
+            <span style={{fontSize: 12, fontWeight: 400}}>{`${props.qtdeAvaliacao} ${props.qtdeAvaliacao > 1 ? props.nomeAvaliacao : props.nomeAvaliacao}`}</span>
+            
+          </div>
+          
+        </div>
+
+        
+
+      </div>
+    </>
+  )
+
+
+}
+

package/src/components/cardLT/Rating/rating.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import Rating from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Card LT/Rating',
+    component: Rating,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <Rating {...args} />
+
+export const ImpactoRating = Template.bind({})
+ImpactoRating.args = {
+    titulo: 'Impacto',
+    nota: 4.6,
+    descricaoAvaliacao: 'Ótimo',
+    nomeAvaliacao: 'avaliação',
+    qtdeAvaliacao: 19,
+    tipoVisualizacao: 1,
+    style: {background: '#E5E5E5'}
+}
+
+export const RelevanciaRating = Template.bind({})
+RelevanciaRating.args = {
+    titulo: 'Relevância',
+    nota: 3.8,
+    descricaoAvaliacao: 'Bom',
+    nomeAvaliacao: 'avaliação',
+    qtdeAvaliacao: 23,
+    tipoVisualizacao: 1,
+    style: {background: '#E5E5E5'}
+}

package/src/components/cardLT/Rating/starIcon.tsx

@@ -0,0 +1,24 @@
+
+///-----------------------------------------
+/// Interface do Componente
+interface StarIconParam {
+  color: string;  
+}
+
+///-----------------------------------------
+/// Componente
+
+/**
+ * 
+ * @componente 
+ */
+export default function StarIcon(props: StarIconParam) {
+
+  return (
+    <>    
+      <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M14.0989 0.872803C14.4623 0.117576 15.5377 0.117574 15.9011 0.872801L19.7145 8.7983C19.8581 9.09663 20.14 9.30458 20.4674 9.35367L29.0382 10.6388C29.8501 10.7606 30.1775 11.7548 29.5967 12.3352L23.3644 18.5625C23.1358 18.791 23.0316 19.1159 23.085 19.4348L24.5511 28.2045C24.6883 29.025 23.8221 29.6445 23.09 29.2495L15.4748 25.1411C15.1785 24.9812 14.8215 24.9812 14.5252 25.1411L6.91 29.2495C6.17789 29.6445 5.31171 29.025 5.44888 28.2045L6.91505 19.4348C6.96835 19.1159 6.86424 18.791 6.63556 18.5625L0.403279 12.3352C-0.17751 11.7548 0.149858 10.7606 0.961814 10.6388L9.53263 9.35367C9.86003 9.30458 10.1419 9.09663 10.2855 8.79831L14.0989 0.872803Z" fill={props.color}/>
+      </svg>
+    </>
+  )
+}

package/src/components/cardLT/RatingCurtidas/RatingCurtidas.module.css

@@ -0,0 +1,16 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=VT323&display=swap');
+
+.container {
+  width: 150px;
+  padding: 8px;
+  height: 80px;
+  display: flex;
+  justify-content: 'flex-start';
+  align-items: 'center';
+  position: relative;
+  margin-left: 16px;
+  flex-direction: row;
+  flex-wrap: wrap;
+  font-family: 'Work Sans';
+  
+}

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

@@ -0,0 +1,80 @@
+
+
+import style from './RatingCurtidas.module.css'
+import RocketButton from '../RocketButton/index'
+
+
+///-----------------------------------------
+/// Interface do Componente
+interface RatingCurtidasParams {
+  /**
+   * @prop {number} tipoBotao: Tipos de botão (1- Fundo Branco, rocket laranja. 2- Fundo Laranja, rocket branco. 3- Fundo cinza, rocket branco, 4- Fundo Branco, rocket preto)
+  */
+  tipoBotao: number;
+
+  titulo: string;
+
+  qtdeCurtidas: number;
+
+  descricaoCurtida?: string;
+  
+  style?: React.CSSProperties;
+}
+
+///-----------------------------------------
+/// Componente
+
+
+
+/**
+ * 
+ * @componente 
+ */
+export default function RatingCurtidas(props: RatingCurtidasParams) {
+
+  const MapColorPrimaria = [
+    '#FF4D0D',
+    '#FFFFFF',
+    '#FFFFFF',
+    '#222222'
+  ]
+
+  const MapColorSecundaria = [
+    '#FFFFFF',
+    '#FF4D0D',
+    '#CCCCCC',
+    '#FFFFFF'
+  ]
+
+  return (
+
+    <>    
+      <div className={style.container} style={{...props.style }}>
+        <div style={{display: 'flex', justifyContent: 'flex-start', alignItems: 'center', fontSize: 16, fontWeight: 600}}>
+            {props.titulo}
+        </div>
+
+        <div style={{display: 'flex', width: '100%', justifyContent: 'flex-start', alignItems: 'flex-start'}}>
+          
+          <div style={{display: 'inline-flex', width: 40, height: 40, justifyContent: 'center', alignItems: 'center', position:'relative'}}>
+            
+            <RocketButton tipoBotao={props.tipoBotao} />
+            
+          </div>
+          <div style={{display: 'inline-flex', width: 90, marginLeft: 4}}>
+            <div style={{display: 'flex', flexDirection: 'column', flexWrap: 'wrap',width: 100 }}>
+              <span style={{fontSize: 14, fontWeight: 600}}>{props.qtdeCurtidas ? props.qtdeCurtidas : 0}</span>
+              <span style={{fontSize: 12, fontWeight: 400}}>{props.descricaoCurtida }</span>
+            </div>
+            
+          </div>
+          
+        </div>
+
+      </div> 
+    </>
+  )
+
+
+}
+

package/src/components/cardLT/RatingCurtidas/ratingCurtidas.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import RatingCurtidas from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Card LT/RatingCurtidas',
+    component: RatingCurtidas,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <RatingCurtidas {...args} />
+
+export const CurtidasRating = Template.bind({})
+CurtidasRating.args = {
+    titulo: 'Curtidas',
+    qtdeCurtidas: 24,
+    descricaoCurtida: 'pessoas',
+    tipoBotao: 2,
+    style: {background: '#E5E5E5'}
+}

package/src/components/cardLT/RocketButton/RocketButton.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import RocketButton from '../RocketButton/index'
+
+import Rating from '../RocketButton/index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Card LT/RocketButton',
+    component: RocketButton,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <Rating {...args} />
+
+export const PrimaryButton = Template.bind({})
+PrimaryButton.args = {
+    tipoBotao: 1
+}
+
+export const SecondaryButton = Template.bind({})
+SecondaryButton.args = {
+    tipoBotao: 2
+}
+
+export const DisabledButton = Template.bind({})
+DisabledButton.args = {
+    tipoBotao: 3
+}

package/src/components/cardLT/RocketButton/RocketButtonIcon.tsx

@@ -0,0 +1,36 @@
+
+///-----------------------------------------
+/// Interface do Componente
+interface RocketButtonParam {
+  /**
+   * @prop {string} colorPrimaria: Cor do rocket do botão
+   */
+  colorPrimaria?: string;
+  /**
+   * @prop {string} colorSecundaria: Cor do fundo do botão
+   */
+  colorSecundaria?: string;  
+}
+
+///-----------------------------------------
+/// Componente
+
+/**
+ * 
+ * @componente 
+ */
+export default function RocketButtonIcon(props: RocketButtonParam) {
+
+  return (
+    <> 
+      <div style={{display: 'flex', alignItems:'center', justifyContent: 'center', borderRadius:25, background: props.colorSecundaria ? props.colorSecundaria : '#FF4D0D', width:32, height: 32, margin: 0}}>
+        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M7.15625 16.9915C6.89922 17.3907 6.69141 17.82 6.54102 18.2657H8.85977V15.2771C8.18164 15.72 7.60195 16.3024 7.15625 16.9915ZM19.141 15.2771V18.2657H21.4598C21.3094 17.82 21.1016 17.3907 20.8445 16.9915C20.4037 16.3065 19.8232 15.7222 19.141 15.2771ZM17.391 8.71729L14.0004 4.69775L10.6098 8.71729V18.2657H17.391V8.71729ZM14.0004 12.2501C13.6569 12.2431 13.3299 12.1017 13.0895 11.8563C12.8491 11.611 12.7144 11.2811 12.7144 10.9376C12.7144 10.5941 12.8491 10.2642 13.0895 10.0188C13.3299 9.77347 13.6569 9.63211 14.0004 9.6251C14.3438 9.63211 14.6709 9.77347 14.9113 10.0188C15.1517 10.2642 15.2864 10.5941 15.2864 10.9376C15.2864 11.2811 15.1517 11.611 14.9113 11.8563C14.6709 12.1017 14.3438 12.2431 14.0004 12.2501Z" fill={props.colorPrimaria ? props.colorPrimaria : '#FFF'} fillOpacity="0.35"/>
+        <path d="M23.625 20.125C23.625 17.0734 21.8367 14.4375 19.25 13.2098V8.67617C19.25 8.26328 19.1051 7.86406 18.8371 7.54961L14.6699 2.60859C14.4949 2.40078 14.2461 2.29688 14 2.29688C13.7539 2.29688 13.5051 2.40078 13.3301 2.60859L9.16289 7.54961C8.89674 7.86471 8.7505 8.26372 8.75 8.67617V13.2098C6.16328 14.4375 4.375 17.0734 4.375 20.125H8.6543C8.59141 20.3219 8.55859 20.5352 8.55859 20.7758C8.55859 21.3801 8.76641 21.9707 9.14375 22.4383C9.45175 22.8207 9.85968 23.1103 10.3223 23.275C10.9539 24.7516 12.3895 25.7031 14 25.7031C14.7957 25.7031 15.5668 25.468 16.2258 25.025C16.8711 24.593 17.3715 23.9887 17.675 23.275C18.1374 23.1113 18.5454 22.8226 18.8535 22.441C19.2314 21.9692 19.4377 21.383 19.4387 20.7785C19.4387 20.5488 19.4086 20.3301 19.3539 20.1277L23.625 20.125ZM8.85938 18.2656H6.54062C6.69102 17.8199 6.89883 17.3906 7.15586 16.9914C7.60156 16.3023 8.18125 15.7199 8.85938 15.277V18.2656ZM10.6094 13.2098V8.71719L14 4.69766L17.3906 8.71719V18.2656H10.6094V13.2098ZM17.1746 21.443C17.0324 21.525 16.8684 21.5578 16.707 21.5359L16.1738 21.4703L16.0973 22.0008C15.9496 23.0371 15.0473 23.8191 14 23.8191C12.9527 23.8191 12.0504 23.0371 11.9027 22.0008L11.8262 21.4676L11.293 21.5359C11.1309 21.5553 10.9669 21.5217 10.8254 21.4402C10.5875 21.3035 10.4398 21.0492 10.4398 20.773C10.4398 20.4832 10.6012 20.2426 10.8391 20.1223H17.1637C17.4043 20.2453 17.5629 20.4859 17.5629 20.773C17.5602 21.052 17.4125 21.309 17.1746 21.443ZM19.1406 18.2656V15.277C19.8228 15.7221 20.4033 16.3064 20.8441 16.9914C21.1012 17.3906 21.309 17.8199 21.4594 18.2656H19.1406V18.2656Z" fill={props.colorPrimaria ? props.colorPrimaria : '#FFF'}/>
+        <path d="M12.6875 10.9375C12.6875 11.2856 12.8258 11.6194 13.0719 11.8656C13.3181 12.1117 13.6519 12.25 14 12.25C14.3481 12.25 14.6819 12.1117 14.9281 11.8656C15.1742 11.6194 15.3125 11.2856 15.3125 10.9375C15.3125 10.5894 15.1742 10.2556 14.9281 10.0094C14.6819 9.76328 14.3481 9.625 14 9.625C13.6519 9.625 13.3181 9.76328 13.0719 10.0094C12.8258 10.2556 12.6875 10.5894 12.6875 10.9375Z" fill={props.colorPrimaria ? props.colorPrimaria : '#FFF'}/>
+        </svg>
+
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,57 @@
+
+import RocketButtonIcon from './RocketButtonIcon';
+
+///-----------------------------------------
+/// Interface do Componente
+interface RocketButtonParams {
+  /**
+   * @prop {number} tipoBotao: Tipos de botão (1- Fundo Branco, rocket laranja. 2- Fundo Laranja, rocket branco. 3- Fundo cinza, rocket branco)
+  */
+  tipoBotao: number;
+  
+  style?: React.CSSProperties;
+
+  handleClick ?: ()=> void;
+}
+
+///-----------------------------------------
+/// Componente
+
+
+
+/**
+ * 
+ * @componente 
+ */
+export default function RocketButton(props: RocketButtonParams) {
+
+  const MapColorPrimaria = [
+    '#FF4D0D',
+    '#FFFFFF',
+    '#FFFFFF',
+    '#222222'
+  ]
+
+  const MapColorSecundaria = [
+    '#FFFFFF',
+    '#FF4D0D',
+    '#CCCCCC',
+    '#FFFFFF'
+  ]
+
+  return (
+
+    <>    
+      <div>
+        <RocketButtonIcon
+          colorPrimaria = {MapColorPrimaria[props.tipoBotao-1]}
+          colorSecundaria= {MapColorSecundaria[props.tipoBotao-1]}
+        />
+
+      </div> 
+    </>
+  )
+
+
+}
+