norma-library 0.4.8 → 0.5.0

package/src/components/DataGrid/base/dropdown.tsx

@@ -0,0 +1,212 @@
+import React, { useState, useEffect, Fragment } from 'react';
+import NumberFilter from './number-filter';
+import { Button, Typography, FormControl, InputLabel, OutlinedInput, InputAdornment, IconButton } from '@mui/material';
+import Divider from '@mui/material/Divider';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import Checkbox from '@mui/material/Checkbox';
+
+import { Search } from '@mui/icons-material';
+import { DropdownFilterProps } from '@/interfaces';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+
+import { DropDownStyled } from '../styled';
+
+import { ArrowSmallDownIcon, ArrowSmallUpIcon, FunnelIcon } from '../icons';
+
+const DropdownFilter = ({
+  onOrder,
+  onFilter,
+  onSelected,
+  onFilterSelected,
+  itemsSelected,
+  onSelectAll,
+  onChecketAll,
+  data,
+}: DropdownFilterProps) => {
+  const [openFilter, setOpenFilter] = useState<boolean>(false);
+  const [selectAll, setSelectAll] = useState(onSelectAll);
+  const [selecteds, setItemsSelected] = useState<(string | number)[]>(itemsSelected);
+
+  const handleFilter = () => {
+    setOpenFilter(prevState => !prevState);
+  };
+
+  const handleFilterSelected = () => {
+    if (itemsSelected.length > 0) {
+      onFilterSelected();
+    } else {
+      onSelected([]);
+      onFilter('');
+      onFilterSelected();
+    }
+  };
+
+  const handleCheckboxChange = (option: string) => {
+    const updatedSelection = selecteds.includes(option)
+      ? selecteds.filter(selected => selected !== option)
+      : [...selecteds, option];
+
+    setItemsSelected(updatedSelection);
+    onSelected(updatedSelection);
+  };
+
+  const handleSelectAll = () => {
+    setSelectAll(selectAll ? false : true);
+    onChecketAll(selectAll ? false : true);
+
+    if (!selectAll) {
+      const allItems = data.map((item: any) => item.toString());
+      setItemsSelected(allItems);
+      onSelected(allItems);
+    } else {
+      setItemsSelected([]);
+      onSelected([]);
+    }
+  };
+
+  useEffect(() => {
+    setItemsSelected(selectAll ? data.map(String) : []);
+    onSelected(selectAll ? data.map(String) : []);
+  }, [selectAll]);
+
+  useEffect(() => {
+    setItemsSelected(itemsSelected);
+  }, [selecteds]);
+
+  return (
+    <DropDownStyled>
+      <Fragment>
+        <MenuList>
+          <MenuItem
+            onClick={() => {
+              onOrder('down');
+              setOpenFilter(false);
+            }}
+          >
+            <ListItemIcon>
+              <ArrowSmallUpIcon width="16" height="16" />
+            </ListItemIcon>
+            <ListItemText>Classificar de A a Z</ListItemText>
+          </MenuItem>
+          <MenuItem
+            onClick={() => {
+              onOrder('up');
+              setOpenFilter(false);
+            }}
+          >
+            <ListItemIcon>
+              <ArrowSmallDownIcon width="16" height="16" />
+            </ListItemIcon>
+            <ListItemText>Classificar de Z a A</ListItemText>
+          </MenuItem>
+          <MenuItem onClick={handleFilter}>
+            <ListItemIcon>
+              <FunnelIcon width="16" height="16" />
+            </ListItemIcon>
+            <ListItemText>Filtro por números</ListItemText>
+            <Typography variant="body2" color="text.secondary">
+              <KeyboardArrowRightIcon fontSize="medium" style={{ position: 'relative', top: '5px' }} />
+            </Typography>
+            {openFilter && (
+              <React.Fragment>
+                <NumberFilter onClick={() => console.log('Me clicou')} />
+              </React.Fragment>
+            )}
+          </MenuItem>
+          <Divider />
+          <FormControl sx={{ m: 1 }} variant="outlined">
+            <InputLabel htmlFor="outlined-adornment-search" size="small">
+              Buscar
+            </InputLabel>
+            <OutlinedInput
+              id="outlined-adornment-search"
+              endAdornment={
+                <InputAdornment position="end">
+                  <IconButton edge="end">
+                    <Search />
+                  </IconButton>
+                </InputAdornment>
+              }
+              onChange={event => {
+                onFilter(event.target.value);
+              }}
+              label="Buscar"
+              fullWidth
+              size="small"
+            />
+          </FormControl>
+          <Divider />
+          <List
+            sx={{
+              bgcolor: '#f2f2f2',
+              padding: ' 5px',
+              overflow: ' auto',
+              width: ' 100%',
+              height: ' 120px',
+            }}
+          >
+            <ListItem disablePadding onClick={handleSelectAll}>
+              <ListItemButton role={undefined} sx={{ py: 0, minHeight: 32 }}>
+                <ListItemIcon>
+                  <Checkbox
+                    edge="start"
+                    tabIndex={-1}
+                    checked={selectAll}
+                    disableRipple
+                    inputProps={{ 'aria-labelledby': 'all' }}
+                  />
+                </ListItemIcon>
+                <ListItemText
+                  id={'all'}
+                  primary={selectAll ? 'Deselect All' : 'Select All'}
+                  primaryTypographyProps={{
+                    fontSize: 14,
+                    fontWeight: 'medium',
+                  }}
+                />
+              </ListItemButton>
+            </ListItem>
+            {data.map((item: any, key: number) => {
+              const labelId = `checkbox-list-label-${item.toString()}`;
+              return (
+                <ListItem key={key} disablePadding onClick={() => handleCheckboxChange(item.toString())}>
+                  <ListItemButton role={undefined} sx={{ py: 0, minHeight: 32 }}>
+                    <ListItemIcon>
+                      <Checkbox
+                        edge="start"
+                        tabIndex={-1}
+                        disableRipple
+                        inputProps={{ 'aria-labelledby': labelId }}
+                        checked={selecteds.includes(item.toString())}
+                      />
+                    </ListItemIcon>
+                    <ListItemText
+                      id={labelId}
+                      primary={`${item}`}
+                      primaryTypographyProps={{
+                        fontSize: 14,
+                        fontWeight: 'medium',
+                      }}
+                    />
+                  </ListItemButton>
+                </ListItem>
+              );
+            })}
+          </List>
+        </MenuList>
+        <Button variant="outlined" sx={{ align: 'right' }} onClick={handleFilterSelected}>
+          Confirm
+        </Button>
+      </Fragment>
+    </DropDownStyled>
+  );
+};
+
+export default DropdownFilter;

