frst-components 0.20.0 → 0.20.2

package/src/components/LXP/calendarLxp/calendar.css

@@ -1,375 +0,0 @@
-.rdrCalendarWrapper{
-  color: #000000;
-  font-size: 16px;
-  font-family: 'PT Sans';
-}
-
-.rdrDateDisplayWrapper{
-  background-color: rgb(239, 242, 247);
-}
-
-.rdrDateDisplay{
-  margin: 0.833em;
-}
-
-.rdrDateDisplayItem{
-  border-radius: 4px;
-  background-color: rgb(255, 255, 255);
-  box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21);
-  border: 1px solid transparent;
-}
-
-.rdrDateDisplayItem input{
-    cursor: pointer;
-    height: 2.5em;
-    line-height: 2.5em;
-    border: 0px;
-    background: transparent;
-    width: 100%;
-    color: #222222;
-  }
-
-.rdrDateDisplayItemActive{
-  border-color: currentColor;
-}
-
-.rdrDateDisplayItemActive input{
-    color: #7d888d
-  }
-
-.rdrMonthAndYearWrapper {
-  align-items: center;
-  height: 60px;
-  padding-top: 10px;
-}
-
-.rdrMonthAndYearPickers{
-  font-weight: 600;
-}
-
-.rdrMonthAndYearPickers select{
-    -moz-appearance: none;
-         appearance: none;
-    -webkit-appearance: none;
-    border: 0;
-    background: transparent;
-    padding: 10px 30px 10px 10px;
-    border-radius: 4px;
-    outline: 0;
-    color: #FF4D0D;
-    background: url("data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>") no-repeat;
-    background-position: right 8px center;
-    cursor: pointer;
-    text-align: center;
-    display: none;
-  }
-
-.rdrMonthAndYearPickers select:hover{
-      background-color: rgba(187, 22, 22, 0.07);
-    }
-
-.rdrMonthPicker, .rdrYearPicker{
-  margin: 0 5px
-}
-
-.rdrNextPrevButton {
-  display: block;
-  width: 24px;
-  height: 24px;
-  margin: 0 0.833em;
-  padding: 0;
-  border: 0;
-  border-radius: 5px;
-  background: #EFF2F7
-}
-
-.rdrNextPrevButton:hover{
-    background: #E1E7F0;
-  }
-
-.rdrNextPrevButton i {
-    display: block;
-    width: 0;
-    height: 0;
-    padding: 0;
-    text-align: center;
-    border-style: solid;
-    margin: auto;
-    transform: translate(-3px, 0px);
-  }
-
-.rdrPprevButton i {
-    border-width: 4px 6px 4px 4px;
-    border-color: transparent rgb(52, 73, 94) transparent transparent;
-    transform: translate(-3px, 0px);
-  }
-
-.rdrNextButton i {
-    margin: 0 0 0 7px;
-    border-width: 4px 4px 4px 6px;
-    border-color: transparent transparent transparent rgb(52, 73, 94);
-    transform: translate(3px, 0px);
-  }
-
-.rdrWeekDays {
-  padding: 0 0.833em;
-}
-
-.rdrMonth{
-  padding: 0 0.833em 1.666em 0.833em;
-}
-
-.rdrMonth .rdrWeekDays {
-    padding: 0;
-  }
-
-.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{
-  display: none;
-}
-
-.rdrWeekDay {
-  font-weight: 400;
-  line-height: 2.667em;
-  color: #FF4D0D;
-}
-
-.rdrDay {
-  background: transparent;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  border: 0;
-  padding: 0;
-  line-height: 3.000em;
-  height: 3.000em;
-  text-align: center;
-  color: #1d2429;
-}
-
-.rdrDay:focus {
-    outline: 0;
-  }
-
-.rdrDayNumber {
-  outline: 0;
-  font-weight: 300;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  top: 5px;
-  bottom: 5px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.rdrDayToday .rdrDayNumber span{
-  font-weight: 500
-}
-
-.rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after{
-      background: #fff;
-    }
-
-.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span{
-          color: rgba(255, 255, 255, 0.85);
-        }
-
-.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
-  background: currentColor;
-  position: absolute;
-  top: 5px;
-  left: 0;
-  right: 0;
-  bottom: 5px;
-}
-
-.rdrSelected{
-  left: 2px;
-  right: 2px;
-}
-
-
-.rdrStartEdge{
-  border-top-left-radius: 1.042em;
-  border-bottom-left-radius: 1.042em;
-  left: 2px;
-}
-
-.rdrEndEdge{
-  border-top-right-radius: 1.042em;
-  border-bottom-right-radius: 1.042em;
-  right: 2px;
-}
-
-.rdrSelected{
-  border-radius: 1.042em;
-}
-
-.rdrDayStartOfMonth .rdrInRange, .rdrDayStartOfMonth .rdrEndEdge, .rdrDayStartOfWeek .rdrInRange, .rdrDayStartOfWeek .rdrEndEdge{
-    border-top-left-radius: 1.042em;
-    border-bottom-left-radius: 1.042em;
-    left: 2px;
-  }
-
-.rdrDayEndOfMonth .rdrInRange,  .rdrDayEndOfMonth .rdrStartEdge,  .rdrDayEndOfWeek .rdrInRange,  .rdrDayEndOfWeek .rdrStartEdge{
-    border-top-right-radius: 1.042em;
-    border-bottom-right-radius: 1.042em;
-    right: 2px;
-  }
-
-.rdrDayStartOfMonth .rdrDayInPreview, .rdrDayStartOfMonth .rdrDayEndPreview, .rdrDayStartOfWeek .rdrDayInPreview, .rdrDayStartOfWeek .rdrDayEndPreview{
-    border-top-left-radius: 1.333em;
-    border-bottom-left-radius: 1.333em;
-    border-left-width: 1px;
-    left: 0px;
-  }
-
-.rdrDayEndOfMonth .rdrDayInPreview, .rdrDayEndOfMonth .rdrDayStartPreview, .rdrDayEndOfWeek .rdrDayInPreview, .rdrDayEndOfWeek .rdrDayStartPreview{
-   border-top-right-radius: 1.333em;
-   border-bottom-right-radius: 1.333em;
-   border-right-width: 1px;
-   right: 0px;
- }
-
-.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
-  background: rgba(255, 255, 255, 0.09);
-  position: absolute;
-  top: 3px;
-  left: 0px;
-  right: 0px;
-  bottom: 3px;
-  pointer-events: none;
-  border: 0px solid currentColor;
-  z-index: 1;
-}
-
-.rdrDayStartPreview{
-  border-top-width: 1px;
-  border-left-width: 1px;
-  border-bottom-width: 1px;
-  border-top-left-radius: 1.333em;
-  border-bottom-left-radius: 1.333em;
-  left: 0px;
-}
-
-.rdrDayInPreview{
-  border-top-width: 1px;
-  border-bottom-width: 1px;
-}
-
-.rdrDayEndPreview{
-  border-top-width: 1px;
-  border-right-width: 1px;
-  border-bottom-width: 1px;
-  border-top-right-radius: 1.333em;
-  border-bottom-right-radius: 1.333em;
-  right: 2px;
-  right: 0px;
-}
-
-.rdrDefinedRangesWrapper{
-  font-size: 12px;
-  width: 226px;
-  border-right: solid 1px #eff2f7;
-  background: #fff;
-}
-
-.rdrDefinedRangesWrapper .rdrStaticRangeSelected{
-    color: currentColor;
-    font-weight: 600;
-  }
-
-.rdrStaticRange{
-  border: 0;
-  cursor: pointer;
-  display: block;
-  outline: 0;
-  border-bottom: 1px solid #eff2f7;
-  padding: 0;
-  background: #fff
-}
-
-.rdrStaticRange:hover .rdrStaticRangeLabel,.rdrStaticRange:focus .rdrStaticRangeLabel{
-      background: #eff2f7;
-    }
-
-.rdrStaticRangeLabel{
-  display: block;
-  outline: 0;
-  line-height: 18px;
-  padding: 10px 20px;
-  text-align: left;
-}
-
-.rdrInputRanges{
-  padding: 10px 0;
-}
-
-.rdrInputRange{
-  align-items: center;
-  padding: 5px 20px;
-}
-
-.rdrInputRangeInput{
-  width: 30px;
-  height: 30px;
-  line-height: 30px;
-  border-radius: 4px;
-  text-align: center;
-  border: solid 1px rgb(222, 231, 235);
-  margin-right: 10px;
-  color: rgb(108, 118, 122)
-}
-
-.rdrInputRangeInput:focus, .rdrInputRangeInput:hover{
-    border-color: rgb(180, 191, 196);
-    outline: 0;
-    color: #333;
-  }
-
-.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{
-  content: '';
-  border: 1px solid currentColor;
-  border-radius: 1.333em;
-  position: absolute;
-  top: -2px;
-  bottom: -2px;
-  left: 0px;
-  right: 0px;
-  background: transparent;
-}
-
-.rdrDayPassive{
-  pointer-events: none;
-}
-
-.rdrDayPassive .rdrDayNumber span{
-    color: #AEB0B3;
-  }
-
-.rdrDayPassive .rdrInRange, .rdrDayPassive .rdrStartEdge, .rdrDayPassive .rdrEndEdge, .rdrDayPassive .rdrSelected, .rdrDayPassive .rdrDayStartPreview, .rdrDayPassive .rdrDayInPreview, .rdrDayPassive .rdrDayEndPreview{
-    display: none;
-  }
-
-.rdrDayDisabled {
-  background-color: rgb(248, 248, 248);
-}
-
-.rdrDayDisabled .rdrDayNumber span{
-    color: #aeb9bf;
-  }
-
-.rdrDayDisabled .rdrInRange, .rdrDayDisabled .rdrStartEdge, .rdrDayDisabled .rdrEndEdge, .rdrDayDisabled .rdrSelected, .rdrDayDisabled .rdrDayStartPreview, .rdrDayDisabled .rdrDayInPreview, .rdrDayDisabled .rdrDayEndPreview{
-    filter: grayscale(100%) opacity(60%);
-  }
-
-.rdrMonthName{
-  text-align: center;
-  font-weight: 700;
-  color: #FF4D0D;
-  padding: 0.833em;
-}

