refactor: move data-table hooks/contexts/provider from features to web modules

apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/date-range-filter/page.tsx

@@ -3,7 +3,8 @@
 import { useReactTable, getCoreRowModel, createColumnHelper } from "@tanstack/react-table";
 import { useMemo } from "react";
 
-import { ColumnFilterType, DataTableProvider } from "@calcom/features/data-table";
+import { ColumnFilterType } from "@calcom/features/data-table";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
 import type { DateRangeFilterOptions } from "@calcom/features/data-table/lib/types";
 import { DateRangeFilter } from "~/data-table/components/filters/DateRangeFilter";
 

apps/web/modules/bookings/components/BookingListContainer.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import dayjs from "@calcom/dayjs";
-import { useDataTable, useDisplayedFilterCount } from "@calcom/features/data-table";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
+import { useDisplayedFilterCount } from "~/data-table/hooks/useDisplayedFilterCount";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";

apps/web/modules/bookings/hooks/useActiveFiltersValidator.ts

@@ -1,5 +1,6 @@
-import type { ActiveFilter, ActiveFilters, ActiveFiltersValidator } from "@calcom/features/data-table";
+import type { ActiveFilter, ActiveFilters } from "@calcom/features/data-table";
 import { ColumnFilterType } from "@calcom/features/data-table";
+import type { ActiveFiltersValidator } from "~/data-table/DataTableProvider";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import { useCallback, useMemo } from "react";

apps/web/modules/bookings/hooks/useBookingFilters.ts

