@redacto.io/consent-sdk-react 4.0.0 → 5.1.0

package/src/RedactoPrivacyCenter/table/AdvancedTablePagination.tsx

@@ -0,0 +1,476 @@
+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 AdvancedTablePaginationProps<TData extends Record<string, any>> = {
+  table: ReactTableType<TData>;
+  showPageSize?: boolean;
+  showSelectedCount?: boolean;
+  className?: string;
+};
+
+export default function AdvancedTablePagination<
+  TData extends Record<string, any>,
+>({
+  table,
+  showPageSize = true,
+  showSelectedCount = false,
+  className,
+}: AdvancedTablePaginationProps<TData>) {
+  const { t } = useTranslation();
+  const currentPageSize = table.getState().pagination.pageSize;
+  const currentPageSizeOption = pageSizeOptions.find(opt => opt.value === currentPageSize) || pageSizeOptions[1];
+
+  const currentPage = table.getState().pagination.pageIndex + 1;
+  const totalPages = table.getPageCount();
+  const totalRows = table.getFilteredRowModel().rows.length;
+
+  // Preserve pagination visibility even when rows are temporarily empty during loading
+  const shouldShowPagination = totalPages > 0 || totalRows > 0;
+
+  // Don't render if there's truly no data and no pages
+  if (!shouldShowPagination && totalRows === 0 && totalPages === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className={className}
+      style={{
+        ...pcStyles.flex,
+        ...pcStyles.flexCol,
+        ...pcStyles.itemsCenter,
+        width: '100%',
+        paddingTop: getVar('--pc-spacing-sm'),
+        paddingBottom: getVar('--pc-spacing-sm'),
+        gap: getVar('--pc-spacing-sm'),
+        minHeight: '52px',
+        opacity: shouldShowPagination ? 1 : 0.5,
+        pointerEvents: shouldShowPagination ? 'auto' : 'none',
+      }}
+    >
+      {/* Mobile Layout: Stacked (screens < 640px) */}
+      <div style={{
+        ...pcStyles.flex,
+        ...pcStyles.flexCol,
+        ...pcStyles.itemsCenter,
+        ...pcStyles.gapSm,
+        width: '100%',
+      }} className="pc-block-xs pc-hidden-sm">
+        {showPageSize && (
+          <div style={{
+            ...pcStyles.flex,
+            ...pcStyles.itemsCenter,
+            ...pcStyles.gapSm,
+            width: '100%',
+            ...pcStyles.justifyCenter,
+          }}>
+            <PCText
+              size="sm"
+              color="secondary"
+              style={{
+                whiteSpace: 'nowrap',
+                flexShrink: 0,
+              }}
+            >
+              {t('rowsPerPage')}
+            </PCText>
+            <PCSelect
+              size="sm"
+              options={pageSizeOptions}
+              value={currentPageSizeOption}
+              onChange={(v) => {
+                if (v) {
+                  table.setPageSize(Number(v.value));
+                }
+              }}
+              style={{
+                width: '56px',
+                minWidth: '56px',
+                flexShrink: 0,
+              }}
+            />
+          </div>
+        )}
+
+        <div style={{
+          ...pcStyles.flex,
+          ...pcStyles.itemsCenter,
+          ...pcStyles.gapSm,
+          flexWrap: 'wrap',
+          ...pcStyles.justifyCenter,
+        }}>
+          {totalPages > 0 && (
+            <div style={{
+              ...pcStyles.flex,
+              ...pcStyles.itemsCenter,
+              ...pcStyles.gapXs,
+              marginRight: getVar('--pc-spacing-xs'),
+              flexShrink: 0,
+            }}>
+              <PCText
+                size="sm"
+                color="secondary"
+                style={{ whiteSpace: 'nowrap' }}
+              >
+                {t('pageOf', { current: currentPage, total: totalPages })}
+              </PCText>
+            </div>
+          )}
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(4, 1fr)',
+            gap: '0.25rem',
+            flexShrink: 0,
+          }}>
+            <PCActionIcon
+              size="sm"
+              variant="outline"
+              aria-label={t('goToFirstPage')}
+              onClick={() => table.firstPage()}
+              disabled={!table.getCanPreviousPage()}
+              style={{
+                borderRadius: '0.5rem',
+                boxShadow: getVar('--pc-shadow-sm'),
+                borderColor: getVar('--pc-border-color'),
+                color: getVar('--pc-text-primary'),
+                backgroundColor: getVar('--pc-bg-primary'),
+                transition: 'all 0.2s ease',
+              }}
+              onMouseEnter={(e) => {
+                if (!table.getCanPreviousPage()) return;
+                e.currentTarget.style.backgroundColor = getVar('--pc-bg-hover');
+                e.currentTarget.style.borderColor = getVar('--pc-primary');
+                e.currentTarget.style.color = getVar('--pc-primary');
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = getVar('--pc-bg-primary');
+                e.currentTarget.style.borderColor = getVar('--pc-border-color');
+                e.currentTarget.style.color = getVar('--pc-text-primary');
+              }}
+            >
+              <PiCaretDoubleLeftBold size={14} />
+            </PCActionIcon>
+            <PCActionIcon
+              size="sm"
+              variant="outline"
+              aria-label={t('goToPreviousPage')}
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+              style={{
+                borderRadius: '0.5rem',
+                boxShadow: getVar('--pc-shadow-sm'),
+                borderColor: getVar('--pc-border-color'),
+                color: getVar('--pc-text-primary'),
+                backgroundColor: getVar('--pc-bg-primary'),
+                transition: 'all 0.2s ease',
+              }}
+              onMouseEnter={(e) => {
+                if (!table.getCanPreviousPage()) return;
+                e.currentTarget.style.backgroundColor = getVar('--pc-bg-hover');
+                e.currentTarget.style.borderColor = getVar('--pc-primary');
+                e.currentTarget.style.color = getVar('--pc-primary');
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = getVar('--pc-bg-primary');
+                e.currentTarget.style.borderColor = getVar('--pc-border-color');
+                e.currentTarget.style.color = getVar('--pc-text-primary');
+              }}
+            >
+              <PiCaretLeftBold size={14} />
+            </PCActionIcon>
+            <PCActionIcon
+              size="sm"
+              variant="outline"
+              aria-label={t('goToNextPage')}
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+              style={{
+                borderRadius: '0.5rem',
+                boxShadow: getVar('--pc-shadow-sm'),
+                borderColor: getVar('--pc-border-color'),
+                color: getVar('--pc-text-primary'),
+                backgroundColor: getVar('--pc-bg-primary'),
+                transition: 'all 0.2s ease',
+              }}
+              onMouseEnter={(e) => {
+                if (!table.getCanNextPage()) return;
+                e.currentTarget.style.backgroundColor = getVar('--pc-bg-hover');
+                e.currentTarget.style.borderColor = getVar('--pc-primary');
+                e.currentTarget.style.color = getVar('--pc-primary');
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = getVar('--pc-bg-primary');
+                e.currentTarget.style.borderColor = getVar('--pc-border-color');
+                e.currentTarget.style.color = getVar('--pc-text-primary');
+              }}
+            >
+              <PiCaretRightBold size={14} />
+            </PCActionIcon>
+            <PCActionIcon
+              size="sm"
+              variant="outline"
+              aria-label={t('goToLastPage')}
+              onClick={() => table.lastPage()}
+              disabled={!table.getCanNextPage()}
+              style={{
+                borderRadius: '0.5rem',
+                boxShadow: getVar('--pc-shadow-sm'),
+                borderColor: getVar('--pc-border-color'),
+                color: getVar('--pc-text-primary'),
+                backgroundColor: getVar('--pc-bg-primary'),
+                transition: 'all 0.2s ease',
+              }}
+              onMouseEnter={(e) => {
+                if (!table.getCanNextPage()) return;
+                e.currentTarget.style.backgroundColor = getVar('--pc-bg-hover');
+                e.currentTarget.style.borderColor = getVar('--pc-primary');
+                e.currentTarget.style.color = getVar('--pc-primary');
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = getVar('--pc-bg-primary');
+                e.currentTarget.style.borderColor = getVar('--pc-border-color');
+                e.currentTarget.style.color = getVar('--pc-text-primary');
+              }}
+            >
+              <PiCaretDoubleRightBold size={14} />
+            </PCActionIcon>
+          </div>
+        </div>
+      </div>
+
+      {/* Desktop/Tablet Layout: Horizontal (screens >= 640px) */}
+      <div style={{
+        ...pcStyles.flex,
+        ...pcStyles.itemsCenter,
+        ...pcStyles.justifyBetween,
+        width: '100%',
+        flexWrap: 'wrap',
+        gap: getVar('--pc-spacing-sm'),
+      }} className="pc-hidden-xs pc-flex-sm">
+        {/* Left Group: Rows per page */}
+        <div style={{
+          ...pcStyles.flex,
+          ...pcStyles.itemsCenter,
+          ...pcStyles.gapSm,
+          flexShrink: 0,
+          flexWrap: 'wrap',
+        }}>
+          {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) {
+                    table.setPageSize(Number(v.value));
+                  }
+                }}
+                style={{
+                  width: '56px',
+                  minWidth: '56px',
+                  flexShrink: 0,
+                }}
+              />
+            </div>
+          )}
+
+          {showSelectedCount && (
+            <PCText
+              size="sm"
+              color="secondary"
+              style={{
+                whiteSpace: 'nowrap',
+                flexShrink: 0,
+              }}
+            >
+              {t('rowsSelected', {
+                count: table.getFilteredSelectedRowModel().rows.length,
+                total: table.getFilteredRowModel().rows.length,
+              })}
+            </PCText>
+          )}
+        </div>
+
+        {/* Right Group: Page info + Navigation */}
+        <div style={{
+          ...pcStyles.flex,
+          ...pcStyles.itemsCenter,
+          ...pcStyles.gapSm,
+          flexShrink: 0,
+          flexWrap: 'wrap',
+        }}>
+          {totalPages > 0 && (
+            <div style={{
+              ...pcStyles.flex,
+              ...pcStyles.itemsCenter,
+              ...pcStyles.gapXs,
+              marginRight: getVar('--pc-spacing-xs'),
+              flexShrink: 0,
+            }}>
+              <PCText
+                size="sm"
+                color="secondary"
+                style={{ whiteSpace: 'nowrap' }}
+              >
+                {t('pageOf', { current: currentPage, total: totalPages })}
+              </PCText>
+            </div>
+          )}
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(4, 1fr)',
+            gap: '0.25rem',
+            flexShrink: 0,
+          }}>
+            <PCActionIcon
+              size="sm"
+              variant="outline"
+              aria-label={t('goToFirstPage')}
+              onClick={() => table.firstPage()}
+              disabled={!table.getCanPreviousPage()}
+              style={{
+                borderRadius: '0.5rem',
+                boxShadow: getVar('--pc-shadow-sm'),
+                borderColor: getVar('--pc-border-color'),
+                color: getVar('--pc-text-primary'),
+                backgroundColor: getVar('--pc-bg-primary'),
+                transition: 'all 0.2s ease',
+              }}
+              onMouseEnter={(e) => {
+                if (!table.getCanPreviousPage()) return;
+                e.currentTarget.style.backgroundColor = getVar('--pc-bg-hover');
+                e.currentTarget.style.borderColor = getVar('--pc-primary');
+                e.currentTarget.style.color = getVar('--pc-primary');
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = getVar('--pc-bg-primary');
+                e.currentTarget.style.borderColor = getVar('--pc-border-color');
+                e.currentTarget.style.color = getVar('--pc-text-primary');
+              }}
+            >
+              <PiCaretDoubleLeftBold size={14} />
+            </PCActionIcon>
+            <PCActionIcon
+              size="sm"
+              variant="outline"
+              aria-label={t('goToPreviousPage')}
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+              style={{
+                borderRadius: '0.5rem',
+                boxShadow: getVar('--pc-shadow-sm'),
+                borderColor: getVar('--pc-border-color'),
+                color: getVar('--pc-text-primary'),
+                backgroundColor: getVar('--pc-bg-primary'),
+                transition: 'all 0.2s ease',
+              }}
+              onMouseEnter={(e) => {
+                if (!table.getCanPreviousPage()) return;
+                e.currentTarget.style.backgroundColor = getVar('--pc-bg-hover');
+                e.currentTarget.style.borderColor = getVar('--pc-primary');
+                e.currentTarget.style.color = getVar('--pc-primary');
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = getVar('--pc-bg-primary');
+                e.currentTarget.style.borderColor = getVar('--pc-border-color');
+                e.currentTarget.style.color = getVar('--pc-text-primary');
+              }}
+            >
+              <PiCaretLeftBold size={14} />
+            </PCActionIcon>
+            <PCActionIcon
+              size="sm"
+              variant="outline"
+              aria-label={t('goToNextPage')}
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+              style={{
+                borderRadius: '0.5rem',
+                boxShadow: getVar('--pc-shadow-sm'),
+                borderColor: getVar('--pc-border-color'),
+                color: getVar('--pc-text-primary'),
+                backgroundColor: getVar('--pc-bg-primary'),
+                transition: 'all 0.2s ease',
+              }}
+              onMouseEnter={(e) => {
+                if (!table.getCanNextPage()) return;
+                e.currentTarget.style.backgroundColor = getVar('--pc-bg-hover');
+                e.currentTarget.style.borderColor = getVar('--pc-primary');
+                e.currentTarget.style.color = getVar('--pc-primary');
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = getVar('--pc-bg-primary');
+                e.currentTarget.style.borderColor = getVar('--pc-border-color');
+                e.currentTarget.style.color = getVar('--pc-text-primary');
+              }}
+            >
+              <PiCaretRightBold size={14} />
+            </PCActionIcon>
+            <PCActionIcon
+              size="sm"
+              variant="outline"
+              aria-label={t('goToLastPage')}
+              onClick={() => table.lastPage()}
+              disabled={!table.getCanNextPage()}
+              style={{
+                borderRadius: '0.5rem',
+                boxShadow: getVar('--pc-shadow-sm'),
+                borderColor: getVar('--pc-border-color'),
+                color: getVar('--pc-text-primary'),
+                backgroundColor: getVar('--pc-bg-primary'),
+                transition: 'all 0.2s ease',
+              }}
+              onMouseEnter={(e) => {
+                if (!table.getCanNextPage()) return;
+                e.currentTarget.style.backgroundColor = getVar('--pc-bg-hover');
+                e.currentTarget.style.borderColor = getVar('--pc-primary');
+                e.currentTarget.style.color = getVar('--pc-primary');
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = getVar('--pc-bg-primary');
+                e.currentTarget.style.borderColor = getVar('--pc-border-color');
+                e.currentTarget.style.color = getVar('--pc-text-primary');
+              }}
+            >
+              <PiCaretDoubleRightBold size={14} />
+            </PCActionIcon>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/RedactoPrivacyCenter/table/index.ts

