frst-components 0.20.0

package/src/components/cardLT/StepsMission/Planet.module.css

@@ -0,0 +1,137 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=VT323&display=swap');
+
+.container {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  justify-content: 'center';
+  align-items: 'center';
+  position: relative;
+  margin-left: 16px;
+
+  text-align: center;
+  font-size: 26px;
+  font-family: 'VT323', monospace;
+  color: white;
+  -webkit-text-stroke: 0.5px black;
+  text-shadow:2px 0 0 black,0 2px 0 black,-2px 0 0 black,0 -2px 0 black;
+}
+
+.label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  padding: 2px;
+  border: 2px dashed white;
+  bottom: 0;
+  left: 8px;
+  right: 8px;
+  width: calc(100% -16px);
+}
+@media (max-width: 600px) {
+  .label {
+    font-size: 22px;
+    text-shadow: none;
+    -webkit-text-stroke: 0%;
+    color: black;
+  }
+}
+
+@media (max-width: 540px) {
+  .label {
+    font-size: 18px;
+    text-shadow: none;
+    -webkit-text-stroke: 0%;
+    color: black;
+  }
+}
+
+@media (max-width: 470px) {
+  .label {
+    font-size: 16px;
+    text-shadow: none;
+    -webkit-text-stroke: 0%;
+    color: black;
+  }
+}
+
+@media (max-width: 400px) {
+  .label {
+    font-size: 14px;
+    text-shadow: none;
+    -webkit-text-stroke: 0%;
+    color: black;
+  }
+}
+
+.block {
+  position: absolute;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  padding: 4px;
+  
+  bottom: 16px;
+  left: 0;
+  right: 0;
+  top: 0;
+  /* width: calc(100% -16px); */
+  
+}
+
+.block img {
+  width: 50%;
+  height: 50%;
+  object-fit: contain;
+  margin-top: 0;
+}
+
+.imgAtive {
+  filter: grayscale(0);
+  opacity: 1;
+  height: 100% !important;
+  width: 100% !important;
+  object-fit: contain;
+  margin-left: 2px;
+}
+
+.imgAtive:hover {
+  cursor: pointer
+}
+
+.imgInative {
+  filter: grayscale(1);
+  opacity: 1;
+  height: 100% !important;
+  width: 100% !important;
+  object-fit: contain;
+  margin-left: 2px;
+}
+
+.imgInative:hover {
+  cursor: pointer;
+}
+
+.imgBlocked {
+  filter: grayscale(1);
+  opacity: 0.5;
+  height: 100% !important;
+  width: 100% !important;
+  object-fit: contain;
+  margin-left: 2px;;
+}
+
+.imgBlockedL:hover {
+  cursor: not-allowed;
+}
+
+.missaoTitle{
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  
+  color: #0645AD;
+}

package/src/components/cardLT/StepsMission/StepMission.tsx

