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

package/src/RedactoPrivacyCenter/styles/responsive.ts

@@ -1,138 +0,0 @@
-/**
- * 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

@@ -1,96 +0,0 @@
-/* CSS Custom Properties for Privacy Center SDK */
-/* These variables are scoped and won't conflict with host app styles */
-
-:root {
-  /* 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;
-
-  /* Manage Consent toolbar: search, filters, export */
-  --pc-consent-toolbar-control-height: 2rem;
-  /* Header: language, notifications, theme (same pixel row as compact controls) */
-  --pc-navbar-actions-control-height: var(--pc-consent-toolbar-control-height);
-}

package/src/RedactoPrivacyCenter/table/AdvancedTable.tsx

@@ -1,387 +0,0 @@
-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();
-  const [hoveredRowId, setHoveredRowId] = React.useState<string | null>(null);
-  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
-                ? () => {
-                  onRowClick(row.original, row);
-                }
-                : 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' } : {}),
-                      ...(row.getIsExpanded() ? { borderBottom: 'none' } : {}),
-                      ...(hoveredRowId === row.id
-                        ? { backgroundColor: getVar('--pc-bg-hover') }
-                        : {}),
-                    }}
-                    onClick={handleRowClick}
-                    onMouseEnter={() => setHoveredRowId(row.id)}
-                    onMouseLeave={(e) => {
-                      const nextSibling = e.currentTarget.nextElementSibling;
-                      const relatedTarget = e.relatedTarget as Node | null;
-                      if (nextSibling && relatedTarget && nextSibling.contains(relatedTarget)) {
-                        return;
-                      }
-                      setHoveredRowId((prev) => (prev === row.id ? null : prev));
-                    }}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCellBasic
-                        key={cell.id}
-                        cell={cell}
-                        className={classNames?.cellClassName}
-                      />
-                    ))}
-                  </PCTable.Row>
-
-                  {/* Expanded row */}
-                  {rowExpandedComponent && (
-                    <PCTable.Row
-                      className={classNames?.expandedRowClassName}
-                      style={{
-                        pointerEvents: row.getIsExpanded() ? 'auto' : 'none',
-                      }}
-                      onMouseEnter={() => setHoveredRowId(row.id)}
-                      onMouseLeave={(e) => {
-                        const previousSibling = e.currentTarget.previousElementSibling;
-                        const relatedTarget = e.relatedTarget as Node | null;
-                        if (previousSibling && relatedTarget && previousSibling.contains(relatedTarget)) {
-                          return;
-                        }
-                        setHoveredRowId((prev) => (prev === row.id ? null : prev));
-                      }}
-                    >
-                      <PCTable.Cell
-                        colSpan={row.getVisibleCells().length}
-                        className={classNames?.expandedCellClassName}
-                        style={{
-                          padding: row.getIsExpanded() ? undefined : '0',
-                          height: row.getIsExpanded() ? undefined : '0',
-                          border: 'none',
-                        }}
-                      >
-                        <div
-                          style={{
-                            overflow: 'hidden',
-                            maxHeight: row.getIsExpanded() ? '1200px' : '0',
-                            opacity: row.getIsExpanded() ? 1 : 0,
-                            transform: row.getIsExpanded() ? 'translateY(0)' : 'translateY(-6px)',
-                            transition:
-                              'max-height 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, transform 220ms ease',
-                            willChange: 'max-height, opacity, transform',
-                          }}
-                        >
-                          {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>
-  );
-}