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

package/src/RedactoPrivacyCenter/styles/responsive.ts

@@ -0,0 +1,138 @@
+/**
+ * Responsive Utilities for Privacy Center SDK
+ * Provides helper functions for responsive styling
+ */
+
+export const breakpoints = {
+  xs: '0px',
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+  '2xl': '1536px',
+} as const;
+
+/**
+ * Creates a responsive style object that applies different values at different breakpoints
+ */
+export const responsive = {
+  /**
+   * Get responsive padding
+   */
+  padding: (values: {
+    base?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+  }) => {
+    const style: React.CSSProperties = {};
+    if (values.base) {
+      style.padding = values.base;
+    }
+    // Note: Media queries need to be handled via CSS classes or inline styles with @media
+    // For inline styles, we'll use the base value and rely on CSS classes for breakpoints
+    return style;
+  },
+
+  /**
+   * Get responsive margin
+   */
+  margin: (values: {
+    base?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+  }) => {
+    const style: React.CSSProperties = {};
+    if (values.base) {
+      style.margin = values.base;
+    }
+    return style;
+  },
+
+  /**
+   * Get responsive font size
+   */
+  fontSize: (values: {
+    base?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+  }) => {
+    const style: React.CSSProperties = {};
+    if (values.base) {
+      style.fontSize = values.base;
+    }
+    return style;
+  },
+
+  /**
+   * Get responsive width
+   */
+  width: (values: {
+    base?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+  }) => {
+    const style: React.CSSProperties = {};
+    if (values.base) {
+      style.width = values.base;
+    }
+    return style;
+  },
+
+  /**
+   * Get responsive display (flex/block/none)
+   */
+  display: (values: {
+    base?: 'flex' | 'block' | 'none' | 'grid' | 'inline-flex';
+    sm?: 'flex' | 'block' | 'none' | 'grid' | 'inline-flex';
+    md?: 'flex' | 'block' | 'none' | 'grid' | 'inline-flex';
+    lg?: 'flex' | 'block' | 'none' | 'grid' | 'inline-flex';
+  }) => {
+    const style: React.CSSProperties = {};
+    if (values.base) {
+      style.display = values.base;
+    }
+    return style;
+  },
+};
+
+/**
+ * Common responsive patterns
+ */
+export const responsivePatterns = {
+  // Container that's full width on mobile, constrained on desktop
+  container: {
+    width: '100%',
+    maxWidth: '100%',
+    paddingLeft: '1rem',
+    paddingRight: '1rem',
+  },
+  
+  // Responsive text sizes
+  textResponsive: {
+    base: '0.875rem', // sm
+    md: '1rem', // base
+    lg: '1.125rem', // lg
+  },
+  
+  // Responsive spacing
+  spacingResponsive: {
+    base: '0.75rem', // sm
+    md: '1rem', // md
+    lg: '1.5rem', // lg
+  },
+  
+  // Responsive padding
+  paddingResponsive: {
+    base: '0.75rem', // sm
+    md: '1rem', // md
+    lg: '1.5rem', // lg
+  },
+};

package/src/RedactoPrivacyCenter/styles/variables.css

