@bytebrand/fe-ui-core-autobahn 1.0.0

package/ui/Stepper.tsx

@@ -0,0 +1,106 @@
+// Autobahn (auto.de redesign) — md3 step indicator (numbered circles + connectors).
+//
+// A reusable, presentational MD3 stepper for multi-step flows (Checkout, …). Mirrors the
+// visual language of the inline `.co-stepper` in CheckoutChromeNext (30px numbered dots,
+// primary-filled done/active states, 2px connectors) but generalised: it takes a plain
+// `steps` array + `activeStep`, supports horizontal/vertical orientation, and is non-linear
+// (any step is clickable via `onStepClick`). Step state is derived from `activeStep` unless a
+// step carries an explicit `status` (so a flow that tracks per-step completion — e.g. the
+// checkout store's `completed` set — can mark a later step done or an earlier one still todo).
+//
+// Pure/presentational: no store, no API, no window access. Not observer-wrapped — it binds to
+// no mobx field; callers that read observable state (e.g. checkoutStore.activeStep) should wrap
+// their own render. Renders correctly only inside a `<div className="md3">` subtree.
+
+import React from 'react';
+
+import Icon from './Icon';
+
+export type StepStatus = 'done' | 'active' | 'todo';
+
+export interface StepperStep {
+  /** visible step label. */
+  label: string;
+  /** explicit state override; when omitted it's derived from `activeStep` (index < active = done). */
+  status?: StepStatus;
+}
+
+export interface StepperProps {
+  /** the steps, in order. */
+  steps: StepperStep[];
+  /** index of the current step (0-based). */
+  activeStep: number;
+  /** layout direction (default 'horizontal'). */
+  orientation?: 'horizontal' | 'vertical';
+  /** non-linear: fired with the clicked step's index. When omitted, steps are not interactive. */
+  onStepClick?: (index: number) => void;
+  /** accessible label for the stepper nav (e.g. the flow name). */
+  ariaLabel?: string;
+  /** extra class(es) appended after the mstep classes (layout hooks). */
+  className?: string;
+}
+
+const Stepper: React.FunctionComponent<StepperProps> = ({
+  steps,
+  activeStep,
+  orientation = 'horizontal',
+  onStepClick,
+  ariaLabel,
+  className,
+}) => {
+  // derive state: explicit `status` wins; otherwise index vs activeStep.
+  const resolve = (step: StepperStep, index: number): StepStatus => {
+    if (step.status) return step.status;
+    if (index < activeStep) return 'done';
+    if (index === activeStep) return 'active';
+    return 'todo';
+  };
+
+  const clickable = typeof onStepClick === 'function';
+
+  const wrapCls = ['mstep', `mstep--${orientation}`, clickable && 'mstep--clickable', className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <nav className={wrapCls} aria-label={ariaLabel}>
+      <ol className="mstep-list">
+        {steps.map((step, i) => {
+          const status = resolve(step, i);
+          const isLast = i === steps.length - 1;
+          const itemCls = `mstep-item mstep-item--${status}`;
+          const dot = status === 'done' ? <Icon name="check" size={16} /> : i + 1;
+
+          // the dot + label are a button when interactive, a plain span otherwise — so a
+          // non-linear flow gets real focus/keyboard semantics without forcing them on a
+          // read-only indicator.
+          const inner = clickable ? (
+            <button
+              type="button"
+              className="mstep-btn"
+              aria-current={status === 'active' ? 'step' : undefined}
+              onClick={() => onStepClick && onStepClick(i)}
+            >
+              <span className="mstep-dot">{dot}</span>
+              <span className="mstep-label">{step.label}</span>
+            </button>
+          ) : (
+            <span className="mstep-btn" aria-current={status === 'active' ? 'step' : undefined}>
+              <span className="mstep-dot">{dot}</span>
+              <span className="mstep-label">{step.label}</span>
+            </span>
+          );
+
+          return (
+            <li key={`${step.label}_${i}`} className={itemCls}>
+              {inner}
+              {!isLast ? <span className="mstep-connector" aria-hidden="true" /> : null}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
+
+export default Stepper;

package/ui/Switch.tsx

@@ -0,0 +1,65 @@
+// Autobahn (auto.de redesign) — md3 toggle switch.
+//
+// Drop-in visual replacement for the legacy fe-ui-core `Switch` (used in
+// SettingsPage → ProfileTabDataUsage as `<Switch checked={field.checked} onChange={field.onChange} />`,
+// bound to DataUsageForm.$('email') / $('research')). It emits the `.mswitch` track+thumb
+// markup that already lives in theme/autobahn/md3.css.
+//
+// BINDING (must match the legacy signature exactly or validation/submit breaks):
+//   mobx-react-form fields expose `field.checked` (boolean) and `field.onChange`, which is a
+//   NATIVE change-event handler — it reads `event.target.checked` itself. So when `field` is
+//   passed we render `<input type="checkbox" checked={field.checked} onChange={field.onChange}>`
+//   and let the native event flow straight through, unchanged. No wrapping, no boolean coercion.
+//
+// Two modes:
+//   - BOUND:      pass `field` → reads field.checked, forwards the native event to field.onChange.
+//   - CONTROLLED: pass `checked` + `onChange` → `onChange` receives the native React change event
+//                 (same shape the field handler gets), so callers can read e.target.checked.
+//
+// observer-wrapped so the bound mode re-renders when field.checked changes. Pure/presentational
+// otherwise. Renders correctly only inside a `<div className="md3">` subtree (scoped theme).
+
+import * as React from 'react';
+import { observer } from 'mobx-react';
+
+export interface SwitchProps {
+  /** mobx-react-form field (DataUsageForm.$('email') etc.). Typed any — the lib ships no TS types. */
+  field?: any;
+  /** controlled checked state (ignored when `field` is supplied). */
+  checked?: boolean;
+  /** native change-event handler. Bound mode forwards the field's own handler; controlled mode gets the React event. */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /** optional visible label rendered after the track. */
+  label?: React.ReactNode;
+  disabled?: boolean;
+  id?: string;
+  /** accessible label when there is no visible `label`. */
+  ariaLabel?: string;
+}
+
+const Switch: React.FunctionComponent<SwitchProps> = observer(
+  ({ field, checked, onChange, label, disabled, id, ariaLabel }) => {
+    // Bound mode reads straight off the field; controlled mode uses the `checked` prop.
+    const isChecked = field ? !!field.checked : !!checked;
+    const handleChange = field ? field.onChange : onChange;
+
+    return (
+      <label className={'mswitch' + (disabled ? ' mswitch--disabled' : '') + (label ? ' mswitch--labeled' : '')}>
+        <input
+          id={id}
+          type="checkbox"
+          role="switch"
+          checked={isChecked}
+          disabled={disabled}
+          aria-label={ariaLabel}
+          aria-checked={isChecked}
+          onChange={handleChange}
+        />
+        <span className="mswitch-track"><span className="mswitch-thumb" /></span>
+        {label ? <span className="mswitch-label">{label}</span> : null}
+      </label>
+    );
+  },
+);
+
+export default Switch;

package/ui/Table.tsx

@@ -0,0 +1,156 @@
+// Autobahn (auto.de redesign) — md3 data/spec table primitive set.
+//
+// A COMPOSABLE set of thin wrappers over the native table elements
+// (Table → <table>, Thead → <thead>, Tbody → <tbody>, Tr → <tr>, Th → <th>,
+// Td → <td>) so callers keep their EXACT legacy row structure when a MUI/
+// fe-ui-core table is re-skinned into md3. You re-skin in place:
+//
+//   <Table>                          // was <Table> / <table>
+//     <Thead>
+//       <Tr>
+//         <Th>Rechnung</Th>          // header surface-variant
+//         <Th align="right">Betrag</Th>
+//       </Tr>
+//     </Thead>
+//     <Tbody>
+//       {invoices.map((inv) => (
+//         <Tr key={inv.id}>          // row divider + hover
+//           <Td>{inv.number}</Td>
+//           <Td align="right" numeric>{inv.amount}</Td>
+//         </Tr>
+//       ))}
+//     </Tbody>
+//   </Table>
+//
+// `<Table>` always renders its own `overflow-x: auto` scroll wrapper, so a wide
+// table (Vergleich spec sheet, vehicle-options matrix) scrolls inside its own
+// box and never forces the page to scroll horizontally.
+//
+// Options: `dense` (tighter row height — Mitarbeiter / options lists),
+// `stickyHeader` (header pins while the body scrolls — long invoice/employee
+// lists), `align` (per-cell text alignment), `numeric` (tabular-nums for money/
+// counts), `width` (column sizing hint on a Th), `colSpan`/`rowSpan` (passthrough
+// for grouped spec rows).
+//
+// Pure/presentational: no store, no API, no window. Renders correctly only inside
+// a `<div className="md3">` subtree (scoped theme). No mobx binding — this is a
+// layout primitive, not a form control.
+
+import React from 'react';
+
+export type TableAlign = 'left' | 'center' | 'right';
+
+export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+  /** tighter row height for list-heavy tables (Mitarbeiter, vehicle options). */
+  dense?: boolean;
+  /**
+   * pin the header while the body scrolls (long invoice / employee lists).
+   * The caller is responsible for constraining the scroll height — wrap the
+   * `<Table>` in a box with `max-height` + the header stays put on vertical scroll.
+   */
+  stickyHeader?: boolean;
+  /** extra class on the inner `<table>` (layout hooks). */
+  className?: string;
+  /** extra class on the outer `overflow-x:auto` scroll wrapper. */
+  wrapperClassName?: string;
+  /** inline style applied to the outer scroll wrapper (e.g. max-height for sticky). */
+  wrapperStyle?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export interface TheadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+  children?: React.ReactNode;
+}
+
+export interface TbodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+  children?: React.ReactNode;
+}
+
+export interface TrProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  /** visually mark the row as selected/active (e.g. current plan, chosen vehicle). */
+  selected?: boolean;
+  children?: React.ReactNode;
+}
+
+export interface ThProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+  /** text alignment (default left). */
+  align?: TableAlign;
+  /** column-width hint, e.g. 160 or '30%'. */
+  width?: number | string;
+  children?: React.ReactNode;
+}
+
+export interface TdProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+  /** text alignment (default left). */
+  align?: TableAlign;
+  /** tabular-nums + alignment friendly to money/counts. */
+  numeric?: boolean;
+  children?: React.ReactNode;
+}
+
+// join classnames, dropping falsy.
+const cx = (...parts: Array<string | false | undefined>): string => parts.filter(Boolean).join(' ');
+
+// Per-cell alignment is applied as a class (not inline style) so it stays
+// overridable from md3.css and composes with the numeric rule.
+const alignCls = (align?: TableAlign): string | undefined =>
+  align && align !== 'left' ? `mtab-${align}` : undefined;
+
+/**
+ * Root table. Renders an `overflow-x: auto` wrapper around a real `<table>`
+ * so wide tables scroll inside their own box. Spreads extra `<table>` attrs.
+ */
+export const Table: React.FunctionComponent<TableProps> = ({
+  dense,
+  stickyHeader,
+  className,
+  wrapperClassName,
+  wrapperStyle,
+  children,
+  ...rest
+}) => (
+  <div className={cx('mtab-wrap', wrapperClassName)} style={wrapperStyle}>
+    <table
+      className={cx('mtab', dense && 'mtab--dense', stickyHeader && 'mtab--sticky', className)}
+      {...rest}
+    >
+      {children}
+    </table>
+  </div>
+);
+
+export const Thead: React.FunctionComponent<TheadProps> = ({ className, children, ...rest }) => (
+  <thead className={cx('mtab-thead', className)} {...rest}>
+    {children}
+  </thead>
+);
+
+export const Tbody: React.FunctionComponent<TbodyProps> = ({ className, children, ...rest }) => (
+  <tbody className={cx('mtab-tbody', className)} {...rest}>
+    {children}
+  </tbody>
+);
+
+export const Tr: React.FunctionComponent<TrProps> = ({ selected, className, children, ...rest }) => (
+  <tr className={cx('mtab-tr', selected && 'is-selected', className)} {...rest}>
+    {children}
+  </tr>
+);
+
+export const Th: React.FunctionComponent<ThProps> = ({ align, width, className, style, children, ...rest }) => (
+  <th
+    className={cx('mtab-th', alignCls(align), className)}
+    style={width != null ? { width, ...style } : style}
+    {...rest}
+  >
+    {children}
+  </th>
+);
+
+export const Td: React.FunctionComponent<TdProps> = ({ align, numeric, className, children, ...rest }) => (
+  <td className={cx('mtab-td', numeric && 'mtab-td--num', alignCls(align), className)} {...rest}>
+    {children}
+  </td>
+);
+
+export default Table;

package/ui/Textarea.tsx

@@ -0,0 +1,58 @@
+// Autobahn (auto.de redesign) — md3 multiline input bound to a mobx-react-form field.
+//
+// The multiline sibling of FormField: a labelled, outlined MD3 control that binds directly to a
+// mobx-react-form field via field.bind() — the SAME field objects the legacy FormTextArea used
+// (DealerProfileForm.$('imprint'/'termCond'), TemplateForm's offer_offerDescription, the
+// password-area, …). So every existing validation rule, onChange/onBlur, submit hook and error
+// works unchanged; only the markup is re-skinned. Mirrors FormField, swapping <input> for
+// <textarea> (and dropping the password reveal that does not apply to a textarea).
+//
+// Observer-wrapped so it re-renders on field value/error changes. Renders correctly only inside
+// a `.md3` subtree (scoped theme). Pure/presentational beyond the injected field.
+
+import * as React from 'react';
+import { observer } from 'mobx-react';
+
+export interface TextareaProps {
+  /** mobx-react-form field (DealerProfileForm.$('imprint') etc.). Typed any — the lib ships no TS types. */
+  field: any;
+  /** i18n translate — resolves the field's placeholder/label key. Optional (legacy default = identity). */
+  t?: (key: string, options?: object) => string;
+  /** visible textarea rows (legacy template used 10). */
+  rows?: number;
+  disabled?: boolean;
+}
+
+const identity = (key: string): string => key;
+
+const Textarea: React.FunctionComponent<TextareaProps> = observer(
+  ({ field, t = identity, rows = 4, disabled }) => {
+    const bound = field.bind();
+    const hasError = !!field.hasError && !!field.error;
+    // Visible label (a11y). Prefer the translated placeholder key, else the field's label key.
+    // t() returns the input unchanged when there's no translation, so this is safe for plain strings.
+    const label = field.placeholder ? t(field.placeholder) : field.label ? t(field.label) : '';
+
+    return (
+      <div className="mfield-group">
+        {label ? <label className="md-label-sm mfield-label" htmlFor={bound.id}>{label}</label> : null}
+        <div
+          className={
+            'mfield mtextarea' + (hasError ? ' mfield--error' : '') + (disabled ? ' mfield--disabled' : '')
+          }
+        >
+          <textarea
+            {...bound}
+            disabled={disabled}
+            rows={rows}
+            placeholder=""
+            style={{ width: '100%' }}
+          />
+        </div>
+        {hasError ? <span className="mfield-error-text">{field.error}</span> : null}
+      </div>
+    );
+  },
+);
+
+export default Textarea;

package/ui/index.ts

@@ -0,0 +1,88 @@
+// Autobahn (auto.de redesign) — presentational UI primitives.
+//
+// Typed, pure React 18 + TS port of the design kit's primitives from
+// docs/redesign/design-source/ui_kits/website/ui.jsx. The original kit exported
+// everything via `Object.assign(window, {...})`; here each primitive is a real
+// ES module with an explicit props interface, re-exported below.
+//
+// SCOPING — IMPORTANT:
+// These components rely on the scoped CSS layer at
+//   services/fe-main/source/theme/autobahn/ (md3.css)
+// where EVERY utility class is scoped under `.md3` (e.g. `.md3 .mbtn`,
+// `.md3 .chip`, `.md3 .statchip--good`, `.md3 .segmented .on`, `.md3 .mfield`,
+// `.md3 .num`, `.md3 .car-arrow`, `.md3 .imglabel`, `.md3 .md-title`, …).
+// They therefore ONLY render correctly inside a `<div className="md3">` subtree.
+//
+// All components are pure/presentational: no store, no API, no window access.
+
+export { default as Icon } from './Icon';
+export type { IconProps } from './Icon';
+
+export { default as Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
+
+export { default as IconButton } from './IconButton';
+export type { IconButtonProps } from './IconButton';
+
+export { default as Chip } from './Chip';
+export type { ChipProps } from './Chip';
+
+export { default as StatChip } from './StatChip';
+export type { StatChipProps, StatChipTone } from './StatChip';
+
+export { default as Segmented } from './Segmented';
+export type { SegmentedProps, SegmentedOption } from './Segmented';
+
+export { default as FormField } from './FormField';
+export type { FormFieldProps } from './FormField';
+
+export { default as Dropdown } from './Dropdown';
+export type { DropdownProps, DropdownOption } from './Dropdown';
+
+export { default as Spec } from './Spec';
+export type { SpecProps } from './Spec';
+
+export { default as Price } from './Price';
+export type { PriceProps } from './Price';
+
+export { default as Stars } from './Stars';
+export type { StarsProps } from './Stars';
+
+export { default as PriceEvalBar } from './PriceEvalBar';
+export type { PriceEvalBarProps } from './PriceEvalBar';
+
+export { default as SaveChip } from './SaveChip';
+export type { SaveChipProps } from './SaveChip';
+
+export { default as CardCarousel } from './CardCarousel';
+export type { CardCarouselProps } from './CardCarousel';
+
+// ── md3 kit (Group-B in-place rebuild) — form-bound + layout + overlay primitives ──
+export { default as FormDropdown } from './FormDropdown';
+export type { FormDropdownProps } from './FormDropdown';
+export { default as FormCheckbox } from './FormCheckbox';
+export type { FormCheckboxProps } from './FormCheckbox';
+export { default as FormRadioGroup } from './FormRadioGroup';
+export type { FormRadioGroupProps } from './FormRadioGroup';
+export { default as FormRadio } from './FormRadio';
+export type { FormRadioProps } from './FormRadio';
+export { default as Accordion } from './Accordion';
+export type { AccordionProps } from './Accordion';
+export { default as Modal } from './Modal';
+export type { ModalProps, ModalSize } from './Modal';
+export { default as DatePicker } from './DatePicker';
+export type { DatePickerProps } from './DatePicker';
+export { default as Table, Thead, Tbody, Tr, Th, Td } from './Table';
+export type { TableProps, TheadProps, TbodyProps, TrProps, ThProps, TdProps, TableAlign } from './Table';
+export { default as Switch } from './Switch';
+export type { SwitchProps } from './Switch';
+export { default as Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea';
+export { default as Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination';
+export { default as Stepper } from './Stepper';
+export type { StepperProps, StepperStep, StepStatus } from './Stepper';
+export { default as FileUpload } from './FileUpload';
+export type { FileUploadProps } from './FileUpload';
+export { default as Skeleton } from './Skeleton';
+export type { SkeletonProps } from './Skeleton';