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

package/src/RedactoPrivacyCenter/components/AppShell/AppShell.tsx

@@ -1,268 +0,0 @@
-import {
-  Suspense,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type CSSProperties,
-} from 'react';
-import { useTranslation } from 'react-i18next';
-import { LocaleContext } from '../../context/LocaleContext';
-import { pcStyles } from '../../styles/pcStyles';
-import { getVar } from '../../lib/utils';
-import Footer from '../../ui/Footer';
-import i18n from '../../lib/i18n';
-import { useMediaQuery } from '../../../RedactoNoticeConsent/useMediaQuery';
-import { useSidebarState } from './hooks/useSidebarState';
-import { useKeyboardShortcut } from './hooks/useKeyboardShortcut';
-import { TopAppBar } from './TopAppBar';
-import { SidebarNav } from './SidebarNav';
-import { MobileNavDrawer } from './MobileNavDrawer';
-import { PageHeader } from './PageHeader';
-import { PCLoader } from '../../ui';
-import { useDataAvailability } from '../../context/DataAvailabilityContext';
-import { PrivacyCenterEmptyState } from '../PrivacyCenterEmptyState';
-import { PrivacyCenterSessionExpired } from '../PrivacyCenterSessionExpired';
-import type { PrivacyCenterLayoutProps } from '../types';
-
-export default function AppShell({
-  children,
-  sidebarClassName,
-  contentClassName,
-  onBack,
-}: PrivacyCenterLayoutProps) {
-  const { t } = useTranslation();
-  const sidebar = useSidebarState();
-  const [locale, setLocale] = useState(i18n.language);
-  const [isMobileNavOpen, setMobileNavOpen] = useState(false);
-  const hamburgerRef = useRef<HTMLButtonElement>(null);
-
-  const isMobile = useMediaQuery('(max-width: 639px)');
-
-  // Keep the shell minimal — top bar + a content spinner — until we've CONFIRMED
-  // the user has data. Hiding the sidebar/tabs/bell during 'checking' (not just
-  // 'empty') stops the nav from flashing in on refresh only to disappear when
-  // the API resolves to "no data". The branded top bar stays visible throughout.
-  const { status } = useDataAvailability();
-  const hideNav = status !== 'has-data';
-
-  // Close mobile drawer when crossing the breakpoint
-  useEffect(() => {
-    if (!isMobile && isMobileNavOpen) setMobileNavOpen(false);
-  }, [isMobile, isMobileNavOpen]);
-
-  useEffect(() => {
-    const onChange = () => setLocale(i18n.language);
-    i18n.on('languageChanged', onChange);
-    return () => i18n.off('languageChanged', onChange);
-  }, []);
-
-  const handleSidebarToggle = useCallback(() => {
-    sidebar.toggle();
-  }, [sidebar]);
-
-  // Cmd/Ctrl+B toggles sidebar (or mobile drawer on small screens)
-  useKeyboardShortcut(
-    { key: 'b', mod: true },
-    useCallback(() => {
-      if (isMobile) setMobileNavOpen((prev) => !prev);
-      else sidebar.toggle();
-    }, [isMobile, sidebar]),
-  );
-
-  const rootStyle: CSSProperties = {
-    display: 'flex',
-    flexDirection: 'column',
-    minHeight: '100vh',
-    background: getVar('--pc-bg-shell'),
-    position: 'relative',
-  };
-
-  const bodyStyle: CSSProperties = {
-    display: 'flex',
-    flex: 1,
-    minHeight: 0,
-    position: 'relative',
-  };
-
-  const mainStyle: CSSProperties = {
-    flex: 1,
-    minWidth: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    background: getVar('--pc-bg-shell'),
-  };
-
-  const contentWrapperStyle: CSSProperties = {
-    flex: 1,
-    display: 'flex',
-    flexDirection: 'column',
-    minHeight: 0,
-    padding: 'var(--pc-shell-content-padding, 0 24px)',
-    boxSizing: 'border-box',
-  };
-
-  return (
-    <LocaleContext.Provider value={{ locale, setLocale }}>
-      <Suspense
-        fallback={
-          <div
-            style={{
-              ...pcStyles.flex,
-              ...pcStyles.itemsCenter,
-              ...pcStyles.justifyCenter,
-              minHeight: '100vh',
-            }}
-          >
-            {t('loadingEllipsis')}
-          </div>
-        }
-      >
-        <main className="pc-root pc-shell-root" style={rootStyle}>
-          <TopAppBar
-            ref={hamburgerRef}
-            showHamburger={isMobile && !hideNav}
-            onOpenMobileNav={() => setMobileNavOpen(true)}
-            locale={locale}
-            onLocaleChange={setLocale}
-            onBack={onBack}
-            showNotifications={!hideNav}
-          />
-          <div className="pc-shell-body" style={bodyStyle}>
-            {!isMobile && !hideNav && (
-              <SidebarNav
-                className={sidebarClassName}
-                isExpanded={sidebar.isExpanded}
-                onToggle={handleSidebarToggle}
-              />
-            )}
-            <section className="pc-shell-content" style={mainStyle}>
-              <div className={contentClassName} style={contentWrapperStyle}>
-                {status === 'checking' ? (
-                  <div
-                    style={{
-                      ...pcStyles.flex,
-                      ...pcStyles.itemsCenter,
-                      ...pcStyles.justifyCenter,
-                      flex: 1,
-                      minHeight: 240,
-                    }}
-                  >
-                    <PCLoader variant="spinner" color="info" size="lg" />
-                  </div>
-                ) : status === 'session-expired' ? (
-                  <div style={{ flex: 1, minWidth: 0, width: '100%' }}>
-                    <PrivacyCenterSessionExpired onBack={onBack} />
-                  </div>
-                ) : status === 'empty' ? (
-                  <div style={{ flex: 1, minWidth: 0, width: '100%' }}>
-                    <PrivacyCenterEmptyState />
-                  </div>
-                ) : (
-                  <>
-                    <PageHeader />
-                    <div style={{ flex: 1, minWidth: 0, width: '100%' }}>{children}</div>
-                  </>
-                )}
-                <div
-                  style={{
-                    ...pcStyles.flex,
-                    width: '100%',
-                    ...pcStyles.itemsCenter,
-                    ...pcStyles.justifyCenter,
-                    paddingTop: 12,
-                    paddingBottom: 12,
-                  }}
-                >
-                  <Footer />
-                </div>
-              </div>
-            </section>
-          </div>
-          {isMobile && !hideNav && (
-            <MobileNavDrawer
-              isOpen={isMobileNavOpen}
-              onClose={() => setMobileNavOpen(false)}
-              returnFocusRef={hamburgerRef}
-            />
-          )}
-        </main>
-        <style>{`
-          .pc-shell-sidebar {
-            transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
-          }
-          .pc-shell-nav-item:focus-visible {
-            box-shadow: 0 0 0 2px var(--pc-border-color-focus);
-          }
-          .pc-shell-sidebar-toggle {
-            opacity: 0;
-            transition: opacity 200ms ease;
-          }
-          .pc-shell-sidebar:hover .pc-shell-sidebar-toggle,
-          .pc-shell-sidebar-toggle:hover,
-          .pc-shell-sidebar-toggle:focus-visible {
-            opacity: 1;
-          }
-          @media (prefers-reduced-motion: reduce) {
-            .pc-shell-sidebar-toggle { transition: none !important; }
-          }
-          .pc-shell-user-menu-header {
-            background: linear-gradient(135deg, var(--pc-bg-secondary) 0%, var(--pc-bg-shell) 100%);
-            background: linear-gradient(
-              135deg,
-              color-mix(in srgb, var(--pc-primary) 6%, var(--pc-bg-shell)) 0%,
-              var(--pc-bg-shell) 100%
-            );
-          }
-          .pc-shell-user-menu-identity {
-            display: flex;
-            flex-direction: column;
-            gap: 2px;
-            min-width: 0;
-            flex: 1;
-          }
-          .pc-shell-user-menu-identity-email {
-            font-size: 13px;
-            font-weight: 600;
-            color: var(--pc-text-primary);
-            line-height: 1.3;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            min-width: 0;
-          }
-          .pc-shell-user-menu-identity-id {
-            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-            font-size: 11px;
-            font-weight: 500;
-            color: var(--pc-text-secondary);
-            line-height: 1.3;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            min-width: 0;
-          }
-          .pc-popover.pc-shell-user-menu-popover {
-            border-radius: 12px !important;
-            overflow: hidden !important;
-            padding: 0 !important;
-            background: var(--pc-bg-primary) !important;
-          }
-          @media (prefers-reduced-motion: reduce) {
-            .pc-shell-sidebar { transition: none !important; }
-            .pc-shell-nav-item-icon { transform: none !important; transition: none !important; }
-          }
-          @media (max-width: 639px) {
-            :root { --pc-shell-content-padding: 0 12px; --pc-shell-pageheader-padding: 14px 0 12px; }
-          }
-          @media (min-width: 640px) and (max-width: 1023px) {
-            :root { --pc-shell-content-padding: 0 20px; --pc-shell-pageheader-padding: 18px 0 14px; }
-          }
-          @media (min-width: 1024px) {
-            :root { --pc-shell-content-padding: 0 32px; --pc-shell-pageheader-padding: 22px 0 16px; }
-          }
-        `}</style>
-      </Suspense>
-    </LocaleContext.Provider>
-  );
-}

