filters-pkg

Usage

pnpm add @smg-automotive/filters

Reference data and search configuration

Range filters (e.g. mileage, price) use slider scales from search-configuration data. Checkbox filters use per–vehicle-category reference data (fuel types, body types, etc.).

Apps fetch this data at build time, write JSON, and pass the result into FilterProvider as histogramRanges and referenceData. In automotive-web, listings-web uses @smg-automotive/build-data-prefetch for Node-safe build prefetch.

| Option | Type | Source | Description | |--------|------|--------|-------------| | histogramRanges | HistogramRanges | Build-time JSON | Search configuration for range filters. | | referenceData | ReferenceData | Build-time JSON | Per–vehicle-category reference data for checkbox filters. |

i18n setup (translations)

The package does not load or bundle translations. Your app uses @smg-automotive/i18n-pkg and passes the t function from useI18n() into FilterProvider. All filter-related keys live under the filtersPkg namespace.

Import the package translation files into your project dictionary so the filtersPkg namespace is available. Merge each locale’s object under a filtersPkg key in the dictionary you pass to I18nProvider. Then t('filtersPkg.mileage'), t('filtersPkg.from'), etc. will resolve.

Use the /translations subpath so that React and client-only code are not loaded (e.g. in server components or RSC):

import {
  filterTranslationsDe,
  filterTranslationsEn,
  filterTranslationsFr,
  filterTranslationsIt,
} from '@smg-automotive/filters/translations';

// Merge into your existing locale dictionaries, e.g.:
// dictionary.de.filtersPkg = filterTranslationsDe;
// dictionary.en.filtersPkg = filterTranslationsEn;
// ...

If you are not in a server/RSC context, you can instead import from the main entry: import { filterTranslations } from '@smg-automotive/filters'.

FilterProvider

Wrap your filter tree with FilterProvider and pass t, brand, histogramRanges, referenceData, and language. Do this inside a component that is already under I18nProvider. Pass build-time JSON as histogramRanges and referenceData. Pass the current locale as language (e.g. from useI18n().language).

| Prop | Type | Required | Description | |------|------|----------|-------------| | t | TFunction | Yes | Translation function from useI18n() (or equivalent). | | brand | Brand | Yes | Current brand (e.g. AutoScout24, MotoScout24). | | histogramRanges | HistogramRanges | Yes | Search configuration for range filters; from build-time JSON. | | referenceData | ReferenceData | Yes | Per–vehicle-category reference data (fuel types, body types, etc.). Used by checkbox filters. | | language | Language | Yes | Current UI language ('de', 'en', 'fr', or 'it'). Used for sorting and display. | | geoLocationLookup | GeoLocationLookup | No | Search and bulk lookup implementation required by useLocationAndRadiusFilter. |

import { FilterProvider } from '@smg-automotive/filters';

import { useI18n } from '../i18n';
import {
  searchConfiguration as histogramRanges,
  referenceData,
} from '../prefetchedData';
import { useBrand } from '../useBrand';

function FilterLayout() {
  const { t, language } = useI18n();
  const brand = useBrand();

  return (
    <FilterProvider
      t={t}
      brand={brand}
      histogramRanges={histogramRanges}
      referenceData={referenceData}
      language={language}
    >
      <YourFilterUI />
    </FilterProvider>
  );
}

Development

pnpm nx run @smg-automotive/filters:package:build
pnpm nx run @smg-automotive/filters:test
pnpm nx run @smg-automotive/filters:lint

Within the monorepo, apps should depend on the package with workspace:* and consume the package source directly. Published packages use the built dist entrypoints declared in publishConfig.

Release a new version

This package is released from the automotive-web monorepo. See the semantic release convention for release behavior and commit message requirements.