frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/IJ/StepLearningCycle/StepLearningCycleStyle.js

@@ -0,0 +1,94 @@
+import styled from 'styled-components';
+
+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;
+  }
+`;
+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;
+  }
+`;
+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;
+  }
+`;
+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);
+  }
+`;
+
+export { ContainerStepLearningCycle, IconStatus, StepCycle, StepCycleArticle };

package/dist/esm/src/components/IJ/StepLearningCycle/index.js

@@ -0,0 +1,117 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { ContainerStepLearningCycle, StepCycle, StepCycleArticle, IconStatus } from './StepLearningCycleStyle.js';
+import { CheckIconSimple } from '../../../shared/icons.js';
+
+function StepLearningCycle({ listSteps, setListSteps, direction = 'row', size = 'medium', completed = false }) {
+    const [stepsList, setStepsList] = useState(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) => {
+        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 (jsx(ContainerStepLearningCycle, { className: direction, children: stepsList &&
+            stepsList.map((step, i) => {
+                return (jsxs(StepCycle, { className: step.status, children: [jsxs(StepCycleArticle, { children: [jsx(IconStatus, { className: step.status, style: variantsSize[size].icon, onClick: () => handleChangeStep(i), children: step.status === 'finished' ? (jsx(CheckIconSimple, { height: variantsChek[size].heigth, width: variantsChek[size].width })) : (i + 1) }), jsx("h2", { style: variantsSize[size].title, children: step.title })] }), step.status === 'inProgress' && step.description && (jsx("p", { style: variantsSize[size].description, children: step.description }))] }, i + 1));
+            }) }));
+}
+
+export { StepLearningCycle as default };

package/dist/esm/src/components/IJ/favorite/favoriteStyles.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+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;
+  }
+`;
+
+export { SFavorite };

package/dist/esm/src/components/IJ/favorite/index.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { SFavorite } from './favoriteStyles.js';
+import { StarFavorite } from '../../../shared/icons.js';
+
+function Favorite({ variant, disable = false, action }) {
+    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 (jsx(SFavorite, { onClick: !disable && handleSetStatus, className: disable && 'disable', children: jsx(StarFavorite, { fill: status.fill, stroke: status.stroke }) }));
+}
+
+export { Favorite as default };

package/dist/esm/src/components/IJ/learningCycleCard/components/menu/index.js

@@ -0,0 +1,49 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { useState } from 'react';
+import { Divider } from '@mui/material';
+import { TrashDelete } from '../../../../../shared/icons.js';
+import { MenuIconOpen } from './menuStyle.js';
+
+function CardMenu({ id, menuOptions }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = (option) => {
+        setAnchorEl(null);
+        option?.action(id, option);
+    };
+    return (jsxs("div", { children: [jsx(IconButton, { "aria-label": "more", "aria-controls": open ? 'long-menu' : undefined, "aria-expanded": open ? 'true' : undefined, "aria-haspopup": "true", onClick: handleClick, sx: { padding: '0px' }, children: jsx(MoreVertIcon, {}) }), open && (jsxs(Fragment, { children: [jsx(MenuIconOpen, {}), jsx(Menu, { id: "long-menu", MenuListProps: {
+                            'aria-labelledby': 'long-button'
+                        }, anchorEl: anchorEl, open: open, onClose: handleClose, PaperProps: {
+                            style: {
+                                width: '300px',
+                                position: 'relative',
+                                marginTop: '10px',
+                                padding: '10px'
+                            }
+                        }, sx: {
+                            '& .MuiMenu-paper': {
+                                padding: '1px',
+                                border: '1px solid #BDBDBD',
+                                borderRadius: '10px'
+                            }
+                        }, children: menuOptions?.map((option, index) => (jsxs(Fragment, { children: [jsxs(MenuItem, { onClick: () => {
+                                        handleClose(option);
+                                    }, sx: {
+                                        color: option?.type === 'delete' ? '#923534' : '#000000',
+                                        fontWeight: option?.type === 'delete' ? 600 : 400,
+                                        '&:hover': {
+                                            backgroundColor: 'transparent'
+                                        }
+                                    }, children: [option?.type === 'delete' ? jsx(TrashDelete, { fill: "#923534", width: "30px" }) : option?.icon, ' ', option?.label] }, index), jsx(Divider, { sx: {
+                                        margin: '5px 10px 0px 10px'
+                                    } })] }))) })] }))] }));
+}
+
+export { CardMenu as default };

package/dist/esm/src/components/IJ/learningCycleCard/components/menu/menuStyle.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+const MenuIconOpen = styled.div `
+  width: 13.64px;
+  height: 13.64px;
+  position: fixed;
+  margin: -7px 0 32px 27px;
+
+  top: 71px;
+  right: 40px;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  border: 1px solid #9c9c9c;
+  border-right-color: rgb(156, 156, 156);
+  border-right-style: solid;
+  border-right-width: 1px;
+  border-bottom-color: rgb(156, 156, 156);
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom: none;
+  border-right: none;
+  -webkit-transform: matrix(0.71, 0.97, -0.51, 0.91, 0, 0);
+  -ms-transform: matrix(0.71, 0.97, -0.51, 0.91, 0, 0);
+  transform: matrix(0.71, 0.97, -0.51, 0.91, 0, 0);
+  z-index: 999999;
+`;
+
+export { MenuIconOpen };

package/dist/esm/src/components/IJ/learningCycleCard/index.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { WrapperCard, TagArea, TagStatus, Actions, CycleName, AccordionList, AccortionTitle, DataList, DataListItem, Button } from './learningCycleCardStyle.js';
+import { IconUp } from '../../../shared/icons.js';
+import { useState } from 'react';
+import { Accordion, AccordionSummary, Divider, AccordionDetails, Rating } from '@mui/material';
+import CardMenu from './components/menu/index.js';
+
+function LearningCycleCard({ id, tag, name, favorite, labels, modulesList, handleClick, handleFavorite, disabled, menuOptions, style }) {
+    const [selectedItem, setSelectedItem] = useState(null);
+    const [isAccordionOpen, setIsAccordionOpen] = useState(false);
+    const [isFavorite, setIsFavorite] = useState(favorite || false);
+    const handleSelectedItem = (id) => {
+        setIsAccordionOpen(!isAccordionOpen);
+        setSelectedItem(id);
+    };
+    const handleQuantityGroups = (quantity) => {
+        if (Number(quantity) < 10) {
+            return `0${quantity}`;
+        }
+        else {
+            return quantity;
+        }
+    };
+    const FavoriteStar = () => {
+        return (jsx(Rating, { id: "favoriteStar", value: isFavorite ? 1 : 0, max: 1, onChange: () => {
+                setIsFavorite(!isFavorite);
+                handleFavorite(!isFavorite);
+            } }));
+    };
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(WrapperCard, { disabled: disabled, status: tag, style: { ...style }, children: [jsxs(TagArea, { children: [jsx(TagStatus, { disabled: disabled, children: tag }), jsxs(Actions, { children: [jsx(FavoriteStar, {}), jsx(CardMenu, { id: id, menuOptions: menuOptions })] })] }), jsx(CycleName, { children: name }), jsx(AccordionList, { disabled: disabled, children: jsxs(Accordion, { expanded: selectedItem === id && isAccordionOpen, onChange: () => handleSelectedItem(id), children: [jsx(AccordionSummary, { expandIcon: jsx(IconUp, {}), "aria-controls": "panel1bh-content", id: "panel1bh-header", children: jsxs(AccortionTitle, { children: [jsx("span", { children: handleQuantityGroups(modulesList?.length) }), " ", jsxs("span", { children: [" ", labels?.groupsLabel, " "] }), labels?.groupsQuantityDescription] }) }), !disabled && isAccordionOpen && jsx(Divider, { sx: { margin: '5px 10px 0px 10px' } }), jsx(AccordionDetails, { children: jsx(DataList, { children: modulesList?.map((item, index) => (jsx(DataListItem, { children: item.name }, index))) }) }), isAccordionOpen && jsx(Divider, { sx: { margin: '5px 10px 0px 10px' } }), jsx(Button, { onClick: () => handleClick(id), children: labels?.actionButton })] }) })] }) }));
+}
+
+export { LearningCycleCard as default };

package/dist/esm/src/components/IJ/learningCycleCard/learningCycleCardStyle.js

@@ -0,0 +1,153 @@
+import styled from 'styled-components';
+
+const WrapperCard = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: fit-content;
+
+  background: ${(props) => (props.disabled ? '#E0E0E0' : '#fff')};
+
+  border-radius: 10px;
+
+  padding: 20px 20px 8px 20px;
+
+  :hover {
+    cursor: pointer;
+  }
+`;
+const TagArea = styled.div `
+  display: flex;
+  justify-content: space-between;
+`;
+const TagStatus = styled.div `
+  background-color: ${(props) => (props.disabled ? '#757575' : '#398787')};
+  color: #fff;
+  font-weight: 300;
+  border-radius: 4px;
+  width: 100%;
+  max-width: 160px !important;
+  padding: 4px 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const Actions = styled.div `
+  display: flex;
+
+  .MuiMenu-root {
+    position: relative;
+    border: 1px solid red !important;
+  }
+
+  #long-menu::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+    width: 0;
+    height: 0;
+    border-top: solid 10px #fff;
+    border-right: solid 10px transparent;
+  }
+
+  #long-menu {
+    border: 1px solid red !important;
+  }
+
+  .MuiMenu-paper {
+    border: 1px solid red !important;
+  }
+`;
+const AccordionList = styled.div `
+  border: none;
+
+  .MuiAccordion-root {
+    border: none;
+    box-shadow: none;
+    margin-top: 0;
+    background: ${(props) => (props.disabled ? '#E0E0E0' : '#fff')};
+  }
+  .MuiButtonBase-root {
+    padding: 0;
+  }
+  .MuiAccordionDetails-root {
+    padding: 0;
+  }
+  #panel1bh-content {
+    margin-top: -5px;
+    box-shadow: none;
+    padding: 0 !important;
+  }
+`;
+const AccortionTitle = styled.span `
+  color: #222222;
+
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+
+  span {
+    font-weight: 600;
+  }
+
+  span:last-child {
+    margin-right: 5px;
+    margin-left: 5px;
+  }
+`;
+const CycleName = styled.div `
+  display: flex;
+  flex-direction: row;
+  padding-top: 10px;
+  font-weight: 600;
+  font-size: 25px;
+  color: #222222;
+`;
+styled.div `
+  display: flex;
+  flex-direction: row;
+  margin-top: 15px;
+  justify-content: space-around;
+  align-items: center;
+`;
+const DataList = styled.ul `
+  list-style-type: none;
+  padding: 0;
+  margin-top: 0 !important;
+  line-height: 35px;
+  overflow-y: scroll;
+  height: 194px;
+  color: #222222;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  scrollbar-width: none;
+  -moz-scrollbars-none: none;
+`;
+const DataListItem = styled.li `
+  list-style-type: none;
+  margin: 0;
+  font-weight: 400;
+  padding: 0px 10px;
+`;
+const Button = styled.button `
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 15px auto 5px;
+
+  border: none;
+  font-size: 16px;
+  color: #64748b;
+
+  :hover {
+    cursor: pointer;
+  }
+`;
+
+export { AccordionList, AccortionTitle, Actions, Button, CycleName, DataList, DataListItem, TagArea, TagStatus, WrapperCard };

package/dist/esm/src/components/IJ/listSelector/index.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { containerList, titleList, listContent, itemList, viewMoreContent } from './listSelectorStyles.js';
+import { CheckboxChecked, CheckboxEmpty } from '../../../shared/icons.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import Button from '../../buttons/index.js';
+
+function ListSelector(props) {
+    const [selectedItens, setSelectedItens] = useState([]);
+    const [showSize, setShowSize] = useState(props.minShowList);
+    useEffect(() => {
+        props.selectedItens(selectedItens);
+    }, [selectedItens]);
+    const handleSelect = (id) => {
+        let indexId = selectedItens.indexOf(id);
+        if (indexId === -1) {
+            setSelectedItens(value => [...value, id]);
+        }
+        else {
+            setSelectedItens(selectedItens.filter(item => item !== id));
+        }
+    };
+    const handleView = () => {
+        if (showSize === props.minShowList)
+            setShowSize(props.contentList.length);
+        else
+            setShowSize(props.minShowList);
+    };
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(containerList, { style: { ...props.style }, children: [jsxs(titleList, { children: [" ", props.listTitle, " "] }), jsx(listContent, { children: props.contentList.map((item, index) => {
+                        return (index < showSize ?
+                            jsxs(itemList, { children: [jsx("div", { onClick: () => handleSelect(item.id), children: selectedItens.includes(item.id) ? jsx(CheckboxChecked, {}) : jsx(CheckboxEmpty, {}) }), item.description] }, index)
+                            : null);
+                    }) }), props.minShowList < props.contentList.length ?
+                    jsx(viewMoreContent, { children: jsx(Button, { variant: 'link', label: showSize === props.minShowList ? props.textViewMore : props.textViewLess, handleClick: handleView }) })
+                    : null] }) }));
+}
+
+export { ListSelector as default };

package/dist/esm/src/components/IJ/listSelector/listSelectorStyles.js

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+
+const containerList = styled.div `
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 12px;
+    padding: 8px;
+    
+`;
+const titleList = styled.span `
+    font-family: 'PT Sans';
+    font-weight: 400;
+    font-size: 16px;
+    color: ${({ theme }) => theme.colors.neutralsGrey1};
+`;
+const listContent = styled.div `
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 8px;
+    flex-direction: column;
+`;
+const itemList = styled.div `
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: row;
+    gap: 8px;
+
+    font-family: 'PT Sans';
+    font-weight: 400;
+    font-size: 14px;
+    color: ${({ theme }) => theme.colors.neutralsGrey1};
+`;
+const viewMoreContent = styled.div `
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    flex-direction: row;
+    width: 100%;
+    user-select: none;
+`;
+
+export { containerList, itemList, listContent, titleList, viewMoreContent };