Refactor UI folder (#2016)

* Added Overview page

* Revised Getting Started page

* Minor revision

* Edited readme, minor modifications to docs

* Removed sweep.yaml, .devcontainer, .ergomake

* Moved security.md to .github, added contributing.md

* changes as per code review

* updated contributing.md

* fixed broken links & added missing links in doc, improved structure

* fixed link in wsl setup

* fixed server link, added https cloning in yarn-setup

* removed package-lock.json

* added doc card, admonitions

* removed underline from nav buttons

* refactoring modules/ui

* refactoring modules/ui

* Change folder case

* Fix theme location

* Fix case 2

* Fix storybook

---------

Co-authored-by: Nimra Ahmed <nimra1408@gmail.com>
Co-authored-by: Nimra Ahmed <50912134+nimraahmed@users.noreply.github.com>

front/src/modules/ui/board/types/BoardFieldDefinition.ts

@@ -1,8 +0,0 @@
-import { FieldDefinition } from '@/ui/field/types/FieldDefinition';
-import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
-
-export type BoardFieldDefinition<T extends FieldMetadata> =
-  FieldDefinition<T> & {
-    index: number;
-    isVisible?: boolean;
-  };

front/src/modules/ui/data-table/types/ColumnDefinition.ts

@@ -1,8 +0,0 @@
-import { FieldDefinition } from '@/ui/field/types/FieldDefinition';
-import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
-
-export type ColumnDefinition<T extends FieldMetadata> = FieldDefinition<T> & {
-  size: number;
-  index: number;
-  isVisible?: boolean;
-};

front/src/modules/ui/data/data-table/action-bar/components/DataTableActionBar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useRecoilValue } from 'recoil';
 
-import { ActionBar } from '@/ui/action-bar/components/ActionBar';
+import { ActionBar } from '@/ui/navigation/action-bar/components/ActionBar';
 
 import { selectedRowIdsSelector } from '../../states/selectors/selectedRowIdsSelector';
 

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

@@ -2,8 +2,8 @@ import { useCallback } from 'react';
 import styled from '@emotion/styled';
 import { useSetRecoilState } from 'recoil';
 
-import { actionBarOpenState } from '@/ui/action-bar/states/actionBarIsOpenState';
 import { Checkbox } from '@/ui/input/components/Checkbox';
+import { actionBarOpenState } from '@/ui/navigation/action-bar/states/actionBarIsOpenState';
 
 import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
 

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

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
+import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
 
 import { ColumnDefinition } from '../types/ColumnDefinition';
 

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

@@ -1,6 +1,6 @@
-import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
-import { DropdownScope } from '@/ui/dropdown/scopes/DropdownScope';
-import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
+import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
+import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 
 import { ColumnDefinition } from '../types/ColumnDefinition';
 

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

@@ -1,11 +1,11 @@
 import { useContext } from 'react';
 import { useSetRecoilState } from 'recoil';
 
-import { contextMenuIsOpenState } from '@/ui/context-menu/states/contextMenuIsOpenState';
-import { contextMenuPositionState } from '@/ui/context-menu/states/contextMenuPositionState';
-import { FieldContext } from '@/ui/field/contexts/FieldContext';
-import { isFieldRelation } from '@/ui/field/types/guards/isFieldRelation';
+import { FieldContext } from '@/ui/data/field/contexts/FieldContext';
+import { isFieldRelation } from '@/ui/data/field/types/guards/isFieldRelation';
 import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
+import { contextMenuIsOpenState } from '@/ui/navigation/context-menu/states/contextMenuIsOpenState';
+import { contextMenuPositionState } from '@/ui/navigation/context-menu/states/contextMenuPositionState';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 
 import { ColumnContext } from '../contexts/ColumnContext';

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

@@ -1,9 +1,9 @@
-import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
-import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
-import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
-import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
-import { IconArrowLeft, IconArrowRight, IconEyeOff } from '@/ui/icon';
-import { MenuItem } from '@/ui/menu-item/components/MenuItem';
+import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
+import { IconArrowLeft, IconArrowRight, IconEyeOff } from '@/ui/display/icon';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { StyledDropdownMenu } from '@/ui/layout/dropdown/components/StyledDropdownMenu';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 import { ColumnHeadDropdownId } from '../constants/ColumnHeadDropdownId';
 import { useTableColumns } from '../hooks/useTableColumns';

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

