chore: Fix circular dependency in tanstack-table.d.ts (calcom#25411)

* chore: Fix circular dependency in tanstack-table.d.ts

* fix: Re-export TextFilterOperator

* Unable to export non-type values from @calcom/types

* Refactor data-table types in a way that ensures type-safety as before

* Add FilterPopover and further fixups

* Fix further type errors missed earlier

* More hidden type errors

* Type error in useFilterValue

Author: emrysal

apps/web/modules/insights/insights-view.tsx

@@ -10,6 +10,7 @@ import {
   ColumnFilterType,
   type FilterableColumn,
 } from "@calcom/features/data-table";
+import type { FilterType } from "@calcom/types/data-table";
 import { useDataTable } from "@calcom/features/data-table/hooks/useDataTable";
 import { useSegments } from "@calcom/features/data-table/hooks/useSegments";
 import {
@@ -53,13 +54,13 @@ export default function InsightsPage({ timeZone }: { timeZone: string }) {
   );
 }
 
-const createdAtColumn: Extract<FilterableColumn, { type: ColumnFilterType.DATE_RANGE }> = {
+const createdAtColumn: Extract<FilterableColumn, { type: Extract<FilterType, "dr"> }> = {
   id: "createdAt",
   title: "createdAt",
   type: ColumnFilterType.DATE_RANGE,
 };
 
-const startTimeColumn: Extract<FilterableColumn, { type: ColumnFilterType.DATE_RANGE }> = {
+const startTimeColumn: Extract<FilterableColumn, { type: Extract<FilterType, "dr"> }> = {
   id: "startTime",
   title: "startTime",
   type: ColumnFilterType.DATE_RANGE,

packages/features/data-table/components/filters/BaseSelectFilterOptions.tsx

@@ -18,26 +18,26 @@ import { Icon } from "@calcom/ui/components/icon";
 
 import { useDataTable, useFilterValue } from "../../hooks";
 import type {
-  ColumnFilterType,
   FacetedValue,
   FilterableColumn as _FilterableColumn,
   FilterValueSchema,
 } from "../../lib/types";
+import type { FilterType } from "@calcom/types/data-table";
 
 type FilterableColumn = Extract<
   _FilterableColumn,
-  { type: ColumnFilterType.MULTI_SELECT | ColumnFilterType.SINGLE_SELECT }
+  { type: Extract<FilterType, "ms" | "ss"> }
 >;
 
-type FilterableSelectColumn<T extends ColumnFilterType.MULTI_SELECT | ColumnFilterType.SINGLE_SELECT> =
+type FilterableSelectColumn<T extends Extract<FilterType, "ms" | "ss">> =
   Extract<FilterableColumn, { type: T }>;
 
-type FilterValue<T extends ColumnFilterType.MULTI_SELECT | ColumnFilterType.SINGLE_SELECT> = ReturnType<
+type FilterValue<T extends Extract<FilterType, "ms" | "ss">> = ReturnType<
   typeof useFilterValue<T, FilterValueSchema<T>>
 >;
 
 export type BaseSelectFilterOptionsProps<
-  T extends ColumnFilterType.MULTI_SELECT | ColumnFilterType.SINGLE_SELECT
+  T extends Extract<FilterType, "ms" | "ss">
 > = {
   column: FilterableSelectColumn<T>;
   filterValueSchema: FilterValueSchema<T>;
@@ -88,7 +88,7 @@ function getSectionedOptions(options: FacetedValue[]) {
 }
 
 export function BaseSelectFilterOptions<
-  T extends ColumnFilterType.MULTI_SELECT | ColumnFilterType.SINGLE_SELECT
+  T extends Extract<FilterType, "ms" | "ss">
 >({
   column,
   filterValueSchema,

packages/features/data-table/components/filters/DateRangeFilter.tsx

@@ -33,10 +33,11 @@ import {
 import { preserveLocalTime } from "../../lib/preserveLocalTime";
 import type { FilterableColumn, DateRangeFilterOptions } from "../../lib/types";
 import { ZDateRangeFilterValue, ColumnFilterType } from "../../lib/types";
+import type { FilterType } from "@calcom/types/data-table";
 import { useFilterPopoverOpen } from "./useFilterPopoverOpen";
 
 type DateRangeFilterProps = {
-  column: Extract<FilterableColumn, { type: ColumnFilterType.DATE_RANGE }>;
+  column: Extract<FilterableColumn, { type: Extract<FilterType, "dr"> }>;
   options?: DateRangeFilterOptions;
   showColumnName?: boolean;
   showClearButton?: boolean;

packages/features/data-table/components/filters/FilterPopover.tsx

@@ -1,6 +1,7 @@
-// eslint-disable-next-line no-restricted-imports
+ 
 import startCase from "lodash/startCase";
 
+import type { FilterType } from "@calcom/types/data-table";
 import { Badge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
 import type { IconName } from "@calcom/ui/components/icon";
@@ -18,7 +19,7 @@ import { FilterOptions } from "./FilterOptions";
 import { useFilterPopoverOpen } from "./useFilterPopoverOpen";
 import { numberFilterOperatorOptions, useTextFilterOperatorOptions } from "./utils";
 
-const FILTER_ICONS: Record<ColumnFilterType, IconName> = {
+const FILTER_ICONS: Record<FilterType, IconName> = {
   [ColumnFilterType.TEXT]: "file-text",
   [ColumnFilterType.NUMBER]: "binary",
   [ColumnFilterType.MULTI_SELECT]: "layers",
@@ -84,11 +85,11 @@ function AppliedSelectFilterValue({ column, filterValue }: SelectedLabelsProps)
   let moreCount = 0;
 
   if (isSingleSelectFilterValue(filterValue)) {
-    const options = (column as Extract<FilterableColumn, { type: ColumnFilterType.SINGLE_SELECT }>).options;
+    const options = (column as FilterableColumn & { type: "ss" }).options;
     text = options.find((opt) => opt.value === filterValue.data)?.label;
     moreCount = 0;
   } else if (isMultiSelectFilterValue(filterValue)) {
-    const options = (column as Extract<FilterableColumn, { type: ColumnFilterType.MULTI_SELECT }>).options;
+    const options = (column as FilterableColumn & { type: "ms" }).options;
     text = options.find((opt) => opt.value === filterValue.data[0])?.label;
     moreCount = filterValue.data.length - 1;
   }

packages/features/data-table/components/filters/MultiSelectFilterOptions.tsx

@@ -3,17 +3,18 @@
 import { useDataTable } from "../../hooks";
 import type { FilterableColumn } from "../../lib/types";
 import { ZMultiSelectFilterValue, ColumnFilterType } from "../../lib/types";
+import type { FilterType } from "@calcom/types/data-table";
 import { BaseSelectFilterOptions } from "./BaseSelectFilterOptions";
 
 export type MultiSelectFilterOptionsProps = {
-  column: Extract<FilterableColumn, { type: ColumnFilterType.MULTI_SELECT }>;
+  column: Extract<FilterableColumn, { type: Extract<FilterType, "ms"> }>;
 };
 
 export function MultiSelectFilterOptions({ column }: MultiSelectFilterOptionsProps) {
   const { updateFilter } = useDataTable();
 
   return (
-    <BaseSelectFilterOptions<ColumnFilterType.MULTI_SELECT>
+    <BaseSelectFilterOptions<Extract<FilterType, "ms">>
       column={column}
       filterValueSchema={ZMultiSelectFilterValue}
       testIdPrefix="select-filter-options"

packages/features/data-table/components/filters/NumberFilterOptions.tsx

@@ -9,10 +9,11 @@ import { Form, Select, NumberInput } from "@calcom/ui/components/form";
 import { useFilterValue, useDataTable } from "../../hooks";
 import type { FilterableColumn } from "../../lib/types";
 import { ZNumberFilterValue, ColumnFilterType } from "../../lib/types";
+import type { FilterType } from "@calcom/types/data-table";
 import { numberFilterOperatorOptions } from "./utils";
 
 export type NumberFilterOptionsProps = {
-  column: Extract<FilterableColumn, { type: ColumnFilterType.NUMBER }>;
+  column: Extract<FilterableColumn, { type: Extract<FilterType, "n"> }>;
 };
 
 export function NumberFilterOptions({ column }: NumberFilterOptionsProps) {

packages/features/data-table/components/filters/SingleSelectFilterOptions.tsx

@@ -1,19 +1,21 @@
 "use client";
 
+import type { FilterType } from "@calcom/types/data-table";
+
 import { useDataTable } from "../../hooks";
 import type { FilterableColumn } from "../../lib/types";
 import { ZSingleSelectFilterValue, ColumnFilterType } from "../../lib/types";
 import { BaseSelectFilterOptions } from "./BaseSelectFilterOptions";
 
 export type SingleSelectFilterOptionsProps = {
-  column: Extract<FilterableColumn, { type: ColumnFilterType.SINGLE_SELECT }>;
+  column: Extract<FilterableColumn, { type: Extract<FilterType, "ss"> }>;
 };
 
 export function SingleSelectFilterOptions({ column }: SingleSelectFilterOptionsProps) {
   const { updateFilter } = useDataTable();
 
   return (
-    <BaseSelectFilterOptions<ColumnFilterType.SINGLE_SELECT>
+    <BaseSelectFilterOptions<Extract<FilterType, "ss">>
       column={column}
       filterValueSchema={ZSingleSelectFilterValue}
       testIdPrefix="select-filter-options"

packages/features/data-table/components/filters/TextFilterOptions.tsx

@@ -9,10 +9,11 @@ import { Form, Select, Input } from "@calcom/ui/components/form";
 import { useFilterValue, useDataTable } from "../../hooks";
 import type { FilterableColumn } from "../../lib/types";
 import { ZTextFilterValue, ColumnFilterType } from "../../lib/types";
+import type { FilterType } from "@calcom/types/data-table";
 import { useTextFilterOperatorOptions } from "./utils";
 
 export type TextFilterOptionsProps = {
-  column: Extract<FilterableColumn, { type: ColumnFilterType.TEXT }>;
+  column: Extract<FilterableColumn, { type: Extract<FilterType, "t"> }>;
 };
 
 export function TextFilterOptions({ column }: TextFilterOptionsProps) {

packages/features/data-table/hooks/useFilterValue.ts

@@ -1,11 +1,12 @@
 import { useMemo } from "react";
 import type { z } from "zod";
 
-import type { FilterValueSchema, ColumnFilterType, ZFilterValue } from "../lib/types";
+import type { FilterValueSchema, ZFilterValue } from "../lib/types";
+import type { FilterType } from "@calcom/types/data-table";
 import { useDataTable } from "./useDataTable";
 
 export function useFilterValue<
-  T extends ColumnFilterType,
+  T extends FilterType,
   TSchema extends FilterValueSchema<T> | typeof ZFilterValue
 >(columnId: string, schema: TSchema) {
   const { activeFilters } = useDataTable();

packages/features/data-table/lib/types.ts

@@ -1,19 +1,24 @@
 import type { SortingState, ColumnSort } from "@tanstack/react-table";
 import { z } from "zod";
 
-import type { IconName } from "@calcom/ui/components/icon";
+import type { TextFilterOperator, FilterType } from "@calcom/types/data-table";
+export type { ColumnFilterMeta, FilterableColumn } from "@calcom/types/data-table";
+
+const ColumnFilterType = {
+  SINGLE_SELECT: "ss",
+  MULTI_SELECT: "ms",
+  TEXT: "t",
+  NUMBER: "n",
+  DATE_RANGE: "dr",
+} as const satisfies Record<string, FilterType>;
+
+type ColumnFilterTypeValues = typeof ColumnFilterType;
 
 export type { SortingState } from "@tanstack/react-table";
 
 export const SYSTEM_SEGMENT_PREFIX = "system_";
 
-export enum ColumnFilterType {
-  SINGLE_SELECT = "ss",
-  MULTI_SELECT = "ms",
-  TEXT = "t",
-  NUMBER = "n",
-  DATE_RANGE = "dr",
-}
+export { ColumnFilterType, TextFilterOperator };
 
 export const textFilterOperators = [
   "equals",
@@ -26,12 +31,10 @@ export const textFilterOperators = [
   "isNotEmpty",
 ] as const;
 
-export type TextFilterOperator = (typeof textFilterOperators)[number];
-
 export const ZTextFilterOperator = z.enum(textFilterOperators);
 
 export type SingleSelectFilterValue = {
-  type: ColumnFilterType.SINGLE_SELECT;
+  type: ColumnFilterTypeValues["SINGLE_SELECT"];
   data: string | number;
 };
 
@@ -41,7 +44,7 @@ export const ZSingleSelectFilterValue = z.object({
 }) satisfies z.ZodType<SingleSelectFilterValue>;
 
 export type MultiSelectFilterValue = {
-  type: ColumnFilterType.MULTI_SELECT;
+  type: ColumnFilterTypeValues["MULTI_SELECT"];
   data: Array<string | number>;
 };
 
@@ -51,7 +54,7 @@ export const ZMultiSelectFilterValue = z.object({
 }) satisfies z.ZodType<MultiSelectFilterValue>;
 
 export type TextFilterValue = {
-  type: ColumnFilterType.TEXT;
+  type: ColumnFilterTypeValues["TEXT"];
   data: {
     operator: TextFilterOperator;
     operand: string;
@@ -73,7 +76,7 @@ export type NumberFilterOperator = (typeof numberFilterOperators)[number];
 export const ZNumberFilterOperator = z.enum(numberFilterOperators);
 
 export type NumberFilterValue = {
-  type: ColumnFilterType.NUMBER;
+  type: ColumnFilterTypeValues["NUMBER"];
   data: {
     operator: NumberFilterOperator;
     operand: number;
@@ -89,7 +92,7 @@ export const ZNumberFilterValue = z.object({
 }) satisfies z.ZodType<NumberFilterValue>;
 
 export type DateRangeFilterValue = {
-  type: ColumnFilterType.DATE_RANGE;
+  type: ColumnFilterTypeValues["DATE_RANGE"];
   data: {
     startDate: string | null;
     endDate: string | null;
@@ -124,48 +127,6 @@ export type TextFilterOptions = {
   placeholder?: string;
 };
 
-export type ColumnFilterMeta =
-  | {
-      type: ColumnFilterType.DATE_RANGE;
-      icon?: IconName;
-      dateRangeOptions?: DateRangeFilterOptions;
-    }
-  | {
-      type: ColumnFilterType.TEXT;
-      icon?: IconName;
-      textOptions?: TextFilterOptions;
-    }
-  | {
-      type?: Exclude<ColumnFilterType, ColumnFilterType.DATE_RANGE | ColumnFilterType.TEXT>;
-      icon?: IconName;
-    };
-
-export type FilterableColumn = {
-  id: string;
-  title: string;
-  icon?: IconName;
-} & (
-  | {
-      type: ColumnFilterType.SINGLE_SELECT;
-      options: FacetedValue[];
-    }
-  | {
-      type: ColumnFilterType.MULTI_SELECT;
-      options: FacetedValue[];
-    }
-  | {
-      type: ColumnFilterType.TEXT;
-      textOptions?: TextFilterOptions;
-    }
-  | {
-      type: ColumnFilterType.NUMBER;
-    }
-  | {
-      type: ColumnFilterType.DATE_RANGE;
-      dateRangeOptions?: DateRangeFilterOptions;
-    }
-);
-
 export type ColumnFilter = {
   id: string;
   value: FilterValue;
@@ -176,32 +137,32 @@ export const ZColumnFilter = z.object({
   value: ZFilterValue,
 }) satisfies z.ZodType<ColumnFilter>;
 
-export type FilterValueSchema<T extends ColumnFilterType> = T extends ColumnFilterType.SINGLE_SELECT
+export type FilterValueSchema<T extends FilterType> = T extends ColumnFilterTypeValues["SINGLE_SELECT"]
   ? typeof ZSingleSelectFilterValue
-  : T extends ColumnFilterType.MULTI_SELECT
+  : T extends ColumnFilterTypeValues["MULTI_SELECT"]
   ? typeof ZMultiSelectFilterValue
-  : T extends ColumnFilterType.TEXT
+  : T extends ColumnFilterTypeValues["TEXT"]
   ? typeof ZTextFilterValue
-  : T extends ColumnFilterType.NUMBER
+  : T extends ColumnFilterTypeValues["NUMBER"]
   ? typeof ZNumberFilterValue
-  : T extends ColumnFilterType.DATE_RANGE
+  : T extends ColumnFilterTypeValues["DATE_RANGE"]
   ? typeof ZDateRangeFilterValue
   : never;
 
-export type FilterValue<T extends ColumnFilterType = ColumnFilterType> =
-  T extends ColumnFilterType.SINGLE_SELECT
+export type FilterValue<T extends FilterType = FilterType> =
+  T extends ColumnFilterTypeValues["SINGLE_SELECT"]
     ? SingleSelectFilterValue
-    : T extends ColumnFilterType.MULTI_SELECT
+    : T extends ColumnFilterTypeValues["MULTI_SELECT"]
     ? MultiSelectFilterValue
-    : T extends ColumnFilterType.TEXT
+    : T extends ColumnFilterTypeValues["TEXT"]
     ? TextFilterValue
-    : T extends ColumnFilterType.NUMBER
+    : T extends ColumnFilterTypeValues["NUMBER"]
     ? NumberFilterValue
-    : T extends ColumnFilterType.DATE_RANGE
+    : T extends ColumnFilterTypeValues["DATE_RANGE"]
     ? DateRangeFilterValue
     : never;
 
-export type TypedColumnFilter<T extends ColumnFilterType> = {
+export type TypedColumnFilter<T extends FilterType> = {
   id: string;
   value: FilterValue<T>;
 };