norma-library 0.5.810 → 0.5.812

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

@@ -0,0 +1,55 @@
+import styled from "styled-components";
+
+export const Header = styled.div`
+  margin: 0 16px 32px 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 TextClearSearch = styled.p`
+  color: #DE8B50;
+  font-size: 14px;
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+`
+
+export const IconTools = styled.div`
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+`
+
+export const ListTools = styled.div`
+  padding: 12px;
+  margin: 6px 0px 0 0;
+  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,42 @@
+import React from "react"
+import * as S from "./styles"
+
+const Pagination:React.FC<any> = ({ table }) => {
+  return (
+    <S.Pagination>
+      <div className='content'>
+        <button
+          className='button'
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          {'<'}
+        </button>
+        {
+          table.getPageCount()
+            ? new Array(table.getPageCount()).fill(0).map((item, index) => {
+              return (
+                <button
+                  key={item}
+                  className='button'
+                  onClick={() => table.previousPage()}
+                >
+                  {index}
+                </button>
+              )
+            })
+            : null
+        }
+        <button
+          className='button'
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          {'>'}
+        </button>
+      </div>
+    </S.Pagination>
+  )  
+}
+
+export default Pagination

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

@@ -0,0 +1,19 @@
+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;
+      padding: 12px 16px;
+      border-radius: 4px;
+      color: #4D4F5C;
+    }
+  }
+`

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

@@ -0,0 +1,20 @@
+import React from "react"
+import { flexRender } from '@tanstack/react-table'
+
+const TBody:React.FC<any> = ({ table }) => {
+  return (
+    <tbody>
+      { table.getRowModel().rows.map((row: any) => (
+        <tr key={row.id}>
+          { row.getVisibleCells().map((cell: any) => (
+            <td key={cell.id}>
+              { flexRender(cell.column.columnDef.cell, cell.getContext()) }
+            </td>
+          )) }
+        </tr>
+      )) }
+    </tbody>
+  )
+}
+
+export default TBody

package/src/components/Table/index.tsx

@@ -0,0 +1,295 @@
+import React, { useState } 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 }) => {
+  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 table = useReactTable({
+    data,
+    columns,
+    pageCount: data.length ?? -1, 
+    filterFns:{
+      'customFilterText': customFilterText
+    },
+    state: {
+      sorting: sorting,
+      columnFilters: filterByColumn,
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setFilterByColumn
+  })
+
+  return (
+    <S.Container>
+      <Header 
+        table={table} 
+        globalFilters={globalFilters} 
+        orderSmallest={orderSmallest}
+        orderLargest={orderLargest}
+        setGlobalFilters={setGlobalFilters}
+        setOrderLargest={setOrderLargest}
+        setOrderSmallest={setOrderSmallest}
+      />
+      <S.Content>
+        <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} />
+      </S.Content>
+      <Pagination table={table} />
+    </S.Container>
+  )
+}
+
+export default Table

package/src/components/Table/interface.ts

@@ -0,0 +1,14 @@
+import { ColumnDef } from '@tanstack/react-table'
+
+export interface TablePropos {
+  data: any
+  columns: ColumnDef<ColumnsTable>[]
+}
+
+export interface ColumnsTable {
+  header: string,
+  accessorKey: string,
+  type: string,
+  enableColumnFilter: boolean,
+  filterFn: string
+}

package/src/components/Table/styles.tsx

@@ -0,0 +1,113 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 100%;
+  background: #fff;
+  box-shadow: 0px 2px 6px #0000000A;
+`
+
+export const Content = 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/TextInput/index.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from "react"
+import * as S from "./styles"
+import { TextInputProps } from "./interface"
+
+const TextInput:React.FC<TextInputProps> = ({ 
+  label, 
+  className,
+  onChange,
+  disabled,
+  placeholder,
+  name,
+  type,
+  value
+}) => {
+  const [valueSelected, setValueSelected] = useState(value)
+
+  const changeValue = (event: any) => {
+    const { value } = event.target
+    setValueSelected(value)
+    onChange(event)
+  }
+
+  return (
+    <S.Container className={className}>
+      <S.Label>{label}</S.Label>
+      <S.Input 
+        type={type}
+        name={name}
+        value={valueSelected}
+        placeholder={placeholder} 
+        disabled={disabled} 
+        onChange={(event) => changeValue(event)} 
+      />
+    </S.Container>
+  )
+}
+
+export default TextInput

package/src/components/TextInput/interface.ts

@@ -0,0 +1,10 @@
+export interface TextInputProps {
+  className?: string
+  label: string 
+  onChange: Function
+  disabled?: boolean
+  placeholder?: string
+  name?: string
+  type?: string
+  value: string
+}

package/src/components/TextInput/styles.tsx

@@ -0,0 +1,24 @@
+import styled from "styled-components"
+
+export const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`
+
+export const Label = styled.label`
+  font-size: 14px;
+  margin: 0 0 4px 0;
+  color: #666;
+`
+
+export const Input = styled.input`
+  border: none;
+  color: #4D4F5C;
+  border-bottom: 1px solid #00000033;
+  outline: none;
+  font-size: 18px;
+  padding: 8px;
+  width: 100%;
+  font-size: 16px;
+`

package/src/components/Typography/Text/index.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+import { TextProps } from "./interfaces"
+import * as S from "./styles"
+
+const Text:React.FC<TextProps> = ({ 
+  children,
+  className,
+  size,
+  type
+}) => {
+  return (
+    <S.Container 
+      className={className} 
+      size={size} 
+      type={type}>
+      { children }
+    </S.Container>
+  ) 
+}
+
+export default Text

package/src/components/Typography/Text/interfaces.ts

@@ -0,0 +1,6 @@
+export interface TextProps {
+  children: JSX.Element[] | JSX.Element | string
+  className?: string
+  size: string
+  type: string
+}