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

package/widgets/SearchBox.tsx

@@ -1,256 +1,256 @@
-// Autobahn (auto.de redesign) — md3 compact search box.
-//
-// Shared replacement for the legacy fe-ui-core `SearchWidget` as it was used by
-// fe-wp-widgets' SearchWidgetContainer (and, later, fe-landing): a compact
-// make / model / price search form with a live result counter and a
-// "Detailsuche" escape hatch. The legacy widget's second tab ("Schnellsuche"
-// brand panel) and the rate-search modal are NOT ported — the md3 design is a
-// single compact panel.
-//
-// CONTRACT (mirrors the legacy container wiring):
-//   - `filters` is the CONTROLLED legacy filter-state object keyed by the
-//     SearchWidget constants (MANUFACTURER / MODEL / PRICE {from,to} / …).
-//     Values keep the legacy shapes: make/model are `{ value, label, isSeries? }`
-//     option objects (or '' when empty), PRICE is `{ from, to }` of raw numbers
-//     as strings. This keeps `buildQueryForSearch` / `buildBodyForRequest`
-//     working unchanged on the caller side.
-//   - `onFilterChange(value, name)` fires exactly like the legacy widget:
-//     make → `{value,label}` | `''`; model → `{value,label,isSeries?}` | `''`;
-//     price → the whole `{from,to}` object under the PRICE name.
-//   - submit builds the SRP query with the shared `buildQueryForSearch(filters)`
-//     and navigates via plain `window.location` (inside the event handler only —
-//     the component itself is SSR-safe: no window access at render).
-//
-// Pure / presentational: data (makes/models/counter) is injected by the host
-// container, which owns the API calls. Renders correctly only inside a
-// `<div className="md3">` subtree with theme/autobahn.css loaded.
-
-import React from 'react';
-
-import { Button, Dropdown, DropdownOption } from '../ui';
-import { MANUFACTURER, MODEL, PRICE, PRICE_OPTIONS } from '../constants/SearchWidget';
-import { buildQueryForSearch, sliceLessThan, sliceMoreThan } from '../utils/CommonUtils';
-import { TranslationFunction } from '../types';
-
-/** Option shape produced by the hosts' make/model transforms (top/regular headers use isDisabled). */
-export interface SearchBoxOption {
-  value: string | number;
-  label: string;
-  /** group-header rows ('top' / 'regular') — shown but not selectable. */
-  isDisabled?: boolean;
-  /** model-series rows — selectable; the query builder maps them to mainData_series. */
-  isSeries?: boolean;
-}
-
-/** Legacy filter-state object (keys = SearchWidget constants). */
-export interface SearchBoxFilters {
-  [key: string]: any;
-}
-
-export interface SearchBoxProps {
-  /** manufacturer options (host: transformManufacturers over car-makemodel-mapping). */
-  makes?: SearchBoxOption[];
-  /** model options for the selected make (host: transformModelsGeneral). */
-  models?: SearchBoxOption[];
-  /** CONTROLLED legacy filter state (MANUFACTURER / MODEL / PRICE {from,to} / …). */
-  filters: SearchBoxFilters;
-  /** live result count for the current filters (host: POST /count/car with buildBodyForRequest). */
-  counter?: number;
-  /** true while the counter request is in flight. */
-  counterLoading?: boolean;
-  /** legacy change contract — see the header comment for the emitted value shapes. */
-  onFilterChange: (value: any, name: string) => void;
-  /** override submit; receives the built query string. Default: window.location → `/{searchPath}?{query}`. */
-  onSearch?: (query: string) => void;
-  /** override the Detailsuche link; receives the built query string. Default: `/{detailedSearchPath}?{query}`. */
-  onDetailedSearch?: (query: string) => void;
-  /** SRP path for the default submit navigation. */
-  searchPath?: string;
-  /** detailed-search path for the default Detailsuche navigation. */
-  detailedSearchPath?: string;
-  /** hide the Detailsuche link (legacy isDealerWPpage behaviour). */
-  showDetailedSearch?: boolean;
-  /** optional heading above the fields; omitted → no heading. */
-  title?: string;
-  /** extra class on the panel (layout hooks). */
-  className?: string;
-  /** i18n translate (autobahn:searchBox.*). Optional — built-in German fallbacks are used without it. */
-  t?: TranslationFunction;
-}
-
-/** built-in German copy (used when no `t` is injected or a key is missing). */
-const DE_FALLBACK: Record<string, string> = {
-  make: 'Marke',
-  model: 'Modell',
-  priceFrom: 'Preis von',
-  priceTo: 'Preis bis',
-  any: 'beliebig',
-  showResults: 'Ergebnisse anzeigen',
-  detailedSearch: 'Detailsuche',
-};
-
-const SearchBox: React.FunctionComponent<SearchBoxProps> = ({
-  makes = [],
-  models = [],
-  filters,
-  counter,
-  counterLoading = false,
-  onFilterChange,
-  onSearch,
-  onDetailedSearch,
-  searchPath = 'search',
-  detailedSearchPath = 'search/detailed',
-  showDetailedSearch = true,
-  title,
-  className,
-  t,
-}) => {
-  // translate with fallback: i18next echoes the key back when it is missing.
-  const tr = (key: string): string => {
-    const fallback = DE_FALLBACK[key] || key;
-    if (!t) return fallback;
-    const full = `autobahn:searchBox.${key}`;
-    const out = t(full);
-    return out && out !== full ? out : fallback;
-  };
-
-  // A model list contains a selectable SERIES row followed by its models, and the
-  // series title can equal a model title (series 'Golf' → model 'Golf'). The md3
-  // Dropdown identifies options by VALUE, so series rows get a marker prefix to
-  // keep the two selectable; it is stripped again on commit.
-  const SERIES_PREFIX = '⁣series⁣'; // U+2063 invisible separators - cannot occur in real titles
-  const encodeValue = (o: SearchBoxOption): string => (o.isSeries ? SERIES_PREFIX : '') + String(o.value);
-
-  // ---- current values out of the legacy filter state -----------------------------------------
-  const makeValue =
-    filters[MANUFACTURER] && filters[MANUFACTURER].value != null ? String(filters[MANUFACTURER].value) : '';
-  const modelValue =
-    filters[MODEL] && filters[MODEL].value != null ? encodeValue(filters[MODEL] as SearchBoxOption) : '';
-  const price = filters[PRICE] && typeof filters[PRICE] === 'object' ? filters[PRICE] : { from: '', to: '' };
-
-  // ---- options --------------------------------------------------------------------------------
-  const clearOption: DropdownOption = { value: '', label: tr('any') };
-  const toDropdownOptions = (list: SearchBoxOption[]): DropdownOption[] =>
-    list.map((o) => ({ value: encodeValue(o), label: String(o.label), disabled: !!o.isDisabled }));
-
-  const makeOptions = toDropdownOptions(makes);
-  const modelOptions = toDropdownOptions(models);
-
-  const priceOptions = (nums: number[]): DropdownOption[] => [
-    clearOption,
-    ...nums.map((n) => ({ value: String(n), label: `${n.toLocaleString('de-DE')} €` })),
-  ];
-  // keep from ≤ to (legacy DropDownGroup behaviour).
-  const priceFromOptions = priceOptions(sliceLessThan(PRICE_OPTIONS, price.to));
-  const priceToOptions = priceOptions(sliceMoreThan(PRICE_OPTIONS, price.from));
-
-  // ---- change handlers (legacy onFilterChange value shapes) ----------------------------------
-  const commitOption = (name: string, source: SearchBoxOption[]) => (next: string) => {
-    if (!next) {
-      onFilterChange('', name);
-      return;
-    }
-    const match = source.find((o) => encodeValue(o) === next);
-    onFilterChange(
-      match
-        ? { value: match.value, label: match.label, ...(match.isSeries ? { isSeries: true } : {}) }
-        : { value: next, label: next },
-      name,
-    );
-  };
-
-  const commitPrice = (bound: 'from' | 'to') => (next: string) =>
-    onFilterChange({ ...price, [bound]: next }, PRICE);
-
-  // ---- submit (window access only inside handlers → SSR-safe) --------------------------------
-  const navigate = (path: string, query: string) => {
-    if (typeof window === 'undefined') return;
-    window.location.href = `${window.location.origin}/${path}${query ? `?${query}` : ''}`;
-  };
-  const submit = () => {
-    const query = buildQueryForSearch(filters);
-    if (onSearch) return onSearch(query);
-    navigate(searchPath, query);
-  };
-  const detailed = () => {
-    const query = buildQueryForSearch(filters);
-    if (onDetailedSearch) return onDetailedSearch(query);
-    navigate(detailedSearchPath, query);
-  };
-
-  const field = (label: string, control: React.ReactNode) => (
-    <div className="mfd">
-      <label className="md-label-sm mfield-label mfd-label">{label}</label>
-      {control}
-    </div>
-  );
-
-  const resultsLabel =
-    !counterLoading && counter != null
-      ? `${counter.toLocaleString('de-DE')} ${tr('showResults')}`
-      : tr('showResults');
-
-  return (
-    <section
-      className={'mcard sbx' + (className ? ` ${className}` : '')}
-      style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 12 }}
-    >
-      {title ? <h2 className="md-title" style={{ margin: 0 }}>{title}</h2> : null}
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 10 }}>
-        {field(
-          tr('make'),
-          <Dropdown
-            value={makeValue}
-            options={makeValue ? [clearOption, ...makeOptions] : makeOptions}
-            onChange={commitOption(MANUFACTURER, makes)}
-            placeholder={tr('make')}
-            ariaLabel={tr('make')}
-          />,
-        )}
-        {field(
-          tr('model'),
-          <Dropdown
-            value={modelValue}
-            options={modelValue ? [clearOption, ...modelOptions] : modelOptions}
-            onChange={commitOption(MODEL, models)}
-            placeholder={tr('model')}
-            ariaLabel={tr('model')}
-            disabled={!makeValue}
-          />,
-        )}
-        {field(
-          tr('priceFrom'),
-          <Dropdown
-            value={price.from != null ? String(price.from) : ''}
-            options={priceFromOptions}
-            onChange={commitPrice('from')}
-            placeholder={tr('any')}
-            ariaLabel={tr('priceFrom')}
-          />,
-        )}
-        {field(
-          tr('priceTo'),
-          <Dropdown
-            value={price.to != null ? String(price.to) : ''}
-            options={priceToOptions}
-            onChange={commitPrice('to')}
-            placeholder={tr('any')}
-            ariaLabel={tr('priceTo')}
-          />,
-        )}
-      </div>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
-        <Button icon="search" onClick={submit}>
-          {resultsLabel}
-        </Button>
-        {showDetailedSearch && (
-          <Button variant="text" onClick={detailed}>
-            {tr('detailedSearch')}
-          </Button>
-        )}
-      </div>
-    </section>
-  );
-};
-
-export default SearchBox;
+// Autobahn (auto.de redesign) — md3 compact search box.
+//
+// Shared replacement for the legacy fe-ui-core `SearchWidget` as it was used by
+// fe-wp-widgets' SearchWidgetContainer (and, later, fe-landing): a compact
+// make / model / price search form with a live result counter and a
+// "Detailsuche" escape hatch. The legacy widget's second tab ("Schnellsuche"
+// brand panel) and the rate-search modal are NOT ported — the md3 design is a
+// single compact panel.
+//
+// CONTRACT (mirrors the legacy container wiring):
+//   - `filters` is the CONTROLLED legacy filter-state object keyed by the
+//     SearchWidget constants (MANUFACTURER / MODEL / PRICE {from,to} / …).
+//     Values keep the legacy shapes: make/model are `{ value, label, isSeries? }`
+//     option objects (or '' when empty), PRICE is `{ from, to }` of raw numbers
+//     as strings. This keeps `buildQueryForSearch` / `buildBodyForRequest`
+//     working unchanged on the caller side.
+//   - `onFilterChange(value, name)` fires exactly like the legacy widget:
+//     make → `{value,label}` | `''`; model → `{value,label,isSeries?}` | `''`;
+//     price → the whole `{from,to}` object under the PRICE name.
+//   - submit builds the SRP query with the shared `buildQueryForSearch(filters)`
+//     and navigates via plain `window.location` (inside the event handler only —
+//     the component itself is SSR-safe: no window access at render).
+//
+// Pure / presentational: data (makes/models/counter) is injected by the host
+// container, which owns the API calls. Renders correctly only inside a
+// `<div className="md3">` subtree with theme/autobahn.css loaded.
+
+import React from 'react';
+
+import { Button, Dropdown, DropdownOption } from '../ui';
+import { MANUFACTURER, MODEL, PRICE, PRICE_OPTIONS } from '../constants/SearchWidget';
+import { buildQueryForSearch, sliceLessThan, sliceMoreThan } from '../utils/CommonUtils';
+import { TranslationFunction } from '../types';
+
+/** Option shape produced by the hosts' make/model transforms (top/regular headers use isDisabled). */
+export interface SearchBoxOption {
+  value: string | number;
+  label: string;
+  /** group-header rows ('top' / 'regular') — shown but not selectable. */
+  isDisabled?: boolean;
+  /** model-series rows — selectable; the query builder maps them to mainData_series. */
+  isSeries?: boolean;
+}
+
+/** Legacy filter-state object (keys = SearchWidget constants). */
+export interface SearchBoxFilters {
+  [key: string]: any;
+}
+
+export interface SearchBoxProps {
+  /** manufacturer options (host: transformManufacturers over car-makemodel-mapping). */
+  makes?: SearchBoxOption[];
+  /** model options for the selected make (host: transformModelsGeneral). */
+  models?: SearchBoxOption[];
+  /** CONTROLLED legacy filter state (MANUFACTURER / MODEL / PRICE {from,to} / …). */
+  filters: SearchBoxFilters;
+  /** live result count for the current filters (host: POST /count/car with buildBodyForRequest). */
+  counter?: number;
+  /** true while the counter request is in flight. */
+  counterLoading?: boolean;
+  /** legacy change contract — see the header comment for the emitted value shapes. */
+  onFilterChange: (value: any, name: string) => void;
+  /** override submit; receives the built query string. Default: window.location → `/{searchPath}?{query}`. */
+  onSearch?: (query: string) => void;
+  /** override the Detailsuche link; receives the built query string. Default: `/{detailedSearchPath}?{query}`. */
+  onDetailedSearch?: (query: string) => void;
+  /** SRP path for the default submit navigation. */
+  searchPath?: string;
+  /** detailed-search path for the default Detailsuche navigation. */
+  detailedSearchPath?: string;
+  /** hide the Detailsuche link (legacy isDealerWPpage behaviour). */
+  showDetailedSearch?: boolean;
+  /** optional heading above the fields; omitted → no heading. */
+  title?: string;
+  /** extra class on the panel (layout hooks). */
+  className?: string;
+  /** i18n translate (autobahn:searchBox.*). Optional — built-in German fallbacks are used without it. */
+  t?: TranslationFunction;
+}
+
+/** built-in German copy (used when no `t` is injected or a key is missing). */
+const DE_FALLBACK: Record<string, string> = {
+  make: 'Marke',
+  model: 'Modell',
+  priceFrom: 'Preis von',
+  priceTo: 'Preis bis',
+  any: 'beliebig',
+  showResults: 'Ergebnisse anzeigen',
+  detailedSearch: 'Detailsuche',
+};
+
+const SearchBox: React.FunctionComponent<SearchBoxProps> = ({
+  makes = [],
+  models = [],
+  filters,
+  counter,
+  counterLoading = false,
+  onFilterChange,
+  onSearch,
+  onDetailedSearch,
+  searchPath = 'search',
+  detailedSearchPath = 'search/detailed',
+  showDetailedSearch = true,
+  title,
+  className,
+  t,
+}) => {
+  // translate with fallback: i18next echoes the key back when it is missing.
+  const tr = (key: string): string => {
+    const fallback = DE_FALLBACK[key] || key;
+    if (!t) return fallback;
+    const full = `autobahn:searchBox.${key}`;
+    const out = t(full);
+    return out && out !== full ? out : fallback;
+  };
+
+  // A model list contains a selectable SERIES row followed by its models, and the
+  // series title can equal a model title (series 'Golf' → model 'Golf'). The md3
+  // Dropdown identifies options by VALUE, so series rows get a marker prefix to
+  // keep the two selectable; it is stripped again on commit.
+  const SERIES_PREFIX = '⁣series⁣'; // U+2063 invisible separators - cannot occur in real titles
+  const encodeValue = (o: SearchBoxOption): string => (o.isSeries ? SERIES_PREFIX : '') + String(o.value);
+
+  // ---- current values out of the legacy filter state -----------------------------------------
+  const makeValue =
+    filters[MANUFACTURER] && filters[MANUFACTURER].value != null ? String(filters[MANUFACTURER].value) : '';
+  const modelValue =
+    filters[MODEL] && filters[MODEL].value != null ? encodeValue(filters[MODEL] as SearchBoxOption) : '';
+  const price = filters[PRICE] && typeof filters[PRICE] === 'object' ? filters[PRICE] : { from: '', to: '' };
+
+  // ---- options --------------------------------------------------------------------------------
+  const clearOption: DropdownOption = { value: '', label: tr('any') };
+  const toDropdownOptions = (list: SearchBoxOption[]): DropdownOption[] =>
+    list.map((o) => ({ value: encodeValue(o), label: String(o.label), disabled: !!o.isDisabled }));
+
+  const makeOptions = toDropdownOptions(makes);
+  const modelOptions = toDropdownOptions(models);
+
+  const priceOptions = (nums: number[]): DropdownOption[] => [
+    clearOption,
+    ...nums.map((n) => ({ value: String(n), label: `${n.toLocaleString('de-DE')} €` })),
+  ];
+  // keep from ≤ to (legacy DropDownGroup behaviour).
+  const priceFromOptions = priceOptions(sliceLessThan(PRICE_OPTIONS, price.to));
+  const priceToOptions = priceOptions(sliceMoreThan(PRICE_OPTIONS, price.from));
+
+  // ---- change handlers (legacy onFilterChange value shapes) ----------------------------------
+  const commitOption = (name: string, source: SearchBoxOption[]) => (next: string) => {
+    if (!next) {
+      onFilterChange('', name);
+      return;
+    }
+    const match = source.find((o) => encodeValue(o) === next);
+    onFilterChange(
+      match
+        ? { value: match.value, label: match.label, ...(match.isSeries ? { isSeries: true } : {}) }
+        : { value: next, label: next },
+      name,
+    );
+  };
+
+  const commitPrice = (bound: 'from' | 'to') => (next: string) =>
+    onFilterChange({ ...price, [bound]: next }, PRICE);
+
+  // ---- submit (window access only inside handlers → SSR-safe) --------------------------------
+  const navigate = (path: string, query: string) => {
+    if (typeof window === 'undefined') return;
+    window.location.href = `${window.location.origin}/${path}${query ? `?${query}` : ''}`;
+  };
+  const submit = () => {
+    const query = buildQueryForSearch(filters);
+    if (onSearch) return onSearch(query);
+    navigate(searchPath, query);
+  };
+  const detailed = () => {
+    const query = buildQueryForSearch(filters);
+    if (onDetailedSearch) return onDetailedSearch(query);
+    navigate(detailedSearchPath, query);
+  };
+
+  const field = (label: string, control: React.ReactNode) => (
+    <div className="mfd">
+      <label className="md-label-sm mfield-label mfd-label">{label}</label>
+      {control}
+    </div>
+  );
+
+  const resultsLabel =
+    !counterLoading && counter != null
+      ? `${counter.toLocaleString('de-DE')} ${tr('showResults')}`
+      : tr('showResults');
+
+  return (
+    <section
+      className={'mcard sbx' + (className ? ` ${className}` : '')}
+      style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 12 }}
+    >
+      {title ? <h2 className="md-title" style={{ margin: 0 }}>{title}</h2> : null}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 10 }}>
+        {field(
+          tr('make'),
+          <Dropdown
+            value={makeValue}
+            options={makeValue ? [clearOption, ...makeOptions] : makeOptions}
+            onChange={commitOption(MANUFACTURER, makes)}
+            placeholder={tr('make')}
+            ariaLabel={tr('make')}
+          />,
+        )}
+        {field(
+          tr('model'),
+          <Dropdown
+            value={modelValue}
+            options={modelValue ? [clearOption, ...modelOptions] : modelOptions}
+            onChange={commitOption(MODEL, models)}
+            placeholder={tr('model')}
+            ariaLabel={tr('model')}
+            disabled={!makeValue}
+          />,
+        )}
+        {field(
+          tr('priceFrom'),
+          <Dropdown
+            value={price.from != null ? String(price.from) : ''}
+            options={priceFromOptions}
+            onChange={commitPrice('from')}
+            placeholder={tr('any')}
+            ariaLabel={tr('priceFrom')}
+          />,
+        )}
+        {field(
+          tr('priceTo'),
+          <Dropdown
+            value={price.to != null ? String(price.to) : ''}
+            options={priceToOptions}
+            onChange={commitPrice('to')}
+            placeholder={tr('any')}
+            ariaLabel={tr('priceTo')}
+          />,
+        )}
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
+        <Button icon="search" onClick={submit}>
+          {resultsLabel}
+        </Button>
+        {showDetailedSearch && (
+          <Button variant="text" onClick={detailed}>
+            {tr('detailedSearch')}
+          </Button>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default SearchBox;

package/widgets/index.ts

@@ -1,5 +1,5 @@
-// Autobahn (auto.de redesign) — standalone embeddable widgets.
-// Higher-level md3 blocks composed from ui/ primitives, shared by
-// fe-wp-widgets (WordPress) and fe-landing (SSR) — SSR-safe by contract.
-export { default as SearchBox } from './SearchBox';
-export type { SearchBoxProps, SearchBoxOption, SearchBoxFilters } from './SearchBox';
+// Autobahn (auto.de redesign) — standalone embeddable widgets.
+// Higher-level md3 blocks composed from ui/ primitives, shared by
+// fe-wp-widgets (WordPress) and fe-landing (SSR) — SSR-safe by contract.
+export { default as SearchBox } from './SearchBox';
+export type { SearchBoxProps, SearchBoxOption, SearchBoxFilters } from './SearchBox';