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

package/src/RedactoPrivacyCenter/ui/PCTable.tsx

@@ -0,0 +1,149 @@
+import { type ReactNode, type CSSProperties, type HTMLAttributes, type TdHTMLAttributes, type ThHTMLAttributes, createContext } from 'react';
+import { pcStyles } from '../styles/pcStyles';
+
+interface TableContextValue {
+  variant?: 'modern' | 'minimal';
+}
+
+const TableContext = createContext<TableContextValue>({});
+
+// Main Table component
+export type PCTableProps = Readonly<
+  HTMLAttributes<HTMLTableElement> & {
+    children: ReactNode;
+    variant?: 'modern' | 'minimal';
+    className?: string;
+    style?: CSSProperties;
+  }
+>;
+
+export function PCTable({ children, variant = 'modern', className = '', style = {}, ...props }: PCTableProps) {
+  const tableStyle: CSSProperties = {
+    ...pcStyles.table,
+    ...style,
+  };
+
+  return (
+    <TableContext.Provider value={{ variant }}>
+      <table className={className} style={tableStyle} {...props}>
+        {children}
+      </table>
+    </TableContext.Provider>
+  );
+}
+
+// Header component
+export type PCTableHeaderProps = Readonly<
+  HTMLAttributes<HTMLTableSectionElement> & {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+  }
+>;
+
+export function PCTableHeader({ children, className = '', style = {}, ...props }: PCTableHeaderProps) {
+  const headerStyle: CSSProperties = {
+    ...pcStyles.tableHeader,
+    ...style,
+  };
+
+  return (
+    <thead className={className} style={headerStyle} {...props}>
+      {children}
+    </thead>
+  );
+}
+
+// Body component
+export type PCTableBodyProps = Readonly<
+  HTMLAttributes<HTMLTableSectionElement> & {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+  }
+>;
+
+export function PCTableBody({ children, className = '', style = {}, ...props }: PCTableBodyProps) {
+  const bodyStyle: CSSProperties = {
+    ...style,
+  };
+
+  return (
+    <tbody className={className} style={bodyStyle} {...props}>
+      {children}
+    </tbody>
+  );
+}
+
+// Row component
+export type PCTableRowProps = Readonly<
+  HTMLAttributes<HTMLTableRowElement> & {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+  }
+>;
+
+export function PCTableRow({ children, className = '', style = {}, ...props }: PCTableRowProps) {
+  const rowStyle: CSSProperties = {
+    ...pcStyles.tableRow,
+    ...style,
+  };
+
+  return (
+    <tr className={`pc-table-row ${className}`} style={rowStyle} {...props}>
+      {children}
+    </tr>
+  );
+}
+
+// Header Cell component
+export type PCTableHeadProps = Readonly<
+  ThHTMLAttributes<HTMLTableCellElement> & {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+  }
+>;
+
+export function PCTableHead({ children, className = '', style = {}, ...props }: PCTableHeadProps) {
+  const headStyle: CSSProperties = {
+    ...pcStyles.tableHeaderCell,
+    ...style,
+  };
+
+  return (
+    <th className={className} style={headStyle} {...props}>
+      {children}
+    </th>
+  );
+}
+
+// Cell component
+export type PCTableCellProps = Readonly<
+  TdHTMLAttributes<HTMLTableCellElement> & {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+  }
+>;
+
+export function PCTableCell({ children, className = '', style = {}, ...props }: PCTableCellProps) {
+  const cellStyle: CSSProperties = {
+    ...pcStyles.tableCell,
+    ...style,
+  };
+
+  return (
+    <td className={className} style={cellStyle} {...props}>
+      {children}
+    </td>
+  );
+}
+
+// Compound component pattern
+PCTable.Header = PCTableHeader;
+PCTable.Body = PCTableBody;
+PCTable.Row = PCTableRow;
+PCTable.Head = PCTableHead;
+PCTable.Cell = PCTableCell;

package/src/RedactoPrivacyCenter/ui/PCText.tsx

@@ -0,0 +1,41 @@
+import { type ReactNode, type CSSProperties } from 'react';
+import { pcStyles } from '../styles/pcStyles';
+
+export type PCTextProps = Readonly<{
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  as?: 'p' | 'span' | 'div' | 'label';
+  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl';
+  weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+  color?: 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'disabled';
+  align?: 'left' | 'center' | 'right';
+  title?: string;
+}>;
+
+export function PCText({
+  children,
+  className = '',
+  style = {},
+  as: Component = 'p',
+  size = 'base',
+  weight = 'normal',
+  color = 'primary',
+  align,
+  title,
+}: PCTextProps) {
+  const baseStyle: CSSProperties = {
+    ...pcStyles.text,
+    ...pcStyles[`text${size.charAt(0).toUpperCase() + size.slice(1)}` as keyof typeof pcStyles] as CSSProperties,
+    ...pcStyles[`fontWeight${weight.charAt(0).toUpperCase() + weight.slice(1)}` as keyof typeof pcStyles] as CSSProperties,
+    ...pcStyles[`text${color.charAt(0).toUpperCase() + color.slice(1)}` as keyof typeof pcStyles] as CSSProperties,
+    ...(align && pcStyles[`text${align.charAt(0).toUpperCase() + align.slice(1)}` as keyof typeof pcStyles] as CSSProperties),
+    ...style,
+  };
+
+  return (
+    <Component className={className} style={baseStyle} title={title}>
+      {children}
+    </Component>
+  );
+}

