norma-library 0.6.89 → 0.6.90

package/src/components/UncontrolledTable/{index.tsx → UncontrolledTable.tsx}

@@ -1,6 +1,4 @@
-import React, { useState, useMemo, useRef } from 'react';
-import * as S from './styles';
-
+import React, { useState, useMemo, useRef } from 'react'
 import {
   flexRender,
   getCoreRowModel,
@@ -8,8 +6,7 @@ import {
   useReactTable,
   ColumnFiltersState,
   TableOptions,
-} from '@tanstack/react-table';
-
+} from '@tanstack/react-table'
 import {
   DndContext,
   MouseSensor,
@@ -20,13 +17,15 @@ import {
   useSensors,
   TouchSensor,
   KeyboardSensor,
-} from '@dnd-kit/core';
-import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
-import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+} from '@dnd-kit/core'
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers'
+import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
+
+import useClickOutside from '../../hooks/useClickOutside'
+import { Pagination, Header, SimpleRow, DraggableRow, RowDragHandleCell } from './components'
+import { UncontrolledTableProps } from './interface'
 
-import { Pagination, Header, SimpleRow, DraggableRow, RowDragHandleCell } from './components';
-import { UncontrolledTableProps } from './interface';
-import useClickOutside from '../../hooks/useClickOutside';
+import * as S from './UncontrolledTable.style'
 
 const UncontrolledTable = (props: UncontrolledTableProps) => {
   const {
@@ -35,30 +34,22 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
     onClick,
     onMouseOver,
     onMouseOut,
-    showTotalResults,
-    showSettings,
-    onChangePage,
     pagination,
     totalPages,
-    showClearFields,
-    onClearFieldsClick,
-    onFilterClick,
-    onSortClick,
-    customTotalResults,
     labels,
     tableClassName,
-    stickyHeader,
-    stickyHeaderP,
+    sticky,
     draggable,
-    onDragEnd,
-  } = props;
+    buttons,
+    configs,
+    hideColumns,
+  } = props
 
-  const [openFilterDialog, setOpenFilterDialog] = useState('');
-  const [sorting, setSorting] = useState<any>([]);
-  const [filterByColumn, setFilterByColumn] = useState<ColumnFiltersState>([]);
-  const [globalFilters, setGlobalFilters] = useState<any>([]);
-  const [orderSmallest, setOrderSmallest] = useState(false);
-  const [orderLargest, setOrderLargest] = useState(false);
+  const { onChangePage, onFilterClick, onSortClick, onDragEnd, onColumnVisibilityChange } = props
+
+  const [openFilterDialog, setOpenFilterDialog] = useState('')
+  const [sorting, setSorting] = useState<any>([])
+  const [filterByColumn, setFilterByColumn] = useState<ColumnFiltersState>([])
 
   const _columns: any[] = useMemo(() => {
     return draggable
@@ -66,7 +57,7 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
           {
             id: 'drag',
             header: '',
-            cell: ({ row }: { row: any }) => <RowDragHandleCell rowId={row.id}/>,
+            cell: ({ row }: { row: any }) => <RowDragHandleCell rowId={row.id} />,
             disableMenu: true,
           },
           ...columns.map((column) => ({
@@ -74,8 +65,8 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
             disableMenu: true,
           })),
         ]
-      : columns;
-  }, [columns]);
+      : columns
+  }, [columns])
 
   const reactTableConfig = useMemo(() => {
     const config: TableOptions<unknown> = {
@@ -87,64 +78,59 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
         pagination: pagination,
       },
       rowCount: totalPages,
-      getCoreRowModel: getCoreRowModel(),
-      getSortedRowModel: getSortedRowModel(),
-      onSortingChange: setSorting,
-      onColumnFiltersChange: setFilterByColumn,
       manualPagination: true,
-      getRowId: (row: any) => row.id,
       debugTable: true,
       debugHeaders: true,
       debugColumns: true,
-    };
+      getRowId: (row: any) => row.id,
+      getCoreRowModel: getCoreRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      onSortingChange: setSorting,
+      onColumnFiltersChange: setFilterByColumn,
+    }
 
-    return config;
-  }, [data, sorting, filterByColumn, _columns, pagination]);
+    return config
+  }, [data, sorting, filterByColumn, _columns, pagination])
 
