norma-library 0.5.4 → 0.5.10

package/src/components/Table/components/header/styles.tsx

@@ -0,0 +1,60 @@
+import styled from "styled-components";
+
+export const Header = styled.div<any>`
+  margin: ${props => props.$showResults ? '0 16px 32px 16px;' : '0 16px;' };
+  display: flex;
+  justify-content: space-between;
+`
+
+export const Results = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`
+
+export const Tools = styled.div`
+
+`
+
+export const TextResult = styled.div`
+  color: #666666;
+  font-size: 16px;
+`
+
+export const TextClearSearchContent = styled.div`
+  height: 10px;
+`
+
+export const TextClearSearch = styled.p`
+  color: #DE8B50;
+  font-size: 14px;
+  cursor: pointer;
+  margin: 0;
+  &:hover {
+    text-decoration: underline;
+  }
+`
+
+export const IconTools = styled.div`
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+`
+
+export const ListTools = styled.div`
+  padding: 12px;
+  margin: 6px 0 0 -106px;
+  position: absolute;
+  background: #fff;
+  box-shadow: 0px 3px 6px #00000029;
+  border: 1px solid #E0E0E0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 14px;
+  label {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+`

package/src/components/Table/components/index.tsx

@@ -0,0 +1,9 @@
+import Pagination from "./pagination";
+import Header from "./header"
+import TBody from "./tbody";
+
+export {
+  Pagination,
+  Header,
+  TBody
+}

package/src/components/Table/components/pagination/index.tsx

@@ -0,0 +1,40 @@
+import React, { useCallback } from "react"
+import { Pagination as MuiPagination, PaginationItem } from '@mui/material'
+import * as S from "./styles"
+
+const PreviousPagination:React.FC<any> = () => {
+  return <span>{'<'}</span>
+}
+const NextPagination:React.FC<any> = () => {
+  return <span>{'>'}</span>
+}
+
+const Pagination:React.FC<any> = ({ table, onChangePage }) => {
+  
+  const onPageChange = useCallback((_event:React.ChangeEvent<unknown>, page:number) => {
+    if(!!onChangePage) {
+      onChangePage(page-1)
+    } else {
+      table.setPageIndex(page - 1)
+    }
+  }, [table])
+
+  return <S.Pagination>
+    <div className='content'>
+      <MuiPagination
+        onChange={onPageChange}
+        count={table.getPageCount()}
+        renderItem={(item:any) => (
+          <PaginationItem
+            classes={{root: 'button', selected: 'button-active'}}
+            slots={{ previous: PreviousPagination, next: NextPagination }}
+            sx={{height: '35px', minWidth: '35px'}}
+            {...item}
+          />
+        )}
+      />
+    </div>
+  </S.Pagination>
+}
+
+export default Pagination

package/src/components/Table/components/pagination/styles.tsx

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+export const Pagination = styled.div`
+  width: 100%;
+  margin: 24px 0 0 0;
+  display: flex;
+  justify-content: center;
+  .content {
+    display: flex;
+    gap: 8px;
+    .button {
+      border: 1px solid #E8E9EC;
+      background: #fff;
+      border-radius: 4px;
+      color: #4D4F5C;
+      cursor: pointer;
+      &:disabled {
+        opacity: 0.4;
+      }
+    }
+    .button-active {
+      border: 1px solid #FFDB9F;
+      background: #FFDB9F;
+      color: #B74616;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+  }
+`

package/src/components/Table/components/tbody/index.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+import { flexRender } from '@tanstack/react-table'
+import * as S from "./styles"
+
+const TBody:React.FC<any> = ({ table, onClick, onMouseOver, onMouseOut }) => {
+  return (
+    <tbody>
+      { table.getRowModel().rows.map((row: any, index: number) => {
+        return <S.Tr 
+          key={index} 
+          $hasAction={!!onClick || !!onMouseOver || !!onMouseOut}
+          onClick={() => onClick ? onClick(row.original) : null}
+          onMouseOver={() => onMouseOver ? onMouseOver(row.original) : null}
+          onMouseOut={() => onMouseOut ? onMouseOut(row.original) : null}>
+          { row.getVisibleCells().map((cell: any, index: number) => {
+            return (
+              <td key={index}>
+                { cell.column.columnDef.type == 'action'
+                    ? cell.getValue()
+                    : flexRender(cell.column.columnDef.cell, cell.getContext()) 
+                }
+              </td>
+            )
+          }) }
+        </S.Tr>
+      }) }
+    </tbody>
+  )
+}
+
+export default TBody

package/src/components/Table/components/tbody/styles.tsx

@@ -0,0 +1,5 @@
+import styled from "styled-components"
+
+export const Tr = styled.tr<any>`
+  cursor: ${props => props.$hasAction  ? 'pointer' : 'default' };
+`

package/src/components/Table/index.tsx

@@ -0,0 +1,318 @@
+import React, { useState, useMemo } from 'react'
+import * as S from "./styles"
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+  getFilteredRowModel,
+  ColumnFiltersState,
+  getPaginationRowModel
+} from '@tanstack/react-table'
+import { format, isAfter, isBefore } from "date-fns"
+import { Button } from "@mui/material";
+import { TablePropos } from './interface';
+import { Pagination, Header, TBody } from "./components"
+
+const Table:React.FC<TablePropos> = ({ data, columns, onClick, onMouseOver, onMouseOut, showTotalResults, showSettings, pagination, rowCount, onChangePage, customTotalResult }) => {
+  const [openFilterDialog, setOpenFilterDialog] = useState('')
+  const [sorting, setSorting] = useState<any>([])
+  const [openFilterOptions, setOpenFilterOptions] = useState(false)
+  const [filterByColumn, setFilterByColumn] = useState<ColumnFiltersState>([])
+  const [filterInputSelected, setFilterInputSelected] = useState<any>()
+  const [globalFilters, setGlobalFilters] = useState<any>([])
+  const [value, setValue] = useState<any>()
+  const [orderSmallest, setOrderSmallest] = useState(false)
+  const [orderLargest, setOrderLargest] = useState(false)
+
+  const customFilterText = (row: any, value: string) => {
+    const itensFinded = globalFilters.map((item: any) => {
+      if (item.type === 'Horario Igual a') {
+        return item.value === row.original[item.acessor]
+      }
+      if (item.type === 'Horario maior que') {
+        const date = new Date()
+        const rowDate = new Date()
+        const hourSplited = item?.value?.split(':')
+        const rowDateSplited = row.original[item.acessor].split(':')
+
+        date.setHours(Number(hourSplited[0]), Number(hourSplited[1]), 0, 0)
+        rowDate.setHours(Number(rowDateSplited[0]), Number(rowDateSplited[1]), 0 ,0)
+        
+        return isAfter(rowDate, date)
+      }
+      if (item.type === 'Horario menor que') {
+        const date = new Date()
+        const rowDate = new Date()
+        const hourSplited = item?.value?.split(':')
+        const rowDateSplited = row.original[item.acessor].split(':')
+
+        date.setHours(Number(hourSplited[0]), Number(hourSplited[1]), 0, 0)
+        rowDate.setHours(Number(rowDateSplited[0]), Number(rowDateSplited[1]), 0 ,0)
+        
+        return isBefore(rowDate, date)
+      }
+      if (item.type === 'Data Igual a') {
+        const dateSplited = item?.value?.split('-')
+        return row.original[item.acessor] === format(new Date(dateSplited[0], dateSplited[1] - 1, dateSplited[2], 0 , 0), "dd/MM/yyyy")
+      }
+      if (item.type === 'Data maior que') {
+        const dateSplited = item?.value?.split('-')
+        const rowDateSplited = row.original[item.acessor].split('/')
+        return isAfter(new Date(rowDateSplited[2], rowDateSplited[1], rowDateSplited[0]), new Date(dateSplited[0], dateSplited[1], dateSplited[2]))
+      }
+      if (item.type === 'Data menor que') {
+        const dateSplited = item?.value?.split('-')
+        const rowDateSplited = row.original[item.acessor].split('/')
+        return isBefore(new Date(rowDateSplited[2], rowDateSplited[1], rowDateSplited[0]), new Date(dateSplited[0], dateSplited[1], dateSplited[2]))
+      }
+      if (item.type === 'Igual a' && typeof value === 'number') {
+        return row.original[item.acessor] === item.value
+      }
+      if (item.type === 'Igual a') {
+        return row.original[item.acessor] === item.value
+      }
+      if (item.type === 'Contém') {
+        return !!row.original[item.acessor].includes(item.value)
+      }
+      if (item.type === 'Não é igual a') {
+        return row.original[item.acessor] !== item.value
+      }
+      if (item.type === 'Maior que') {
+        return row.original[item.acessor] > item.value
+      }
+      if (item.type === 'Menor que') {
+        return row.original[item.acessor] < item.value
+      }
+    })
+
+    const result = itensFinded.every((item: any) => item)
+
+    return result
+  }
+
+  const reactTableConfig = useMemo(() => {
+    const config:any = {
+      data,
+      columns,
+      filterFns:{
+        'customFilterText': customFilterText
+      },
+      state: {
+        sorting: sorting,
+        columnFilters: filterByColumn,
+      },
+      rowCount: rowCount || 10,
+      getCoreRowModel: getCoreRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      onSortingChange: setSorting,
+      onColumnFiltersChange: setFilterByColumn
+    }
+    config.rowCount = rowCount || 10
+
+    if(!pagination) {
+      config.getPaginationRowModel = getPaginationRowModel()
+    } else {
+      config.state.pagination = pagination
+      config.manualPagination = true
+      config.pageCount = pagination.totalPages
+    }
+    return config
+  }, [data, sorting, filterByColumn, columns, pagination])
+
+  const table = useReactTable(reactTableConfig)
+
+  return (
+    <S.Container>
+      <Header 
+        table={table} 
+        customTotalResult={customTotalResult}
+        globalFilters={globalFilters} 
+        orderSmallest={orderSmallest}
+        orderLargest={orderLargest}
+        showTotalResults={showTotalResults}
+        showSettings={showSettings}
+        setGlobalFilters={setGlobalFilters}
+        setOrderLargest={setOrderLargest}
+        setOrderSmallest={setOrderSmallest}
+      />
+      <S.Content>
+        <S.Table>
+          <thead>
+            {table.getHeaderGroups().map((headerGroup: any) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header: any) => (
+                  <th key={header.id}>
+                    <div>
+                      <S.ColumnContent>
+                        <S.TextColumn>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                          )}
+                        </S.TextColumn>
+                        <S.IconFilterDialog onClick={() => {
+                          setOpenFilterDialog(header.column.columnDef.accessorKey)
+                        }}>
+                          <svg fill='#666' focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ArrowDropDownIcon"><path d="m7 10 5 5 5-5z"></path></svg>
+                        </S.IconFilterDialog>
+                      </S.ColumnContent>
+                      { openFilterDialog === header.column.columnDef.accessorKey
+                        ? (
+                          <>
+                            <S.backgroundDialog onClick={() => {
+                              setOpenFilterDialog('')
+                              setOpenFilterOptions(false)
+                            }}></S.backgroundDialog>
+                            <S.FilterDialog>
+                              {  
+                                openFilterOptions 
+                                  ? (
+                                    <S.ListFilterDialog>
+                                      <p className='label'>Selecione um filtro</p>
+                                      <select className='select' value={filterInputSelected} onChange={(event) => {
+                                        setFilterInputSelected(event.target.value)
+                                      }}>
+                                        <option>Selecione...</option>
+                                        { header?.headerGroup?.headers[header.index].column.columnDef.type === 'text' ? <option>Igual a</option> : null }
+                                        { header?.headerGroup?.headers[header.index].column.columnDef.type === 'text' ? <option>Não é igual a</option> : null }
+                                        { header?.headerGroup?.headers[header.index].column.columnDef.type === 'text' ? <option>Contém</option> : null }
+                                        { header?.headerGroup?.headers[header.index].column.columnDef.type === 'number' ? <option>Maior que</option> : null }
+                                        { header?.headerGroup?.headers[header.index].column.columnDef.type === 'number' ? <option>Menor que</option> : null }
+                                        { header?.headerGroup?.headers[header.index].column.columnDef.type === 'number' ? <option>Igual a</option> : null }
+                                        { header?.headerGroup?.headers[header.index]. column.columnDef.type === 'date' ? <option>Data Igual a</option> : null }
+                                        { header?.headerGroup?.headers[header.index]. column.columnDef.type === 'date' ? <option>Data maior que</option> : null }
+                                        { header?.headerGroup?.headers[header.index]. column.columnDef.type === 'date' ? <option>Data menor que</option> : null }
+                                        { header?.headerGroup?.headers[header.index]. column.columnDef.type === 'time' ? <option>Horario Igual a</option> : null }
+                                        { header?.headerGroup?.headers[header.index]. column.columnDef.type === 'time' ? <option>Horario maior que</option> : null }
+                                        { header?.headerGroup?.headers[header.index]. column.columnDef.type === 'time' ? <option>Horario menor que</option> : null }
+                                      </select>
+                                      <div>
+                                        { header.column.getCanFilter()
+                                          ? filterInputSelected === 'Igual a' || 
+                                            filterInputSelected === 'Não é igual a' || 
+                                            filterInputSelected === 'Contém' || 
+                                            filterInputSelected === 'Maior que' ||
+                                            filterInputSelected === 'Menor que' ||
+                                            filterInputSelected === 'Data Igual a' ||
+                                            filterInputSelected === 'Data maior que' ||
+                                            filterInputSelected === 'Data menor que' ||
+                                            filterInputSelected === 'Horario Igual a' ||
+                                            filterInputSelected === 'Horario maior que' ||
+                                            filterInputSelected === 'Horario menor que'
+                                              ?  (
+                                                <div>
+                                                  <p className='label' style={{ marginTop: '10px' }}>Valor</p>
+                                                  <input 
+                                                    type={header?.headerGroup?.headers[header.index].column.columnDef.type}
+                                                    className='select'
+                                                    style={{ width: '100%' }}
+                                                    value={value as any}
+                                                    onChange={event => {
+                                                      if (header?.headerGroup?.headers[header.index].column.columnDef.type === 'number') {
+                                                        setValue(Number(event.target.value))
+                                                        return 
+                                                      } 
+                                                      if (header?.headerGroup?.headers[header.index].column.columnDef.type === 'date') {
+                                                        setValue(event.target.value)
+                                                        return 
+                                                      }
+                                                      setValue(event.target.value)
+                                                    }} 
+                                                  />
+                                                  <Button
+                                                    color="primary"
+                                                    type={"submit"}
+                                                    disableElevation
+                                                    style={{
+                                                      marginTop: 8,
+                                                      width: '100%'
+                                                    }}
+                                                    variant="contained"
+                                                    onClick={() => {
+                                                      setGlobalFilters((current: any) => [...current, 
+                                                        {
+                                                          acessor: header.column.columnDef.accessorKey,
+                                                          type: filterInputSelected,
+                                                          value: value
+                                                        }
+                                                      ])
+                                                      header.column.setFilterValue(value)
+                                                      setOpenFilterOptions(false)
+                                                      setOpenFilterDialog('')
+                                                      setFilterInputSelected(false)
+                                                      setValue(null)
+                                                    }}
+                                                  >
+                                                    Buscar
+                                                  </Button>
+                                                </div>
+                                              )
+                                              : null
+                                          : null 
+                                        }
+                                      </div>
+                                    </S.ListFilterDialog>
+                                  )
+                                  : (
+                                    <S.ListFilterDialog>
+                                      <S.OptionFilterDialog style={{
+                                        background: orderSmallest ? 'rgba(0, 0, 0, 0.04)' : ''
+                                      }}>
+                                        <div className='icon'>
+                                          <svg fill="#666" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="20" height="20"><path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"></path></svg>
+                                        </div>
+                                        <p onClick={() => {
+                                          header.column.toggleSorting()
+                                          setOrderSmallest(true)
+                                          setOrderLargest(false)
+                                        }}>Menor primeiro</p>
+                                      </S.OptionFilterDialog>
+                                      <S.OptionFilterDialog style={{
+                                        background: orderLargest ? 'rgba(0, 0, 0, 0.04)' : ''
+                                      }}>
+                                        <div className='icon rotate'>
+                                          <svg fill="#666" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="20" height="20"><path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"></path></svg>
+                                        </div>
+                                        <p onClick={() => {
+                                          header.column.toggleSorting()
+                                          setOrderLargest(true)
+                                          setOrderSmallest(false)
+                                        }}>Maior primeiro</p>
+                                      </S.OptionFilterDialog>
+                                      <S.OptionFilterDialog>
+                                        <div className='icon'>
+                                          <svg fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="16" height="16"><path strokeLinecap="round" strokeLinejoin="round" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"></path></svg>
+                                        </div>
+                                        <p onClick={() => setOpenFilterOptions(true)}>Filtrar por</p>
+                                      </S.OptionFilterDialog>
+                                    </S.ListFilterDialog>
+                                  )
+                              }
+                            </S.FilterDialog>
+                          </>
+                        ) : null
+                      }
+                    </div>
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <TBody 
+            table={table} 
+            onClick={onClick} 
+            onMouseOver={onMouseOver} 
+            onMouseOut={onMouseOut}
+          />
+        </S.Table>
+      </S.Content>
+      <Pagination table={table} onChangePage={onChangePage} />
+    </S.Container>
+  )
+}
+
+export default Table

package/src/components/Table/interface.ts

@@ -0,0 +1,24 @@
+import { ColumnDef } from '@tanstack/react-table'
+
+export interface TablePropos {
+  data: any
+  columns: ColumnDef<ColumnsTable>[]
+  onClick: any
+  onMouseOver: any
+  onMouseOut: any
+  showTotalResults: boolean
+  showSettings: boolean
+  minHeight: string
+  rowCount: number
+  onChangePage?: (page:number) => void
+  pagination?: {pageIndex:number, pageSize:number, totalPages:number}
+  customTotalResult?: string
+}
+
+export interface ColumnsTable {
+  header: string,
+  accessorKey: string,
+  type: string,
+  enableColumnFilter: boolean,
+  filterFn: string
+}

package/src/components/Table/styles.tsx

@@ -0,0 +1,118 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 100%;
+  background: #fff;
+  box-shadow: 0px 2px 6px #0000000A;
+  padding: 24px 0;
+`
+
+export const Content = styled.div<any>`
+  min-height: ${props => props.minHeight ? props.minHeight : 'auto'};
+`
+
+export const Table = styled.table`
+  border-collapse: collapse;
+  width: 100%;
+  thead {
+    tr {
+      border-bottom: 1px solid #E0E0E0;
+      th {
+        padding: 12px 24px;
+      }
+    }
+  }
+  tbody {
+    tr {
+      td {
+        padding: 16px 24px;
+        color: #666666;
+        font-size: 14px;
+      }
+    }
+    tr:nth-child(even) {
+      background: #FAFAFA;
+      border-bottom: 1px solid #f1f1f1;
+      border-top: 1px solid #f1f1f1;
+    }
+  }
+`
+
+export const TextColumn = styled.span`
+  color: #666666;
+  font-size: 14px;
+`
+
+export const ColumnContent = styled.div`
+  gap: 2px;
+  align-items: center;
+  display: flex;
+`
+
+export const IconFilterDialog = styled.div`
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+`
+
+export const backgroundDialog = styled.div`
+  width: 100%;
+  position: absolute;
+  height: 100vh;
+  background: transparent;
+  top: 0;
+  left: 0;
+`
+
+export const FilterDialog = styled.div`
+  padding: 8px;
+  margin: 6px 0px 0 0;
+  position: absolute;
+  width: 302px;
+  background: #fff;
+  box-shadow: 0px 3px 6px #00000029;
+  border: 1px solid #E0E0E0;
+`
+
+export const ListFilterDialog = styled.div`
+  display: flex;
+  flex-direction: column;
+  .label {
+    margin: 0 0 8px 0;
+    color: #666666;
+    font-size: 14px;
+    font-weight: 400;
+    text-align: left;
+  }
+  .select {
+    border: 1px solid #E0E0E0;
+    padding: 8px 12px;
+  }
+`
+
+export const OptionFilterDialog = styled.div`
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  padding: 6px 8px;
+  cursor: pointer;
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .icon {
+    color: #666;
+  }
+  .rotate {
+    rotate: 180deg;
+  }
+  div {
+    width: 20px;
+    height: 20px;
+  }
+  p {
+    margin: 0;
+    color: #666666;
+    font-size: 16px;
+    font-weight: 400;
+  }
+`

package/src/components/Tabs.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Tabs as MuiTabs, Tab, Typography } from '@mui/material';
+import { Box, Tabs as MuiTabs, Tab } from '@mui/material';
 import { TabPanelProps, TabsBaseProps } from '../interfaces';
 import { palette } from '../helpers';
 import { styled } from '@mui/material/styles';
@@ -66,7 +66,7 @@ function CustomTabPanel(props: TabPanelProps) {
     >
       {value === index && (
         <Box sx={{ p: 3 }}>
-          <Typography>{children}</Typography>
+          {children}
         </Box>
       )}
     </div>
@@ -80,17 +80,17 @@ function a11yProps(index: number) {
   };
 }
 
-export const Tabs = ({ data = [], color = 'primary', ...props }: TabsBaseProps) => {
+export const Tabs = ({ data = [], color = 'primary', onChange, ...props }: TabsBaseProps) => {
   const [value, setValue] = React.useState(0);
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
-    console.log(event);
+    if(!!onChange) onChange(event, newValue)
   };
 
   return (
     <Box sx={{ width: '100%' }}>
-      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+      <Box>
         <TabsStyled value={value} color={color} onChange={handleChange} aria-label="basic tabs example" {...props}>
           {data && data.map((item, key) => <TabStyled label={item.label} color={color} {...a11yProps(key)} />)}
         </TabsStyled>