@redacto.io/consent-sdk-react 7.3.0 → 8.1.0

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

@@ -0,0 +1,107 @@
+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

@@ -0,0 +1,100 @@
+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

@@ -0,0 +1,338 @@
+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';
+};
+
+export const TopAppBar = forwardRef<HTMLButtonElement, TopAppBarProps>(function TopAppBar(
+  { onOpenMobileNav, showHamburger, locale, onLocaleChange, onBack },
+  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}
+            />
+          )}
+          <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>
+    );
+  },
+);