frst-components 0.20.0 → 0.20.2

package/src/components/IJ/learningCycleCard/components/menu/index.tsx

@@ -1,92 +0,0 @@
-import Box from '@mui/material/Box'
-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'
-import * as Styles from './menuStyle'
-
-export default function CardMenu({ id, menuOptions }) {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
-  const open = Boolean(anchorEl)
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget)
-  }
-  const handleClose = (option: any) => {
-    setAnchorEl(null)
-    option?.action(id, option)
-  }
-
-  return (
-    <div>
-      <IconButton
-        aria-label="more"
-        aria-controls={open ? 'long-menu' : undefined}
-        aria-expanded={open ? 'true' : undefined}
-        aria-haspopup="true"
-        onClick={handleClick}
-        sx={{ padding: '0px' }}
-      >
-        <MoreVertIcon />
-      </IconButton>
-
-      {open && (
-        <>
-          <Styles.MenuIconOpen />
-          <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'
-              }
-            }}
-          >
-            {menuOptions?.map((option, index) => (
-              <>
-                <MenuItem
-                  key={index}
-                  onClick={() => {
-                    handleClose(option)
-                  }}
-                  sx={{
-                    color: option?.type === 'delete' ? '#923534' : '#000000',
-                    fontWeight: option?.type === 'delete' ? 600 : 400,
-                    '&:hover': {
-                      backgroundColor: 'transparent'
-                    }
-                  }}
-                >
-                  {option?.type === 'delete' ? <TrashDelete fill="#923534" width="30px" /> : option?.icon}{' '}
-                  {option?.label}
-                </MenuItem>
-                <Divider
-                  sx={{
-                    margin: '5px 10px 0px 10px'
-                  }}
-                />
-              </>
-            ))}
-          </Menu>
-        </>
-      )}
-    </div>
-  )
-}

package/src/components/IJ/learningCycleCard/components/menu/menuStyle.ts