@@ -0,0 +1,220 @@
+
+import React, {
+  useEffect,
+  useState,
+  useLayoutEffect,
+  CSSProperties
+} from 'react'
+
+import style from './Planet.module.css'
+import Steps from './Steps'
+import { Button } from '../../../../index'
+import { FowardArrow } from '../../../shared/icons'
+
+///-----------------------------------------
+/// Interface do Componente
+interface MissionStepsParams {
+  /**
+   * @prop {number} step: Step (Marte, Júpter, Saturno, Urano, Netuno)
+   */
+  stepProblem: number;
+  /**
+   * @prop {number} stepActive: 
+   */
+  stepActive: number
+  idioma?: 'pt-BR' | 'pt-PT' | 'en-US' | 'es'
+  /**
+   * @prop {React.CSSProperties} style: Styles de CSS adicional
+   */
+  style?: React.CSSProperties;
+  /**
+   * @prop {(step: number) => void} onSelected: Função irá retornar o step selecionado
+   */
+  onSelected: (step: number) => void
+  /**
+  * @prop {() => void} onClickContinue: Função executada no botão de continuar desafio
+  */
+  onClickContinue?: () => void
+}
+
+///-----------------------------------------
+/// Componente
+
+
+
+/**
+ * 
+ * @componente Planet: Componente responsável por gerenciar os controles dos steps das missões
+ */
+export default function MissionSteps(props: MissionStepsParams) {
+
+  const traducaoPTBR = {
+    next: "Ver missão seguinte >",
+    nextShort: "Próx. >",
+    previous: "< Ver missão anterior",
+    previousShort: "< Ant.",
+    continueChallenge: "Continuar desafio"
+  }
+
+  const traducaoES = {
+    next: "Ver misión siguiente >",
+    nextShort: "Próx. >",
+    previous: "< Ver misión anterior",
+    previousShort: "< Ant.",
+    continueChallenge: "Continuar desafío"
+  }
+
+  const traducaoENUS = {
+    next: "View next mission >",
+    nextShort: "Next >",
+    previous: "< View previous mission",
+    previousShort: "< Previous",
+    continueChallenge: "Continue challenge"
+  }
+
+  const traducaoPT = {
+    next: "Ver missão seguinte >",
+    nextShort: "Próx. >",
+    previous: "< Ver missão anterior",
+    previousShort: "< Ant.",
+    continueChallenge: "Continuar desafio"
+  }
+
+  const mapTraducao = new Map()  
+    mapTraducao.set("pt-BR", traducaoPTBR )
+    mapTraducao.set("es", traducaoES)
+    mapTraducao.set("en-US", traducaoENUS)
+    mapTraducao.set("pt-PT", traducaoPT)
+
+  const [stepLiberado, setstepLiberado] = useState(props.stepProblem);
+  const [stepActive, setStepActive] = useState(props.stepActive);
+  const [Idioma, setIdioma] = useState(props.idioma ? props.idioma : 'pt-BR');
+
+  const setStep = (step: number) => {
+    setStepActive(step)
+    props.onSelected(step)
+  }
+
+  useEffect(() => {
+    setIdioma(props.idioma ? props.idioma : 'pt-BR')
+  }, [props.idioma])
+
+  useEffect(() => {
+    setstepLiberado(props.stepProblem)
+  }, [props.stepProblem]);
+
+  // Função para pegar o width da tela
+  const [size, setSize] = useState([0, 0])
+  useLayoutEffect(() => {
+    function updateSize() {
+      setSize([window.innerWidth, window.innerHeight]);
+    }
+    window.addEventListener('resize', updateSize);
+    updateSize();
+    return () => window.removeEventListener('resize', updateSize);
+  }, []);
+  const BREAKWIDTH = 475
+
+  const leftButtonStyle: CSSProperties = {
+    position: 'absolute',
+    top: 20,
+    left: 0,
+    cursor: 'pointer'
+  }
+
+  const rightButtonStyle = {
+    ...leftButtonStyle,
+    right: 0,
+    left: 'auto'
+  }
+
+  return (
+
+    <>
+      <div style={{ display: "flex", justifyContent: 'center', width: '100%', position: 'relative', padding: 20, backgroundColor: 'white', marginTop: '10px' }}>
+
+        {
+          stepActive > 1 ?
+            size[0] >= BREAKWIDTH ?
+              <span onClick={() => { setStep(stepActive - 1) }} className={style.missaoTitle} style={leftButtonStyle}>{`${mapTraducao.get(Idioma).previous}`}</span>
+              :
+              <span onClick={() => { setStep(stepActive - 1) }} className={style.missaoTitle} style={leftButtonStyle}>{`${mapTraducao.get(Idioma).previousShort}`}</span>
+            : null
+        }
+
+        {
+          stepActive < stepLiberado ?
+            size[0] >= BREAKWIDTH ?
+              <span onClick={() => { setStep(stepActive + 1) }} className={style.missaoTitle} style={rightButtonStyle}>{`${mapTraducao.get(Idioma).next}`}</span>
+              :
+              <span onClick={() => { setStep(stepActive + 1) }} className={style.missaoTitle} style={rightButtonStyle}>{`${mapTraducao.get(Idioma).nextShort}`}</span>
+            : props.stepProblem < 5 &&
+                props.onClickContinue &&
+                  <span
+                    className={style.missaoTitle}
+                    style={{ ...rightButtonStyle, marginTop: '-10px' }}
+                  >
+                    <Button
+                      handleClick={() => props.onClickContinue()}
+                      label={mapTraducao.get(Idioma).continueChallenge}
+                      variant="primary"
+                      endIcon={<FowardArrow fill="#fff" />}
+                      style={{ height: '40px'}}
+                    />
+                  </span>
+        }
+
+        <div style={{ display: "inline-flex", marginTop: 40, justifyContent: 'center', width: '100%' }}>
+          <Steps
+            step={1}
+            idioma={Idioma}
+            status={stepLiberado >= 1 ? stepActive === 1 ? "A" : "I" : "B"}
+            onClick={() => {
+              setStep(1)
+            }}
+
+          />
+          <Steps
+            step={2}
+            idioma={Idioma}
+            status={stepLiberado >= 2 ? stepActive === 2 ? "A" : "I" : "B"}
+            onClick={() => {
+              setStep(2)
+            }}
+
+          />
+          <Steps
+            step={3}
+            idioma={Idioma}
+            status={stepLiberado >= 3 ? stepActive === 3 ? "A" : "I" : "B"}
+            onClick={() => {
+              setStep(3)
+            }}
+
+          />
+          <Steps
+            step={4}
+            idioma={Idioma}
+            status={stepLiberado >= 4 ? stepActive === 4 ? "A" : "I" : "B"}
+            onClick={() => {
+              setStep(4)
+            }}
+
+          />
+          <Steps
+            step={5}
+            idioma={Idioma}
+            status={stepLiberado >= 5 ? stepActive === 5 ? "A" : "I" : "B"}
+            onClick={() => {
+              setStep(5)
+            }}
+
+          />
+        </div>
+      </div>
+    </>
+  )
+
+
+}
+