package/src/components/LXP/calendarLxp/calendarLxp.module.css

@@ -1,39 +0,0 @@
-.containerCalendar {
-    display: flex;
-    position: relative;
-    width: fit-content;
-    min-height: 550px;
-    border-radius: 8px;
-    background-color: #FFF;
-}
-
-.fechar{
-    font-size: 12px;
-    color: #222222;
-
-    display: flex;
-    justify-content: right;
-    align-items: center;
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    margin-right: 24px;
-    margin-top: 24px;
-    cursor: default;
-    
-}
-
-.calendar {
-    padding: 32px;
-    display: inline-flex;
-    
-}
-
-.btnSubmit {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    margin-right: 24px;
-    margin-bottom: 24px;
-}

package/src/components/LXP/calendarLxp/calendarLxp.stories.tsx

@@ -1,19 +0,0 @@
-import React from 'react'
-
-import CalendarLxp from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'LXP/CalendarLxp',
-    component: CalendarLxp,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <CalendarLxp {...args} />
-
-export const Normal = Template.bind({})
-Normal.args = {
-    open: true,
-    onSave: (date) => alert(date),
-    handleClose: () => alert('Saindo!'),
-}

package/src/components/LXP/calendarLxp/defaultRanges.tsx

@@ -1,99 +0,0 @@
-import {
-    addDays,
-    endOfDay,
-    startOfDay,
-    startOfMonth,
-    endOfMonth,
-    addMonths,
-    startOfWeek,
-    endOfWeek,
-    isSameDay,
-    differenceInCalendarDays,
-    startOfQuarter,
-    endOfQuarter,
-    addQuarters,
-    startOfYear,
-    endOfYear,
-} from 'date-fns';
-
-const defineds = {
-    startOfWeek: startOfWeek(new Date()),
-    endOfWeek: endOfWeek(new Date()),
-    startOfLastWeek: startOfWeek(addDays(new Date(), -7)),
-    endOfLastWeek: endOfWeek(addDays(new Date(), -7)),
-    startOfToday: startOfDay(new Date()),
-    endOfToday: endOfDay(new Date()),
-    startOfYesterday: startOfDay(addDays(new Date(), -1)),
-    endOfYesterday: endOfDay(addDays(new Date(), -1)),
-    startOfMonth: startOfMonth(new Date()),
-    endOfMonth: endOfMonth(new Date()),
-    startOfLastMonth: startOfMonth(addMonths(new Date(), -1)),
-    endOfLastMonth: endOfMonth(addMonths(new Date(), -1)),
-    startOfQuarter: startOfQuarter(new Date()),
-    endOfQuarter: endOfQuarter(new Date()),
-    startOfLastQuarter: startOfQuarter(addQuarters(new Date(), -1)),
-    endOfLastQuarter: endOfQuarter(addQuarters(new Date(), -1)),
-    startOfYear: startOfYear(new Date()),
-    endOfYear: endOfYear(new Date()),
-};
-
-const staticRangeHandler = {
-    range: {},
-    isSelected(range) {
-        const definedRange = range;
-        return (
-            isSameDay(range.startDate, definedRange.startDate) &&
-            isSameDay(range.endDate, definedRange.endDate)
-        );
-    },
-};
-
-export function createStaticRanges(ranges) {
-    return ranges.map(range => ({ ...staticRangeHandler, ...range }));
-}
-
-export const defaultStaticRanges = createStaticRanges([
-
-    {
-        label: 'Esta semana',
-        range: () => ({
-            startDate: defineds.startOfWeek,
-            endDate: defineds.endOfWeek,
-        }),
-    },
-    {
-        label: 'Semana passada',
-        range: () => ({
-            startDate: defineds.startOfLastWeek,
-            endDate: defineds.endOfLastWeek,
-        }),
-    },
-    {
-        label: 'Mês passado',
-        range: () => ({
-            startDate: defineds.startOfLastMonth,
-            endDate: defineds.endOfLastMonth,
-        }),
-    },
-    {
-        label: 'Este trimestre',
-        range: () => ({
-            startDate: defineds.startOfQuarter,
-            endDate: defineds.endOfQuarter
-        }),
-    },
-    {
-        label: 'Trimestre passado',
-        range: () => ({
-            startDate: defineds.startOfLastQuarter,
-            endDate: defineds.endOfLastQuarter
-        }),
-    },
-    {
-        label: 'Este ano',
-        range: () => ({
-            startDate: defineds.startOfYear,
-            endDate: defineds.endOfYear
-        }),
-    },
-]);