@@ -1,27 +0,0 @@
-import { Padding } from '@mui/icons-material'
-import styled from 'styled-components'
-
-export 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;
-`

package/src/components/IJ/learningCycleCard/index.tsx

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

package/src/components/IJ/learningCycleCard/learningCycleCard.d.ts

@@ -1,28 +0,0 @@
-import React from 'react'
-
-export interface LearningCycleCardI {
-  id: number | string
-  tag: string
-  name: string
-  favorite?: boolean
-
-  labels?: {
-    groupsQuantity: number | string
-    groupsQuantityDescription: string
-    groupsLabel: string
-    actionButton: string
-  }
-  modulesList: [{ id: number | string; name: string }]
-  disabled?: boolean
-  handleClick: (id: string | number) => void
-  handleFavorite: (favorite: boolean) => void
-  menuOptions: [
-    {
-      label: string
-      icon?: React.ReactNode
-      type?: string | null
-      action: ({ id, option }: any) => any
-    }
-  ]
-  style: React.CSSProperties
-}

package/src/components/IJ/learningCycleCard/learningCycleCard.stories.tsx

@@ -1,229 +0,0 @@
-import React from 'react'
-
-import LearningCycleCard from './index'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'IJ/LearningCycleCard',
-  component: LearningCycleCard
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <LearningCycleCard {...args} />
-
-export const normal = Template.bind({})
-normal.args = {
-  id: '1',
-  tag: 'Life Long Learning',
-  name: 'Learning Cycle Name',
-  favorite: false,
-  labels: {
-    groupsLabel: 'grupos',
-    groupsQuantityDescription: 'nesse plano de conteúdo',
-    actionButton: 'Editar grupo'
-  },
-  disabled: false,
-  handleClick: (id) => alert(`click: ${id}`),
-  handleFavorite: (favorite) => alert(`favorite: ${favorite}`),
-
-  menuOptions: [
-    {
-      label: 'Editar Plano de conteúdo',
-      icon: null,
-      type: 'edit',
-      action: (id: string | number, option: any) => console.log('handleEdit', id, option)
-    },
-    {
-      label: 'Duplicar Plano de conteúdo',
-      icon: null,
-      type: 'duplicate',
-      action: (id: string | number, option: any) => console.log('handleDuplicate', id, option)
-    },
-    {
-      label: 'Desativar Plano de conteúdo',
-      icon: null,
-      type: 'disable',
-      action: (id: string | number, option: any) => console.log('handleDisable', id, option)
-    },
-    {
-      label: 'Excluir Plano de conteúdo',
-      icon: 'edit icon',
-      type: 'delete',
-      action: (id: string | number, option: any) => console.log('handleDelete', id, option)
-    }
-  ],
-  modulesList: [
-    {
-      id: 1,
-      name: 'Atendimento/suporte/comercial'
-    },
-    {
-      id: 2,
-      name: 'Atendimento/suporte/comercial/vend...'
-    },
-    {
-      id: 3,
-      name: 'Suporte/Gestão'
-    },
-    {
-      id: 4,
-      name: 'Comercial/Vendas'
-    },
-    {
-      id: 5,
-      name: 'Suporte Santos/São Paulo'
-    },
-    {
-      id: 6,
-      name: 'Suporte Santos/São Paulo'
-    }
-  ]
-}
-
-export const favorite = Template.bind({})
-favorite.args = {
-  id: '1',
-  tag: 'Life Long Learning',
-  name: 'Learning Cycle Name',
-  favorite: true,
-  labels: {
-    groupsLabel: 'grupos',
-    groupsQuantityDescription: 'nesse plano de conteúdo',
-    actionButton: 'Editar grupo'
-  },
-  handleClick: (id) => alert(`click: ${id}`),
-  handleFavorite: (favorite) => alert(`favorite: ${favorite}`),
-  menuOptions: [
-    {
-      label: 'Editar Plano de conteúdo',
-      icon: null,
-      type: 'edit',
-      action: (id: string | number, option: any) => console.log('handleEdit', id, option)
-    },
-    {
-      label: 'Duplicar Plano de conteúdo',
-      icon: null,
-      type: 'duplicate',
-      action: (id: string | number, option: any) => console.log('handleDuplicate', id, option)
-    },
-    {
-      label: 'Desativar Plano de conteúdo',
-      icon: null,
-      type: 'disable',
-      action: (id: string | number, option: any) => console.log('handleDisable', id, option)
-    },
-    {
-      label: 'Excluir Plano de conteúdo',
-      icon: 'edit icon',
-      type: 'delete',
-      action: (id: string | number, option: any) => console.log('handleDelete', id, option)
-    }
-  ],
-  disabled: false,
-  modulesList: [
-    {
-      id: 1,
-      name: 'Atendimento/suporte/comercial'
-    },
-    {
-      id: 2,
-      name: 'Atendimento/suporte/comercial/vend...'
-    },
-    {
-      id: 3,
-      name: 'Suporte/Gestão'
-    },
-    {
-      id: 4,
-      name: 'Comercial/Vendas'
-    },
-    {
-      id: 5,
-      name: 'Suporte Santos/São Paulo'
-    },
-    {
-      id: 6,
-      name: 'Suporte Santos/São Paulo'
-    },
-    {
-      id: 7,
-      name: 'Suporte Santos/São Paulo'
-    },
-    {
-      id: 8,
-      name: 'Suporte Santos/São Paulo'
-    },
-    {
-      id: 9,
-      name: 'Suporte Santos/São Paulo'
-    }
-  ]
-}
-
-export const disabled = Template.bind({})
-disabled.args = {
-  id: '1',
-  tag: 'Life Long Learning',
-  name: 'Learning Cycle Name',
-  favorite: false,
-  labels: {
-    groupsLabel: 'grupos',
-    groupsQuantityDescription: 'nesse plano de conteúdo',
-    actionButton: 'Editar grupo'
-  },
-  handleClick: (id) => alert(`click: ${id}`),
-  handleFavorite: (favorite) => alert(`favorite: ${favorite}`),
-  menuOptions: [
-    {
-      label: 'Editar Plano de conteúdo',
-      icon: null,
-      type: 'edit',
-      action: (id: string | number, option: any) => console.log('handleEdit', id, option)
-    },
-    {
-      label: 'Duplicar Plano de conteúdo',
-      icon: null,
-      type: 'duplicate',
-      action: (id: string | number, option: any) => console.log('handleDuplicate', id, option)
-    },
-    {
-      label: 'Desativar Plano de conteúdo',
-      icon: null,
-      type: 'disable',
-      action: (id: string | number, option: any) => console.log('handleDisable', id, option)
-    },
-    {
-      label: 'Excluir Plano de conteúdo',
-      icon: 'edit icon',
-      type: 'delete',
-      action: (id: string | number, option: any) => console.log('handleDelete', id, option)
-    }
-  ],
-  disabled: true,
-  modulesList: [
-    {
-      id: 1,
-      name: 'Atendimento/suporte/comercial'
-    },
-    {
-      id: 2,
-      name: 'Atendimento/suporte/comercial/vend...'
-    },
-    {
-      id: 3,
-      name: 'Suporte/Gestão'
-    },
-    {
-      id: 4,
-      name: 'Comercial/Vendas'
-    },
-    {
-      id: 5,
-      name: 'Suporte Santos/São Paulo'
-    },
-    {
-      id: 6,
-      name: 'Suporte Santos/São Paulo'
-    }
-  ]
-}

package/src/components/IJ/learningCycleCard/learningCycleCardStyle.ts

@@ -1,173 +0,0 @@
-import styled from 'styled-components'
-
-interface ITag {
-  disabled: boolean
-}
-interface ILearningCycleCard {
-  status: string
-  disabled: boolean
-}
-
-interface IAccordionList {
-  disabled: boolean
-}
-
-export const WrapperCard = styled.div<ILearningCycleCard>`
-  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;
-  }
-`
-
-export const TagArea = styled.div`
-  display: flex;
-  justify-content: space-between;
-`
-
-export const TagStatus = styled.div<ITag>`
-  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;
-`
-
-export 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;
-  }
-`
-
-export const AccordionList = styled.div<IAccordionList>`
-  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;
-  }
-`
-
-export 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;
-  }
-`
-
-export const CycleName = styled.div`
-  display: flex;
-  flex-direction: row;
-  padding-top: 10px;
-  font-weight: 600;
-  font-size: 25px;
-  color: #222222;
-`
-
-export const FooterButton = styled.div`
-  display: flex;
-  flex-direction: row;
-  margin-top: 15px;
-  justify-content: space-around;
-  align-items: center;
-`
-
-export 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;
-`
-
-export const DataListItem = styled.li`
-  list-style-type: none;
-  margin: 0;
-  font-weight: 400;
-  padding: 0px 10px;
-`
-
-export 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;
-  }
-`