-  const table = useReactTable(reactTableConfig);
-  const filterRef = useRef<HTMLDivElement>(null);
+  const table = useReactTable(reactTableConfig)
+  const filterRef = useRef<HTMLDivElement>(null)
 
-  useClickOutside(filterRef, () => setOpenFilterDialog(''));
+  useClickOutside(filterRef, () => setOpenFilterDialog(''))
 
   const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event;
-
+    const { active, over } = event
 
     if (active && over && active.id !== over.id && onDragEnd) {
-      const oldIndex = dataIds.indexOf(active.id);
-      const newIndex = dataIds.indexOf(over.id);
+      const oldIndex = dataIds.indexOf(active.id)
+      const newIndex = dataIds.indexOf(over.id)
 
-      const _data = arrayMove(data, oldIndex, newIndex);
-      onDragEnd(_data);
+      const _data = arrayMove(data, oldIndex, newIndex)
+      onDragEnd(_data)
     }
-  };
+  }
 
-  const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
+  const sensors = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {}),
+  )
 
   const dataIds = useMemo<UniqueIdentifier[]>(
     () => data?.map((item: { id: UniqueIdentifier }) => item.id) || [],
     [data],
-  );
+  )
 
   return (
-    <S.Container>
+    <S.Container className="Norma__Table">
       <Header
         table={table}
-        globalFilters={globalFilters}
-        orderSmallest={orderSmallest}
-        orderLargest={orderLargest}
-        showTotalResults={showTotalResults}
-        showSettings={showSettings}
-        setGlobalFilters={setGlobalFilters}
-        setOrderLargest={setOrderLargest}
-        setOrderSmallest={setOrderSmallest}
-        showClearFiels={showClearFields}
-        customTotalResults={customTotalResults}
-        clearLabel={labels?.clearFilter}
-        onClearFieldsClick={() => onClearFieldsClick && onClearFieldsClick()}
-        customIcons={props.customIcons}
-        hideColumns={props.hideColumns}
-        onColumnVisibilityChange={props.onColumnVisibilityChange}
+        labels={{
+          columns: labels?.columns || 'Colunas',
+        }}
+        configs={configs}
+        menus={buttons}
+        hideColumns={hideColumns}
+        onColumnVisibilityChange={onColumnVisibilityChange}
       />
       <DndContext
         collisionDetection={closestCenter}
@@ -153,7 +139,7 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
         sensors={sensors}
       >
         <S.Table className={tableClassName || ''}>
-          <S.Thead $sticky={stickyHeader} $stickyTopP={stickyHeaderP}>
+          <S.Thead $sticky={sticky?.enabled} $stickyTopP={sticky?.top}>
             {table.getHeaderGroups().map((headerGroup: any) => (
               <S.TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header: any) => (
@@ -161,11 +147,12 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
                     <S.ColumnContent
                       onClick={() => {
                         if (!header?.column?.columnDef?.disableMenu)
-                          setOpenFilterDialog(header.column.columnDef.accessorKey);
+                          setOpenFilterDialog(header.column.columnDef.accessorKey)
                       }}
                     >
                       <S.TextColumn>
-                        {!header.isPlaceholder && flexRender(header.column.columnDef.header, header.getContext())}
+                        {!header.isPlaceholder &&
+                          flexRender(header.column.columnDef.header, header.getContext())}
                       </S.TextColumn>
                       {!header?.column?.columnDef?.disableMenu && (
                         <S.IconFilterDialog>
@@ -179,12 +166,9 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
                       <S.FilterDialog ref={filterRef}>
                         <S.ListFilterDialog>
                           <S.OptionFilterDialog
-                            style={{
-                              background: orderSmallest ? 'rgba(0, 0, 0, 0.04)' : '',
-                            }}
                             onClick={() => {
-                              onSortClick && onSortClick(header.column.columnDef.accessorKey, 'asc');
-                              setOpenFilterDialog('');
+                              onSortClick && onSortClick(header.column.columnDef.accessorKey, 'asc')
+                              setOpenFilterDialog('')
                             }}
                           >
                             <div className="icon">
@@ -208,12 +192,10 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
                             <p>{labels?.orderAsc || 'Menor primeiro'}</p>
                           </S.OptionFilterDialog>
                           <S.OptionFilterDialog
-                            style={{
-                              background: orderLargest ? 'rgba(0, 0, 0, 0.04)' : '',
-                            }}
                             onClick={() => {
-                              onSortClick && onSortClick(header.column.columnDef.accessorKey, 'desc');
-                              setOpenFilterDialog('');
+                              onSortClick &&
+                                onSortClick(header.column.columnDef.accessorKey, 'desc')
+                              setOpenFilterDialog('')
                             }}
                           >
                             <div className="icon rotate">
@@ -239,8 +221,8 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
                           {!header?.column?.columnDef?.nofilter && (
                             <S.OptionFilterDialog
                               onClick={() => {
-                                onFilterClick && onFilterClick(header.column.columnDef.accessorKey);
-                                setOpenFilterDialog('');
+                                onFilterClick && onFilterClick(header.column.columnDef.accessorKey)
+                                setOpenFilterDialog('')
                               }}
                             >
                               <div className="icon">
@@ -291,7 +273,7 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
                     onMouseOver={onMouseOver}
                     onMouseOut={onMouseOut}
                   />
-                );
+                )
               })}
             </SortableContext>
           </tbody>
@@ -305,7 +287,7 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
         />
       )}
     </S.Container>
-  );
-};
+  )
+}
 
