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

package/src/RedactoPrivacyCenter/table/AdvancedTablePagination.tsx

@@ -1,468 +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 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: '0.375rem',
-        paddingBottom: '0.125rem',
-        gap: '0.375rem',
-        minHeight: '44px',
-        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',
-                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',
-                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',
-                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',
-                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',
-                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',
-                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',
-                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',
-                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

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

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

@@ -1,29 +0,0 @@
-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

@@ -1,69 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { pcStyles } from '../styles/pcStyles';
-import PoweredByRedacto from '../assets/poweredByRedacto.svg';
-import { useBranding } from '../context/BrandingContext';
-
-const getVar = (varName: string): string => `var(${varName})`;
-
-export default function Footer() {
-  const { t } = useTranslation();
-  const branding = useBranding();
-
-  if (branding?.hide_platform_branding) return null;
-
-  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',
-            borderRadius: '9999px',
-          }}
-        >
-          <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

@@ -1,54 +0,0 @@
-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>
-  );
-}