@bytebrand/fe-ui-core-autobahn 1.0.0

package/ui/Modal.tsx

@@ -0,0 +1,187 @@
+// Autobahn (auto.de redesign) — md3 dialog (modal).
+//
+// A real MD3 dialog used by the new Autobahn pages in place of the legacy fe-ui-core
+// modals (which the page shows via appStore.showModal('SOME_ID', props) and a global
+// modal host renders into document.body — OUTSIDE the page's `.md3` subtree, so the
+// scoped md3 theme is lost there).
+//
+// To keep the md3 tokens, this component does NOT render inline: it ReactDOM.createPortal's
+// into a freshly-appended `<div className="md3">` on document.body, so `--md-*` tokens and
+// every `.md3 .xxx` rule resolve correctly even though the DOM node sits at body level.
+//
+// Behaviour parity with a typical dialog:
+//   - controlled via `open`; `onClose` fires on scrim click (when dismissOnScrim),
+//     the close IconButton, and Esc.
+//   - scrim ~50% black; body scroll-locked while open; basic focus trap (Tab/Shift+Tab
+//     cycle within the surface, focus moves into the dialog on open and is restored to the
+//     previously-focused element on close).
+//   - a11y: role=dialog, aria-modal, aria-labelledby wired to the title when present.
+//
+// Pure/presentational — no store/API access beyond document/body (all SSR-guarded). The
+// portal root carries `className="md3"` so the surface renders correctly even at body level.
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import IconButton from './IconButton';
+
+export type ModalSize = 'sm' | 'md' | 'lg';
+
+export interface ModalProps {
+  /** whether the dialog is mounted/visible. */
+  open: boolean;
+  /** fired on scrim click (if dismissOnScrim), the close button, or Esc. */
+  onClose: () => void;
+  /** dialog heading; when set, wires aria-labelledby and renders the title row label. */
+  title?: React.ReactNode;
+  /** dialog body content (scrolls when taller than the viewport). */
+  children?: React.ReactNode;
+  /** optional actions row pinned to the bottom of the surface. */
+  footer?: React.ReactNode;
+  /** surface max-width preset (default 'md'). */
+  size?: ModalSize;
+  /** close when the scrim (backdrop) is clicked (default true). */
+  dismissOnScrim?: boolean;
+  /** extra class(es) appended on the surface (layout hooks). */
+  className?: string;
+}
+
+// focusable descendants used by the basic focus trap.
+const FOCUSABLE =
+  'a[href],area[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+
+const Modal: React.FunctionComponent<ModalProps> = ({
+  open,
+  onClose,
+  title,
+  children,
+  footer,
+  size = 'md',
+  dismissOnScrim = true,
+  className,
+}) => {
+  const surfaceRef = React.useRef<HTMLDivElement | null>(null);
+  // the element focused before the dialog opened, so focus can be restored on close.
+  const prevFocusRef = React.useRef<HTMLElement | null>(null);
+  // stable id for aria-labelledby (avoids Math.random/Date.now, unavailable in this env).
+  const titleId = React.useMemo(
+    () => (title ? `mmodal-title-${Math.round((surfaceRef.current ? 1 : 0))}-${size}` : undefined),
+    [title, size],
+  );
+
+  // The portal root: a div.md3 appended to body so the scoped theme applies at body level.
+  // Created lazily and only in the browser (SSR-guarded), reused for the component's life.
+  const portalRoot = React.useMemo<HTMLDivElement | null>(() => {
+    if (typeof document === 'undefined') return null;
+    const el = document.createElement('div');
+    el.className = 'md3';
+    return el;
+  }, []);
+
+  // mount/unmount the portal root on body while open; restore body scroll + focus on close.
+  React.useEffect(() => {
+    if (!open || !portalRoot || typeof document === 'undefined') return undefined;
+
+    prevFocusRef.current = (document.activeElement as HTMLElement) || null;
+    document.body.appendChild(portalRoot);
+
+    // body scroll lock (preserve and restore the prior inline overflow).
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+
+    // move focus into the dialog (first focusable, else the surface itself).
+    const surface = surfaceRef.current;
+    if (surface) {
+      const first = surface.querySelector<HTMLElement>(FOCUSABLE);
+      (first || surface).focus();
+    }
+
+    return () => {
+      document.body.style.overflow = prevOverflow;
+      if (portalRoot.parentNode) portalRoot.parentNode.removeChild(portalRoot);
+      // restore focus to whatever was focused before opening.
+      if (prevFocusRef.current && prevFocusRef.current.focus) prevFocusRef.current.focus();
+    };
+  }, [open, portalRoot]);
+
+  // Esc to close + basic Tab focus trap, bound at the document level while open.
+  React.useEffect(() => {
+    if (!open || typeof document === 'undefined') return undefined;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+        return;
+      }
+      if (e.key !== 'Tab') return;
+      const surface = surfaceRef.current;
+      if (!surface) return;
+      const nodes = Array.prototype.slice.call(
+        surface.querySelectorAll<HTMLElement>(FOCUSABLE),
+      ) as HTMLElement[];
+      if (!nodes.length) {
+        // nothing focusable inside — keep focus on the surface.
+        e.preventDefault();
+        surface.focus();
+        return;
+      }
+      const first = nodes[0];
+      const last = nodes[nodes.length - 1];
+      const active = document.activeElement as HTMLElement | null;
+      // wrap at the edges; also pull focus back in if it has escaped the surface.
+      if (e.shiftKey) {
+        if (active === first || !surface.contains(active)) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else if (active === last || !surface.contains(active)) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener('keydown', onKeyDown, true);
+    return () => document.removeEventListener('keydown', onKeyDown, true);
+  }, [open, onClose]);
+
+  if (!open || !portalRoot) return null;
+
+  const surfaceCls = ['mmodal', `mmodal--${size}`, className].filter(Boolean).join(' ');
+
+  return ReactDOM.createPortal(
+    <div
+      className="mmodal-scrim"
+      onMouseDown={(e) => {
+        // only a click that starts AND lands on the scrim itself dismisses (not a drag
+        // that ends on the backdrop after starting inside the surface).
+        if (dismissOnScrim && e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        ref={surfaceRef}
+        className={surfaceCls}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? titleId : undefined}
+        tabIndex={-1}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        {/* head row always renders so the close button is always present. */}
+        <div className="mmodal-head">
+          {title ? (
+            <h2 id={titleId} className="mmodal-title md-headline-sm">
+              {title}
+            </h2>
+          ) : (
+            <span className="mmodal-title" aria-hidden="true" />
+          )}
+          <IconButton name="x" label="Schließen" onClick={onClose} />
+        </div>
+        <div className="mmodal-body">{children}</div>
+        {footer ? <div className="mmodal-foot">{footer}</div> : null}
+      </div>
+    </div>,
+    portalRoot,
+  );
+};
+
+export default Modal;

package/ui/Pagination.tsx

@@ -0,0 +1,140 @@
+// Autobahn (auto.de redesign) — md3 pager.
+//
+// Drop-in visual replacement for the legacy components/ui/Pagination/Pagination. Same prop
+// surface (t, className?, totalPages, step?, currentPage?, changePage?) and the SAME click
+// behaviour: the target page is clamped into [1, totalPages] before changePage() fires, so the
+// existing Mitarbeiter (DealerEmployeesPage) / MyVehicles (MyVehiclesPage) callers work unchanged.
+//
+// Visual upgrade over the legacy 3-button strip: a real md3 pager with a prev/next pill plus
+// numbered page buttons (current = filled primary) and ellipsis when the range is long.
+//
+// Pure/presentational — no store/API/window. Renders correctly only inside a `<div className="md3">`
+// subtree (scoped theme); all classes use the `mpag-` prefix.
+
+import * as React from 'react';
+
+import Icon from './Icon';
+
+export interface PaginationProps {
+  /** i18n translate — supplies the prev/next labels via common:goBack / common:goForward (legacy keys). */
+  t: (key: string, options?: object) => string;
+  /** total number of pages. */
+  totalPages: number;
+  /** 1-based current page. */
+  currentPage?: number;
+  /** fired with the chosen (clamped) 1-based page. */
+  changePage?: (page: number) => void;
+  /** kept for legacy prop-surface parity (unused by the md3 pager). */
+  step?: number;
+  /** extra class on the wrapper. */
+  className?: string;
+}
+
+// How many numbered buttons to show before collapsing the middle into ellipsis.
+// Window = first, last, current, and one neighbour each side (+ up to two ellipsis slots).
+const SIBLINGS = 1;
+const ELLIPSIS = 'ellipsis';
+
+/**
+ * Build the list of page tokens to render: numbers and 'ellipsis' gaps.
+ * Always includes page 1 and totalPages; collapses long runs around the current page.
+ */
+function buildRange(currentPage: number, totalPages: number): Array<number | typeof ELLIPSIS> {
+  // Small enough to show every page (first + last + 2*siblings + 2 ellipsis-or-page slots).
+  if (totalPages <= SIBLINGS * 2 + 5) {
+    const all: Array<number | typeof ELLIPSIS> = [];
+    for (let p = 1; p <= totalPages; p += 1) all.push(p);
+    return all;
+  }
+
+  const left = Math.max(currentPage - SIBLINGS, 1);
+  const right = Math.min(currentPage + SIBLINGS, totalPages);
+  const showLeftEllipsis = left > 2;
+  const showRightEllipsis = right < totalPages - 1;
+
+  const range: Array<number | typeof ELLIPSIS> = [1];
+  // If there is no left gap, fill pages 2..left so the run stays contiguous.
+  if (showLeftEllipsis) range.push(ELLIPSIS);
+  else for (let p = 2; p < left; p += 1) range.push(p);
+
+  for (let p = left; p <= right; p += 1) if (p !== 1 && p !== totalPages) range.push(p);
+
+  if (showRightEllipsis) range.push(ELLIPSIS);
+  else for (let p = right + 1; p < totalPages; p += 1) range.push(p);
+
+  range.push(totalPages);
+  return range;
+}
+
+const Pagination: React.FunctionComponent<PaginationProps> = ({
+  t,
+  totalPages,
+  currentPage = 1,
+  changePage,
+  className,
+}) => {
+  if (!totalPages || totalPages < 1) return null;
+
+  // Clamp into [1, totalPages] exactly like the legacy onButtonClick, then notify.
+  const go = (value: number) => {
+    if (!changePage) return;
+    let computed = value < 1 ? 1 : value;
+    computed = computed > totalPages ? totalPages : computed;
+    changePage(computed);
+  };
+
+  const backDisabled = currentPage <= 1;
+  const forwardDisabled = currentPage >= totalPages;
+  const wrapCls = ['mpag', className].filter(Boolean).join(' ');
+
+  const tokens = buildRange(currentPage, totalPages);
+
+  return (
+    <nav className={wrapCls} role="navigation" aria-label="Pagination">
+      <button
+        type="button"
+        className="mpag-edge mpag-edge--prev"
+        disabled={backDisabled}
+        aria-label={t('common:goBack')}
+        onClick={() => go(currentPage - 1)}
+      >
+        <Icon name="chevron-left" size={18} />
+        <span className="mpag-edge-label">{t('common:goBack')}</span>
+      </button>
+
+      <ul className="mpag-list">
+        {tokens.map((tok, i) =>
+          tok === ELLIPSIS ? (
+            <li key={`e${i}`} className="mpag-gap" aria-hidden="true">
+              &#8230;
+            </li>
+          ) : (
+            <li key={tok}>
+              <button
+                type="button"
+                className={'mpag-page' + (tok === currentPage ? ' is-current' : '')}
+                aria-current={tok === currentPage ? 'page' : undefined}
+                onClick={() => go(tok)}
+              >
+                <span className="num">{tok}</span>
+              </button>
+            </li>
+          ),
+        )}
+      </ul>
+
+      <button
+        type="button"
+        className="mpag-edge mpag-edge--next"
+        disabled={forwardDisabled}
+        aria-label={t('common:goForward')}
+        onClick={() => go(currentPage + 1)}
+      >
+        <span className="mpag-edge-label">{t('common:goForward')}</span>
+        <Icon name="chevron-right" size={18} />
+      </button>
+    </nav>
+  );
+};
+
+export default Pagination;

package/ui/Price.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export interface PriceProps {
+  /** price in EUR; formatted with the de-DE locale. */
+  value: number;
+  size?: number;
+}
+
+/** Price in strong neutral text (modern) — no green spam. */
+const Price: React.FunctionComponent<PriceProps> = ({ value, size = 26 }) => (
+  <span
+    className="num"
+    style={{
+      fontWeight: 700,
+      fontSize: size,
+      color: 'var(--md-on-surface)',
+      letterSpacing: '-.5px',
+      whiteSpace: 'nowrap',
+    }}
+  >
+    {value.toLocaleString('de-DE')} €
+  </span>
+);
+
+export default Price;

package/ui/PriceEvalBar.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { TIER_COLORS, TIER_LABELS, RatingTier } from '../constants';
+
+export interface PriceEvalBarProps {
+  /** price tier 0 (Top) … 4 (Hoch). */
+  tier?: RatingTier;
+  /** thinner bar (6px instead of 8px). */
+  compact?: boolean;
+}
+
+/**
+ * Preisbewertung mini bar — the trust signal: green→red gradient with a marker
+ * at the car's tier. Colors/labels come from the shared autobahn constants.
+ */
+const PriceEvalBar: React.FunctionComponent<PriceEvalBarProps> = ({ tier = 1, compact }) => (
+  <div style={{ width: '100%' }}>
+    <div
+      style={{
+        position: 'relative',
+        display: 'flex',
+        height: compact ? 6 : 8,
+        borderRadius: 'var(--md-r-full)',
+        overflow: 'hidden',
+      }}
+      aria-label={TIER_LABELS[tier]}
+    >
+      {TIER_COLORS.map((c, i) => (
+        <div key={i} style={{ flex: 1, background: c, opacity: i === tier ? 1 : 0.32 }} />
+      ))}
+      <span
+        style={{
+          position: 'absolute',
+          top: '50%',
+          left: `calc(${(tier + 0.5) * 20}% - 6px)`,
+          transform: 'translateY(-50%)',
+          width: 12,
+          height: 12,
+          borderRadius: '50%',
+          background: '#fff',
+          boxShadow: '0 0 0 3px ' + TIER_COLORS[tier],
+        }}
+      />
+    </div>
+  </div>
+);
+
+export default PriceEvalBar;

package/ui/SaveChip.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { TranslationFunction } from '../types';
+
+import Icon from './Icon';
+
+export interface SaveChipProps {
+  /** amount saved in EUR; formatted with the de-DE locale. */
+  amount: number;
+  t: TranslationFunction;
+}
+
+/** Savings chip (deal accent — used sparingly). */
+const SaveChip: React.FunctionComponent<SaveChipProps> = ({ amount, t }) => (
+  <span
+    style={{
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 5,
+      height: 26,
+      padding: '0 11px',
+      borderRadius: 'var(--md-r-full)',
+      background: 'var(--md-good)',
+      color: '#fff',
+      fontSize: 12.5,
+      fontWeight: 700,
+      whiteSpace: 'nowrap',
+    }}
+  >
+    <Icon name="trending-down" size={14} stroke={2.4} />
+    {t('autobahn:card.price.savedAmount', { amount: amount.toLocaleString('de-DE') })}
+  </span>
+);
+
+export default SaveChip;

package/ui/Segmented.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import Icon from './Icon';
+
+/**
+ * [value, label, optional kebab-case lucide icon name, optional explicit aria-label].
+ *
+ * `label` doubles as the button's visible text AND (when non-empty) its accessible name.
+ * Icon-only options (empty `label`, e.g. the SRP list/grid view toggle) render no visible
+ * text, so `Segmented` derives an accessible name from `key` (Title-cased) when neither
+ * `label` nor an explicit `ariaLabel` is supplied — every rendered `<button>` always ends up
+ * with SOME discernible name (WCAG 4.1.2 / axe "button-name"). Pass `ariaLabel` explicitly for
+ * a real (ideally translated) name instead of relying on the key-derived fallback.
+ */
+export type SegmentedOption = readonly [key: string, label: string, icon?: string, ariaLabel?: string];
+
+export interface SegmentedProps {
+  options: ReadonlyArray<SegmentedOption>;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+/** Title-cases a raw option key ('list' -> 'List') as a last-resort accessible name. */
+const titleCase = (s: string): string => (s ? s.charAt(0).toUpperCase() + s.slice(1) : s);
+
+const Segmented: React.FunctionComponent<SegmentedProps> = ({ options, value, onChange }) => (
+  <div className="segmented">
+    {options.map(([k, label, icon, ariaLabel]) => {
+      // only set aria-label when there's no visible text label already providing the name —
+      // avoids a redundant/conflicting name on labelled buttons (WCAG 2.5.3 Label in Name).
+      const accessibleName = ariaLabel || (label ? undefined : titleCase(k));
+      return (
+        <button
+          key={k}
+          type="button"
+          className={value === k ? 'on' : ''}
+          aria-label={accessibleName}
+          onClick={() => onChange(k)}
+        >
+          {icon && <Icon name={icon} size={16} />}
+          {label}
+        </button>
+      );
+    })}
+  </div>
+);
+
+export default Segmented;

package/ui/Skeleton.tsx

@@ -0,0 +1,75 @@
+// Autobahn (auto.de redesign) — md3 loading skeleton.
+//
+// md3.css ships no skeleton class, so this is the ONE addition covering every
+// legacy `Skeleton`/`SkeletonItem` (MUI) call site: a div with an animated
+// gradient shimmer built from --md surface tokens. Prop surface mirrors the
+// subset fe-main actually used (variant / width / height / className / style;
+// `animation` is accepted and ignored — the shimmer always runs).
+// Renders correctly only inside a `<div className="md3">` subtree.
+
+import React from 'react';
+
+export interface SkeletonProps {
+  variant?: 'text' | 'rectangular' | 'circular';
+  width?: number | string;
+  height?: number | string;
+  className?: string;
+  style?: React.CSSProperties;
+  /** legacy MUI prop, accepted and ignored. */
+  animation?: 'pulse' | 'wave' | false;
+  children?: React.ReactNode;
+}
+
+const SKELETON_CSS = `
+.md3 .mskeleton {
+  display: block;
+  background: linear-gradient(90deg, var(--md-sc) 25%, var(--md-sc-high, var(--md-sc-lowest)) 37%, var(--md-sc) 63%);
+  background-size: 400% 100%;
+  animation: md3-skeleton-shimmer 1.4s ease infinite;
+  border-radius: var(--md-r-sm);
+}
+.md3 .mskeleton--text { border-radius: var(--md-r-xs, 4px); transform: scale(1, 0.7); }
+.md3 .mskeleton--circular { border-radius: 50%; }
+@keyframes md3-skeleton-shimmer {
+  0% { background-position: 100% 50%; }
+  100% { background-position: 0 50%; }
+}`;
+
+const SKELETON_STYLE_ID = 'md3-skeleton-styles';
+
+// one <style id> in document.head no matter how many skeletons mount — the same
+// pattern fe-main's VehicleSmallCardMd3 uses. SSR-safe (guarded document access).
+function ensureStylesInjected(): void {
+  if (typeof document === 'undefined' || document.getElementById(SKELETON_STYLE_ID)) {
+    return;
+  }
+  const style = document.createElement('style');
+  style.id = SKELETON_STYLE_ID;
+  style.innerHTML = SKELETON_CSS;
+  document.head.appendChild(style);
+}
+
+const Skeleton: React.FunctionComponent<SkeletonProps> = ({
+  variant = 'rectangular', width, height, className, style, children,
+}) => {
+  React.useEffect(() => { ensureStylesInjected(); }, []);
+  const dims: React.CSSProperties = {};
+  if (width != null) dims.width = width;
+  if (height != null) dims.height = height;
+  if (variant === 'text' && height == null) dims.height = '1.2em';
+  return (
+    <span
+      className={
+        'mskeleton' +
+        (variant !== 'rectangular' ? ` mskeleton--${variant}` : '') +
+        (className ? ` ${className}` : '')
+      }
+      style={{ ...dims, ...style }}
+      aria-hidden='true'
+    >
+      {children}
+    </span>
+  );
+};
+
+export default Skeleton;

package/ui/Spec.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import Icon from './Icon';
+
+export interface SpecProps {
+  /** kebab-case lucide icon name. */
+  icon: string;
+  /** caption shown beneath the bold value. */
+  label?: React.ReactNode;
+  /** the bold value. */
+  children?: React.ReactNode;
+}
+
+const Spec: React.FunctionComponent<SpecProps> = ({ icon, label, children }) => (
+  <div className="specitem">
+    <Icon name={icon} size={20} stroke={1.75} />
+    <div>
+      <b>{children}</b>
+      <span>{label}</span>
+    </div>
+  </div>
+);
+
+export default Spec;

package/ui/Stars.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import Icon from './Icon';
+
+export interface StarsProps {
+  /** rating value 0–5; each star fills when value − index >= 0.5. */
+  value: number;
+  size?: number;
+}
+
+/** 5-star row (rounded to nearest .5). */
+const Stars: React.FunctionComponent<StarsProps> = ({ value, size = 16 }) => (
+  <span style={{ display: 'inline-flex', gap: 1 }}>
+    {[0, 1, 2, 3, 4].map((i) => {
+      const fill = value - i;
+      return (
+        <Icon
+          key={i}
+          name={fill >= 0.5 ? 'star' : 'star'}
+          size={size}
+          color={fill >= 0.5 ? '#F2A900' : '#D8D6DC'}
+          style={{ fill: fill >= 0.5 ? '#F2A900' : '#D8D6DC' }}
+        />
+      );
+    })}
+  </span>
+);
+
+export default Stars;

package/ui/StatChip.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import Icon from './Icon';
+
+export type StatChipTone = 'good' | 'warn';
+
+export interface StatChipProps {
+  tone?: StatChipTone;
+  /** kebab-case lucide icon name rendered before the content. */
+  icon?: string;
+  children?: React.ReactNode;
+}
+
+const StatChip: React.FunctionComponent<StatChipProps> = ({ tone = 'good', icon, children }) => (
+  <span className={`statchip statchip--${tone}`}>
+    {icon && <Icon name={icon} size={14} />}
+    {children}
+  </span>
+);
+
+export default StatChip;