package/src/components/LXP/calendarLxp/index.tsx

@@ -1,72 +0,0 @@
-import React, { useState } from 'react'
-import style from './calendarLxp.module.css'
-import { CloseIcon } from '@shared/icons'
-import Button from '@components/buttons'
-import './calendar.css'
-import { ArrowScrollLeft, ArrowScrollRight } from '@shared/icons'
-import { Box, Modal } from '@mui/material'
-import { DateRange, DefinedRange } from 'react-date-range'
-import { pt } from 'date-fns/locale'
-
-//import 'react-date-range/dist/styles.css'; // main style file
-import {defaultStaticRanges} from './defaultRanges'
-
-interface CalendarLxpParams {
-    styles ?: React.CSSProperties
-    open ?: boolean
-    onSave ?: ([]) => void
-    handleClose ?: () => void
-}
-
-export default function CalendarLxp(props : CalendarLxpParams) {
-    const [newRange, setNewRange] = useState ([
-        {
-            startDate: new Date(),
-            endDate: new Date(),
-            key: 'selection'
-        }
-    ])
-    pt.options.weekStartsOn = 0
-    
-    return(
-        <Modal open={props.open} onClose={props.handleClose} >
-            <Box className={style.containerCalendar} style={{...props.styles}} >
-                <div className={style.fechar} onClick={props.handleClose}>
-                    <CloseIcon />
-                </div>
-                
-                <div className={style.calendar}>
-                    <div style={{fontSize: 16}}>
-                        <DefinedRange 
-                            inputRanges={[]}
-                            staticRanges={defaultStaticRanges}
-                            ranges={newRange}
-                            rangeColors={['#0645AD']}
-                            onChange={ item => setNewRange([item.selection])}
-                        />
-                    </div>
-                    <div>
-                        <DateRange
-                            locale={pt}
-                            ranges={newRange}
-                            onChange={ item => setNewRange([item.selection])}
-                            months={2}
-                            direction='horizontal'
-                            rangeColors={['#FF4D0D']}
-                            showDateDisplay={false}
-                            showPreview={false}
-                            weekdayDisplayFormat='EEEEE'
-                            preventSnapRefocus={true}
-                            
-                        />
-                    </div>
-                </div>
-                <div className={style.btnSubmit}>
-                    <Button label='Aplicar' variant='primary' handleClick={ () => {
-                        props.onSave([newRange[0].startDate, newRange[0].endDate])
-                    }} />
-                </div>
-            </Box>
-        </Modal>
-    )
-}