-export default UncontrolledTable;
+export default UncontrolledTable

package/src/components/UncontrolledTable/components/TableButton/TableButton.style.tsx

@@ -0,0 +1,48 @@
+import styled from 'styled-components'
+
+export const TableButtonContainer = styled.div`
+  display: block;
+  position: relative;
+`
+
+export const TableButton = styled.div<{ $config?: boolean; $list?: boolean }>`
+  background-color: ${(props) => (!props.$config ? '#f0f0f0' : '#fff')};
+  border: ${(props) => (props.$config ? '1px solid #ccc' : 'none')};
+  box-sizing: border-box;
+  padding: 10px;
+  border-radius: 4px;
+  cursor: ${(props) => (props.$list ? 'default' : 'pointer')};
+  &:hover {
+    background-color: ${(props) => (!props.$config ? '#e0e0e0' : '#f9f9f9')};
+  }
+`
+
+export const TableLabel = styled.div`
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+  cursor: pointer;
+`
+
+export const TableList = styled.div`
+  position: absolute;
+  background-color: #fff;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  padding: 10px;
+  z-index: 1000;
+  left: 0;
+  top: calc(100% + 10px);
+  width: 200px;
+`
+
+export const TableListItem = styled.div<{ $disabled?: boolean }>`
+  filter: ${(props) => (props.$disabled ? 'grayscale(1)' : 'none')};
+  pointer-events: ${(props) => (props.$disabled ? 'none' : 'auto')};
+  color: ${(props) => (props.$disabled ? '#999' : '#333')};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px 10px;
+  cursor: pointer;
+`

package/src/components/UncontrolledTable/components/TableButton/TableButton.tsx

@@ -0,0 +1,64 @@
+import React, { useRef, useState } from 'react'
+import * as S from './TableButton.style'
+import { TableList } from '../../interface'
+import { Switch } from '@mui/material'
+import useClickOutside from '../../../../hooks/useClickOutside'
+
+interface TableButtonProps {
+  children: React.ReactNode
+  theme: 'menu' | 'config'
+  list?: {
+    options: TableList[]
+    toggleableList?: boolean
+  }
+  onClick?: () => void
+}
+
+const TableButton = (props: TableButtonProps) => {
+  const { children, theme, list, onClick } = props
+  const [isOpen, setIsOpen] = useState(false)
+  const TableListItemRef = useRef<HTMLDivElement>(null)
+
+  useClickOutside(TableListItemRef, () => {
+    if (isOpen) setIsOpen(false)
+  })
+
+  return (
+    <S.TableButtonContainer ref={TableListItemRef}>
+      <S.TableButton
+        ref={TableListItemRef}
+        $config={theme === 'config'}
+        $list={!!list}
+        onClick={() => {
+          setIsOpen(!isOpen)
+          if (!list) onClick?.()
+        }}
+      >
+        <S.TableLabel>{children}</S.TableLabel>
+      </S.TableButton>
+      {list && isOpen && (
+        <S.TableList>
+          {list?.options.map((item, index) => (
+            <S.TableListItem
+              key={index}
+              onClick={() => {
+                item.onClick?.(item.id)
+              }}
+              $disabled={item.disabled}
+            >
+              <span>{item.label}</span>
+              {list.toggleableList && (
+                <Switch
+                  size="small"
+                  checked={typeof item.checked === 'function' ? item.checked?.() : item.checked}
+                />
+              )}
+            </S.TableListItem>
+          ))}
+        </S.TableList>
+      )}
+    </S.TableButtonContainer>
+  )
+}
+
+export default TableButton

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

