norma-library 0.5.80 → 0.5.121

package/src/components/DataGrid/shared.ts

@@ -1,154 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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 TableCellBodyStyled: StyledComponent<TableCellProps> = styled(TableCell)(() => ({
-  [`&.is-interactive`]: {
-    cursor: 'pointer',
-    [`&:hover`]: {
-      opacity: .75
-    }
-  }
-}));
-
-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,
-  textAlign: "left"
-});
-
-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,
-  TableCellBodyStyled
-};

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

@@ -1,86 +0,0 @@
-.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

@@ -1,16 +0,0 @@
-.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

@@ -1,107 +0,0 @@
-@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/interfaces/DataGrid.ts

@@ -1,47 +0,0 @@
-import { MuiDataGridBaseProps } from '@/types';
-import { SxProps, Theme } from '@mui/material';
-import { OverridableStringUnion } from '@mui/types';
-
-export interface DataGridPropsVariantOverrides {}
-
-export interface SortingProps {
-  sort?: string;
-  active?: boolean;
-}
-
-export interface DataGridBaseProps extends MuiDataGridBaseProps {
-  data: { dataSource: any; columns: any }[];
-  sx?: SxProps<Theme>;
-  onRowClick?: React.MouseEventHandler;
-  variant?: OverridableStringUnion<
-    'standard' | 'standard-divider' | 'standard-selectable' | 'quiet' | 'quiet-divider' | 'quiet-selectable',
-    DataGridPropsVariantOverrides
-  >;
-  width?: string;
-  height?: string;
-}
-
-export interface DataSourceItem {
-  [key: string]: string | number;
-}
-
-export interface DropdownFilterProps {
-  onSelectAll: boolean;
-  format?: string;
-  data: (string | number)[];
-  onFilter: (item: string) => void;
-  onOrder: (item: string) => void;
-  onChecketAll: (item: boolean) => void;
-  onSelected: (item: (string | number)[]) => void;
-  itemsSelected: (string | number)[];
-  onFilterSelected: () => void;
-}
-
-export interface NumberFilterProps {
-  onClick: (selectedOption: string) => void;
-}
-
-export interface PaginationProps {
-  totalItems: number;
-  pageSize: number;
-}

package/src/stories/DataGrid.stories.tsx

@@ -1,31 +0,0 @@
-import React, {useState} from 'react';
-
-import type { Meta } from '@storybook/react';
-import { Button, DataGrid } from '../components';
-import dataSource from '../components/DataGrid/allData.json';
-import data from '../sample-data.json';
-import data2 from '../sample-data-2.json';
-
-const meta = {
-  title: 'Display/DataGrid',
-  component: DataGrid,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {},
-} satisfies Meta<typeof DataGrid>;
-
-export default meta;
-
-export const DataGridBasic = () => {
-  const [currentMock, setCurrentMock] = useState(0)
-  return (
-    <>
-      {/* <Button label='change mock' onClick={() => { currentMock === 0 ? setCurrentMock(1) : setCurrentMock(0) }}/> */}
-      <DataGrid data={!!currentMock ? data : data2} onRowClick={() => console.log("onRowClick")} />
-    </>
-  );
-};
-
-DataGridBasic.storyName = 'DataGrid Basic';