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

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

@@ -1,107 +0,0 @@
-import { type CSSProperties } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useInternalNavigation } from '../../context/NavigationContext';
-import { usePageChrome } from '../../context/PageChromeContext';
-import { PAGE_CHROME_BY_PAGE } from '../../lib/constants';
-import { getVar } from '../../lib/utils';
-
-export function PageHeader() {
-  const { t } = useTranslation();
-  const { currentPage } = useInternalNavigation();
-  const { pageChromeOverride, headerStatus } = usePageChrome();
-  const pageChrome = pageChromeOverride ?? PAGE_CHROME_BY_PAGE[currentPage];
-
-  if (!pageChrome) return null;
-
-  const title = t(pageChrome.titleKey);
-  const description = pageChrome.descriptionKey ? t(pageChrome.descriptionKey) : null;
-
-  const wrapperStyle: CSSProperties = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 4,
-    padding: 'var(--pc-shell-pageheader-padding, 20px 0 16px)',
-    borderBottom: `1px solid ${getVar('--pc-border-color')}`,
-    marginBottom: 16,
-  };
-
-  const titleRowStyle: CSSProperties = {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 10,
-    minWidth: 0,
-  };
-
-  const titleStyle: CSSProperties = {
-    margin: 0,
-    color: getVar('--pc-text-primary'),
-    fontSize: 18,
-    fontWeight: 700,
-    lineHeight: 1.25,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    minWidth: 0,
-  };
-
-  const descriptionStyle: CSSProperties = {
-    margin: 0,
-    color: getVar('--pc-text-secondary'),
-    fontSize: 13,
-    lineHeight: 1.4,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-  };
-
-  return (
-    <div className="pc-shell-page-header" style={wrapperStyle}>
-      <div style={titleRowStyle}>
-        <h1 style={titleStyle}>{title}</h1>
-        {headerStatus && (
-          <span
-            style={{
-              display: 'inline-flex',
-              alignItems: 'center',
-              flexShrink: 0,
-              borderRadius: 9999,
-              gap: 6,
-              padding: '4px 10px',
-              fontSize: 11,
-              fontWeight: 600,
-              lineHeight: 1.2,
-              border: `1px solid ${
-                headerStatus.variant === 'success'
-                  ? 'rgba(16, 185, 129, 0.35)'
-                  : getVar('--pc-warning-border')
-              }`,
-              background:
-                headerStatus.variant === 'success'
-                  ? 'rgba(16, 185, 129, 0.10)'
-                  : getVar('--pc-warning-bg'),
-              color:
-                headerStatus.variant === 'success'
-                  ? getVar('--pc-success')
-                  : getVar('--pc-warning-text'),
-            }}
-          >
-            <span
-              aria-hidden="true"
-              style={{
-                width: 7,
-                height: 7,
-                borderRadius: 9999,
-                background:
-                  headerStatus.variant === 'success'
-                    ? getVar('--pc-success')
-                    : getVar('--pc-warning'),
-              }}
-            />
-            {headerStatus.label}
-          </span>
-        )}
-      </div>
-      {description && <p style={descriptionStyle}>{description}</p>}
-    </div>
-  );
-}

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