@@ -0,0 +1,26 @@
+import styled from 'styled-components'
+
+export const Header = styled.div`
+  display: flex;
+  padding: 10px 0;
+  border-bottom: 1px solid #e0e0e0;
+  justify-content: space-between;
+`
+
+export const HeaderMenus = styled.div`
+  display: flex;
+  gap: 10px;
+  align-items: center;
+`
+
+export const BtnColumns = styled.div`
+  display: flex;
+  gap: 5px;
+  align-items: center;
+`
+
+export const HeaderConfigs = styled.div`
+  display: flex;
+  gap: 10px;
+  align-items: center;
+`

package/src/components/UncontrolledTable/components/header/header.tsx

@@ -0,0 +1,85 @@
+import React, { useCallback, useEffect, useMemo } from 'react'
+import { Table } from '@tanstack/react-table'
+import TableButton from '../TableButton/TableButton'
+import TableChartIcon from '@mui/icons-material/TableChart'
+
+import * as S from './header.styles'
+import { TableButton as TypeTableButton } from '../../interface'
+
+interface HeaderProps {
+  table: Table<unknown>
+  menus?: TypeTableButton[]
+  configs?: TypeTableButton[]
+  labels: {
+    columns: string
+  }
+  hideColumns?: string[]
+  onColumnVisibilityChange?: (column: string, value: boolean) => void
+}
+
+const Header = (props: HeaderProps) => {
+  const { table, menus, configs, labels, hideColumns, onColumnVisibilityChange } = props
+
+  useEffect(() => {
+    if (!hideColumns) return
+    table
+      .getAllLeafColumns()
+      .filter((column: any) => hideColumns.includes(column.id))
+      .forEach((column: any) => column.toggleVisibility(false))
+  }, [hideColumns, table])
+
+  const _tableFields = useCallback(() => {
+    return table.getAllLeafColumns().map((column: any) => ({
+      id: column.id,
+      label: column.columnDef.header || column.id,
+      onClick: () => {
+        const isVisible = !column.getIsVisible()
+        column.toggleVisibility(isVisible)
+        onColumnVisibilityChange?.(column.id, isVisible)
+      },
+      checked: () => column.getIsVisible(),
+    }))
+  }, [table])
+
+  const _menus = useMemo(() => {
+    return menus
+  }, [menus])
+
+  const _configs = useMemo(() => {
+    const _fields: TypeTableButton = {
+      render: () => (
+        <S.BtnColumns>
+          <TableChartIcon style={{ fontSize: '1rem' }} />
+          {labels.columns}
+        </S.BtnColumns>
+      ),
+      toggleableList: true,
+      list: {
+        options: _tableFields(),
+        toggleableList: true,
+      },
+    }
+    return [...(configs || []), _fields]
+  }, [configs])
+
+  return (
+    <S.Header>
+      <S.HeaderMenus>
+        {_menus?.map((menu, index) => (
+          <TableButton key={index} theme="menu" onClick={() => menu.onClick?.()} list={menu.list}>
+            {menu.render()}
+          </TableButton>
+        ))}
+      </S.HeaderMenus>
+      <S.HeaderConfigs>
+        {_configs?.map((menu, index) => (
+          <TableButton key={index} theme="config" onClick={() => menu.onClick?.()} list={menu.list}>
+            {menu.render()}
+          </TableButton>
+        ))}
+      </S.HeaderConfigs>
+    </S.Header>
+  )
+}
+
+export default Header

package/src/components/UncontrolledTable/components/index.tsx

@@ -1,13 +1,16 @@
-import Pagination from "./pagination";
-import Header from "./header"
+import Pagination from "./pagination/pagination";
+import Header from "./header/header"
 import SimpleRow from "./row/SimpleRow";
 import DraggableRow from "./row/DraggableRow";
 import RowDragHandleCell from "./row/RowDragHandleCell";
