frst-components 0.20.0

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

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

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

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

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

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

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

@@ -0,0 +1,31 @@
+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.'
+}
+