@redacto.io/consent-sdk-react 10.0.0-beta.11 → 10.0.0-beta.12

package/src/RedactoPrivacyCenter/components/GrievanceTable.tsx

@@ -1,174 +0,0 @@
-import React, { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { flexRender } from '@tanstack/react-table';
-import { PCTable, PCLoader, PCEmpty } from '../ui';
-import { pcStyles } from '../styles/pcStyles';
-import type { Table as ReactTableType } from '@tanstack/react-table';
-import type { TableColumnMeta } from './types';
-
-const getVar = (varName: string): string => `var(${varName})`;
-
-export type GrievanceTableProps<T extends Record<string, any>> = {
-  table: ReactTableType<T>;
-  isLoading?: boolean;
-  className?: string;
-  pageIndex: number;
-  pageSize: number;
-};
-
-export default function GrievanceTable<TData extends Record<string, any>>({
-  table,
-  isLoading = false,
-  className,
-  pageIndex,
-  pageSize,
-}: GrievanceTableProps<TData>) {
-  const { t } = useTranslation();
-
-  if (!table) return null;
-
-  // Get all rows and manually paginate
-  // Get rows directly from table - this will update when data changes
-  const rowModel = table.getRowModel();
-  const allRows = rowModel.rows;
-  
-  // Manually paginate rows from the current row model
-  const paginatedRows = useMemo(() => {
-    const start = pageIndex * pageSize;
-    const end = start + pageSize;
-    return allRows.slice(start, end);
-  }, [allRows, pageIndex, pageSize]);
-
-  return (
-    <div
-      className={className}
-      style={{
-        ...pcStyles.wFull,
-        maxWidth: '100%',
-        ...pcStyles.overflowXAuto,
-        borderRadius: getVar('--pc-border-radius-md'),
-        border: `1px solid ${getVar('--pc-border-color')}`,
-        backgroundColor: getVar('--pc-bg-primary'),
-        transition: 'background-color 0.3s ease, border-color 0.3s ease',
-      }}
-    >
-      <PCTable
-        variant="modern"
-        style={{ 
-          minWidth: '100%',
-          backgroundColor: getVar('--pc-bg-primary'),
-        }}
-      >
-        <PCTable.Header>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <PCTable.Row key={headerGroup.id}>
-              {headerGroup.headers.map((header) => (
-                <PCTable.Head
-                  key={header.id}
-                  style={{
-                    padding: getVar('--pc-spacing-md'),
-                    fontSize: pcStyles.textSm.fontSize,
-                    fontWeight: pcStyles.fontWeightSemibold.fontWeight,
-                    color: getVar('--pc-text-primary'),
-                    backgroundColor: getVar('--pc-bg-secondary'),
-                    borderBottom: `1px solid ${getVar('--pc-border-color')}`,
-                    textAlign: (header.column.columnDef.meta as TableColumnMeta | undefined)?.align || 'left',
-                    whiteSpace: 'nowrap',
-                  }}
-                >
-                  {header.isPlaceholder
-                    ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                </PCTable.Head>
-              ))}
-            </PCTable.Row>
-          ))}
-        </PCTable.Header>
-
-        <PCTable.Body>
-          {isLoading ? (
-            <PCTable.Row>
-              <PCTable.Cell
-                colSpan={table.getAllColumns().length}
-                style={{
-                  padding: getVar('--pc-spacing-2xl'),
-                  textAlign: 'center',
-                }}
-              >
-                <PCLoader variant="spinner" size="lg" />
-              </PCTable.Cell>
-            </PCTable.Row>
-          ) : paginatedRows.length === 0 ? (
-            <PCTable.Row>
-              <PCTable.Cell
-                colSpan={table.getAllColumns().length}
-                style={{
-                  padding: getVar('--pc-spacing-2xl'),
-                  textAlign: 'center',
-                }}
-              >
-                <PCEmpty
-                  icon={
-                    <svg 
-                      viewBox="0 0 24 24" 
-                      fill="currentColor" 
-                      style={{ 
-                        width: '64px', 
-                        height: '64px',
-                        color: getVar('--pc-text-tertiary'),
-                        transition: 'color 0.3s ease',
-                      }}
-                    >
-                      <path d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2zM3 16a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z" />
-                    </svg>
-                  }
-                  title={t('noData')}
-                />
-              </PCTable.Cell>
-            </PCTable.Row>
-          ) : (
-            paginatedRows.map((row) => {
-              const meta = (table.options.meta as any) || {};
-              const onRowClick = meta.onRowClick;
-              const handleRowClick = onRowClick
-                ? (e: React.MouseEvent) => {
-                    e.preventDefault();
-                    onRowClick(row.original);
-                  }
-                : undefined;
-
-              return (
-                <PCTable.Row
-                  key={row.id}
-                  style={onRowClick ? { cursor: 'pointer' } : {}}
-                  onClick={handleRowClick}
-                >
-                  {row.getVisibleCells().map((cell) => (
-                    <PCTable.Cell
-                      key={cell.id}
-                      style={{
-                        padding: getVar('--pc-spacing-md'),
-                        fontSize: pcStyles.textSm.fontSize,
-                        color: getVar('--pc-text-primary'),
-                        borderBottom: `1px solid ${getVar('--pc-border-color')}`,
-                        textAlign: (cell.column.columnDef.meta as TableColumnMeta | undefined)?.align || 'left',
-                      }}
-                    >
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
-                    </PCTable.Cell>
-                  ))}
-                </PCTable.Row>
-              );
-            })
-          )}
-        </PCTable.Body>
-      </PCTable>
-    </div>
-  );
-}

