diff --git a/front/src/modules/pipeline/editable-field/components/ProbabilityFieldEditMode.tsx b/front/src/modules/pipeline/editable-field/components/ProbabilityFieldEditMode.tsx deleted file mode 100644 index 93f5e2a8a..000000000 --- a/front/src/modules/pipeline/editable-field/components/ProbabilityFieldEditMode.tsx +++ /dev/null @@ -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 ( - - - { - PROBABILITY_VALUES[ - nextProbabilityIndex || nextProbabilityIndex === 0 - ? nextProbabilityIndex - : probabilityIndex - ].label - } - - - {PROBABILITY_VALUES.map((probability, i) => ( - handleChange(probability.value)} - onMouseEnter={() => setNextProbabilityIndex(i)} - onMouseLeave={() => setNextProbabilityIndex(null)} - > - - - ))} - - - ); -} diff --git a/front/src/modules/search/hooks/useFilteredSearchEntityQuery.ts b/front/src/modules/search/hooks/useFilteredSearchEntityQuery.ts index 6d8b1b41c..e10b335ca 100644 --- a/front/src/modules/search/hooks/useFilteredSearchEntityQuery.ts +++ b/front/src/modules/search/hooks/useFilteredSearchEntityQuery.ts @@ -10,7 +10,7 @@ import { SortOrder, } from '~/generated/graphql'; -export type SelectStringKeys = NonNullable< +type SelectStringKeys = NonNullable< { [K in keyof T]: K extends '__typename' ? never @@ -20,7 +20,7 @@ export type SelectStringKeys = NonNullable< }[keyof T] >; -export type ExtractEntityTypeFromQueryResponse = T extends { +type ExtractEntityTypeFromQueryResponse = T extends { searchResults: Array; } ? U diff --git a/front/src/modules/ui/board/components/BoardColumn.tsx b/front/src/modules/ui/board/components/BoardColumn.tsx index b07937f86..baaffe636 100644 --- a/front/src/modules/ui/board/components/BoardColumn.tsx +++ b/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); diff --git a/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx b/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx index 186653c3b..ed2514c35 100644 --- a/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx +++ b/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), diff --git a/front/src/modules/ui/board/contexts/FieldDefinitionContext.ts b/front/src/modules/ui/board/contexts/FieldDefinitionContext.ts deleted file mode 100644 index 1b165791d..000000000 --- a/front/src/modules/ui/board/contexts/FieldDefinitionContext.ts +++ /dev/null @@ -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 ->({ - id: '', - label: '', - icon: undefined, - type: 'unknown' satisfies FieldType, - metadata: {} as FieldMetadata, -}); diff --git a/front/src/modules/ui/board/hooks/useResetCardSelection.ts b/front/src/modules/ui/board/hooks/useResetCardSelection.ts deleted file mode 100644 index 7bb92cbd6..000000000 --- a/front/src/modules/ui/board/hooks/useResetCardSelection.ts +++ /dev/null @@ -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); - } - }, - [], - ); -} diff --git a/front/src/modules/ui/filter-n-sort/components/DropdownMenuContainer.tsx b/front/src/modules/ui/filter-n-sort/components/DropdownMenuContainer.tsx index 2f32006a0..336aca561 100644 --- a/front/src/modules/ui/filter-n-sort/components/DropdownMenuContainer.tsx +++ b/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; diff --git a/front/src/modules/ui/filter-n-sort/types/FilterSearchResult.ts b/front/src/modules/ui/filter-n-sort/types/FilterSearchResult.ts deleted file mode 100644 index cdfc9a6a9..000000000 --- a/front/src/modules/ui/filter-n-sort/types/FilterSearchResult.ts +++ /dev/null @@ -1,4 +0,0 @@ -export type FilterSearchResult = { - id: string; - label: string; -}; diff --git a/front/src/modules/ui/input/date/components/DateInputEdit.tsx b/front/src/modules/ui/input/date/components/DateInputEdit.tsx index a292e9b4a..dacf8eb3e 100644 --- a/front/src/modules/ui/input/date/components/DateInputEdit.tsx +++ b/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` type DivProps = React.HTMLProps; -export const DateDisplay = forwardRef( +const DateDisplay = forwardRef( ({ value, onClick }, 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 {children}; }; -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 ( 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 ( = { - loading: boolean; - selectedEntity: CustomEntityForSelect; - entitiesToSelect: CustomEntityForSelect[]; -}; +import { + EntitiesForSingleEntitySelect, + SingleEntitySelectBase, +} from './SingleEntitySelectBase'; export function SingleEntitySelect< CustomEntityForSelect extends EntityForSelect, diff --git a/front/src/modules/ui/input/text/components/TextInputEdit.tsx b/front/src/modules/ui/input/text/components/TextInputEdit.tsx index 957f5dfd6..6bd9a583e 100644 --- a/front/src/modules/ui/input/text/components/TextInputEdit.tsx +++ b/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 ( theme.font.size.lg}; - font-weight: ${({ theme }) => theme.font.weight.semiBold}; - width: 100%; -`; - -type OwnProps = { - title: string; -}; - -export function PageTitle({ title }: OwnProps) { - return ( - - {title} - - ); -} diff --git a/front/src/modules/ui/modal/components/ConfirmationModal.tsx b/front/src/modules/ui/modal/components/ConfirmationModal.tsx index 866b44706..e3b71b124 100644 --- a/front/src/modules/ui/modal/components/ConfirmationModal.tsx +++ b/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; `; diff --git a/front/src/modules/ui/progress-bar/components/ProgressBar.tsx b/front/src/modules/ui/progress-bar/components/ProgressBar.tsx index 48118e16a..ceb7a5c69 100644 --- a/front/src/modules/ui/progress-bar/components/ProgressBar.tsx +++ b/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>` - 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; }; +const StyledBar = styled.div>` + height: ${({ barHeight }) => barHeight}px; + overflow: hidden; + width: 100%; +`; + +const StyledBarFilling = styled(motion.div)` + height: 100%; + width: 100%; +`; + export const ProgressBar = forwardRef( ( { @@ -84,8 +84,8 @@ export const ProgressBar = forwardRef( }, [controls, delay, duration, easing, autoStart, start]); return ( - - + ( animate={controls} exit={{ scaleX: 0 }} /> - + ); }, ); diff --git a/front/src/modules/ui/snack-bar/states/snackBarState.ts b/front/src/modules/ui/snack-bar/states/snackBarState.ts index dad665f4c..a69f2314d 100644 --- a/front/src/modules/ui/snack-bar/states/snackBarState.ts +++ b/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[]; }; diff --git a/front/src/modules/ui/table/editable-cell/components/CellSkeleton.tsx b/front/src/modules/ui/table/editable-cell/components/CellSkeleton.tsx deleted file mode 100644 index f6f880c63..000000000 --- a/front/src/modules/ui/table/editable-cell/components/CellSkeleton.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import Skeleton from 'react-loading-skeleton'; - -export function CellSkeleton() { - return ( -
- -
- ); -} diff --git a/front/src/modules/ui/table/editable-cell/components/EditableCell.tsx b/front/src/modules/ui/table/editable-cell/components/EditableCell.tsx index bbd92dcf5..bf7054f7a 100644 --- a/front/src/modules/ui/table/editable-cell/components/EditableCell.tsx +++ b/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({ - @@ -128,7 +128,7 @@ export function EditableCell({ )} - + ); } diff --git a/front/src/modules/ui/table/editable-cell/components/EditableCellContainer.tsx b/front/src/modules/ui/table/editable-cell/components/EditableCellContainer.tsx index 44db13684..786778fff 100644 --- a/front/src/modules/ui/table/editable-cell/components/EditableCellContainer.tsx +++ b/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; }; -export const EditableCellDisplayModeOuterContainer = styled.div< - Pick +const StyledEditableCellDisplayModeOuterContainer = styled.div< + Pick >` 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}; - box-shadow: inset 0 0 0 1px ${props.theme.font.color.extraLight};` + border-radius: ${props.theme.border.radius.sm}; + 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) { +}: React.PropsWithChildren) { return ( - {children} - + ); } diff --git a/front/src/modules/ui/table/editable-cell/components/EditableCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/components/EditableCellEditMode.tsx index 8d6501f1c..8248ee847 100644 --- a/front/src/modules/ui/table/editable-cell/components/EditableCellEditMode.tsx +++ b/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` +const StyledEditableCellEditModeContainer = styled.div` align-items: center; border: ${({ transparent, theme }) => transparent ? 'none' : `1px solid ${theme.border.color.light}`}; @@ -28,7 +28,7 @@ export const EditableCellEditModeContainer = styled.div` 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 ( - {children} - + ); } diff --git a/front/src/modules/ui/table/editable-cell/type/components/DateCellEdit.tsx b/front/src/modules/ui/table/editable-cell/type/components/DateCellEdit.tsx index 7510192b3..9efd263ee 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/DateCellEdit.tsx +++ b/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 ( - + - + ); } diff --git a/front/src/modules/ui/table/hooks/useSetTableRowIds.ts b/front/src/modules/ui/table/hooks/useSetTableRowIds.ts deleted file mode 100644 index 9751b56e7..000000000 --- a/front/src/modules/ui/table/hooks/useSetTableRowIds.ts +++ /dev/null @@ -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); - } - }, - [], - ); -} diff --git a/front/src/modules/ui/table/states/currentColumnNumberScopedState.ts b/front/src/modules/ui/table/states/currentColumnNumberScopedState.ts deleted file mode 100644 index 5ff4ea655..000000000 --- a/front/src/modules/ui/table/states/currentColumnNumberScopedState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atomFamily } from 'recoil'; - -export const currentColumnNumberScopedState = atomFamily({ - key: 'currentColumnNumberScopedState', - default: 0, -}); diff --git a/front/src/modules/ui/table/states/currentRowEntityIdScopedState.ts b/front/src/modules/ui/table/states/currentRowEntityIdScopedState.ts deleted file mode 100644 index 194aac930..000000000 --- a/front/src/modules/ui/table/states/currentRowEntityIdScopedState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atomFamily } from 'recoil'; - -export const currentRowEntityIdScopedState = atomFamily({ - key: 'currentRowEntityIdScopedState', - default: null, -}); diff --git a/front/src/modules/ui/table/states/currentRowNumberScopedState.ts b/front/src/modules/ui/table/states/currentRowNumberScopedState.ts deleted file mode 100644 index fb70d46a9..000000000 --- a/front/src/modules/ui/table/states/currentRowNumberScopedState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atomFamily } from 'recoil'; - -export const currentRowNumberScopedState = atomFamily({ - key: 'currentRowNumberScopedState', - default: 0, -}); diff --git a/front/src/modules/ui/table/types/CellUpdateFieldHook.ts b/front/src/modules/ui/table/types/CellUpdateFieldHook.ts deleted file mode 100644 index f861575c4..000000000 --- a/front/src/modules/ui/table/types/CellUpdateFieldHook.ts +++ /dev/null @@ -1,5 +0,0 @@ -export type EntityUpdateFieldHook = () => ( - entityId: string, - fieldName: string, - value: T, -) => void | Promise; diff --git a/front/src/modules/ui/table/types/guards/isTablePosition.ts b/front/src/modules/ui/table/types/guards/isTablePosition.ts deleted file mode 100644 index 363d1c626..000000000 --- a/front/src/modules/ui/table/types/guards/isTablePosition.ts +++ /dev/null @@ -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' - ); -} diff --git a/front/src/modules/ui/tag/components/Tag.tsx b/front/src/modules/ui/tag/components/Tag.tsx index c924a502e..caa1c467d 100644 --- a/front/src/modules/ui/tag/components/Tag.tsx +++ b/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; diff --git a/front/src/modules/ui/theme/hooks/useSystemColorScheme.ts b/front/src/modules/ui/theme/hooks/useSystemColorScheme.ts index 6fc4d4497..4fd935933 100644 --- a/front/src/modules/ui/theme/hooks/useSystemColorScheme.ts +++ b/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( diff --git a/front/src/modules/ui/utilities/hotkey/constants/index.ts b/front/src/modules/ui/utilities/hotkey/constants/index.ts index b7efa06ef..6633c375a 100644 --- a/front/src/modules/ui/utilities/hotkey/constants/index.ts +++ b/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, diff --git a/front/src/modules/ui/utilities/hotkey/hooks/internal/useHotkeyScopes.ts b/front/src/modules/ui/utilities/hotkey/hooks/internal/useHotkeyScopes.ts deleted file mode 100644 index dbcf8f893..000000000 --- a/front/src/modules/ui/utilities/hotkey/hooks/internal/useHotkeyScopes.ts +++ /dev/null @@ -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, - }; -} diff --git a/front/src/modules/ui/utilities/hotkey/utils/isSameHotkeyScope.ts b/front/src/modules/ui/utilities/hotkey/utils/isSameHotkeyScope.ts deleted file mode 100644 index 9ea91ce55..000000000 --- a/front/src/modules/ui/utilities/hotkey/utils/isSameHotkeyScope.ts +++ /dev/null @@ -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); -} diff --git a/front/src/modules/ui/utilities/loading-state/hooks/useIsPageLoading.ts b/front/src/modules/ui/utilities/loading-state/hooks/useIsPageLoading.ts deleted file mode 100644 index 4e541937f..000000000 --- a/front/src/modules/ui/utilities/loading-state/hooks/useIsPageLoading.ts +++ /dev/null @@ -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; -} diff --git a/front/src/modules/ui/utilities/recoil-scope/utils/getSnapshotScopedState.ts b/front/src/modules/ui/utilities/recoil-scope/utils/getSnapshotScopedState.ts deleted file mode 100644 index 411fa7c19..000000000 --- a/front/src/modules/ui/utilities/recoil-scope/utils/getSnapshotScopedState.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { RecoilState, Snapshot } from 'recoil'; - -export function getSnapshotScopedState({ - snapshot, - state, - contextScopeId, -}: { - snapshot: Snapshot; - state: (scopeId: string) => RecoilState; - contextScopeId: string; -}) { - return snapshot.getLoadable(state(contextScopeId)).valueOrThrow(); -} diff --git a/front/src/modules/ui/utilities/recoil-scope/utils/getSnapshotState.ts b/front/src/modules/ui/utilities/recoil-scope/utils/getSnapshotState.ts deleted file mode 100644 index 8a3d55769..000000000 --- a/front/src/modules/ui/utilities/recoil-scope/utils/getSnapshotState.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { RecoilState, Snapshot } from 'recoil'; - -export function getSnapshotState({ - snapshot, - state, -}: { - snapshot: Snapshot; - state: RecoilState; -}) { - return snapshot.getLoadable(state).valueOrThrow(); -} diff --git a/front/src/modules/users/components/Avatar.tsx b/front/src/modules/users/components/Avatar.tsx index b8fc7c674..67775680d 100644 --- a/front/src/modules/users/components/Avatar.tsx +++ b/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` +const StyledAvatar = styled.div` 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); diff --git a/front/src/modules/users/components/UserChip.tsx b/front/src/modules/users/components/UserChip.tsx index e4fc47c43..62108719f 100644 --- a/front/src/modules/users/components/UserChip.tsx +++ b/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 ( 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, ); diff --git a/front/src/modules/views/hooks/useTableViewFields.ts b/front/src/modules/views/hooks/useTableViewFields.ts index d0bcb0418..2a877dbac 100644 --- a/front/src/modules/views/hooks/useTableViewFields.ts +++ b/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, ) => ({ diff --git a/front/src/testing/decorators/CatalogDecorator.tsx b/front/src/testing/decorators/CatalogDecorator.tsx index c49358956..4b0bbe2ed 100644 --- a/front/src/testing/decorators/CatalogDecorator.tsx +++ b/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 ( {variable4.values.map((value4: string) => ( - + {(variable4.labels?.(value4) || value4) && ( - {variable4.labels?.(value4) || value4} + + {variable4.labels?.(value4) || value4} + )} {variable3.values.map((value3: string) => ( - + {(variable3.labels?.(value3) || value3) && ( - {variable3.labels?.(value3) || value3} + + {variable3.labels?.(value3) || value3} + )} {variable2.values.map((value2: string) => ( - + {(variable2.labels?.(value2) || value2) && ( - {variable2.labels?.(value2) || value2} + + {variable2.labels?.(value2) || value2} + )} {variable1.values.map((value1: string) => ( - + {(variable1.labels?.(value1) || value1) && ( - + {variable1.labels?.(value1) || value1} - + )} - + { ...variable4.props(value4), }} /> - - + + ))} - + ))} - + ))} - + ))} ); diff --git a/front/src/testing/decorators/CellPositionDecorator.tsx b/front/src/testing/decorators/CellPositionDecorator.tsx deleted file mode 100644 index 677916f3b..000000000 --- a/front/src/testing/decorators/CellPositionDecorator.tsx +++ /dev/null @@ -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) => ( - - - - - -);