@@ -1,9 +1,5 @@
-import {
-  useFilterValue,
-  ZMultiSelectFilterValue,
-  ZDateRangeFilterValue,
-  ZTextFilterValue,
-} from "@calcom/features/data-table";
+import { ZMultiSelectFilterValue, ZDateRangeFilterValue, ZTextFilterValue } from "@calcom/features/data-table";
+import { useFilterValue } from "~/data-table/hooks/useFilterValue";
 
 export function useBookingFilters() {
   const eventTypeIds = useFilterValue("eventTypeId", ZMultiSelectFilterValue)?.data as number[] | undefined;

apps/web/modules/bookings/hooks/useCalendarAllowedFilters.ts

@@ -1,6 +1,7 @@
 import { useMemo, useEffect, useRef } from "react";
 
-import { ColumnFilterType, useDataTable } from "@calcom/features/data-table";
+import { ColumnFilterType } from "@calcom/features/data-table";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 
 /**

apps/web/modules/bookings/views/bookings-view.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { ColumnFilterType, DataTableProvider, type SystemFilterSegment } from "@calcom/features/data-table";
+import { ColumnFilterType, type SystemFilterSegment } from "@calcom/features/data-table";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
 import { useSegments } from "~/data-table/hooks/useSegments";
 import FeatureOptInBannerWrapper from "~/feature-opt-in/components/FeatureOptInBannerWrapper";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

packages/features/data-table/DataTableProvider.tsx → apps/web/modules/data-table/DataTableProvider.tsx

@@ -20,7 +20,7 @@ import type {
   SegmentIdentifier,
   ActiveFilters,
   UseSegments,
-} from "./lib/types";
+} from "@calcom/features/data-table/lib/types";
 
 export type { ActiveFiltersValidatorState };
 export type { ActiveFiltersValidator } from "./contexts";

apps/web/modules/data-table/components/DataTable.tsx

@@ -21,8 +21,8 @@ import {
   TableRow,
 } from "@calcom/ui/components/table";
 
-import { useColumnSizingVars } from "@calcom/features/data-table/hooks";
-import { useColumnResizing } from "@calcom/features/data-table/hooks/useColumnResizing";
+import { useColumnSizingVars } from "~/data-table/hooks/useColumnSizingVars";
+import { useColumnResizing } from "~/data-table/hooks/useColumnResizing";
 import type { SeparatorRow } from "@calcom/features/data-table/lib/separator";
 import { isSeparatorRow } from "@calcom/features/data-table/lib/separator";
 

apps/web/modules/data-table/components/DataTablePagination.tsx

@@ -4,7 +4,7 @@ import { type Table } from "@tanstack/react-table";
 
 import { Pagination } from "@calcom/ui/components/pagination";
 
-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;

apps/web/modules/data-table/components/DataTableToolbar.tsx

@@ -10,7 +10,7 @@ import classNames from "@calcom/ui/classNames";
 import { Button, type ButtonProps } from "@calcom/ui/components/button";
 import { FilterSearchField } from "@calcom/ui/components/form";
 
-import { useColumnFilters, useDataTable } from "@calcom/features/data-table/hooks";
+import { useColumnFilters, useDataTable } from "~/data-table/hooks";
 
 interface DataTableToolbarProps extends ComponentPropsWithoutRef<"div"> {
   children: React.ReactNode;

apps/web/modules/data-table/components/DataTableWrapper.tsx

@@ -4,9 +4,9 @@ import type { Row, VisibilityState } from "@tanstack/react-table";
 import { noop } from "lodash";
 import { useEffect, useRef } from "react";
 
-import { useColumnFilters } from "@calcom/features/data-table/hooks/useColumnFilters";
-import { useDataTable } from "@calcom/features/data-table/hooks/useDataTable";
-import { useFetchMoreOnBottomReached } from "@calcom/features/data-table/hooks/useFetchMoreOnBottomReached";
+import { useColumnFilters } from "~/data-table/hooks/useColumnFilters";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
+import { useFetchMoreOnBottomReached } from "~/data-table/hooks/useFetchMoreOnBottomReached";
 import type { DataTablePropsFromWrapper } from "./DataTable";
 import { DataTable } from "./DataTable";
 import { DataTablePagination } from "./DataTablePagination";

apps/web/modules/data-table/components/filters/ActiveFilters.tsx

@@ -2,7 +2,7 @@
 
 import { type Table } from "@tanstack/react-table";
 
-import { useDataTable, useFilterableColumns } from "@calcom/features/data-table/hooks";
+import { useDataTable, useFilterableColumns } from "~/data-table/hooks";
 import { ColumnFilterType } from "@calcom/features/data-table/lib/types";
 import { DateRangeFilter } from "./DateRangeFilter";
 import { FilterPopover } from "./FilterPopover";

apps/web/modules/data-table/components/filters/AddFilterButton.tsx

@@ -11,7 +11,7 @@ import { Icon } from "@calcom/ui/components/icon";
 import { Popover, PopoverTrigger, PopoverContent } from "@calcom/ui/components/popover";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 
-import { useDataTable, useFilterableColumns } from "@calcom/features/data-table/hooks";
+import { useDataTable, useFilterableColumns } from "~/data-table/hooks";
 
 export interface AddFilterButtonProps<TData> {
   table: Table<TData>;

apps/web/modules/data-table/components/filters/BaseSelectFilterOptions.tsx

@@ -16,7 +16,7 @@ import {
 } from "@calcom/ui/components/command";
 import { Icon } from "@calcom/ui/components/icon";
 
-import { useDataTable, useFilterValue } from "@calcom/features/data-table/hooks";
+import { useDataTable, useFilterValue } from "~/data-table/hooks";
 import type {
   FacetedValue,
   FilterableColumn as _FilterableColumn,

apps/web/modules/data-table/components/filters/ClearFiltersButton.tsx

@@ -2,7 +2,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 
-import { useDataTable } from "@calcom/features/data-table/hooks/useDataTable";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
 
 export const ClearFiltersButton = ({ exclude }: { exclude?: string[] }) => {
   const { t } = useLocale();

apps/web/modules/data-table/components/filters/DateRangeFilter.tsx

@@ -19,7 +19,7 @@ import { DateRangePicker } from "@calcom/ui/components/form";
 import { Icon } from "@calcom/ui/components/icon";
 import { Popover, PopoverContent, PopoverTrigger } from "@calcom/ui/components/popover";
 
-import { useDataTable, useFilterValue } from "@calcom/features/data-table/hooks";
+import { useDataTable, useFilterValue } from "~/data-table/hooks";
 import {
   CUSTOM_PRESET,
   CUSTOM_PRESET_VALUE,

apps/web/modules/data-table/components/filters/FilterBar.tsx

@@ -2,7 +2,7 @@
 
 import { type Table } from "@tanstack/react-table";
 
-import { useDisplayedFilterCount } from "@calcom/features/data-table/hooks";
+import { useDisplayedFilterCount } from "~/data-table/hooks";
 import { ActiveFilters } from "./ActiveFilters";
 import { AddFilterButton } from "./AddFilterButton";
 

apps/web/modules/data-table/components/filters/FilterPopover.tsx

@@ -6,7 +6,7 @@ import { Button } from "@calcom/ui/components/button";
 import type { IconName } from "@calcom/ui/components/icon";
 import { Popover, PopoverContent, PopoverTrigger } from "@calcom/ui/components/popover";
 
-import { useFilterValue } from "@calcom/features/data-table/hooks";
+import { useFilterValue } from "~/data-table/hooks";
 import {
   type FilterableColumn,
   type FilterValue,

apps/web/modules/data-table/components/filters/MultiSelectFilterOptions.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";
 import type { FilterableColumn } from "@calcom/features/data-table/lib/types";
 import { ZMultiSelectFilterValue, ColumnFilterType } from "@calcom/features/data-table/lib/types";
 import type { FilterType } from "@calcom/types/data-table";

apps/web/modules/data-table/components/filters/NumberFilterOptions.tsx

@@ -6,7 +6,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
 import { Form, Select, NumberInput } from "@calcom/ui/components/form";
 
-import { useFilterValue, useDataTable } from "@calcom/features/data-table/hooks";
+import { useFilterValue, useDataTable } from "~/data-table/hooks";
 import type { FilterableColumn } from "@calcom/features/data-table/lib/types";
 import { ZNumberFilterValue, ColumnFilterType } from "@calcom/features/data-table/lib/types";
 import type { FilterType } from "@calcom/types/data-table";

apps/web/modules/data-table/components/filters/SingleSelectFilterOptions.tsx

@@ -2,7 +2,7 @@
 
 import type { FilterType } from "@calcom/types/data-table";
 
-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";
 import type { FilterableColumn } from "@calcom/features/data-table/lib/types";
 import { ZSingleSelectFilterValue, ColumnFilterType } from "@calcom/features/data-table/lib/types";
 import { BaseSelectFilterOptions } from "./BaseSelectFilterOptions";

apps/web/modules/data-table/components/filters/TextFilterOptions.tsx

@@ -6,7 +6,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
 import { Form, Select, Input } from "@calcom/ui/components/form";
 
-import { useFilterValue, useDataTable } from "@calcom/features/data-table/hooks";
+import { useFilterValue, useDataTable } from "~/data-table/hooks";
 import type { FilterableColumn } from "@calcom/features/data-table/lib/types";
 import { ZTextFilterValue, ColumnFilterType } from "@calcom/features/data-table/lib/types";
 import type { FilterType } from "@calcom/types/data-table";

apps/web/modules/data-table/components/filters/useFilterPopoverOpen.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from "react";
 
-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";
 
 export function useFilterPopoverOpen(columnId: string) {
   const { filterToOpen } = useDataTable();

apps/web/modules/data-table/components/segment/DeleteSegmentDialog.tsx

@@ -3,7 +3,7 @@ import { trpc } from "@calcom/trpc/react";
 import { Dialog, ConfirmationDialogContent } from "@calcom/ui/components/dialog";
 import { showToast } from "@calcom/ui/components/toast";
 
-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";
 import type { FilterSegmentOutput } from "@calcom/features/data-table/lib/types";
 
 export function DeleteSegmentDialog({

apps/web/modules/data-table/components/segment/DuplicateSegmentDialog.tsx

@@ -9,7 +9,7 @@ import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/co
 import { Form, TextField } from "@calcom/ui/components/form";
 import { showToast } from "@calcom/ui/components/toast";
 
-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";
 import type { CombinedFilterSegment } from "@calcom/features/data-table/lib/types";
 
 type FormValues = {

apps/web/modules/data-table/components/segment/FilterSegmentSelect.tsx

@@ -1,5 +1,5 @@
 import { checkAdminOrOwner } from "@calcom/features/auth/lib/checkAdminOrOwner";
-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";
 import type {
   CombinedFilterSegment,
   FilterSegmentOutput,

apps/web/modules/data-table/components/segment/SaveFilterSegmentButton.tsx

@@ -19,7 +19,7 @@ import { Form, Input, Label, Select, Switch } from "@calcom/ui/components/form";
 import { RadioGroup, RadioField } from "@calcom/ui/components/radio";
 import { showToast } from "@calcom/ui/components/toast";
 
-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";
 
 interface FormValues {
   name: string;

packages/features/data-table/contexts/DataTableFiltersContext.tsx → apps/web/modules/data-table/contexts/DataTableFiltersContext.tsx

@@ -3,7 +3,7 @@
 import debounce from "lodash/debounce";
 import { createContext, useContext, useCallback, useMemo, useEffect } from "react";
 
-import type { FilterValue, ActiveFilters } from "../lib/types";
+import type { FilterValue, ActiveFilters } from "@calcom/features/data-table/lib/types";
 import { useDataTableSegment } from "./DataTableSegmentContext";
 import { useDataTableState } from "./DataTableStateContext";
 

packages/features/data-table/contexts/DataTableSegmentContext.tsx → apps/web/modules/data-table/contexts/DataTableSegmentContext.tsx

@@ -9,8 +9,8 @@ import type {
   CombinedFilterSegment,
   SegmentIdentifier,
   UseSegments,
-} from "../lib/types";
-import { SYSTEM_SEGMENT_PREFIX } from "../lib/types";
+} from "@calcom/features/data-table/lib/types";
+import { SYSTEM_SEGMENT_PREFIX } from "@calcom/features/data-table/lib/types";
 import { useDataTableState } from "./DataTableStateContext";
 
 export type DataTableSegmentContextType = {

packages/features/data-table/contexts/DataTableStateContext.tsx → apps/web/modules/data-table/contexts/DataTableStateContext.tsx

@@ -16,9 +16,9 @@ import {
   pageSizeParser,
   searchTermParser,
   DEFAULT_PAGE_SIZE,
-} from "../lib/parsers";
-import type { ActiveFilters, SegmentIdentifier } from "../lib/types";
-import { CTA_CONTAINER_CLASS_NAME } from "../lib/utils";
+} from "@calcom/features/data-table/lib/parsers";
+import type { ActiveFilters, SegmentIdentifier } from "@calcom/features/data-table/lib/types";
+import { CTA_CONTAINER_CLASS_NAME } from "@calcom/features/data-table/lib/utils";
 
 export type ActiveFiltersValidator = (filters: ActiveFilters) => ActiveFilters;
 

packages/features/data-table/hooks/useChangeTimeZoneWithPreservedLocalTime.ts → apps/web/modules/data-table/hooks/useChangeTimeZoneWithPreservedLocalTime.ts

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 
 import { CURRENT_TIMEZONE } from "@calcom/lib/timezoneConstants";
 
-import { preserveLocalTime } from "../lib/preserveLocalTime";
+import { preserveLocalTime } from "@calcom/features/data-table/lib/preserveLocalTime";
 import { useDataTable } from "./useDataTable";
 
 /**

packages/features/data-table/hooks/useColumnFilters.ts → apps/web/modules/data-table/hooks/useColumnFilters.ts

@@ -1,8 +1,8 @@
 import { useCallback, useMemo } from "react";
 
-import type { ColumnFilter } from "../lib/types";
-import { ZFilterValue } from "../lib/types";
-import { isMultiSelectFilterValue } from "../lib/utils";
+import type { ColumnFilter } from "@calcom/features/data-table/lib/types";
+import { ZFilterValue } from "@calcom/features/data-table/lib/types";
+import { isMultiSelectFilterValue } from "@calcom/features/data-table/lib/utils";
 import { useDataTable } from "./useDataTable";
 
 export function useColumnFilters({ exclude }: { exclude?: string[] } = {}): ColumnFilter[] {

packages/features/data-table/hooks/useFilterValue.ts → apps/web/modules/data-table/hooks/useFilterValue.ts

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import type { z } from "zod";
 
-import type { FilterValueSchema, ZFilterValue } from "../lib/types";
+import type { FilterValueSchema, ZFilterValue } from "@calcom/features/data-table/lib/types";
 import type { FilterType } from "@calcom/types/data-table";
 import { useDataTable } from "./useDataTable";
 

packages/features/data-table/hooks/useFilterableColumns.ts → apps/web/modules/data-table/hooks/useFilterableColumns.ts

@@ -4,9 +4,9 @@ import { type Table } from "@tanstack/react-table";
 // eslint-disable-next-line no-restricted-imports
 import { useMemo } from "react";
 
-import type { FilterableColumn, FacetedValue } from "../lib/types";
-import { ColumnFilterType } from "../lib/types";
-import { convertMapToFacetedValues } from "../lib/utils";
+import type { FilterableColumn, FacetedValue } from "@calcom/features/data-table/lib/types";
+import { ColumnFilterType } from "@calcom/features/data-table/lib/types";
+import { convertMapToFacetedValues } from "@calcom/features/data-table/lib/utils";
 
 export function useFilterableColumns<TData>(table: Table<TData>) {
   const columns = useMemo(

packages/features/data-table/hooks/useSegmentsNoop.ts → apps/web/modules/data-table/hooks/useSegmentsNoop.ts

@@ -1,7 +1,7 @@
 // eslint-disable-next-line no-restricted-imports
 import { noop } from "lodash";
 
-import { type UseSegments } from "../lib/types";
+import { type UseSegments } from "@calcom/features/data-table/lib/types";
 
 export const useSegmentsNoop: UseSegments = ({}) => {
   return {

apps/web/modules/ee/dsync/components/GroupTeamMappingTable.tsx

@@ -3,7 +3,7 @@ import { useReactTable, getCoreRowModel } from "@tanstack/react-table";
 import { usePathname } from "next/navigation";
 import { useRef, useState } from "react";
 
-import { DataTableProvider } from "@calcom/features/data-table/DataTableProvider";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
 import { DataTable, DataTableToolbar } from "~/data-table/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";

apps/web/modules/ee/organizations/admin/views/SystemBlocklistView.tsx

@@ -11,7 +11,8 @@ import {
   PendingReportsTable,
   type SortByOption,
 } from "@calcom/web/modules/blocklist";
-import { DataTableProvider, useDataTable } from "@calcom/features/data-table";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
 import { DataTableToolbar } from "~/data-table/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";

apps/web/modules/ee/organizations/privacy.tsx

@@ -2,7 +2,7 @@
 
 import { usePathname } from "next/navigation";
 
-import { DataTableProvider } from "@calcom/features/data-table";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
 import { useSegments } from "~/data-table/hooks/useSegments";
 import LicenseRequired from "~/ee/common/components/LicenseRequired";
 import OrgAutoJoinSetting from "~/ee/organizations/components/OrgAutoJoinSetting";

apps/web/modules/ee/organizations/privacy/blocklist-table.tsx

@@ -10,7 +10,7 @@ import {
   PendingReportsTable,
   type SortByOption,
 } from "@calcom/web/modules/blocklist";
-import { useDataTable } from "@calcom/features/data-table";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
 import { DataTableToolbar } from "~/data-table/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";

apps/web/modules/ee/teams/components/MemberList.tsx

@@ -18,13 +18,11 @@ import { useMemo, useReducer, useRef, useState } from "react";
 import type { Dispatch, SetStateAction } from "react";
 
 import { Dialog } from "@calcom/features/components/controlled-dialog";
-import {
-  DataTableProvider,
-  useDataTable,
-  useFetchMoreOnBottomReached,
-  useColumnFilters,
-  convertFacetedValuesToMap,
-} from "@calcom/features/data-table";
+import { convertFacetedValuesToMap } from "@calcom/features/data-table";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
+import { useFetchMoreOnBottomReached } from "~/data-table/hooks/useFetchMoreOnBottomReached";
+import { useColumnFilters } from "~/data-table/hooks/useColumnFilters";
 import {
   DataTableToolbar,
   DataTableFilters,

apps/web/modules/ee/workflows/components/VoiceSelectionDialog.tsx

@@ -2,7 +2,7 @@ import { getCoreRowModel, getSortedRowModel, useReactTable, type ColumnDef } fro
 import { usePathname } from "next/navigation";
 import { useMemo, useState, useCallback } from "react";
 
-import { DataTableProvider } from "@calcom/features/data-table";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
 import { DataTableWrapper } from "~/data-table/components";
 import { useSegments } from "~/data-table/hooks/useSegments";
 import { useVoicePreview } from "@calcom/features/ee/workflows/hooks/useVoicePreview";