package/src/RedactoPrivacyCenter/components/GrievanceTablePagination.tsx

@@ -1,337 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { type Table as ReactTableType } from '@tanstack/react-table';
-import {
-  PiCaretDoubleLeftBold,
-  PiCaretDoubleRightBold,
-  PiCaretLeftBold,
-  PiCaretRightBold,
-} from 'react-icons/pi';
-import { PCActionIcon, PCSelect, PCText } from '../ui';
-import { pcStyles } from '../styles/pcStyles';
-
-const getVar = (varName: string): string => `var(${varName})`;
-
-const pageSizeOptions = [
-  { value: 5, label: '5' },
-  { value: 10, label: '10' },
-  { value: 15, label: '15' },
-  { value: 20, label: '20' },
-  { value: 25, label: '25' },
-];
-
-export type GrievanceTablePaginationProps<TData extends Record<string, any>> = {
-  table: ReactTableType<TData>;
-  showPageSize?: boolean;
-  className?: string;
-  onPageIndexChange?: (pageIndex: number) => void;
-  onPageSizeChange?: (pageSize: number) => void;
-};
-
-export default function GrievanceTablePagination<
-  TData extends Record<string, any>,
->({
-  table,
-  showPageSize = true,
-  className,
-  onPageIndexChange,
-  onPageSizeChange,
-}: GrievanceTablePaginationProps<TData>) {
-  const { t } = useTranslation();
-  const paginationState = table.getState().pagination;
-  const currentPageSize = paginationState.pageSize;
-  const currentPageIndex = paginationState.pageIndex;
-  const currentPage = currentPageIndex + 1;
-  
-  // Get total rows from filtered row model (all data after filtering)
-  const totalRows = table.getFilteredRowModel().rows.length;
-  const totalPages = Math.ceil(totalRows / currentPageSize) || 0;
-  
-  const currentPageSizeOption = pageSizeOptions.find(opt => opt.value === currentPageSize) || pageSizeOptions[1];
-
-  // Don't render if there's no data
-  if (totalRows === 0 && totalPages === 0) {
-    return null;
-  }
-
-  const canPreviousPage = currentPageIndex > 0;
-  const canNextPage = currentPageIndex < totalPages - 1;
-
-  const handlePageChange = (newPageIndex: number) => {
-    if (newPageIndex >= 0 && newPageIndex < totalPages) {
-      // Update via callback if provided, otherwise use table method
-      if (onPageIndexChange) {
-        onPageIndexChange(newPageIndex);
-      } else {
-        table.setPageIndex(newPageIndex);
-      }
-    }
-  };
-
-  const handlePageSizeChange = (newSize: number) => {
-    // Update via callback if provided, otherwise use table method
-    if (onPageSizeChange) {
-      onPageSizeChange(newSize);
-      // Reset to first page when page size changes
-      if (onPageIndexChange) {
-        onPageIndexChange(0);
-      } else {
-        table.setPageIndex(0);
-      }
-    } else {
-      table.setPageSize(newSize);
-      table.setPageIndex(0);
-    }
-  };
-
-  return (
-    <div
-      className={className}
-      style={{
-        ...pcStyles.flex,
-        ...pcStyles.flexCol,
-        ...pcStyles.itemsCenter,
-        ...pcStyles.justifyBetween,
-        width: '100%',
-        gap: getVar('--pc-spacing-md'),
-        padding: `${getVar('--pc-spacing-md')} 0`,
-      }}
-    >
-      {/* Desktop Layout */}
-      <div style={{
-        ...pcStyles.flex,
-        ...pcStyles.itemsCenter,
-        ...pcStyles.justifyBetween,
-        width: '100%',
-        flexWrap: 'wrap',
-        gap: getVar('--pc-spacing-md'),
-      }} className="pc-hidden-xs pc-flex-sm">
-        {/* Left Group: Rows per page */}
-        {showPageSize && (
-          <div style={{
-            ...pcStyles.flex,
-            ...pcStyles.itemsCenter,
-            ...pcStyles.gapSm,
-            flexShrink: 0,
-          }}>
-            <PCText 
-              size="sm" 
-              color="secondary"
-              style={{
-                whiteSpace: 'nowrap',
-                flexShrink: 0,
-              }}
-            >
-              {t('rowsPerPage')}
-            </PCText>
-            <PCSelect
-              size="sm"
-              options={pageSizeOptions}
-              value={currentPageSizeOption}
-              onChange={(v) => {
-                if (v) {
-                  handlePageSizeChange(Number(v.value));
-                }
-              }}
-              style={{ 
-                width: '60px',
-                minWidth: '60px',
-                flexShrink: 0,
-              }}
-            />
-          </div>
-        )}
-
-        {/* Right Group: Page info + Navigation */}
-        <div style={{
-          ...pcStyles.flex,
-          ...pcStyles.itemsCenter,
-          ...pcStyles.gapSm,
-          flexShrink: 0,
-        }}>
-          <PCText size="sm" color="secondary" style={{ whiteSpace: 'nowrap' }}>
-            {t('pageOf', { current: currentPage, total: totalPages || 1 })}
-          </PCText>
-
-          <div style={{
-            ...pcStyles.flex,
-            ...pcStyles.itemsCenter,
-            ...pcStyles.gapXs,
-          }}>
-            <PCActionIcon
-              size="sm"
-              variant="outline"
-              aria-label={t('goToFirstPage')}
-              onClick={() => handlePageChange(0)}
-              disabled={!canPreviousPage}
-              style={{
-                opacity: canPreviousPage ? 1 : 0.5,
-                cursor: canPreviousPage ? 'pointer' : 'not-allowed',
-              }}
-            >
-              <PiCaretDoubleLeftBold size={16} />
-            </PCActionIcon>
-
-            <PCActionIcon
-              size="sm"
-              variant="outline"
-              aria-label={t('goToPreviousPage')}
-              onClick={() => handlePageChange(currentPageIndex - 1)}
-              disabled={!canPreviousPage}
-              style={{
-                opacity: canPreviousPage ? 1 : 0.5,
-                cursor: canPreviousPage ? 'pointer' : 'not-allowed',
-              }}
-            >
-              <PiCaretLeftBold size={16} />
-            </PCActionIcon>
-
-            <PCActionIcon
-              size="sm"
-              variant="outline"
-              aria-label={t('goToNextPage')}
-              onClick={() => handlePageChange(currentPageIndex + 1)}
-              disabled={!canNextPage}
-              style={{
-                opacity: canNextPage ? 1 : 0.5,
-                cursor: canNextPage ? 'pointer' : 'not-allowed',
-              }}
-            >
-              <PiCaretRightBold size={16} />
-            </PCActionIcon>
-
-            <PCActionIcon
-              size="sm"
-              variant="outline"
-              aria-label={t('goToLastPage')}
-              onClick={() => handlePageChange(totalPages - 1)}
-              disabled={!canNextPage}
-              style={{
-                opacity: canNextPage ? 1 : 0.5,
-                cursor: canNextPage ? 'pointer' : 'not-allowed',
-              }}
-            >
-              <PiCaretDoubleRightBold size={16} />
-            </PCActionIcon>
-          </div>
-        </div>
-      </div>
-
-      {/* Mobile Layout */}
-      <div style={{
-        ...pcStyles.flex,
-        ...pcStyles.flexCol,
-        ...pcStyles.itemsCenter,
-        width: '100%',
-        gap: getVar('--pc-spacing-sm'),
-      }} className="pc-flex-xs pc-hidden-sm">
-        {showPageSize && (
-          <div style={{
-            ...pcStyles.flex,
-            ...pcStyles.itemsCenter,
-            ...pcStyles.gapSm,
-            width: '100%',
-            justifyContent: 'center',
-          }}>
-            <PCText 
-              size="sm" 
-              color="secondary"
-              style={{
-                whiteSpace: 'nowrap',
-              }}
-            >
-              {t('rowsPerPage')}
-            </PCText>
-            <PCSelect
-              size="sm"
-              options={pageSizeOptions}
-              value={currentPageSizeOption}
-              onChange={(v) => {
-                if (v) {
-                  handlePageSizeChange(Number(v.value));
-                }
-              }}
-              style={{ 
-                width: '60px',
-                minWidth: '60px',
-              }}
-            />
-          </div>
-        )}
-
-        <div style={{
-          ...pcStyles.flex,
-          ...pcStyles.itemsCenter,
-          ...pcStyles.justifyBetween,
-          width: '100%',
-          gap: getVar('--pc-spacing-sm'),
-        }}>
-          <PCText size="sm" color="secondary" style={{ whiteSpace: 'nowrap' }}>
-            {t('pageOf', { current: currentPage, total: totalPages || 1 })}
-          </PCText>
-
-          <div style={{
-            ...pcStyles.flex,
-            ...pcStyles.itemsCenter,
-            ...pcStyles.gapXs,
-          }}>
-            <PCActionIcon
-              size="sm"
-              variant="outline"
-              aria-label={t('goToFirstPage')}
-              onClick={() => handlePageChange(0)}
-              disabled={!canPreviousPage}
-              style={{
-                opacity: canPreviousPage ? 1 : 0.5,
-                cursor: canPreviousPage ? 'pointer' : 'not-allowed',
-              }}
-            >
-              <PiCaretDoubleLeftBold size={16} />
-            </PCActionIcon>
-
-            <PCActionIcon
-              size="sm"
-              variant="outline"
-              aria-label={t('goToPreviousPage')}
-              onClick={() => handlePageChange(currentPageIndex - 1)}
-              disabled={!canPreviousPage}
-              style={{
-                opacity: canPreviousPage ? 1 : 0.5,
-                cursor: canPreviousPage ? 'pointer' : 'not-allowed',
-              }}
-            >
-              <PiCaretLeftBold size={16} />
-            </PCActionIcon>
-
-            <PCActionIcon
-              size="sm"
-              variant="outline"
-              aria-label={t('goToNextPage')}
-              onClick={() => handlePageChange(currentPageIndex + 1)}
-              disabled={!canNextPage}
-              style={{
-                opacity: canNextPage ? 1 : 0.5,
-                cursor: canNextPage ? 'pointer' : 'not-allowed',
-              }}
-            >
-              <PiCaretRightBold size={16} />
-            </PCActionIcon>
-
-            <PCActionIcon
-              size="sm"
-              variant="outline"
-              aria-label={t('goToLastPage')}
-              onClick={() => handlePageChange(totalPages - 1)}
-              disabled={!canNextPage}
-              style={{
-                opacity: canNextPage ? 1 : 0.5,
-                cursor: canNextPage ? 'pointer' : 'not-allowed',
-              }}
-            >
-              <PiCaretDoubleRightBold size={16} />
-            </PCActionIcon>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}