@@ -4,14 +4,14 @@ import { useRecoilCallback } from 'recoil';
 
 import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
 import { OptimisticEffectDefinition } from '@/apollo/optimistic-effect/types/OptimisticEffectDefinition';
+import { currentViewIdScopedState } from '@/ui/data/view-bar/states/currentViewIdScopedState';
+import { filtersScopedState } from '@/ui/data/view-bar/states/filtersScopedState';
+import { savedFiltersFamilyState } from '@/ui/data/view-bar/states/savedFiltersFamilyState';
+import { savedSortsFamilyState } from '@/ui/data/view-bar/states/savedSortsFamilyState';
+import { sortsScopedState } from '@/ui/data/view-bar/states/sortsScopedState';
+import { FilterDefinition } from '@/ui/data/view-bar/types/FilterDefinition';
+import { SortDefinition } from '@/ui/data/view-bar/types/SortDefinition';
 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';
-import { savedFiltersFamilyState } from '@/ui/view-bar/states/savedFiltersFamilyState';
-import { savedSortsFamilyState } from '@/ui/view-bar/states/savedSortsFamilyState';
-import { sortsScopedState } from '@/ui/view-bar/states/sortsScopedState';
-import { FilterDefinition } from '@/ui/view-bar/types/FilterDefinition';
-import { SortDefinition } from '@/ui/view-bar/types/SortDefinition';
 import { SortOrder } from '~/generated/graphql';
 
 import { useSetDataTableData } from '../hooks/useSetDataTableData';

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

@@ -2,8 +2,8 @@ import { useCallback, useState } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilCallback, useRecoilState } from 'recoil';
 
-import { IconButton } from '@/ui/button/components/IconButton';
-import { IconPlus } from '@/ui/icon';
+import { IconPlus } from '@/ui/display/icon';
+import { IconButton } from '@/ui/input/button/components/IconButton';
 import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 

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

@@ -1,11 +1,11 @@
 import { ComponentProps, useCallback, useRef } from 'react';
 import styled from '@emotion/styled';
 
-import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
-import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
-import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
-import { IconPlus } from '@/ui/icon';
-import { MenuItem } from '@/ui/menu-item/components/MenuItem';
+import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
+import { IconPlus } from '@/ui/display/icon';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { StyledDropdownMenu } from '@/ui/layout/dropdown/components/StyledDropdownMenu';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 

front/src/modules/ui/data/data-table/context-menu/components/DataTableContextMenu.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useRecoilValue } from 'recoil';
 
-import { ContextMenu } from '@/ui/context-menu/components/ContextMenu';
+import { ContextMenu } from '@/ui/navigation/context-menu/components/ContextMenu';
 
 import { selectedRowIdsSelector } from '../../states/selectors/selectedRowIdsSelector';
 

front/src/modules/ui/data/data-table/contexts/ColumnContext.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react';
 
-import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
+import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
 
 import { ColumnDefinition } from '../types/ColumnDefinition';
 

front/src/modules/ui/data/data-table/contexts/TableContext.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react';
 
-import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
+import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
 
 import { ColumnDefinition } from '../types/ColumnDefinition';
 

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

@@ -1,12 +1,12 @@
 import { useRecoilCallback } from 'recoil';
 
-import { entityFieldsFamilyState } from '@/ui/field/states/entityFieldsFamilyState';
+import { entityFieldsFamilyState } from '@/ui/data/field/states/entityFieldsFamilyState';
+import { availableFiltersScopedState } from '@/ui/data/view-bar/states/availableFiltersScopedState';
+import { availableSortsScopedState } from '@/ui/data/view-bar/states/availableSortsScopedState';
+import { entityCountInCurrentViewState } from '@/ui/data/view-bar/states/entityCountInCurrentViewState';
+import { FilterDefinition } from '@/ui/data/view-bar/types/FilterDefinition';
+import { SortDefinition } from '@/ui/data/view-bar/types/SortDefinition';
 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';