package/src/components/LXP/cardLearningCicle/cardLearningCicle.d.ts

@@ -1,16 +0,0 @@
-import React from "react"
-
-export interface ICardLearningCicle {   
-    style?: React.CSSProperties,
-    handleClick?: () => void,
-}
-
-export interface ITranlateCardLearningCicle extends ICardLearningCicle {
-    titleStep1?: string
-    titleStep2?: string 
-    txtStep2?: string
-    titleStep3?: string
-    txtStep3?: string
-    titleStep4?: string
-    txtStep4?: string
-}

package/src/components/LXP/cardLearningCicle/cardLearningCicle.stories.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-
-import CardLearningCicle from './index'
-import * as Icons from '../../../shared/icons'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-    title: 'LXP/CardLearningCicle',
-    component: CardLearningCicle,
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <CardLearningCicle {...args} />
-
-export const normal = Template.bind({})
-normal.args = {    
-    handleClick: () => { alert('Click') },
-}
-
-export const normalTranslate = Template.bind({})
-normalTranslate.args = {    
-    handleClick: () => { alert('Click') },
-    titleStep1: 'Create Learning Cycle',
-    titleStep2: 'Group of participants',
-    txtStep2: 'Create or select a participant group to relate to one or more content.',
-    titleStep3: 'Content created',
-    txtStep3: 'Select one or more content for the selected group to see.',
-    titleStep4: 'Calendar',
-    txtStep4: 'Select the start date of these contents for this group.'
-}
-