@@ -1,100 +0,0 @@
-import { useMemo, type CSSProperties } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
-import { PCActionIcon } from '../../ui';
-import { useMenuItemsPC } from '../../lib/constants';
-import { getVar } from '../../lib/utils';
-import { NavItem } from './NavItem';
-
-type SidebarNavProps = {
-  isExpanded: boolean;
-  onToggle: () => void;
-  className?: string;
-};
-
-const SIDEBAR_WIDTH_EXPANDED = 240;
-const SIDEBAR_WIDTH_COLLAPSED = 64;
-const TOP_BAR_HEIGHT = 56;
-
-export function SidebarNav({ isExpanded, onToggle, className }: SidebarNavProps) {
-  const { t } = useTranslation();
-  const menuItems = useMenuItemsPC();
-  const mode = isExpanded ? 'expanded' : 'collapsed';
-
-  const asideStyle = useMemo<CSSProperties>(
-    () => ({
-      position: 'sticky',
-      top: TOP_BAR_HEIGHT,
-      alignSelf: 'flex-start',
-      flexShrink: 0,
-      height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
-      width: isExpanded ? SIDEBAR_WIDTH_EXPANDED : SIDEBAR_WIDTH_COLLAPSED,
-      background: getVar('--pc-bg-shell'),
-      borderRight: `1px solid ${getVar('--pc-border-color')}`,
-      overflow: 'visible',
-      zIndex: 5,
-      display: 'flex',
-      flexDirection: 'column',
-    }),
-    [isExpanded],
-  );
-
-  const flatNavItems = useMemo(
-    () => menuItems.filter((item) => Boolean(item.href)),
-    [menuItems],
-  );
-
-  return (
-    <aside
-      className={['pc-shell-sidebar', className].filter(Boolean).join(' ')}
-      data-expanded={isExpanded ? 'true' : 'false'}
-      style={asideStyle}
-    >
-      <PCActionIcon
-        variant="outline"
-        className="pc-shell-sidebar-toggle"
-        aria-label={isExpanded ? t('collapseSidebar') : t('expandSidebar')}
-        aria-expanded={isExpanded}
-        aria-controls="pc-shell-sidebar-nav"
-        onClick={onToggle}
-        style={{
-          position: 'absolute',
-          top: 12,
-          right: -14,
-          width: 28,
-          height: 28,
-          borderRadius: 9999,
-          background: getVar('--pc-bg-shell'),
-          borderColor: getVar('--pc-border-color'),
-          color: getVar('--pc-text-secondary'),
-          boxShadow: '0 4px 12px rgba(15, 23, 42, 0.08)',
-          zIndex: 10,
-          padding: 0,
-        }}
-      >
-        {isExpanded ? <PanelLeftClose size={14} /> : <PanelLeftOpen size={14} />}
-      </PCActionIcon>
-
-      <nav
-        id="pc-shell-sidebar-nav"
-        role="navigation"
-        aria-label="Privacy center primary navigation"
-        style={{
-          flex: 1,
-          minHeight: 0,
-          overflowY: 'auto',
-          overflowX: 'hidden',
-          padding: '24px 12px',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 4,
-          boxSizing: 'border-box',
-        }}
-      >
-        {flatNavItems.map((item) => (
-          <NavItem key={item.href ?? item.name} item={item} mode={mode} />
-        ))}
-      </nav>
-    </aside>
-  );
-}

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

