norma-library 0.4.8 → 0.5.0

package/src/components/DataGrid/shared.ts

@@ -0,0 +1,154 @@
+import { DataSourceItem } from '@/interfaces';
+
+export function groupByDataSource(dataSource: DataSourceItem[], key: string): (string | number)[] {
+  const groupedValues: (string | number)[] = [];
+
+  dataSource.forEach(item => {
+    const value = item[key];
+    const existingGroup = groupedValues.find(group => group === value);
+
+    if (!existingGroup) {
+      groupedValues.push(value);
+    }
+  });
+
+  return groupedValues;
+}
+
+export function sortDataSourceByColumn(jsonData: any[], column: string, order: string): any[] {
+  return jsonData.sort((a, b) => {
+    const valueA = a[column];
+    const valueB = b[column];
+
+    if (typeof valueA === 'string' && typeof valueB === 'string') {
+      if (order === 'asc') {
+        return valueA.localeCompare(valueB);
+      } else if (order === 'desc') {
+        return valueB.localeCompare(valueA);
+      }
+    } else if (typeof valueA === 'number' && typeof valueB === 'number') {
+      if (order === 'asc') {
+        return valueA - valueB;
+      } else if (order === 'desc') {
+        return valueB - valueA;
+      }
+    }
+
+    return 0;
+  });
+}
+
+export function filterDataSource(
+  dataSource: DataSourceItem[],
+  column: string,
+  filter: string,
+  exactTime: boolean = false,
+): DataSourceItem[] {
+  return dataSource.filter(item => {
+    const value = item[column];
+    if (typeof value === 'string' || value.constructor === Date) {
+      const stringValue = (value as string).toString().toLowerCase();
+      const filterValue = filter.toLowerCase();
+
+      if (exactTime && filterValue.length === 5) {
+        return stringValue === filterValue;
+      }
+
+      if (stringValue.includes(filterValue)) {
+        return true;
+      }
+
+      if (stringValue.includes(':') && filterValue.includes(':')) {
+        const [hour, minute] = stringValue.split(':');
+        const [filterHour, filterMinute] = filterValue.split(':');
+
+        if (filterValue.length === 5) {
+          return stringValue === filterValue;
+        }
+
+        if (filterHour.length === 1 && hour === filterHour) {
+          return true;
+        }
+
+        if (filterMinute.length === 1 && minute === filterMinute) {
+          return true;
+        }
+      }
+    } else if (typeof value === 'number') {
+      const numberValue = (value as number).toString();
+      return numberValue.includes(filter);
+    }
+
+    return false;
+  });
+}
+
+export function filterItemsByColumn(dataSource: any[], column: string, filterValues: any[]): any[] {
+  return dataSource.filter(item => {
+    const columnValue = item[column];
+    return filterValues.includes(columnValue);
+  });
+}
+
+// PROVISORIO BAIXO
+export function generateRandomDataSource(numRows: number) {
+  const campanhas = ['Campanha 1', 'Campanha 2', 'Campanha 3', 'Campanha 4', 'Campanha 5'];
+  const agents = [16321, 16322, 16323, 16324, 16325];
+  const disposals = ['Tabulação 1', 'Tabulação 2', 'Tabulação 3', 'Tabulação 4', 'Tabulação 5'];
+
+  const dataSource = [];
+
+  for (let i = 0; i < numRows; i++) {
+    const data = generateRandomDate();
+    const duration = generateRandomDuration();
+    const campanha = getRandomElement(campanhas);
+    const agente = getRandomElement(agents);
+    const ani = generateRandomNumber(50000000, 60000000);
+    const dnis = generateRandomNumber(100000, 999999);
+    const disposition = getRandomElement(disposals);
+    const origem = generateRandomNumber(12000, 13000);
+    const id = i + 1;
+
+    const item = {
+      data,
+      duration,
+      campanha,
+      agente,
+      ani,
+      dnis,
+      disposition,
+      origem,
+      id,
+    };
+
+    dataSource.push(item);
+  }
+
+  return dataSource;
+}
+
+export function generateRandomDate() {
+  const startDate = new Date('2020-01-01');
+  const currentDate = new Date();
+  const randomTimestamp = Math.random() * (currentDate.getTime() - startDate.getTime()) + startDate.getTime();
+  const randomDate = new Date(randomTimestamp);
+  const day = randomDate.getDate().toString().padStart(2, '0');
+  const month = (randomDate.getMonth() + 1).toString().padStart(2, '0');
+  const year = randomDate.getFullYear();
+  return `${day}/${month}/${year}`;
+}
+
+export function generateRandomDuration() {
+  const hours = generateRandomNumber(0, 10).toString().padStart(2, '0');
+  const minutes = generateRandomNumber(0, 59).toString().padStart(2, '0');
+  return `${hours}:${minutes}`;
+}
+
+export function generateRandomNumber(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+export function getRandomElement(array: any[]) {
+  const randomIndex = Math.floor(Math.random() * array.length);
+  return array[randomIndex];
+}

package/src/components/DataGrid/styled.ts

@@ -0,0 +1,96 @@
+import {
+  Box,
+  Button,
+  Typography,
+  TableRow,
+  TableCell,
+  tableCellClasses,
+  TypographyProps,
+  BoxProps,
+  ButtonProps,
+  TableCellProps,
+  TableRowProps,
+} from '@mui/material';
+
+import { StyledComponent } from '@emotion/styled';
+import { styled } from '@mui/material/styles';
+
+const DataGridHeaderStyled: StyledComponent<BoxProps> = styled(Box)({
+  display: 'flex',
+  position: 'relative',
+});
+
+const TotalRecordsStyled: StyledComponent<TypographyProps> = styled(Typography)({
+  paddingTop: '24px',
+  paddingBottom: '24px',
+  paddingLeft: '15px',
+  font: 'normal normal normal 18px/24px Source Sans Pro',
+});
+
+const HeaderCogStyled: StyledComponent<ButtonProps> = styled(Button)({
+  position: 'absolute',
+  top: '24px',
+  right: '30px',
+  border: '0',
+  padding: 0,
+  background: 'none',
+  width: '24px',
+  height: '24px',
+  cursor: 'pointer',
+});
+
+const TableCellStyled: StyledComponent<TableCellProps> = styled(TableCell)(() => ({
+  [`&.${tableCellClasses.head}`]: {
+    backgroundColor: '#FFF',
+    color: '#333',
+    font: 'normal normal 600 14px/20px Source Sans Pro',
+    position: 'relative',
+    fontWeight: 'bold',
+    padding: 15,
+  },
+  [`&.${tableCellClasses.body}`]: {
+    fontSize: 14,
+  },
+}));
+
+const TableRowStyled: StyledComponent<TableRowProps> = styled(TableRow)(({ theme }) => ({
+  '&:nth-of-type(odd)': {
+    backgroundColor: theme.palette.action.hover,
+  },
+  // hide last border
+  '&:last-child td, &:last-child th': {
+    border: 0,
+  },
+}));
+
+const ButtonStyled: StyledComponent<ButtonProps> = styled(Button)({
+  fontWeight: 'bold',
+  margin: 0,
+  padding: 0,
+});
+
+const DropDownStyled: StyledComponent<BoxProps> = styled(Box)({
+  position: 'absolute',
+  minHeight: '220px',
+  top: '30px',
+  left: '-50%',
+  width: '292px',
+  display: 'flex',
+  background: '#fff',
+  zIndex: 9,
+  border: 0,
+  boxShadow: '0 0 10px #ccc',
+  padding: '5px',
+  flexDirection: 'column',
+  justifyContent: 'flex-start',
+});
+
+export {
+  DataGridHeaderStyled,
+  TotalRecordsStyled,
+  HeaderCogStyled,
+  TableCellStyled,
+  TableRowStyled,
+  ButtonStyled,
+  DropDownStyled,
+};

package/src/components/DataGrid/styles/dropdown.module.css

@@ -0,0 +1,86 @@
+.dropdown {
+  position: absolute;
+  min-height: 330px;
+  top: 55px;
+  left: 0;
+  width: 220px;
+  display: flex;
+  background: #fff;
+  z-index: 9;
+  border: 0;
+  box-shadow: 0 0 10px #ccc;
+  padding: 5px 10px;
+  flex-direction: column;
+  text-align: left;
+  justify-content: flex-start;
+}
+
+.dropdown ul ol {
+  margin: 0;
+  padding: 0;
+}
+
+.dropdown li {
+  list-style: none;
+}
+
+.dropdown li button {
+  width: 100%;
+  margin: 4px 0;
+  position: relative;
+  font-weight: 400;
+  font-family: "Source Sans Pro";
+}
+.dropdown li button span {
+  position: absolute;
+  right: 0;
+}
+.dropdown li.search {
+  position: relative;
+  padding: 10px 0;
+}
+
+.dropdown li.search button {
+  position: absolute;
+  top: 13px;
+  right: 5px;
+  width: 18px;
+  height: 18px;
+}
+
+.dropdown li.search button svg {
+  width: 16px;
+  height: 16px;
+}
+
+.boxListDataColumn {
+  background: #f2f2f2;
+  padding: 5px;
+  overflow: auto;
+  width: 100%;
+  height: 120px;
+}
+.boxListDataColumn li {
+  padding: 5px 0;
+
+  height: 20px;
+  line-height: 20px;
+  font: normal normal normal 16px/22px "Source Sans Pro";
+}
+
+.dropdown button.submit {
+  width: 80px;
+  border: 1px solid;
+  border-radius: 3px;
+  margin: 5px 0 0;
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  text-align: center !important;
+  padding: 5px 10px;
+  clear: both;
+}
+
+.dropdown .dropDown_numbers {
+  position: relative;
+}

package/src/components/DataGrid/styles/number-filter.module.css

@@ -0,0 +1,16 @@
+.boxNumberFilter {
+  position: absolute;
+  height: 190px;
+  top: 0;
+  left: 220px;
+  width: 240px;
+  display: flex;
+  background: #fff;
+  z-index: 9;
+  border: 0;
+  box-shadow: 0 0 10px #ccc;
+  padding: 5px 10px;
+  flex-direction: column;
+  text-align: left;
+  justify-content: flex-start;
+}

package/src/components/DataGrid/styles/styles.module.css

@@ -0,0 +1,107 @@
+@import '../../../../styles/global.css';
+
+.tableHeader {
+  display: flex;
+  position: relative;
+}
+
+.tableHeader h3 {
+  padding-top: 24px;
+  padding-bottom: 24px;
+  padding-left: 15px;
+  font: normal normal normal 18px/24px 'Source Sans Pro';
+}
+
+.button {
+  position: absolute;
+  top: 24px;
+  right: 30px;
+  border: 0;
+  background: none;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.table {
+  display: table;
+  width: 100%;
+  margin-bottom: 1rem;
+  color: var(--table-color);
+  vertical-align: top;
+  border-color: var(--table-border-color);
+  caption-side: bottom;
+  border-collapse: collapse;
+  text-indent: initial;
+  border-spacing: 2px;
+  text-indent: initial;
+  border-spacing: 2px;
+}
+
+.table > :not(caption) > * > * {
+  padding: 0.5rem 0.5rem;
+  background-color: var(--table-bg);
+  box-shadow: inset 0 0 0 9999px var(--table-accent-bg);
+}
+
+.table > thead {
+  vertical-align: bottom;
+}
+
+.table thead {
+  display: table-header-group;
+}
+
+.table tr {
+  display: table-row;
+  vertical-align: inherit;
+  height: 20px;
+}
+
+.standard tr:nth-child(even),
+.standard-divider tr:nth-child(even) {
+  background: var(--table-striped-bg) 0% 0% no-repeat padding-box;
+}
+
+.standard-divider tr td {
+  border-right: 1px solid --table-bg;
+}
+
+.table th {
+  display: table-cell;
+  vertical-align: inherit;
+  font-weight: bold;
+  border-bottom-width: 1px;
+  position: relative;
+}
+
+.table th button {
+  background: none;
+  border: 0;
+  cursor: pointer;
+  font: normal normal 600 16px/22px 'Source Sans Pro';
+  text-align: left;
+}
+
+.table th img {
+  position: absolute;
+  top: 22px;
+  right: 15px;
+}
+
+.table th,
+.table td {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+  position: relative;
+}
+
+.table td {
+  font: normal normal normal 16px/22px 'Source Sans Pro';
+}
+
+.table tbody {
+  display: table-row-group;
+  vertical-align: middle;
+  border-color: inherit;
+}

package/src/components/DatePicker.tsx

@@ -1,84 +1,73 @@
-import React, { useMemo } from "react";
-import { ThemeProvider, useMediaQuery } from "@mui/material";
-import { DemoContainer } from "@mui/x-date-pickers/internals/demo";
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import { DatePicker as MuiDatePicker } from "@mui/x-date-pickers/DatePicker";
-import { MobileDatePicker as MuiMobileDatePicker } from "@mui/x-date-pickers/MobileDatePicker";
-import { DesktopDatePicker as MuiDesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker";
-import { DatePickerBaseProps } from "../interfaces";
-import { themes } from "../helpers";
-import { styled } from "@mui/material/styles";
-
-import "dayjs/locale/pt-br";
-import "dayjs/locale/en";
-import "dayjs/locale/es";
-
-const MuiDatePickerStyled = styled(MuiDatePicker)({
-  "& .MuiOutlinedInput-notchedOutline": {
-    border: "none",
-    borderRadius: 0,
-    borderBottom: "1px solid #666666",
-  },
-  "& .MuiFormLabel-root": {
-    backgroundColor: "#fff",
-    padding: "0 5px",
-  },
-});
-
-const MuiMobileDatePickerStyled = styled(MuiMobileDatePicker)({
-  "& .MuiOutlinedInput-notchedOutline": {
-    border: "none",
-    borderRadius: 0,
-    borderBottom: "1px solid #666666",
-  },
-  "& .MuiFormLabel-root": {
-    backgroundColor: "#fff",
-    padding: "0 5px",
-  },
-});
-
-const MuiDesktopDatePickerStyled = styled(MuiDesktopDatePicker)({
-  "& .MuiOutlinedInput-notchedOutline": {
-    border: "none",
-    borderRadius: 0,
-    borderBottom: "1px solid #666666",
-  },
-  "& .MuiFormLabel-root": {
-    backgroundColor: "#fff",
-    padding: "0 5px",
-  },
-});
-
-export const DatePicker = ({
-  label,
-  format = "DD/MM/YYYY",
-  language = "pt-br",
-  variant = "desktop",
-}: DatePickerBaseProps) => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = useMemo(
-    () => (prefersDarkMode ? themes.light : themes.dark),
-    [prefersDarkMode]
-  );
-
-  return (
-    <ThemeProvider theme={theme}>
-      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
-        <DemoContainer
-          components={["TimePicker", "MobileTimePicker", "DesktopTimePicker"]}
-        >
-          {variant === "responsive" && (
-            <MuiDatePickerStyled label={label} format={format} />
-          )}
-          {variant === "mobile" && (
-            <MuiMobileDatePickerStyled label={label} format={format} />
-          )}
-          {variant === "desktop" && (
-            <MuiDesktopDatePickerStyled label={label} format={format} />
-          )}
-        </DemoContainer>
-      </LocalizationProvider>
-    </ThemeProvider>
-  );
-};
+import React, { useMemo } from 'react';
+import { ThemeProvider, useMediaQuery } from '@mui/material';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';
+import { MobileDatePicker as MuiMobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
+import { DesktopDatePicker as MuiDesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
+import { DatePickerBaseProps } from '../interfaces';
+import { themes } from '../helpers';
+import { styled } from '@mui/material/styles';
+
+import 'dayjs/locale/pt-br';
+import 'dayjs/locale/en';
+import 'dayjs/locale/es';
+
+const MuiDatePickerStyled = styled(MuiDatePicker)({
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none',
+    borderRadius: 0,
+    borderBottom: '1px solid #666666',
+  },
+  '& .MuiFormLabel-root': {
+    backgroundColor: '#fff',
+    padding: '0 5px',
+  },
+});
+
+const MuiMobileDatePickerStyled = styled(MuiMobileDatePicker)({
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none',
+    borderRadius: 0,
+    borderBottom: '1px solid #666666',
+  },
+  '& .MuiFormLabel-root': {
+    backgroundColor: '#fff',
+    padding: '0 5px',
+  },
+});
+
+const MuiDesktopDatePickerStyled = styled(MuiDesktopDatePicker)({
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none',
+    borderRadius: 0,
+    borderBottom: '1px solid #666666',
+  },
+  '& .MuiFormLabel-root': {
+    backgroundColor: '#fff',
+    padding: '0 5px',
+  },
+});
+
+export const DatePicker = ({
+  label,
+  format = 'DD/MM/YYYY',
+  language = 'pt-br',
+  variant = 'desktop',
+}: DatePickerBaseProps) => {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
+        <DemoContainer components={['TimePicker', 'MobileTimePicker', 'DesktopTimePicker']}>
+          {variant === 'responsive' && <MuiDatePickerStyled label={label} format={format} />}
+          {variant === 'mobile' && <MuiMobileDatePickerStyled label={label} format={format} />}
+          {variant === 'desktop' && <MuiDesktopDatePickerStyled label={label} format={format} />}
+        </DemoContainer>
+      </LocalizationProvider>
+    </ThemeProvider>
+  );
+};