package/src/RedactoPrivacyCenter/components/AppShell/MobileNavDrawer.tsx

@@ -1,218 +0,0 @@
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  type CSSProperties,
-  type RefObject,
-} from 'react';
-import { createPortal } from 'react-dom';
-import { useTranslation } from 'react-i18next';
-import { X } from 'lucide-react';
-import { PCActionIcon, PCAvatar } from '../../ui';
-import { useMenuItemsPC } from '../../lib/constants';
-import { useBranding } from '../../context/BrandingContext';
-import { useOrganization } from '../../context/OrganizationContext';
-import { getVar } from '../../lib/utils';
-import { NavItem } from './NavItem';
-
-type MobileNavDrawerProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  returnFocusRef?: RefObject<HTMLElement>;
-};
-
-export function MobileNavDrawer({ isOpen, onClose, returnFocusRef }: MobileNavDrawerProps) {
-  const { t } = useTranslation();
-  const menuItems = useMenuItemsPC();
-  const branding = useBranding();
-  const { organization } = useOrganization();
-  const displayName = branding?.brand_name || organization?.name || '';
-  const drawerRef = useRef<HTMLDivElement>(null);
-  const firstNavRef = useRef<HTMLDivElement>(null);
-
-  const flatNavItems = useMemo(
-    () => menuItems.filter((item) => Boolean(item.href)),
-    [menuItems],
-  );
-
-  // body scroll lock
-  useEffect(() => {
-    if (typeof document === 'undefined') return;
-    if (!isOpen) return;
-    const previous = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-    return () => {
-      document.body.style.overflow = previous;
-    };
-  }, [isOpen]);
-
-  // Esc to close + focus management
-  useEffect(() => {
-    if (!isOpen || typeof window === 'undefined') return;
-
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        onClose();
-      }
-    };
-    window.addEventListener('keydown', onKey);
-
-    // Move focus into drawer
-    const focusTimer = window.setTimeout(() => {
-      firstNavRef.current?.focus();
-      // If the wrapper isn't focusable, focus the first focusable child
-      const target = firstNavRef.current?.querySelector<HTMLElement>(
-        'button, [href], [tabindex]:not([tabindex="-1"])',
-      );
-      target?.focus();
-    }, 30);
-
-    return () => {
-      window.removeEventListener('keydown', onKey);
-      window.clearTimeout(focusTimer);
-    };
-  }, [isOpen, onClose]);
-
-  // return focus to trigger on close
-  useEffect(() => {
-    if (isOpen) return;
-    if (typeof window === 'undefined') return;
-    const node = returnFocusRef?.current;
-    if (!node) return;
-    const t = window.setTimeout(() => node.focus(), 0);
-    return () => window.clearTimeout(t);
-  }, [isOpen, returnFocusRef]);
-
-  const handleNavigate = useCallback(() => {
-    onClose();
-  }, [onClose]);
-
-  const overlayStyle: CSSProperties = {
-    position: 'fixed',
-    inset: 0,
-    zIndex: 1190,
-    background: getVar('--pc-bg-overlay'),
-    opacity: isOpen ? 1 : 0,
-    pointerEvents: isOpen ? 'auto' : 'none',
-    transition: 'opacity 200ms ease',
-  };
-
-  const drawerStyle: CSSProperties = {
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    width: 280,
-    maxWidth: '85vw',
-    zIndex: 1195,
-    background: getVar('--pc-bg-shell'),
-    borderRight: `1px solid ${getVar('--pc-border-color')}`,
-    boxShadow: '12px 0 32px rgba(15, 23, 42, 0.18)',
-    transform: isOpen ? 'translateX(0)' : 'translateX(-100%)',
-    transition: 'transform 220ms cubic-bezier(0.4, 0, 0.2, 1)',
-    display: 'flex',
-    flexDirection: 'column',
-  };
-
-  if (typeof document === 'undefined') return null;
-
-  return createPortal(
-    <>
-      <div
-        style={overlayStyle}
-        onClick={onClose}
-        aria-hidden="true"
-      />
-      <aside
-        ref={drawerRef}
-        role="dialog"
-        aria-modal="true"
-        aria-label={t('openSidebarMenu')}
-        aria-hidden={!isOpen}
-        style={drawerStyle}
-      >
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            gap: 12,
-            height: 56,
-            padding: '0 12px 0 16px',
-            borderBottom: `1px solid ${getVar('--pc-border-color')}`,
-            flexShrink: 0,
-          }}
-        >
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              minWidth: 0,
-              flex: 1,
-            }}
-          >
-            {branding?.logo_url ? (
-              <img
-                src={branding.logo_url}
-                alt={displayName}
-                style={{
-                  height: 36,
-                  width: 'auto',
-                  maxWidth: 160,
-                  objectFit: 'contain',
-                  display: 'block',
-                }}
-              />
-            ) : branding?.icon_url ? (
-              <PCAvatar src={branding.icon_url} name={displayName} size="md" color="info" />
-            ) : (
-              <PCAvatar name={displayName || '?'} size="md" color="info" />
-            )}
-          </div>
-          <PCActionIcon
-            variant="default"
-            aria-label={t('closeSidebarMenu')}
-            onClick={onClose}
-            style={{
-              width: 36,
-              height: 36,
-              padding: 0,
-              color: getVar('--pc-text-primary'),
-              flexShrink: 0,
-            }}
-          >
-            <X size={20} />
-          </PCActionIcon>
-        </div>
-        <nav
-          role="navigation"
-          aria-label="Privacy center primary navigation"
-          ref={firstNavRef}
-          tabIndex={-1}
-          style={{
-            flex: 1,
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            padding: '12px 12px 24px',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 4,
-            outline: 'none',
-          }}
-        >
-          {flatNavItems.map((item) => (
-            <NavItem
-              key={item.href ?? item.name}
-              item={item}
-              mode="expanded"
-              onNavigate={handleNavigate}
-            />
-          ))}
-        </nav>
-      </aside>
-    </>,
-    document.body,
-  );
-}

