@trackunit/filters-filter-bar 0.0.1-alpha-d272aa10e1.0

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@trackunit/filters-filter-bar",
+  "version": "0.0.1-alpha-d272aa10e1.0",
+  "repository": "https://github.com/Trackunit/manager",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "engines": {
+    "node": ">=18.x"
+  },
+  "dependencies": {
+    "@trackunit/i18n-library-translation": "0.0.80-alpha-d272aa10e1.0",
+    "@trackunit/iris-app-api": "0.0.118-alpha-d272aa10e1.0",
+    "@trackunit/iris-app-runtime-core-api": "0.3.73-alpha-d272aa10e1.0",
+    "@trackunit/react-components": "0.1.166-alpha-d272aa10e1.0",
+    "@trackunit/react-core-contexts-api": "0.2.61-alpha-d272aa10e1.0",
+    "@trackunit/react-core-contexts-test": "0.1.114-alpha-d272aa10e1.0",
+    "@trackunit/react-core-hooks": "0.2.100-alpha-d272aa10e1.0",
+    "@trackunit/react-filter-components": "0.0.213-alpha-d272aa10e1.0",
+    "@trackunit/react-form-components": "0.0.155-alpha-d272aa10e1.0",
+    "@trackunit/shared-utils": "0.0.10-alpha-d272aa10e1.0",
+    "dequal": "2.0.3",
+    "lodash": "4.17.21",
+    "react": "18.2.0",
+    "react-router-dom": "6.11.2",
+    "react-virtual": "2.10.4"
+  },
+  "module": "./index.esm.js",
+  "main": "./index.cjs.js",
+  "peerDependencies": {}
+}

package/src/index.d.ts

@@ -0,0 +1 @@
+export * from "./lib";

package/src/lib/FilterBar.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { FilterBarConfig, FilterBarDefinition, FilterMapActions, FilterMapGetter } from "./types/FilterTypes";
+interface FilterBarProps<TFilterBarDefinition extends FilterBarDefinition> {
+    /**
+     * If you want some of the filters to be hidden, but still programmatically enabled
+     */
+    hiddenFilters?: string[];
+    /**
+     * CSS class name for styling purposes
+     */
+    className?: string;
+    /**
+     * The definition of the filter bar
+     */
+    filterBarDefinition: TFilterBarDefinition;
+    /**
+     * Configuration and actions for the filter bar
+     */
+    filterBarConfig: FilterBarConfig<TFilterBarDefinition> & FilterMapActions & FilterMapGetter;
+}
+/**
+ * The FilterBar component serves as a wrapper for managing filters.
+ */
+export declare const FilterBar: <TFilterBarDefinition extends FilterBarDefinition>({ hiddenFilters, className, filterBarDefinition, filterBarConfig, }: FilterBarProps<TFilterBarDefinition>) => JSX.Element;
+export {};

package/src/lib/components/DefaultCheckboxFilter.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DefaultFilterProps } from "./DefaultFilterTypes";
+/**
+ * `DefaultCheckboxFilter` is a React component for handling checkbox filters.
+ *
+ * @param {DefaultFilterProps<string[]>} props - The properties required for the `DefaultCheckboxFilter` component.
+ */
+export declare const DefaultCheckboxFilter: ({ filterDefinition, filterBarActions, options, loading, filterName, customSearch, showTooltip, setValue, }: DefaultFilterProps<string[]>) => JSX.Element;

package/src/lib/components/DefaultDateRangeFilter.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DateRangeValue } from "../types/FilterTypes";
+import { DefaultFilterProps } from "./DefaultFilterTypes";
+/**
+ * `DefaultDateRangeFilter` is a React component for handling date range filters.
+ *
+ * @param {DefaultFilterProps<DateRangeValue>} props - The properties required for the `DefaultDateRangeFilter` component.
+ */
+export declare const DefaultDateRangeFilter: ({ filterDefinition, filterName, value, setValue, }: DefaultFilterProps<DateRangeValue>) => JSX.Element;

