@smg-automotive/filters 1.2.0 → 1.3.0

package/README.md

@@ -8,10 +8,10 @@ npm install @smg-automotive/filters
 
 ## Environment variables
 
-| Variable | Used by | Required | Description |
-|----------|---------|----------|-------------|
-| `API_ROOT` | `fetchSearchConfiguration` | Yes (for search config) | Base URL of the search-configuration API. |
-| `API_VERSION` | `fetchSearchConfiguration` | Yes (for search config) | API version segment (e.g. `v1`). |
+| Variable | Used by                                          | Required | Description |
+|----------|--------------------------------------------------|----------|-------------|
+| `API_ROOT` | `fetchSearchConfiguration`, `fetchReferenceData` | Yes (for search config) | Base URL of the search-configuration API. |
+| `API_VERSION` | `fetchSearchConfiguration`, `fetchReferenceData` | Yes (for search config) | API version segment (e.g. `v1`). |
 
 ## Reference data
 
@@ -23,7 +23,11 @@ Use the package’s **`fetchSearchConfiguration`** utility so the app doesn’t
 
 ### Filter options
 
-TODO
+| Option | Type | Source | Description |
+|--------|------|--------|-------------|
+| `referenceData` | `ReferenceData` | `fetchReferenceData()` or build-time JSON | Per–vehicle-category reference data (fuel types, body types, etc.) for checkbox filters. |
+
+Use **`fetchReferenceData`** to load reference data; it calls the reference-data API for each vehicle category (car, utility, motorcycle, truck, trailer, camper) and uses `process.env.API_ROOT` and `process.env.API_VERSION`. For build-time prefetch, call it during your build and write the result to JSON, then import and pass it into `FilterProvider`.
 
 ## i18n setup (translations)
 
@@ -51,20 +55,35 @@ If you are not in a server/RSC context, you can instead import from the main ent
 
 ## FilterProvider
 