package/src/components/DropDown.tsx

@@ -1,38 +1,31 @@
-import React, { useMemo } from "react";
-import {
-  Menu as MuiDropDown,
-  ThemeProvider,
-  useMediaQuery,
-} from "@mui/material";
-import { DropDownBaseProps } from "../interfaces";
-import { themes } from "../helpers";
-import { styled } from "@mui/material/styles";
-
-const DropDownStyled = styled(MuiDropDown)({});
-
-export const DropDown = ({ open, children, ...props }: DropDownBaseProps) => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = useMemo(
-    () => (prefersDarkMode ? themes.light : themes.dark),
-    [prefersDarkMode]
-  );
-
-  return (
-    <ThemeProvider theme={theme}>
-      <>
-        <DropDownStyled
-          open
-          id="basic-menu"
-          anchorEl={props.anchorEl}
-          onClose={props.onClose}
-          MenuListProps={{
-            "aria-labelledby": "basic-button",
-          }}
-          {...props}
-        >
-          {children}
-        </DropDownStyled>
-      </>
-    </ThemeProvider>
-  );
-};
+import React, { useMemo } from 'react';
+import { Menu as MuiDropDown, ThemeProvider, useMediaQuery } from '@mui/material';
+import { DropDownBaseProps } from '../interfaces';
+import { themes } from '../helpers';
+import { styled } from '@mui/material/styles';
+
+const DropDownStyled = styled(MuiDropDown)({});
+
+export const DropDown = ({ open, children, ...props }: DropDownBaseProps) => {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <>
+        <DropDownStyled
+          open
+          id="basic-menu"
+          anchorEl={props.anchorEl}
+          onClose={props.onClose}
+          MenuListProps={{
+            'aria-labelledby': 'basic-button',
+          }}
+          {...props}
+        >
+          {children}
+        </DropDownStyled>
+      </>
+    </ThemeProvider>
+  );
+};