package/src/components/DataGrid/base/number-filter.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import { NumberFilterProps } from '@/interfaces';
+
+const items = [
+  'Equal',
+  'Does not equal',
+  'Greater than',
+  'Greater than or equal to',
+  'Less than',
+  'Less than or equal to',
+  'Between',
+];
+
+const NumberFilter: React.FC<NumberFilterProps> = () => {
+  return (
+    <List
+      sx={{
+        bgcolor: '#FFF',
+        position: 'absolute',
+        minHeight: '190px',
+        top: '0',
+        left: 'auto',
+        right: 'auto',
+        minWidth: '240px',
+        zIndex: '9',
+        padding: '5px 10px',
+        boxShadow: '0 0 10px #ccc',
+      }}
+    >
+      {items.map((value, key) => (
+        <ListItem key={key} disableGutters>
+          <ListItemText primary={`${value}...`} />
+        </ListItem>
+      ))}
+    </List>
+  );
+};
+
+export default NumberFilter;

package/src/components/DataGrid/base/sorting.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { SortingProps } from '@/interfaces';
+// import { Icons } from "@/components/Icons";
+
+export function ArrowSmallUpIcon(props: any) {
+  return (
+    <svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" {...props}>
+      <path
+        clipRule="evenodd"
+        fillRule="evenodd"
+        d="M12 20.25a.75.75 0 01-.75-.75V6.31l-5.47 5.47a.75.75 0 01-1.06-1.06l6.75-6.75a.75.75 0 011.06 0l6.75 6.75a.75.75 0 11-1.06 1.06l-5.47-5.47V19.5a.75.75 0 01-.75.75z"
+      />
+    </svg>
+  );
+}
+
+const Sorting: React.FC<SortingProps> = ({ sort, active }) => {
+  const sortIcon = <ArrowSmallUpIcon />;
+  const opacityValue = active ? 1 : 0.5;
+
+  return (
+    <button type="button" style={{ opacity: opacityValue }} className="arrows">
+      {sort && sortIcon}
+    </button>
+  );
+};
+
+export default Sorting;