-**Wrap your filter tree with `FilterProvider`** and pass `t`, `brand`, and `histogramRanges`. Do this inside a component that is already under `I18nProvider`. Pass the result of `fetchSearchConfiguration` (or the JSON you wrote at build time) as `histogramRanges`:
+**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 the result of `fetchSearchConfiguration` (or the JSON you wrote at build time) as `histogramRanges`. Pass your app’s reference data (e.g. from prefetched data) as `referenceData` so checkbox filters (e.g. fuel type) can read options per vehicle category. 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 `fetchSearchConfiguration` or 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. |
 
 ```tsx
 import { useI18n } from 'shared/utilities/i18nInit';
 import { useDataDrivenAppRendering } from 'shared/contexts/dataDrivenRendering/App';
 import { FilterProvider } from '@smg-automotive/filters';
-// e.g. from a file written at build time using fetchSearchConfiguration:
+// e.g. from files written at build time:
 import { searchConfiguration as histogramRanges } from 'prefetchedData';
+import { referenceData } from 'prefetchedData';
 
 function FilterLayout() {
-  const { t } = useI18n();
+  const { t, language } = useI18n();
   const { brand } = useDataDrivenAppRendering();
   return (
-    <FilterProvider t={t} brand={brand} histogramRanges={histogramRanges}>
+    <FilterProvider
+      t={t}
+      brand={brand}
+      histogramRanges={histogramRanges}
+      referenceData={referenceData}
+      language={language}
+    >
       <YourFilterUI />
     </FilterProvider>
   );

package/dist/cjs/contexts/Filter.d.ts

@@ -1,11 +1,14 @@
 import { type FC, type PropsWithChildren } from 'react';
-import type { TFunction } from '@smg-automotive/i18n-pkg';
+import type { Language, TFunction } from '@smg-automotive/i18n-pkg';
+import { ReferenceData } from '../types/referenceData';
 import type { HistogramRanges } from '../types/facets';
 import type { Brand } from '../types/brand';
 export type FilterContextType = {
     t: TFunction;
     brand: Brand;
     histogramRanges: HistogramRanges;
+    referenceData: ReferenceData;
+    language: Language;
 };
 export declare const useFilterContext: () => FilterContextType;
 export type FilterProviderProps = PropsWithChildren<FilterContextType>;

package/dist/cjs/filters/__tests__/createTestFilterComponent.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
+import type { Language } from '@smg-automotive/i18n-pkg';
 import type { SharedArgs, SharedReturn } from 'src/types/useFilter';
+import type { ReferenceData } from 'src/types/referenceData';
 import type { Query } from 'src/types/query';
 import type { HistogramRanges } from 'src/types/facets';
 import { VehicleCategory } from 'src/types/enums';
@@ -15,5 +17,7 @@ export declare function createTestFilterComponent(useFilterHook: (args: SharedAr
 }) => SharedReturn<Partial<Query>>, options: {
     brand: Brand;
     histogramRanges: HistogramRanges;
+    referenceData?: ReferenceData;
+    language: Language;
 }): (args: Args) => React.JSX.Element;
 export {};

package/dist/cjs/filters/__tests__/createTestReferenceData.d.ts

@@ -0,0 +1,4 @@
+import type { ReferenceData, ReferenceDataByCategory } from 'src/types/referenceData';
+import { VehicleCategory } from 'src/types/enums';
+export declare function createTestReferenceData(partial?: Partial<Record<VehicleCategory, Partial<ReferenceDataByCategory>>>): ReferenceData;
+export declare const carFuelTypeReferenceData: ReferenceData;

package/dist/cjs/filters/useFuelTypeFilter.d.ts

@@ -0,0 +1,4 @@
+import type { UseCheckboxGroupFilter } from '../types/useFilter';
+import type { Query } from '../types/query';
+export declare const useFuelTypeFilter: UseCheckboxGroupFilter<Partial<Pick<Query, 'fuelTypes' | 'fuelTypeGroups'>>>;
+export default useFuelTypeFilter;

package/dist/cjs/hooks/useCheckboxFilter.d.ts

@@ -0,0 +1,22 @@
+import { CheckboxFilterItem } from '@smg-automotive/components';
+import { type CheckboxFilterName, type GenerateCheckboxFilterItemsArgs, type Group, type Option } from '../utilities/checkbox';
+import type { SharedArgs } from '../types/useFilter';
+import type { Query } from '../types/query';
+export type CheckboxItem = CheckboxFilterItem<Group | Option, CheckboxFilterName>;
+export type CheckboxItems = CheckboxItem[];
+type Args<Filters extends Partial<Query>, O extends Option, G extends Group> = {
+    isSearchable: boolean;
+} & Omit<GenerateCheckboxFilterItemsArgs<O, G>, 'language'> & Pick<SharedArgs<Filters>, 'filters' | 'onAddFilter' | 'onChange'>;
+declare const useCheckboxFilter: <Filters extends Partial<Query>, OptionType extends Option, GroupType extends Group>({ filters, onAddFilter, onChange: onFilterChange, ...generateCheckboxFilterItemsArgs }: Args<Filters, OptionType, GroupType>) => {
+    state: {
+        [x: string]: string[] | Group[];
+    };
+    checkboxItems: CheckboxItems;
+    onApply: (updatedItem: CheckboxItem) => void;
+    numberOfAppliedFilters: number;
+    isApplied: boolean;
+    reset: () => {
+        [x: string]: never[];
+    };
+};
+export default useCheckboxFilter;

package/dist/cjs/hooks/useCheckboxFilterReducer.d.ts

@@ -0,0 +1,49 @@
+import type { Group, Option } from '../utilities/checkbox';
+export type State<OptionType, GroupType> = {
+    options: OptionType[];
+    groups: GroupType[];
+};
+export declare enum ActionType {
+    DeselectChildOption = "DESELECT_CHILD_OPTION",
+    SelectChildOption = "SELECT_CHILD_OPTION",
+    DeselectGroup = "DESELECT_GROUP",
+    SelectGroup = "SELECT_GROUP",
+    DeselectChildAndGroupAndAddAllOtherChildOptions = "DESELECT_CHILD_AND_GROUP_AND_ADD_ALL_OTHER_CHILD_OPTIONS",
+    SetFilter = "SET_FILTER",
+    Reset = "RESET"
+}
+export type Action<OptionType extends Option, GroupType extends Group> = {
+    type: ActionType.DeselectChildOption | ActionType.SelectChildOption | ActionType.DeselectGroup;
+    payload: {
+        key: GroupType | OptionType;
+    };
+} | {
+    type: ActionType.SelectGroup;
+    payload: {
+        key: GroupType | OptionType;
+        parentGroupChildItems: OptionType[];
+    };
+} | {
+    type: ActionType.DeselectChildAndGroupAndAddAllOtherChildOptions;
+    payload: {
+        key: GroupType | OptionType;
+        parentGroup: GroupType;
+        parentGroupChildItems: OptionType[];
+    };
+} | {
+    type: ActionType.SetFilter;
+    payload: {
+        options: OptionType[];
+        groups: GroupType[];
+    };
+} | {
+    type: ActionType.Reset;
+};
+export declare const reducer: <OptionType extends Option, GroupType extends Group>(state: State<OptionType, GroupType>, action: Action<OptionType, GroupType>) => State<OptionType, GroupType>;
+export declare const useCheckboxFilterReducer: <OptionType extends Option, GroupType extends Group>({ initialState, onChange, }: {
+    initialState: State<OptionType, GroupType>;
+    onChange: (state: State<OptionType, GroupType>) => void;
+}) => {
+    state: State<OptionType, GroupType>;
+    dispatch: (action: Action<OptionType, GroupType>) => void;
+};

package/dist/cjs/index.d.ts

@@ -1,9 +1,12 @@
 export { BodyType, ColorType, ConditionType, ConditionTypeGroup, DriveSystem, DriveType, EmissionStandard, EnergyLabelType, EquipmentSearchAttributeGroup, EquipmentSearchAttribute, GeoLocation, FuelType, FuelTypeGroup, LicenseCategory, SellerType, TransmissionType, TransmissionTypeGroup, VehicleCategory, } from './types/enums';
-export type { MakeModelVersionQuery, Query, RangeFilters } from './types/query';
+export type { MakeModelVersionQuery, Query, RangeFilters, CheckboxFilters, CheckboxGroupFilters, } from './types/query';
+export type { ReferenceData, ReferenceDataByCategory, } from './types/referenceData';
 export type { Facet, Facets, FacetName, FacetNameWithRanges, FacetNameWithRange, HistogramRanges, } from './types/facets';
 export { FilterProvider, type FilterProviderProps } from './contexts/Filter';
 export { resetAllFilters, useResetAllFilters, } from './utilities/resetAllFilters';
 export { fetchSearchConfiguration } from './utilities/fetchSearchConfiguration';
+export { fetchReferenceData } from './utilities/fetchReferenceData';
 export { filterTranslations, filterTranslationsDe, filterTranslationsEn, filterTranslationsFr, filterTranslationsIt, type FilterTranslationLocale, } from './translations';
 export { cleanQuery } from './utilities/cleanQuery';
 export { useMileageFilter } from './filters/useMileageFilter';
+export { useFuelTypeFilter } from './filters/useFuelTypeFilter';