package/src/lib/components/DefaultFilterTypes.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode } from "react";
+import { FilterName, FilterViewProps } from "../types/FilterTypes";
+export interface FilterOption {
+    /**
+     * The displayed label for this option
+     */
+    label: string;
+    /**
+     * The value used internally as the filter - this value is supplied to the backend
+     */
+    key: string;
+    /**
+     * Optional count for this option (show how many records that are available for this option)
+     */
+    count?: number;
+    /**
+     * Show a component together with the label
+     */
+    prefix?: ReactNode;
+}
+export interface DefaultFilterProps<TReturnType> extends FilterViewProps<TReturnType> {
+    /**
+     * An array of filter options to be displayed.
+     */
+    options: FilterOption[];
+    /**
+     * Indicates whether the filter is in a loading state.
+     */
+    loading?: boolean;
+    /**
+     * A flag indicating whether tooltips should be displayed for the filter options.
+     */
+    showTooltip?: boolean;
+    /**
+     * A custom filter name, if provided.
+     */
+    filterName?: `${Capitalize<FilterName>}Filter`;
+    /**
+     * By default, searches client side on all options. Override with this to support for server side searching
+     */
+    customSearch?: {
+        /**
+         * Current search string
+         */
+        value: string;
+        /**
+         * Callback when search string changed
+         *
+         * @param value Updated search string
+         */
+        onChange: (value: string) => void;
+    };
+}

package/src/lib/components/DefaultMinMaxFilter.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from "react";
+import { MinMaxFilterValue } from "../types/FilterTypes";
+import { DefaultFilterProps } from "./DefaultFilterTypes";
+interface DefaultMinMaxFilterProps extends DefaultFilterProps<MinMaxFilterValue> {
+    /**
+     * The unit of measurement associated with the filter values
+     */
+    unit: string | null | undefined;
+}
+/**
+ * `DefaultMinMaxFilter` is a React component designed to handle a filter with minimum and maximum values.
+ *
+ * @param {DefaultMinMaxFilterProps} props - The properties required for the `DefaultMinMaxFilter` component.
+ * @returns {ReactElement} The rendered `DefaultMinMaxFilter` component.
+ */
+export declare const DefaultMinMaxFilter: ({ filterDefinition, filterName, value, setValue, filterBarActions, unit, }: DefaultMinMaxFilterProps) => ReactElement;
+export {};

package/src/lib/components/DefaultRadioFilter.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ValueName } from "../types/FilterTypes";
+import { DefaultFilterProps } from "./DefaultFilterTypes";
+/**
+ * DefaultRadioFilter is a React component that renders a filter with radio button options based on the provided props.
+ *
+ * @returns {JSX.Element} - Returns the DefaultRadioFilter component.
+ */
+export declare const DefaultRadioFilter: ({ filterDefinition, filterBarActions, options, loading, filterName, customSearch, showTooltip, }: DefaultFilterProps<ValueName[]>) => JSX.Element;

package/src/lib/components/DynamicFilterList.d.ts

@@ -0,0 +1,63 @@
+import { ReactNode } from "react";
+interface DynamicFilterListProps {
+    /**
+     * The type of input element to use in the list.
+     */
+    type?: "CheckBox" | "Radio";
+    /**
+     * The total number of rows in the filter list.
+     */
+    rowCount: number;
+    /**
+     * A function that maps a row's index to a unique key.
+     *
+     * @param {number} rowIndex - The index of the row.
+     * @returns {string} - A unique key for the row.
+     */
+    keyMapper: (rowIndex: number) => string;
+    /**
+     * A function that maps a row's index to a label.
+     *
+     * @param {number} rowIndex - The index of the row.
+     * @returns {string} - The label for the row.
+     */
+    labelMapper: (rowIndex: number) => string;
+    /**
+     * An optional function that maps a row's index to a prefix element.
+     *
+     * @param {number} rowIndex - The index of the row.
+     * @returns {ReactNode} - The prefix element for the row.
+     */
+    prefixMapper?: (rowIndex: number) => ReactNode;
+    /**
+     * An optional callback function called when a row's input element value changes.
+     *
+     * @param {number} rowIndex - The index of the row.
+     */
+    onChange?: (rowIndex: number) => void;
+    /**
+     * A function that determines whether a row's input element is checked.
+     *
+     * @param {number} rowIndex - The index of the row.
+     * @returns {boolean} - `true` if the input element should be checked, `false` otherwise.
+     */
+    checked: (rowIndex: number) => boolean;
+    /**
+     * A function that returns the count associated with a row, if applicable.
+     *
+     * @param {number} rowIndex - The index of the row.
+     * @returns {number|undefined} - The count for the row, or `undefined` if not applicable.
+     */
+    count: (rowIndex: number) => number | undefined;
+    /**
+     * A flag indicating whether tooltips should be displayed for the rows.
+     */
+    showTooltip?: boolean;
+}
+/**
+ * DynamicFilterList is a React component that displays a list of dynamic filters with options like CheckBoxes or Radio buttons.
+ *
+ * @returns {JSX.Element} - Returns the DynamicFilterList component.
+ */
+export declare const DynamicFilterList: ({ rowCount, keyMapper, labelMapper, prefixMapper, onChange, checked, count, showTooltip, type, }: DynamicFilterListProps) => JSX.Element;
+export {};

