@bytebrand/fe-ui-core-autobahn 1.0.0

package/widgets/SearchBox.tsx

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

package/widgets/index.ts

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