@@ -0,0 +1,133 @@
+/* CSS Custom Properties for Privacy Center SDK */
+/* These variables are scoped and won't conflict with host app styles */
+
+:root,
+[data-theme="light"] {
+  /* Colors */
+  --pc-primary: #3b82f6;
+  --pc-primary-hover: #2563eb;
+  --pc-primary-active: #1d4ed8;
+  --pc-secondary: #6b7280;
+  --pc-secondary-hover: #4b5563;
+  --pc-success: #10b981;
+  --pc-error: #ef4444;
+  --pc-warning: #f59e0b;
+  --pc-warning-bg: #fef9c3;
+  --pc-warning-border: #fcd34d;
+  --pc-warning-text: #92400e;
+  --pc-info: #3b82f6;
+
+  /* Backgrounds */
+  --pc-bg-shell: #ffffff;
+  --pc-bg-primary: #ffffff;
+  --pc-bg-secondary: #f9fafb;
+  --pc-bg-tertiary: #f3f4f6;
+  --pc-bg-hover: #f9fafb;
+  --pc-bg-active: #f3f4f6;
+  --pc-bg-overlay: rgba(0, 0, 0, 0.5);
+
+  /* Text */
+  --pc-text-primary: #111827;
+  --pc-text-secondary: #6b7280;
+  --pc-text-tertiary: #9ca3af;
+  --pc-text-inverse: #ffffff;
+  --pc-text-disabled: #d1d5db;
+
+  /* Borders */
+  --pc-border-color: #e5e7eb;
+  --pc-border-color-hover: #d1d5db;
+  --pc-border-color-focus: #3b82f6;
+  --pc-border-radius-sm: 0.375rem;
+  --pc-border-radius-md: 0.4375rem;
+  --pc-border-radius-lg: 0.625rem;
+  --pc-border-radius-xl: 0.875rem;
+  --pc-border-radius-2xl: 1.25rem;
+  --pc-border-radius-3xl: 2rem;
+
+  /* Shadows */
+  --pc-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --pc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --pc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --pc-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --pc-sidebar-shadow: 12px 0 28px rgba(15, 23, 42, 0.08), 1px 0 0 rgba(15, 23, 42, 0.04);
+
+  /* Spacing */
+  --pc-spacing-xs: 0.25rem;
+  --pc-spacing-sm: 0.5rem;
+  --pc-spacing-md: 0.875rem;
+  --pc-spacing-lg: 1.25rem;
+  --pc-spacing-xl: 1.75rem;
+  --pc-spacing-2xl: 2.5rem;
+
+  /* Typography */
+  --pc-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --pc-font-size-xs: 0.75rem;
+  --pc-font-size-sm: 0.8125rem;
+  --pc-font-size-base: 0.9375rem;
+  --pc-font-size-lg: 1.0625rem;
+  --pc-font-size-xl: 1.1875rem;
+  --pc-font-size-2xl: 1.375rem;
+  --pc-font-size-3xl: 1.75rem;
+  --pc-font-weight-normal: 400;
+  --pc-font-weight-medium: 500;
+  --pc-font-weight-semibold: 600;
+  --pc-font-weight-bold: 700;
+
+  /* Transitions */
+  --pc-transition-fast: 150ms ease-in-out;
+  --pc-transition-base: 200ms ease-in-out;
+  --pc-transition-slow: 300ms ease-in-out;
+
+  /* Z-index */
+  --pc-z-dropdown: 1000;
+  --pc-z-sticky: 1020;
+  --pc-z-fixed: 1030;
+  --pc-z-modal-backdrop: 1200;
+  --pc-z-modal: 1210;
+  --pc-z-popover: 1060;
+  --pc-z-tooltip: 1070;
+  
+  /* Icon filters for dark theme */
+  --pc-icon-filter: 0;
+}
+
+[data-theme="dark"] {
+  /* Colors */
+  --pc-primary: #60a5fa;
+  --pc-primary-hover: #3b82f6;
+  --pc-primary-active: #2563eb;
+  --pc-secondary: #9ca3af;
+  --pc-secondary-hover: #6b7280;
+  --pc-success: #34d399;
+  --pc-error: #f87171;
+  --pc-warning: #fbbf24;
+  --pc-warning-bg: #78350f;
+  --pc-warning-border: #fbbf24;
+  --pc-warning-text: #fef3c7;
+  --pc-info: #60a5fa;
+
+  /* Backgrounds */
+  --pc-bg-shell: #111827;
+  --pc-bg-primary: #1b2435;
+  --pc-bg-secondary: #243044;
+  --pc-bg-tertiary: #31405a;
+  --pc-bg-hover: #243044;
+  --pc-bg-active: #31405a;
+  --pc-bg-overlay: rgba(0, 0, 0, 0.7);
+
+  /* Text */
+  --pc-text-primary: #f9fafb;
+  --pc-text-secondary: #d1d5db;
+  --pc-text-tertiary: #9ca3af;
+  --pc-text-inverse: #111827;
+  --pc-text-disabled: #6b7280;
+
+  /* Borders */
+  --pc-border-color: rgba(148, 163, 184, 0.18);
+  --pc-border-color-hover: rgba(148, 163, 184, 0.28);
+  --pc-border-color-focus: #60a5fa;
+  --pc-sidebar-shadow: 14px 0 36px rgba(2, 6, 23, 0.42), 1px 0 0 rgba(148, 163, 184, 0.08);
+  
+  /* Icon filters for dark theme */
+  --pc-icon-filter: 1;
+}

package/src/RedactoPrivacyCenter/table/AdvancedTable.tsx

