removed unused files, unnecessary exports and renamed ownProps (#1225)

* remove unused files and rename ownProps

* restore unused icons

front/src/modules/pipeline/editable-field/components/ProbabilityFieldEditMode.tsx

@@ -1,116 +0,0 @@
-import { useState } from 'react';
-import styled from '@emotion/styled';
-
-import { useEditableField } from '@/ui/editable-field/hooks/useEditableField';
-import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
-
-const StyledContainer = styled.div`
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  width: 100%;
-`;
-
-const StyledProgressBarItemContainer = styled.div`
-  align-items: center;
-  display: flex;
-  height: ${({ theme }) => theme.spacing(4)};
-  padding-right: ${({ theme }) => theme.spacing(1)};
-`;
-
-const StyledProgressBarItem = styled.div<{
-  isFirst: boolean;
-  isLast: boolean;
-  isActive: boolean;
-}>`
-  background-color: ${({ theme, isActive }) =>
-    isActive
-      ? theme.font.color.secondary
-      : theme.background.transparent.medium};
-  border-bottom-left-radius: ${({ theme, isFirst }) =>
-    isFirst ? theme.border.radius.sm : theme.border.radius.xs};
-  border-bottom-right-radius: ${({ theme, isLast }) =>
-    isLast ? theme.border.radius.sm : theme.border.radius.xs};
-  border-top-left-radius: ${({ theme, isFirst }) =>
-    isFirst ? theme.border.radius.sm : theme.border.radius.xs};
-  border-top-right-radius: ${({ theme, isLast }) =>
-    isLast ? theme.border.radius.sm : theme.border.radius.xs};
-  height: ${({ theme }) => theme.spacing(2)};
-  width: ${({ theme }) => theme.spacing(3)};
-`;
-
-const StyledProgressBarContainer = styled.div`
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  width: 100%;
-`;
-
-const StyledLabel = styled.div`
-  width: ${({ theme }) => theme.spacing(12)};
-`;
-
-type OwnProps = {
-  value: number;
-  onChange?: (newValue: number) => void;
-  parentHotkeyScope?: HotkeyScope;
-};
-
-const PROBABILITY_VALUES = [
-  { label: '0%', value: 0 },
-  { label: '25%', value: 25 },
-  { label: '50%', value: 50 },
-  { label: '75%', value: 75 },
-  { label: '100%', value: 100 },
-];
-
-export function ProbabilityFieldEditMode({ value, onChange }: OwnProps) {
-  const [nextProbabilityIndex, setNextProbabilityIndex] = useState<
-    number | null
-  >(null);
-
-  const probabilityIndex = Math.ceil(value / 25);
-  const { closeEditableField } = useEditableField();
-
-  function handleChange(newValue: number) {
-    onChange?.(newValue);
-    closeEditableField();
-  }
-
-  return (
-    <StyledContainer>
-      <StyledLabel>
-        {
-          PROBABILITY_VALUES[
-            nextProbabilityIndex || nextProbabilityIndex === 0
-              ? nextProbabilityIndex
-              : probabilityIndex
-          ].label
-        }
-      </StyledLabel>
-      <StyledProgressBarContainer>
-        {PROBABILITY_VALUES.map((probability, i) => (
-          <StyledProgressBarItemContainer
-            key={i}
-            onClick={() => handleChange(probability.value)}
-            onMouseEnter={() => setNextProbabilityIndex(i)}
-            onMouseLeave={() => setNextProbabilityIndex(null)}
-          >
-            <StyledProgressBarItem
-              isActive={
-                nextProbabilityIndex || nextProbabilityIndex === 0
-                  ? i <= nextProbabilityIndex
-                  : i <= probabilityIndex
-              }
-              key={probability.label}
-              isFirst={i === 0}
-              isLast={i === PROBABILITY_VALUES.length - 1}
-            />
-          </StyledProgressBarItemContainer>
-        ))}
-      </StyledProgressBarContainer>
-    </StyledContainer>
-  );
-}

front/src/modules/search/hooks/useFilteredSearchEntityQuery.ts

@@ -10,7 +10,7 @@ import {
   SortOrder,
 } from '~/generated/graphql';
 
-export type SelectStringKeys<T> = NonNullable<
+type SelectStringKeys<T> = NonNullable<
   {
     [K in keyof T]: K extends '__typename'
       ? never
@@ -20,7 +20,7 @@ export type SelectStringKeys<T> = NonNullable<
   }[keyof T]
 >;
 
-export type ExtractEntityTypeFromQueryResponse<T> = T extends {
+type ExtractEntityTypeFromQueryResponse<T> = T extends {
   searchResults: Array<infer U>;
 }
   ? U

front/src/modules/ui/board/components/BoardColumn.tsx

@@ -8,7 +8,7 @@ import { BoardColumnHotkeyScope } from '../types/BoardColumnHotkeyScope';
 
 import { BoardColumnMenu } from './BoardColumnMenu';
 
-export const StyledColumn = styled.div<{ isFirstColumn: boolean }>`
+const StyledColumn = styled.div<{ isFirstColumn: boolean }>`
   background-color: ${({ theme }) => theme.background.primary};
   border-left: 1px solid
     ${({ theme, isFirstColumn }) =>
@@ -33,27 +33,6 @@ const StyledHeader = styled.div`
   width: 100%;
 `;
 
-export const StyledColumnTitle = styled.h3<{
-  colorHexCode?: string;
-  colorName?: string;
-}>`
-  align-items: center;
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${({ colorHexCode, colorName, theme }) =>
-    colorName ? theme.tag.text[colorName] : colorHexCode};
-  display: flex;
-  flex-direction: row;
-  font-size: ${({ theme }) => theme.font.size.md};
-  font-style: normal;
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  gap: ${({ theme }) => theme.spacing(2)};
-  margin: 0;
-  padding-bottom: ${({ theme }) => theme.spacing(1)};
-  padding-left: ${({ theme }) => theme.spacing(2)};
-  padding-right: ${({ theme }) => theme.spacing(2)};
-  padding-top: ${({ theme }) => theme.spacing(1)};
-`;
-
 const StyledAmount = styled.div`
   color: ${({ theme }) => theme.font.color.tertiary};
   margin-left: ${({ theme }) => theme.spacing(2)};
@@ -72,7 +51,7 @@ const StyledNumChildren = styled.div`
   width: 16px;
 `;
 
-type OwnProps = {
+export type BoardColumnProps = {
   color: string;
   title: string;
   onTitleEdit: (title: string, color: string) => void;
@@ -90,7 +69,7 @@ export function BoardColumn({
   children,
   isFirstColumn,
   numChildren,
-}: OwnProps) {
+}: BoardColumnProps) {
   const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] =
     React.useState(false);
 

front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx

@@ -7,7 +7,7 @@ import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSepa
 import { textInputStyle } from '@/ui/theme/constants/effects';
 import { debounce } from '~/utils/debounce';
 
-export const StyledEditTitleContainer = styled.div`
+const StyledEditTitleContainer = styled.div`
   --vertical-padding: ${({ theme }) => theme.spacing(1)};
 
   align-items: center;
@@ -28,7 +28,7 @@ const StyledEditModeInput = styled.input`
   width: 100%;
 `;
 
-type OwnProps = {
+export type BoardColumnEditTitleMenuProps = {
   onClose: () => void;
   title: string;
   onTitleEdit: (title: string, color: string) => void;
@@ -64,7 +64,7 @@ export function BoardColumnEditTitleMenu({
   onTitleEdit,
   title,
   color,
-}: OwnProps) {
+}: BoardColumnEditTitleMenuProps) {
   const [internalValue, setInternalValue] = useState(title);
   const debouncedOnUpdateTitle = debounce(
     (newTitle) => onTitleEdit(newTitle, color),

front/src/modules/ui/board/contexts/FieldDefinitionContext.ts

@@ -1,17 +0,0 @@
-import { createContext } from 'react';
-
-import { FieldDefinition } from '@/ui/editable-field/types/FieldDefinition';
-import {
-  FieldMetadata,
-  FieldType,
-} from '@/ui/editable-field/types/FieldMetadata';
-
-export const FieldDefinitionContext = createContext<
-  FieldDefinition<FieldMetadata>
->({
-  id: '',
-  label: '',
-  icon: undefined,
-  type: 'unknown' satisfies FieldType,
-  metadata: {} as FieldMetadata,
-});

front/src/modules/ui/board/hooks/useResetCardSelection.ts

@@ -1,27 +0,0 @@
-import { useRecoilCallback } from 'recoil';
-
-import { boardCardIdsByColumnIdFamilyState } from '../states/boardCardIdsByColumnIdFamilyState';
-import { boardColumnsState } from '../states/boardColumnsState';
-import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState';
-
-export function useResetCardSelection() {
-  return useRecoilCallback(
-    ({ snapshot, set }) =>
-      () => {
-        const boardColumns = snapshot
-          .getLoadable(boardColumnsState)
-          .valueOrThrow();
-
-        const cardIds = boardColumns.flatMap((boardColumn) =>
-          snapshot
-            .getLoadable(boardCardIdsByColumnIdFamilyState(boardColumn.id))
-            .valueOrThrow(),
-        );
-
-        for (const cardId of cardIds) {
-          set(isCardSelectedFamilyState(cardId), false);
-        }
-      },
-    [],
-  );
-}

front/src/modules/ui/filter-n-sort/components/DropdownMenuContainer.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
-export const StyledDropdownMenuContainer = styled.ul<{
+const StyledDropdownMenuContainer = styled.ul<{
   anchor: 'left' | 'right';
 }>`
   padding: 0;
@@ -15,7 +15,7 @@ export const StyledDropdownMenuContainer = styled.ul<{
   top: 14px;
 `;
 
-type DropdownMenuContainerProps = {
+export type DropdownMenuContainerProps = {
   anchor?: 'left' | 'right';
   children: React.ReactNode;
   onClose?: () => void;

front/src/modules/ui/filter-n-sort/types/FilterSearchResult.ts

@@ -1,4 +0,0 @@
-export type FilterSearchResult = {
-  id: string;
-  label: string;
-};

front/src/modules/ui/input/date/components/DateInputEdit.tsx

@@ -5,7 +5,7 @@ import { formatToHumanReadableDate } from '~/utils';
 
 import DatePicker from './DatePicker';
 
-export type StyledCalendarContainerProps = {
+type StyledCalendarContainerProps = {
   editModeHorizontalAlign?: 'left' | 'right';
 };
 
@@ -31,7 +31,7 @@ const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>`
 
 type DivProps = React.HTMLProps<HTMLDivElement>;
 
-export const DateDisplay = forwardRef<HTMLDivElement, DivProps>(
+const DateDisplay = forwardRef<HTMLDivElement, DivProps>(
   ({ value, onClick }, ref) => (
     <StyledInputContainer onClick={onClick} ref={ref}>
       {value && formatToHumanReadableDate(new Date(value as string))}
@@ -43,16 +43,16 @@ type DatePickerContainerProps = {
   children: React.ReactNode;
 };
 
-export const DatePickerContainer = ({ children }: DatePickerContainerProps) => {
+const DatePickerContainer = ({ children }: DatePickerContainerProps) => {
   return <StyledCalendarContainer>{children}</StyledCalendarContainer>;
 };
 
-type OwnProps = {
+export type DateInputEditProps = {
   value: Date | null | undefined;
   onChange: (newDate: Date) => void;
 };
 
-export function DateInputEdit({ onChange, value }: OwnProps) {
+export function DateInputEdit({ onChange, value }: DateInputEditProps) {
   return (
     <DatePicker
       date={value ?? new Date()}

front/src/modules/ui/input/double-text/components/DoubleTextInputEdit.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import { StyledInput } from '@/ui/table/editable-cell/type/components/TextCellEdit';
 
-type OwnProps = {
+export type DoubleTextInputEditProps = {
   firstValue: string;
   secondValue: string;
   firstValuePlaceholder: string;
@@ -11,7 +11,7 @@ type OwnProps = {
   onChange: (firstValue: string, secondValue: string) => void;
 };
 
-export const StyledDoubleTextContainer = styled.div`
+const StyledDoubleTextContainer = styled.div`
   align-items: center;
   display: flex;
   justify-content: center;
@@ -30,7 +30,7 @@ export function DoubleTextInputEdit({
   firstValuePlaceholder,
   secondValuePlaceholder,
   onChange,
-}: OwnProps) {
+}: DoubleTextInputEditProps) {
   return (
     <StyledDoubleTextContainer>
       <StyledNameInput

front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx

@@ -13,15 +13,10 @@ import { isDefined } from '~/utils/isDefined';
 import { useEntitySelectSearch } from '../hooks/useEntitySelectSearch';
 import { EntityForSelect } from '../types/EntityForSelect';
 
-import { SingleEntitySelectBase } from './SingleEntitySelectBase';
+import {
-
+  EntitiesForSingleEntitySelect,
-export type EntitiesForSingleEntitySelect<
+  SingleEntitySelectBase,
-  CustomEntityForSelect extends EntityForSelect,
+} from './SingleEntitySelectBase';
-> = {
-  loading: boolean;
-  selectedEntity: CustomEntityForSelect;
-  entitiesToSelect: CustomEntityForSelect[];
-};
 
 export function SingleEntitySelect<
   CustomEntityForSelect extends EntityForSelect,

front/src/modules/ui/input/text/components/TextInputEdit.tsx

@@ -4,13 +4,13 @@ import { textInputStyle } from '@/ui/theme/constants/effects';
 
 import { TextInputContainer } from './TextInputContainer';
 
-export const InplaceInputTextInput = styled.input`
+const InplaceInputTextInput = styled.input`
   margin: 0;
   width: 100%;
   ${textInputStyle}
 `;
 
-type OwnProps = {
+export type TextInputEditProps = {
   placeholder?: string;
   value?: string;
   onChange?: (newValue: string) => void;
@@ -22,7 +22,7 @@ export function TextInputEdit({
   value,
   onChange,
   autoFocus,
-}: OwnProps) {
+}: TextInputEditProps) {
   return (
     <TextInputContainer>
       <InplaceInputTextInput

front/src/modules/ui/layout/page-bar/components/PageTitle.tsx

@@ -1,26 +0,0 @@
-import styled from '@emotion/styled';
-
-const TitleAndCollapseContainer = styled.div`
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-`;
-
-const TitleContainer = styled.div`
-  display: flex;
-  font-size: ${({ theme }) => theme.font.size.lg};
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  width: 100%;
-`;
-
-type OwnProps = {
-  title: string;
-};
-
-export function PageTitle({ title }: OwnProps) {
-  return (
-    <TitleAndCollapseContainer>
-      <TitleContainer data-testid="top-bar-title">{title}</TitleContainer>
-    </TitleAndCollapseContainer>
-  );
-}

front/src/modules/ui/modal/components/ConfirmationModal.tsx

@@ -13,7 +13,7 @@ import {
 } from '@/ui/section/components/Section';
 import { H1Title, H1TitleFontColor } from '@/ui/typography/components/H1Title';
 
-interface ConfirmationModalProps {
+export type ConfirmationModalProps = {
   isOpen: boolean;
   title: string;
   subtitle: ReactNode;
@@ -22,9 +22,9 @@ interface ConfirmationModalProps {
   deleteButtonText?: string;
   confirmationPlaceholder?: string;
   confirmationValue?: string;
-}
+};
 
-export const StyledCenteredButton = styled(Button)`
+const StyledCenteredButton = styled(Button)`
   justify-content: center;
 `;
 

front/src/modules/ui/progress-bar/components/ProgressBar.tsx

@@ -9,17 +9,6 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { AnimationControls, motion, useAnimation } from 'framer-motion';
 
-const Bar = styled.div<Pick<ProgressBarProps, 'barHeight'>>`
-  height: ${({ barHeight }) => barHeight}px;
-  overflow: hidden;
-  width: 100%;
-`;
-
-const BarFilling = styled(motion.div)`
-  height: 100%;
-  width: 100%;
-`;
-
 export type ProgressBarProps = {
   duration?: number;
   delay?: number;
@@ -34,6 +23,17 @@ export type ProgressBarControls = AnimationControls & {
   pause: () => Promise<any>;
 };
 
+const StyledBar = styled.div<Pick<ProgressBarProps, 'barHeight'>>`
+  height: ${({ barHeight }) => barHeight}px;
+  overflow: hidden;
+  width: 100%;
+`;
+
+const StyledBarFilling = styled(motion.div)`
+  height: 100%;
+  width: 100%;
+`;
+
 export const ProgressBar = forwardRef<ProgressBarControls, ProgressBarProps>(
   (
     {
@@ -84,8 +84,8 @@ export const ProgressBar = forwardRef<ProgressBarControls, ProgressBarProps>(
     }, [controls, delay, duration, easing, autoStart, start]);
 
     return (
-      <Bar barHeight={barHeight}>
+      <StyledBar barHeight={barHeight}>
-        <BarFilling
+        <StyledBarFilling
           style={{
             originX: 0,
             // Seems like custom props are not well handled by react when used with framer-motion and emotion styled
@@ -95,7 +95,7 @@ export const ProgressBar = forwardRef<ProgressBarControls, ProgressBarProps>(
           animate={controls}
           exit={{ scaleX: 0 }}
         />
-      </Bar>
+      </StyledBar>
     );
   },
 );

front/src/modules/ui/snack-bar/states/snackBarState.ts

@@ -6,7 +6,7 @@ export type SnackBarOptions = SnackbarProps & {
   id: string;
 };
 
-export type SnackBarState = {
+type SnackBarState = {
   maxQueue: number;
   queue: SnackBarOptions[];
 };

front/src/modules/ui/table/editable-cell/components/CellSkeleton.tsx

@@ -1,9 +0,0 @@
-import Skeleton from 'react-loading-skeleton';
-
-export function CellSkeleton() {
-  return (
-    <div style={{ width: '100%', alignItems: 'center' }}>
-      <Skeleton />
-    </div>
-  );
-}

front/src/modules/ui/table/editable-cell/components/EditableCell.tsx

@@ -22,7 +22,7 @@ const StyledEditButtonContainer = styled(motion.div)`
   right: 5px;
 `;
 
-export const CellBaseContainer = styled.div`
+const StyledCellBaseContainer = styled.div`
   align-items: center;
   box-sizing: border-box;
   cursor: pointer;
@@ -33,7 +33,7 @@ export const CellBaseContainer = styled.div`
   width: 100%;
 `;
 
-type OwnProps = {
+export type EditableCellProps = {
   editModeContent: ReactElement;
   nonEditModeContent: ReactElement;
   editModeHorizontalAlign?: 'left' | 'right';
@@ -59,7 +59,7 @@ export function EditableCell({
   transparent = false,
   maxContentWidth,
   useEditButton,
-}: OwnProps) {
+}: EditableCellProps) {
   const { isCurrentCellInEditMode } = useCurrentCellEditMode();
   const [isHovered, setIsHovered] = useState(false);
 
@@ -88,7 +88,7 @@ export function EditableCell({
     <CellHotkeyScopeContext.Provider
       value={editHotkeyScope ?? DEFAULT_CELL_SCOPE}
     >
-      <CellBaseContainer
+      <StyledCellBaseContainer
         onMouseEnter={handleContainerMouseEnter}
         onMouseLeave={handleContainerMouseLeave}
       >
@@ -128,7 +128,7 @@ export function EditableCell({
             </EditableCellDisplayMode>
           </>
         )}
-      </CellBaseContainer>
+      </StyledCellBaseContainer>
     </CellHotkeyScopeContext.Provider>
   );
 }

front/src/modules/ui/table/editable-cell/components/EditableCellContainer.tsx

@@ -1,14 +1,14 @@
 import { Ref } from 'react';
 import styled from '@emotion/styled';
 
-type Props = {
+export type EditableCellDisplayContainerProps = {
   softFocus?: boolean;
   onClick?: () => void;
   scrollRef?: Ref<HTMLDivElement>;
 };
 
-export const EditableCellDisplayModeOuterContainer = styled.div<
+const StyledEditableCellDisplayModeOuterContainer = styled.div<
-  Pick<Props, 'softFocus'>
+  Pick<EditableCellDisplayContainerProps, 'softFocus'>
 >`
   align-items: center;
   display: flex;
@@ -22,12 +22,12 @@ export const EditableCellDisplayModeOuterContainer = styled.div<
   ${(props) =>
     props.softFocus
       ? `background: ${props.theme.background.transparent.secondary};
-         border-radius: ${props.theme.border.radius.sm};
+        border-radius: ${props.theme.border.radius.sm};
-         box-shadow: inset 0 0 0 1px ${props.theme.font.color.extraLight};`
+        box-shadow: inset 0 0 0 1px ${props.theme.font.color.extraLight};`
       : ''}
 `;
 
-export const EditableCellDisplayModeInnerContainer = styled.div`
+const EditableCellDisplayModeInnerContainer = styled.div`
   align-items: center;
   display: flex;
   height: 100%;
@@ -40,9 +40,9 @@ export function EditableCellDisplayContainer({
   softFocus,
   onClick,
   scrollRef,
-}: React.PropsWithChildren<Props>) {
+}: React.PropsWithChildren<EditableCellDisplayContainerProps>) {
   return (
-    <EditableCellDisplayModeOuterContainer
+    <StyledEditableCellDisplayModeOuterContainer
       data-testid={
         softFocus
           ? 'editable-cell-soft-focus-mode'
@@ -55,6 +55,6 @@ export function EditableCellDisplayContainer({
       <EditableCellDisplayModeInnerContainer>
         {children}
       </EditableCellDisplayModeInnerContainer>
-    </EditableCellDisplayModeOuterContainer>
+    </StyledEditableCellDisplayModeOuterContainer>
   );
 }

front/src/modules/ui/table/editable-cell/components/EditableCellEditMode.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import { overlayBackground } from '@/ui/theme/constants/effects';
 
-export const EditableCellEditModeContainer = styled.div<OwnProps>`
+const StyledEditableCellEditModeContainer = styled.div<EditableCellEditModeProps>`
   align-items: center;
   border: ${({ transparent, theme }) =>
     transparent ? 'none' : `1px solid ${theme.border.color.light}`};
@@ -28,7 +28,7 @@ export const EditableCellEditModeContainer = styled.div<OwnProps>`
   z-index: 1;
 `;
 
-type OwnProps = {
+export type EditableCellEditModeProps = {
   children: ReactElement;
   transparent?: boolean;
   maxContentWidth?: number;
@@ -43,9 +43,9 @@ export function EditableCellEditMode({
   children,
   transparent = false,
   maxContentWidth,
-}: OwnProps) {
+}: EditableCellEditModeProps) {
   return (
-    <EditableCellEditModeContainer
+    <StyledEditableCellEditModeContainer
       maxContentWidth={maxContentWidth}
       transparent={transparent}
       data-testid="editable-cell-edit-mode-container"
@@ -53,6 +53,6 @@ export function EditableCellEditMode({
       editModeVerticalPosition={editModeVerticalPosition}
     >
       {children}
-    </EditableCellEditModeContainer>
+    </StyledEditableCellEditModeContainer>
   );
 }

front/src/modules/ui/table/editable-cell/type/components/DateCellEdit.tsx

@@ -9,17 +9,17 @@ import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useLis
 
 import { useEditableCell } from '../../hooks/useEditableCell';
 
-const EditableCellDateEditModeContainer = styled.div`
+const StyledEditableCellDateEditModeContainer = styled.div`
   margin-top: -1px;
   width: 100%;
 `;
 
-export type EditableDateProps = {
+export type DateCellEditProps = {
   value: Date;
   onSubmit: (date: Date) => void;
 };
 
-export function DateCellEdit({ value, onSubmit }: EditableDateProps) {
+export function DateCellEdit({ value, onSubmit }: DateCellEditProps) {
   const { closeEditableCell } = useEditableCell();
 
   function handleDateChange(newDate: Date) {
@@ -51,8 +51,8 @@ export function DateCellEdit({ value, onSubmit }: EditableDateProps) {
   });
 
   return (
-    <EditableCellDateEditModeContainer ref={containerRef}>
+    <StyledEditableCellDateEditModeContainer ref={containerRef}>
       <DateInputEdit onChange={handleDateChange} value={value} />
-    </EditableCellDateEditModeContainer>
+    </StyledEditableCellDateEditModeContainer>
   );
 }

front/src/modules/ui/table/hooks/useSetTableRowIds.ts

@@ -1,19 +0,0 @@
-import { useRecoilCallback } from 'recoil';
-
-import { tableRowIdsState } from '../states/tableRowIdsState';
-
-export function useSetTableRowIds() {
-  return useRecoilCallback(
-    ({ set, snapshot }) =>
-      (rowIds: string[]) => {
-        const currentRowIds = snapshot
-          .getLoadable(tableRowIdsState)
-          .valueOrThrow();
-
-        if (JSON.stringify(rowIds) !== JSON.stringify(currentRowIds)) {
-          set(tableRowIdsState, rowIds);
-        }
-      },
-    [],
-  );
-}

front/src/modules/ui/table/states/currentColumnNumberScopedState.ts

@@ -1,6 +0,0 @@
-import { atomFamily } from 'recoil';
-
-export const currentColumnNumberScopedState = atomFamily<number, string>({
-  key: 'currentColumnNumberScopedState',
-  default: 0,
-});

front/src/modules/ui/table/states/currentRowEntityIdScopedState.ts

@@ -1,6 +0,0 @@
-import { atomFamily } from 'recoil';
-
-export const currentRowEntityIdScopedState = atomFamily<string | null, string>({
-  key: 'currentRowEntityIdScopedState',
-  default: null,
-});

front/src/modules/ui/table/states/currentRowNumberScopedState.ts

@@ -1,6 +0,0 @@
-import { atomFamily } from 'recoil';
-
-export const currentRowNumberScopedState = atomFamily<number, string>({
-  key: 'currentRowNumberScopedState',
-  default: 0,
-});

front/src/modules/ui/table/types/CellUpdateFieldHook.ts

@@ -1,5 +0,0 @@
-export type EntityUpdateFieldHook = () => <T>(
-  entityId: string,
-  fieldName: string,
-  value: T,
-) => void | Promise<void>;

front/src/modules/ui/table/types/guards/isTablePosition.ts

@@ -1,7 +0,0 @@
-import { CellPosition } from '../CellPosition';
-
-export function isTablePosition(value: any): value is CellPosition {
-  return (
-    value && typeof value.row === 'number' && typeof value.column === 'number'
-  );
-}

front/src/modules/ui/tag/components/Tag.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-export const StyledTag = styled.h3<{
+const StyledTag = styled.h3<{
   colorHexCode?: string;
   colorId?: string;
 }>`
@@ -23,13 +23,13 @@ export const StyledTag = styled.h3<{
   padding-top: ${({ theme }) => theme.spacing(1)};
 `;
 
-type OwnProps = {
+export type TagProps = {
   color?: string;
   text: string;
   onClick?: () => void;
 };
 
-export function Tag({ color, text, onClick }: OwnProps) {
+export function Tag({ color, text, onClick }: TagProps) {
   const colorHexCode = color?.charAt(0) === '#' ? color : undefined;
   const colorId = color?.charAt(0) === '#' ? undefined : color;
 

front/src/modules/ui/theme/hooks/useSystemColorScheme.ts

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 
 import { ColorScheme } from '~/generated/graphql';
 
-export type SystemColorScheme = ColorScheme.Light | ColorScheme.Dark;
+type SystemColorScheme = ColorScheme.Light | ColorScheme.Dark;
 
 export function useSystemColorScheme(): SystemColorScheme {
   const mediaQuery = useMemo(

front/src/modules/ui/utilities/hotkey/constants/index.ts

@@ -2,13 +2,6 @@ import { AppHotkeyScope } from '../types/AppHotkeyScope';
 import { CustomHotkeyScopes } from '../types/CustomHotkeyScope';
 import { HotkeyScope } from '../types/HotkeyScope';
 
-export const INITIAL_HOTKEYS_SCOPES: string[] = [AppHotkeyScope.App];
-
-export const ALWAYS_ON_HOTKEYS_SCOPES: string[] = [
-  AppHotkeyScope.CommandMenu,
-  AppHotkeyScope.App,
-];
-
 export const DEFAULT_HOTKEYS_SCOPE_CUSTOM_SCOPES: CustomHotkeyScopes = {
   commandMenu: true,
   goto: false,

front/src/modules/ui/utilities/hotkey/hooks/internal/useHotkeyScopes.ts

@@ -1,103 +0,0 @@
-import { useHotkeysContext } from 'react-hotkeys-hook';
-import { useRecoilCallback } from 'recoil';
-
-import { internalHotkeysEnabledScopesState } from '../../states/internal/internalHotkeysEnabledScopesState';
-
-export function useHotkeyScopes() {
-  const { disableScope, enableScope } = useHotkeysContext();
-
-  const disableAllHotkeyScopes = useRecoilCallback(
-    ({ set, snapshot }) => {
-      return async () => {
-        const enabledScopes = await snapshot.getPromise(
-          internalHotkeysEnabledScopesState,
-        );
-
-        for (const enabledScope of enabledScopes) {
-          disableScope(enabledScope);
-        }
-
-        set(internalHotkeysEnabledScopesState, []);
-      };
-    },
-    [disableScope],
-  );
-
-  const enableHotkeyScope = useRecoilCallback(
-    ({ set, snapshot }) => {
-      return async (scopeToEnable: string) => {
-        const enabledScopes = await snapshot.getPromise(
-          internalHotkeysEnabledScopesState,
-        );
-
-        if (!enabledScopes.includes(scopeToEnable)) {
-          enableScope(scopeToEnable);
-          set(internalHotkeysEnabledScopesState, [
-            ...enabledScopes,
-            scopeToEnable,
-          ]);
-        }
-      };
-    },
-    [enableScope],
-  );
-
-  const disableHotkeyScope = useRecoilCallback(
-    ({ set, snapshot }) => {
-      return async (scopeToDisable: string) => {
-        const enabledScopes = await snapshot.getPromise(
-          internalHotkeysEnabledScopesState,
-        );
-
-        const scopeToRemoveIndex = enabledScopes.findIndex(
-          (scope) => scope === scopeToDisable,
-        );
-
-        if (scopeToRemoveIndex > -1) {
-          disableScope(scopeToDisable);
-
-          enabledScopes.splice(scopeToRemoveIndex);
-
-          set(internalHotkeysEnabledScopesState, enabledScopes);
-        }
-      };
-    },
-    [disableScope],
-  );
-
-  const setHotkeyScopes = useRecoilCallback(
-    ({ set, snapshot }) => {
-      return async (scopesToSet: string[]) => {
-        const enabledScopes = await snapshot.getPromise(
-          internalHotkeysEnabledScopesState,
-        );
-
-        const scopesToDisable = enabledScopes.filter(
-          (enabledScope) => !scopesToSet.includes(enabledScope),
-        );
-
-        const scopesToEnable = scopesToSet.filter(
-          (scopeToSet) => !enabledScopes.includes(scopeToSet),
-        );
-
-        for (const scopeToDisable of scopesToDisable) {
-          disableScope(scopeToDisable);
-        }
-
-        for (const scopeToEnable of scopesToEnable) {
-          enableScope(scopeToEnable);
-        }
-
-        set(internalHotkeysEnabledScopesState, scopesToSet);
-      };
-    },
-    [disableScope, enableScope],
-  );
-
-  return {
-    disableAllHotkeyScopes,
-    enableHotkeyScope,
-    disableHotkeyScope,
-    setHotkeyScopes,
-  };
-}

front/src/modules/ui/utilities/hotkey/utils/isSameHotkeyScope.ts

@@ -1,8 +0,0 @@
-import { HotkeyScope } from '../types/HotkeyScope';
-
-export function isSameHotkeyScope(
-  hotkeyScope1: HotkeyScope | undefined | null,
-  hotkeyScope2: HotkeyScope | undefined | null,
-): boolean {
-  return JSON.stringify(hotkeyScope1) === JSON.stringify(hotkeyScope2);
-}

front/src/modules/ui/utilities/loading-state/hooks/useIsPageLoading.ts

@@ -1,12 +0,0 @@
-import { useLocation } from 'react-router-dom';
-import { useRecoilValue } from 'recoil';
-
-import { currentPageLocationState } from '../states/currentPageLocationState';
-
-export function useIsPageLoading() {
-  const currentLocation = useLocation().pathname;
-
-  const currentPageLocation = useRecoilValue(currentPageLocationState);
-
-  return currentLocation !== currentPageLocation;
-}

front/src/modules/ui/utilities/recoil-scope/utils/getSnapshotScopedState.ts

@@ -1,13 +0,0 @@
-import { RecoilState, Snapshot } from 'recoil';
-
-export function getSnapshotScopedState<T>({
-  snapshot,
-  state,
-  contextScopeId,
-}: {
-  snapshot: Snapshot;
-  state: (scopeId: string) => RecoilState<T>;
-  contextScopeId: string;
-}) {
-  return snapshot.getLoadable(state(contextScopeId)).valueOrThrow();
-}

front/src/modules/ui/utilities/recoil-scope/utils/getSnapshotState.ts

@@ -1,11 +0,0 @@
-import { RecoilState, Snapshot } from 'recoil';
-
-export function getSnapshotState<T>({
-  snapshot,
-  state,
-}: {
-  snapshot: Snapshot;
-  state: RecoilState<T>;
-}) {
-  return snapshot.getLoadable(state).valueOrThrow();
-}

front/src/modules/users/components/Avatar.tsx

@@ -7,9 +7,10 @@ import { stringToHslColor } from '~/utils/string-to-hsl';
 import { getImageAbsoluteURIOrBase64 } from '../utils/getProfilePictureAbsoluteURI';
 
 export type AvatarType = 'squared' | 'rounded';
+
 export type AvatarSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 
-type OwnProps = {
+export type AvatarProps = {
   avatarUrl: string | null | undefined;
   size: AvatarSize;
   placeholder: string;
@@ -17,7 +18,7 @@ type OwnProps = {
   type?: AvatarType;
 };
 
-export const StyledAvatar = styled.div<OwnProps & { colorId: string }>`
+const StyledAvatar = styled.div<AvatarProps & { colorId: string }>`
   align-items: center;
   background-color: ${({ avatarUrl, colorId }) =>
     !isNonEmptyString(avatarUrl) ? stringToHslColor(colorId, 75, 85) : 'none'};
@@ -86,7 +87,7 @@ export function Avatar({
   placeholder,
   colorId = placeholder,
   type = 'squared',
-}: OwnProps) {
+}: AvatarProps) {
   const noAvatarUrl = !isNonEmptyString(avatarUrl);
   const [isInvalidAvatarUrl, setIsInvalidAvatarUrl] = useState(false);
 

front/src/modules/users/components/UserChip.tsx

@@ -1,12 +1,12 @@
 import { EntityChip } from '@/ui/chip/components/EntityChip';
 
-export type UserChipPropsType = {
+export type UserChipProps = {
   id: string;
   name: string;
   pictureUrl?: string;
 };
 
-export function UserChip({ id, name, pictureUrl }: UserChipPropsType) {
+export function UserChip({ id, name, pictureUrl }: UserChipProps) {
   return (
     <EntityChip
       entityId={id}

front/src/modules/users/components/UserPicker.tsx

@@ -6,7 +6,7 @@ import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useSearchUserQuery } from '~/generated/graphql';
 
-export type OwnProps = {
+export type UserPickerProps = {
   userId: string;
   onSubmit: (newUser: EntityForSelect | null) => void;
   onCancel?: () => void;
@@ -17,7 +17,12 @@ type UserForSelect = EntityForSelect & {
   entityType: Entity.User;
 };
 
-export function UserPicker({ userId, onSubmit, onCancel, width }: OwnProps) {
+export function UserPicker({
+  userId,
+  onSubmit,
+  onCancel,
+  width,
+}: UserPickerProps) {
   const [searchFilter] = useRecoilScopedState(
     relationPickerSearchFilterScopedState,
   );

front/src/modules/views/hooks/useTableViewFields.ts

@@ -29,7 +29,7 @@ const DEFAULT_VIEW_FIELD_METADATA: ViewFieldTextMetadata = {
   fieldName: '',
 };
 
-export const toViewFieldInput = (
+const toViewFieldInput = (
   objectName: 'company' | 'person',
   viewFieldDefinition: ViewFieldDefinition<ViewFieldMetadata>,
 ) => ({

front/src/testing/decorators/CatalogDecorator.tsx

@@ -1,13 +1,13 @@
 import styled from '@emotion/styled';
 import { Decorator } from '@storybook/react';
 
-const ColumnTitle = styled.h1`
+const StyledColumnTitle = styled.h1`
   font-size: ${({ theme }) => theme.font.size.lg};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
   margin: ${({ theme }) => theme.spacing(2)};
 `;
 
-const RowsTitle = styled.h2`
+const StyledRowsTitle = styled.h2`
   color: ${({ theme }) => theme.font.color.secondary};
   font-size: ${({ theme }) => theme.font.size.md};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
@@ -15,7 +15,7 @@ const RowsTitle = styled.h2`
   width: 100px;
 `;
 
-const RowTitle = styled.h3`
+const StyledRowTitle = styled.h3`
   color: ${({ theme }) => theme.font.color.tertiary};
   font-size: ${({ theme }) => theme.font.size.md};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
@@ -23,7 +23,7 @@ const RowTitle = styled.h3`
   width: 100px;
 `;
 
-export const ElementTitle = styled.span`
+const StyledElementTitle = styled.span`
   color: ${({ theme }) => theme.font.color.light};
   font-size: ${({ theme }) => theme.font.size.xs};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
@@ -37,30 +37,30 @@ const StyledContainer = styled.div`
   flex-direction: row;
 `;
 
-const ColumnContainer = styled.div`
+const StyledColumnContainer = styled.div`
   display: flex;
   flex-direction: column;
   padding: ${({ theme }) => theme.spacing(2)};
 `;
 
-const RowsContainer = styled.div`
+const StyledRowsContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(2)};
 `;
 
-const RowContainer = styled.div`
+const StyledRowContainer = styled.div`
   display: flex;
   flex: 1;
   flex-direction: row;
   gap: ${({ theme }) => theme.spacing(2)};
 `;
 
-export const ElementContainer = styled.div`
+const StyledElementContainer = styled.div`
   display: flex;
 `;
 
-export const CellContainer = styled.div`
+const StyledCellContainer = styled.div`
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -87,29 +87,37 @@ export const CatalogDecorator: Decorator = (Story, context) => {
   return (
     <StyledContainer>
       {variable4.values.map((value4: string) => (
-        <ColumnContainer key={value4}>
+        <StyledColumnContainer key={value4}>
           {(variable4.labels?.(value4) || value4) && (
-            <ColumnTitle>{variable4.labels?.(value4) || value4}</ColumnTitle>
+            <StyledColumnTitle>
+              {variable4.labels?.(value4) || value4}
+            </StyledColumnTitle>
           )}
           {variable3.values.map((value3: string) => (
-            <RowsContainer key={value3}>
+            <StyledRowsContainer key={value3}>
               {(variable3.labels?.(value3) || value3) && (
-                <RowsTitle>{variable3.labels?.(value3) || value3}</RowsTitle>
+                <StyledRowsTitle>
+                  {variable3.labels?.(value3) || value3}
+                </StyledRowsTitle>
               )}
               {variable2.values.map((value2: string) => (
-                <RowContainer key={value2}>
+                <StyledRowContainer key={value2}>
                   {(variable2.labels?.(value2) || value2) && (
-                    <RowTitle>{variable2.labels?.(value2) || value2}</RowTitle>
+                    <StyledRowTitle>
+                      {variable2.labels?.(value2) || value2}
+                    </StyledRowTitle>
                   )}
                   {variable1.values.map((value1: string) => (
-                    <CellContainer key={value1} id={value1}>
+                    <StyledCellContainer key={value1} id={value1}>
                       {(variable1.labels?.(value1) || value1) && (
-                        <ElementTitle>
+                        <StyledElementTitle>
                           {variable1.labels?.(value1) || value1}
-                        </ElementTitle>
+                        </StyledElementTitle>
                       )}
 
-                      <ElementContainer {...options?.elementContainer}>
+                      <StyledElementContainer
+                        {...options?.StyledelementContainer}
+                      >
                         <Story
                           args={{
                             ...context.args,
@@ -119,14 +127,14 @@ export const CatalogDecorator: Decorator = (Story, context) => {
                             ...variable4.props(value4),
                           }}
                         />
-                      </ElementContainer>
+                      </StyledElementContainer>
-                    </CellContainer>
+                    </StyledCellContainer>
                   ))}
-                </RowContainer>
+                </StyledRowContainer>
               ))}
-            </RowsContainer>
+            </StyledRowsContainer>
           ))}
-        </ColumnContainer>
+        </StyledColumnContainer>
       ))}
     </StyledContainer>
   );

front/src/testing/decorators/CellPositionDecorator.tsx

@@ -1,12 +0,0 @@
-import { Decorator } from '@storybook/react';
-
-import { ColumnIndexContext } from '../../modules/ui/table/contexts/ColumnIndexContext';
-import { RowIndexContext } from '../../modules/ui/table/contexts/RowIndexContext';
-
-export const CellPositionDecorator: Decorator = (Story) => (
-  <RowIndexContext.Provider value={1}>
-    <ColumnIndexContext.Provider value={1}>
-      <Story />
-    </ColumnIndexContext.Provider>
-  </RowIndexContext.Provider>
-);