norma-library 0.5.3 → 0.5.9

package/src/components/UncontrolledTable/index.tsx

@@ -0,0 +1,291 @@
+import React, { useState, useMemo } 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 { Pagination, Header, TBody } from './components';
+import { UncontrolledTableProps } from './interface';
+
+const UncontrolledTable = (props: UncontrolledTableProps) => {
+  const {
+    data,
+    columns,
+    onClick,
+    onMouseOver,
+    onMouseOut,
+    showTotalResults,
+    showSettings,
+    rowCount,
+    onChangePage,
+    pagination,
+    showClearFields,
+    onClearFieldsClick,
+    onFilterClick,
+    onSortClick,
+  } = 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 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 reactTableConfig = useMemo(() => {
+    const config: any = {
+      data,
+      columns,
+      filterFns: {
+        customFilterText: customFilterText,
+      },
+      state: {
+        sorting: sorting,
+        columnFilters: filterByColumn,
+      },
+      rowCount: rowCount || 10,
+      getCoreRowModel: getCoreRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      onSortingChange: setSorting,
+      onColumnFiltersChange: setFilterByColumn,
+    };
+    config.rowCount = rowCount || 10;
+
+    if (!pagination) {
+      config.getPaginationRowModel = getPaginationRowModel();
+    } else {
+      config.state.pagination = pagination;
+      config.manualPagination = true;
+      config.pageCount = pagination.totalPages;
+    }
+    return config;
+  }, [data, sorting, filterByColumn, columns, pagination]);
+
+  const table = useReactTable(reactTableConfig);
+
+  return (
+    <S.Container>
+      <Header
+        table={table}
+        globalFilters={globalFilters}
+        orderSmallest={orderSmallest}
+        orderLargest={orderLargest}
+        showTotalResults={showTotalResults}
+        showSettings={showSettings}
+        setGlobalFilters={setGlobalFilters}
+        setOrderLargest={setOrderLargest}
+        setOrderSmallest={setOrderSmallest}
+        showClearFiels={showClearFields}
+        onClearFieldsClick={() => onClearFieldsClick && onClearFieldsClick()}
+      />
+      <S.Content>
+        <S.Table>
+          <thead>
+            {table.getHeaderGroups().map((headerGroup: any) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header: any) => (
+                  <th key={header.id}>
+                    <div>
+                      <S.ColumnContent
+                        onClick={() => {
+                          setOpenFilterDialog(header.column.columnDef.accessorKey);
+                        }}
+                      >
+                        <S.TextColumn>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(header.column.columnDef.header, header.getContext())}
+                        </S.TextColumn>
+                        <S.IconFilterDialog>
+                          <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('')}></S.backgroundDialog>
+                          <S.FilterDialog>
+                            <S.ListFilterDialog>
+                              <S.OptionFilterDialog
+                                style={{
+                                  background: orderSmallest ? 'rgba(0, 0, 0, 0.04)' : '',
+                                }}
+                                onClick={() => onSortClick && onSortClick(header.column.columnDef.accessorKey, 'asc')}
+                              >
+                                <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>Menor primeiro</p>
+                              </S.OptionFilterDialog>
+                              <S.OptionFilterDialog
+                                style={{
+                                  background: orderLargest ? 'rgba(0, 0, 0, 0.04)' : '',
+                                }}
+                                onClick={() => onSortClick && onSortClick(header.column.columnDef.accessorKey, 'desc')}
+                              >
+                                <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>Maior primeiro</p>
+                              </S.OptionFilterDialog>
+                              {!header?.column?.columnDef?.nofilter && (
+                                <S.OptionFilterDialog onClick={() => onFilterClick && onFilterClick(header.column.columnDef.accessorKey)}>
+                                  <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>Filtrar por</p>
+                                </S.OptionFilterDialog>
+                              )}
+                            </S.ListFilterDialog>
+                          </S.FilterDialog>
+                        </>
+                      ) : null}
+                    </div>
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <TBody table={table} onClick={onClick} onMouseOver={onMouseOver} onMouseOut={onMouseOut} />
+        </S.Table>
+      </S.Content>
+      <Pagination table={table} onChangePage={onChangePage} />
+    </S.Container>
+  );
+};
+
+export default UncontrolledTable;