package/src/components/cardLT/StepsMission/Steps.tsx

@@ -0,0 +1,116 @@
+
+import React, {useState, useEffect} from 'react'
+
+import style from './Planet.module.css'
+
+///-----------------------------------------
+/// Interface do Componente
+interface StepParams {
+  /**
+   * @prop {number} step: Step (Marte, Júpter, Saturno, Urano, Netuno)
+   */
+   step: number
+  /**
+   * @prop {string} status: Status Planeta (B- Bloqueado, I- Inativo e A- Ativo)
+   */
+   status : string
+   idioma? : 'pt-BR' | 'pt-PT' | 'en-US' | 'es'   
+  /**
+   * @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
+}
+
+///-----------------------------------------
+/// Componente
+
+
+
+/**
+ * 
+ * @componente Planet: Componente responsável por gerenciar os controles dos steps das missões
+ */
+export default function Steps(props: StepParams) {
+
+  const TypeStep = [
+    'https://api-motor.s3.amazonaws.com/marte.png',
+    'https://api-motor.s3.amazonaws.com/jupter.png',
+    'https://api-motor.s3.amazonaws.com/saturno.png',
+    'https://api-motor.s3.amazonaws.com/urano.png',
+    'https://api-motor.s3.amazonaws.com/netuno.png',
+  ]
+
+  const TypeStepNamePTBR = [      
+    'Marte',
+    'Júpiter',
+    'Saturno',
+    'Urano',
+    'Netuno',
+  ]
+
+  const TypeStepNamePT = [      
+    'Marte',
+    'Júpiter',
+    'Saturno',
+    'Urano',
+    'Netuno',
+  ]
+
+  const TypeStepNameEN = [      
+    'Mars',
+    'Jupiter',
+    'Saturn',
+    'Uranus',
+    'Neptune',
+  ]
+
+  const TypeStepNameES = [      
+    'Marte',
+    'Júpiter',
+    'Saturno',
+    'Urano',
+    'Netuno',
+  ]
+
+  const mapTraducao = new Map()
+  mapTraducao.set("pt-BR", TypeStepNamePTBR)
+  mapTraducao.set("pt-PT", TypeStepNamePT)
+  mapTraducao.set("en-US", TypeStepNameEN)
+  mapTraducao.set("es", TypeStepNameES)
+
+  const [Idioma, setIdioma] = useState(props.idioma ? props.idioma : 'pt-BR');
+
+  useEffect(() => {
+    setIdioma(props.idioma ? props.idioma : 'pt-BR')
+  }, [props.idioma])
+
+  return (
+    <>    
+      <div className={style.container} style={{...props.style}} onClick={() => {
+        if (props.status !== 'B') {
+          props.onClick()
+        }
+      }}>
+        <img src={TypeStep[props.step-1]} 
+          className={
+              props.status === "A" ? 
+                style.imgAtive 
+              : props.status === "I" ? 
+                style.imgInative 
+              : style.imgBlocked} />
+        <div className={style.label}>{mapTraducao.get(Idioma)[props.step-1]}</div>
+        {
+          props.status === 'B' &&        
+          <div className={style.block}>
+            <img src={'https://api-motor.s3.amazonaws.com/lock.png'}  />
+          </div>
+        }        
+      </div>
+    </>
+  )
+}
+

package/src/components/cardLT/StepsMission/planet.stories.tsx

@@ -0,0 +1,73 @@
+import Steps from './Steps'
+import StepMission from './StepMission'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Card LT/Missão',
+    component: Steps,
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <Steps {...args} />
+const Template2 = (args) => <StepMission {...args} />
+
+export const MissionStepsMars= Template2.bind({})
+MissionStepsMars.args = {
+    stepProblem: 1,
+    stepActive: 1,  
+    onSelected: (step: number)=> {
+        alert(`Step Selecionado ${step}`)
+    }
+}
+export const MissionStepsSaturno = Template2.bind({})
+MissionStepsSaturno.args = {
+    stepProblem: 3,
+    stepActive: 3,  
+    onSelected: (step: number)=> {
+        alert(`Step Selecionado ${step}`)
+    }
+}
+export const MissionStepsNetuno = Template2.bind({})
+MissionStepsNetuno.args = {
+    stepProblem: 5,
+    stepActive: 5,  
+    onSelected: (step: number)=> {
+        alert(`Step Selecionado ${step}`)
+    }
+}
+export const Step1 = Template.bind({})
+Step1.args = {
+    step: 1,
+    status: "A", 
+}
+export const Step2 = Template.bind({})
+Step2.args = {
+    step: 2,
+    status: "A",  
+}
+export const Step3 = Template.bind({})
+Step3.args = {
+    step: 3,
+    status: "A",  
+}
+export const Step4 = Template.bind({})
+Step4.args = {
+    step: 4,
+    status: "A",  
+}
+export const Step5 = Template.bind({})
+Step5.args = {
+    step: 5,
+    status: "A",  
+}
+export const StepInativo = Template.bind({})
+StepInativo.args = {
+    step: 1,
+    status: "I",  
+}
+export const StepBloqueado = Template.bind({})
+StepBloqueado.args = {
+    step: 1,
+    status: "B",  
+}

package/src/components/cardLT/StepsMission/planetSteps.d.ts

@@ -0,0 +1,40 @@
+import React from "react"
+
+///-----------------------------------------
+/// Interface do Componente
+interface IStepParams {
+    /**
+     * @prop {number} step: Step (Marte, Júpter, Saturno, Urano, Netuno)
+     */
+     step: number
+    /**
+     * @prop {string} status: Status Planeta (B- Bloqueado, I- Inativo e A- Ativo)
+     */
+     status : string
+     idioma? : 'pt-BR' | 'pt-PT' | 'en-US' | 'es'   
+    /**
+     * @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
+  }
+  
+  ///-----------------------------------------
+  /// Componente
+  
+  
+  
+  /**
+   * 
+   * @componente Planet: Componente responsável por gerenciar os controles dos steps das missões
+   */
+export interface IStepsTranslate  extends IStepParams{
+
+    ratingNavegationAnt?: string
+    ratingNavegationMissaoAnterior?: string
+    ratingNavegationProximaMissao?: string
+    ratingNavegationProx?: string
+}

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

@@ -0,0 +1,8 @@
+.container {
+  display: flex;
+  justify-content: 'flex-start';
+  align-items: 'center';
+  position: relative;
+  flex-direction: row;
+  flex-wrap: wrap;
+}

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

@@ -0,0 +1,64 @@
+import { relative } from 'path';
+import { useEffect, useState } from 'react'
+import style from './TextIcon.module.css'
+
+///-----------------------------------------
+/// Interface do Componente
+interface TextIconParams {
+  /**
+   * @prop {string} description: Valor do texto
+   */
+  description: string;
+  /**
+   * @prop {<React.SVGProps<SVGSVGElement>>} svg: Informar a tag da props. Ex.: "svg={<StarIcon color="black"/>}""
+   */  
+  svg?: React.SVGProps<SVGSVGElement>;
+   /**
+   * @prop {<React.SVGProps<SVGSVGElement>>} linkImage: Link de imagens em PNG, JPEG...
+   */  
+  linkImage?: React.SVGProps<SVGSVGElement>;
+   /**
+    * @prop {React.CSSProperties} style: Styles de CSS adicional
+    */  
+  style?: React.CSSProperties;
+}
+
+///-----------------------------------------
+/// Componente
+
+
+
+/**
+ * 
+ * @componente 
+ */
+export default function TextIcon(props: TextIconParams) {
+
+  const MapColorStart = [
+    '#222222',
+    '#000000',
+  ]
+
+  return (
+
+    <>    
+      <div className={style.container} style={{...props.style }}>
+    
+        <div style={{display: 'flex',  width: '100%', justifyContent: 'flex-start', alignItems: 'center'}}>          
+          <div style={{display: 'inline-flex', width: 30, height: 30, position: 'relative', justifyContent: 'center', alignItems: 'center'}}>            
+            {props.svg}
+          </div>
+          <div style={{display: 'inline-flex', marginLeft: 8, whiteSpace: 'pre-wrap'}}>
+            {props.description}           
+          </div>          
+        </div>
+
+        
+
+      </div>
+    </>
+  )
+
+
+}
+

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

@@ -0,0 +1,27 @@
+
+///-----------------------------------------
+
+import React from "react";
+
+/// 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>
+    </>
+  )
+}