@luscii-healthtech/web-ui 7.0.0 → 7.2.0

package/dist/components/FilterBar/FilterBar.utils.d.ts

@@ -0,0 +1,32 @@
+import { CategorisedFilters, FilterGenerator, TransformedSortingOption } from "./FilterBarProps.type";
+/**
+ * Generates the list of filters based on the data (see this as what you'd like to be filtered in your component).
+ *
+ * @param dataToGenerateFiltersFrom  - The data (list of entities) that will be used to create the filters.
+ * @param groupers a list of functions used to create the filters dropdown
+ * @returns {CategorisedFilters} a list of filters properly grouped.
+ */
+export declare function getFilterGroups<T extends unknown[]>(dataToGenerateFiltersFrom: T, groupers: FilterGenerator<T[number]>[]): CategorisedFilters;
+/**
+ *
+ * @param filterKey the key of the categorized filter (eg. color, size, brand) - which one of them are you gonna check.
+ * @param categorizedFilters the array of categorized filters the FilterBar component needs
+ * @param attributeGetter the getter to retrieve the attribute to be filtered on, this allow maximum flexibility on how to process
+ * filters on any level of nesting if necessary.
+ * @returns a predicate to be used in the filter function
+ * @example
+ *
+ *   const sizeFilterPredicate = createFilterPredicate<TShirtFromApi>("size", filtersOptions, (item) => item.meta.size);
+ *   const filteredBySize = items.filter(sizeFilterPredicate);
+ *
+ */
+export declare const createFilterPredicate: <T extends object>(filterKey: keyof T, categorizedFilters: CategorisedFilters, attributeGetter: (item: T) => string) => (item: T) => boolean;
+/**
+ * Creates a sorting function to be used on a specific object attribute.
+ *
+ * @param getter the getter function to retrieve the attribute used in the sorting
+ * @param order if ascending or descending
+ * @returns the sorting comparer function to be used in Array.sort
+ */
+export declare const createSortingComparer: <T extends object>(getter: (item: T) => string | number, order?: "asc" | "desc") => (itemA: T, itemB: T) => number;
+export declare const applySorting: <T extends object[]>(sortable: T, sortingOptions: TransformedSortingOption[]) => T;

package/dist/components/FilterBar/FilterBarProps.type.d.ts

@@ -0,0 +1,94 @@
+/**
+ * The object used to create a filter dropdown in the component.
+ * This is used based on the dataset passed to FilterBar, so we always calculate the filters
+ * looking at the data.
+ */
+export type FilterGenerator<T> = {
+    id: string;
+    label: string;
+    /**
+     *
+     * @param data the value from the dataset entry that will be used for the filter
+     * @returns the string value for the desired filter
+     *
+     * @example
+     *
+     * ```json
+     * {
+          id: "brand",
+          label: "Brand",
+          filterValuePredicate: (tshirt: TShirtFromApi) => tshirt.brand,
+       }
+     * ```
+     * in the above, all unique values from `brand` will be used to populate the `Brand` filter.
+     */
+    filterValuePredicate: (data: T) => string;
+};
+/**
+ * Allows customization of labels related to filter.
+ *
+ */
+export type FilterBarLocalization = {
+    /**
+     * The string prefix displayed when a sorting value is selected in the menu.
+     *
+     * @default "Sorted by:"
+     * @example
+     *
+     * `sortedByLabel`: "Sorted by: "
+     *
+     * Example of sorting options
+     * - Name
+     * - Email (selected)
+     * - Date of birth
+     *
+     * UI shows: `Sorted by: Email`.
+     */
+    sortedByLabel: string;
+    /**
+     * The string for unselected state of the sorting options.
+     *
+     * @default "Sort"
+     */
+    sortLabel: string;
+    /**
+     * The string for the active filters and the mobile filter menu label.
+     *
+     * @default "Filters"
+     */
+    filtersLabel: string;
+};
+export type TransformedFilterOption = {
+    id: string;
+    label: string;
+    value: string;
+    isChecked: boolean;
+};
+export type TransformedFilterOptions = TransformedFilterOption[];
+type CategorisedFilter = {
+    key: string;
+    label: string;
+    options: TransformedFilterOptions;
+};
+export type CategorisedFilters = CategorisedFilter[];
+export type TransformedSortingOption = {
+    id: string;
+    label: string;
+    value: string;
+    isChecked: boolean;
+    sortingCompare: (itemA: any, itemB: any) => number;
+};
+export type TransformedSortingOptions = TransformedSortingOption[];
+export type OnFilterBarFilterChange = (params: {
+    category: string;
+    changedFilterOption: TransformedFilterOption;
+}) => void;
+export type OnFilterBarSortingChange = (changedSortingOption: TransformedSortingOption) => void;
+export type FilterBarProps = {
+    categorizedFilters: CategorisedFilters;
+    sortingOptions: TransformedSortingOptions;
+    onFilterChange: (updatedFilters: CategorisedFilters) => void;
+    onSortingChange: (updatedSortingOptions: TransformedSortingOptions) => void;
+    localization: FilterBarLocalization;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luscii-healthtech/web-ui",
-  "version": "7.0.0",
+  "version": "7.2.0",
   "license": "MIT",
   "author": {
     "name": "Joris Janssen"