package/src/components/UncontrolledTable/interface.ts

@@ -0,0 +1,27 @@
+import { ColumnDef } from '@tanstack/react-table';
+
+export interface UncontrolledTableProps {
+  data: any;
+  columns: ColumnDef<ColumnsTable>[];
+  onClick: any;
+  onMouseOver: any;
+  onMouseOut: any;
+  showTotalResults: boolean;
+  showSettings: boolean;
+  rowCount: number;
+  pagination?: { pageIndex: number; pageSize: number; totalPages: number };
+  showClearFields?: boolean;
+  onChangePage?: (page: number) => void;
+  onClearFieldsClick?: () => void;
+  onFilterClick?: (column: string) => void;
+  onSortClick?: (column: string, direction: string) => void;
+}
+
+export interface ColumnsTable {
+  header: string;
+  accessorKey: string;
+  type: string;
+  enableColumnFilter: boolean;
+  filterFn: string;
+  nofilter?: boolean;
+}

package/src/components/UncontrolledTable/styles.tsx

@@ -0,0 +1,119 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 100%;
+  background: #fff;
+  box-shadow: 0px 2px 6px #0000000A;
+  padding: 24px 0;
+`
+
+export const Content = styled.div<any>`
+  min-height: ${props => props.minHeight ? props.minHeight : 'auto'};
+`
+
+export const Table = 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;
+  cursor: pointer;
+`
+
+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/index.ts

@@ -4,8 +4,8 @@ export * from './Badge';
 export * from './Button';
 export * from './Card';
 export * from './ChatMessage';
+export * from './ChatMessageBalloon/ChatMessageBalloon';
 export * from './CheckBox';
-export * from './DataGrid';
 export * from './DatePicker';
 export * from './DropDown';
 export * from './IconButton';
@@ -18,6 +18,7 @@ export * from './RangerSlider';
 export * from './Select';
 export * from './Tabs';
 export * from './Tag';
+export * from './Table';
 export * from './TextField';
 export * from './TimeLine';
 export * from './TimePicker';

package/src/helpers/colors.ts