package/src/lib/components/Filter.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { FilterDefinition, FilterMapActions, FilterMapGetter, FilterState } from "../types/FilterTypes";
+interface FilterProps {
+    /**
+     * The definition of the filter.
+     */
+    filter: FilterDefinition;
+    /**
+     * The state of the filter.
+     */
+    filterState: FilterState<{}>;
+    /**
+     * Actions and getters for the filter bar.
+     */
+    filterBarActions: FilterMapActions & FilterMapGetter;
+}
+/**
+ * Filter is a React component that renders a filter element based on the provided filter definition and state.
+ *
+ * @returns {JSX.Element} - Returns the Filter component.
+ */
+export declare const Filter: ({ filter, filterBarActions, filterState }: FilterProps) => JSX.Element;
+export {};

package/src/lib/components/FilterHeader.d.ts

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+import { FilterTranslation } from "../types/FilterTypes";
+interface FilterHeaderCommonProps {
+    loading?: boolean;
+    /**
+     * the filter key
+     */
+    /**
+     * The filter key, a unique identifier for the filter.
+     */
+    filterKey: string;
+    /**
+     * The title and translation for the filter.
+     */
+    title: FilterTranslation;
+    /**
+     * An optional callback function to reset the filter.
+     */
+    onResetFilter?: () => void;
+    /**
+     * A function to reset an individual filter to its initial state.
+     *
+     * @param {string} key - The key of the filter to reset.
+     */
+    resetIndividualFilterToInitialState: (key: string) => void;
+    /**
+     * A function to check if the filter has changed.
+     *
+     * @param {string} key - The key of the filter to check.
+     * @returns {boolean} - `true` if the filter has changed, `false` otherwise.
+     */
+    filterHasChanged(key: string): boolean;
+}
+interface FilterSearchProps {
+    /**
+     * The current search value.
+     */
+    value: string;
+    /**
+     * A callback function to handle changes in the search value.
+     *
+     * @param {string} value - The updated search value.
+     */
+    onChange: (value: string) => void;
+    /**
+     * An optional count value, indicating the number of search results.
+     */
+    count?: number;
+}
+type FilterHeaderWithSearchProps = {
+    searchEnabled?: false;
+    searchProps?: never;
+} | {
+    searchEnabled: true;
+    searchProps: FilterSearchProps;
+};
+type FilterHeaderProps = FilterHeaderCommonProps & FilterHeaderWithSearchProps;
+/**
+ * FilterHeader is a React component that renders the header for a filter, including search functionality and reset options.
+ *
+ * @returns {JSX.Element} - Returns the FilterHeader component.
+ */
+export declare const FilterHeader: ({ filterKey, title, searchEnabled, searchProps, filterHasChanged, resetIndividualFilterToInitialState, onResetFilter, loading, }: FilterHeaderProps) => JSX.Element;
+export {};

package/src/lib/components/FilterResults.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+interface Props<T> {
+    results: T[] | undefined | null;
+    loading?: boolean;
+    children: (results: T[]) => JSX.Element;
+}
+/**
+ * Wrapper around results for filters.
+ * Shows spinner if loading,
+ * shows no results if length or array is 0
+ * otherwise it calls children as a render prop
+ */
+export declare const FilterResults: <T extends string | object>({ results, loading, children }: Props<T>) => JSX.Element | null;
+export {};

package/src/lib/components/ResetFiltersButton.d.ts