@@ -0,0 +1,2 @@
+export { default as AdvancedTable } from './AdvancedTable';
+export { default as AdvancedTablePagination } from './AdvancedTablePagination';

package/src/RedactoPrivacyCenter/types/images.d.ts

@@ -0,0 +1,29 @@
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.png" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.jpg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.jpeg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.gif" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.webp" {
+  const content: string;
+  export default content;
+}

package/src/RedactoPrivacyCenter/ui/Footer.tsx

@@ -0,0 +1,75 @@
+import { useTranslation } from 'react-i18next';
+import { pcStyles } from '../styles/pcStyles';
+import PoweredByRedacto from '../assets/poweredByRedacto.svg';
+import { useTheme } from '../context/theme';
+
+const getVar = (varName: string): string => `var(${varName})`;
+
+export default function Footer() {
+  const { t } = useTranslation();
+  const { theme } = useTheme();
+
+  return (
+    <footer
+      style={{
+        ...pcStyles.flex,
+        ...pcStyles.justifyCenter,
+        width: '100%',
+        paddingTop: '0.25rem',
+        paddingBottom: '0.25rem',
+      }}
+    >
+      <div
+        style={{
+          ...pcStyles.flex,
+          ...pcStyles.flexCol,
+          ...pcStyles.itemsCenter,
+          ...pcStyles.justifyCenter,
+          ...pcStyles.gapSm,
+          ...pcStyles.textCenter,
+          minWidth: 'fit-content',
+        }}
+      >
+        <span
+          style={{
+            ...pcStyles.fontWeightBold,
+            color: getVar('--pc-text-secondary'),
+            fontSize: 'clamp(0.75rem, 1.5vw, 1rem)',
+            lineHeight: 1.2,
+          }}
+        >
+          {t('poweredBy')}
+        </span>
+        <div
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minHeight: '1.75rem',
+            padding:
+              theme === 'dark' ? '0.25rem 0.5rem' : 0,
+            backgroundColor:
+              theme === 'dark' ? 'rgba(255, 255, 255, 0.92)' : 'transparent',
+            borderRadius: '9999px',
+            boxShadow:
+              theme === 'dark'
+                ? '0 8px 18px rgba(2, 6, 23, 0.28)'
+                : 'none',
+          }}
+        >
+          <img
+            src={PoweredByRedacto}
+            alt={t('redactoLogoAlt')}
+            style={{
+              height: 'clamp(1.125rem, 2.5vw, 1.75rem)',
+              width: 'auto',
+              objectFit: 'contain',
+              display: 'block',
+              filter: 'drop-shadow(0 1px 1px rgba(15, 23, 42, 0.06))',
+            }}
+          />
+        </div>
+      </div>
+    </footer>
+  );
+}