package/src/RedactoPrivacyCenter/ui/PCTextarea.tsx

@@ -0,0 +1,43 @@
+import { type ReactNode, type CSSProperties, type TextareaHTMLAttributes } from 'react';
+import { pcStyles } from '../styles/pcStyles';
+
+export interface PCTextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'style' | 'size'> {
+  className?: string;
+  style?: CSSProperties;
+  label?: ReactNode;
+  error?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function PCTextarea({
+  className = '',
+  style = {},
+  label,
+  error = false,
+  size = 'md',
+  ...props
+}: PCTextareaProps) {
+  const textareaStyle: CSSProperties = {
+    ...pcStyles.textarea,
+    ...(size === 'sm' && pcStyles.inputSm),
+    ...(size === 'lg' && pcStyles.inputLg),
+    ...(error && pcStyles.inputError),
+    ...(props.disabled && pcStyles.inputDisabled),
+    ...style,
+  };
+
+  const wrapperStyle: CSSProperties = {
+    ...pcStyles.inputWrapper,
+  };
+
+  return (
+    <div className={className} style={wrapperStyle}>
+      {label && <label style={pcStyles.inputLabel}>{label}</label>}
+      <textarea
+        className="pc-textarea"
+        style={textareaStyle}
+        {...props}
+      />
+    </div>
+  );
+}

package/src/RedactoPrivacyCenter/ui/PCTitle.tsx

@@ -0,0 +1,37 @@
+import { type ReactNode, type CSSProperties } from 'react';
+import { pcStyles } from '../styles/pcStyles';
+
+export interface PCTitleProps {
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+
+export function PCTitle({
+  children,
+  className = '',
+  style = {},
+  as: Component = 'h3',
+}: PCTitleProps) {
+  const sizeMap: Record<string, keyof typeof pcStyles> = {
+    h1: 'titleH1',
+    h2: 'titleH2',
+    h3: 'titleH3',
+    h4: 'titleH4',
+    h5: 'titleH5',
+    h6: 'titleH6',
+  };
+
+  const baseStyle: CSSProperties = {
+    ...pcStyles.title,
+    ...(pcStyles[sizeMap[Component] as keyof typeof pcStyles] as CSSProperties),
+    ...style,
+  };
+
+  return (
+    <Component className={className} style={baseStyle}>
+      {children}
+    </Component>
+  );
+}

package/src/RedactoPrivacyCenter/ui/PCTooltip.tsx

@@ -0,0 +1,119 @@
+import { type ReactNode, type CSSProperties, useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { pcStyles } from '../styles/pcStyles';
+
+export interface PCTooltipProps {
+  content: ReactNode;
+  children: ReactNode;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  className?: string;
+  style?: CSSProperties;
+  color?: 'default' | 'invert';
+}
+
+export function PCTooltip({
+  content,
+  children,
+  placement = 'top',
+  className = '',
+  style = {},
+  color = 'default',
+}: PCTooltipProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+
+  const updatePosition = () => {
+    if (!triggerRef.current || !tooltipRef.current) return;
+
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    const gap = 2;
+    const viewportGutter = 12;
+
+    let top = 0;
+    let left = 0;
+
+    switch (placement) {
+      case 'top':
+        top = triggerRect.top - tooltipRect.height - gap;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+        break;
+      case 'bottom':
+        top = triggerRect.bottom + gap;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+        break;
+      case 'left':
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+        left = triggerRect.left - tooltipRect.width - gap;
+        break;
+      case 'right':
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+        left = triggerRect.right + gap;
+        break;
+    }
+
+    const maxLeft = window.innerWidth - tooltipRect.width - viewportGutter;
+    const maxTop = window.innerHeight - tooltipRect.height - viewportGutter;
+
+    left = Math.min(Math.max(left, viewportGutter), Math.max(viewportGutter, maxLeft));
+    top = Math.min(Math.max(top, viewportGutter), Math.max(viewportGutter, maxTop));
+
+    setPosition({ top, left });
+  };
+
+  useEffect(() => {
+    if (isVisible) {
+      updatePosition();
+      window.addEventListener('scroll', updatePosition, true);
+      window.addEventListener('resize', updatePosition);
+      return () => {
+        window.removeEventListener('scroll', updatePosition, true);
+        window.removeEventListener('resize', updatePosition);
+      };
+    }
+  }, [isVisible, placement]);
+
+  const tooltipStyle: CSSProperties = {
+    ...pcStyles.tooltip,
+    ...(color === 'invert' && {
+      backgroundColor: '#ffffff',
+      color: '#1f2937',
+      border: '1px solid #e5e7eb',
+      boxShadow: '0 8px 18px rgba(15, 23, 42, 0.10)',
+    }),
+    position: 'fixed',
+    top: `${position.top}px`,
+    left: `${position.left}px`,
+    display: isVisible ? 'block' : 'none',
+    padding: '0.375rem 0.625rem',
+    fontSize: '0.8125rem',
+    lineHeight: 1.2,
+    borderRadius: '0.75rem',
+    ...style,
+  };
+
+  return (
+    <>
+      <div
+        ref={triggerRef}
+        onMouseEnter={() => setIsVisible(true)}
+        onMouseLeave={() => setIsVisible(false)}
+        style={{ display: 'inline-block', width: '100%' }}
+      >
+        {children}
+      </div>
+      {isVisible && typeof document !== 'undefined' && createPortal(
+        <div
+          ref={tooltipRef}
+          className={`pc-tooltip ${className}`}
+          style={tooltipStyle}
+        >
+          {content}
+        </div>,
+        document.body
+      )}
+    </>
+  );
+}

package/src/RedactoPrivacyCenter/ui/SimpleBar.tsx

@@ -0,0 +1,25 @@
+import { pcStyles } from '../styles/pcStyles';
+
+type SimpleBarProps = {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export default function SimpleBar({
+  children,
+  className,
+  style,
+}: SimpleBarProps) {
+  return (
+    <div
+      className={`pc-scrollbar ${className || ''}`}
+      style={{
+        ...pcStyles.overflowYAuto,
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/src/RedactoPrivacyCenter/ui/StatusBadge.tsx

@@ -0,0 +1,53 @@
+import { PCBadge } from './index';
+
+type StatusBadgeProps = {
+  status?: 'success' | 'warning' | 'error' | 'info' | 'pending' | string;
+  children?: React.ReactNode;
+  className?: string;
+};
+
+const predefinedStatusMap: Record<string, 'success' | 'warning' | 'error' | 'info' | 'pending'> = {
+  success: 'success',
+  warning: 'warning',
+  error: 'error',
+  info: 'info',
+  pending: 'pending',
+  active: 'success',
+  completed: 'success',
+  processing: 'warning',
+  in_progress: 'warning',
+  rejected: 'error',
+  declined: 'error',
+  expired: 'warning',
+  suspended: 'error',
+  revoked: 'error',
+  withdrawn: 'error',
+};
+
+export default function StatusBadge({
+  status = 'info',
+  children,
+  className,
+}: StatusBadgeProps) {
+  // Check if it's a predefined status
+  const normalizedStatus = status.toLowerCase();
+  const mappedStatus = predefinedStatusMap[normalizedStatus] || status;
+
+  let badgeVariant: 'success' | 'error' | 'warning' | 'info' | 'secondary' = 'secondary';
+
+  if (mappedStatus === 'success') {
+    badgeVariant = 'success';
+  } else if (mappedStatus === 'error') {
+    badgeVariant = 'error';
+  } else if (mappedStatus === 'warning') {
+    badgeVariant = 'warning';
+  } else if (mappedStatus === 'info') {
+    badgeVariant = 'info';
+  }
+
+  return (
+    <PCBadge variant={badgeVariant} className={className}>
+      {children || status}
+    </PCBadge>
+  );
+}

package/src/RedactoPrivacyCenter/ui/ThemeToggle.tsx

@@ -0,0 +1,72 @@
+import { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PCActionIcon } from './index';
+import { IoSunnyOutline, IoMoonOutline } from 'react-icons/io5';
+import { useTheme } from '../context/theme';
+import { PCTooltip } from './PCTooltip';
+
+const getVar = (varName: string): string => `var(${varName})`;
+
+type ThemeToggleProps = {
+  className?: string;
+};
+
+export default function ThemeToggle({ className }: ThemeToggleProps) {
+  const { t } = useTranslation();
+  const { theme, toggleTheme } = useTheme();
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const tooltipLabel =
+    theme === 'light' ? t('switchToDarkMode') : t('switchToLightMode');
+
+  const handleClick = () => {
+    // Capture click position for animation
+    let position: { x: number; y: number };
+    
+    if (buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      position = { 
+        x: rect.left + rect.width / 2, 
+        y: rect.top + rect.height / 2 
+      };
+    } else {
+      // Fallback to center
+      position = { 
+        x: window.innerWidth / 2, 
+        y: window.innerHeight / 2 
+      };
+    }
+    
+    // Store position globally for ThemeTransitionOverlay to access
+    if (typeof window !== 'undefined') {
+      (window as any).__pcThemeTransitionPosition = position;
+    }
+    
+    toggleTheme();
+  };
+
+  return (
+    <PCTooltip content={tooltipLabel} placement="bottom" color="invert">
+      <div style={{ display: 'inline-flex' }}>
+        <PCActionIcon
+          ref={buttonRef}
+          variant="default"
+          className={className}
+          onClick={handleClick}
+          aria-label={tooltipLabel}
+          style={{ 
+            width: '32px', 
+            height: '32px',
+            color: getVar('--pc-text-primary'),
+            transition: 'color 0.3s ease, transform 0.2s ease',
+          }}
+        >
+          {theme === 'light' ? (
+            <IoMoonOutline size={18} />
+          ) : (
+            <IoSunnyOutline size={18} />
+          )}
+        </PCActionIcon>
+      </div>
+    </PCTooltip>
+  );
+}

package/src/RedactoPrivacyCenter/ui/index.ts

@@ -0,0 +1,18 @@
+export { PCText, type PCTextProps } from './PCText';
+export { PCTitle, type PCTitleProps } from './PCTitle';
+export { PCButton, type PCButtonProps } from './PCButton';
+export { PCActionIcon, type PCActionIconProps } from './PCActionIcon';
+export { PCInput, type PCInputProps } from './PCInput';
+export { PCTextarea, type PCTextareaProps } from './PCTextarea';
+export { PCCheckbox, type PCCheckboxProps } from './PCCheckbox';
+export { PCSelect, type PCSelectProps, type SelectOption } from './PCSelect';
+export { PCModal, type PCModalProps } from './PCModal';
+export { PCTable, PCTableHeader, PCTableBody, PCTableRow, PCTableHead, PCTableCell, type PCTableProps, type PCTableHeaderProps, type PCTableBodyProps, type PCTableRowProps, type PCTableHeadProps, type PCTableCellProps } from './PCTable';
+export { PCLoader, type PCLoaderProps } from './PCLoader';
+export { PCBadge, type PCBadgeProps } from './PCBadge';
+export { PCTooltip, type PCTooltipProps } from './PCTooltip';
+export { PCPopover, type PCPopoverProps } from './PCPopover';
+export { PCAccordion, PCAccordionHeader, PCAccordionBody, type PCAccordionProps, type PCAccordionHeaderProps, type PCAccordionBodyProps } from './PCAccordion';
+export { PCCollapse, PCCollapseHeader, PCCollapseBody, type PCCollapseProps, type PCCollapseHeaderProps, type PCCollapseBodyProps } from './PCCollapse';
+export { PCAvatar, type PCAvatarProps } from './PCAvatar';
+export { PCEmpty, type PCEmptyProps } from './PCEmpty';

package/src/RedactoPrivacyCenter/utils/cn.ts

@@ -0,0 +1,28 @@
+// Simple className utility - replaces clsx and tailwind-merge
+// Accepts strings, objects, arrays, and undefined/null values
+type ClassValue = string | number | boolean | undefined | null | Record<string, boolean> | ClassValue[];
+
+export function cn(...inputs: ClassValue[]): string {
+  const classes: string[] = [];
+
+  for (const input of inputs) {
+    if (!input) continue;
+
+    if (typeof input === 'string') {
+      classes.push(input);
+    } else if (typeof input === 'number') {
+      classes.push(String(input));
+    } else if (Array.isArray(input)) {
+      const inner = cn(...input);
+      if (inner) classes.push(inner);
+    } else if (typeof input === 'object') {
+      for (const key in input) {
+        if (input[key]) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.filter(Boolean).join(' ');
+}

package/src/RedactoPrivacyCenter/utils/date.ts

@@ -0,0 +1,48 @@
+/**
+ * Unified date formatting utilities for privacy center app
+ */
+
+export type FormatDateParams = {
+  date: string | Date;
+};
+
+/**
+ * Format date for display in consent records (with time)
+ * Format: "January 15, 2025 at 2:30 PM"
+ */
+export const formatDate = ({ date }: FormatDateParams): string => {
+  return new Date(date).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+};
+
+/**
+ * Format date for display in case history (short format)
+ * Format: "15 Jan 2025"
+ */
+export const formatDateShort = (dateString: string): string => {
+  if (!dateString) return '-';
+  return new Date(dateString).toLocaleDateString('en-GB', {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric'
+  });
+};
+
+/**
+ * Format date time for consent manager (with day/month/year)
+ * Format: "15 Jan 2025"
+ */
+export const formatDateTime = (timestamp: string): string => {
+  const date = new Date(timestamp);
+  const options: Intl.DateTimeFormatOptions = {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric',
+  };
+  return date.toLocaleString('en-US', options);
+};