@redacto.io/consent-sdk-react 4.0.0 → 5.0.0

package/src/RedactoPrivacyCenter/ui/PCAccordion.tsx

@@ -0,0 +1,93 @@
+import { type ReactNode, type CSSProperties, type HTMLAttributes } from 'react';
+import { pcStyles } from '../styles/pcStyles';
+
+export type PCAccordionProps = Readonly<
+  HTMLAttributes<HTMLDivElement> & {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+  }
+>;
+
+export function PCAccordion({ children, className = '', style = {}, ...props }: PCAccordionProps) {
+  const accordionStyle: CSSProperties = {
+    ...pcStyles.accordion,
+    ...style,
+  };
+
+  return (
+    <div className={`pc-accordion ${className}`} style={accordionStyle} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export type PCAccordionHeaderProps = Readonly<
+  Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    children: ReactNode | ((props: { open: boolean; toggle: () => void }) => ReactNode);
+    className?: string;
+    style?: CSSProperties;
+    open?: boolean;
+    onToggle?: () => void;
+  }
+>;
+
+export function PCAccordionHeader({
+  children,
+  className = '',
+  style = {},
+  open = false,
+  onToggle,
+  ...props
+}: PCAccordionHeaderProps) {
+  const headerStyle: CSSProperties = {
+    ...pcStyles.accordionHeader,
+    ...style,
+  };
+
+  return (
+    <div
+      className={`pc-accordion-header ${className}`}
+      style={headerStyle}
+      onClick={onToggle}
+      {...props}
+    >
+      {typeof children === 'function' ? children({ open, toggle: onToggle || (() => {}) }) : children}
+    </div>
+  );
+}
+
+export type PCAccordionBodyProps = Readonly<
+  HTMLAttributes<HTMLDivElement> & {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    open?: boolean;
+  }
+>;
+
+export function PCAccordionBody({
+  children,
+  className = '',
+  style = {},
+  open = false,
+  ...props
+}: PCAccordionBodyProps) {
+  const bodyStyle: CSSProperties = {
+    ...pcStyles.accordionBody,
+    maxHeight: open ? '1000px' : '0',
+    overflow: open ? 'visible' : 'hidden',
+    padding: open ? pcStyles.accordionBody.padding : '0',
+    ...style,
+  };
+
+  return (
+    <div className={`pc-accordion-body ${className}`} style={bodyStyle} {...props}>
+      {children}
+    </div>
+  );
+}
+
+// Compound component pattern
+PCAccordion.Header = PCAccordionHeader;
+PCAccordion.Body = PCAccordionBody;

package/src/RedactoPrivacyCenter/ui/PCActionIcon.tsx

@@ -0,0 +1,47 @@
+import { type ReactNode, type CSSProperties, type ButtonHTMLAttributes, forwardRef } from 'react';
+import { pcStyles } from '../styles/pcStyles';
+
+export interface PCActionIconProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  variant?: 'default' | 'outline';
+  size?: 'sm' | 'md';
+  disabled?: boolean;
+  'aria-label': string;
+}
+
+export const PCActionIcon = forwardRef<HTMLButtonElement, PCActionIconProps>(({
+  children,
+  className = '',
+  style = {},
+  variant = 'default',
+  size = 'md',
+  disabled = false,
+  type = 'button',
+  ...props
+}, ref) => {
+  const baseStyle: CSSProperties = {
+    ...pcStyles.actionIcon,
+    ...(variant === 'outline' && pcStyles.actionIconOutline),
+    ...(size === 'sm' && pcStyles.actionIconSm),
+    ...(size === 'md' && pcStyles.actionIconMd),
+    ...(disabled && pcStyles.actionIconDisabled),
+    ...style,
+  };
+
+  return (
+    <button
+      ref={ref}
+      type={type}
+      className={`pc-action-icon ${className}`}
+      style={baseStyle}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+});
+
+PCActionIcon.displayName = 'PCActionIcon';

package/src/RedactoPrivacyCenter/ui/PCAvatar.tsx

@@ -0,0 +1,69 @@
+import { type CSSProperties } from 'react';
+import { pcStyles } from '../styles/pcStyles';
+
+export interface PCAvatarProps {
+  name?: string;
+  src?: string;
+  className?: string;
+  style?: CSSProperties;
+  size?: 'sm' | 'md' | 'lg';
+  color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
+}
+
+function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .map((n) => n[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2);
+}
+
+function getColor(color: string): string {
+  const colorMap: Record<string, string> = {
+    primary: getVar('--pc-primary'),
+    secondary: getVar('--pc-secondary'),
+    success: getVar('--pc-success'),
+    error: getVar('--pc-error'),
+    warning: getVar('--pc-warning'),
+    info: getVar('--pc-info'),
+  };
+  return colorMap[color] || colorMap.primary;
+}
+
+const getVar = (varName: string): string => `var(${varName})`;
+
+export function PCAvatar({
+  name = '',
+  src,
+  className = '',
+  style = {},
+  size = 'md',
+  color = 'primary',
+}: PCAvatarProps) {
+  const avatarStyle: CSSProperties = {
+    ...pcStyles.avatar,
+    ...(size === 'sm' && pcStyles.avatarSm),
+    ...(size === 'md' && pcStyles.avatarMd),
+    ...(size === 'lg' && pcStyles.avatarLg),
+    backgroundColor: getColor(color),
+    ...style,
+  };
+
+  if (src) {
+    return (
+      <img
+        src={src}
+        alt={name}
+        className={className}
+        style={avatarStyle}
+      />
+    );
+  }
+
+  return (
+    <div className={className} style={avatarStyle}>
+      {name ? getInitials(name) : '?'}
+    </div>
+  );
+}

package/src/RedactoPrivacyCenter/ui/PCBadge.tsx

@@ -0,0 +1,48 @@
+import { type ReactNode, type CSSProperties } from 'react';
+import { pcStyles } from '../styles/pcStyles';
+
+export interface PCBadgeProps {
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  variant?: 'success' | 'error' | 'warning' | 'info' | 'secondary';
+  size?: 'sm' | 'md';
+  renderAsDot?: boolean;
+}
+
+export function PCBadge({
+  children,
+  className = '',
+  style = {},
+  variant = 'secondary',
+  size = 'md',
+  renderAsDot = false,
+}: PCBadgeProps) {
+  const badgeStyle: CSSProperties = {
+    ...pcStyles.badge,
+    ...(variant === 'success' && pcStyles.badgeSuccess),
+    ...(variant === 'error' && pcStyles.badgeError),
+    ...(variant === 'warning' && pcStyles.badgeWarning),
+    ...(variant === 'info' && pcStyles.badgeInfo),
+    ...(variant === 'secondary' && pcStyles.badgeSecondary),
+    ...(size === 'sm' && pcStyles.badgeSm),
+    ...(renderAsDot && {
+      width: size === 'sm' ? '6px' : '8px',
+      height: size === 'sm' ? '6px' : '8px',
+      padding: 0,
+      borderRadius: '50%',
+      display: 'inline-block',
+    }),
+    ...style,
+  };
+
+  if (renderAsDot) {
+    return <span className={className} style={badgeStyle} />;
+  }
+
+  return (
+    <span className={className} style={badgeStyle}>
+      {children}
+    </span>
+  );
+}

package/src/RedactoPrivacyCenter/ui/PCButton.tsx

@@ -0,0 +1,77 @@
+import { type ReactNode, type CSSProperties, type ButtonHTMLAttributes } from 'react';
+import { pcStyles } from '../styles/pcStyles';
+
+const getVar = (varName: string): string => `var(${varName})`;
+
+export interface PCButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  variant?: 'primary' | 'secondary' | 'outline' | 'text' | 'danger';
+  size?: 'sm' | 'md' | 'lg';
+  isLoading?: boolean;
+  disabled?: boolean;
+}
+
+export function PCButton({
+  children,
+  className = '',
+  style = {},
+  variant = 'primary',
+  size = 'md',
+  isLoading = false,
+  disabled = false,
+  type = 'button',
+  ...props
+}: PCButtonProps) {
+  const variantClass = `pc-button-${variant}`;
+  const baseStyle: CSSProperties = {
+    ...pcStyles.button,
+    ...(variant === 'primary' && pcStyles.buttonPrimary),
+    ...(variant === 'secondary' && pcStyles.buttonSecondary),
+    ...(variant === 'outline' && pcStyles.buttonOutline),
+    ...(variant === 'text' && pcStyles.buttonText),
+    ...(variant === 'danger' && pcStyles.buttonDanger),
+    ...(size === 'sm' && pcStyles.buttonSm),
+    ...(size === 'lg' && pcStyles.buttonLg),
+    ...(disabled && pcStyles.buttonDisabled),
+    ...style,
+  };
+
+  // Determine loader color based on variant
+  const loaderColor = variant === 'primary' || variant === 'danger' || variant === 'secondary'
+    ? 'inverse'
+    : 'primary';
+
+  return (
+    <button
+      type={type}
+      className={`pc-button ${variantClass} ${className}`}
+      style={baseStyle}
+      disabled={disabled || isLoading}
+      {...props}
+    >
+      {isLoading ? (
+        <span style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '6px',
+        }}>
+          <div style={{
+            ...pcStyles.loader,
+            ...pcStyles.loaderMd,
+            ...(loaderColor === 'inverse'
+              ? { borderColor: `${getVar('--pc-text-inverse')} transparent ${getVar('--pc-text-inverse')} transparent` }
+              : pcStyles.loaderPrimary
+            ),
+          }} />
+          {children}
+        </span>
+      ) : (
+        children
+      )}
+    </button>
+  );
+}
+

