@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.3

package/ui/CardCarousel.tsx

@@ -1,133 +1,133 @@
-import React, { useState, useRef, useEffect } from 'react';
-
-import Icon from './Icon';
-
-export interface CardCarouselProps {
-  /** ready-to-use image URLs (already resolved by the caller — no asset/window lookup here). */
-  images: string[];
-  /** px number or any CSS length (e.g. "100%") so cards can fill their media box. */
-  height?: number | string;
-  radius?: number | string;
-  /** fired with the new active index whenever the slide changes. */
-  onChange?: (index: number) => void;
-  /** object-fit for each image; 'contain' adds inset padding. */
-  fit?: 'cover' | 'contain';
-}
-
-/**
- * Image carousel for cards — touch-swipeable, dots + hover arrows (desktop).
- * Stops click bubbling so it can live inside a clickable card.
- */
-const CardCarousel: React.FunctionComponent<CardCarouselProps> = ({
-  images,
-  height = 188,
-  radius,
-  onChange,
-  fit = 'cover',
-}) => {
-  const [i, setI] = useState(0);
-  const n = images.length;
-  // MOBX-CQ-2: reset to the first slide whenever the caller hands us a
-  // DIFFERENT gallery (this instance reused for another car) — otherwise a
-  // stale index can point past the end of a shorter gallery or show the
-  // wrong photo. Keyed on CONTENT, not array identity: parents (e.g. the
-  // VDP) rebuild the array every render, and an identity-keyed reset undid
-  // every arrow click whose onChange triggered a parent re-render (the
-  // counter advanced while the track snapped back to slide 0).
-  const gallerySignature = images.join('|');
-  useEffect(() => {
-    setI(0);
-  }, [gallerySignature]);
-  const jump = (nx: number, e?: React.SyntheticEvent) => {
-    e && e.stopPropagation();
-    setI(nx);
-    onChange && onChange(nx);
-  };
-  const go = (d: number, e?: React.SyntheticEvent) => jump((i + d + n) % n, e);
-  const trackRef = useRef<HTMLDivElement>(null);
-  const tx = useRef<number | null>(null);
-  return (
-    <div
-      className="cardcar"
-      style={{ position: 'relative', height, overflow: 'hidden', borderRadius: radius }}
-      onTouchStart={(e) => {
-        tx.current = e.touches[0].clientX;
-      }}
-      onTouchEnd={(e) => {
-        if (tx.current == null) return;
-        const dx = e.changedTouches[0].clientX - tx.current;
-        tx.current = null;
-        if (Math.abs(dx) > 40) go(dx > 0 ? -1 : 1);
-      }}
-    >
-      <div
-        ref={trackRef}
-        style={{
-          display: 'flex',
-          height: '100%',
-          transform: `translateX(-${i * 100}%)`,
-          transition: 'transform var(--dur-3) var(--ease-emphasized)',
-        }}
-      >
-        {images.map((src, k) => (
-          <img
-            key={k}
-            src={src}
-            alt=""
-            loading="lazy"
-            decoding="async"
-            style={{
-              flex: '0 0 100%',
-              width: '100%',
-              height: '100%',
-              objectFit: fit,
-              padding: fit === 'contain' ? '5% 6%' : 0,
-              boxSizing: 'border-box',
-              background: '#fff',
-            }}
-          />
-        ))}
-      </div>
-      {/* arrows + dots only when there is actually something to switch to — with a single
-          image (e.g. SRP cards before their gallery is lazy-loaded) they are dead controls. */}
-      {n > 1 && (
-        <>
-          <button className="car-arrow car-arrow--l" aria-label="zurück" onClick={(e) => go(-1, e)}>
-            <Icon name="chevron-left" size={20} />
-          </button>
-          <button className="car-arrow car-arrow--r" aria-label="weiter" onClick={(e) => go(1, e)}>
-            <Icon name="chevron-right" size={20} />
-          </button>
-          <div
-            style={{
-              position: 'absolute',
-              bottom: 9,
-              left: 0,
-              right: 0,
-              display: 'flex',
-              justifyContent: 'center',
-              gap: 6,
-              pointerEvents: 'none',
-            }}
-          >
-            {images.slice(0, 6).map((_, k) => (
-              <span
-                key={k}
-                style={{
-                  width: k === i ? 16 : 6,
-                  height: 6,
-                  borderRadius: 3,
-                  background: k === i ? 'var(--md-on-surface)' : 'rgba(26,27,34,.3)',
-                  boxShadow: '0 0 0 1px rgba(255,255,255,.5)',
-                  transition: 'width var(--dur-2)',
-                }}
-              />
-            ))}
-          </div>
-        </>
-      )}
-    </div>
-  );
-};
-
-export default CardCarousel;
+import React, { useState, useRef, useEffect } from 'react';
+
+import Icon from './Icon';
+
+export interface CardCarouselProps {
+  /** ready-to-use image URLs (already resolved by the caller — no asset/window lookup here). */
+  images: string[];
+  /** px number or any CSS length (e.g. "100%") so cards can fill their media box. */
+  height?: number | string;
+  radius?: number | string;
+  /** fired with the new active index whenever the slide changes. */
+  onChange?: (index: number) => void;
+  /** object-fit for each image; 'contain' adds inset padding. */
+  fit?: 'cover' | 'contain';
+}
+
+/**
+ * Image carousel for cards — touch-swipeable, dots + hover arrows (desktop).
+ * Stops click bubbling so it can live inside a clickable card.
+ */
+const CardCarousel: React.FunctionComponent<CardCarouselProps> = ({
+  images,
+  height = 188,
+  radius,
+  onChange,
+  fit = 'cover',
+}) => {
+  const [i, setI] = useState(0);
+  const n = images.length;
+  // MOBX-CQ-2: reset to the first slide whenever the caller hands us a
+  // DIFFERENT gallery (this instance reused for another car) — otherwise a
+  // stale index can point past the end of a shorter gallery or show the
+  // wrong photo. Keyed on CONTENT, not array identity: parents (e.g. the
+  // VDP) rebuild the array every render, and an identity-keyed reset undid
+  // every arrow click whose onChange triggered a parent re-render (the
+  // counter advanced while the track snapped back to slide 0).
+  const gallerySignature = images.join('|');
+  useEffect(() => {
+    setI(0);
+  }, [gallerySignature]);
+  const jump = (nx: number, e?: React.SyntheticEvent) => {
+    e && e.stopPropagation();
+    setI(nx);
+    onChange && onChange(nx);
+  };
+  const go = (d: number, e?: React.SyntheticEvent) => jump((i + d + n) % n, e);
+  const trackRef = useRef<HTMLDivElement>(null);
+  const tx = useRef<number | null>(null);
+  return (
+    <div
+      className="cardcar"
+      style={{ position: 'relative', height, overflow: 'hidden', borderRadius: radius }}
+      onTouchStart={(e) => {
+        tx.current = e.touches[0].clientX;
+      }}
+      onTouchEnd={(e) => {
+        if (tx.current == null) return;
+        const dx = e.changedTouches[0].clientX - tx.current;
+        tx.current = null;
+        if (Math.abs(dx) > 40) go(dx > 0 ? -1 : 1);
+      }}
+    >
+      <div
+        ref={trackRef}
+        style={{
+          display: 'flex',
+          height: '100%',
+          transform: `translateX(-${i * 100}%)`,
+          transition: 'transform var(--dur-3) var(--ease-emphasized)',
+        }}
+      >
+        {images.map((src, k) => (
+          <img
+            key={k}
+            src={src}
+            alt=""
+            loading="lazy"
+            decoding="async"
+            style={{
+              flex: '0 0 100%',
+              width: '100%',
+              height: '100%',
+              objectFit: fit,
+              padding: fit === 'contain' ? '5% 6%' : 0,
+              boxSizing: 'border-box',
+              background: '#fff',
+            }}
+          />
+        ))}
+      </div>
+      {/* arrows + dots only when there is actually something to switch to — with a single
+          image (e.g. SRP cards before their gallery is lazy-loaded) they are dead controls. */}
+      {n > 1 && (
+        <>
+          <button className="car-arrow car-arrow--l" aria-label="zurück" onClick={(e) => go(-1, e)}>
+            <Icon name="chevron-left" size={20} />
+          </button>
+          <button className="car-arrow car-arrow--r" aria-label="weiter" onClick={(e) => go(1, e)}>
+            <Icon name="chevron-right" size={20} />
+          </button>
+          <div
+            style={{
+              position: 'absolute',
+              bottom: 9,
+              left: 0,
+              right: 0,
+              display: 'flex',
+              justifyContent: 'center',
+              gap: 6,
+              pointerEvents: 'none',
+            }}
+          >
+            {images.slice(0, 6).map((_, k) => (
+              <span
+                key={k}
+                style={{
+                  width: k === i ? 16 : 6,
+                  height: 6,
+                  borderRadius: 3,
+                  background: k === i ? 'var(--md-on-surface)' : 'rgba(26,27,34,.3)',
+                  boxShadow: '0 0 0 1px rgba(255,255,255,.5)',
+                  transition: 'width var(--dur-2)',
+                }}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default CardCarousel;

package/ui/Chip.tsx

@@ -1,29 +1,29 @@
-import React from 'react';
-
-import Icon from './Icon';
-
-export interface ChipProps {
-  /** kebab-case lucide icon name rendered before the label. */
-  icon?: string;
-  /** toggled/applied state — also drives `aria-pressed` so assistive tech announces the chip
-   * as a pressed toggle button (undefined = not a toggle, so no `aria-pressed` is rendered). */
-  selected?: boolean;
-  /** renders the filter-chip variant (different selected color). */
-  filter?: boolean;
-  children?: React.ReactNode;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  /** native `<button>` type; defaults to "button" (see Button.tsx for the same footgun). */
-  type?: 'button' | 'submit' | 'reset';
-}
-
-const Chip: React.FunctionComponent<ChipProps> = ({ icon, selected, filter, children, onClick, type = 'button' }) => {
-  const cn = ['chip', filter && 'chip--filter', selected && 'chip--selected'].filter(Boolean).join(' ');
-  return (
-    <button type={type} className={cn} aria-pressed={selected} onClick={onClick}>
-      {icon && <Icon name={icon} size={16} />}
-      {children}
-    </button>
-  );
-};
-
-export default Chip;
+import React from 'react';
+
+import Icon from './Icon';
+
+export interface ChipProps {
+  /** kebab-case lucide icon name rendered before the label. */
+  icon?: string;
+  /** toggled/applied state — also drives `aria-pressed` so assistive tech announces the chip
+   * as a pressed toggle button (undefined = not a toggle, so no `aria-pressed` is rendered). */
+  selected?: boolean;
+  /** renders the filter-chip variant (different selected color). */
+  filter?: boolean;
+  children?: React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  /** native `<button>` type; defaults to "button" (see Button.tsx for the same footgun). */
+  type?: 'button' | 'submit' | 'reset';
+}
+
+const Chip: React.FunctionComponent<ChipProps> = ({ icon, selected, filter, children, onClick, type = 'button' }) => {
+  const cn = ['chip', filter && 'chip--filter', selected && 'chip--selected'].filter(Boolean).join(' ');
+  return (
+    <button type={type} className={cn} aria-pressed={selected} onClick={onClick}>
+      {icon && <Icon name={icon} size={16} />}
+      {children}
+    </button>
+  );
+};
+
+export default Chip;

package/ui/DatePicker.tsx

@@ -1,145 +1,145 @@
-// Autobahn (auto.de redesign) — md3 date field bound to a mobx-react-form field.
-//
-// Native, themeable replacement for the legacy fe-ui-core <MaterialDatePicker> (which mounts a MUI
-// <MobileDatePicker> under its own <ThemeProvider> — that second theme bleeds into the scoped `.md3`
-// subtree and reads as "not-md3"). Instead we render a single <input type="date"> styled exactly like
-// `.mfield`, so the browser supplies a locale-correct calendar popup while WE own the visual chrome.
-//
-// DATA CONTRACT — must match the legacy MaterialDatePicker usage EXACTLY (5 pages: Einstellungen
-// birthday, Checkout birthday + co-borrower birthday, VehicleEdit constructionDate), because the same
-// mobx-react-form field + validation rules + submit hooks are reused unchanged:
-//   - value: Date | string | null  (legacy passes `field.value || null`; we read field.value here).
-//   - onChange emits a **Date object** via `field.onChange(value, field.name)` — the exact call the
-//     legacy callers wired into MaterialDatePicker's `onChange(value: Date)`. Clearing emits `null`.
-//   - minDate / maxDate: Date objects (legacy: `_minDate` = 1900-01-01, `handleMaxDateForPicker()` =
-//     today−18y). We forward them to the native input as min/max=yyyy-mm-dd so out-of-range dates
-//     can't be picked, mirroring the legacy onAccept clamp.
-//   - error shown inline from field.error (legacy passed `field.hasError && field.error`).
-//
-// The native <input type="date"> is locale-free at the value level (always yyyy-mm-dd), so the
-// `format`/`language` props are accepted for signature parity but don't change the wire value; the
-// browser renders the visible date in the user's locale. observer-wrapped so it re-renders on
-// field value/error changes. Renders correctly only inside a `<div className="md3">` subtree.
-
-import * as React from 'react';
-import { observer } from 'mobx-react';
-
-export interface DatePickerProps {
-  /** mobx-react-form field (ContactDetailsForm.$('privateAddress.birthday') etc.). Typed any — the lib ships no TS types. */
-  field: any;
-  /** i18n translate — resolves the field's label/placeholder key. Optional (matches legacy, which passed t). */
-  t?: (key: string, options?: object) => string;
-  /** kept for legacy signature parity; the native input value is always locale-free yyyy-mm-dd. */
-  language?: 'de' | 'en';
-  /** earliest selectable date (legacy `_minDate`). */
-  minDate?: Date;
-  /** latest selectable date (legacy `handleMaxDateForPicker()`). */
-  maxDate?: Date;
-  /** kept for legacy signature parity (display format); does not change the emitted Date value. */
-  format?: string;
-  /** explicit visible label override (legacy ProfileTabAccount/Checkout pass a namespaced label). */
-  label?: string;
-  id?: string;
-  disabled?: boolean;
-}
-
-/** Date | string | null -> 'yyyy-mm-dd' (the native <input type="date"> value), or '' when empty/invalid. */
-function toInputValue(value: Date | string | null | undefined): string {
-  if (!value) return '';
-  const d = value instanceof Date ? value : new Date(value);
-  const time = d.getTime();
-  if (Number.isNaN(time)) return '';
-  // Use local Y/M/D (not toISOString, which shifts by timezone and can land on the previous day).
-  const y = d.getFullYear();
-  const m = `${d.getMonth() + 1}`.padStart(2, '0');
-  const day = `${d.getDate()}`.padStart(2, '0');
-  return `${y}-${m}-${day}`;
-}
-
-/** 'yyyy-mm-dd' -> a local-midnight Date (matching `new Date('01/01/1970')` semantics the legacy used), or null. */
-function fromInputValue(value: string): Date | null {
-  if (!value) return null;
-  const parts = value.split('-');
-  if (parts.length !== 3) return null;
-  const y = Number(parts[0]);
-  const m = Number(parts[1]);
-  const day = Number(parts[2]);
-  if (!y || !m || !day) return null;
-  return new Date(y, m - 1, day);
-}
-
-const DatePicker: React.FunctionComponent<DatePickerProps> = observer(
-  ({ field, t, minDate, maxDate, label, id, disabled }) => {
-    const translate = t || ((k: string) => k);
-    const hasError = !!field.hasError && !!field.error;
-
-    // Visible label: explicit `label` prop wins (namespaced callers), else FormField's pattern —
-    // prefer the field's placeholder key, else its label key. translate() returns the input
-    // unchanged when there's no translation, so this is safe for plain-string labels too.
-    const resolvedLabel =
-      label != null
-        ? label
-        : field.placeholder
-          ? translate(field.placeholder)
-          : field.label
-            ? translate(field.label)
-            : '';
-
-    const value = toInputValue(field.value);
-    const min = minDate ? toInputValue(minDate) : undefined;
-    const max = maxDate ? toInputValue(maxDate) : undefined;
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const next = fromInputValue(e.target.value);
-      // Emit a Date (or null) via the EXACT legacy call: field.onChange(value, field.name).
-      field.onChange(next as any, field.name);
-    };
-
-    const handleBlur = () => {
-      // Mirror the legacy onBlurBirthday: validate, surfacing errors if the field is invalid.
-      if (typeof field.validate === 'function') {
-        const result = field.validate();
-        if (result && typeof result.then === 'function') {
-          result.then((subField: any) => {
-            if (field.isValid === false && subField && typeof subField.showErrors === 'function') {
-              subField.showErrors(true);
-            }
-          });
-        }
-      }
-    };
-
-    return (
-      <div className="mfield-group mdate">
-        {resolvedLabel ? (
-          <label className="md-label-sm mfield-label" htmlFor={id}>
-            {resolvedLabel}
-          </label>
-        ) : null}
-        <div
-          className={
-            'mfield mdate-field' +
-            (hasError ? ' mfield--error' : '') +
-            (disabled ? ' mfield--disabled' : '')
-          }
-        >
-          <input
-            id={id}
-            type="date"
-            className="mdate-input"
-            value={value}
-            min={min}
-            max={max}
-            disabled={disabled}
-            onChange={handleChange}
-            onBlur={handleBlur}
-            style={{ width: '100%' }}
-          />
-        </div>
-        {hasError ? <span className="mfield-error-text">{field.error}</span> : null}
-      </div>
-    );
-  },
-);
-
-export default DatePicker;
+// Autobahn (auto.de redesign) — md3 date field bound to a mobx-react-form field.
+//
+// Native, themeable replacement for the legacy fe-ui-core <MaterialDatePicker> (which mounts a MUI
+// <MobileDatePicker> under its own <ThemeProvider> — that second theme bleeds into the scoped `.md3`
+// subtree and reads as "not-md3"). Instead we render a single <input type="date"> styled exactly like
+// `.mfield`, so the browser supplies a locale-correct calendar popup while WE own the visual chrome.
+//
+// DATA CONTRACT — must match the legacy MaterialDatePicker usage EXACTLY (5 pages: Einstellungen
+// birthday, Checkout birthday + co-borrower birthday, VehicleEdit constructionDate), because the same
+// mobx-react-form field + validation rules + submit hooks are reused unchanged:
+//   - value: Date | string | null  (legacy passes `field.value || null`; we read field.value here).
+//   - onChange emits a **Date object** via `field.onChange(value, field.name)` — the exact call the
+//     legacy callers wired into MaterialDatePicker's `onChange(value: Date)`. Clearing emits `null`.
+//   - minDate / maxDate: Date objects (legacy: `_minDate` = 1900-01-01, `handleMaxDateForPicker()` =
+//     today−18y). We forward them to the native input as min/max=yyyy-mm-dd so out-of-range dates
+//     can't be picked, mirroring the legacy onAccept clamp.
+//   - error shown inline from field.error (legacy passed `field.hasError && field.error`).
+//
+// The native <input type="date"> is locale-free at the value level (always yyyy-mm-dd), so the
+// `format`/`language` props are accepted for signature parity but don't change the wire value; the
+// browser renders the visible date in the user's locale. observer-wrapped so it re-renders on
+// field value/error changes. Renders correctly only inside a `<div className="md3">` subtree.
+
+import * as React from 'react';
+import { observer } from 'mobx-react';
+
+export interface DatePickerProps {
+  /** mobx-react-form field (ContactDetailsForm.$('privateAddress.birthday') etc.). Typed any — the lib ships no TS types. */
+  field: any;
+  /** i18n translate — resolves the field's label/placeholder key. Optional (matches legacy, which passed t). */
+  t?: (key: string, options?: object) => string;
+  /** kept for legacy signature parity; the native input value is always locale-free yyyy-mm-dd. */
+  language?: 'de' | 'en';
+  /** earliest selectable date (legacy `_minDate`). */
+  minDate?: Date;
+  /** latest selectable date (legacy `handleMaxDateForPicker()`). */
+  maxDate?: Date;
+  /** kept for legacy signature parity (display format); does not change the emitted Date value. */
+  format?: string;
+  /** explicit visible label override (legacy ProfileTabAccount/Checkout pass a namespaced label). */
+  label?: string;
+  id?: string;
+  disabled?: boolean;
+}
+
+/** Date | string | null -> 'yyyy-mm-dd' (the native <input type="date"> value), or '' when empty/invalid. */
+function toInputValue(value: Date | string | null | undefined): string {
+  if (!value) return '';
+  const d = value instanceof Date ? value : new Date(value);
+  const time = d.getTime();
+  if (Number.isNaN(time)) return '';
+  // Use local Y/M/D (not toISOString, which shifts by timezone and can land on the previous day).
+  const y = d.getFullYear();
+  const m = `${d.getMonth() + 1}`.padStart(2, '0');
+  const day = `${d.getDate()}`.padStart(2, '0');
+  return `${y}-${m}-${day}`;
+}
+
+/** 'yyyy-mm-dd' -> a local-midnight Date (matching `new Date('01/01/1970')` semantics the legacy used), or null. */
+function fromInputValue(value: string): Date | null {
+  if (!value) return null;
+  const parts = value.split('-');
+  if (parts.length !== 3) return null;
+  const y = Number(parts[0]);
+  const m = Number(parts[1]);
+  const day = Number(parts[2]);
+  if (!y || !m || !day) return null;
+  return new Date(y, m - 1, day);
+}
+
+const DatePicker: React.FunctionComponent<DatePickerProps> = observer(
+  ({ field, t, minDate, maxDate, label, id, disabled }) => {
+    const translate = t || ((k: string) => k);
+    const hasError = !!field.hasError && !!field.error;
+
+    // Visible label: explicit `label` prop wins (namespaced callers), else FormField's pattern —
+    // prefer the field's placeholder key, else its label key. translate() returns the input
+    // unchanged when there's no translation, so this is safe for plain-string labels too.
+    const resolvedLabel =
+      label != null
+        ? label
+        : field.placeholder
+          ? translate(field.placeholder)
+          : field.label
+            ? translate(field.label)
+            : '';
+
+    const value = toInputValue(field.value);
+    const min = minDate ? toInputValue(minDate) : undefined;
+    const max = maxDate ? toInputValue(maxDate) : undefined;
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const next = fromInputValue(e.target.value);
+      // Emit a Date (or null) via the EXACT legacy call: field.onChange(value, field.name).
+      field.onChange(next as any, field.name);
+    };
+
+    const handleBlur = () => {
+      // Mirror the legacy onBlurBirthday: validate, surfacing errors if the field is invalid.
+      if (typeof field.validate === 'function') {
+        const result = field.validate();
+        if (result && typeof result.then === 'function') {
+          result.then((subField: any) => {
+            if (field.isValid === false && subField && typeof subField.showErrors === 'function') {
+              subField.showErrors(true);
+            }
+          });
+        }
+      }
+    };
+
+    return (
+      <div className="mfield-group mdate">
+        {resolvedLabel ? (
+          <label className="md-label-sm mfield-label" htmlFor={id}>
+            {resolvedLabel}
+          </label>
+        ) : null}
+        <div
+          className={
+            'mfield mdate-field' +
+            (hasError ? ' mfield--error' : '') +
+            (disabled ? ' mfield--disabled' : '')
+          }
+        >
+          <input
+            id={id}
+            type="date"
+            className="mdate-input"
+            value={value}
+            min={min}
+            max={max}
+            disabled={disabled}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            style={{ width: '100%' }}
+          />
+        </div>
+        {hasError ? <span className="mfield-error-text">{field.error}</span> : null}
+      </div>
+    );
+  },
+);
+
+export default DatePicker;