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

package/src/RedactoPrivacyCenter/components/ConsentManagerGroupedColumns.tsx

@@ -1,318 +0,0 @@
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ChevronDown } from 'lucide-react';
-import { createColumnHelper } from '@tanstack/react-table';
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import { PCBadge, PCText } from '../ui';
-import { pcStyles } from '../styles/pcStyles';
-import type { DisplayProductGroup } from '../lib/types';
-
-dayjs.extend(relativeTime);
-
-const getVar = (varName: string): string => `var(${varName})`;
-
-type DotChipVariant = 'success' | 'error' | 'warning';
-
-const dotChipColors: Record<DotChipVariant, { bg: string; text: string }> = {
-  success: { bg: 'rgba(16, 185, 129, 0.12)', text: getVar('--pc-success') },
-  error: { bg: 'rgba(239, 68, 68, 0.12)', text: getVar('--pc-error') },
-  warning: { bg: 'rgba(245, 158, 11, 0.12)', text: getVar('--pc-warning') },
-};
-
-const ConsentCountChip = ({ count, label }: { count: number; label: string }) => (
-  <PCBadge
-    className="pc-status-badge"
-    size="sm"
-    variant="secondary"
-    style={{
-      display: 'inline-flex',
-      alignItems: 'center',
-      gap: '0.3125rem',
-      padding: '0.1875rem 0.5rem',
-      borderRadius: '9999px',
-      border: `1px solid ${getVar('--pc-border-color')}`,
-      backgroundColor: getVar('--pc-bg-primary'),
-      color: getVar('--pc-text-primary'),
-      fontSize: '0.6875rem',
-      fontWeight: 600,
-      lineHeight: 1.2,
-    }}
-  >
-    <span
-      aria-hidden="true"
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        minWidth: '1rem',
-        color: getVar('--pc-primary'),
-        fontSize: '0.6875rem',
-        fontWeight: 700,
-        lineHeight: 1,
-      }}
-    >
-      {count}
-    </span>
-    <span>{label}</span>
-  </PCBadge>
-);
-
-const DotChip = ({ variant, label }: { variant: DotChipVariant; label: string }) => {
-  const colors = dotChipColors[variant];
-  return (
-    <span
-      className="pc-status-badge"
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: '0.3125rem',
-        padding: '0.125rem 0.5rem',
-        borderRadius: '9999px',
-        fontSize: '0.6875rem',
-        fontWeight: 600,
-        lineHeight: 1.2,
-        backgroundColor: colors.bg,
-        color: colors.text,
-      }}
-    >
-      <span
-        aria-hidden="true"
-        style={{
-          width: '0.375rem',
-          height: '0.375rem',
-          borderRadius: '9999px',
-          backgroundColor: colors.text,
-          flexShrink: 0,
-        }}
-      />
-      {label}
-    </span>
-  );
-};
-
-const avatarColors: Array<'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'> = [
-  'primary',
-  'info',
-  'success',
-  'warning',
-  'error',
-  'secondary',
-];
-
-const pickAvatarColor = (seed: string) => {
-  let hash = 0;
-  for (let i = 0; i < seed.length; i += 1) {
-    hash = (hash << 5) - hash + seed.charCodeAt(i);
-    hash |= 0;
-  }
-  return avatarColors[Math.abs(hash) % avatarColors.length];
-};
-
-const avatarColorMap: Record<ReturnType<typeof pickAvatarColor>, { bg: string; color: string }> = {
-  primary: { bg: '#4f46e5', color: '#ffffff' },
-  secondary: { bg: '#6b7280', color: '#ffffff' },
-  success: { bg: '#10b981', color: '#ffffff' },
-  error: { bg: '#ec4899', color: '#ffffff' },
-  warning: { bg: '#f59e0b', color: '#ffffff' },
-  info: { bg: '#0ea5e9', color: '#ffffff' },
-};
-
-const getProductInitials = (name: string) => {
-  const words = name.trim().split(/\s+/).filter(Boolean);
-  if (words.length >= 2) {
-    return `${words[0][0]}${words[1][0]}`.toUpperCase();
-  }
-  return name.slice(0, 2).toUpperCase();
-};
-
-const ProductAvatar = ({ name, seed }: { name: string; seed: string }) => {
-  const colors = avatarColorMap[pickAvatarColor(seed)];
-  return (
-    <span
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '24px',
-        height: '24px',
-        flexShrink: 0,
-        borderRadius: '0.4375rem',
-        backgroundColor: colors.bg,
-        color: colors.color,
-        fontSize: '0.6875rem',
-        fontWeight: 700,
-        lineHeight: 1,
-      }}
-    >
-      {getProductInitials(name)}
-    </span>
-  );
-};
-
-const columnHelper = createColumnHelper<DisplayProductGroup>();
-
-export const useConsentManagerGroupedColumns = () => {
-  const { t } = useTranslation();
-
-  return useMemo(
-    () => [
-      columnHelper.display({
-        id: 'expander',
-        size: 36,
-        minSize: 36,
-        header: '',
-        cell: ({ row }) => (
-          <button
-            type="button"
-            aria-label={row.getIsExpanded() ? t('collapseSidebar') : t('expandSidebar')}
-            onClick={(e) => {
-              e.stopPropagation();
-              row.toggleExpanded();
-            }}
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              width: '14px',
-              height: '14px',
-              margin: '0 auto',
-              padding: 0,
-              border: 'none',
-              background: 'transparent',
-              cursor: 'pointer',
-              color: getVar('--pc-text-secondary'),
-              borderRadius: 0,
-              transition: 'color 0.15s ease',
-            }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.color = getVar('--pc-text-primary');
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.color = getVar('--pc-text-secondary');
-            }}
-          >
-            <ChevronDown
-              size={12}
-              style={{
-                transform: row.getIsExpanded() ? 'rotate(0deg)' : 'rotate(-90deg)',
-                transition: 'transform 0.2s ease',
-              }}
-            />
-          </button>
-        ),
-      }),
-
-      columnHelper.accessor('product_name', {
-        id: 'product',
-        size: 280,
-        minSize: 200,
-        header: t('product'),
-        cell: ({ row }) => {
-          const group = row.original;
-          const name = group.product_name || '-';
-          return (
-            <div style={{
-              ...pcStyles.flex,
-              ...pcStyles.itemsCenter,
-              gap: getVar('--pc-spacing-sm'),
-              minWidth: 0,
-            }}>
-              <ProductAvatar name={name} seed={group.product_uuid || name} />
-              <div style={{ minWidth: 0, ...pcStyles.flex, ...pcStyles.flexCol, gap: '0.125rem' }}>
-                <PCText size="sm" weight="semibold">{name}</PCText>
-                {group.product_description && (
-                  <PCText
-                    size="sm"
-                    color="secondary"
-                    style={{
-                      display: '-webkit-box',
-                      WebkitLineClamp: 1,
-                      WebkitBoxOrient: 'vertical',
-                      overflow: 'hidden',
-                      wordBreak: 'break-word',
-                      fontSize: '0.6875rem',
-                    }}
-                    title={group.product_description}
-                  >
-                    {group.product_description}
-                  </PCText>
-                )}
-              </div>
-            </div>
-          );
-        },
-        enableSorting: false,
-      }),
-
-      columnHelper.display({
-        id: 'consents',
-        size: 120,
-        minSize: 90,
-        header: t('consent'),
-        cell: ({ row }) => {
-          if (row.getIsExpanded()) return null;
-          const count = row.original.total_purposes;
-          const consentLabel = t('consent', { count });
-          return (
-            <div style={{ display: 'inline-flex', alignItems: 'center', minHeight: '1.5rem' }}>
-              <ConsentCountChip count={count} label={consentLabel} />
-            </div>
-          );
-        },
-      }),
-
-      columnHelper.display({
-        id: 'statusSummary',
-        size: 160,
-        minSize: 130,
-        header: t('status'),
-        cell: ({ row }) => {
-          if (row.getIsExpanded()) return null;
-          const g = row.original;
-          const items: Array<{ count: number; label: string; variant: 'success' | 'error' | 'warning' }> = [];
-          if (g.active_purposes > 0) {
-            items.push({ count: g.active_purposes, label: `${g.active_purposes} ${t('statusActive')}`, variant: 'success' });
-          }
-          if (g.withdrawn_purposes > 0) {
-            items.push({ count: g.withdrawn_purposes, label: `${g.withdrawn_purposes} ${t('statusWithdrawn')}`, variant: 'error' });
-          }
-          if (g.expired_purposes > 0) {
-            items.push({ count: g.expired_purposes, label: `${g.expired_purposes} ${t('statusExpired')}`, variant: 'warning' });
-          }
-          if (g.declined_purposes > 0) {
-            items.push({ count: g.declined_purposes, label: `${g.declined_purposes} ${t('statusDeclined')}`, variant: 'warning' });
-          }
-          if (items.length === 0) return <PCText size="sm" color="secondary">-</PCText>;
-          return (
-            <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, gap: '0.25rem', alignItems: 'flex-start' }}>
-              {items.map((item) => (
-                <DotChip key={item.label} variant={item.variant} label={item.label} />
-              ))}
-            </div>
-          );
-        },
-      }),
-
-      columnHelper.display({
-        id: 'latestActivity',
-        size: 208,
-        minSize: 170,
-        header: t('activity'),
-        cell: ({ row }) => {
-          if (row.getIsExpanded()) return null;
-          const ts = row.original.latest_given_date;
-          if (!ts) return <PCText size="sm" color="secondary">-</PCText>;
-          const date = dayjs(ts);
-          return (
-            <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, gap: '0.0625rem' }}>
-              <PCText size="sm" weight="medium">{date.format('MMM D, YYYY • h:mm A')}</PCText>
-              <PCText size="sm" color="secondary" style={{ fontSize: '0.6875rem' }}>{date.fromNow()}</PCText>
-            </div>
-          );
-        },
-      }),
-    ],
-    [t]
-  );
-};