+import TableButton from "./TableButton/TableButton";
+
 
 export {
   Pagination,
   Header,
   SimpleRow,
   DraggableRow,
-  RowDragHandleCell
+  RowDragHandleCell,
+  TableButton
 }

package/src/components/UncontrolledTable/components/pagination/{index.tsx → pagination.tsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Pagination as MuiPagination, PaginationItem } from '@mui/material';
-import * as S from './styles';
+import * as S from './pagination.styles';
 
 interface PaginationProps {
   count: number;

package/src/components/UncontrolledTable/components/row/DraggableRow.tsx

@@ -1,14 +1,14 @@
-import React, { CSSProperties } from 'react';
-import * as S from './styles';
+import React, { CSSProperties } from 'react'
+import * as S from './styles'
 
-import { flexRender } from '@tanstack/react-table';
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
+import { flexRender } from '@tanstack/react-table'
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
 
 const DraggableRow: React.FC<any> = ({ row, onClick, onMouseOver, onMouseOut }) => {
   const { transform, transition, setNodeRef, isDragging } = useSortable({
     id: row.id,
-  });
+  })
 
   const style: CSSProperties = {
     transform: CSS.Transform.toString(transform),
@@ -16,10 +16,10 @@ const DraggableRow: React.FC<any> = ({ row, onClick, onMouseOver, onMouseOut })
     opacity: isDragging ? 0.8 : 1,
     zIndex: isDragging ? 1 : 0,
     position: 'relative',
-  };
+  }
 
   return (
-    <S.Tr $hasAction={!!onClick || !!onMouseOver || !!onMouseOut} ref={setNodeRef} style={style}>
+    <S.Tr ref={setNodeRef} style={style}>
       {row.getVisibleCells().map((cell: any) => (
         <S.Td key={cell.id} onClick={onClick} onMouseOver={onMouseOver} onMouseOut={onMouseOut}>
           {cell.column.columnDef.type == 'action'
@@ -28,7 +28,7 @@ const DraggableRow: React.FC<any> = ({ row, onClick, onMouseOver, onMouseOut })
         </S.Td>
       ))}
     </S.Tr>
-  );
-};
+  )
+}
 
-export default DraggableRow;
+export default DraggableRow

package/src/components/UncontrolledTable/components/row/SimpleRow.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
-import { flexRender } from '@tanstack/react-table';
-import * as S from './styles';
+import React from 'react'
+import { flexRender } from '@tanstack/react-table'
+import * as S from './styles'
 
 const SimpleRow: React.FC<any> = ({ row, onClick, onMouseOver, onMouseOut }) => {
   return (
     <S.Tr
-      $hasAction={!!onClick || !!onMouseOver || !!onMouseOut}
       onClick={() => (onClick ? onClick(row.original) : null)}
       onMouseOver={() => (onMouseOver ? onMouseOver(row.original) : null)}
       onMouseOut={() => (onMouseOut ? onMouseOut(row.original) : null)}
@@ -17,10 +16,10 @@ const SimpleRow: React.FC<any> = ({ row, onClick, onMouseOver, onMouseOut }) =>
               ? cell.getValue()
               : flexRender(cell.column.columnDef.cell, cell.getContext())}
           </S.Td>
-        );
+        )
       })}
     </S.Tr>
-  );
-};
+  )
+}
 
-export default SimpleRow;
+export default SimpleRow

package/src/components/UncontrolledTable/components/row/styles.tsx

@@ -1,15 +1,11 @@
-import { breakpoints } from '../../../../utils/styledBreakpoints';
-import styled from 'styled-components';
+import styled from 'styled-components'
 
-export const Tr = styled.tr<any>`
+export const Tr = styled.tr`
   color: inherit;
   display: table-row;
   vertical-align: middle;
   outline: 0;
-  &:nth-of-type(even) {
-    background-color: #fafafa;
-  }
-`;
+`
 
 export const Td = styled.td`
   font-weight: 500;
@@ -20,13 +16,7 @@ export const Td = styled.td`
   vertical-align: inherit;
   border-bottom: 1px solid rgba(224, 224, 224, 1);
   text-align: left;
-  padding: 16px;
-  ${breakpoints({
-    cssProp: 'padding',
-    cssPropUnits: 'px',
-    values: [{ 1440: 8 }],
-    mediaQueryType: 'max-width',
-  })};
+  padding: 8px;
   color: #666666;
   font-size: 0.875rem;
-`;
+`