norma-library 0.5.80 → 0.5.122

package/src/components/UncontrolledTable/index.tsx

@@ -0,0 +1,225 @@
+import React, { useState, useMemo } from 'react';
+import * as S from './styles';
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+  ColumnFiltersState,
+  TableOptions,
+} from '@tanstack/react-table';
+
+import { Pagination, Header, TBody } from './components';
+import { UncontrolledTableProps } from './interface';
+
+const UncontrolledTable = (props: UncontrolledTableProps) => {
+  const {
+    data,
+    columns,
+    onClick,
+    onMouseOver,
+    onMouseOut,
+    showTotalResults,
+    showSettings,
+    onChangePage,
+    pagination,
+    totalPages,
+    showClearFields,
+    onClearFieldsClick,
+    onFilterClick,
+    onSortClick,
+    customTotalResults,
+    labels,
+  } = 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 reactTableConfig = useMemo(() => {
+    const config: TableOptions<unknown> = {
+      columns: columns as any,
+      data,
+      state: {
+        sorting: sorting,
+        columnFilters: filterByColumn,
+        pagination: pagination,
+      },
+      rowCount: totalPages,
+      getCoreRowModel: getCoreRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      onSortingChange: setSorting,
+      onColumnFiltersChange: setFilterByColumn,
+      manualPagination: true,
+    };
+
+    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}
+        customTotalResults={customTotalResults}
+        clearLabel={labels?.clearFilter}
+        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={() => {
+                          if (!header?.column?.columnDef?.disableMenu)
+                            setOpenFilterDialog(header.column.columnDef.accessorKey);
+                        }}
+                      >
+                        <S.TextColumn $alone={header?.column?.columnDef?.disableMenu}>
+                          {!header.isPlaceholder && flexRender(header.column.columnDef.header, header.getContext())}
+                        </S.TextColumn>
+                        {!header?.column?.columnDef?.disableMenu && (
+                          <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');
+                                  setOpenFilterDialog('');
+                                }}
+                              >
+                                <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>{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('');
+                                }}
+                              >
+                                <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>{labels?.orderDesc || 'Maior primeiro'}</p>
+                              </S.OptionFilterDialog>
+                              {!header?.column?.columnDef?.nofilter && (
+                                <S.OptionFilterDialog
+                                  onClick={() => {
+                                    onFilterClick && onFilterClick(header.column.columnDef.accessorKey);
+                                    setOpenFilterDialog('');
+                                  }}
+                                >
+                                  <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>{labels?.filter || 'Filtrar por'}</p>
+                                </S.OptionFilterDialog>
+                              )}
+                            </S.ListFilterDialog>
+                          </S.FilterDialog>
+                        </>
+                      )}
+                    </div>
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <TBody table={table} onClick={onClick} onMouseOver={onMouseOver} onMouseOut={onMouseOut} />
+        </S.Table>
+      </S.Content>
+      <Pagination
+        pagination={pagination}
+        count={totalPages}
+        onChangePage={(page: number) => onChangePage({ ...pagination, pageIndex: page })}
+      />
+    </S.Container>
+  );
+};
+
+export default UncontrolledTable;

package/src/components/UncontrolledTable/interface.ts

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

package/src/components/UncontrolledTable/styles.tsx

@@ -0,0 +1,120 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  width: 100%;
+  background: #fff;
+`;
+
+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<any>`
+  color: #666666;
+  font-size: 14px;
+  width: ${props => (props.$alone ? '100%' : 'auto')};
+  text-align: ${props => (props.$alone ? 'center' : 'initial')};
+`;
+
+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: 10px 0;
+  margin: 6px 0px 0 0;
+  position: absolute;
+  width: max-content;
+  background: #fff;
+  box-shadow: 0px 3px 6px #00000029;
+  border: 1px solid #e0e0e0;
+  z-index: 99;
+`;
+
+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 15px;
+  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

@@ -1,24 +1,24 @@
-export * from './Accordion';
-export * from './Avatar';
-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';
-export * from './Icons';
-export * from './Modal';
-export * from './Paper';
-export * from './ProgressBar';
-export * from './RadioGroup';
-export * from './RangerSlider';
-export * from './Select';
-export * from './Tabs';
-export * from './Tag';
-export * from './TextField';
-export * from './TimeLine';
-export * from './TimePicker';
+export * from './Accordion';
+export * from './Avatar';
+export * from './Badge';
+export * from './Button';
+export * from './Card';
+export * from './ChatMessage';
+export * from './ChatMessageBalloon/ChatMessageBalloon';
+export * from './CheckBox';
+export * from './DatePicker';
+export * from './DropDown';
+export * from './IconButton';
+export * from './Icons';
+export * from './Modal';
+export * from './Paper';
+export * from './ProgressBar';
+export * from './RadioGroup';
+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/alignments.ts

@@ -1,14 +1,14 @@
-function getAlign(border: string) {
-  switch (border) {
-    case 'left':
-      return 'text-start justify-items-start';
-    case 'center':
-      return 'justify-items-center';
-    case 'right':
-      return 'text-end justify-items-end';
-    default:
-      return 'text-center inline-flex';
-  }
-}
-
-export { getAlign };
+function getAlign(border: string) {
+  switch (border) {
+    case 'left':
+      return 'text-start justify-items-start';
+    case 'center':
+      return 'justify-items-center';
+    case 'right':
+      return 'text-end justify-items-end';
+    default:
+      return 'text-center inline-flex';
+  }
+}
+
+export { getAlign };

package/src/helpers/borders.ts

@@ -1,18 +1,18 @@
-function getBorderSize(size: number) {
-  switch (size.toString()) {
-    case '0':
-      return 'border-0';
-    case '1':
-      return 'border border-[0.05rem]';
-    case '2':
-      return 'border border-2';
-    case '4':
-      return 'border border-4';
-    case '8':
-      return 'border border-8';
-    default:
-      return 'border border-2';
-  }
-}
-
-export { getBorderSize };
+function getBorderSize(size: number) {
+  switch (size.toString()) {
+    case '0':
+      return 'border-0';
+    case '1':
+      return 'border border-[0.05rem]';
+    case '2':
+      return 'border border-2';
+    case '4':
+      return 'border border-4';
+    case '8':
+      return 'border border-8';
+    default:
+      return 'border border-2';
+  }
+}
+
+export { getBorderSize };