package/src/RedactoPrivacyCenter/components/ConsentManagerProductCards.tsx

@@ -1,333 +0,0 @@
-import { type CSSProperties, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import { ChevronDown } from 'lucide-react';
-import { PCBadge, PCButton, PCEmpty, PCText } from '../ui';
-import type {
-  ConsentModalRecord,
-  DisplayProductGroup,
-  PurposeItem,
-} from '../lib/types';
-import { pcStyles } from '../styles/pcStyles';
-import {
-  renderGivenDate,
-  renderMethod,
-  renderModifyButton,
-  renderStatusBadge,
-  renderValidTill,
-} from './ConsentManagerCells';
-
-dayjs.extend(relativeTime);
-
-const getVar = (varName: string): string => `var(${varName})`;
-
-const avatarColors: Array<'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'> = [
-  'primary',
-  'info',
-  'success',
-  'warning',
-  'error',
-  'secondary',
-];
-
-const pickAvatarColor = (seed: string) => {
-  let hash = 0;
-  for (let i = 0; i < seed.length; i += 1) {
-    hash = (hash << 5) - hash + seed.charCodeAt(i);
-    hash |= 0;
-  }
-  return avatarColors[Math.abs(hash) % avatarColors.length];
-};
-
-const avatarColorMap: Record<ReturnType<typeof pickAvatarColor>, { bg: string; color: string }> = {
-  primary: { bg: '#4f46e5', color: '#ffffff' },
-  secondary: { bg: '#6b7280', color: '#ffffff' },
-  success: { bg: '#10b981', color: '#ffffff' },
-  error: { bg: '#ec4899', color: '#ffffff' },
-  warning: { bg: '#f59e0b', color: '#ffffff' },
-  info: { bg: '#0ea5e9', color: '#ffffff' },
-};
-
-const getProductInitials = (name: string) => {
-  const words = name.trim().split(/\s+/).filter(Boolean);
-  if (words.length >= 2) {
-    return `${words[0][0]}${words[1][0]}`.toUpperCase();
-  }
-  return name.slice(0, 2).toUpperCase();
-};
-
-const ProductAvatar = ({ name, seed }: { name: string; seed: string }) => {
-  const colors = avatarColorMap[pickAvatarColor(seed)];
-  return (
-    <span
-      className="pc-consent-mobile-avatar"
-      style={{
-        backgroundColor: colors.bg,
-        color: colors.color,
-      }}
-    >
-      {getProductInitials(name)}
-    </span>
-  );
-};
-
-type ProductStatusItem = {
-  label: string;
-  variant: 'success' | 'error' | 'warning';
-};
-
-const statusChipStyles: Record<ProductStatusItem['variant'], CSSProperties> = {
-  success: { backgroundColor: 'rgba(16, 185, 129, 0.12)', color: getVar('--pc-success') },
-  error: { backgroundColor: 'rgba(239, 68, 68, 0.12)', color: getVar('--pc-error') },
-  warning: { backgroundColor: 'rgba(245, 158, 11, 0.12)', color: getVar('--pc-warning') },
-};
-
-type ConsentManagerProductCardsProps = {
-  groups: DisplayProductGroup[];
-  onModify: (record: ConsentModalRecord) => void;
-  extraPurposesByKey?: Record<string, PurposeItem[]>;
-  hasMoreByKey?: Record<string, boolean>;
-  loadingMoreByKey?: Record<string, boolean>;
-  onLoadMore?: (group: DisplayProductGroup) => void;
-  cardKeyFor?: (group: DisplayProductGroup) => string;
-};
-
-const buildModalRecord = (
-  purpose: PurposeItem,
-  group: DisplayProductGroup
-): ConsentModalRecord => ({
-  ...purpose,
-  product_uuid: group.product_uuid,
-  product_name: group.product_name,
-  product_description: group.product_description,
-  nominator: group.nominator,
-});
-
-export function ConsentManagerProductCards({
-  groups,
-  onModify,
-  extraPurposesByKey,
-  hasMoreByKey,
-  loadingMoreByKey,
-  onLoadMore,
-  cardKeyFor,
-}: ConsentManagerProductCardsProps) {
-  const { t } = useTranslation();
-  const [expandedCards, setExpandedCards] = useState<Record<string, boolean>>({});
-
-  const handleToggle = (key: string) => {
-    setExpandedCards((prev) => ({ ...prev, [key]: !prev[key] }));
-  };
-
-  const getStatusItems = useMemo(
-    () =>
-      (group: DisplayProductGroup): ProductStatusItem[] => {
-        const items: ProductStatusItem[] = [];
-        if (group.active_purposes > 0) {
-          items.push({
-            label: `${group.active_purposes} ${t('statusActive')}`,
-            variant: 'success',
-          });
-        }
-        if (group.withdrawn_purposes > 0) {
-          items.push({
-            label: `${group.withdrawn_purposes} ${t('statusWithdrawn')}`,
-            variant: 'error',
-          });
-        }
-        if (group.expired_purposes > 0) {
-          items.push({
-            label: `${group.expired_purposes} ${t('statusExpired')}`,
-            variant: 'warning',
-          });
-        }
-        if (group.declined_purposes > 0) {
-          items.push({
-            label: `${group.declined_purposes} ${t('statusDeclined')}`,
-            variant: 'warning',
-          });
-        }
-        return items;
-      },
-    [t]
-  );
-
-  if (groups.length === 0) {
-    return (
-      <div className="pc-consent-mobile-empty">
-        <PCEmpty title={t('noData')} />
-      </div>
-    );
-  }
-
-  return (
-    <div className="pc-consent-mobile-list">
-      {groups.map((group) => {
-        const cardKey = cardKeyFor ? cardKeyFor(group) : (group.product_uuid || group.product_name);
-        const productName = group.product_name || '-';
-        const statusItems = getStatusItems(group);
-        const latestDate = group.latest_given_date ? dayjs(group.latest_given_date) : null;
-        const isExpanded = Boolean(expandedCards[cardKey]);
-        const extraPurposes = extraPurposesByKey?.[cardKey] ?? [];
-        const purposes: PurposeItem[] = [...group.purposes, ...extraPurposes];
-        const hasMore = hasMoreByKey?.[cardKey] ?? group.has_more_purposes;
-        const isLoadingMore = Boolean(loadingMoreByKey?.[cardKey]);
-        const consentLabel = t('consent', { count: group.total_purposes });
-
-        return (
-          <article key={cardKey} className="pc-consent-mobile-card">
-            <div className="pc-consent-mobile-card-header">
-              <div className="pc-consent-mobile-product-head">
-                <ProductAvatar name={productName} seed={group.product_uuid || productName} />
-                <div style={{ minWidth: 0 }}>
-                  <PCText size="sm" weight="semibold">{productName}</PCText>
-                  {group.product_description && (
-                    <PCText size="sm" color="secondary" className="pc-consent-mobile-subtle-text">
-                      {group.product_description}
-                    </PCText>
-                  )}
-                  {group.nominator && (
-                    <PCText size="sm" color="secondary" className="pc-consent-mobile-subtle-text">
-                      {t('nominatedBy')}{' '}
-                      <span style={{ fontWeight: 600 }}>
-                        {group.nominator.name || group.nominator.email || group.nominator.org_user_id}
-                      </span>
-                    </PCText>
-                  )}
-                </div>
-              </div>
-              <PCBadge
-                className="pc-status-badge"
-                size="sm"
-                variant="secondary"
-                style={{
-                  border: `1px solid ${getVar('--pc-border-color')}`,
-                  backgroundColor: getVar('--pc-bg-primary'),
-                }}
-              >
-                <span style={{ color: getVar('--pc-primary'), fontWeight: 700 }}>
-                  {group.total_purposes}
-                </span>{' '}
-                {consentLabel}
-              </PCBadge>
-            </div>
-
-            {statusItems.length > 0 && (
-              <div className="pc-consent-mobile-chip-row">
-                {statusItems.map((item) => (
-                  <span
-                    key={item.label}
-                    className="pc-status-badge pc-consent-mobile-status-chip"
-                    style={statusChipStyles[item.variant]}
-                  >
-                    {item.label}
-                  </span>
-                ))}
-              </div>
-            )}
-
-            <div className="pc-consent-mobile-activity-row">
-              <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
-                {t('activity')}
-              </PCText>
-              {latestDate ? (
-                <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, gap: '0.0625rem', minWidth: 0 }}>
-                  <PCText size="sm" weight="medium">{latestDate.format('MMM D, YYYY • h:mm A')}</PCText>
-                  <PCText size="sm" color="secondary" className="pc-consent-mobile-subtle-text">
-                    {latestDate.fromNow()}
-                  </PCText>
-                </div>
-              ) : (
-                <PCText size="sm" color="secondary">-</PCText>
-              )}
-            </div>
-
-            <button
-              type="button"
-              className="pc-consent-mobile-expand-btn"
-              onClick={() => handleToggle(cardKey)}
-              aria-expanded={isExpanded}
-            >
-              <span>
-                {purposes.length} {t('purpose')}
-              </span>
-              <ChevronDown
-                size={14}
-                style={{
-                  transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
-                  transition: 'transform 0.2s ease',
-                }}
-              />
-            </button>
-
-            {isExpanded && (
-              <div className="pc-consent-mobile-purpose-list">
-                {purposes.map((purpose) => {
-                  const modalRecord = buildModalRecord(purpose, group);
-                  return (
-                  <div
-                    key={purpose.purpose_uuid}
-                    className="pc-consent-mobile-purpose-item"
-                  >
-                    <div className="pc-consent-mobile-purpose-head">
-                      <div style={{ minWidth: 0 }}>
-                        <PCText size="sm" weight="semibold">{purpose.name}</PCText>
-                        {purpose.description && (
-                          <PCText size="sm" color="secondary" className="pc-consent-mobile-subtle-text">
-                            {purpose.description}
-                          </PCText>
-                        )}
-                      </div>
-                      {renderStatusBadge(purpose.status, t)}
-                    </div>
-
-                    <div className="pc-consent-mobile-meta-grid">
-                      <div>
-                        <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
-                          {t('givenDate')}
-                        </PCText>
-                        {renderGivenDate(purpose.given_date, { showTooltip: false })}
-                      </div>
-                      <div>
-                        <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
-                          {t('validTill')}
-                        </PCText>
-                        {renderValidTill(purpose, t)}
-                      </div>
-                      <div>
-                        <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
-                          {t('method')}
-                        </PCText>
-                        {renderMethod(purpose.method)}
-                      </div>
-                      <div className="pc-consent-mobile-action-cell">
-                        <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
-                          {t('action')}
-                        </PCText>
-                        {renderModifyButton(modalRecord, onModify, t)}
-                      </div>
-                    </div>
-                  </div>
-                  );
-                })}
-                {hasMore && onLoadMore && (
-                  <div style={{ display: 'flex', justifyContent: 'center', padding: '0.5rem' }}>
-                    <PCButton
-                      size="sm"
-                      variant="outline"
-                      onClick={() => onLoadMore(group)}
-                      disabled={isLoadingMore}
-                    >
-                      {isLoadingMore ? t('loading') : t('loadMorePurposes')}
-                    </PCButton>
-                  </div>
-                )}
-              </div>
-            )}
-          </article>
-        );
-      })}
-    </div>
-  );
-}