package/src/RedactoPrivacyCenter/ui/PCCheckbox.tsx

@@ -0,0 +1,55 @@
+import { type ReactNode, type CSSProperties, type InputHTMLAttributes } from 'react';
+import { pcStyles } from '../styles/pcStyles';
+
+export interface PCCheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'style' | 'size' | 'type'> {
+  className?: string;
+  style?: CSSProperties;
+  label?: ReactNode;
+  labelClassName?: string;
+  size?: 'sm' | 'md';
+  checked?: boolean;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export function PCCheckbox({
+  className = '',
+  style = {},
+  label,
+  labelClassName = '',
+  size = 'md',
+  checked,
+  onChange,
+  ...props
+}: PCCheckboxProps) {
+  const checkboxStyle: CSSProperties = {
+    ...pcStyles.checkbox,
+    ...(size === 'sm' && pcStyles.checkboxSm),
+    ...style,
+  };
+
+  const labelStyle: CSSProperties = {
+    ...pcStyles.checkboxLabel,
+  };
+
+  const checkbox = (
+    <input
+      type="checkbox"
+      className={`pc-checkbox ${size === 'sm' ? 'pc-checkbox-sm' : ''} ${className}`}
+      style={checkboxStyle}
+      checked={checked}
+      onChange={onChange}
+      {...props}
+    />
+  );
+
+  if (label) {
+    return (
+      <label className={labelClassName} style={labelStyle}>
+        {checkbox}
+        <span>{label}</span>
+      </label>
+    );
+  }
+
+  return checkbox;
+}

package/src/RedactoPrivacyCenter/ui/PCCollapse.tsx

@@ -0,0 +1,107 @@
+import { type ReactNode, type CSSProperties, type HTMLAttributes, useState } from 'react';
+import { pcStyles } from '../styles/pcStyles';
+
+export type PCCollapseProps = Readonly<
+  Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    children: ReactNode | ((props: { open: boolean; toggle: () => void }) => ReactNode);
+    defaultOpen?: boolean;
+    className?: string;
+    style?: CSSProperties;
+  }
+>;
+
+export function PCCollapse({
+  children,
+  defaultOpen = false,
+  className = '',
+  style = {},
+  ...props
+}: PCCollapseProps) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  const toggle = () => setOpen(!open);
+
+  const collapseStyle: CSSProperties = {
+    ...style,
+  };
+
+  return (
+    <div className={`pc-collapse ${className}`} style={collapseStyle} {...props}>
+      {typeof children === 'function' ? children({ open, toggle }) : children}
+    </div>
+  );
+}
+
+export type PCCollapseHeaderProps = Readonly<
+  Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    children: ReactNode | ((props: { open: boolean; toggle: () => void }) => ReactNode);
+    className?: string;
+    style?: CSSProperties;
+    open?: boolean;
+    toggle?: () => void;
+  }
+>;
+
+export function PCCollapseHeader({
+  children,
+  className = '',
+  style = {},
+  open = false,
+  toggle,
+  ...props
+}: PCCollapseHeaderProps) {
+  const headerStyle: CSSProperties = {
+    ...pcStyles.accordionHeader,
+    ...style,
+  };
+
+  const rendered: ReactNode = typeof children === 'function'
+    ? children({ open, toggle: toggle || (() => {}) })
+    : children;
+
+  return (
+    <div
+      className={`pc-collapse-header ${className}`}
+      style={headerStyle}
+      onClick={toggle}
+      {...props}
+    >
+      {rendered}
+    </div>
+  );
+}
+
+export type PCCollapseBodyProps = Readonly<
+  HTMLAttributes<HTMLDivElement> & {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    open?: boolean;
+  }
+>;
+
+export function PCCollapseBody({
+  children,
+  className = '',
+  style = {},
+  open = false,
+  ...props
+}: PCCollapseBodyProps) {
+  const bodyStyle: CSSProperties = {
+    ...pcStyles.accordionBody,
+    maxHeight: open ? '1000px' : '0',
+    overflow: open ? 'visible' : 'hidden',
+    padding: open ? pcStyles.accordionBody.padding : '0',
+    ...style,
+  };
+
+  return (
+    <div className={`pc-collapse-body ${className}`} style={bodyStyle} {...props}>
+      {children}
+    </div>
+  );
+}
+
+// Compound component pattern
+PCCollapse.Header = PCCollapseHeader;
+PCCollapse.Body = PCCollapseBody;