package/src/RedactoPrivacyCenter/components/AppShell/NavItem.tsx

@@ -1,205 +0,0 @@
-import { useState, type CSSProperties, type KeyboardEvent } from 'react';
-import { PCTooltip } from '../../ui';
-import { useInternalNavigation, type InternalPage } from '../../context/NavigationContext';
-import { getVar } from '../../lib/utils';
-import type { MenuItem } from '../SideMenuBarPC/types';
-
-type NavItemProps = {
-  item: MenuItem;
-  mode: 'expanded' | 'collapsed';
-  onNavigate?: () => void;
-};
-
-export function NavItem({ item, mode, onNavigate }: NavItemProps) {
-  const { currentPage, navigateTo } = useInternalNavigation();
-  const [hover, setHover] = useState(false);
-
-  const isCollapsed = mode === 'collapsed';
-  const isActive = item.href ? currentPage === (item.href as InternalPage) : false;
-  const isDisabled = !!item.isComingSoon;
-  const accent = getVar('--pc-primary');
-
-  const handleActivate = () => {
-    if (isDisabled || !item.href) return;
-    navigateTo(item.href as InternalPage);
-    onNavigate?.();
-  };
-
-  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      handleActivate();
-    }
-  };
-
-  const labelColor = isDisabled
-    ? getVar('--pc-text-disabled')
-    : isActive
-      ? accent
-      : getVar('--pc-text-primary');
-
-  // Icon container styling — distinct from row, gives each item a tactile feel.
-  const containerBg = isDisabled
-    ? 'transparent'
-    : isActive
-      ? getVar('--pc-bg-tertiary')
-      : hover
-        ? getVar('--pc-bg-tertiary')
-        : getVar('--pc-bg-secondary');
-
-  const containerColor = isDisabled
-    ? getVar('--pc-text-disabled')
-    : isActive
-      ? accent
-      : hover
-        ? getVar('--pc-text-primary')
-        : getVar('--pc-text-secondary');
-
-  const containerTransform =
-    !isDisabled && !isActive && hover ? 'translateX(1px)' : 'translateX(0)';
-
-  const buttonStyle: CSSProperties = isCollapsed
-    ? {
-        position: 'relative',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: 40,
-        height: 40,
-        padding: 0,
-        margin: 0,
-        background: 'transparent',
-        color: labelColor,
-        border: 'none',
-        cursor: isDisabled ? 'not-allowed' : 'pointer',
-        opacity: isDisabled ? 0.5 : 1,
-        outline: 'none',
-        borderRadius: 8,
-        transition: 'background-color 150ms ease',
-        fontFamily: 'inherit',
-      }
-    : {
-        position: 'relative',
-        display: 'flex',
-        alignItems: 'center',
-        width: '100%',
-        height: 44,
-        padding: '0 12px 0 14px',
-        gap: 10,
-        borderRadius: 10,
-        background: isActive ? getVar('--pc-bg-hover') : 'transparent',
-        color: labelColor,
-        border: 'none',
-        cursor: isDisabled ? 'not-allowed' : 'pointer',
-        opacity: isDisabled ? 0.5 : 1,
-        outline: 'none',
-        transition: 'background-color 150ms ease, color 150ms ease, box-shadow 150ms ease',
-        fontFamily: 'inherit',
-        fontSize: 14,
-        fontWeight: isActive ? 600 : 500,
-        lineHeight: 1,
-        textAlign: 'left',
-      };
-
-  const accentBar = isActive && !isCollapsed ? (
-    <span
-      aria-hidden="true"
-      style={{
-        position: 'absolute',
-        left: 0,
-        top: 8,
-        bottom: 8,
-        width: 4,
-        borderRadius: '0 4px 4px 0',
-        background: accent,
-      }}
-    />
-  ) : null;
-
-  const iconContainer = item.icon ? (
-    <span
-      className="pc-shell-nav-item-icon"
-      aria-hidden="true"
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: 32,
-        height: 32,
-        borderRadius: 8,
-        background: containerBg,
-        color: containerColor,
-        flexShrink: 0,
-        transition: 'background-color 150ms ease, color 150ms ease, transform 150ms ease',
-        transform: containerTransform,
-      }}
-    >
-      {item.icon}
-    </span>
-  ) : null;
-
-  const label = !isCollapsed ? (
-    <span
-      style={{
-        flex: 1,
-        minWidth: 0,
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-      }}
-    >
-      {item.name}
-    </span>
-  ) : null;
-
-  const badge = item.isNew && !isCollapsed && !isDisabled ? (
-    <span
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        flexShrink: 0,
-        padding: '2px 8px',
-        borderRadius: 9999,
-        background: getVar('--pc-bg-hover'),
-        color: accent,
-        fontSize: 11,
-        fontWeight: 600,
-        lineHeight: 1.2,
-      }}
-    >
-      New
-    </span>
-  ) : null;
-
-  const button = (
-    <button
-      type="button"
-      className="pc-shell-nav-item"
-      role="link"
-      aria-current={isActive ? 'page' : undefined}
-      aria-disabled={isDisabled || undefined}
-      aria-label={isCollapsed ? item.name : undefined}
-      disabled={isDisabled}
-      onClick={handleActivate}
-      onKeyDown={handleKeyDown}
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
-      style={buttonStyle}
-    >
-      {accentBar}
-      {iconContainer}
-      {label}
-      {badge}
-    </button>
-  );
-
-  if (isCollapsed) {
-    return (
-      <PCTooltip content={item.name} placement="right" color="invert">
-        <div style={{ width: 40, height: 40, margin: '0 auto' }}>{button}</div>
-      </PCTooltip>
-    );
-  }
-
-  return button;
-}