package/src/RedactoPrivacyCenter/ui/FormBlockWrapper.tsx

@@ -0,0 +1,54 @@
+import { PCTitle, PCText } from './index';
+import { pcStyles } from '../styles/pcStyles';
+
+const getVar = (varName: string): string => `var(${varName})`;
+
+// form block wrapper
+export function FormBlockWrapper({
+  title,
+  description,
+  children,
+  className,
+  inputClassName,
+}: React.PropsWithChildren<{
+  title?: string;
+  description?: string;
+  className?: string;
+  inputClassName?: string;
+}>) {
+  return (
+    <section 
+      className={className} 
+      style={{ 
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        gap: pcStyles.gapMd.gap,
+      }}
+    >
+      {title && (
+        <header style={{ marginBottom: pcStyles.mbSm.marginBottom }}>
+          <PCTitle as="h5" style={{ ...pcStyles.fontWeightSemibold, color: getVar('--pc-text-primary') }}>
+            {title}
+          </PCTitle>
+          {description && (
+            <PCText size="sm" color="secondary" style={{ marginTop: pcStyles.mtXs.marginTop }}>
+              {description}
+            </PCText>
+          )}
+        </header>
+      )}
+      <div
+        className={inputClassName}
+        style={{
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: pcStyles.gapMd.gap,
+        }}
+      >
+        {children}
+      </div>
+    </section>
+  );
+}