@@ -0,0 +1,26 @@
+import { ReactElement } from "react";
+interface ResetFiltersProps {
+    /**
+     * A function that checks if a filter is included by its key.
+     *
+     * @param key - The key of the filter to check.
+     * @returns `true` if the filter is included, `false` otherwise.
+     */
+    isFilterIncludedByKey: (key: string) => boolean;
+    /**
+     * A function that resets the filters to their initial state.
+     */
+    resetFiltersToInitialState: () => void;
+    /**
+     * Indicates whether filters have been applied.
+     * If `true`, filters have been applied; if `false`, no filters are applied.
+     */
+    filtersHaveBeenApplied: boolean;
+}
+/**
+ * ResetFiltersButton is a React component that provides a button for resetting filters.
+ *
+ * @returns {ReactElement | null} The rendered ResetFiltersButton component, or null if no filters have been applied.
+ */
+export declare const ResetFiltersButton: ({ isFilterIncludedByKey, filtersHaveBeenApplied, resetFiltersToInitialState, }: ResetFiltersProps) => ReactElement | null;
+export {};

package/src/lib/components/StarredFilters.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { FilterBarConfig, FilterBarDefinition, FilterMapActions, FilterMapGetter } from "../types/FilterTypes";
+interface StarredFiltersProps<TFilterBarDefinition extends FilterBarDefinition> {
+    /**
+     * Configuration for the filter bar, including actions and getters.
+     * This is parameterized by the specific filter bar definition type.
+     */
+    filterBarConfig: FilterBarConfig<TFilterBarDefinition> & FilterMapActions & FilterMapGetter;
+    /**
+     * The definition of the filter bar, specifying its structure and filters.
+     */
+    filterBarDefinition: FilterBarDefinition;
+    /**
+     * If you want some of the filters to be hidden, but still programmatically enabled
+     */
+    hiddenFilters?: string[];
+}
+/**
+ * StarredFilters is a React component that displays a list of starred filters based on the provided filter bar configuration.
+ *
+ * @template TFilterBarDefinition - The type representing the filter bar definition.
+ * @returns {JSX.Element} - Returns the StarredFilters component.
+ */
+export declare const StarredFilters: <TFilterBarDefinition extends FilterBarDefinition>({ filterBarDefinition, filterBarConfig, hiddenFilters, }: StarredFiltersProps<TFilterBarDefinition>) => JSX.Element;
+export {};

package/src/lib/components/StarredFiltersMenu.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { FilterBarDefinition } from "../types/FilterTypes";
+interface Props {
+    /**
+     * An array of keys representing the starred filters.
+     */
+    starredFilterKeys: string[];
+    /**
+     * If you want some of the filters to be hidden, but still programmatically enabled
+     */
+    hiddenFilters?: string[];
+    /**
+     * A callback function used to update the starred filters.
+     *
+     * @param filterKey - The key of the filter to be updated.
+     */
+    updateStarredFilters: (filterKey: string) => void;
+    /**
+     * The definition of the filter bar, including its structure and available filter options.
+     */
+    filterBarDefinition: FilterBarDefinition;
+}
+/**
+ * StarredFiltersMenu is a React component that displays a menu of starred filters within a filter bar.
+ *
+ * @returns {JSX.Element} - Returns the StarredFiltersMenu component.
+ */
+export declare const StarredFiltersMenu: ({ filterBarDefinition, updateStarredFilters, starredFilterKeys, hiddenFilters, }: Props) => JSX.Element;
+export {};

package/src/lib/components/VirtualizedList.d.ts

@@ -0,0 +1,26 @@
+import { RefObject } from "react";
+interface VirtualizedListProps<T> {
+    /**
+     * A reference to the parent container element that holds the virtualized list.
+     */
+    parentRef: RefObject<T>;
+    /**
+     * The total number of items in the virtualized list.
+     */
+    count: number;
+    /**
+     * A function that takes an index and returns the JSX element to be rendered for that index.
+     *
+     * @param index - The index of the item to render.
+     * @returns The JSX element representing the item at the specified index.
+     */
+    children: (index: number) => JSX.Element;
+}
+/**
+ * Render a virtualized list of items
+ *
+ * @template T - The type of data items in the list.
+ * @returns {JSX.Element} - Returns the virtualized list component.
+ */
+export declare const VirtualizedList: <T extends {}>({ parentRef, count, children }: VirtualizedListProps<T>) => JSX.Element;
+export {};

package/src/lib/components/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./DefaultCheckboxFilter";
+export * from "./DefaultDateRangeFilter";
+export * from "./DefaultFilterTypes";
+export * from "./DefaultMinMaxFilter";
+export * from "./DefaultRadioFilter";
+export * from "./DynamicFilterList";
+export * from "./FilterHeader";
+export * from "./FilterResults";
+export * from "./StarredFilters";

package/src/lib/hooks/useFilterBar.d.ts

