feat: add Table and TableSection components (#1849)

* refactor: rename ui/table to ui/data-table

* feat: add Table and TableSection components

Closes #1806

front/src/effect-components/PageChangeEffect.tsx

@@ -12,9 +12,9 @@ import { AppBasePath } from '@/types/AppBasePath';
 import { AppPath } from '@/types/AppPath';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { SettingsPath } from '@/types/SettingsPath';
+import { TableHotkeyScope } from '@/ui/data-table/types/TableHotkeyScope';
 import { IconCheckbox, IconNotes } from '@/ui/icon';
 import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
-import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import {
   ActivityType,

front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts

@@ -1,6 +1,6 @@
 import { useRecoilValue } from 'recoil';
 
-import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector';
+import { selectedRowIdsSelector } from '@/ui/data-table/states/selectors/selectedRowIdsSelector';
 import { ActivityType } from '~/generated/graphql';
 
 import {

front/src/modules/companies/constants/companiesAvailableColumnDefinitions.tsx

@@ -1,3 +1,4 @@
+import { ColumnDefinition } from '@/ui/data-table/types/ColumnDefinition';
 import {
   FieldBooleanMetadata,
   FieldChipMetadata,
@@ -24,7 +25,6 @@ import {
   IconUsers,
 } from '@/ui/icon/index';
 import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
-import { ColumnDefinition } from '@/ui/table/types/ColumnDefinition';
 
 export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[] =
   [

front/src/modules/companies/hooks/useCompanyTableContextMenuEntries.tsx

@@ -4,6 +4,8 @@ import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks
 import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
 import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { contextMenuEntriesState } from '@/ui/context-menu/states/contextMenuEntriesState';
+import { useResetTableRowSelection } from '@/ui/data-table/hooks/useResetTableRowSelection';
+import { selectedRowIdsSelector } from '@/ui/data-table/states/selectors/selectedRowIdsSelector';
 import {
   IconCheckbox,
   IconHeart,
@@ -11,8 +13,6 @@ import {
   IconNotes,
   IconTrash,
 } from '@/ui/icon';
-import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
-import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector';
 import { ActivityType, useGetFavoritesQuery } from '~/generated/graphql';
 
 import { useDeleteSelectedComapnies } from './useDeleteCompanies';

front/src/modules/companies/hooks/useDeleteCompanies.ts

@@ -3,9 +3,9 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { useOptimisticEvict } from '@/apollo/optimistic-effect/hooks/useOptimisticEvict';
 import { GET_PIPELINES } from '@/pipeline/graphql/queries/getPipelines';
-import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
-import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector';
-import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
+import { useResetTableRowSelection } from '@/ui/data-table/hooks/useResetTableRowSelection';
+import { selectedRowIdsSelector } from '@/ui/data-table/states/selectors/selectedRowIdsSelector';
+import { tableRowIdsState } from '@/ui/data-table/states/tableRowIdsState';
 import { useDeleteManyCompaniesMutation } from '~/generated/graphql';
 
 export const useDeleteSelectedComapnies = () => {

front/src/modules/companies/table/components/CompanyTable.tsx

@@ -3,11 +3,11 @@ import { getCompaniesOptimisticEffectDefinition } from '@/companies/graphql/opti
 import { useCompanyTableActionBarEntries } from '@/companies/hooks/useCompanyTableActionBarEntries';
 import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries';
 import { useSpreadsheetCompanyImport } from '@/companies/hooks/useSpreadsheetCompanyImport';
-import { EntityTable } from '@/ui/table/components/EntityTable';
-import { EntityTableEffect } from '@/ui/table/components/EntityTableEffect';
-import { TableContext } from '@/ui/table/contexts/TableContext';
-import { useUpsertEntityTableItem } from '@/ui/table/hooks/useUpsertEntityTableItem';
-import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
+import { EntityTable } from '@/ui/data-table/components/EntityTable';
+import { EntityTableEffect } from '@/ui/data-table/components/EntityTableEffect';
+import { TableContext } from '@/ui/data-table/contexts/TableContext';
+import { useUpsertEntityTableItem } from '@/ui/data-table/hooks/useUpsertEntityTableItem';
+import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext';
 import { filtersWhereScopedSelector } from '@/ui/view-bar/states/selectors/filtersWhereScopedSelector';

front/src/modules/companies/table/components/CompanyTableMockDataEffect.tsx

@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 
-import { useSetEntityTableData } from '@/ui/table/hooks/useSetEntityTableData';
-import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
-import { tableColumnsScopedState } from '@/ui/table/states/tableColumnsScopedState';
+import { useSetEntityTableData } from '@/ui/data-table/hooks/useSetEntityTableData';
+import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
+import { tableColumnsScopedState } from '@/ui/data-table/states/tableColumnsScopedState';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { companiesAvailableColumnDefinitions } from '../../constants/companiesAvailableColumnDefinitions';

front/src/modules/companies/table/components/CompanyTableMockMode.tsx

@@ -1,5 +1,5 @@
-import { EntityTable } from '@/ui/table/components/EntityTable';
-import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
+import { EntityTable } from '@/ui/data-table/components/EntityTable';
+import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext';
 import { useUpdateOneCompanyMutation } from '~/generated/graphql';
 

front/src/modules/people/constants/peopleAvailableColumnDefinitions.tsx

@@ -1,3 +1,4 @@
+import { ColumnDefinition } from '@/ui/data-table/types/ColumnDefinition';
 import {
   FieldDateMetadata,
   FieldDoubleTextChipMetadata,
@@ -22,7 +23,6 @@ import {
   IconUser,
 } from '@/ui/icon/index';
 import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
-import { ColumnDefinition } from '@/ui/table/types/ColumnDefinition';
 
 export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[] =
   [

front/src/modules/people/hooks/useCreateActivityForPeople.ts

@@ -5,8 +5,8 @@ import {
   ActivityTargetableEntity,
   ActivityTargetableEntityType,
 } from '@/activities/types/ActivityTargetableEntity';
+import { selectedRowIdsSelector } from '@/ui/data-table/states/selectors/selectedRowIdsSelector';
 import { entityFieldsFamilyState } from '@/ui/field/states/entityFieldsFamilyState';
-import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector';
 import { ActivityType, Person } from '~/generated/graphql';
 
 export const useCreateActivityForPeople = () => {

front/src/modules/people/hooks/usePeopleTableContextMenuEntries.tsx

@@ -3,6 +3,9 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { contextMenuEntriesState } from '@/ui/context-menu/states/contextMenuEntriesState';
+import { useResetTableRowSelection } from '@/ui/data-table/hooks/useResetTableRowSelection';
+import { selectedRowIdsSelector } from '@/ui/data-table/states/selectors/selectedRowIdsSelector';
+import { tableRowIdsState } from '@/ui/data-table/states/tableRowIdsState';
 import {
   IconCheckbox,
   IconHeart,
@@ -10,9 +13,6 @@ import {
   IconNotes,
   IconTrash,
 } from '@/ui/icon';
-import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
-import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector';
-import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
 import {
   ActivityType,
   useDeleteManyPersonMutation,

front/src/modules/people/hooks/usePersonTableActionBarEntries.tsx

@@ -2,10 +2,10 @@ import { getOperationName } from '@apollo/client/utilities';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { actionBarEntriesState } from '@/ui/action-bar/states/actionBarEntriesState';
+import { useResetTableRowSelection } from '@/ui/data-table/hooks/useResetTableRowSelection';
+import { selectedRowIdsSelector } from '@/ui/data-table/states/selectors/selectedRowIdsSelector';
+import { tableRowIdsState } from '@/ui/data-table/states/tableRowIdsState';
 import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon';
-import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
-import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector';
-import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
 import { ActivityType, useDeleteManyPersonMutation } from '~/generated/graphql';
 
 import { GET_PEOPLE } from '../graphql/queries/getPeople';

front/src/modules/people/hooks/useSetPeopleEntityTable.ts

@@ -1,11 +1,11 @@
 import { useLocation } from 'react-router-dom';
 import { useRecoilCallback } from 'recoil';
 
-import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
-import { isFetchingEntityTableDataState } from '@/ui/table/states/isFetchingEntityTableDataState';
-import { numberOfTableRowsState } from '@/ui/table/states/numberOfTableRowsState';
-import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
-import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
+import { useResetTableRowSelection } from '@/ui/data-table/hooks/useResetTableRowSelection';
+import { isFetchingEntityTableDataState } from '@/ui/data-table/states/isFetchingEntityTableDataState';
+import { numberOfTableRowsState } from '@/ui/data-table/states/numberOfTableRowsState';
+import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
+import { tableRowIdsState } from '@/ui/data-table/states/tableRowIdsState';
 import { currentPageLocationState } from '@/ui/utilities/loading-state/states/currentPageLocationState';
 import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
 import { availableFiltersScopedState } from '@/ui/view-bar/states/availableFiltersScopedState';

front/src/modules/people/table/components/PeopleTable.tsx

@@ -3,11 +3,11 @@ import { getPeopleOptimisticEffectDefinition } from '@/people/graphql/optimistic
 import { usePersonTableContextMenuEntries } from '@/people/hooks/usePeopleTableContextMenuEntries';
 import { usePersonTableActionBarEntries } from '@/people/hooks/usePersonTableActionBarEntries';
 import { useSpreadsheetPersonImport } from '@/people/hooks/useSpreadsheetPersonImport';
-import { EntityTable } from '@/ui/table/components/EntityTable';
-import { EntityTableEffect } from '@/ui/table/components/EntityTableEffect';
-import { TableContext } from '@/ui/table/contexts/TableContext';
-import { useUpsertEntityTableItem } from '@/ui/table/hooks/useUpsertEntityTableItem';
-import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
+import { EntityTable } from '@/ui/data-table/components/EntityTable';
+import { EntityTableEffect } from '@/ui/data-table/components/EntityTableEffect';
+import { TableContext } from '@/ui/data-table/contexts/TableContext';
+import { useUpsertEntityTableItem } from '@/ui/data-table/hooks/useUpsertEntityTableItem';
+import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext';
 import { filtersWhereScopedSelector } from '@/ui/view-bar/states/selectors/filtersWhereScopedSelector';

front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx

@@ -4,7 +4,7 @@ import { useSetRecoilState } from 'recoil';
 
 import { useCompanyTableActionBarEntries } from '@/companies/hooks/useCompanyTableActionBarEntries';
 import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
-import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
+import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 

front/src/modules/ui/context-menu/components/__stories__/ContextMenu.stories.tsx

@@ -4,7 +4,7 @@ import { useSetRecoilState } from 'recoil';
 
 import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries';
 import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
-import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
+import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 

front/src/modules/ui/data-table/components/EntityTableColumnMenu.tsx

@@ -6,13 +6,13 @@ import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/Style
 import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
 import { IconPlus } from '@/ui/icon';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
-import { ColumnDefinition } from '@/ui/table/types/ColumnDefinition';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 
 import { useTableColumns } from '../hooks/useTableColumns';
 import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
 import { hiddenTableColumnsScopedSelector } from '../states/selectors/hiddenTableColumnsScopedSelector';
+import { ColumnDefinition } from '../types/ColumnDefinition';
 
 const StyledColumnMenu = styled(StyledDropdownMenu)`
   font-weight: ${({ theme }) => theme.font.weight.regular};

front/src/modules/ui/data-table/components/EntityTableEffect.tsx

@@ -4,7 +4,6 @@ import { useRecoilCallback } from 'recoil';
 
 import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
 import { OptimisticEffectDefinition } from '@/apollo/optimistic-effect/types/OptimisticEffectDefinition';
-import { useSetEntityTableData } from '@/ui/table/hooks/useSetEntityTableData';
 import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
 import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
 import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
@@ -15,6 +14,7 @@ import { FilterDefinition } from '@/ui/view-bar/types/FilterDefinition';
 import { SortDefinition } from '@/ui/view-bar/types/SortDefinition';
 import { SortOrder } from '~/generated/graphql';
 
+import { useSetEntityTableData } from '../hooks/useSetEntityTableData';
 import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
 
 export const EntityTableEffect = ({

front/src/modules/ui/data-table/components/EntityTableHeaderOptions.tsx

@@ -1,10 +1,11 @@
 import styled from '@emotion/styled';
 
 import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
+
 import {
   EntityTableHeaderOptionsProps,
   TableColumnDropdownMenu,
-} from '@/ui/table/components/TableColumnDropdownMenu';
+} from './TableColumnDropdownMenu';
 
 const StyledDropdownContainer = styled.div`
   left: 0px;

front/src/modules/ui/data-table/hooks/useSetEntityTableData.ts

@@ -1,9 +1,6 @@
 import { useRecoilCallback } from 'recoil';
 
 import { entityFieldsFamilyState } from '@/ui/field/states/entityFieldsFamilyState';
-import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
-import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
-import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
 import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
 import { availableFiltersScopedState } from '@/ui/view-bar/states/availableFiltersScopedState';
 import { availableSortsScopedState } from '@/ui/view-bar/states/availableSortsScopedState';
@@ -13,6 +10,10 @@ import { SortDefinition } from '@/ui/view-bar/types/SortDefinition';
 
 import { isFetchingEntityTableDataState } from '../states/isFetchingEntityTableDataState';
 import { numberOfTableRowsState } from '../states/numberOfTableRowsState';
+import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
+import { tableRowIdsState } from '../states/tableRowIdsState';
+
+import { useResetTableRowSelection } from './useResetTableRowSelection';
 
 export const useSetEntityTableData = () => {
   const resetTableRowSelection = useResetTableRowSelection();

front/src/modules/ui/data-table/options/components/TableOptionsDropdownButton.tsx

@@ -1,6 +1,6 @@
+import { TableOptionsDropdownId } from '@/ui/data-table/constants/TableOptionsDropdownId';
 import { StyledHeaderDropdownButton } from '@/ui/dropdown/components/StyledHeaderDropdownButton';
 import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
-import { TableOptionsDropdownId } from '@/ui/table/constants/TableOptionsDropdownId';
 
 export const TableOptionsDropdownButton = () => {
   const { isDropdownButtonOpen, toggleDropdownButton } = useDropdownButton({