[WEB-4885] feat: new filters architecture and UI components (#7802)

* feat: add rich filters types

* feat: add rich filters constants

* feat: add rich filters utils

* feat: add rich filters store in shared state package

* feat: add rich filters UI components

* fix: make setLoading optional in loadOptions function for improved flexibility

* chore: minor improvements to rich filters

* fix: formatting

packages/constants/src/index.ts

@@ -1,38 +1,39 @@
 export * from "./ai";
+export * from "./analytics";
 export * from "./auth";
 export * from "./chart";
+export * from "./cycle";
+export * from "./dashboard";
+export * from "./emoji";
 export * from "./endpoints";
+export * from "./estimates";
+export * from "./event-tracker";
 export * from "./file";
 export * from "./filter";
 export * from "./graph";
+export * from "./icon";
 export * from "./instance";
+export * from "./intake";
 export * from "./issue";
+export * from "./label";
 export * from "./metadata";
+export * from "./module";
 export * from "./notification";
+export * from "./page";
+export * from "./payment";
+export * from "./profile";
+export * from "./project";
+export * from "./rich-filters";
+export * from "./settings";
+export * from "./sidebar";
+export * from "./spreadsheet";
 export * from "./state";
+export * from "./stickies";
+export * from "./subscription";
 export * from "./swr";
 export * from "./tab-indices";
-export * from "./user";
-export * from "./payment";
-export * from "./workspace";
-export * from "./stickies";
-export * from "./cycle";
-export * from "./module";
-export * from "./project";
-export * from "./views";
 export * from "./themes";
-export * from "./intake";
-export * from "./profile";
+export * from "./user";
+export * from "./views";
 export * from "./workspace-drafts";
-export * from "./label";
-export * from "./event-tracker";
-export * from "./spreadsheet";
-export * from "./dashboard";
-export * from "./page";
-export * from "./emoji";
-export * from "./subscription";
-export * from "./settings";
-export * from "./icon";
-export * from "./estimates";
-export * from "./analytics";
-export * from "./sidebar";
+export * from "./workspace";

packages/constants/src/rich-filters/index.ts

@@ -0,0 +1,2 @@
+export * from "./operator-labels";
+export * from "./option";

packages/constants/src/rich-filters/operator-labels/core.ts

@@ -0,0 +1,24 @@
+import {
+  CORE_EQUALITY_OPERATOR,
+  CORE_COLLECTION_OPERATOR,
+  CORE_COMPARISON_OPERATOR,
+  TCoreSupportedOperators,
+  TCoreSupportedDateFilterOperators,
+} from "@plane/types";
+
+/**
+ * Core operator labels
+ */
+export const CORE_OPERATOR_LABELS_MAP: Record<TCoreSupportedOperators, string> = {
+  [CORE_EQUALITY_OPERATOR.EXACT]: "is",
+  [CORE_COLLECTION_OPERATOR.IN]: "is any of",
+  [CORE_COMPARISON_OPERATOR.RANGE]: "between",
+} as const;
+
+/**
+ * Core date-specific operator labels
+ */
+export const CORE_DATE_OPERATOR_LABELS_MAP: Record<TCoreSupportedDateFilterOperators, string> = {
+  [CORE_EQUALITY_OPERATOR.EXACT]: "is",
+  [CORE_COMPARISON_OPERATOR.RANGE]: "between",
+} as const;

packages/constants/src/rich-filters/operator-labels/extended.ts

@@ -0,0 +1,21 @@
+import { TExtendedSupportedOperators } from "@plane/types";
+
+/**
+ * Extended operator labels
+ */
+export const EXTENDED_OPERATOR_LABELS_MAP: Record<TExtendedSupportedOperators, string> = {} as const;
+
+/**
+ * Extended date-specific operator labels
+ */
+export const EXTENDED_DATE_OPERATOR_LABELS_MAP: Record<TExtendedSupportedOperators, string> = {} as const;
+
+/**
+ * Negated operator labels for all operators
+ */
+export const NEGATED_OPERATOR_LABELS_MAP: Record<never, string> = {} as const;
+
+/**
+ * Negated date operator labels for all date operators
+ */
+export const NEGATED_DATE_OPERATOR_LABELS_MAP: Record<never, string> = {} as const;

packages/constants/src/rich-filters/operator-labels/index.ts

@@ -0,0 +1,36 @@
+import { TAllAvailableOperatorsForDisplay, TAllAvailableDateFilterOperatorsForDisplay } from "@plane/types";
+import { CORE_OPERATOR_LABELS_MAP, CORE_DATE_OPERATOR_LABELS_MAP } from "./core";
+import {
+  EXTENDED_OPERATOR_LABELS_MAP,
+  EXTENDED_DATE_OPERATOR_LABELS_MAP,
+  NEGATED_OPERATOR_LABELS_MAP,
+  NEGATED_DATE_OPERATOR_LABELS_MAP,
+} from "./extended";
+
+/**
+ * Empty operator label for unselected state
+ */
+export const EMPTY_OPERATOR_LABEL = "--";
+
+/**
+ * Complete operator labels mapping - combines core, extended, and negated labels
+ */
+export const OPERATOR_LABELS_MAP: Record<TAllAvailableOperatorsForDisplay, string> = {
+  ...CORE_OPERATOR_LABELS_MAP,
+  ...EXTENDED_OPERATOR_LABELS_MAP,
+  ...NEGATED_OPERATOR_LABELS_MAP,
+} as const;
+
+/**
+ * Complete date operator labels mapping - combines core, extended, and negated labels
+ */
+export const DATE_OPERATOR_LABELS_MAP: Record<TAllAvailableDateFilterOperatorsForDisplay, string> = {
+  ...CORE_DATE_OPERATOR_LABELS_MAP,
+  ...EXTENDED_DATE_OPERATOR_LABELS_MAP,
+  ...NEGATED_DATE_OPERATOR_LABELS_MAP,
+} as const;
+
+// -------- RE-EXPORTS --------
+
+export * from "./core";
+export * from "./extended";

packages/constants/src/rich-filters/option.ts

@@ -0,0 +1,63 @@
+import { TExternalFilter } from "@plane/types";
+
+/**
+ * Filter config options.
+ */
+export type TConfigOptions = Record<string, unknown>;
+
+/**
+ * Default filter config options.
+ */
+export const DEFAULT_FILTER_CONFIG_OPTIONS: TConfigOptions = {};
+
+/**
+ * Clear filter config.
+ */
+export type TClearFilterOptions = {
+  label?: string;
+  onFilterClear: () => void | Promise<void>;
+  isDisabled?: boolean;
+};
+
+/**
+ * Save view config.
+ */
+export type TSaveViewOptions<E extends TExternalFilter> = {
+  label?: string;
+  onViewSave: (expression: E) => void | Promise<void>;
+  isDisabled?: boolean;
+};
+
+/**
+ * Update view config.
+ */
+export type TUpdateViewOptions<E extends TExternalFilter> = {
+  label?: string;
+  hasAdditionalChanges?: boolean;
+  onViewUpdate: (expression: E) => void | Promise<void>;
+  isDisabled?: boolean;
+};
+
+/**
+ * Filter expression options.
+ */
+export type TExpressionOptions<E extends TExternalFilter> = {
+  clearFilterOptions?: TClearFilterOptions;
+  saveViewOptions?: TSaveViewOptions<E>;
+  updateViewOptions?: TUpdateViewOptions<E>;
+};
+
+/**
+ * Default filter expression options.
+ */
+export const DEFAULT_FILTER_EXPRESSION_OPTIONS: TExpressionOptions<TExternalFilter> = {};
+
+/**
+ * Filter options.
+ * - expression: Filter expression options.
+ * - config: Filter config options.
+ */
+export type TFilterOptions<E extends TExternalFilter> = {
+  expression: Partial<TExpressionOptions<E>>;
+  config: Partial<TConfigOptions>;
+};