@@ -0,0 +1,59 @@
+import { BooleanValue, BoundingBox, DateRangeValue, FilterBarDefinition, FilterStateValues, FilterValueType, InitialState, MinMaxFilterValue, NumberValue, ValueName } from "../types/FilterTypes";
+export interface FilterBarProps<TFilterBarDefinition extends FilterBarDefinition> {
+    /**
+     * The name of the filter bar.
+     */
+    name: string;
+    /**
+     * An optional callback function that gets called when filter values change.
+     */
+    onValuesChange?: (values: FilterStateValues<TFilterBarDefinition>) => void;
+    /**
+     * An optional initial state for the filter bar.
+     */
+    initialState?: InitialState<TFilterBarDefinition>;
+    /**
+     * The filters that should potentially be used in the filter bar
+     */
+    filterBarDefinition: TFilterBarDefinition;
+}
+/**
+ * Custom hook for managing a filter bar's state and actions.
+ *
+ * @template TFilterBarDefinition - A generic type for the filter bar definition.
+ * @returns {object} An object containing filter bar configuration and actions.
+ */
+export declare const useFilterBar: <TFilterBarDefinition extends FilterBarDefinition>({ name, onValuesChange, filterBarDefinition, initialState, }: FilterBarProps<TFilterBarDefinition>) => {
+    filterBarConfig: {
+        getFilterName: () => string;
+        objectArrayIncludesValue: (key: string, value: string) => boolean;
+        getValuesByKey: (key: string) => FilterValueType;
+        arrayIncludesValue: (key: string, value: string) => boolean;
+        filtersHaveBeenApplied: boolean;
+        filterHasChanged(key: string): boolean;
+        isFilterIncludedByKey(key: string): boolean;
+        /**
+         * An optional initial state for the filter bar.
+         */
+        updateStarredFilters: (filterkey: string) => void;
+        toggleArrayValue: (key: string, value: string) => void;
+        setStringValue: (key: string, value: string) => void;
+        setArrayValue: (key: string, value: string[]) => void;
+        setBoundingBox: (boundingBox: BoundingBox) => void;
+        setNumberValue: (key: string, value: NumberValue) => void;
+        setBooleanValue: (key: string, value: BooleanValue) => void;
+        setDateRange: (key: string, value: DateRangeValue) => void;
+        setMinMaxValue: (key: string, minMaxValue: MinMaxFilterValue) => void;
+        setArrayObjectValue: (key: string, value: ValueName[]) => void;
+        toggleArrayObjectValue: (key: string, value: ValueName) => void;
+        resetFiltersToInitialState: () => void;
+        resetIndividualFilterToInitialState: (key: string) => void;
+        name: string;
+        initialState: InitialState<TFilterBarDefinition>;
+        filterNames: Extract<keyof TFilterBarDefinition, string>[];
+        starredFilterKeys: Extract<keyof TFilterBarDefinition, string>[];
+        values: FilterStateValues<TFilterBarDefinition>;
+        setters: import("../types/FilterTypes").FilterStateSetters<TFilterBarDefinition>;
+    };
+    filterBarDefinition: TFilterBarDefinition;
+};

package/src/lib/hooks/useGroupFilters.d.ts

@@ -0,0 +1,23 @@
+import { FilterDefinition } from "../types/FilterTypes";
+interface GroupOfFilters {
+    /**
+     * A unique key that identifies the group of filters.
+     */
+    key: string;
+    /**
+     * An array of filter definitions that belong to this group.
+     */
+    filters: FilterDefinition[];
+}
+interface UseGroupFiltersReturnType {
+    filtersGrouped: GroupOfFilters[];
+}
+/**
+ * Custom React hook for grouping and filtering a list of filters.
+ *
+ * @param {FilterDefinition[]} filterDefinitions - The list of filter definitions to group and filter.
+ * @param {string[]} hiddenFilters - An array of filter keys representing filters to be hidden.
+ * @returns {UseGroupFiltersReturnType} An object containing the grouped filters.
+ */
+export declare const useStarredGroupFilters: (filterDefinitions: FilterDefinition[], hiddenFilters: string[]) => UseGroupFiltersReturnType;
+export {};

package/src/lib/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./FilterBar";
+export * from "./components";
+export * from "./hooks/useFilterBar";
+export * from "./types/FilterTypes";
+export * from "./utils/mergeFilters";
+export * from "./utils/toggleFilterValue";