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

package/types.ts

@@ -1,8 +1,8 @@
-// Framework-agnostic i18n contract for the whole kit.
-//
-// Components take `t` as a PROP (never a hook), so any host works: fe-main's
-// react-i18next v7, fe-landing's plain i18next/react-i18next, or a test stub.
-// This local type replaces the former `import { TranslationFunction } from
-// 'react-i18next'` — that name only resolved through fe-main's tsconfig path
-// shim and would break every other consumer.
-export type TranslationFunction = (key: string, options?: Record<string, unknown>) => string;
+// Framework-agnostic i18n contract for the whole kit.
+//
+// Components take `t` as a PROP (never a hook), so any host works: fe-main's
+// react-i18next v7, fe-landing's plain i18next/react-i18next, or a test stub.
+// This local type replaces the former `import { TranslationFunction } from
+// 'react-i18next'` — that name only resolved through fe-main's tsconfig path
+// shim and would break every other consumer.
+export type TranslationFunction = (key: string, options?: Record<string, unknown>) => string;

package/ui/Accordion.tsx

@@ -1,134 +1,134 @@
-// Autobahn (auto.de redesign) — md3 Accordion.
-//
-// Drop-in visual replacement for the legacy fe-ui-core ExpansionPanel (which wrapped
-// the MUI Accordion/AccordionSummary/AccordionDetails). Same data contract, re-skinned:
-//   - legacy `title`/`subTitle` (node + muted string) -> `title` + `subtitle`.
-//   - legacy `defaultExpanded` (every legacy call site passed it) -> `defaultExpanded`,
-//     used only in the UNCONTROLLED mode.
-//   - legacy `onChange(expanded)` -> `onToggle(expanded)`.
-//   - the validation badge a page renders in the header gets a dedicated `status` slot
-//     (VehicleEdit maps each section's `field.isValid` -> a StatChip / IconSVG today).
-//
-// Controlled vs uncontrolled:
-//   - CONTROLLED: pass `expanded` (+ usually `onToggle`). The parent owns the open/closed
-//     state — this is what VehicleEdit needs so the page can keep an `activeIndex` and let
-//     the sticky sidebar jump-to-section open the right panel. We never store open state
-//     internally in this mode; we just reflect `expanded` and report intent via `onToggle`.
-//   - UNCONTROLLED: omit `expanded`; we keep our own open state seeded from `defaultExpanded`.
-//
-// Scroll anchors are NOT swallowed. The legacy ExpansionPanel optionally wrapped itself in a
-// react-scroll <Element name=...>. In the redesign the PARENT does that wrapping (it owns the
-// section name / scroll target), so this component must not introduce its own wrapper that
-// would break the anchor. We render a plain <section> (optional `id` passthrough) and emit
-// `children` as-is — the parent's <Element> stays the scroll target.
-//
-// Pure/presentational: no store, no API, no window access. Renders correctly only inside a
-// `<div className="md3">` subtree (scoped theme). Not observer-wrapped — it binds to no mobx
-// field itself; any field-driven content (title, status badge) is passed in by the (observer)
-// parent and re-renders there.
-
-import * as React from 'react';
-
-import Icon from './Icon';
-
-export interface AccordionProps {
-  /** header title — node so callers can pass a styled span (legacy passed string | JSX.Element). */
-  title: React.ReactNode;
-  /** muted text after the title (legacy `subTitle`, e.g. "12 Fahrzeuge" / "retailPriceSub"). */
-  subtitle?: React.ReactNode;
-  /** CONTROLLED open state. When provided the parent owns open/closed (sidebar jump-to-section). */
-  expanded?: boolean;
-  /** initial open state in UNCONTROLLED mode (ignored when `expanded` is provided). Default true. */
-  defaultExpanded?: boolean;
-  /** fired with the NEXT desired open state on header activation (legacy `onChange`). */
-  onToggle?: (expanded: boolean) => void;
-  /** header-right slot, e.g. a validation badge (<StatChip/>) or count. */
-  status?: React.ReactNode;
-  children?: React.ReactNode;
-  /** id passthrough on the root (does NOT replace a parent react-scroll <Element> wrapper). */
-  id?: string;
-  /** extra class(es) appended after the `macc` classes. */
-  className?: string;
-}
-
-const Accordion: React.FunctionComponent<AccordionProps> = ({
-  title,
-  subtitle,
-  expanded,
-  defaultExpanded = true,
-  onToggle,
-  status,
-  children,
-  id,
-  className,
-}) => {
-  const isControlled = expanded !== undefined;
-  const [openUncontrolled, setOpenUncontrolled] = React.useState<boolean>(defaultExpanded);
-  const open = isControlled ? (expanded as boolean) : openUncontrolled;
-
-  // stable region id for aria-controls / aria-labelledby (no Math.random / Date.now).
-  const baseId = React.useMemo(() => {
-    if (id) return id;
-    const seed = typeof title === 'string' ? title : '';
-    return `macc-${Math.round(seed.length)}-${defaultExpanded ? 1 : 0}`;
-  }, [id, title, defaultExpanded]);
-  const headerId = `${baseId}__hd`;
-  const panelId = `${baseId}__panel`;
-
-  const toggle = () => {
-    const next = !open;
-    // notify the parent first so a controlled page can update its activeIndex.
-    if (onToggle) onToggle(next);
-    // only mutate internal state when we actually own it.
-    if (!isControlled) setOpenUncontrolled(next);
-  };
-
-  const onHeaderKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      toggle();
-    }
-  };
-
-  const cls = ['macc', open ? 'macc--open' : 'macc--closed', className].filter(Boolean).join(' ');
-
-  return (
-    <section className={cls} id={id}>
-      <button
-        type="button"
-        id={headerId}
-        className="macc-hd"
-        aria-expanded={open}
-        aria-controls={panelId}
-        onClick={toggle}
-        onKeyDown={onHeaderKeyDown}
-      >
-        <span className="macc-hd-text">
-          <span className="macc-title md-title">{title}</span>
-          {subtitle != null && subtitle !== '' ? (
-            <span className="macc-subtitle md-body">{subtitle}</span>
-          ) : null}
-        </span>
-        {status != null && status !== '' ? <span className="macc-status">{status}</span> : null}
-        <Icon name="chevron-down" cls="macc-chev" />
-      </button>
-      {/* grid 0fr->1fr collapse: animates height smoothly without a magic max-height.
-          NOT using `hidden`/display:none — that would kill the close transition. The closed
-          region is collapsed to 0 height + faded; children stay mounted (cheap sections, and
-          react-scroll anchors inside must stay measurable for jump-to-section). */}
-      <div
-        className="macc-region"
-        role="region"
-        id={panelId}
-        aria-labelledby={headerId}
-        aria-hidden={!open}
-      >
-        <div className="macc-region-inner">
-          <div className="macc-body">{children}</div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default Accordion;
+// Autobahn (auto.de redesign) — md3 Accordion.
+//
+// Drop-in visual replacement for the legacy fe-ui-core ExpansionPanel (which wrapped
+// the MUI Accordion/AccordionSummary/AccordionDetails). Same data contract, re-skinned:
+//   - legacy `title`/`subTitle` (node + muted string) -> `title` + `subtitle`.
+//   - legacy `defaultExpanded` (every legacy call site passed it) -> `defaultExpanded`,
+//     used only in the UNCONTROLLED mode.
+//   - legacy `onChange(expanded)` -> `onToggle(expanded)`.
+//   - the validation badge a page renders in the header gets a dedicated `status` slot
+//     (VehicleEdit maps each section's `field.isValid` -> a StatChip / IconSVG today).
+//
+// Controlled vs uncontrolled:
+//   - CONTROLLED: pass `expanded` (+ usually `onToggle`). The parent owns the open/closed
+//     state — this is what VehicleEdit needs so the page can keep an `activeIndex` and let
+//     the sticky sidebar jump-to-section open the right panel. We never store open state
+//     internally in this mode; we just reflect `expanded` and report intent via `onToggle`.
+//   - UNCONTROLLED: omit `expanded`; we keep our own open state seeded from `defaultExpanded`.
+//
+// Scroll anchors are NOT swallowed. The legacy ExpansionPanel optionally wrapped itself in a
+// react-scroll <Element name=...>. In the redesign the PARENT does that wrapping (it owns the
+// section name / scroll target), so this component must not introduce its own wrapper that
+// would break the anchor. We render a plain <section> (optional `id` passthrough) and emit
+// `children` as-is — the parent's <Element> stays the scroll target.
+//
+// Pure/presentational: no store, no API, no window access. Renders correctly only inside a
+// `<div className="md3">` subtree (scoped theme). Not observer-wrapped — it binds to no mobx
+// field itself; any field-driven content (title, status badge) is passed in by the (observer)
+// parent and re-renders there.
+
+import * as React from 'react';
+
+import Icon from './Icon';
+
+export interface AccordionProps {
+  /** header title — node so callers can pass a styled span (legacy passed string | JSX.Element). */
+  title: React.ReactNode;
+  /** muted text after the title (legacy `subTitle`, e.g. "12 Fahrzeuge" / "retailPriceSub"). */
+  subtitle?: React.ReactNode;
+  /** CONTROLLED open state. When provided the parent owns open/closed (sidebar jump-to-section). */
+  expanded?: boolean;
+  /** initial open state in UNCONTROLLED mode (ignored when `expanded` is provided). Default true. */
+  defaultExpanded?: boolean;
+  /** fired with the NEXT desired open state on header activation (legacy `onChange`). */
+  onToggle?: (expanded: boolean) => void;
+  /** header-right slot, e.g. a validation badge (<StatChip/>) or count. */
+  status?: React.ReactNode;
+  children?: React.ReactNode;
+  /** id passthrough on the root (does NOT replace a parent react-scroll <Element> wrapper). */
+  id?: string;
+  /** extra class(es) appended after the `macc` classes. */
+  className?: string;
+}
+
+const Accordion: React.FunctionComponent<AccordionProps> = ({
+  title,
+  subtitle,
+  expanded,
+  defaultExpanded = true,
+  onToggle,
+  status,
+  children,
+  id,
+  className,
+}) => {
+  const isControlled = expanded !== undefined;
+  const [openUncontrolled, setOpenUncontrolled] = React.useState<boolean>(defaultExpanded);
+  const open = isControlled ? (expanded as boolean) : openUncontrolled;
+
+  // stable region id for aria-controls / aria-labelledby (no Math.random / Date.now).
+  const baseId = React.useMemo(() => {
+    if (id) return id;
+    const seed = typeof title === 'string' ? title : '';
+    return `macc-${Math.round(seed.length)}-${defaultExpanded ? 1 : 0}`;
+  }, [id, title, defaultExpanded]);
+  const headerId = `${baseId}__hd`;
+  const panelId = `${baseId}__panel`;
+
+  const toggle = () => {
+    const next = !open;
+    // notify the parent first so a controlled page can update its activeIndex.
+    if (onToggle) onToggle(next);
+    // only mutate internal state when we actually own it.
+    if (!isControlled) setOpenUncontrolled(next);
+  };
+
+  const onHeaderKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      toggle();
+    }
+  };
+
+  const cls = ['macc', open ? 'macc--open' : 'macc--closed', className].filter(Boolean).join(' ');
+
+  return (
+    <section className={cls} id={id}>
+      <button
+        type="button"
+        id={headerId}
+        className="macc-hd"
+        aria-expanded={open}
+        aria-controls={panelId}
+        onClick={toggle}
+        onKeyDown={onHeaderKeyDown}
+      >
+        <span className="macc-hd-text">
+          <span className="macc-title md-title">{title}</span>
+          {subtitle != null && subtitle !== '' ? (
+            <span className="macc-subtitle md-body">{subtitle}</span>
+          ) : null}
+        </span>
+        {status != null && status !== '' ? <span className="macc-status">{status}</span> : null}
+        <Icon name="chevron-down" cls="macc-chev" />
+      </button>
+      {/* grid 0fr->1fr collapse: animates height smoothly without a magic max-height.
+          NOT using `hidden`/display:none — that would kill the close transition. The closed
+          region is collapsed to 0 height + faded; children stay mounted (cheap sections, and
+          react-scroll anchors inside must stay measurable for jump-to-section). */}
+      <div
+        className="macc-region"
+        role="region"
+        id={panelId}
+        aria-labelledby={headerId}
+        aria-hidden={!open}
+      >
+        <div className="macc-region-inner">
+          <div className="macc-body">{children}</div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Accordion;

package/ui/Button.tsx

@@ -1,62 +1,62 @@
-import React from 'react';
-
-import Icon from './Icon';
-
-export type ButtonVariant = 'filled' | 'tonal' | 'outlined' | 'text';
-export type ButtonSize = 'sm' | 'lg';
-
-export interface ButtonProps {
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  block?: boolean;
-  /** kebab-case lucide icon name rendered before the label. */
-  icon?: string;
-  /** kebab-case lucide icon name rendered after the label. */
-  iconRight?: string;
-  children?: React.ReactNode;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  style?: React.CSSProperties;
-  /** when true, the button is non-interactive and dimmed. */
-  disabled?: boolean;
-  /** extra class(es) appended after the mbtn classes (e.g. layout hooks like "pp-cta"). */
-  className?: string;
-  /**
-   * native `<button>` type; defaults to "button" so this never accidentally submits an
-   * ancestor `<form>` (e.g. the checkout/auth forms, which drive submission via onClick, not
-   * native form submit). Pass "submit"/"reset" explicitly for the rare caller that needs it.
-   */
-  type?: 'button' | 'submit' | 'reset';
-}
-
-const Button: React.FunctionComponent<ButtonProps> = ({
-  variant = 'filled',
-  size,
-  block,
-  icon,
-  iconRight,
-  children,
-  onClick,
-  style,
-  disabled,
-  className,
-  type = 'button',
-}) => {
-  const cn = ['mbtn', `mbtn--${variant}`, size && `mbtn--${size}`, block && 'mbtn--block', className]
-    .filter(Boolean)
-    .join(' ');
-  return (
-    <button
-      type={type}
-      className={cn}
-      onClick={onClick}
-      disabled={disabled}
-      style={disabled ? { ...style, opacity: 0.5, cursor: 'not-allowed' } : style}
-    >
-      {icon && <Icon name={icon} size={18} />}
-      {children}
-      {iconRight && <Icon name={iconRight} size={18} />}
-    </button>
-  );
-};
-
-export default Button;
+import React from 'react';
+
+import Icon from './Icon';
+
+export type ButtonVariant = 'filled' | 'tonal' | 'outlined' | 'text';
+export type ButtonSize = 'sm' | 'lg';
+
+export interface ButtonProps {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  block?: boolean;
+  /** kebab-case lucide icon name rendered before the label. */
+  icon?: string;
+  /** kebab-case lucide icon name rendered after the label. */
+  iconRight?: string;
+  children?: React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  style?: React.CSSProperties;
+  /** when true, the button is non-interactive and dimmed. */
+  disabled?: boolean;
+  /** extra class(es) appended after the mbtn classes (e.g. layout hooks like "pp-cta"). */
+  className?: string;
+  /**
+   * native `<button>` type; defaults to "button" so this never accidentally submits an
+   * ancestor `<form>` (e.g. the checkout/auth forms, which drive submission via onClick, not
+   * native form submit). Pass "submit"/"reset" explicitly for the rare caller that needs it.
+   */
+  type?: 'button' | 'submit' | 'reset';
+}
+
+const Button: React.FunctionComponent<ButtonProps> = ({
+  variant = 'filled',
+  size,
+  block,
+  icon,
+  iconRight,
+  children,
+  onClick,
+  style,
+  disabled,
+  className,
+  type = 'button',
+}) => {
+  const cn = ['mbtn', `mbtn--${variant}`, size && `mbtn--${size}`, block && 'mbtn--block', className]
+    .filter(Boolean)
+    .join(' ');
+  return (
+    <button
+      type={type}
+      className={cn}
+      onClick={onClick}
+      disabled={disabled}
+      style={disabled ? { ...style, opacity: 0.5, cursor: 'not-allowed' } : style}
+    >
+      {icon && <Icon name={icon} size={18} />}
+      {children}
+      {iconRight && <Icon name={iconRight} size={18} />}
+    </button>
+  );
+};
+
+export default Button;