-import { entityCountInCurrentViewState } from '@/ui/view-bar/states/entityCountInCurrentViewState';
-import { FilterDefinition } from '@/ui/view-bar/types/FilterDefinition';
-import { SortDefinition } from '@/ui/view-bar/types/SortDefinition';
 
 import { isFetchingDataTableDataState } from '../states/isFetchingDataTableDataState';
 import { numberOfTableRowsState } from '../states/numberOfTableRowsState';

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

@@ -1,11 +1,11 @@
 import { useCallback, useContext } from 'react';
 import { useSetRecoilState } from 'recoil';
 
-import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
+import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
+import { currentViewIdScopedState } from '@/ui/data/view-bar/states/currentViewIdScopedState';
+import { ViewFieldForVisibility } from '@/ui/data/view-bar/types/ViewFieldForVisibility';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
-import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
-import { ViewFieldForVisibility } from '@/ui/view-bar/types/ViewFieldForVisibility';
 import { useMoveViewColumns } from '@/views/hooks/useMoveViewColumns';
 
 import { TableContext } from '../contexts/TableContext';

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

@@ -1,6 +1,6 @@
 import { useRecoilCallback } from 'recoil';
 
-import { entityFieldsFamilyState } from '@/ui/field/states/entityFieldsFamilyState';
+import { entityFieldsFamilyState } from '@/ui/data/field/states/entityFieldsFamilyState';
 
 export const useUpsertDataTableItem = () =>
   useRecoilCallback(

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

@@ -1,6 +1,6 @@
 import { useRecoilCallback } from 'recoil';
 
-import { entityFieldsFamilyState } from '@/ui/field/states/entityFieldsFamilyState';
+import { entityFieldsFamilyState } from '@/ui/data/field/states/entityFieldsFamilyState';
 
 export const useUpsertDataTableItems = () =>
   useRecoilCallback(

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

@@ -1,8 +1,8 @@
 import { useResetRecoilState } from 'recoil';
 
+import { ViewBarDropdownButton } from '@/ui/data/view-bar/components/ViewBarDropdownButton';
+import { viewEditModeState } from '@/ui/data/view-bar/states/viewEditModeState';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
-import { ViewBarDropdownButton } from '@/ui/view-bar/components/ViewBarDropdownButton';
-import { viewEditModeState } from '@/ui/view-bar/states/viewEditModeState';
 
 import { TableOptionsDropdownId } from '../../constants/TableOptionsDropdownId';
 

front/src/modules/ui/data/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 { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
+import { TableOptionsDropdownId } from '@/ui/data/data-table/constants/TableOptionsDropdownId';
+import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 
 export const TableOptionsDropdownButton = () => {
   const { isDropdownOpen, toggleDropdown } = useDropdown({

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

@@ -3,24 +3,24 @@ import { OnDragEndResponder } from '@hello-pangea/dnd';
 import { useRecoilCallback, useRecoilValue, useResetRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 
-import { DropdownMenuHeader } from '@/ui/dropdown/components/DropdownMenuHeader';
-import { DropdownMenuInput } from '@/ui/dropdown/components/DropdownMenuInput';
-import { DropdownMenuInputContainer } from '@/ui/dropdown/components/DropdownMenuInputContainer';
-import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
-import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
-import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
-import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
-import { IconChevronLeft, IconFileImport, IconTag } from '@/ui/icon';
-import { MenuItem } from '@/ui/menu-item/components/MenuItem';
+import { ViewFieldsVisibilityDropdownSection } from '@/ui/data/view-bar/components/ViewFieldsVisibilityDropdownSection';
+import { ViewBarContext } from '@/ui/data/view-bar/contexts/ViewBarContext';
+import { useUpsertView } from '@/ui/data/view-bar/hooks/useUpsertView';
+import { currentViewScopedSelector } from '@/ui/data/view-bar/states/selectors/currentViewScopedSelector';
+import { viewsByIdScopedSelector } from '@/ui/data/view-bar/states/selectors/viewsByIdScopedSelector';
+import { viewEditModeState } from '@/ui/data/view-bar/states/viewEditModeState';
+import { IconChevronLeft, IconFileImport, IconTag } from '@/ui/display/icon';
+import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
+import { DropdownMenuInput } from '@/ui/layout/dropdown/components/DropdownMenuInput';
+import { DropdownMenuInputContainer } from '@/ui/layout/dropdown/components/DropdownMenuInputContainer';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { StyledDropdownMenu } from '@/ui/layout/dropdown/components/StyledDropdownMenu';
+import { StyledDropdownMenuSeparator } from '@/ui/layout/dropdown/components/StyledDropdownMenuSeparator';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
-import { ViewFieldsVisibilityDropdownSection } from '@/ui/view-bar/components/ViewFieldsVisibilityDropdownSection';
-import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext';
-import { useUpsertView } from '@/ui/view-bar/hooks/useUpsertView';
-import { currentViewScopedSelector } from '@/ui/view-bar/states/selectors/currentViewScopedSelector';
-import { viewsByIdScopedSelector } from '@/ui/view-bar/states/selectors/viewsByIdScopedSelector';
-import { viewEditModeState } from '@/ui/view-bar/states/viewEditModeState';
 
 import { useTableColumns } from '../../hooks/useTableColumns';
 import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';

front/src/modules/ui/data/data-table/options/components/__stories__/TableOptionsDropdown.stories.tsx

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
+import { ViewBarContext } from '@/ui/data/view-bar/contexts/ViewBarContext';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
-import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { TableRecoilScopeContext } from '../../../states/recoil-scope-contexts/TableRecoilScopeContext';

front/src/modules/ui/data/data-table/states/availableTableColumnsScopedState.ts

@@ -1,6 +1,6 @@
 import { atomFamily } from 'recoil';
 
-import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
+import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
 
 import { ColumnDefinition } from '../types/ColumnDefinition';
 

front/src/modules/ui/data/data-table/states/savedTableColumnsFamilyState.ts

@@ -1,6 +1,6 @@
 import { atomFamily } from 'recoil';
 
-import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
+import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
 
 import { ColumnDefinition } from '../types/ColumnDefinition';
 

front/src/modules/ui/data/data-table/states/selectors/savedTableColumnsByKeyFamilySelector.ts

@@ -1,6 +1,6 @@
 import { selectorFamily } from 'recoil';
 
-import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
+import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
 
 import { ColumnDefinition } from '../../types/ColumnDefinition';
 import { savedTableColumnsFamilyState } from '../savedTableColumnsFamilyState';

front/src/modules/ui/data/data-table/states/selectors/tableColumnsByKeyScopedSelector.ts

@@ -1,6 +1,6 @@
 import { selectorFamily } from 'recoil';
 
-import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
+import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
 
 import { ColumnDefinition } from '../../types/ColumnDefinition';
 import { tableColumnsScopedState } from '../tableColumnsScopedState';

front/src/modules/ui/data/data-table/states/tableColumnsScopedState.ts

@@ -1,6 +1,6 @@
 import { atomFamily } from 'recoil';
 
-import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
+import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
 
 import { ColumnDefinition } from '../types/ColumnDefinition';
 

front/src/modules/ui/data/data-table/table-cell/components/TableCell.tsx

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
 
-import { FieldDisplay } from '@/ui/field/components/FieldDisplay';
-import { FieldInput } from '@/ui/field/components/FieldInput';
-import { FieldContext } from '@/ui/field/contexts/FieldContext';
-import { FieldInputEvent } from '@/ui/field/types/FieldInputEvent';
+import { FieldDisplay } from '@/ui/data/field/components/FieldDisplay';
+import { FieldInput } from '@/ui/data/field/components/FieldInput';
+import { FieldContext } from '@/ui/data/field/contexts/FieldContext';
+import { FieldInputEvent } from '@/ui/data/field/types/FieldInputEvent';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 import { useMoveSoftFocus } from '../../hooks/useMoveSoftFocus';

front/src/modules/ui/data/data-table/table-cell/components/TableCellButton.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 
-import { FloatingIconButton } from '@/ui/button/components/FloatingIconButton';
-import { IconComponent } from '@/ui/icon/types/IconComponent';
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';
 
 const StyledEditButtonContainer = styled(motion.div)`
   position: absolute;

front/src/modules/ui/data/data-table/table-cell/components/TableCellContainer.tsx

@@ -1,9 +1,9 @@
 import { ReactElement, useContext, useState } from 'react';
 import styled from '@emotion/styled';
 
-import { useIsFieldEmpty } from '@/ui/field/hooks/useIsFieldEmpty';
-import { useIsFieldInputOnly } from '@/ui/field/hooks/useIsFieldInputOnly';
-import { IconComponent } from '@/ui/icon/types/IconComponent';
+import { useIsFieldEmpty } from '@/ui/data/field/hooks/useIsFieldEmpty';
+import { useIsFieldInputOnly } from '@/ui/data/field/hooks/useIsFieldInputOnly';
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext';

front/src/modules/ui/data/data-table/table-cell/components/TableCellDisplayMode.tsx

@@ -1,4 +1,4 @@
-import { useIsFieldInputOnly } from '@/ui/field/hooks/useIsFieldInputOnly';
+import { useIsFieldInputOnly } from '@/ui/data/field/hooks/useIsFieldInputOnly';
 
 import { useSetSoftFocusOnCurrentTableCell } from '../hooks/useSetSoftFocusOnCurrentTableCell';
 import { useTableCell } from '../hooks/useTableCell';

front/src/modules/ui/data/data-table/table-cell/components/TableCellEditButton.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 
-import { FloatingIconButton } from '@/ui/button/components/FloatingIconButton';
-import { IconComponent } from '@/ui/icon/types/IconComponent';
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';
 
 const StyledEditButtonContainer = styled(motion.div)`
   position: absolute;

front/src/modules/ui/data/data-table/table-cell/components/TableCellSoftFocusMode.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, useEffect, useRef } from 'react';
 
-import { useIsFieldInputOnly } from '@/ui/field/hooks/useIsFieldInputOnly';
+import { useIsFieldInputOnly } from '@/ui/data/field/hooks/useIsFieldInputOnly';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey';
 

front/src/modules/ui/data/data-table/table-cell/hooks/useTableCell.ts

@@ -1,8 +1,8 @@
 import { useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { FieldContext } from '@/ui/field/contexts/FieldContext';
-import { useIsFieldEmpty } from '@/ui/field/hooks/useIsFieldEmpty';
+import { FieldContext } from '@/ui/data/field/contexts/FieldContext';
+import { useIsFieldEmpty } from '@/ui/data/field/hooks/useIsFieldEmpty';
 import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';

front/src/modules/ui/data/data-table/table-header/components/TableHeader.tsx

@@ -2,9 +2,9 @@ import { useContext } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useRecoilCallback } from 'recoil';
 
+import { ViewBar } from '@/ui/data/view-bar/components/ViewBar';
+import { ViewBarContext } from '@/ui/data/view-bar/contexts/ViewBarContext';
 import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
-import { ViewBar } from '@/ui/view-bar/components/ViewBar';
-import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext';
 
 import { TableOptionsDropdownId } from '../../constants/TableOptionsDropdownId';
 import { TableOptionsDropdown } from '../../options/components/TableOptionsDropdown';

front/src/modules/ui/data/data-table/types/ColumnDefinition.ts

@@ -0,0 +1,8 @@
+import { FieldDefinition } from '@/ui/data/field/types/FieldDefinition';
+import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
+
+export type ColumnDefinition<T extends FieldMetadata> = FieldDefinition<T> & {
+  size: number;
+  index: number;
+  isVisible?: boolean;
+};

front/src/modules/ui/data/field/meta-types/__stories__/FieldContextProvider.tsx

@@ -1,7 +1,7 @@
 import {
   FieldContext,
   GenericFieldContextType,
-} from '@/ui/field/contexts/FieldContext';
+} from '@/ui/data/field/contexts/FieldContext';
 
 type FieldContextProviderProps = {
   children: React.ReactNode;