@bytebrand/fe-ui-core-autobahn 1.0.0

package/types/types.ts

@@ -0,0 +1,374 @@
+import type { Settings } from 'react-slick';
+
+export interface IDecoratedProps {
+  [key: string]: IDecoratedProp;
+}
+
+export interface IDecoratedProp {
+  icon?: string;
+  title?: string;
+  name?: string;
+  subTitle?: string;
+  isVisible?: boolean;
+  isLongTitle?: boolean;
+  valueDescription?: string;
+  readonly value?: (string | JSX.Element);
+}
+
+export interface IImage {
+  imageUrl: string;         // image link that can be used in src in img tag,
+  imageUrlLarge: string;    // large-image link that can be used in src in img tag,
+  imageUrlMedium: string;   // medium-image link that can be used in src in img tag,
+  imageUrlSmall: string;    // small-image link that can be used in src in img tag,
+  imageId: string;          // image unique id,
+  imageMeta: any;           // image metadata object
+  downloadedAt: number;     // time when image was loaded
+  isMain: boolean;          // is main image?
+  isInteriorMain: boolean;  // is interior main image? (for the search page)
+  isPanel: boolean;         // is panel image? (for the search page)
+  isLegacy: boolean;        // is legacy image
+  isDamage: boolean;        // is damage image
+  isExterior: boolean;      // is image for 360 exterior
+  isInterior: boolean;      // is image for 360 sphere interior
+  isSimpleTemp: boolean;
+  isInProcessing: boolean;
+  isTemp: boolean;
+  videoUrl:string;          // youtube link that can be used in src in youtube video,
+}
+
+export interface IPrice {
+  currency?: string;
+  amount?: number;
+  oldPrice?: number;
+  monthlyInstallment?: number;
+  historyPriceDifference?: number;
+  isStrikeShown?: boolean;
+  historyPriceDifferencePerCent?: number;
+  vatRate?: number | null;
+  mlCurrentSalesPriceDiffPercent?: number;
+  mlCurrentSalesPricePredicted?: number;
+  buy: IBuy;
+  leasing?: ILeasing;
+  financing?: IFinancing;
+  common: ICommonFinancing;
+}
+
+export interface IBuy {
+  currentSalesPriceExtra?: number;
+  highestPriceExtra?: number;
+}
+
+export interface ILeasing {
+  monthlyInstallment?: number;
+  oldMonthlyInstallment?: number;
+  isActive?: boolean;
+  annualMileage?: number;
+}
+export interface IFinancing {
+  monthlyInstallment?: number;
+  oldMonthlyInstallment?: number;
+  isStrikeShown?: boolean;
+  annualMileage?: number;
+  withFinalInstallment?: boolean;
+}
+export interface ICommonFinancing {
+  isStrikeShown: boolean;
+}
+export enum SliderType {
+  DEFAULT,
+  EXTERIOR,
+  INTERIOR
+}
+
+export interface IVehicleLocation {
+  city: string;
+  street?: string;
+  zipCode?: number;
+}
+
+export interface IVehicleInfo {
+  t?: (key: string, options?: object) => string;
+  i18nPrefixForPriceRating?: string;
+  gearbox?: string;
+  regDate?: number;
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
+  language?: string;
+  combineRefAlternative?: boolean;
+  routeObj?: any;
+  linkTag?: string;
+  mlCurrentSalesPricePredicted?: number;
+  location?: IVehicleLocation;
+  common?: {
+    currentSalesPrice?: number;
+    isStrikeShown?: boolean;
+  };
+  mileage?: string;
+  environmentEmissions?: any;
+  engineData?: any;
+  offer?: any;
+  consumption?: any;
+  numberOfPreviousOwners?: any;
+  usageType?: any;
+  condition?: any;
+  damaged?: any;
+  driveType?: any;
+  url?: string;
+  target?: string;
+  rel?: string;
+  leasing?: ILeasing;
+}
+
+export interface IVehicleTitleProps {
+  make?: string;
+  model?: string;
+  subModel?: string;
+  option?: string;
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
+  isSponsored?: boolean;
+  showFavoriteStar?: boolean;
+  id?: string;
+  isCarInFavorite?: boolean;
+  onFavoriteClick?: (event?: any, id?: String) => void;
+  renderVehicleStatus?: () => React.ReactNode;
+  onCarFavorite?(event: React.MouseEvent<HTMLElement>, id: string): void;
+  favoriteProps?: Node;
+  combineRefAlternative?: boolean;
+}
+
+export interface IVehicleSliderProps extends Settings {
+  mainImageUrl?: string;
+  images?: ICarImage[];
+  arrowsSize?: 'md' | 'lg';
+  imageSize?: 'small' | 'medium' | 'large';
+  wrapperClassName?: string;
+  imagesCount?: number;
+  onFirstChange?: () => void;
+  onSlideChange?: () => void;
+}
+
+export interface IVehicleSliderForSRLProps {
+  t?: (key: string, options?: object) => string;
+  id?: string;
+  mainImageId?: string;
+  hasInteriorExteriorPhoto?: boolean;
+  imageSize?: 'small' | 'medium' | 'large';
+  imagesCount?: number;
+  images?: ICarImage[];
+  src?: string;
+  className?: string;
+  type?: 'favorite' | 'myVehicle';
+  getCarImagesData?: (carId: string, force?: boolean, includeAll?: boolean, type?: any, typeAlternative?: string) => Promise<any>;
+  onSlideChange?: (index: number) => void;
+  isReferenceSearch?: boolean;
+  CircularProgressbar?: any;
+  isAlternative?: boolean;
+  typeAlternative?: string;
+}
+
+export interface ICarImage {
+  url: string;
+  description: string;
+}
+
+export interface IVehicleDetailedSidebarTitleProps {
+  make: string;
+  model: string;
+  subModel: string;
+  powerKW: number;
+  powerPS: number;
+  isCarInFavorite?: boolean;
+  carId?: string;
+  onCarFavorite?: (event: React.MouseEvent<HTMLElement>, carId: string) => void;
+}
+
+export interface IVehicleDetailedSidebarPriceProps {
+  isSticky?: boolean;
+  isPriceSticky?: boolean;
+  tabsTitles: { title: string, isDisable?: boolean | false, children?: React.ReactNode }[];
+  priceTabActiveIndex?: number;
+  onTabPriceSelect?(event: React.ChangeEvent<{}>, index: number): void;
+  isAlternative?: boolean;
+  // currentSalesPrice?: number;
+  originalSalesPrice?: number;
+  common?: { isStrikeShown?: boolean, currentSalesPrice?: number };
+  financing?: any;
+  currentSalesPrice?: number;
+}
+export interface ITabsProps {
+  t?: (key: string, options?: object) => string;
+  priceTabActiveIndex: number;
+  tabContentClassName?: string;
+  onTabPriceSelect?(event: React.ChangeEvent<{}>, index: number): void;
+  tabsTitles: { title: string, isDisable?: boolean | false, children?: React.ReactNode }[];
+  isAlternative?: boolean;
+}
+
+export interface ICarPropElement {
+  icon: string;
+  description: string;
+}
+export interface IPropertiesProps {
+  t?: (key: string, options?: object) => string;
+  car: ICar;
+  decoratedProps: IDecoratedProps;
+  isAlternative?: boolean;
+}
+
+export interface IPriceContentProps {
+  t?: (key: string, options?: object) => string;
+  car: ICar;
+  OfferRequestButtonWrapper?: React.ComponentType<IOfferRequestButtonWrapper>;
+  detailsText?: string | null;
+  prefixPrice?: string;
+  onShowOfferDetails?(event?: React.ChangeEvent<{}>, car?: ICar, priceTabActiveIndex?: number): void;
+  onAdjustRateClick: () => void;
+  isBuy?: boolean;
+  offerBlockOpen?: boolean;
+  isStrikeShown?: boolean;
+  postfix?: string;
+  monthlyInstallment?: number;
+  priceTabActiveIndex?: number;
+  oldMonthlyInstallment?: number;
+  OfferBlockComponent?: any;
+  offerBlockProps?: any;
+  vatRate?: number;
+  activeTab?: number;
+  priceRating?: number;
+}
+
+export interface IVehicleDetailedSidebarProps {
+  activeTab: number;
+  setActiveTab?(event?: React.ChangeEvent<{}>, activeTab?: number): void;
+  t?: (key: string, options?: object) => string;
+  decoratedProps: IDecoratedProps;
+  title?: IVehicleDetailedSidebarTitleProps;
+  price?: IVehicleDetailedSidebarPriceProps;
+  language?: string;
+  pathname: string;
+  car: ICar;
+  vatRate?: number;
+  carLoaded?: boolean;
+  isPriceSticky?: boolean;
+  originUrl: string;
+  infoSections: { title: string, value: string, icon?: string }[];
+  isAlternative?: boolean;
+  onCurrentSalesPriceChange: (price: number) => void;
+  className?: string;
+  isFetching?: boolean;
+  children?: React.ReactNode;
+}
+
+interface IOfferRequestButtonWrapper {
+  carId: any;
+  dealerId: any;
+  children?: any;
+}
+export interface IOfferRequestButtonWrapperProps {
+  t?: (key: string, options?: object) => string;
+  car: ICar;
+  priceTabActiveIndex?: number;
+  detailsText?: string | null;
+  isAdditionalOption?: boolean;
+  controlsClassContainer?: string;
+  OfferRequestButtonWrapper?: React.ComponentType<IOfferRequestButtonWrapper>;
+  onShowOfferDetails?(event?: React.ChangeEvent<{}>, car?: any, priceTabActiveIndex?: number): void;
+}
+export interface ICarField {
+  [key: string]: any;
+}
+
+export interface IHighlights {
+  name: string;
+  section: string;
+  icon?: string;
+  priority?: number;
+}
+
+export interface IAccardionSectionProps {
+  t?: (key: string, options?: object) => string;
+  car: ICar;
+  detailsText?: string | null;
+  OfferRequestButtonWrapper?: React.ComponentType<IOfferRequestButtonWrapper>;
+  onShowOfferDetails?(event?: React.ChangeEvent<{}>, car?: any, priceTabActiveIndex?: number): void;
+  expanded?: boolean | string;
+  handleChange?: any;
+}
+
+export interface ICar {
+  mainData: { [key: string]: any; };
+  [key: string]: ICarField;
+}
+export interface IEquipmentProps {
+  title: string;
+  icon: string;
+  value: ICarField;
+  [key: string]: any;
+}
+
+export interface IAccardionSectionProps {
+  t?: (key: string, options?: object) => string;
+  car: ICar;
+  decoratedProps: IDecoratedProps;
+  carEquipment: IEquipmentProps[];
+  activeIndex?: number;
+  onItemClick(index: number): void;
+}
+
+export interface IOfferDetailedSectionProps {
+  t?: (key: string, options?: object) => string;
+  language: string;
+  car?: ICar;
+  activeTab: number;
+  setActiveTab?(event?: React.ChangeEvent<{}>, activeTab?: number): void;
+  offerBlockProps?: any;
+  OfferBlockComponent?: any;
+  OfferRequestButtonWrapper?: React.ComponentType<IOfferRequestButtonWrapper>;
+  leasing?: ILeasing;
+  financing?: IFinancing;
+}
+export interface IPanelConfigProps {
+  t?: (key: string, options?: object) => string;
+  OfferRequestButtonWrapper?: React.ComponentType<IOfferRequestButtonWrapper>;
+  car?: ICar;
+  config?: any;
+  titleDetails?: string;
+  prefixPrice?: string;
+  postfix?: string;
+  titleKey?: string;
+  descriptionDetails?: string;
+  priceTabActiveIndex?: number;
+  activeTab?: number;
+  OfferBlockComponent?: any;
+  offerBlockProps?: any;
+  isOpenDetails?: boolean;
+  isAlternative?: boolean;
+  onToggleDetailsClick: () => void;
+}
+
+export interface IVehicleCompareProps {
+  toggleCarToCompare: () => void;
+  toCompare: boolean;
+  onRemoveClick: () => void;
+}
+
+export interface ITFunction {
+  <T = string>(key: string, options?: object): T;
+  <T = string>(keys: string[], options?: object): T;
+}
+
+export interface IWltpConsumption {
+  wltpCombined?: number;
+  wltpPowerCombined?: number;
+  wltpWeightedCombined?: number;
+  wltpWeightedPowerCombined?: number;
+}
+
+export interface IFinancingUtils {
+  co2DefaultCostsLow: number;
+  co2DefaultCostsMedium: number;
+  co2DefaultCostsHigh: number;
+  getVehicleTax: (fuelType: string, cubicCapacity: number, co2: number, firstRegistration: number) => number;
+  getFuelPrice: (fuelSelector: string, consumption: IWltpConsumption, hybridPlugin: boolean, powerCost: { fuelPrice?: number, powerPrice?: number }) => number;
+  getBaseFuelPrice: (fuelSelector: string, hybridPlugin?: boolean) => { fuelPrice: number, powerPrice?: number };
+  getCo2Price: (wltpCo2: number) => { co2PriceLow: number, co2PriceMedium: number, co2PriceHigh: number };
+}

package/types.ts

@@ -0,0 +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;

package/ui/Accordion.tsx

@@ -0,0 +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;

package/ui/Button.tsx

@@ -0,0 +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;