@@ -1,339 +0,0 @@
-import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type CSSProperties,
-  type ForwardedRef,
-  type Ref,
-} from 'react';
-import { useTranslation } from 'react-i18next';
-import { Check, ChevronDown, Globe2, Menu } from 'lucide-react';
-import { PCActionIcon, PCAvatar, PCSelect } from '../../ui';
-import { useBranding } from '../../context/BrandingContext';
-import { useOrganization } from '../../context/OrganizationContext';
-import { useInternalNavigation } from '../../context/NavigationContext';
-import { getVar } from '../../lib/utils';
-import { languageOptions } from '../../lib/constants';
-import i18n from '../../lib/i18n';
-import { NotificationBell } from '../NotificationHub/NotificationBell';
-import { UserMenu } from './UserMenu';
-
-type TopAppBarProps = {
-  onOpenMobileNav: () => void;
-  showHamburger: boolean;
-  locale: string;
-  onLocaleChange: (next: string) => void;
-  onBack?: 'back' | 'signout';
-  showNotifications?: boolean;
-};
-
-export const TopAppBar = forwardRef<HTMLButtonElement, TopAppBarProps>(function TopAppBar(
-  { onOpenMobileNav, showHamburger, locale, onLocaleChange, onBack, showNotifications = true },
-  hamburgerRef,
-) {
-  const { t } = useTranslation();
-  const branding = useBranding();
-  const { organization } = useOrganization();
-  const { navigateTo } = useInternalNavigation();
-
-  const displayName = branding?.brand_name || organization?.name || '';
-  const hasLogoImage = Boolean(branding?.logo_url);
-
-  const handleLanguageChange = useCallback(
-    (value: unknown) => {
-      const langValue = value as { value: string; label: string } | null;
-      if (!langValue) return;
-      void i18n.changeLanguage(langValue.value);
-      onLocaleChange(langValue.value);
-    },
-    [onLocaleChange],
-  );
-
-  const headerStyle: CSSProperties = {
-    position: 'sticky',
-    top: 0,
-    left: 0,
-    right: 0,
-    zIndex: 50,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: 16,
-    height: 56,
-    paddingLeft: 16,
-    paddingRight: 16,
-    background: getVar('--pc-bg-shell'),
-    borderBottom: `1px solid ${getVar('--pc-border-color')}`,
-    boxSizing: 'border-box',
-  };
-
-  const brandButtonStyle: CSSProperties = {
-    display: 'inline-flex',
-    alignItems: 'center',
-    padding: 4,
-    margin: 0,
-    border: 'none',
-    background: 'transparent',
-    color: getVar('--pc-text-primary'),
-    cursor: 'pointer',
-    borderRadius: 8,
-    fontFamily: 'inherit',
-    flexShrink: 0,
-  };
-
-  return (
-    <>
-      <header role="banner" className="pc-shell-topbar" style={headerStyle}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
-          {showHamburger && (
-            <HamburgerButton
-              ref={hamburgerRef as Ref<HTMLButtonElement>}
-              onClick={onOpenMobileNav}
-              label={t('openSidebarMenu')}
-            />
-          )}
-          <button
-            type="button"
-            onClick={() => navigateTo('consent-manager')}
-            aria-label={displayName ? `Go to ${displayName} privacy center` : 'Go to privacy center'}
-            style={brandButtonStyle}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.background = getVar('--pc-bg-hover');
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.background = 'transparent';
-            }}
-          >
-            <span
-              style={{
-                display: 'inline-flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                flexShrink: 0,
-                height: 32,
-              }}
-            >
-              {hasLogoImage ? (
-                <img
-                  src={branding!.logo_url!}
-                  alt={displayName}
-                  style={{
-                    height: 32,
-                    width: 'auto',
-                    maxWidth: 200,
-                    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" />
-              )}
-            </span>
-          </button>
-        </div>
-
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 8,
-            flexShrink: 0,
-          }}
-          className="pc-shell-topbar-actions"
-        >
-          {showHamburger ? (
-            <CompactLanguageMenu
-              locale={locale}
-              onChange={(value) => {
-                void i18n.changeLanguage(value);
-                onLocaleChange(value);
-              }}
-            />
-          ) : (
-            <PCSelect
-              size="sm"
-              searchable
-              prefix={<Globe2 size={12} strokeWidth={1.8} />}
-              searchPlaceholder={t('searchPlaceholder')}
-              noOptionsMessage={t('noOptionsFound')}
-              style={{
-                width: 'auto',
-                minWidth: 120,
-                maxWidth: 'min(60vw, 280px)',
-                flexShrink: 0,
-              }}
-              options={languageOptions}
-              value={languageOptions.find((opt) => opt.value === locale) || null}
-              onChange={handleLanguageChange}
-            />
-          )}
-          {showNotifications && <NotificationBell />}
-          <UserMenu onBack={onBack} />
-        </div>
-      </header>
-      <style>{`
-        @media (max-width: 639px) {
-          .pc-shell-topbar { padding-left: 8px !important; padding-right: 8px !important; gap: 8px !important; }
-          .pc-shell-topbar-actions { gap: 4px !important; }
-        }
-      `}</style>
-    </>
-  );
-});
-
-type CompactLanguageMenuProps = {
-  locale: string;
-  onChange: (value: string) => void;
-};
-
-function CompactLanguageMenu({ locale, onChange }: CompactLanguageMenuProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [open, setOpen] = useState(false);
-
-  useEffect(() => {
-    if (!open) return;
-    const onDocMouseDown = (event: MouseEvent) => {
-      if (!containerRef.current?.contains(event.target as Node)) {
-        setOpen(false);
-      }
-    };
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') setOpen(false);
-    };
-    document.addEventListener('mousedown', onDocMouseDown);
-    document.addEventListener('keydown', onKey);
-    return () => {
-      document.removeEventListener('mousedown', onDocMouseDown);
-      document.removeEventListener('keydown', onKey);
-    };
-  }, [open]);
-
-  const code = (locale || 'en').split('-')[0]!.toUpperCase();
-  const selectedLabel =
-    languageOptions.find((opt) => opt.value === locale)?.label ?? locale;
-
-  return (
-    <div ref={containerRef} style={{ position: 'relative', flexShrink: 0 }}>
-      <button
-        type="button"
-        aria-haspopup="listbox"
-        aria-expanded={open}
-        aria-label={`Language: ${selectedLabel}`}
-        onClick={() => setOpen((v) => !v)}
-        style={{
-          display: 'inline-flex',
-          alignItems: 'center',
-          gap: 4,
-          height: 32,
-          padding: '0 8px 0 10px',
-          borderRadius: 9999,
-          background: getVar('--pc-bg-shell'),
-          border: `1px solid ${getVar('--pc-border-color')}`,
-          color: getVar('--pc-text-primary'),
-          cursor: 'pointer',
-          fontFamily: 'inherit',
-          fontSize: 12,
-          fontWeight: 600,
-          letterSpacing: '0.02em',
-          lineHeight: 1,
-        }}
-      >
-        {code}
-        <ChevronDown size={12} strokeWidth={2} />
-      </button>
-      {open && (
-        <div
-          role="listbox"
-          aria-label="Language"
-          style={{
-            position: 'absolute',
-            top: 'calc(100% + 6px)',
-            right: 0,
-            minWidth: 200,
-            maxHeight: 320,
-            overflowY: 'auto',
-            background: getVar('--pc-bg-primary'),
-            border: `1px solid ${getVar('--pc-border-color')}`,
-            borderRadius: 12,
-            boxShadow: '0 8px 24px rgba(15, 23, 42, 0.15)',
-            padding: 6,
-            zIndex: 1060,
-          }}
-        >
-          {languageOptions.map((opt) => {
-            const selected = opt.value === locale;
-            return (
-              <button
-                key={opt.value}
-                type="button"
-                role="option"
-                aria-selected={selected}
-                onClick={() => {
-                  onChange(opt.value);
-                  setOpen(false);
-                }}
-                onMouseEnter={(e) => {
-                  if (!selected) {
-                    e.currentTarget.style.background = getVar('--pc-bg-hover');
-                  }
-                }}
-                onMouseLeave={(e) => {
-                  if (!selected) {
-                    e.currentTarget.style.background = 'transparent';
-                  }
-                }}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'space-between',
-                  width: '100%',
-                  padding: '8px 10px',
-                  background: selected ? getVar('--pc-bg-hover') : 'transparent',
-                  color: selected
-                    ? getVar('--pc-primary')
-                    : getVar('--pc-text-primary'),
-                  border: 'none',
-                  borderRadius: 8,
-                  fontFamily: 'inherit',
-                  fontSize: 13,
-                  fontWeight: selected ? 600 : 500,
-                  cursor: 'pointer',
-                  textAlign: 'left',
-                  transition: 'background 150ms ease',
-                }}
-              >
-                <span>{opt.label}</span>
-                {selected && <Check size={14} strokeWidth={2} />}
-              </button>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}
-
-const HamburgerButton = forwardRef<HTMLButtonElement, { onClick: () => void; label: string }>(
-  function HamburgerButton({ onClick, label }, ref: ForwardedRef<HTMLButtonElement>) {
-    return (
-      <PCActionIcon
-        ref={ref}
-        variant="default"
-        aria-label={label}
-        onClick={onClick}
-        style={{
-          width: 40,
-          height: 40,
-          padding: 0,
-          color: getVar('--pc-text-primary'),
-        }}
-      >
-        <Menu size={20} />
-      </PCActionIcon>
-    );
-  },
-);