@mobielnl/elements 0.1.1 → 0.3.0

package/dist/index.d.ts

@@ -6,14 +6,20 @@ import * as z_2 from 'zod';
 export declare function ActiveFilterChips({ activeFilters, filterOptions, onFilterRemove, classNames, }: ActiveFilterChipsProps): JSX.Element | null;
 
 declare type ActiveFilterChipsClassNames = {
+    /** The container of the filter chips */
     container?: string;
+    /** The filter chip element */
     filterChip?: FilterChipClassNames;
 };
 
 declare type ActiveFilterChipsProps = {
+    /** Currently active filter values */
     activeFilters: FilterValue[];
+    /** Available filter options to display */
     filterOptions: FilterOption[];
+    /** Callback when a filter value is removed */
     onFilterRemove: (filter: FilterValue) => void;
+    /** Class slots for styling */
     classNames?: ActiveFilterChipsClassNames;
 };
 
@@ -34,24 +40,29 @@ export declare type ElementsRootProps = {
     classNames?: ElementsClassNames;
 };
 
-export declare function FilterChip({ filter, filterOption, onRemove, classNames, }: FilterChipProps): JSX.Element;
+export declare function FilterChip({ filter, filterOption, onRemove, classNames, }: FilterChipProps): JSX.Element | null;
 
 declare type FilterChipClassNames = {
+    /** The base slot of the chip, it is the container of the chip */
     base?: string;
+    /** The content slot of the chip, it is the container of the chip children */
     content?: string;
-    dot?: string;
-    avatar?: string;
+    /** Close button classes of the chip */
     closeButton?: string;
 };
 
 declare type FilterChipProps = {
+    /** Filter value */
     filter: FilterValue;
+    /** Filter option */
     filterOption: FilterOption;
+    /** Callback when the filter is removed */
     onRemove: (filter: FilterValue) => void;
+    /** Class slots for styling */
     classNames?: FilterChipClassNames;
 };
 
-export declare function FilterModal({ filters, activeFilters, onFilterChange, classNames, }: FilterModalProps): JSX.Element;
+export declare function FilterModal({ filterOptions, activeFilters, onFilterChange, classNames, }: FilterModalProps): JSX.Element;
 
 /**
  * ClassNames for styling different parts of the `FilterModal` component
@@ -74,32 +85,9 @@ export declare type FilterModalProps = Omit<FiltersProps, 'classNames'> & {
 /**
  * Configuration for a single filter option
  */
-declare type FilterOption = {
-    /** Unique identifier for the filter */
-    id: string;
-    /** Display label for the filter
-     * @example "Prijs per maand" */
-    label: string;
-    /** Type of filter control to render */
-    type: 'range' | 'select' | 'radio' | 'hidden';
-    /** Available options for select-type filters
-     * @example ["1 jaar", "2 jaar", "Onbepaalde tijd"] */
-    options?: string[] | number[];
-    /** Minimum value for range-type filters */
-    min?: number;
-    /** Maximum value for range-type filters */
-    max?: number;
-    /** Step increment for range-type filters
-     * @example 5 */
-    step?: number;
-    /** Unit to display with range values
-     * @example "€" or "GB" */
-    unit?: string;
-    /** Format type for the filter value */
-    formatType?: 'currency' | 'percentage' | 'decimal' | 'integer' | string;
-};
+declare type FilterOption = NonNullable<GetPageByPathQuery['page']>['pageFilters'][number];
 
-export declare function Filters({ filters, activeFilters, onFilterChange, classNames, }: FiltersProps): JSX.Element;
+export declare function Filters({ filterOptions, activeFilters, onFilterChange, classNames, }: FiltersProps): JSX.Element | null;
 
 /**
  * ClassNames for styling different parts of the `Filters` component
@@ -116,8 +104,8 @@ export declare type FiltersClassNames = {
     /** Filter group label/heading
      * @example "Prijs per maand" */
     filterLabel?: string;
