tycho-components 0.0.16 → 0.0.17-SNAPSHOT-1

package/dist/AppPagination/AppPagination.d.ts

@@ -1,17 +1,9 @@
-import './style.scss';
-type Props = {
-    gotoPage: (p: number) => void;
-    canPreviousPage: boolean;
-    canNextPage: boolean;
-    previousPage: () => void;
-    nextPage: () => void;
-    pageIndex: number;
-    pageOptions: number[];
-    setPageSize: (p: number) => void;
-    pageSize: number;
-    multiple?: number;
-    total: number;
-    hideTotal?: boolean;
+import { PaginationState } from '@tanstack/react-table';
+import './styles.scss';
+type Props<TData> = {
+    totalElements: number;
+    pagination: PaginationState;
+    setPagination: (p: PaginationState) => void;
 };
-export default function AppPagination({ gotoPage, canPreviousPage, canNextPage, previousPage, nextPage, pageIndex, pageOptions, setPageSize, pageSize, multiple, total, hideTotal, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function AppPagination<TData>({ totalElements, pagination, setPagination, }: Props<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/AppPagination/AppPagination.js

@@ -1,68 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { faChevronLeft, faChevronRight, } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import AppSelect from '../AppSelect';
-import './style.scss';
-const minPages = 5;
-export default function AppPagination({ gotoPage, canPreviousPage, canNextPage, previousPage, nextPage, pageIndex, pageOptions, setPageSize, pageSize, multiple, total, hideTotal, }) {
+import { MenuItem, Select } from '@mui/material';
+import { Trans, useTranslation } from 'react-i18next';
+import { IconButton } from 'tycho-storybook';
+import './styles.scss';
+export default function AppPagination({ totalElements, pagination, setPagination, }) {
     const { t } = useTranslation('common');
-    const getPageSizeOptions = () => {
-        const arrayPagination = [];
-        if (multiple) {
-            for (let i = 0; i < 5; i += 1)
-                arrayPagination.push({
-                    label: `${t('pagination.label.showing')} ${(i + 1) * multiple} ${t('pagination.label.results')}`,
-                    value: (i + 1) * multiple,
-                });
-        }
-        return arrayPagination;
+    const numPages = Math.ceil(totalElements / pagination.pageSize);
+    const currentPage = pagination.pageIndex + 1;
+    const getFirstElementNumber = () => pagination.pageIndex * pagination.pageSize + 1;
+    const getLastElementNumber = () => Math.min((pagination.pageIndex + 1) * pagination.pageSize, totalElements);
+    const setPageSize = (p) => {
+        setPagination({ ...pagination, pageSize: p });
     };
-    const alterColorPageSelected = (pageOption) => pageOption === pageIndex ? 'page-item selected' : 'page-item';
-    const [buttons, setButtons] = useState([]);
-    const renderButton = (pageOption) => {
-        if (pageOption === undefined)
-            return null;
-        if (pageOption === -1 || pageOption === -2) {
-            return (_jsx("button", { type: "button", className: "page-ellipsis", children: "..." }, pageOption.valueOf()));
-        }
-        return (_jsx("button", { type: "button", onClick: () => {
-                gotoPage(pageOption);
-            }, className: alterColorPageSelected(pageOption), children: pageOption + 1 }, pageOption.valueOf()));
+    const setPageIndex = (p) => {
+        setPagination({ ...pagination, pageIndex: p });
     };
-    useEffect(() => {
-        if (pageOptions && pageOptions.length > minPages) {
-            const arr = [];
-            // add first and check for need of ...
-            arr.push(0);
-            if (pageIndex > 1)
-                arr.push(-1);
-            if (pageIndex >= pageOptions.length - 3) {
-                for (let i = pageOptions.length - 3; i < pageOptions.length; i += 1) {
-                    if (i !== pageOptions.length - 1) {
-                        arr.push(i);
-                    }
-                }
-            }
-            else {
-                for (let i = 0; i < 3; i += 1) {
-                    if (pageIndex + i !== 0) {
-                        arr.push(pageIndex + i);
-                    }
-                }
-            }
-            // check for need of ... and add last
-            if (pageIndex < pageOptions.length - 3)
-                arr.push(-2);
-            arr.push(pageOptions[pageOptions.length - 1]);
-            setButtons(arr);
-        }
-        else {
-            setButtons(pageOptions.slice());
-        }
-    }, [pageIndex]);
-    return (_jsxs("div", { className: "pagination-container", children: [_jsxs("div", { className: "select", children: [multiple && (_jsx(AppSelect, { options: getPageSizeOptions(), value: getPageSizeOptions().find((p) => p.value === pageSize), emptyValue: false, onChange: (e) => {
-                            setPageSize(e);
-                        } })), !hideTotal && (_jsxs("span", { className: "total", children: [t('pagination.label.total'), ": ", total] }))] }), _jsxs("div", { className: "pages", children: [_jsx("button", { type: "button", onClick: () => previousPage(), disabled: !canPreviousPage, className: "page-item-chevron", children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }), buttons?.map((pageOption, idx) => renderButton(pageOption)), _jsx("button", { type: "button", onClick: () => nextPage(), disabled: !canNextPage, className: "page-item-chevron", children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) })] })] }));
+    return (_jsxs("div", { className: "app-table-pagination", children: [_jsxs("div", { className: "itens-page", children: [_jsx("span", { children: t('table.label.rows-page') }), _jsx(Select, { value: pagination.pageSize, onChange: (e) => setPageSize(e.target.value), children: [10, 25, 50].map((size) => (_jsx(MenuItem, { value: size, children: size }, size))) })] }), _jsx("div", { className: "itens-total", children: _jsx("span", { children: _jsx(Trans, { t: t, i18nKey: "table.label.items", values: {
+                            first: getFirstElementNumber(),
+                            last: getLastElementNumber(),
+                            total: totalElements,
+                        } }) }) }), _jsxs("div", { className: "pages-total", children: [_jsx(Select, { value: currentPage, onChange: (e) => setPageIndex(e.target.value - 1), children: Array.from({ length: numPages }, (_, index) => (_jsx(MenuItem, { value: index + 1, children: index + 1 }, index + 1))) }), _jsx("span", { children: _jsx(Trans, { t: t, i18nKey: "table.label.pages", values: { value: numPages } }) })] }), _jsxs("div", { className: "pages-navigation", children: [_jsx(IconButton, { size: "medium", mode: "tonal", onClick: () => setPageIndex(pagination.pageIndex - 1), disabled: pagination.pageIndex === 0, name: "chevron_backward" }), _jsx(IconButton, { size: "medium", mode: "tonal", onClick: () => setPageIndex(pagination.pageIndex + 1), disabled: pagination.pageIndex >= numPages - 1, name: "chevron_forward" })] })] }));
 }

package/dist/AppPagination/styles.scss

@@ -0,0 +1,65 @@
+.app-table-pagination {
+  display: flex;
+  height: 56px;
+  border-top: none;
+  justify-content: right;
+
+  .itens-page {
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-150) var(--spacing-100);
+
+    > span {
+      margin-right: 16px;
+    }
+  }
+
+  .itens-total {
+    display: flex;
+    align-items: center;
+    margin-right: auto;
+  }
+
+  .pages-total {
+    display: flex;
+    align-items: center;
+    > span {
+      padding: var(--spacing-100);
+    }
+  }
+
+  .pages-navigation {
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-100);
+    gap: 4px;
+  }
+
+  .MuiInputBase-root {
+    border-radius: 0px;
+    font-family: 'Work Sans' !important;
+
+    > .MuiSelect-select {
+      display: flex;
+      align-items: center;
+      padding: var(--spacing-0) var(--spacing-100);
+      height: 40px;
+      border-radius: 0px;
+      background-color: var(--button-secondary-default);
+      @include button-small;
+      color: var(--text-on-color-dark);
+    }
+
+    > .MuiSelect-icon {
+      position: relative;
+      width: 20px;
+      height: 40px;
+      background-color: var(--button-secondary-default);
+      margin-left: 8px;
+    }
+
+    > .MuiOutlinedInput-notchedOutline {
+      display: none;
+    }
+  }
+}

package/dist/AppPlaceholder/style.scss

@@ -12,6 +12,6 @@
     text-align: center;
     background-color: var(--layer-layer-3);
     color: var(--text-placeholder);
-    padding: 32px;
+    padding: 32px 0px;
   }
 }

package/dist/AppTable/AppListTable.d.ts

@@ -0,0 +1,13 @@
+import { ColumnDef } from '@tanstack/react-table';
+import './styles.scss';
+type Props = {
+    columns: ColumnDef<any, any>[];
+    data: any[];
+    className?: string;
+    onClickRow?: (row: any) => void;
+    onMouseEnter?: (row: any) => void;
+    onMouseLeave?: (row: any) => void;
+    hiddenColumns?: string[];
+};
+export default function AppListTable({ columns, data, className, onClickRow, onMouseEnter, onMouseLeave, hiddenColumns, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/AppTable/AppListTable.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Paper, TableBody, TableCell, TableContainer, TableHead, TableRow, } from '@mui/material';
+import { flexRender, getCoreRowModel, useReactTable, } from '@tanstack/react-table';
+import { Table, ThemeProvider } from 'react-bootstrap';
+import { tableTheme } from './AppTableTheme';
+import './styles.scss';
+export default function AppListTable({ columns, data, className = '', onClickRow, onMouseEnter, onMouseLeave, hiddenColumns, }) {
+    const columnVisibility = hiddenColumns?.reduce((acc, key) => {
+        acc[key] = false;
+        return acc;
+    }, {});
+    const table = useReactTable({
+        data,
+        columns,
+        state: {
+            columnVisibility,
+        },
+        getCoreRowModel: getCoreRowModel(),
+    });
+    const handleClickRow = (row) => {
+        if (onClickRow)
+            onClickRow(row.original);
+    };
+    return (_jsx(ThemeProvider, { theme: tableTheme, children: _jsx(Paper, { className: `ds-table ${className}`, children: _jsx(TableContainer, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => (_jsx(TableCell, { style: { width: header.getSize() }, children: header.isPlaceholder
+                                        ? null
+                                        : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row) => (_jsx(TableRow, { onClick: () => handleClickRow(row), onMouseEnter: () => onMouseEnter?.(row), onMouseLeave: () => onMouseLeave?.(row), children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] }) }) }) }));
+}

package/dist/AppTable/AppTable.d.ts

@@ -0,0 +1,16 @@
+import './styles.scss';
+import { AppPage } from './types/AppPage';
+import { AppPageable } from './types/AppPageable';
+type Props = {
+    columns: any;
+    data: AppPage<any>;
+    pageable: AppPageable;
+    setPageable: (p: AppPageable) => void;
+    className?: string;
+    onClickRow?: (row: any, col: any) => void;
+    onMouseEnter?: (row: any) => void;
+    onMouseLeave?: (row: any) => void;
+    hiddenColumns?: string[];
+};
+export default function AppTable({ columns, data, className, onClickRow, onMouseEnter, onMouseLeave, pageable, setPageable, hiddenColumns, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/AppTable/AppTable.js

@@ -0,0 +1,69 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider } from '@emotion/react';
+import Paper from '@mui/material/Paper';
+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 { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
+import { useEffect, useState } from 'react';
+import AppPagination from '../AppPagination';
+import { tableTheme } from './AppTableTheme';
+import './styles.scss';
+import DateUtils from '../functions/DateUtils';
+export default function AppTable({ columns, data, className, onClickRow, onMouseEnter, onMouseLeave, pageable, setPageable, hiddenColumns, }) {
+    const { content, totalPages, totalElements } = data;
+    const [pagination, setPagination] = useState({
+        pageIndex: pageable.page,
+        pageSize: pageable.size,
+    });
+    const columnVisibility = hiddenColumns?.reduce((acc, col) => {
+        acc[col] = false;
+        return acc;
+    }, {});
+    const table = useReactTable({
+        data: content || [],
+        columns,
+        pageCount: totalPages,
+        state: {
+            pagination: { pageIndex: pageable.page, pageSize: pageable.size },
+            sorting: pageable.sort || [],
+            columnVisibility,
+        },
+        manualPagination: true,
+        manualSorting: true,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+    });
+    useEffect(() => {
+        const sort = table.getState().sorting.length > 0
+            ? table.getState().sorting
+            : undefined;
+        if (pageable.size !== pagination.pageSize) {
+            setPagination({ pageSize: pagination.pageSize, pageIndex: 0 });
+            setPageable({
+                size: pagination.pageSize,
+                page: 0,
+                sort,
+                seed: DateUtils.millis(),
+            });
+        }
+        else if (pageable.page !== pagination.pageIndex ||
+            pageable.sort !== sort) {
+            setPageable({
+                size: pagination.pageSize,
+                page: pagination.pageIndex,
+                sort,
+                seed: DateUtils.millis(),
+            });
+        }
+    }, [pagination, table.getState().sorting]);
+    return (_jsx(ThemeProvider, { theme: tableTheme, children: _jsxs(Paper, { className: `ds-table ${className}`, children: [_jsx(TableContainer, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => (_jsxs(TableCell, { onClick: header.column.getToggleSortingHandler(), style: { width: `${header.column.columnDef.size}%` }, children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getIsSorted()
+                                                ? header.column.getIsSorted() === 'desc'
+                                                    ? ' 🔽'
+                                                    : ' 🔼'
+                                                : null] }, header.id))) }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row) => (_jsx(TableRow, { onMouseEnter: () => onMouseEnter && onMouseEnter(row), onMouseLeave: () => onMouseLeave && onMouseLeave(row), children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { onClick: () => onClickRow && onClickRow(row.original, cell.column), className: cell.id.includes('__') ? cell.id.split('__')[1] : '', children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] }) }), _jsx(AppPagination, { totalElements: totalElements, pagination: pagination, setPagination: setPagination })] }) }));
+}

package/dist/AppTable/AppTableTheme.d.ts

@@ -0,0 +1 @@
+export declare const tableTheme: (outerTheme: any) => import("@mui/material/styles").Theme;

package/dist/AppTable/AppTableTheme.js

@@ -0,0 +1,45 @@
+import { createTheme } from '@mui/material/styles';
+export const tableTheme = (outerTheme) => createTheme({
+    ...outerTheme,
+    components: {
+        MuiPaper: {
+            styleOverrides: {
+                root: {
+                    borderRadius: '4px',
+                    overflow: 'hidden',
+                    boxShadow: 'none',
+                },
+            },
+        },
+        MuiTable: {
+            styleOverrides: {
+                root: {
+                    minWidth: 650,
+                    border: 0,
+                },
+            },
+        },
+        MuiTableCell: {
+            styleOverrides: {
+                head: {
+                    backgroundColor: '#F9FAFB',
+                    fontWeight: 'bold',
+                    padding: '4px 0px 4px 12px',
+                    height: '48px',
+                },
+                body: {
+                    cursor: 'pointer',
+                    padding: '4px 0px 4px 12px',
+                },
+            },
+        },
+        MuiTablePagination: {
+            styleOverrides: {
+                root: {
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                },
+            },
+        },
+    },
+});

package/dist/AppTable/AppTableUtils.d.ts

@@ -0,0 +1,8 @@
+declare const AppTableUtils: {
+    limitCharacters: (attr: string, props: any, max: number) => any;
+    addCenteredHeader: (header: string) => import("react/jsx-runtime").JSX.Element;
+    addCenteredCell: (attr: string, props: any) => import("react/jsx-runtime").JSX.Element;
+    addEnumBadge: (attr: string, props: any, append: string, t: any) => import("react/jsx-runtime").JSX.Element;
+    addSimpleCell: (value: any) => import("react/jsx-runtime").JSX.Element;
+};
+export default AppTableUtils;

package/dist/AppTable/AppTableUtils.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const limitCharacters = (attr, props, max) => {
+    const value = props.row.original[attr];
+    if (!value)
+        return '';
+    return value.length > max ? `${value.substr(0, max)}...` : value;
+};
+const addCenteredHeader = (header) => (_jsx("div", { className: "text-center", children: header }));
+const addCenteredCell = (attr, props) => (_jsx("div", { className: "text-center", children: props.row.original[attr] }));
+const addEnumBadge = (attr, props, append, t) => {
+    const value = props[attr].toLowerCase();
+    return (_jsx("span", { className: `badge badge-enum ${attr}-${value}`, children: t(`${append}${value}`) }));
+};
+const addSimpleCell = (value) => {
+    return _jsx("div", { className: "text-center", children: value });
+};
+const AppTableUtils = {
+    limitCharacters,
+    addCenteredHeader,
+    addCenteredCell,
+    addEnumBadge,
+    addSimpleCell,
+};
+export default AppTableUtils;

package/dist/AppTable/index.d.ts

@@ -0,0 +1,2 @@
+import AppTable from './AppTable';
+export default AppTable;

package/dist/AppTable/index.js

@@ -0,0 +1,2 @@
+import AppTable from './AppTable';
+export default AppTable;

package/dist/AppTable/styles.scss

@@ -0,0 +1,41 @@
+.ds-table {
+  .MuiTableRow-root {
+    height: 56px;
+
+    &:hover {
+      background-color: var(--layer-hover-1);
+    }
+
+    &.MuiTableRow-head {
+      height: 48px;
+
+      .MuiTableCell-head {
+        @include tag-medium-2;
+        color: var(--text-primary);
+        font-family: 'Lora';
+      }
+    }
+
+    .MuiTableCell-body {
+      @include label-medium-1;
+      color: var(--text-primary);
+      font-family: 'Work Sans';
+      cursor: pointer;
+
+      &.actions-button {
+        padding: 0px;
+        text-align: center;
+
+        > .ds-button {
+          display: inline-block;
+        }
+      }
+    }
+
+    .text-center {
+      text-align: center;
+      display: flex;
+      justify-content: center;
+    }
+  }
+}

package/dist/AppTable/types/AppPage.d.ts

@@ -0,0 +1,24 @@
+export type AppPage<Type> = {
+    content: Type[];
+    totalElements: number;
+    totalPages: number;
+    number: number;
+    size: number;
+    seed: number;
+};
+export declare const EMPTY_PAGE: {
+    content: never[];
+    totalElements: number;
+    totalPages: number;
+    number: number;
+    size: number;
+    seed: number;
+};
+export declare const EMPTY_GRID_PAGE: {
+    content: never[];
+    totalElements: number;
+    totalPages: number;
+    number: number;
+    size: number;
+    seed: number;
+};

package/dist/AppTable/types/AppPage.js

@@ -0,0 +1,17 @@
+import { EMPTY_GRID_PAGEABLE, EMPTY_PAGEABLE } from './AppPageable';
+export const EMPTY_PAGE = {
+    content: [],
+    totalElements: 0,
+    totalPages: 0,
+    number: 0,
+    size: EMPTY_PAGEABLE.size,
+    seed: 0,
+};
+export const EMPTY_GRID_PAGE = {
+    content: [],
+    totalElements: 0,
+    totalPages: 0,
+    number: 0,
+    size: EMPTY_GRID_PAGEABLE.size,
+    seed: 0,
+};

package/dist/AppTable/types/AppPageable.d.ts

@@ -0,0 +1,21 @@
+import { SortingState } from '@tanstack/react-table';
+export type AppPageable = {
+    page: number;
+    size: number;
+    seed?: number;
+    sort?: SortingState;
+    filter?: any;
+};
+export declare const EMPTY_PAGEABLE: {
+    page: number;
+    size: number;
+    seed: number;
+    filter: {};
+};
+export declare const EMPTY_GRID_PAGEABLE: {
+    page: number;
+    size: number;
+    seed: number;
+    filter: {};
+};
+export declare function convertPageable(pageable: AppPageable): any;

package/dist/AppTable/types/AppPageable.js

@@ -0,0 +1,26 @@
+export const EMPTY_PAGEABLE = {
+    page: 0,
+    size: 10,
+    seed: 1,
+    filter: {},
+};
+export const EMPTY_GRID_PAGEABLE = {
+    page: 0,
+    size: 12,
+    seed: 1,
+    filter: {},
+};
+export function convertPageable(pageable) {
+    const request = {
+        page: pageable.page,
+        size: pageable.size,
+    };
+    if (pageable.sort) {
+        const sort = [];
+        pageable.sort.forEach((item, index) => {
+            sort.push(`${item.id},${item.desc ? 'desc' : 'asc'}`);
+        });
+        request.sort = sort;
+    }
+    return request;
+}

package/dist/configs/Localization.d.ts

@@ -19,6 +19,9 @@ export declare const commonResources: {
             'user.status.visitor': string;
             'update.success': string;
             'internal.server.error': string;
+            'table.label.rows-page': string;
+            'table.label.pages': string;
+            'table.label.items': string;
         };
         participants: {
             'label.title': string;
@@ -150,6 +153,9 @@ export declare const commonResources: {
             'user.status.visitor': string;
             'update.success': string;
             'internal.server.error': string;
+            'table.label.rows-page': string;
+            'table.label.pages': string;
+            'table.label.items': string;
         };
         participants: {
             'label.title': string;

package/dist/configs/localization/CommonTexts.d.ts

@@ -18,6 +18,9 @@ export declare const CommonTexts: {
         'user.status.visitor': string;
         'update.success': string;
         'internal.server.error': string;
+        'table.label.rows-page': string;
+        'table.label.pages': string;
+        'table.label.items': string;
     };
     'pt-BR': {
         'button.confirm': string;
@@ -38,6 +41,9 @@ export declare const CommonTexts: {
         'user.status.visitor': string;
         'update.success': string;
         'internal.server.error': string;
+        'table.label.rows-page': string;
+        'table.label.pages': string;
+        'table.label.items': string;
     };
     it: {
         'button.confirm': string;
@@ -58,5 +64,8 @@ export declare const CommonTexts: {
         'user.status.visitor': string;
         'update.success': string;
         'internal.server.error': string;
+        'table.label.rows-page': string;
+        'table.label.pages': string;
+        'table.label.items': string;
     };
 };

package/dist/configs/localization/CommonTexts.js

@@ -4,7 +4,7 @@ export const CommonTexts = {
         'button.cancel': 'Cancel',
         'button.remove': 'Remove',
         'select.empty': 'Select',
-        'pagination.label.showing': 'Showing',
+        'pagination.label.showing': '',
         'pagination.label.results': 'results per page',
         'pagination.label.total': 'Total',
         'generic.placeholder': 'Type here',
@@ -18,6 +18,9 @@ export const CommonTexts = {
         'user.status.visitor': 'Visitor',
         'update.success': 'saved!',
         'internal.server.error': 'An unexpected error occurred. Contact the administrator.',
+        'table.label.rows-page': 'Items per page',
+        'table.label.pages': 'of {{value}} pages',
+        'table.label.items': '{{first}} - {{last}} of {{total}} items',
     },
     'pt-BR': {
         'button.confirm': 'Confirmar',
@@ -38,6 +41,9 @@ export const CommonTexts = {
         'user.status.visitor': 'Visitante',
         'update.success': 'salvo!',
         'internal.server.error': 'Ocorreu um erro inesperado. Entre em contato com o administrador.',
+        'table.label.rows-page': 'Itens por página',
+        'table.label.pages': 'de {{value}} páginas',
+        'table.label.items': '{{first}} - {{last}} de {{total}} itens',
     },
     it: {
         'button.confirm': 'Conferma',
@@ -58,5 +64,8 @@ export const CommonTexts = {
         'user.status.visitor': 'Visitatore',
         'update.success': 'salvato!',
         'internal.server.error': "Si è verificato un errore inaspettato. Contatta l'amministratore.",
+        'table.label.rows-page': 'Elementi per pagina',
+        'table.label.pages': 'di {{value}} pagine',
+        'table.label.items': '{{first}} - {{last}} di {{total}} elementi',
     },
 };

package/dist/index.d.ts

@@ -10,6 +10,8 @@ export { default as AppPagination } from './AppPagination';
 export { default as AppPicture } from './AppPicture';
 export { default as AppPlaceholder } from './AppPlaceholder';
 export { default as AppSelect } from './AppSelect';
+export { default as AppTable } from './AppTable';
+export { default as AppListTable } from './AppTable';
 export { default as AppToast } from './AppToast';
 export { default as CommentComponent } from './Comments';
 export { default as Header } from './Header';
@@ -33,6 +35,8 @@ export { default as ImageUtils } from './functions/ImageUtils';
 export { default as SecurityUtils } from './functions/SecurityUtils';
 export { default as UsabilityUtils } from './functions/UsabilityUtils';
 export type { AppEditableField } from './AppEditable/AppEditableField';
+export type { AppPage } from './AppTable/types/AppPage';
+export type { AppPageable } from './AppTable/types/AppPageable';
 export type { Comment } from './Comments/types/Comment';
 export type { Corpus } from './configs/Corpus';
 export type { CorpusImage } from './configs/CorpusImage';
@@ -44,3 +48,4 @@ export type { KeyboardLayout } from './VirtualKeyboard/KeyboardCustomLayout';
 export type { UploadedFile } from './AppDropzone/UploadedFile';
 export type { User } from './configs/User';
 export type { UserStatus } from './configs/User';
+export { convertPageable, EMPTY_PAGEABLE, EMPTY_GRID_PAGEABLE, } from './AppTable/types/AppPageable';

package/dist/index.js

@@ -10,6 +10,8 @@ export { default as AppPagination } from './AppPagination';
 export { default as AppPicture } from './AppPicture';
 export { default as AppPlaceholder } from './AppPlaceholder';
 export { default as AppSelect } from './AppSelect';
+export { default as AppTable } from './AppTable';
+export { default as AppListTable } from './AppTable';
 export { default as AppToast } from './AppToast';
 export { default as CommentComponent } from './Comments';
 export { default as Header } from './Header';
@@ -32,3 +34,4 @@ export { default as FormUtils } from './functions/FormUtils';
 export { default as ImageUtils } from './functions/ImageUtils';
 export { default as SecurityUtils } from './functions/SecurityUtils';
 export { default as UsabilityUtils } from './functions/UsabilityUtils';
+export { convertPageable, EMPTY_PAGEABLE, EMPTY_GRID_PAGEABLE, } from './AppTable/types/AppPageable';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.0.16",
+  "version": "0.0.17-SNAPSHOT-1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -20,6 +20,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@tanstack/react-table": "^8.20.6",
     "axios": "^1.7.7",
     "classnames": "^2.5.1",
     "date-fns": "^2.29.1",
@@ -48,7 +49,7 @@
     "react-hook-form": "^7.45.2",
     "react-i18next": "^13.0.2",
     "react-router-dom": "^6.14.2",
-    "tycho-storybook": "0.1.7",
+    "tycho-storybook": "0.1.7-r2",
     "yup": "^1.2.0"
   },
   "devDependencies": {

package/dist/AppPagination/style.scss

@@ -1,59 +0,0 @@
-.pagination-container {
-  display: flex;
-  align-items: center;
-
-  > .pages {
-    display: flex;
-    margin-left: auto;
-
-    .page-item,
-    .page-item-chevron,
-    .page-ellipsis {
-      height: 30px;
-      width: 35px;
-      margin-left: 4px;
-      border-radius: var(--radius-100);
-      background-color: var(--background-default);
-    }
-
-    .page-item-chevron {
-      border: none;
-    }
-
-    .page-ellipsis {
-      cursor: default;
-    }
-
-    .page-item,
-    .page-ellipsis {
-      @include button-small;
-      border: 1px solid var(--border-subtle-3);
-      background-color: var(--button-secondary-default);
-      color: var(--text-secondary);
-      align-items: center;
-
-      &.selected {
-        background: var(--button-primary-default);
-        color: var(--text-on-color-light);
-      }
-
-      &:hover {
-        background: var(--button-secondary-hover);
-      }
-    }
-  }
-
-  .select {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-
-    .form-select {
-      width: auto;
-    }
-
-    .total {
-      @include label-medium-2;
-    }
-  }
-}