@@ -0,0 +1,367 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { flexRender } from '@tanstack/react-table';
+import { isEmpty } from 'lodash';
+import { PiCaretDownFill, PiCaretUpFill } from 'react-icons/pi';
+import { PCTable, PCLoader, PCEmpty } from '../ui';
+import { pcStyles } from '../styles/pcStyles';
+import type {
+  Table as ReactTableType,
+  Row,
+  Cell,
+  HeaderGroup,
+} from '@tanstack/react-table';
+import type { TableColumnMeta } from '../components/types';
+
+const getVar = (varName: string): string => `var(${varName})`;
+
+export type UniqueIdentifier = string | number;
+
+export type TableClassNameProps = {
+  container?: string;
+  tableClassName?: string;
+  headerClassName?: string;
+  bodyClassName?: string;
+  rowClassName?: string;
+  cellClassName?: string;
+  headerCellClassName?: string;
+  expandedRowClassName?: string;
+  expandedCellClassName?: string;
+};
+
+export type CustomHeaderCellProps<TData extends Record<string, any>> = {
+  columnOrder?: string[];
+  headerGroup?: HeaderGroup<TData>;
+  isLeftScrollable?: boolean;
+  isRightScrollable?: boolean;
+  className?: string;
+};
+
+export type CustomBodyCellProps<TData extends Record<string, any>> = {
+  cell?: Cell<TData, unknown>;
+  columnOrder?: string[];
+  isLeftScrollable?: boolean;
+  isRightScrollable?: boolean;
+  className?: string;
+};
+
+export type AdvancedTableProps<T extends Record<string, any>> = {
+  table: ReactTableType<T>;
+  variant?: 'modern' | 'minimal';
+  classNames?: TableClassNameProps;
+  isLoading?: boolean;
+  showLoadingText?: boolean;
+  className?: string;
+  customLoader?: React.ReactNode;
+  expandedComponent?: (row: Row<T>) => React.ReactNode;
+};
+
+export default function AdvancedTable<TData extends Record<string, any>>({
+  table,
+  variant = 'modern',
+  classNames,
+  isLoading = false,
+  showLoadingText = false,
+  className,
+  customLoader,
+  expandedComponent,
+}: AdvancedTableProps<TData>) {
+  const { t } = useTranslation();
+  if (!table) return null;
+
+  return (
+    <>
+      <div
+        className={`${classNames?.container || ''} ${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={variant}
+          className={classNames?.tableClassName}
+          style={{
+            minWidth: '100%',
+            backgroundColor: getVar('--pc-bg-primary'),
+          }}
+        >
+          <PCTable.Header className={classNames?.headerClassName}>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <PCTable.Row
+                key={headerGroup.id}
+                className={classNames?.rowClassName}
+              >
+                <TableHeadBasic
+                  headerGroup={headerGroup}
+                  className={classNames?.headerCellClassName}
+                />
+              </PCTable.Row>
+            ))}
+          </PCTable.Header>
+
+          <PCTable.Body className={classNames?.bodyClassName}>
+            {table.getRowModel().rows.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;
+
+              // Get expandedComponent from prop or meta
+              const rowExpandedComponent =
+                expandedComponent || meta.expandedComponent;
+
+              return (
+                <React.Fragment key={row.id}>
+                  <PCTable.Row
+                    className={classNames?.rowClassName}
+                    style={onRowClick ? { cursor: 'pointer' } : {}}
+                    onClick={handleRowClick}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCellBasic
+                        key={cell.id}
+                        cell={cell}
+                        className={classNames?.cellClassName}
+                      />
+                    ))}
+                  </PCTable.Row>
+
+                  {/* Expanded row */}
+                  {rowExpandedComponent && (
+                    <PCTable.Row
+                      className={classNames?.expandedRowClassName}
+                      style={{
+                        overflow: 'hidden',
+                        transition: 'all 0.3s ease-in-out',
+                        maxHeight: row.getIsExpanded() ? '2000px' : '0',
+                        opacity: row.getIsExpanded() ? 1 : 0,
+                        height: row.getIsExpanded() ? 'auto' : '0',
+                        minHeight: row.getIsExpanded() ? 'auto' : '0',
+                      }}
+                    >
+                      <PCTable.Cell
+                        colSpan={row.getVisibleCells().length}
+                        className={classNames?.expandedCellClassName}
+                        style={{
+                          padding: row.getIsExpanded() ? undefined : '0',
+                          transition: 'all 0.3s ease-in-out',
+                          height: row.getIsExpanded() ? 'auto' : '0',
+                          paddingTop: row.getIsExpanded() ? undefined : '0',
+                          paddingBottom: row.getIsExpanded() ? undefined : '0',
+                        }}
+                      >
+                        <div
+                          style={{
+                            transition: 'all 0.3s ease-in-out',
+                            transform: row.getIsExpanded() ? 'translateY(0)' : 'translateY(-8px)',
+                            opacity: row.getIsExpanded() ? 1 : 0,
+                            height: row.getIsExpanded() ? 'auto' : '0',
+                          }}
+                        >
+                          {rowExpandedComponent(row)}
+                        </div>
+                      </PCTable.Cell>
+                    </PCTable.Row>
+                  )}
+                </React.Fragment>
+              );
+            })}
+          </PCTable.Body>
+        </PCTable>
+
+        {isLoading && (
+          <div style={{
+            ...pcStyles.flex,
+            ...pcStyles.flexCol,
+            ...pcStyles.itemsCenter,
+            ...pcStyles.justifyCenter,
+            minHeight: '320px',
+            height: '100%',
+            backgroundColor: getVar('--pc-bg-primary'),
+            transition: 'background-color 0.3s ease',
+          }}>
+            {customLoader ? (
+              customLoader
+            ) : (
+              <div style={{
+                ...pcStyles.flex,
+                ...pcStyles.flexCol,
+                ...pcStyles.itemsCenter,
+                ...pcStyles.justifyCenter,
+                ...pcStyles.gapMd,
+              }}>
+                <PCLoader />
+                {showLoadingText && (
+                  <h6 style={{
+                    ...pcStyles.fontWeightMedium,
+                    color: getVar('--pc-text-secondary'),
+                    transition: 'color 0.3s ease',
+                  }}>Loading...</h6>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
+        {isEmpty(table.getRowModel().rows) && !isLoading && (
+          <div style={{
+            ...pcStyles.flex,
+            ...pcStyles.flexCol,
+            ...pcStyles.itemsCenter,
+            ...pcStyles.justifyCenter,
+            minHeight: '320px',
+            padding: getVar('--pc-spacing-2xl'),
+            backgroundColor: getVar('--pc-bg-primary'),
+            transition: 'background-color 0.3s ease',
+          }}>
+            <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')}
+            />
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+// Basic Header component
+export function TableHeadBasic<TData extends Record<string, any>>({
+  headerGroup,
+  className,
+}: CustomHeaderCellProps<TData>) {
+  const { t } = useTranslation();
+  if (!headerGroup) return null;
+
+  return (
+    <>
+      {headerGroup.headers.map((header) => {
+        const align = (header.column.columnDef.meta as TableColumnMeta | undefined)?.align || 'left';
+        return (
+          <PCTable.Head
+            key={header.id}
+            colSpan={header.colSpan}
+            className={className}
+            style={{
+              position: 'relative',
+              textAlign: align,
+            }}
+          >
+            <div style={{
+              ...pcStyles.flex,
+              ...pcStyles.itemsStart,
+              justifyContent: align === 'right' ? 'flex-end' : align === 'center' ? 'center' : 'flex-start',
+            }}>
+              {header.isPlaceholder
+                ? null
+                : flexRender(header.column.columnDef.header, header.getContext())}
+
+              {header.column.getCanSort() && (
+                <button
+                  type="button"
+                  onClick={header.column.getToggleSortingHandler()}
+                  style={{
+                    marginLeft: '0.25rem',
+                    display: 'inline-block',
+                    background: 'none',
+                    border: 'none',
+                    cursor: 'pointer',
+                    padding: 0,
+                    color: getVar('--pc-text-secondary'),
+                    transition: 'color 0.2s ease',
+                  }}
+                  aria-label={t('sortByColumn')}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.color = getVar('--pc-text-primary');
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.color = getVar('--pc-text-secondary');
+                  }}
+                >
+                  {{
+                    asc: <PiCaretUpFill size={14} />,
+                    desc: <PiCaretDownFill size={14} />,
+                  }[header.column.getIsSorted() as string] ??
+                    (header.column.columnDef.header !== '' && (
+                      <PiCaretDownFill size={14} style={{ opacity: 0.5 }} />
+                    ))}
+                </button>
+              )}
+            </div>
+
+            {header.column.getCanResize() && (
+              <div
+                {...{
+                  onDoubleClick: () => header.column.resetSize(),
+                  onMouseDown: header.getResizeHandler(),
+                  onTouchStart: header.getResizeHandler(),
+                }}
+                style={{
+                  position: 'absolute',
+                  right: 0,
+                  top: 0,
+                  height: '100%',
+                  width: '2px',
+                  cursor: 'col-resize',
+                  backgroundColor: getVar('--pc-border-color'),
+                  display: 'none',
+                  transition: 'background-color 0.2s ease',
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.display = 'block';
+                  e.currentTarget.style.backgroundColor = getVar('--pc-primary');
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.display = 'none';
+                  e.currentTarget.style.backgroundColor = getVar('--pc-border-color');
+                }}
+              />
+            )}
+          </PCTable.Head>
+        );
+      })}
+    </>
+  );
+}
+
+// Basic Cell component
+export function TableCellBasic<TData extends Record<string, any>>({
+  cell,
+  className,
+}: CustomBodyCellProps<TData>) {
+  if (!cell) return null;
+
+  const align = (cell.column.columnDef.meta as TableColumnMeta | undefined)?.align || 'left';
+
+  return (
+    <PCTable.Cell
+      className={className}
+      style={{ textAlign: align }}
+    >
+      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+    </PCTable.Cell>
+  );
+}