-    /** Range filter class styling slots - see type `RangeFilterClassNames` */
-    rangeFilter?: RangeFilterClassNames;
+    /** Range filter class styling slots - see type `SliderFilterClassNames` */
+    sliderFilter?: SliderFilterClassNames;
     /** Select filter class styling slots - see type `SelectFilterClassNames` */
     selectFilter?: SelectFilterClassNames;
     /** Radio filter class styling slots - see type `RadioFilterClassNames` */
@@ -126,7 +114,7 @@ export declare type FiltersClassNames = {
 
 export declare type FiltersProps = {
     /** Available filter options to display */
-    filters: FilterOption[];
+    filterOptions: FilterOption[];
     /** Currently active filter values */
     activeFilters: FilterValue[];
     /** Callback when a filter value changes */
@@ -139,14 +127,16 @@ export declare type FiltersProps = {
  * Represents an active filter value selected by the user
  */
 declare type FilterValue = {
-    /** Identifier matching the corresponding `FilterOption[id]` */
-    id: string;
+    /** Identifier slug matching the corresponding `FilterOption.slug` */
+    slug: string;
     /** The selected value(s) - type depends on filter type:
-     * - string: single text value
-     * - number: single numeric value
-     * - [number, number]: range values [min, max]
-     * - string[]: multiple selected options */
-    value: string | number | [number, number] | string[];
+     * - `string`: single text value for types: radio/range/min/max
+     * - `string[]`: multiple selected options for type select
+     * @example "150-400" // Range: from 150 to 400
+     * @example "150-" // Min: from 150
+     * @example "-400" // Max: up to 400
+     * @example ["KPN", "Vodafone", "Odido"] // Select: KPN, Vodafone, Odido */
+    value: string | string[];
 };
 
 /**
@@ -178,6 +168,45 @@ export declare type FooterInfoProps = {
     hasProduct?: boolean;
 };
 
+declare type GetPageByPathQuery = {
+    __typename?: 'RootQueryType';
+    page?: {
+        __typename?: 'Page';
+        productCategory: string;
+        filter: string;
+        filterDefaults: string;
+        pageFilters: Array<{
+            __typename?: 'PageFilter';
+            id: string;
+            name: string;
+            shortName: string;
+            slug: string;
+            column: string;
+            type: string;
+            valueType: string;
+            dynamic: boolean;
+            min?: number | null;
+            max?: number | null;
+            rank: number;
+            operator: string;
+            url?: string | null;
+            formatType: string;
+            showCounts: boolean;
+            options: Array<{
+                __typename?: 'PageFilterOption';
+                name: string;
+                descriptiveName: string;
+                value: string;
+            }>;
+            aliases: Array<{
+                __typename?: 'PageFilterAlias';
+                name: string;
+                value: string;
+            }>;
+        }>;
+    } | null;
+};
+
 declare type ListBoxClassNames = {
     base?: string;
     wrapper?: string;
@@ -221,9 +250,11 @@ declare type PostcodeCheckLoadingClassNames = {
     icon?: string;
     /** Wrapper container for the text */
     textWrapper?: string;
-    /** Heading text */
+    /** Heading text
+     * @example "Aan het zoeken naar de beste deals..." */
     heading?: string;
-    /** Address text */
+    /** Address text
+     * @example "Straatnaam 1, Stad" */
     addressText?: string;
 };
 
@@ -265,7 +296,7 @@ export declare type PricingSectionProps = {
 
 declare type ProductCategory = 'sim-only-proposition' | 'smartphone-proposition' | 'phone-and-subscription' | 'fixed-proposition';
 
-export declare function ProductResults({ productCategory, filterOptions, initialSelectedFilters, limit, propositionCardLayout, classNames, profile, onProfileChange, }: ProductResultsProps): JSX.Element;
+export declare function ProductResults({ productCategory, initialSelectedFilters, limit, propositionCardLayout, classNames, profile, onProfileChange, }: ProductResultsProps): JSX.Element;
 
 /**
  * ClassNames for styling different parts of the `ProductResults` component
@@ -285,6 +316,8 @@ export declare type ProductResultsClassNames = {
     modal?: ModalClassNames;
     /** Grid wrapper of the results */
     resultsGrid?: string;
+    /** Results not found component class styling slots - see type `ResultsNotFoundClassNames` */
+    resultsNotFound?: ResultsNotFoundClassNames;
     /** Proposition card class styling slots - see type `PropositionCardClassNames` */
     propositionCard?: PropositionCardClassNames;
     /** PostcodeCheck loading card class styling slots (only for fixed propositions) - see type `PostcodeCheckLoadingClassNames` */
@@ -294,8 +327,6 @@ export declare type ProductResultsClassNames = {
 export declare type ProductResultsProps = {
     /** Product type of the results */
     productCategory: ProductCategory;
-    /** Filter options to display */
-    filterOptions?: FilterOption[];
     /** Initial selected filters */
     initialSelectedFilters?: FilterValue[];
     /** Limit the number of propositions to display */
@@ -621,71 +652,43 @@ export declare type RadioFilterClassNames = {
 export declare type RadioFilterProps = {
     /** Unique identifier for this filter */
     id: string;
-    /** Available options to display as radio options
-     * @example ["1 jaar", "2 jaar", "Onbepaalde tijd"] */
-    options: string[] | number[];
+    /** Available options to display as radio options */
+    options: FilterOption['options'];
     /** Currently selected value */
-    value?: string | number;
+    value?: string;
     /** Callback when selection changes */
     onChange: (value: string) => void;
     /** Class slots for styling */
     classNames?: RadioFilterClassNames;
 };
 
-export declare function RangeFilter({ min, max, step, unit, value, onChange, classNames, }: RangeFilterProps): JSX.Element;
-
-/**
- * ClassNames for styling different parts of the `RangeFilter` component
- */
-export declare type RangeFilterClassNames = {
-    /** The foundational slot, encompassing all other slots and elements
-     *
-     * It serves as the primary container */
-    base?: string;
-    /** The container for the Slider's label and value
-     *
-     * It aligns these elements and ensures a consistent layout */
-    labelWrapper?: string;
-    /** A dedicated slot to display the Slider's label
-     * @example "€ 0 - € 100" */
-    label?: string;
-    /** Displays the current value of the Slider
-     *
-     * Located within the `labelWrapper` */
-    value?: string;
-    /** Represents individual steps or intervals on the Slider */
-    step?: string;
-    /** Denotes specific values or intervals along the Slider */
-    mark?: string;
-    /** A container for the slider's track, ensuring it is consistently aligned and positioned */
-    trackWrapper?: string;
-    /** The base bar of the Slider, along which the thumb moves */
-    track?: string;
-    /**  A visual representation of the selected value, filling the track from the start point to the current thumb position */
-    filler?: string;
-    /** The interactive element that users drag along the track to select a value on the Slider */
-    thumb?: string;
-};
+export declare function RangeFilter({ min, max, step, value, options, maxOptionValue, marks, formatType, onChange, classNames, }: SliderFilterProps): JSX.Element;
 
-export declare type RangeFilterProps = {
-    /** Unique identifier for this filter */
-    id: string;
-    /** Minimum value of the range */
-    min: number;
-    /** Maximum value of the range */
-    max: number;
-    /** Step increment for the slider
-     * @example 5 */
-    step?: number;
-    /** Unit to display with values
-     * @example "€" or "GB" */
-    unit?: string;
-    /** Currently selected range [min, max] */
-    value?: [number, number];
-    /** Callback when range changes */
-    onChange: (value: [number, number]) => void;
-    /** Class slots for styling */
-    classNames?: RangeFilterClassNames;
+declare type ResultsNotFoundClassNames = {
+    filterChips?: ActiveFilterChipsClassNames & {
+        /** The title element above the filter chips
+         * @example "Gekozen filters:" */
+        title?: string;
+    };
+    /** The alert element */
+    alert?: {
+        /** The main alert container element */
+        base?: string;
+        /** The alert title element
+         * @example "Geen resultaten gevonden" */
+        title?: string;
+        /** The alert description element
+         * @example "Er zijn geen producten gevonden met je gekozen filtercombinatie." */
+        description?: string;
+        /** The wrapper for the title and description content */
+        mainWrapper?: string;
+        /** The close button element */
+        closeButton?: string;
+        /** The wrapper for the alert icon */
+        iconWrapper?: string;
+        /** The alert icon element */
+        alertIcon?: string;
+    };
 };
 
 export declare function SelectFilter({ id, options, values, onChange, classNames, }: SelectFilterProps): JSX.Element;
@@ -725,17 +728,85 @@ export declare type SelectFilterClassNames = {
 export declare type SelectFilterProps = {
     /** Unique identifier for this filter */
     id: string;
-    /** Available options to display as checkboxes
-     * @example ["1 jaar", "2 jaar", "Onbepaalde tijd"] */
-    options: string[] | number[];
+    /** Available options to display as checkboxes */
+    options: FilterOption['options'];
     /** Currently selected values */
-    values?: string[] | number[];
+    values?: string[];
     /** Callback when selection changes */
     onChange: (values: string[]) => void;
     /** Class slots for styling */
     classNames?: SelectFilterClassNames;
 };
 
+/**
+ * ClassNames for styling different parts of the `RangeFilter`, `MinFilter` and `MaxFilter` component
+ */
+export declare type SliderFilterClassNames = {
+    /** The foundational slot, encompassing all other slots and elements
+     *
+     * It serves as the primary container */
+    base?: string;
+    /** The container for the Slider's label and value
+     *
+     * It aligns these elements and ensures a consistent layout */
+    labelWrapper?: string;
+    /** A dedicated slot to display the Slider's label
+     * @example "€ 0 - € 100" */
+    label?: string;
+    /** Displays the current value of the Slider
+     *
+     * Located within the `labelWrapper` */
+    value?: string;
+    /** Represents individual steps or intervals on the Slider */
+    step?: string;
+    /** Denotes specific values or intervals along the Slider */
+    mark?: string;
+    /** A container for the slider's track, ensuring it is consistently aligned and positioned */
+    trackWrapper?: string;
+    /** The base bar of the Slider, along which the thumb moves */
+    track?: string;
+    /**  A visual representation of the selected value, filling the track from the start point to the current thumb position */
+    filler?: string;
+    /** The interactive element that users drag along the track to select a value on the Slider */
+    thumb?: string;
+};
+
+export declare type SliderFilterProps = {
+    /** Unique identifier for this filter */
+    id: string;
+    /** Minimum value of the range */
+    min: number;
+    /** Maximum value of the range */
+    max: number;
+    /** Step increment for the slider
+     * @example 5 */
+    step: number;
+    /** Available fixed values within the slider
+     * @example "[0,100,150,200,400,UNLIMITED]" // from 0 to Unlimited */
+    options: number[];
+    /** The maximum value of the slider, calculated from the options and step */
+    maxOptionValue: number;
+    /** Currently selected value
+     * @example "150-400" // Range: from 150 to 400
+     * @example "150-" // Min: from 150
+     * @example "-400" // Max: up to 400
+     */
+    value?: string;
+    /** The marks to display on the Slider's steps. */
+    marks: {
+        /** The value corresponding to the mark */
+        value: number;
+        /** The label text of the mark */
+        label: string;
+    }[];
+    /** Format type for the filter value */
+    formatType?: FilterOption['formatType'];
+    /** Callback when value changes */
+    onChange: (value: string) => void;
+    /** Class slots for styling */
+    classNames?: SliderFilterClassNames;
+};
+
 declare type SortSelectClassNames = {
     description?: string;
     errorMessage?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobielnl/elements",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "Mobiel.nl Elements - React component library for partner websites",
   "private": false,
   "type": "module",
@@ -48,6 +48,7 @@
     "@graphql-codegen/typescript": "^4.1.2",
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
     "@graphql-codegen/typescript-operations": "^4.4.0",
+    "@heroui/alert": "^2.2.27",
     "@heroui/button": "^2.2.24",
     "@heroui/card": "^2.2.23",
     "@heroui/checkbox": "^2.3.24",