package/src/components/DataGrid/icons.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+export function FunnelIcon(props: any) {
+  return (
+    <svg
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      {...props}
+    >
+      <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"
+      />
+    </svg>
+  );
+}
+
+export function ArrowSmallUpIcon(props: any) {
+  return (
+    <svg
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      {...props}
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75" />
+    </svg>
+  );
+}
+
+export function ArrowSmallDownIcon(props: any) {
+  return (
+    <svg
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      {...props}
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75" />
+    </svg>
+  );
+}

package/src/components/DataGrid/index.tsx

@@ -0,0 +1,254 @@
+import React, { useEffect, useMemo, useState, useRef } from 'react';
+
+import { Box, Stack, ThemeProvider, useMediaQuery, Paper } from '@mui/material';
+
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+
+import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+
+import { DataGridBaseProps, DataSourceItem } from '../../interfaces';
+
+import { themes } from '../../helpers';
+
+import DropdownFilter from './base/dropdown';
+import { Pagination as MuiPagination } from '@mui/material';
+
+import { filterDataSource, generateRandomDataSource, groupByDataSource, sortDataSourceByColumn } from './shared';
+
+import {
+  ButtonStyled,
+  DataGridHeaderStyled,
+  HeaderCogStyled,
+  TableCellStyled,
+  TableRowStyled,
+  TotalRecordsStyled,
+} from './styled';
+
+export function ArrowSmallUpIcon(props: any) {
+  return (
+    <svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" {...props}>
+      <path
+        clipRule="evenodd"
+        fillRule="evenodd"
+        d="M12 20.25a.75.75 0 01-.75-.75V6.31l-5.47 5.47a.75.75 0 01-1.06-1.06l6.75-6.75a.75.75 0 011.06 0l6.75 6.75a.75.75 0 11-1.06 1.06l-5.47-5.47V19.5a.75.75 0 01-.75.75z"
+      />
+    </svg>
+  );
+}
+
+export function Cog6ToothIcon(props: any) {
+  return (
+    <svg
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
+      />
+      <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
+  );
+}
+
+const dataSource = generateRandomDataSource(30);
+
+export const DataGrid: React.FC<DataGridBaseProps> = ({ data = [] }) => {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.light), [prefersDarkMode]);
+
+  const pageSize = 10;
+  const columns = data[0].columns;
+
+  const [selectedItems, setSelectedItems] = useState<(string | number)[]>([]);
+
+  const [sorting, setSorting] = useState('down');
+  const [selectAll, setSelectAll] = useState<boolean>(false);
+
+  const [currentActiveSorting, setCurrentActiveSorting] = useState<string>('id');
+
+  const [currentDropDownActive, setCurrentDropDownActive] = useState<string | null>(null);
+
+  const [originalDataSource, setOriginalDataSource] = useState<DataSourceItem[]>(dataSource);
+  const [newDataSource, setDataSource] = useState<DataSourceItem[]>(dataSource);
+  const [totalRecords, setTotalRecords] = useState(dataSource.length);
+  const [totalPages, setTotalPages] = useState(Math.ceil(dataSource.length / pageSize));
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const startIndex = (currentPage - 1) * pageSize;
+  const endIndex = Math.min(startIndex + pageSize, totalRecords);
+
+  const sortRefs = useRef<(React.RefObject<HTMLTableCellElement> | null)[]>(new Array(columns.length).fill(null));
+
+  const handleItemSelected = (items: (string | number)[]) => {
+    setSelectedItems(items);
+  };
+
+  const handleDropDown = (item: any) => {
+    setCurrentDropDownActive(item === currentDropDownActive ? null : item);
+    if (item !== currentDropDownActive) {
+      setCurrentActiveSorting(item);
+      setSorting('down');
+    }
+  };
+
+  const handleSorting = (sort: string) => {
+    setSorting(sort === 'up' ? 'up' : 'down');
+    currentDropDownActive && setCurrentActiveSorting(currentDropDownActive);
+    handleDropDown(currentDropDownActive);
+  };
+
+  const handleFilter = (filter: string) => {
+    const dataSourceFiltered = filterDataSource(originalDataSource, currentActiveSorting, filter);
+    setOriginalDataSource(dataSourceFiltered);
+    setCurrentPage(1);
+  };
+
+  const handleFilterSelected = () => {
+    if (selectedItems.length > 0) {
+      const filteredData = originalDataSource.filter((item: DataSourceItem) => {
+        const columnValue = currentActiveSorting ? item[currentActiveSorting] : undefined;
+
+        if (typeof columnValue === 'string') {
+          return selectedItems.includes(columnValue);
+        } else if (typeof columnValue === 'number') {
+          return selectedItems.includes(columnValue.toString());
+        }
+        return false;
+      });
+
+      const sortedData = sortDataSourceByColumn(filteredData, currentActiveSorting, sorting);
+      setTotalRecords(sortedData.length);
+      setTotalPages(Math.ceil(sortedData.length / pageSize));
+      setCurrentPage(1);
+      setDataSource(sortedData.slice(startIndex, endIndex));
+    } else {
+      const sortedData = sortDataSourceByColumn(dataSource, currentActiveSorting, sorting);
+      setTotalRecords(sortedData.length);
+      setTotalPages(Math.ceil(sortedData.length / pageSize));
+      setCurrentPage(1);
+      setDataSource(sortedData.slice(startIndex, endIndex));
+    }
+    handleDropDown(currentDropDownActive);
+  };
+
+  const handleChangePage = (page: number) => {
+    setCurrentPage(page);
+    const startIndex = (page - 1) * pageSize;
+    const endIndex = Math.min(startIndex + pageSize, totalRecords);
+    setDataSource(originalDataSource.slice(startIndex, endIndex));
+  };
+
+  useEffect(() => {
+    if (selectedItems.length <= 0) {
+      const sortedData = sortDataSourceByColumn(dataSource, currentActiveSorting, sorting);
+      setDataSource(sortedData.slice(startIndex, endIndex));
+      setTotalRecords(sortedData.length);
+      setTotalPages(Math.ceil(sortedData.length / pageSize));
+      setCurrentPage(1);
+    }
+  }, [selectedItems]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Box sx={{ width: '100%', minHeight: 480 }}>
+        <DataGridHeaderStyled>
+          <TotalRecordsStyled>{totalRecords} results found for this search</TotalRecordsStyled>
+          <HeaderCogStyled type="button">
+            <Cog6ToothIcon width={24} height={24} />
+          </HeaderCogStyled>
+        </DataGridHeaderStyled>
+        <TableContainer component={Paper} sx={{ overflowX: 'inherit' }}>
+          <Table sx={{ minWidth: 650, width: '100%' }} aria-label="a dense table">
+            <TableHead>
+              <TableRow>
+                {columns &&
+                  columns.map((item: any, key: any) => (
+                    <TableCellStyled
+                      key={key}
+                      ref={ref => (sortRefs.current[key] = ref as React.RefObject<HTMLTableCellElement> | null)}
+                    >
+                      <Stack direction="row" spacing={2} sx={{ position: 'relative' }}>
+                        <ButtonStyled
+                          variant="text"
+                          size="small"
+                          color={currentActiveSorting === item.field ? 'primary' : 'inherit'}
+                          endIcon={
+                            currentActiveSorting === item.field && sorting === 'up' ? (
+                              <ArrowDropUpIcon />
+                            ) : (
+                              <ArrowDropDownIcon />
+                            )
+                          }
+                          onClick={() => {
+                            handleDropDown(item.field);
+                          }}
+                        >
+                          {item.headerText}
+                        </ButtonStyled>
+                        {currentDropDownActive && currentDropDownActive === item.field && (
+                          <DropdownFilter
+                            format={item.format}
+                            onOrder={handleSorting}
+                            onFilter={handleFilter}
+                            onSelected={handleItemSelected}
+                            itemsSelected={selectedItems}
+                            onFilterSelected={handleFilterSelected}
+                            onChecketAll={setSelectAll}
+                            onSelectAll={selectAll}
+                            data={groupByDataSource(dataSource, item.field)}
+                          />
+                        )}
+                      </Stack>
+                    </TableCellStyled>
+                  ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {newDataSource &&
+                newDataSource.map((item: DataSourceItem, key: number) => (
+                  <TableRowStyled key={key} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                    {Object.keys(item).map(columnKey => (
+                      <TableCell component="th" scope="row" key={columnKey}>
+                        {item[columnKey]}
+                      </TableCell>
+                    ))}
+                  </TableRowStyled>
+                ))}
+            </TableBody>
+          </Table>
+          <Stack
+            spacing={2}
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              borderTop: '1px solid #ccc',
+              padding: 2,
+            }}
+          >
+            <MuiPagination
+              variant="outlined"
+              shape="rounded"
+              count={totalPages}
+              page={currentPage}
+              onChange={(_event, page) => handleChangePage(page)}
+            />
+          </Stack>
+        </TableContainer>
+      </Box>
+    </ThemeProvider>
+  );
+};