@@ -6,7 +6,6 @@ export const getPalette = () => {
     primaryLight: '#FFDB9F',
     primaryMedium: '#FFA84C',
     primaryDark: '#B74608',
-
     inherit: 'rgb(102, 102, 102)',
     secondary: 'rgb(67, 187, 242)',
     error: 'rgb(214, 54, 67)',

package/src/index.css

@@ -1,2 +0,0 @@
-@import "styles/globals.css";
-@import "styles/custom.css";

package/src/index.ts

@@ -14,12 +14,27 @@ import { Tabs } from './components/Tabs';
 import { Tag } from './components/Tag';
 import { TextField } from './components/TextField';
 import { DatePicker } from './components/DatePicker';
+import { ChatMessage, ChatMessageBalloon } from './components';
+import { NormaProvider } from './providers/NormaProvider';
 import { themes, getPalette } from './helpers';
+import DateInput from './components/DateInput';
+import Box from './components/Box'
+import Breadcrumb from './components/Breadcrumb';
+import SelectInput from './components/SelectInput';
+import MultiSelectInput from './components/MultiSelectInput';
+import { Title, Text } from './components/Typography'
+import TextInput from './components/TextInput';
+import Table from './components/Table';
+import UncontrolledTable from './components/UncontrolledTable';
+
+
 
 export {
   Accordion,
   Button,
   Card,
+  ChatMessage,
+  ChatMessageBalloon,
   CheckBox,
   DatePicker,
   getPalette,
@@ -34,5 +49,16 @@ export {
   Tabs,
   Tag,
   TextField,
+  NormaProvider,
   themes,
+  DateInput,
+  Box,
+  Breadcrumb,
+  SelectInput,
+  MultiSelectInput,
+  Text,
+  Title,
+  TextInput,
+  Table,
+  UncontrolledTable
 };

package/src/interfaces/ChatMessageBalloon.ts

@@ -0,0 +1,17 @@
+import { ReactNode, MouseEventHandler } from "react";
+
+export interface ChatMessageBalloonProps {
+  label: string;
+  description: ReactNode;
+  date: string;
+  direction: "I" | "O";
+  onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+  onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+  onRowMouseEnter?: MouseEventHandler<HTMLDivElement>;
+  onRowMouseLeave?: MouseEventHandler<HTMLDivElement>;
+  highlight?: boolean;
+  attachments?: string[];
+  children?:ReactNode;
+  bottomChildren?:ReactNode;
+  className?:string;
+}

package/src/interfaces/Modal.ts

@@ -1,6 +1,6 @@
 import { SxProps } from '@mui/material';
 import { Theme } from '@emotion/react';
-import { MuiModalBaseProps, OnAction } from '@/types';
+import { MuiModalBaseProps, MuiPaperBaseProps, OnAction } from '@/types';
 
 export interface ModalBaseProps extends MuiModalBaseProps {
   sx?: SxProps<Theme>;
@@ -12,4 +12,5 @@ export interface ModalBaseProps extends MuiModalBaseProps {
   full?: boolean;
   title?: string;
   id?: string;
+  paperProps?: MuiPaperBaseProps;
 }

package/src/interfaces/Select.ts

@@ -8,7 +8,7 @@ export interface SelectBaseProps extends MuiSelectBaseProps {
   label?: React.ReactNode;
   input?: React.ReactElement<any, any>;
   variant?: TextFieldVariant;
-  value?: string;
+  value?: string  | string[];
   open?: boolean;
   onOpen?: (event: React.SyntheticEvent) => void;
   onClose?: (event: React.SyntheticEvent) => void;

package/src/interfaces/TextField.ts

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 
 import { TextFieldPropsColorOverrides, TextFieldPropsSizeOverrides } from '@mui/material/TextField';
-import { FormHelperTextProps, InputBaseProps, InputLabelProps, OutlinedInputProps, SelectProps } from '@mui/material';
+import { FormHelperTextProps, InputBaseProps, InputLabelProps, OutlinedInputProps, SelectProps, SxProps, Theme } from '@mui/material';
 import { InputProps as StandardInputProps } from '@mui/material/Input';
 import { OverridableStringUnion } from '@mui/types';
 import { TextField } from '@mui/material';
@@ -38,6 +38,7 @@ export interface TextFieldBaseProps extends MuiTextFieldBaseProps {
   FormHelperTextProps?: Partial<FormHelperTextProps>;
   color?: OverridableStringUnion<TextFieldColorVariant, TextFieldPropsColorOverrides>;
   value?: unknown;
+  sx?: SxProps<Theme> | undefined
 }
 
 export type TextFieldType = keyof typeof TextField;

package/src/interfaces/index.ts

@@ -5,7 +5,6 @@ export * from './Button';
 export * from './Card';
 export * from './ChatMessage';
 export * from './CheckBox';
-export * from './DataGrid';
 export * from './DatePicker';
 export * from './DropDown';
 export * from './IconButton';
@@ -21,3 +20,4 @@ export * from './Tag';
 export * from './TextField';
 export * from './TimeLine';
 export * from './TimePicker';
+export * from './ChatMessageBalloon';

package/src/providers/NormaProvider.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ThemeProvider } from '@mui/material';
+import { ThemeProviderProps } from "@mui/material/styles/ThemeProvider";
+
+export const NormaProvider = (props:ThemeProviderProps) => {
+  const { theme, children } = props;
+  
+  return (
+    <ThemeProvider theme={theme}>
+      {children}
+    </ThemeProvider>
+  );
+};