package/src/RedactoPrivacyCenter/ui/PCEmpty.tsx

@@ -0,0 +1,35 @@
+import { type ReactNode, type CSSProperties } from 'react';
+import { pcStyles } from '../styles/pcStyles';
+
+export interface PCEmptyProps {
+  icon?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export function PCEmpty({
+  icon,
+  title,
+  description,
+  className = '',
+  style = {},
+}: PCEmptyProps) {
+  const emptyStyle: CSSProperties = {
+    ...pcStyles.empty,
+    ...style,
+  };
+
+  return (
+    <div className={`pc-empty ${className}`} style={emptyStyle}>
+      {icon && <div style={pcStyles.emptyIcon}>{icon}</div>}
+      {title && (
+        <div style={{ ...pcStyles.emptyText, fontWeight: pcStyles.fontWeightSemibold.fontWeight, marginBottom: pcStyles.gapSm.gap }}>
+          {title}
+        </div>
+      )}
+      {description && <div style={pcStyles.emptyText}>{description}</div>}
+    </div>
+  );
+}

package/src/RedactoPrivacyCenter/ui/PCInput.tsx

@@ -0,0 +1,132 @@
+import { type ReactNode, type CSSProperties, type InputHTMLAttributes, useState, useRef, useEffect } from 'react';
+import { pcStyles } from '../styles/pcStyles';
+import { X } from 'lucide-react';
+
+export type PCInputProps = Readonly<
+  Omit<InputHTMLAttributes<HTMLInputElement>, 'style' | 'size' | 'prefix'> & {
+    className?: string;
+    style?: CSSProperties;
+    label?: ReactNode;
+    error?: boolean;
+    clearable?: boolean;
+    onClear?: () => void;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    inputClassName?: string;
+    size?: 'sm' | 'md' | 'lg';
+    clearAriaLabel?: string;
+  }
+>;
+
+export function PCInput({
+  className = '',
+  style = {},
+  label,
+  error = false,
+  clearable = false,
+  onClear,
+  prefix,
+  suffix,
+  inputClassName = '',
+  size = 'md',
+  clearAriaLabel = 'Clear input',
+  value,
+  onChange,
+  ...props
+}: PCInputProps) {
+  const [showClear, setShowClear] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (clearable && value && String(value).length > 0) {
+      setShowClear(true);
+    } else {
+      setShowClear(false);
+    }
+  }, [value, clearable]);
+
+  const handleClear = () => {
+    if (inputRef.current) {
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value'
+      )?.set;
+      nativeInputValueSetter?.call(inputRef.current, '');
+      const ev = new Event('input', { bubbles: true });
+      inputRef.current.dispatchEvent(ev);
+    }
+    onClear?.();
+  };
+
+  const inputStyle: CSSProperties = {
+    ...pcStyles.input,
+    ...(size === 'sm' && pcStyles.inputSm),
+    ...(size === 'lg' && pcStyles.inputLg),
+    ...(error && pcStyles.inputError),
+    ...(props.disabled && pcStyles.inputDisabled),
+  };
+
+  const wrapperStyle: CSSProperties = {
+    ...pcStyles.inputWrapper,
+    ...style,
+  };
+
+  if (prefix || suffix || clearable) {
+    return (
+      <div className={className} style={wrapperStyle}>
+        {label && <label style={pcStyles.inputLabel}>{label}</label>}
+        <div style={pcStyles.inputWithPrefix}>
+          {prefix && <span style={pcStyles.inputPrefix}>{prefix}</span>}
+          <input
+            ref={inputRef}
+            className={`pc-input ${inputClassName}`}
+            style={{
+              ...inputStyle,
+              border: 'none',
+              flex: 1,
+              paddingLeft: prefix ? 0 : undefined,
+              paddingRight: (suffix || showClear) ? 0 : undefined,
+            }}
+            value={value}
+            onChange={onChange}
+            {...props}
+          />
+          {showClear && (
+            <button
+              type="button"
+              onClick={handleClear}
+              style={{
+                ...pcStyles.actionIcon,
+                padding: '0.25rem',
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                color: pcStyles.textSecondary.color,
+              }}
+              aria-label={clearAriaLabel}
+            >
+              <X size={16} />
+            </button>
+          )}
+          {suffix && <span style={pcStyles.inputSuffix}>{suffix}</span>}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={className} style={wrapperStyle}>
+      {label && <label style={pcStyles.inputLabel}>{label}</label>}
+      <input
+        ref={inputRef}
+        className={`pc-input ${inputClassName}`}
+        style={inputStyle}
+        value={value}
+        onChange={onChange}
+        {...props}
+      />
+    </div>
+  );
+}

package/src/RedactoPrivacyCenter/ui/PCLoader.tsx

@@ -0,0 +1,31 @@
+import { type CSSProperties } from 'react';
+import { pcStyles } from '../styles/pcStyles';
+
+export interface PCLoaderProps {
+  className?: string;
+  style?: CSSProperties;
+  size?: 'sm' | 'md' | 'lg';
+  color?: 'primary' | 'info';
+  variant?: 'spinner';
+  ariaLabel?: string;
+}
+
+export function PCLoader({
+  className = '',
+  style = {},
+  size = 'md',
+  color = 'primary',
+  ariaLabel = 'Loading',
+}: PCLoaderProps) {
+  const loaderStyle: CSSProperties = {
+    ...pcStyles.loader,
+    ...(size === 'sm' && pcStyles.loaderSm),
+    ...(size === 'md' && pcStyles.loaderMd),
+    ...(size === 'lg' && pcStyles.loaderLg),
+    ...(color === 'primary' && pcStyles.loaderPrimary),
+    ...(color === 'info' && pcStyles.loaderInfo),
+    ...style,
+  };
+
+  return <div className={className} style={loaderStyle} aria-label={ariaLabel} role="status" />;
+}