diff --git a/front/.storybook/preview.ts b/front/.storybook/preview.ts index 70e33a8a6..56edada6c 100644 --- a/front/.storybook/preview.ts +++ b/front/.storybook/preview.ts @@ -2,7 +2,7 @@ import { initialize, mswDecorator } from 'msw-storybook-addon'; import { Preview } from '@storybook/react'; import { ThemeProvider } from '@emotion/react'; import { withThemeFromJSXProvider } from '@storybook/addon-styling'; -import { lightTheme, darkTheme } from '../src/modules/ui/themes/themes'; +import { lightTheme, darkTheme } from '../src/modules/ui/theme/constants/theme'; import { RootDecorator } from '../src/testing/decorators/RootDecorator'; import 'react-loading-skeleton/dist/skeleton.css'; import { mockedUserJWT } from '../src/testing/mock-data/jwt'; diff --git a/front/src/index.tsx b/front/src/index.tsx index 8bbd59387..665a98710 100644 --- a/front/src/index.tsx +++ b/front/src/index.tsx @@ -6,8 +6,8 @@ import { RecoilRoot } from 'recoil'; import { ApolloProvider } from '@/apollo/components/ApolloProvider'; import { ClientConfigProvider } from '@/client-config/components/ClientConfigProvider'; import { SnackBarProvider } from '@/ui/snack-bar/components/SnackBarProvider'; -import { AppThemeProvider } from '@/ui/themes/components/AppThemeProvider'; -import { ThemeType } from '@/ui/themes/themes'; +import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider'; +import { ThemeType } from '@/ui/theme/constants/theme'; import { UserProvider } from '@/users/components/UserProvider'; import '@emotion/react'; diff --git a/front/src/modules/activities/components/ActivityAssigneePicker.tsx b/front/src/modules/activities/components/ActivityAssigneePicker.tsx index 1bc49abba..5f872a82c 100644 --- a/front/src/modules/activities/components/ActivityAssigneePicker.tsx +++ b/front/src/modules/activities/components/ActivityAssigneePicker.tsx @@ -1,9 +1,9 @@ import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery'; -import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState'; -import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect'; -import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState'; -import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect'; -import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect'; +import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect'; +import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState'; +import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect'; +import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; +import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { Activity, User, diff --git a/front/src/modules/activities/components/ActivityComments.tsx b/front/src/modules/activities/components/ActivityComments.tsx index e4fbf4429..059df9781 100644 --- a/front/src/modules/activities/components/ActivityComments.tsx +++ b/front/src/modules/activities/components/ActivityComments.tsx @@ -4,8 +4,8 @@ import { useRecoilValue } from 'recoil'; import { v4 } from 'uuid'; import { currentUserState } from '@/auth/states/currentUserState'; -import { useIsMobile } from '@/ui/hooks/useIsMobile'; -import { AutosizeTextInput } from '@/ui/input/components/AutosizeTextInput'; +import { AutosizeTextInput } from '@/ui/input/autosize-text/components/AutosizeTextInput'; +import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { Activity, useCreateCommentMutation } from '~/generated/graphql'; import { isNonEmptyString } from '~/utils/isNonEmptyString'; diff --git a/front/src/modules/activities/components/ActivityEditor.tsx b/front/src/modules/activities/components/ActivityEditor.tsx index b1ad7cae4..284df84a6 100644 --- a/front/src/modules/activities/components/ActivityEditor.tsx +++ b/front/src/modules/activities/components/ActivityEditor.tsx @@ -8,8 +8,8 @@ import { ActivityTypeDropdown } from '@/activities/components/ActivityTypeDropdo import { GET_ACTIVITIES_BY_TARGETS } from '@/activities/queries'; import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox'; import { DateEditableField } from '@/ui/editable-field/variants/components/DateEditableField'; -import { useIsMobile } from '@/ui/hooks/useIsMobile'; import { IconCalendar } from '@/ui/icon/index'; +import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { Activity, ActivityTarget, diff --git a/front/src/modules/activities/components/ActivityRelationPicker.tsx b/front/src/modules/activities/components/ActivityRelationPicker.tsx index ef10a68ed..49a5518e5 100644 --- a/front/src/modules/activities/components/ActivityRelationPicker.tsx +++ b/front/src/modules/activities/components/ActivityRelationPicker.tsx @@ -12,12 +12,12 @@ import { CompanyChip } from '@/companies/components/CompanyChip'; import { useFilteredSearchCompanyQuery } from '@/companies/queries'; import { PersonChip } from '@/people/components/PersonChip'; import { useFilteredSearchPeopleQuery } from '@/people/queries'; -import { useListenClickOutside } from '@/ui/hooks/useListenClickOutside'; -import { usePreviousHotkeyScope } from '@/ui/hotkey/hooks/usePreviousHotkeyScope'; -import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys'; -import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope'; -import { MultipleEntitySelect } from '@/ui/relation-picker/components/MultipleEntitySelect'; -import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope'; +import { MultipleEntitySelect } from '@/ui/input/relation-picker/components/MultipleEntitySelect'; +import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope'; +import { useListenClickOutside } from '@/ui/utilities/click-outside/hooks/useListenClickOutside'; +import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; +import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { Activity, ActivityTarget, CommentableType } from '~/generated/graphql'; import { assertNotNull } from '~/utils/assert'; diff --git a/front/src/modules/activities/components/ActivityTitle.tsx b/front/src/modules/activities/components/ActivityTitle.tsx index 7aef4c609..0faeeb27d 100644 --- a/front/src/modules/activities/components/ActivityTitle.tsx +++ b/front/src/modules/activities/components/ActivityTitle.tsx @@ -4,7 +4,7 @@ import { Checkbox, CheckboxShape, CheckboxSize, -} from '@/ui/input/components/Checkbox'; +} from '@/ui/input/checkbox/components/Checkbox'; import { ActivityType } from '~/generated/graphql'; const StyledEditableTitleInput = styled.input<{ diff --git a/front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableField.tsx b/front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableField.tsx index 825be8187..9623c8493 100644 --- a/front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableField.tsx +++ b/front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableField.tsx @@ -1,8 +1,8 @@ import { EditableField } from '@/ui/editable-field/components/EditableField'; import { FieldContext } from '@/ui/editable-field/states/FieldContext'; import { IconUserCircle } from '@/ui/icon'; -import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope'; -import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope'; +import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { UserChip } from '@/users/components/UserChip'; import { Company, User } from '~/generated/graphql'; diff --git a/front/src/modules/activities/editable-fields/components/ActivityRelationEditableField.tsx b/front/src/modules/activities/editable-fields/components/ActivityRelationEditableField.tsx index 24b75f483..937053daa 100644 --- a/front/src/modules/activities/editable-fields/components/ActivityRelationEditableField.tsx +++ b/front/src/modules/activities/editable-fields/components/ActivityRelationEditableField.tsx @@ -5,8 +5,8 @@ import { PersonChip } from '@/people/components/PersonChip'; import { EditableField } from '@/ui/editable-field/components/EditableField'; import { FieldContext } from '@/ui/editable-field/states/FieldContext'; import { IconArrowUpRight } from '@/ui/icon'; -import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope'; -import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope'; +import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { Activity, ActivityTarget, diff --git a/front/src/modules/activities/editable-fields/components/ActivityRelationEditableFieldEditMode.tsx b/front/src/modules/activities/editable-fields/components/ActivityRelationEditableFieldEditMode.tsx index 5655b6578..5539f812a 100644 --- a/front/src/modules/activities/editable-fields/components/ActivityRelationEditableFieldEditMode.tsx +++ b/front/src/modules/activities/editable-fields/components/ActivityRelationEditableFieldEditMode.tsx @@ -6,7 +6,7 @@ import { flatMapAndSortEntityForSelectArrayOfArrayByName } from '@/activities/ut import { useFilteredSearchCompanyQuery } from '@/companies/queries'; import { useFilteredSearchPeopleQuery } from '@/people/queries'; import { useEditableField } from '@/ui/editable-field/hooks/useEditableField'; -import { MultipleEntitySelect } from '@/ui/relation-picker/components/MultipleEntitySelect'; +import { MultipleEntitySelect } from '@/ui/input/relation-picker/components/MultipleEntitySelect'; import { Activity, ActivityTarget } from '~/generated/graphql'; import { assertNotNull } from '~/utils/assert'; diff --git a/front/src/modules/activities/hooks/useOpenActivityRightDrawer.ts b/front/src/modules/activities/hooks/useOpenActivityRightDrawer.ts index 8a9d0e0ee..f5ac2e665 100644 --- a/front/src/modules/activities/hooks/useOpenActivityRightDrawer.ts +++ b/front/src/modules/activities/hooks/useOpenActivityRightDrawer.ts @@ -1,9 +1,9 @@ import { useRecoilState } from 'recoil'; -import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope'; import { useRightDrawer } from '@/ui/right-drawer/hooks/useRightDrawer'; import { RightDrawerHotkeyScope } from '@/ui/right-drawer/types/RightDrawerHotkeyScope'; import { RightDrawerPages } from '@/ui/right-drawer/types/RightDrawerPages'; +import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; import { viewableActivityIdState } from '../states/viewableActivityIdState'; diff --git a/front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts b/front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts index e913ce136..fd342a7d0 100644 --- a/front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts +++ b/front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts @@ -5,10 +5,10 @@ import { v4 } from 'uuid'; import { currentUserState } from '@/auth/states/currentUserState'; import { GET_COMPANIES } from '@/companies/queries'; import { GET_PEOPLE } from '@/people/queries'; -import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope'; import { useRightDrawer } from '@/ui/right-drawer/hooks/useRightDrawer'; import { RightDrawerHotkeyScope } from '@/ui/right-drawer/types/RightDrawerHotkeyScope'; import { RightDrawerPages } from '@/ui/right-drawer/types/RightDrawerPages'; +import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; import { ActivityType, useCreateActivityMutation } from '~/generated/graphql'; import { GET_ACTIVITIES_BY_TARGETS, GET_ACTIVITY } from '../queries'; diff --git a/front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts b/front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts index 763edf211..2efd68ea3 100644 --- a/front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts +++ b/front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts @@ -5,11 +5,11 @@ import { v4 } from 'uuid'; import { currentUserState } from '@/auth/states/currentUserState'; import { GET_COMPANIES } from '@/companies/queries'; import { GET_PEOPLE } from '@/people/queries'; -import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope'; import { useRightDrawer } from '@/ui/right-drawer/hooks/useRightDrawer'; import { RightDrawerHotkeyScope } from '@/ui/right-drawer/types/RightDrawerHotkeyScope'; import { RightDrawerPages } from '@/ui/right-drawer/types/RightDrawerPages'; import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector'; +import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; import { ActivityType, CommentableType, diff --git a/front/src/modules/activities/hooks/useOpenTimelineRightDrawer.ts b/front/src/modules/activities/hooks/useOpenTimelineRightDrawer.ts index 796a64298..f36e5ef86 100644 --- a/front/src/modules/activities/hooks/useOpenTimelineRightDrawer.ts +++ b/front/src/modules/activities/hooks/useOpenTimelineRightDrawer.ts @@ -1,9 +1,9 @@ import { useRecoilState } from 'recoil'; -import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope'; import { useRightDrawer } from '@/ui/right-drawer/hooks/useRightDrawer'; import { RightDrawerHotkeyScope } from '@/ui/right-drawer/types/RightDrawerHotkeyScope'; import { RightDrawerPages } from '@/ui/right-drawer/types/RightDrawerPages'; +import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; import { commentableEntityArrayState } from '../states/commentableEntityArrayState'; import { CommentableEntity } from '../types/CommentableEntity'; diff --git a/front/src/modules/activities/right-drawer/components/RightDrawerTimeline.tsx b/front/src/modules/activities/right-drawer/components/RightDrawerTimeline.tsx index 004f22930..d8787605b 100644 --- a/front/src/modules/activities/right-drawer/components/RightDrawerTimeline.tsx +++ b/front/src/modules/activities/right-drawer/components/RightDrawerTimeline.tsx @@ -2,27 +2,21 @@ import { useRecoilState } from 'recoil'; import { commentableEntityArrayState } from '@/activities/states/commentableEntityArrayState'; import { Timeline } from '@/activities/timeline/components/Timeline'; -import { RightDrawerBody } from '@/ui/right-drawer/components/RightDrawerBody'; -import { RightDrawerPage } from '@/ui/right-drawer/components/RightDrawerPage'; -import { RightDrawerTopBar } from '@/ui/right-drawer/components/RightDrawerTopBar'; export function RightDrawerTimeline() { const [commentableEntityArray] = useRecoilState(commentableEntityArrayState); return ( - - - - {commentableEntityArray.map((commentableEntity) => ( - - ))} - - + <> + {commentableEntityArray.map((commentableEntity) => ( + + ))} + ); } diff --git a/front/src/modules/activities/right-drawer/components/create/RightDrawerCreateActivity.tsx b/front/src/modules/activities/right-drawer/components/create/RightDrawerCreateActivity.tsx index 30718201f..80b19f758 100644 --- a/front/src/modules/activities/right-drawer/components/create/RightDrawerCreateActivity.tsx +++ b/front/src/modules/activities/right-drawer/components/create/RightDrawerCreateActivity.tsx @@ -1,9 +1,6 @@ import { useRecoilValue } from 'recoil'; import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState'; -import { RightDrawerBody } from '@/ui/right-drawer/components/RightDrawerBody'; -import { RightDrawerPage } from '@/ui/right-drawer/components/RightDrawerPage'; -import { RightDrawerTopBar } from '@/ui/right-drawer/components/RightDrawerTopBar'; import { RightDrawerActivity } from '../RightDrawerActivity'; @@ -11,17 +8,14 @@ export function RightDrawerCreateActivity() { const activityId = useRecoilValue(viewableActivityIdState); return ( - - - - {activityId && ( - - )} - - + <> + {activityId && ( + + )} + ); } diff --git a/front/src/modules/activities/right-drawer/components/edit/RightDrawerEditActivity.tsx b/front/src/modules/activities/right-drawer/components/edit/RightDrawerEditActivity.tsx index 6a7197022..f4fdeaf5e 100644 --- a/front/src/modules/activities/right-drawer/components/edit/RightDrawerEditActivity.tsx +++ b/front/src/modules/activities/right-drawer/components/edit/RightDrawerEditActivity.tsx @@ -1,21 +1,11 @@ import { useRecoilValue } from 'recoil'; import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState'; -import { RightDrawerBody } from '@/ui/right-drawer/components/RightDrawerBody'; -import { RightDrawerPage } from '@/ui/right-drawer/components/RightDrawerPage'; -import { RightDrawerTopBar } from '@/ui/right-drawer/components/RightDrawerTopBar'; import { RightDrawerActivity } from '../RightDrawerActivity'; export function RightDrawerEditActivity() { const activityId = useRecoilValue(viewableActivityIdState); - return ( - - - - {activityId && } - - - ); + return <>{activityId && }; } diff --git a/front/src/modules/activities/timeline/components/Timeline.tsx b/front/src/modules/activities/timeline/components/Timeline.tsx index 84d6321fd..6f0816b5f 100644 --- a/front/src/modules/activities/timeline/components/Timeline.tsx +++ b/front/src/modules/activities/timeline/components/Timeline.tsx @@ -6,8 +6,8 @@ import { ActivityCreateButton } from '@/activities/components/ActivityCreateButt import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer'; import { ActivityForDrawer } from '@/activities/types/ActivityForDrawer'; import { CommentableEntity } from '@/activities/types/CommentableEntity'; -import { useIsMobile } from '@/ui/hooks/useIsMobile'; import { IconCircleDot } from '@/ui/icon'; +import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { ActivityType, SortOrder, diff --git a/front/src/modules/activities/timeline/components/TimelineActivityTitle.tsx b/front/src/modules/activities/timeline/components/TimelineActivityTitle.tsx index 855a75a34..671d1e5ef 100644 --- a/front/src/modules/activities/timeline/components/TimelineActivityTitle.tsx +++ b/front/src/modules/activities/timeline/components/TimelineActivityTitle.tsx @@ -1,6 +1,9 @@ import styled from '@emotion/styled'; -import { Checkbox, CheckboxShape } from '@/ui/input/components/Checkbox'; +import { + Checkbox, + CheckboxShape, +} from '@/ui/input/checkbox/components/Checkbox'; import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip'; import { ActivityType } from '~/generated/graphql'; diff --git a/front/src/modules/activities/types/CommentableEntityForSelect.ts b/front/src/modules/activities/types/CommentableEntityForSelect.ts index ed861b374..07bfdfc27 100644 --- a/front/src/modules/activities/types/CommentableEntityForSelect.ts +++ b/front/src/modules/activities/types/CommentableEntityForSelect.ts @@ -1,4 +1,4 @@ -import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect'; +import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect'; import { CommentableType } from '~/generated/graphql'; export type CommentableEntityForSelect = EntityForSelect & { diff --git a/front/src/modules/activities/utils/flatMapAndSortEntityForSelectArrayByName.ts b/front/src/modules/activities/utils/flatMapAndSortEntityForSelectArrayByName.ts index 1eed371c3..0c5c14f18 100644 --- a/front/src/modules/activities/utils/flatMapAndSortEntityForSelectArrayByName.ts +++ b/front/src/modules/activities/utils/flatMapAndSortEntityForSelectArrayByName.ts @@ -1,4 +1,4 @@ -import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect'; +import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect'; export function flatMapAndSortEntityForSelectArrayOfArrayByName< T extends EntityForSelect, diff --git a/front/src/modules/auth/components/Title.tsx b/front/src/modules/auth/components/Title.tsx index 218348f61..0242ce406 100644 --- a/front/src/modules/auth/components/Title.tsx +++ b/front/src/modules/auth/components/Title.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from '@emotion/styled'; -import { AnimatedEaseIn } from '../../ui/animation/components/AnimatedEaseIn'; +import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn'; type Props = React.PropsWithChildren & { animate?: boolean; diff --git a/front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx b/front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx index 4a6565fd1..054731ed5 100644 --- a/front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx +++ b/front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx @@ -4,10 +4,10 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { motion } from 'framer-motion'; -import { AnimatedEaseIn } from '@/ui/animation/components/AnimatedEaseIn'; import { MainButton } from '@/ui/button/components/MainButton'; import { IconBrandGoogle } from '@/ui/icon'; -import { TextInput } from '@/ui/input/components/TextInput'; +import { TextInput } from '@/ui/input/text/components/TextInput'; +import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn'; import { Logo } from '../../components/Logo'; import { Title } from '../../components/Title'; diff --git a/front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx b/front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx index 8dba5f755..e882190e5 100644 --- a/front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx +++ b/front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx @@ -9,8 +9,8 @@ import { authProvidersState } from '@/client-config/states/authProvidersState'; import { isDemoModeState } from '@/client-config/states/isDemoModeState'; import { AppPath } from '@/types/AppPath'; import { PageHotkeyScope } from '@/types/PageHotkeyScope'; -import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys'; import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar'; +import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation'; import { useAuth } from '../../hooks/useAuth'; diff --git a/front/src/modules/command-menu/components/CommandMenu.tsx b/front/src/modules/command-menu/components/CommandMenu.tsx index da6ce6e32..765f7dc14 100644 --- a/front/src/modules/command-menu/components/CommandMenu.tsx +++ b/front/src/modules/command-menu/components/CommandMenu.tsx @@ -2,9 +2,9 @@ import { useState } from 'react'; import { useRecoilValue } from 'recoil'; import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer'; -import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys'; -import { AppHotkeyScope } from '@/ui/hotkey/types/AppHotkeyScope'; import { IconNotes } from '@/ui/icon'; +import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; +import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope'; import { Avatar } from '@/users/components/Avatar'; import { QueryMode, diff --git a/front/src/modules/command-menu/components/CommandMenuStyles.tsx b/front/src/modules/command-menu/components/CommandMenuStyles.tsx index c3f138bd2..071cfa8f5 100644 --- a/front/src/modules/command-menu/components/CommandMenuStyles.tsx +++ b/front/src/modules/command-menu/components/CommandMenuStyles.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { Command } from 'cmdk'; -import { useIsMobile } from '@/ui/hooks/useIsMobile'; +import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; export const StyledDialog = styled(Command.Dialog)` background: ${({ theme }) => theme.background.primary}; diff --git a/front/src/modules/command-menu/hooks/useCommandMenu.ts b/front/src/modules/command-menu/hooks/useCommandMenu.ts index dc2386994..e668947b3 100644 --- a/front/src/modules/command-menu/hooks/useCommandMenu.ts +++ b/front/src/modules/command-menu/hooks/useCommandMenu.ts @@ -1,7 +1,7 @@ import { useRecoilState } from 'recoil'; -import { usePreviousHotkeyScope } from '@/ui/hotkey/hooks/usePreviousHotkeyScope'; -import { AppHotkeyScope } from '@/ui/hotkey/types/AppHotkeyScope'; +import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; +import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope'; import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState'; diff --git a/front/src/modules/companies/__stories__/Board.stories.tsx b/front/src/modules/companies/__stories__/Board.stories.tsx index eceea0756..454781afe 100644 --- a/front/src/modules/companies/__stories__/Board.stories.tsx +++ b/front/src/modules/companies/__stories__/Board.stories.tsx @@ -2,12 +2,12 @@ import { MemoryRouter } from 'react-router-dom'; import { Meta, StoryObj } from '@storybook/react'; import { EntityBoard } from '@/pipeline/components/EntityBoard'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; import { graphqlMocks } from '~/testing/graphqlMocks'; import { defaultPipelineProgressOrderBy } from '../../pipeline/queries'; -import { RecoilScope } from '../../ui/recoil-scope/components/RecoilScope'; import { HooksCompanyBoard } from '../components/HooksCompanyBoard'; import { CompanyBoardContext } from '../states/CompanyBoardContext'; diff --git a/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx b/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx index 6325647f3..68a5f642f 100644 --- a/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx +++ b/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx @@ -3,6 +3,8 @@ import { MemoryRouter } from 'react-router-dom'; import { Meta, StoryObj } from '@storybook/react'; import { CompanyBoardCard } from '@/companies/components/CompanyBoardCard'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; +import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; import { graphqlMocks } from '~/testing/graphqlMocks'; import { mockedPipelineProgressData } from '~/testing/mock-data/pipeline-progress'; @@ -11,8 +13,6 @@ import { defaultPipelineProgressOrderBy } from '../../pipeline/queries'; import { BoardCardContext } from '../../pipeline/states/BoardCardContext'; import { BoardColumnContext } from '../../pipeline/states/BoardColumnContext'; import { pipelineProgressIdScopedState } from '../../pipeline/states/pipelineProgressIdScopedState'; -import { RecoilScope } from '../../ui/recoil-scope/components/RecoilScope'; -import { useRecoilScopedState } from '../../ui/recoil-scope/hooks/useRecoilScopedState'; import { HooksCompanyBoard } from '../components/HooksCompanyBoard'; import { CompanyBoardContext } from '../states/CompanyBoardContext'; diff --git a/front/src/modules/companies/components/CompanyAccountOwnerCell.tsx b/front/src/modules/companies/components/CompanyAccountOwnerCell.tsx deleted file mode 100644 index 5fe0c40ec..000000000 --- a/front/src/modules/companies/components/CompanyAccountOwnerCell.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope'; -import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell'; -import { useEditableCell } from '@/ui/table/editable-cell/hooks/useEditableCell'; -import { Company, User } from '~/generated/graphql'; - -import { UserChip } from '../../users/components/UserChip'; - -import { CompanyAccountOwnerPicker } from './CompanyAccountOwnerPicker'; - -export type CompanyAccountOnwer = Pick & { - accountOwner?: Pick | null; -}; - -export type OwnProps = { - company: CompanyAccountOnwer; -}; - -export function CompanyAccountOwnerCell({ company }: OwnProps) { - const { closeEditableCell } = useEditableCell(); - - function handleCancel() { - closeEditableCell(); - } - - function handleSubmit() { - closeEditableCell(); - } - - return ( - - } - nonEditModeContent={ - company.accountOwner?.displayName ? ( - - ) : ( - <> - ) - } - /> - ); -} diff --git a/front/src/modules/companies/components/CompanyAccountOwnerPicker.tsx b/front/src/modules/companies/components/CompanyAccountOwnerPicker.tsx index 45bad5e05..73c6ae189 100644 --- a/front/src/modules/companies/components/CompanyAccountOwnerPicker.tsx +++ b/front/src/modules/companies/components/CompanyAccountOwnerPicker.tsx @@ -1,9 +1,9 @@ import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery'; -import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState'; -import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect'; -import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState'; -import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect'; -import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect'; +import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect'; +import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState'; +import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect'; +import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; +import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { Company, User, diff --git a/front/src/modules/companies/components/CompanyBoardCard.tsx b/front/src/modules/companies/components/CompanyBoardCard.tsx index ac80868b8..c267772eb 100644 --- a/front/src/modules/companies/components/CompanyBoardCard.tsx +++ b/front/src/modules/companies/components/CompanyBoardCard.tsx @@ -10,16 +10,19 @@ import { GET_PIPELINE_PROGRESS, GET_PIPELINES } from '@/pipeline/queries'; import { BoardCardContext } from '@/pipeline/states/BoardCardContext'; import { pipelineProgressIdScopedState } from '@/pipeline/states/pipelineProgressIdScopedState'; import { selectedBoardCardsState } from '@/pipeline/states/selectedBoardCardsState'; +import { EntityChipVariant } from '@/ui/chip/components/EntityChip'; import { DateEditableField } from '@/ui/editable-field/variants/components/DateEditableField'; import { NumberEditableField } from '@/ui/editable-field/variants/components/NumberEditableField'; import { IconCurrencyDollar, IconProgressCheck } from '@/ui/icon'; import { IconCalendarEvent } from '@/ui/icon'; -import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox'; -import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState'; +import { + Checkbox, + CheckboxVariant, +} from '@/ui/input/checkbox/components/Checkbox'; +import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { useUpdateOnePipelineProgressMutation } from '~/generated/graphql'; import { getLogoUrlFromDomainName } from '~/utils'; -import { EntityChipVariant } from '../../ui/chip/components/EntityChip'; import { PipelineProgressForBoard } from '../types/CompanyProgress'; import { CompanyChip } from './CompanyChip'; diff --git a/front/src/modules/companies/components/CompanyEditableNameCell.tsx b/front/src/modules/companies/components/CompanyEditableNameCell.tsx deleted file mode 100644 index e7956bbf8..000000000 --- a/front/src/modules/companies/components/CompanyEditableNameCell.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { getOperationName } from '@apollo/client/utilities'; - -import { EditableCellChip } from '@/ui/table/editable-cell/types/EditableChip'; -import { - GetCompaniesQuery, - useUpdateOneCompanyMutation, -} from '~/generated/graphql'; -import { getLogoUrlFromDomainName } from '~/utils'; - -import { GET_COMPANY } from '../queries'; - -import { CompanyChip } from './CompanyChip'; - -type OwnProps = { - company: Pick< - GetCompaniesQuery['companies'][0], - 'id' | 'name' | 'domainName' | '_activityCount' - >; -}; - -export function CompanyEditableNameChipCell({ company }: OwnProps) { - const [updateCompany] = useUpdateOneCompanyMutation(); - - return ( - - } - onSubmit={(newName) => - updateCompany({ - variables: { - where: { id: company.id }, - data: { - name: newName, - }, - }, - refetchQueries: [getOperationName(GET_COMPANY) ?? ''], - }) - } - /> - ); -} diff --git a/front/src/modules/companies/components/CompanyPickerCell.tsx b/front/src/modules/companies/components/CompanyPickerCell.tsx index 03c02df85..21a71e58f 100644 --- a/front/src/modules/companies/components/CompanyPickerCell.tsx +++ b/front/src/modules/companies/components/CompanyPickerCell.tsx @@ -1,12 +1,11 @@ import { useFilteredSearchCompanyQuery } from '@/companies/queries'; -import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope'; -import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState'; -import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect'; -import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState'; +import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect'; +import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState'; +import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect'; import { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreateModeScopedState'; import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope'; - -import { EntityForSelect } from '../../ui/relation-picker/types/EntityForSelect'; +import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; +import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; export type OwnProps = { companyId: string | null; diff --git a/front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx b/front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx index 661fb16cf..4783f70a6 100644 --- a/front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx +++ b/front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx @@ -3,8 +3,8 @@ import { Context } from 'react'; import { FilterDropdownEntitySearchSelect } from '@/ui/filter-n-sort/components/FilterDropdownEntitySearchSelect'; import { filterDropdownSearchInputScopedState } from '@/ui/filter-n-sort/states/filterDropdownSearchInputScopedState'; import { filterDropdownSelectedEntityIdScopedState } from '@/ui/filter-n-sort/states/filterDropdownSelectedEntityIdScopedState'; -import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState'; -import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue'; +import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; +import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; import { useFilteredSearchCompanyQuery } from '../queries'; diff --git a/front/src/modules/companies/components/HooksCompanyBoard.tsx b/front/src/modules/companies/components/HooksCompanyBoard.tsx index 88889241e..f31e824fd 100644 --- a/front/src/modules/companies/components/HooksCompanyBoard.tsx +++ b/front/src/modules/companies/components/HooksCompanyBoard.tsx @@ -15,7 +15,7 @@ import { BoardPipelineStageColumn } from '@/ui/board/components/Board'; import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState'; import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition'; import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause'; -import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue'; +import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; import { PipelineProgressableType, PipelineProgressOrderByWithRelationInput as PipelineProgresses_Order_By, diff --git a/front/src/modules/companies/components/NewCompanyProgressButton.tsx b/front/src/modules/companies/components/NewCompanyProgressButton.tsx index 7b974960b..ef5f24ce2 100644 --- a/front/src/modules/companies/components/NewCompanyProgressButton.tsx +++ b/front/src/modules/companies/components/NewCompanyProgressButton.tsx @@ -10,11 +10,11 @@ import { currentPipelineState } from '@/pipeline/states/currentPipelineState'; import { pipelineStageIdScopedState } from '@/pipeline/states/pipelineStageIdScopedState'; import { BoardPipelineStageColumn } from '@/ui/board/components/Board'; import { NewButton } from '@/ui/board/components/NewButton'; -import { usePreviousHotkeyScope } from '@/ui/hotkey/hooks/usePreviousHotkeyScope'; -import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState'; -import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect'; -import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState'; -import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope'; +import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect'; +import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState'; +import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope'; +import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; +import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { PipelineProgressableType, useCreateOnePipelineProgressMutation, diff --git a/front/src/modules/companies/constants/companyViewFields.tsx b/front/src/modules/companies/constants/companyViewFields.tsx index 0d00d8655..91b40209c 100644 --- a/front/src/modules/companies/constants/companyViewFields.tsx +++ b/front/src/modules/companies/constants/companyViewFields.tsx @@ -7,7 +7,7 @@ import { IconUser, IconUsers, } from '@/ui/icon/index'; -import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect'; +import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; import { ViewFieldChipMetadata, ViewFieldDateMetadata, diff --git a/front/src/modules/companies/editable-field/components/CompanyAccountOwnerEditableField.tsx b/front/src/modules/companies/editable-field/components/CompanyAccountOwnerEditableField.tsx index dfe5f21b9..b5ed11bb8 100644 --- a/front/src/modules/companies/editable-field/components/CompanyAccountOwnerEditableField.tsx +++ b/front/src/modules/companies/editable-field/components/CompanyAccountOwnerEditableField.tsx @@ -1,8 +1,8 @@ import { EditableField } from '@/ui/editable-field/components/EditableField'; import { FieldContext } from '@/ui/editable-field/states/FieldContext'; import { IconUserCircle } from '@/ui/icon'; -import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope'; -import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope'; +import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { UserChip } from '@/users/components/UserChip'; import { Company, User } from '~/generated/graphql'; diff --git a/front/src/modules/companies/editable-field/components/CompanyAddressEditableField.tsx b/front/src/modules/companies/editable-field/components/CompanyAddressEditableField.tsx index 21e1d8dfd..fe7430359 100644 --- a/front/src/modules/companies/editable-field/components/CompanyAddressEditableField.tsx +++ b/front/src/modules/companies/editable-field/components/CompanyAddressEditableField.tsx @@ -3,8 +3,8 @@ import { useEffect, useState } from 'react'; import { EditableField } from '@/ui/editable-field/components/EditableField'; import { FieldContext } from '@/ui/editable-field/states/FieldContext'; import { IconMap } from '@/ui/icon'; -import { InplaceInputText } from '@/ui/inplace-input/components/InplaceInputText'; -import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope'; +import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql'; type OwnProps = { @@ -48,7 +48,7 @@ export function CompanyAddressEditableField({ company }: OwnProps) { onCancel={handleCancel} iconLabel={} editModeContent={ - } editModeContent={ - ({ - key: 'companyAccountOwnerFamilyState', - default: null, -}); diff --git a/front/src/modules/companies/states/companyAddressFamilyState.ts b/front/src/modules/companies/states/companyAddressFamilyState.ts deleted file mode 100644 index 90bf78f76..000000000 --- a/front/src/modules/companies/states/companyAddressFamilyState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atomFamily } from 'recoil'; - -export const companyAddressFamilyState = atomFamily({ - key: 'companyAddressFamilyState', - default: null, -}); diff --git a/front/src/modules/companies/states/companyCommentCountFamilyState.ts b/front/src/modules/companies/states/companyCommentCountFamilyState.ts deleted file mode 100644 index e0fcd6b6e..000000000 --- a/front/src/modules/companies/states/companyCommentCountFamilyState.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { atomFamily } from 'recoil'; - -export const companyCommentCountFamilyState = atomFamily( - { - key: 'companyCommentCountFamilyState', - default: null, - }, -); diff --git a/front/src/modules/companies/states/companyCreatedAtFamilyState.ts b/front/src/modules/companies/states/companyCreatedAtFamilyState.ts deleted file mode 100644 index a89b7db29..000000000 --- a/front/src/modules/companies/states/companyCreatedAtFamilyState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atomFamily } from 'recoil'; - -export const companyCreatedAtFamilyState = atomFamily({ - key: 'companyCreatedAtFamilyState', - default: null, -}); diff --git a/front/src/modules/companies/states/companyDomainNameFamilyState.ts b/front/src/modules/companies/states/companyDomainNameFamilyState.ts deleted file mode 100644 index 10208940d..000000000 --- a/front/src/modules/companies/states/companyDomainNameFamilyState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atomFamily } from 'recoil'; - -export const companyDomainNameFamilyState = atomFamily({ - key: 'companyDomainNameFamilyState', - default: null, -}); diff --git a/front/src/modules/companies/states/companyEmployeesFamilyState.ts b/front/src/modules/companies/states/companyEmployeesFamilyState.ts deleted file mode 100644 index 7236e2b03..000000000 --- a/front/src/modules/companies/states/companyEmployeesFamilyState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atomFamily } from 'recoil'; - -export const companyEmployeesFamilyState = atomFamily({ - key: 'companyEmployeesFamilyState', - default: null, -}); diff --git a/front/src/modules/companies/states/companyLinkedinUrlFamilyState.ts b/front/src/modules/companies/states/companyLinkedinUrlFamilyState.ts deleted file mode 100644 index 7a6cba9ba..000000000 --- a/front/src/modules/companies/states/companyLinkedinUrlFamilyState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atomFamily } from 'recoil'; - -export const companyLinkedinUrlFamilyState = atomFamily({ - key: 'companyLinkedinUrlFamilyState', - default: null, -}); diff --git a/front/src/modules/companies/states/companyNameFamilyState.ts b/front/src/modules/companies/states/companyNameFamilyState.ts deleted file mode 100644 index b5179a516..000000000 --- a/front/src/modules/companies/states/companyNameFamilyState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atomFamily } from 'recoil'; - -export const companyNameFamilyState = atomFamily({ - key: 'companyNameFamilyState', - default: null, -}); diff --git a/front/src/modules/companies/table/components/CompanyEntityTableData.tsx b/front/src/modules/companies/table/components/CompanyEntityTableData.tsx deleted file mode 100644 index 1f92eff82..000000000 --- a/front/src/modules/companies/table/components/CompanyEntityTableData.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { defaultOrderBy } from '@/companies/queries'; -import { - PersonOrderByWithRelationInput, - useGetCompaniesQuery, -} from '~/generated/graphql'; - -import { useSetCompanyEntityTable } from '../hooks/useSetCompanyEntityTable'; - -export function CompanyEntityTableData({ - orderBy = defaultOrderBy, - whereFilters, -}: { - orderBy?: PersonOrderByWithRelationInput[]; - whereFilters?: any; -}) { - const setCompanyEntityTable = useSetCompanyEntityTable(); - - useGetCompaniesQuery({ - variables: { orderBy, where: whereFilters }, - onCompleted: (data) => { - const companies = data.companies ?? []; - - setCompanyEntityTable(companies); - }, - }); - - return <>; -} diff --git a/front/src/modules/companies/table/components/CompanyEntityTableDataMocked.tsx b/front/src/modules/companies/table/components/CompanyEntityTableDataMocked.tsx deleted file mode 100644 index d8d750169..000000000 --- a/front/src/modules/companies/table/components/CompanyEntityTableDataMocked.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { useEffect } from 'react'; - -import { useSetCompanyEntityTable } from '../hooks/useSetCompanyEntityTable'; - -import { mockedCompaniesData } from './companies-mock-data'; - -export function CompanyEntityTableDataMocked() { - const setCompanyEntityTable = useSetCompanyEntityTable(); - - useEffect(() => { - setCompanyEntityTable(mockedCompaniesData); - }, [setCompanyEntityTable]); - - return <>; -} diff --git a/front/src/modules/companies/table/components/CompanyTable.tsx b/front/src/modules/companies/table/components/CompanyTable.tsx index 89aa55772..8a38101cf 100644 --- a/front/src/modules/companies/table/components/CompanyTable.tsx +++ b/front/src/modules/companies/table/components/CompanyTable.tsx @@ -1,16 +1,21 @@ import { useCallback, useMemo, useState } from 'react'; +import { companyViewFields } from '@/companies/constants/companyViewFields'; import { CompaniesSelectedSortType, defaultOrderBy } from '@/companies/queries'; -import { companyColumns } from '@/companies/table/components/companyColumns'; -import { CompanyEntityTableData } from '@/companies/table/components/CompanyEntityTableData'; import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers'; import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState'; import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause'; import { IconList } from '@/ui/icon'; -import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue'; import { EntityTable } from '@/ui/table/components/EntityTable'; +import { GenericEntityTableData } from '@/ui/table/components/GenericEntityTableData'; import { TableContext } from '@/ui/table/states/TableContext'; -import { CompanyOrderByWithRelationInput } from '~/generated/graphql'; +import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; +import { + CompanyOrderByWithRelationInput, + useGetCompaniesQuery, + useUpdateOneCompanyMutation, +} from '~/generated/graphql'; +import { companiesFilters } from '~/pages/companies/companies-filters'; import { availableSorts } from '~/pages/companies/companies-sorts'; export function CompanyTable() { @@ -29,13 +34,20 @@ export function CompanyTable() { return ( <> - + } availableSorts={availableSorts} onSortsUpdate={updateSorts} + useUpdateEntityMutation={useUpdateOneCompanyMutation} /> ); diff --git a/front/src/modules/companies/table/components/CompanyTableMockMode.tsx b/front/src/modules/companies/table/components/CompanyTableMockMode.tsx index 6339b09f8..0b83d8544 100644 --- a/front/src/modules/companies/table/components/CompanyTableMockMode.tsx +++ b/front/src/modules/companies/table/components/CompanyTableMockMode.tsx @@ -1,18 +1,16 @@ -import { companyColumns } from '@/companies/table/components/companyColumns'; -import { CompanyEntityTableDataMocked } from '@/companies/table/components/CompanyEntityTableDataMocked'; import { IconList } from '@/ui/icon'; import { EntityTable } from '@/ui/table/components/EntityTable'; +import { useUpdateOneCompanyMutation } from '~/generated/graphql'; import { availableSorts } from '~/pages/companies/companies-sorts'; export function CompanyTableMockMode() { return ( <> - } availableSorts={availableSorts} + useUpdateEntityMutation={useUpdateOneCompanyMutation} /> ); diff --git a/front/src/modules/companies/table/components/CompanyTableV2.tsx b/front/src/modules/companies/table/components/CompanyTableV2.tsx deleted file mode 100644 index 6f8e47a2e..000000000 --- a/front/src/modules/companies/table/components/CompanyTableV2.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { useCallback, useMemo, useState } from 'react'; - -import { companyViewFields } from '@/companies/constants/companyViewFields'; -import { CompaniesSelectedSortType, defaultOrderBy } from '@/companies/queries'; -import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers'; -import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState'; -import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause'; -import { IconList } from '@/ui/icon'; -import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue'; -import { EntityTable } from '@/ui/table/components/EntityTableV2'; -import { GenericEntityTableData } from '@/ui/table/components/GenericEntityTableData'; -import { TableContext } from '@/ui/table/states/TableContext'; -import { - CompanyOrderByWithRelationInput, - useGetCompaniesQuery, - useUpdateOneCompanyMutation, -} from '~/generated/graphql'; -import { companiesFilters } from '~/pages/companies/companies-filters'; -import { availableSorts } from '~/pages/companies/companies-sorts'; - -export function CompanyTable() { - const [orderBy, setOrderBy] = - useState(defaultOrderBy); - - const updateSorts = useCallback((sorts: Array) => { - setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy); - }, []); - - const filters = useRecoilScopedValue(filtersScopedState, TableContext); - - const whereFilters = useMemo(() => { - return { AND: filters.map(turnFilterIntoWhereClause) }; - }, [filters]) as any; - - return ( - <> - - } - availableSorts={availableSorts} - onSortsUpdate={updateSorts} - useUpdateEntityMutation={useUpdateOneCompanyMutation} - /> - - ); -} diff --git a/front/src/modules/companies/table/components/EditableCompanyAccountOwnerCell.tsx b/front/src/modules/companies/table/components/EditableCompanyAccountOwnerCell.tsx deleted file mode 100644 index b9f5dbd3e..000000000 --- a/front/src/modules/companies/table/components/EditableCompanyAccountOwnerCell.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { useRecoilValue } from 'recoil'; - -import { CompanyAccountOwnerCell } from '@/companies/components/CompanyAccountOwnerCell'; -import { companyAccountOwnerFamilyState } from '@/companies/states/companyAccountOwnerFamilyState'; -import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; - -export function EditableCompanyAccountOwnerCell() { - const currentRowEntityId = useCurrentRowEntityId(); - - const accountOwner = useRecoilValue( - companyAccountOwnerFamilyState(currentRowEntityId ?? ''), - ); - - return ( - - ); -} diff --git a/front/src/modules/companies/table/components/EditableCompanyAddressCell.tsx b/front/src/modules/companies/table/components/EditableCompanyAddressCell.tsx deleted file mode 100644 index 1828a90de..000000000 --- a/front/src/modules/companies/table/components/EditableCompanyAddressCell.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { useEffect, useState } from 'react'; -import { useRecoilValue } from 'recoil'; - -import { companyAddressFamilyState } from '@/companies/states/companyAddressFamilyState'; -import { EditableCellText } from '@/ui/table/editable-cell/types/EditableCellText'; -import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; -import { useUpdateOneCompanyMutation } from '~/generated/graphql'; - -export function EditableCompanyAddressCell() { - const currentRowEntityId = useCurrentRowEntityId(); - - const [updateCompany] = useUpdateOneCompanyMutation(); - - const address = useRecoilValue( - companyAddressFamilyState(currentRowEntityId ?? ''), - ); - - const [internalValue, setInternalValue] = useState(address ?? ''); - useEffect(() => { - setInternalValue(address ?? ''); - }, [address]); - - return ( - - updateCompany({ - variables: { - where: { - id: currentRowEntityId, - }, - data: { - address: newValue, - }, - }, - }) - } - /> - ); -} diff --git a/front/src/modules/companies/table/components/EditableCompanyCreatedAtCell.tsx b/front/src/modules/companies/table/components/EditableCompanyCreatedAtCell.tsx deleted file mode 100644 index 08b0a0052..000000000 --- a/front/src/modules/companies/table/components/EditableCompanyCreatedAtCell.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { DateTime } from 'luxon'; -import { useRecoilValue } from 'recoil'; - -import { companyCreatedAtFamilyState } from '@/companies/states/companyCreatedAtFamilyState'; -import { EditableCellDate } from '@/ui/table/editable-cell/types/EditableCellDate'; -import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; -import { useUpdateOneCompanyMutation } from '~/generated/graphql'; - -export function EditableCompanyCreatedAtCell() { - const currentRowEntityId = useCurrentRowEntityId(); - - const createdAt = useRecoilValue( - companyCreatedAtFamilyState(currentRowEntityId ?? ''), - ); - - const [updateCompany] = useUpdateOneCompanyMutation(); - - return ( - { - if (!currentRowEntityId) return; - - await updateCompany({ - variables: { - where: { - id: currentRowEntityId, - }, - data: { - createdAt: newDate.toISOString(), - }, - }, - }); - }} - value={createdAt ? DateTime.fromISO(createdAt).toJSDate() : new Date()} - /> - ); -} diff --git a/front/src/modules/companies/table/components/EditableCompanyDomainNameCell.tsx b/front/src/modules/companies/table/components/EditableCompanyDomainNameCell.tsx deleted file mode 100644 index 382bfa61b..000000000 --- a/front/src/modules/companies/table/components/EditableCompanyDomainNameCell.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useRecoilValue } from 'recoil'; - -import { companyDomainNameFamilyState } from '@/companies/states/companyDomainNameFamilyState'; -import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; -import { useUpdateOneCompanyMutation } from '~/generated/graphql'; - -import { EditableCellURL } from '../../../ui/table/editable-cell/types/EditableCellURL'; - -export function EditableCompanyDomainNameCell() { - const currentRowEntityId = useCurrentRowEntityId(); - - const [updateCompany] = useUpdateOneCompanyMutation(); - - const domainName = useRecoilValue( - companyDomainNameFamilyState(currentRowEntityId ?? ''), - ); - - return ( - - updateCompany({ - variables: { - where: { - id: currentRowEntityId, - }, - data: { - domainName: newURL, - }, - }, - }) - } - /> - ); -} diff --git a/front/src/modules/companies/table/components/EditableCompanyEmployeesCell.tsx b/front/src/modules/companies/table/components/EditableCompanyEmployeesCell.tsx deleted file mode 100644 index 91e7d7428..000000000 --- a/front/src/modules/companies/table/components/EditableCompanyEmployeesCell.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useRecoilValue } from 'recoil'; - -import { companyEmployeesFamilyState } from '@/companies/states/companyEmployeesFamilyState'; -import { EditableCellText } from '@/ui/table/editable-cell/types/EditableCellText'; -import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; -import { useUpdateOneCompanyMutation } from '~/generated/graphql'; - -export function EditableCompanyEmployeesCell() { - const currentRowEntityId = useCurrentRowEntityId(); - - const [updateCompany] = useUpdateOneCompanyMutation(); - - const employees = useRecoilValue( - companyEmployeesFamilyState(currentRowEntityId ?? ''), - ); - - return ( - // TODO: Create an EditableCellNumber component - - updateCompany({ - variables: { - where: { - id: currentRowEntityId, - }, - data: { - employees: parseInt(newValue), - }, - }, - }) - } - /> - ); -} diff --git a/front/src/modules/companies/table/components/EditableCompanyLinkedinUrlCell.tsx b/front/src/modules/companies/table/components/EditableCompanyLinkedinUrlCell.tsx deleted file mode 100644 index 8bad80b28..000000000 --- a/front/src/modules/companies/table/components/EditableCompanyLinkedinUrlCell.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useRecoilValue } from 'recoil'; - -import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; -import { useUpdateOneCompanyMutation } from '~/generated/graphql'; - -import { EditableCellURL } from '../../../ui/table/editable-cell/types/EditableCellURL'; -import { companyLinkedinUrlFamilyState } from '../../states/companyLinkedinUrlFamilyState'; - -export function EditableCompanyLinkedinUrlCell() { - const currentRowEntityId = useCurrentRowEntityId(); - - const [updateCompany] = useUpdateOneCompanyMutation(); - - const linkedinUrl = useRecoilValue( - companyLinkedinUrlFamilyState(currentRowEntityId ?? ''), - ); - - return ( - - updateCompany({ - variables: { - where: { - id: currentRowEntityId, - }, - data: { - linkedinUrl: newUrl, - }, - }, - }) - } - /> - ); -} diff --git a/front/src/modules/companies/table/components/EditableCompanyNameCell.tsx b/front/src/modules/companies/table/components/EditableCompanyNameCell.tsx deleted file mode 100644 index df25d15f0..000000000 --- a/front/src/modules/companies/table/components/EditableCompanyNameCell.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { useRecoilValue } from 'recoil'; - -import { CompanyEditableNameChipCell } from '@/companies/components/CompanyEditableNameCell'; -import { companyCommentCountFamilyState } from '@/companies/states/companyCommentCountFamilyState'; -import { companyDomainNameFamilyState } from '@/companies/states/companyDomainNameFamilyState'; -import { companyNameFamilyState } from '@/companies/states/companyNameFamilyState'; -import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; - -export function EditableCompanyNameCell() { - const currentRowEntityId = useCurrentRowEntityId(); - - const name = useRecoilValue(companyNameFamilyState(currentRowEntityId ?? '')); - - const domainName = useRecoilValue( - companyDomainNameFamilyState(currentRowEntityId ?? ''), - ); - - const commentCount = useRecoilValue( - companyCommentCountFamilyState(currentRowEntityId ?? ''), - ); - - return ( - - ); -} diff --git a/front/src/modules/companies/table/components/companyColumns.tsx b/front/src/modules/companies/table/components/companyColumns.tsx deleted file mode 100644 index b431cc9ae..000000000 --- a/front/src/modules/companies/table/components/companyColumns.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { TableColumn } from '@/people/table/components/peopleColumns'; -import { - IconBrandLinkedin, - IconBuildingSkyscraper, - IconCalendarEvent, - IconLink, - IconMap, - IconUser, - IconUsers, -} from '@/ui/icon/index'; - -import { EditableCompanyAccountOwnerCell } from './EditableCompanyAccountOwnerCell'; -import { EditableCompanyAddressCell } from './EditableCompanyAddressCell'; -import { EditableCompanyCreatedAtCell } from './EditableCompanyCreatedAtCell'; -import { EditableCompanyDomainNameCell } from './EditableCompanyDomainNameCell'; -import { EditableCompanyEmployeesCell } from './EditableCompanyEmployeesCell'; -import { EditableCompanyLinkedinUrlCell } from './EditableCompanyLinkedinUrlCell'; -import { EditableCompanyNameCell } from './EditableCompanyNameCell'; - -export const companyColumns: TableColumn[] = [ - { - id: 'name', - title: 'Name', - icon: , - size: 180, - cellComponent: , - }, - { - id: 'domainName', - title: 'URL', - icon: , - size: 100, - cellComponent: , - }, - { - id: 'accountOwner', - title: 'Account owner', - icon: , - size: 150, - cellComponent: , - }, - { - id: 'createdAt', - title: 'Creation', - icon: , - size: 150, - cellComponent: , - }, - { - id: 'employees', - title: 'Employees', - icon: , - size: 150, - cellComponent: , - }, - { - id: 'linkedinUrl', - title: 'Linkedin', - icon: , - size: 170, - cellComponent: , - }, - { - id: 'address', - title: 'Address', - icon: , - size: 170, - cellComponent: , - }, -]; diff --git a/front/src/modules/companies/table/hooks/useSetCompanyEntityTable.ts b/front/src/modules/companies/table/hooks/useSetCompanyEntityTable.ts deleted file mode 100644 index 21a66b2bb..000000000 --- a/front/src/modules/companies/table/hooks/useSetCompanyEntityTable.ts +++ /dev/null @@ -1,141 +0,0 @@ -import { useLocation } from 'react-router-dom'; -import { useRecoilCallback } from 'recoil'; - -import { companyAccountOwnerFamilyState } from '@/companies/states/companyAccountOwnerFamilyState'; -import { companyAddressFamilyState } from '@/companies/states/companyAddressFamilyState'; -import { companyCommentCountFamilyState } from '@/companies/states/companyCommentCountFamilyState'; -import { companyCreatedAtFamilyState } from '@/companies/states/companyCreatedAtFamilyState'; -import { companyDomainNameFamilyState } from '@/companies/states/companyDomainNameFamilyState'; -import { companyEmployeesFamilyState } from '@/companies/states/companyEmployeesFamilyState'; -import { companyLinkedinUrlFamilyState } from '@/companies/states/companyLinkedinUrlFamilyState'; -import { companyNameFamilyState } from '@/companies/states/companyNameFamilyState'; -import { GetCompaniesQuery } from '~/generated/graphql'; - -import { companiesFilters } from '../../../../pages/companies/companies-filters'; -import { availableFiltersScopedState } from '../../../ui/filter-n-sort/states/availableFiltersScopedState'; -import { useContextScopeId } from '../../../ui/recoil-scope/hooks/useContextScopeId'; -import { currentPageLocationState } from '../../../ui/states/currentPageLocationState'; -import { useResetTableRowSelection } from '../../../ui/table/hooks/useResetTableRowSelection'; -import { entityTableDimensionsState } from '../../../ui/table/states/entityTableDimensionsState'; -import { isFetchingEntityTableDataState } from '../../../ui/table/states/isFetchingEntityTableDataState'; -import { TableContext } from '../../../ui/table/states/TableContext'; -import { tableRowIdsState } from '../../../ui/table/states/tableRowIdsState'; -import { companyColumns } from '../components/companyColumns'; - -export function useSetCompanyEntityTable() { - const resetTableRowSelection = useResetTableRowSelection(); - - const tableContextScopeId = useContextScopeId(TableContext); - - const currentLocation = useLocation().pathname; - - return useRecoilCallback( - ({ set, snapshot }) => - (newCompanyArray: GetCompaniesQuery['companies']) => { - for (const company of newCompanyArray) { - const currentName = snapshot - .getLoadable(companyNameFamilyState(company.id)) - .valueOrThrow(); - - if (currentName !== company.name) { - set(companyNameFamilyState(company.id), company.name); - } - - const currentDomainName = snapshot - .getLoadable(companyDomainNameFamilyState(company.id)) - .valueOrThrow(); - - if (currentDomainName !== company.domainName) { - set(companyDomainNameFamilyState(company.id), company.domainName); - } - - const currentLinkedinUrl = snapshot - .getLoadable(companyLinkedinUrlFamilyState(company.id)) - .valueOrThrow(); - - if (currentLinkedinUrl !== company.linkedinUrl) { - set( - companyLinkedinUrlFamilyState(company.id), - company.linkedinUrl ?? '', - ); - } - - const currentEmployees = snapshot - .getLoadable(companyEmployeesFamilyState(company.id)) - .valueOrThrow(); - - if (currentEmployees !== company.employees) { - set( - companyEmployeesFamilyState(company.id), - company.employees?.toString() ?? '', - ); - } - - const currentAddress = snapshot - .getLoadable(companyAddressFamilyState(company.id)) - .valueOrThrow(); - - if (currentAddress !== company.address) { - set(companyAddressFamilyState(company.id), company.address); - } - - const currentCommentCount = snapshot - .getLoadable(companyCommentCountFamilyState(company.id)) - .valueOrThrow(); - - if (currentCommentCount !== company._activityCount) { - set( - companyCommentCountFamilyState(company.id), - company._activityCount, - ); - } - - const currentAccountOwner = snapshot - .getLoadable(companyAccountOwnerFamilyState(company.id)) - .valueOrThrow(); - - if ( - JSON.stringify(currentAccountOwner) !== - JSON.stringify(company.accountOwner) - ) { - set( - companyAccountOwnerFamilyState(company.id), - company.accountOwner, - ); - } - - const currentCreatedAt = snapshot - .getLoadable(companyCreatedAtFamilyState(company.id)) - .valueOrThrow(); - - if (currentCreatedAt !== company.createdAt) { - set(companyCreatedAtFamilyState(company.id), company.createdAt); - } - } - - const companyIds = newCompanyArray.map((company) => company.id); - - set(tableRowIdsState, (currentRowIds) => { - if (JSON.stringify(currentRowIds) !== JSON.stringify(companyIds)) { - return companyIds; - } - - return currentRowIds; - }); - - resetTableRowSelection(); - - set(entityTableDimensionsState, { - numberOfColumns: companyColumns.length, - numberOfRows: companyIds.length, - }); - - set(availableFiltersScopedState(tableContextScopeId), companiesFilters); - - set(currentPageLocationState, currentLocation); - - set(isFetchingEntityTableDataState, false); - }, - [resetTableRowSelection, tableContextScopeId, currentLocation], - ); -} diff --git a/front/src/modules/people/components/EditablePeopleFullName.tsx b/front/src/modules/people/components/EditablePeopleFullName.tsx deleted file mode 100644 index f2a40303b..000000000 --- a/front/src/modules/people/components/EditablePeopleFullName.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import styled from '@emotion/styled'; - -import { EditableCellDoubleText } from '@/ui/table/editable-cell/types/EditableCellDoubleText'; -import { Person } from '~/generated/graphql'; - -import { PersonChip } from './PersonChip'; - -type OwnProps = { - person: - | Partial< - Pick< - Person, - | 'id' - | 'firstName' - | 'lastName' - | 'displayName' - | 'avatarUrl' - | '_activityCount' - > - > - | null - | undefined; - onSubmit?: (firstName: string, lastName: string) => void; - onCancel?: () => void; -}; - -const NoEditModeContainer = styled.div` - align-items: center; - display: flex; - justify-content: space-between; - width: 100%; -`; - -export function EditablePeopleFullName({ - person, - onSubmit, - onCancel, -}: OwnProps) { - return ( - - - - } - /> - ); -} diff --git a/front/src/modules/people/components/FilterDropdownPeopleSearchSelect.tsx b/front/src/modules/people/components/FilterDropdownPeopleSearchSelect.tsx index 7e079cae3..1c8e04272 100644 --- a/front/src/modules/people/components/FilterDropdownPeopleSearchSelect.tsx +++ b/front/src/modules/people/components/FilterDropdownPeopleSearchSelect.tsx @@ -4,8 +4,8 @@ import { useFilteredSearchPeopleQuery } from '@/people/queries'; import { FilterDropdownEntitySearchSelect } from '@/ui/filter-n-sort/components/FilterDropdownEntitySearchSelect'; import { filterDropdownSearchInputScopedState } from '@/ui/filter-n-sort/states/filterDropdownSearchInputScopedState'; import { filterDropdownSelectedEntityIdScopedState } from '@/ui/filter-n-sort/states/filterDropdownSelectedEntityIdScopedState'; -import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState'; -import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue'; +import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; +import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; export function FilterDropdownPeopleSearchSelect({ context, diff --git a/front/src/modules/people/components/PeopleCompanyCell.tsx b/front/src/modules/people/components/PeopleCompanyCell.tsx deleted file mode 100644 index b3a777e8f..000000000 --- a/front/src/modules/people/components/PeopleCompanyCell.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { CompanyChip } from '@/companies/components/CompanyChip'; -import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState'; -import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope'; -import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell'; -import { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreateModeScopedState'; -import { Company, Person } from '~/generated/graphql'; -import { getLogoUrlFromDomainName } from '~/utils'; - -import { PeopleCompanyCreateCell } from './PeopleCompanyCreateCell'; -import { PeopleCompanyPicker } from './PeopleCompanyPicker'; - -export type PeopleWithCompany = Pick & { - company?: Pick | null; -}; - -export type OwnProps = { - people: Pick & { - company?: Pick | null; - }; -}; - -export function PeopleCompanyCell({ people }: OwnProps) { - const [isCreating] = useRecoilScopedState(isCreateModeScopedState); - - return ( - - ) : ( - - ) - } - nonEditModeContent={ - - } - /> - ); -} diff --git a/front/src/modules/people/components/PeopleCompanyCreateCell.tsx b/front/src/modules/people/components/PeopleCompanyCreateCell.tsx deleted file mode 100644 index 62cd31419..000000000 --- a/front/src/modules/people/components/PeopleCompanyCreateCell.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { useState } from 'react'; -import { getOperationName } from '@apollo/client/utilities'; -import { v4 } from 'uuid'; - -import { GET_COMPANIES } from '@/companies/queries'; -import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState'; -import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState'; -import { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreateModeScopedState'; -import { EditableCellDoubleTextEditMode } from '@/ui/table/editable-cell/types/EditableCellDoubleTextEditMode'; -import { - Person, - useInsertOneCompanyMutation, - useUpdateOnePersonMutation, -} from '~/generated/graphql'; -import { logError } from '~/utils/logError'; - -import { SEARCH_COMPANY_QUERY } from '../../search/queries/search'; - -type OwnProps = { - people: Pick; -}; - -export function PeopleCompanyCreateCell({ people }: OwnProps) { - const [, setIsCreating] = useRecoilScopedState(isCreateModeScopedState); - - const [currentSearchFilter] = useRecoilScopedState( - relationPickerSearchFilterScopedState, - ); - - const [companyName, setCompanyName] = useState(currentSearchFilter); - - const [companyDomainName, setCompanyDomainName] = useState(''); - const [insertCompany] = useInsertOneCompanyMutation(); - const [updatePerson] = useUpdateOnePersonMutation(); - - function handleDoubleTextChange(leftValue: string, rightValue: string): void { - setCompanyDomainName(leftValue); - setCompanyName(rightValue); - } - - async function handleCompanyCreate( - companyName: string, - companyDomainName: string, - ) { - const newCompanyId = v4(); - - try { - await insertCompany({ - variables: { - data: { - id: newCompanyId, - name: companyName, - domainName: companyDomainName, - address: '', - }, - }, - refetchQueries: [ - getOperationName(GET_COMPANIES) ?? '', - getOperationName(SEARCH_COMPANY_QUERY) ?? '', - ], - }); - - await updatePerson({ - variables: { - where: { - id: people.id, - }, - data: { - company: { connect: { id: newCompanyId } }, - }, - }, - }); - } catch (error) { - // TODO: handle error better - logError(error); - } - setIsCreating(false); - } - - return ( - handleCompanyCreate(companyName, companyDomainName)} - onCancel={() => setIsCreating(false)} - /> - ); -} diff --git a/front/src/modules/people/components/PeopleCompanyPicker.tsx b/front/src/modules/people/components/PeopleCompanyPicker.tsx index bdc3e5446..b61c88405 100644 --- a/front/src/modules/people/components/PeopleCompanyPicker.tsx +++ b/front/src/modules/people/components/PeopleCompanyPicker.tsx @@ -1,19 +1,18 @@ import { useFilteredSearchCompanyQuery } from '@/companies/queries'; -import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope'; -import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState'; -import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect'; -import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState'; +import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect'; +import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState'; +import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect'; import { useEditableCell } from '@/ui/table/editable-cell/hooks/useEditableCell'; import { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreateModeScopedState'; import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope'; +import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; +import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { Company, Person, useUpdateOnePersonMutation, } from '~/generated/graphql'; -import { EntityForSelect } from '../../ui/relation-picker/types/EntityForSelect'; - export type OwnProps = { people: Pick & { company?: Pick | null }; }; diff --git a/front/src/modules/people/components/PeoplePicker.tsx b/front/src/modules/people/components/PeoplePicker.tsx index bb7924c72..a6f11776c 100644 --- a/front/src/modules/people/components/PeoplePicker.tsx +++ b/front/src/modules/people/components/PeoplePicker.tsx @@ -1,9 +1,9 @@ import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery'; -import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState'; -import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect'; -import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState'; -import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect'; -import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect'; +import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect'; +import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState'; +import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect'; +import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; +import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { useSearchPeopleQuery } from '~/generated/graphql'; export type OwnProps = { diff --git a/front/src/modules/people/constants/peopleViewFields.tsx b/front/src/modules/people/constants/peopleViewFields.tsx index 0463624ee..61bf948e2 100644 --- a/front/src/modules/people/constants/peopleViewFields.tsx +++ b/front/src/modules/people/constants/peopleViewFields.tsx @@ -8,7 +8,7 @@ import { IconPhone, IconUser, } from '@/ui/icon/index'; -import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect'; +import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; import { ViewFieldDateMetadata, ViewFieldDefinition, diff --git a/front/src/modules/people/editable-field/components/PeopleCompanyEditableField.tsx b/front/src/modules/people/editable-field/components/PeopleCompanyEditableField.tsx index 6c3cf08ae..70d3eb257 100644 --- a/front/src/modules/people/editable-field/components/PeopleCompanyEditableField.tsx +++ b/front/src/modules/people/editable-field/components/PeopleCompanyEditableField.tsx @@ -3,8 +3,8 @@ import { IconBuildingSkyscraper } from '@tabler/icons-react'; import { CompanyChip } from '@/companies/components/CompanyChip'; import { EditableField } from '@/ui/editable-field/components/EditableField'; import { FieldContext } from '@/ui/editable-field/states/FieldContext'; -import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope'; -import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope'; +import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { Company, Person } from '~/generated/graphql'; import { getLogoUrlFromDomainName } from '~/utils'; diff --git a/front/src/modules/people/editable-field/components/PeopleCompanyEditableFieldEditMode.tsx b/front/src/modules/people/editable-field/components/PeopleCompanyEditableFieldEditMode.tsx index a07a49e12..01f790a4c 100644 --- a/front/src/modules/people/editable-field/components/PeopleCompanyEditableFieldEditMode.tsx +++ b/front/src/modules/people/editable-field/components/PeopleCompanyEditableFieldEditMode.tsx @@ -2,10 +2,10 @@ import styled from '@emotion/styled'; import { useFilteredSearchCompanyQuery } from '@/companies/queries'; import { useEditableField } from '@/ui/editable-field/hooks/useEditableField'; -import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState'; -import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect'; -import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState'; -import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect'; +import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect'; +import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState'; +import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect'; +import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { Company, Person, diff --git a/front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx b/front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx index 8852e7711..03292a566 100644 --- a/front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx +++ b/front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx @@ -1,11 +1,10 @@ import { useState } from 'react'; import { FieldContext } from '@/ui/editable-field/states/FieldContext'; -import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope'; +import { DoubleTextInputEdit } from '@/ui/input/double-text/components/DoubleTextInputEdit'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { Person, useUpdateOnePersonMutation } from '~/generated/graphql'; -import { InplaceInputDoubleText } from '../../../ui/inplace-input/components/InplaceInputDoubleText'; - type OwnProps = { people: Pick; }; @@ -48,7 +47,7 @@ export function PeopleFullNameEditableField({ people }: OwnProps) { return ( - - updatePerson({ - variables: { - where: { - id: currentRowEntityId, - }, - data: { - city: newText, - }, - }, - }) - } - /> - ); -} diff --git a/front/src/modules/people/table/components/EditablePeopleCompanyCell.tsx b/front/src/modules/people/table/components/EditablePeopleCompanyCell.tsx deleted file mode 100644 index c35d4b380..000000000 --- a/front/src/modules/people/table/components/EditablePeopleCompanyCell.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { useRecoilValue } from 'recoil'; - -import { PeopleCompanyCell } from '@/people/components/PeopleCompanyCell'; -import { peopleCompanyFamilyState } from '@/people/states/peopleCompanyFamilyState'; -import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; - -export function EditablePeopleCompanyCell() { - const currentRowEntityId = useCurrentRowEntityId(); - - const company = useRecoilValue( - peopleCompanyFamilyState(currentRowEntityId ?? ''), - ); - - return ( - - ); -} diff --git a/front/src/modules/people/table/components/EditablePeopleCreatedAtCell.tsx b/front/src/modules/people/table/components/EditablePeopleCreatedAtCell.tsx deleted file mode 100644 index f7b5fe6f8..000000000 --- a/front/src/modules/people/table/components/EditablePeopleCreatedAtCell.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { DateTime } from 'luxon'; -import { useRecoilValue } from 'recoil'; - -import { peopleCreatedAtFamilyState } from '@/people/states/peopleCreatedAtFamilyState'; -import { EditableCellDate } from '@/ui/table/editable-cell/types/EditableCellDate'; -import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; -import { useUpdateOnePersonMutation } from '~/generated/graphql'; - -export function EditablePeopleCreatedAtCell() { - const currentRowEntityId = useCurrentRowEntityId(); - - const createdAt = useRecoilValue( - peopleCreatedAtFamilyState(currentRowEntityId ?? ''), - ); - - const [updatePerson] = useUpdateOnePersonMutation(); - - return ( - { - if (!currentRowEntityId) return; - - await updatePerson({ - variables: { - where: { - id: currentRowEntityId, - }, - data: { - createdAt: newDate.toISOString(), - }, - }, - }); - }} - value={createdAt ? DateTime.fromISO(createdAt).toJSDate() : new Date()} - /> - ); -} diff --git a/front/src/modules/people/table/components/EditablePeopleEmailCell.tsx b/front/src/modules/people/table/components/EditablePeopleEmailCell.tsx deleted file mode 100644 index 16634fe34..000000000 --- a/front/src/modules/people/table/components/EditablePeopleEmailCell.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { useRecoilValue } from 'recoil'; - -import { peopleEmailFamilyState } from '@/people/states/peopleEmailFamilyState'; -import { EditableCellText } from '@/ui/table/editable-cell/types/EditableCellText'; -import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; -import { useUpdateOnePersonMutation } from '~/generated/graphql'; - -export function EditablePeopleEmailCell() { - const currentRowEntityId = useCurrentRowEntityId(); - - const [updatePerson] = useUpdateOnePersonMutation(); - - const email = useRecoilValue( - peopleEmailFamilyState(currentRowEntityId ?? ''), - ); - - return ( - - updatePerson({ - variables: { - where: { - id: currentRowEntityId, - }, - data: { - email: newEmail, - }, - }, - }) - } - /> - ); -} diff --git a/front/src/modules/people/table/components/EditablePeopleFullNameCell.tsx b/front/src/modules/people/table/components/EditablePeopleFullNameCell.tsx deleted file mode 100644 index e70812a68..000000000 --- a/front/src/modules/people/table/components/EditablePeopleFullNameCell.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { getOperationName } from '@apollo/client/utilities'; -import { useRecoilValue } from 'recoil'; - -import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullName'; -import { peopleNameCellFamilyState } from '@/people/states/peopleNamesFamilyState'; -import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; -import { useUpdateOnePersonMutation } from '~/generated/graphql'; - -import { GET_PERSON } from '../../queries'; - -export function EditablePeopleFullNameCell() { - const currentRowEntityId = useCurrentRowEntityId(); - - const [updatePerson] = useUpdateOnePersonMutation(); - - const { commentCount, firstName, lastName, displayName, avatarUrl } = - useRecoilValue(peopleNameCellFamilyState(currentRowEntityId ?? '')); - - return ( - - updatePerson({ - variables: { - where: { - id: currentRowEntityId, - }, - data: { - firstName: newFirstValue, - lastName: newSecondValue, - }, - }, - refetchQueries: [getOperationName(GET_PERSON) ?? ''], - }) - } - /> - ); -} diff --git a/front/src/modules/people/table/components/EditablePeopleJobTitleCell.tsx b/front/src/modules/people/table/components/EditablePeopleJobTitleCell.tsx deleted file mode 100644 index 61e29a493..000000000 --- a/front/src/modules/people/table/components/EditablePeopleJobTitleCell.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { useRecoilValue } from 'recoil'; - -import { peopleJobTitleFamilyState } from '@/people/states/peopleJobTitleFamilyState'; -import { EditableCellText } from '@/ui/table/editable-cell/types/EditableCellText'; -import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; -import { useUpdateOnePersonMutation } from '~/generated/graphql'; - -export function EditablePeopleJobTitleCell() { - const currentRowEntityId = useCurrentRowEntityId(); - - const [updatePerson] = useUpdateOnePersonMutation(); - - const jobTitle = useRecoilValue( - peopleJobTitleFamilyState(currentRowEntityId ?? ''), - ); - - return ( - - updatePerson({ - variables: { - where: { - id: currentRowEntityId, - }, - data: { - jobTitle: newText, - }, - }, - }) - } - /> - ); -} diff --git a/front/src/modules/people/table/components/EditablePeopleLinkedinUrlCell.tsx b/front/src/modules/people/table/components/EditablePeopleLinkedinUrlCell.tsx deleted file mode 100644 index 1842da2b6..000000000 --- a/front/src/modules/people/table/components/EditablePeopleLinkedinUrlCell.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useRecoilValue } from 'recoil'; - -import { peopleLinkedinUrlFamilyState } from '@/people/states/peopleLinkedinUrlFamilyState'; -import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; -import { useUpdateOnePersonMutation } from '~/generated/graphql'; - -import { EditableCellURL } from '../../../ui/table/editable-cell/types/EditableCellURL'; - -export function EditablePeopleLinkedinUrlCell() { - const currentRowEntityId = useCurrentRowEntityId(); - - const [updatePerson] = useUpdateOnePersonMutation(); - - const linkedinUrl = useRecoilValue( - peopleLinkedinUrlFamilyState(currentRowEntityId ?? ''), - ); - - return ( - - updatePerson({ - variables: { - where: { - id: currentRowEntityId, - }, - data: { - linkedinUrl: newURL, - }, - }, - }) - } - /> - ); -} diff --git a/front/src/modules/people/table/components/EditablePeoplePhoneCell.tsx b/front/src/modules/people/table/components/EditablePeoplePhoneCell.tsx deleted file mode 100644 index 92263ddb1..000000000 --- a/front/src/modules/people/table/components/EditablePeoplePhoneCell.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { useRecoilValue } from 'recoil'; - -import { peoplePhoneFamilyState } from '@/people/states/peoplePhoneFamilyState'; -import { EditableCellPhone } from '@/ui/table/editable-cell/types/EditableCellPhone'; -import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; -import { useUpdateOnePersonMutation } from '~/generated/graphql'; - -export function EditablePeoplePhoneCell() { - const currentRowEntityId = useCurrentRowEntityId(); - - const [updatePerson] = useUpdateOnePersonMutation(); - - const phone = useRecoilValue( - peoplePhoneFamilyState(currentRowEntityId ?? ''), - ); - - return ( - - updatePerson({ - variables: { - where: { - id: currentRowEntityId, - }, - data: { - phone: newPhone, - }, - }, - }) - } - /> - ); -} diff --git a/front/src/modules/people/table/components/PeopleTable.tsx b/front/src/modules/people/table/components/PeopleTable.tsx index da072cf85..5b0cfca63 100644 --- a/front/src/modules/people/table/components/PeopleTable.tsx +++ b/front/src/modules/people/table/components/PeopleTable.tsx @@ -1,17 +1,22 @@ import { useCallback, useMemo, useState } from 'react'; import { defaultOrderBy } from '@/companies/queries'; -import { PeopleEntityTableData } from '@/people/components/PeopleEntityTableData'; +import { peopleViewFields } from '@/people/constants/peopleViewFields'; import { PeopleSelectedSortType } from '@/people/queries'; -import { peopleColumns } from '@/people/table/components/peopleColumns'; import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers'; import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState'; import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause'; import { IconList } from '@/ui/icon'; -import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue'; import { EntityTable } from '@/ui/table/components/EntityTable'; +import { GenericEntityTableData } from '@/ui/table/components/GenericEntityTableData'; import { TableContext } from '@/ui/table/states/TableContext'; -import { PersonOrderByWithRelationInput } from '~/generated/graphql'; +import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; +import { + PersonOrderByWithRelationInput, + useGetPeopleQuery, + useUpdateOnePersonMutation, +} from '~/generated/graphql'; +import { peopleFilters } from '~/pages/people/people-filters'; import { availableSorts } from '~/pages/people/people-sorts'; export function PeopleTable() { @@ -30,13 +35,20 @@ export function PeopleTable() { return ( <> - + } availableSorts={availableSorts} onSortsUpdate={updateSorts} + useUpdateEntityMutation={useUpdateOnePersonMutation} /> ); diff --git a/front/src/modules/people/table/components/PeopleTableV2.tsx b/front/src/modules/people/table/components/PeopleTableV2.tsx deleted file mode 100644 index a2edb3599..000000000 --- a/front/src/modules/people/table/components/PeopleTableV2.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { useCallback, useMemo, useState } from 'react'; - -import { defaultOrderBy } from '@/companies/queries'; -import { peopleViewFields } from '@/people/constants/peopleViewFields'; -import { PeopleSelectedSortType } from '@/people/queries'; -import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers'; -import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState'; -import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause'; -import { IconList } from '@/ui/icon'; -import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue'; -import { EntityTable } from '@/ui/table/components/EntityTableV2'; -import { GenericEntityTableData } from '@/ui/table/components/GenericEntityTableData'; -import { TableContext } from '@/ui/table/states/TableContext'; -import { - PersonOrderByWithRelationInput, - useGetPeopleQuery, - useUpdateOnePersonMutation, -} from '~/generated/graphql'; -import { peopleFilters } from '~/pages/people/people-filters'; -import { availableSorts } from '~/pages/people/people-sorts'; - -export function PeopleTable() { - const [orderBy, setOrderBy] = - useState(defaultOrderBy); - - const updateSorts = useCallback((sorts: Array) => { - setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy); - }, []); - - const filters = useRecoilScopedValue(filtersScopedState, TableContext); - - const whereFilters = useMemo(() => { - return { AND: filters.map(turnFilterIntoWhereClause) }; - }, [filters]) as any; - - return ( - <> - - } - availableSorts={availableSorts} - onSortsUpdate={updateSorts} - useUpdateEntityMutation={useUpdateOnePersonMutation} - /> - - ); -} diff --git a/front/src/modules/people/table/components/peopleColumns.tsx b/front/src/modules/people/table/components/peopleColumns.tsx deleted file mode 100644 index 3aaec0dc0..000000000 --- a/front/src/modules/people/table/components/peopleColumns.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { - IconBrandLinkedin, - IconBriefcase, - IconBuildingSkyscraper, - IconCalendarEvent, - IconMail, - IconMap, - IconPhone, - IconUser, -} from '@/ui/icon/index'; - -import { EditablePeopleCityCell } from './EditablePeopleCityCell'; -import { EditablePeopleCompanyCell } from './EditablePeopleCompanyCell'; -import { EditablePeopleCreatedAtCell } from './EditablePeopleCreatedAtCell'; -import { EditablePeopleEmailCell } from './EditablePeopleEmailCell'; -import { EditablePeopleFullNameCell } from './EditablePeopleFullNameCell'; -import { EditablePeopleJobTitleCell } from './EditablePeopleJobTitleCell'; -import { EditablePeopleLinkedinUrlCell } from './EditablePeopleLinkedinUrlCell'; -import { EditablePeoplePhoneCell } from './EditablePeoplePhoneCell'; - -export type TableColumn = { - id: string; - title: string; - icon: JSX.Element; - size: number; - cellComponent: JSX.Element; -}; - -export const peopleColumns: TableColumn[] = [ - { - id: 'fullName', - title: 'People', - icon: , - size: 210, - cellComponent: , - }, - { - id: 'email', - title: 'Email', - icon: , - size: 150, - cellComponent: , - }, - { - id: 'company', - title: 'Company', - icon: , - size: 150, - cellComponent: , - }, - { - id: 'phone', - title: 'Phone', - icon: , - size: 150, - cellComponent: , - }, - { - id: 'createdAt', - title: 'Creation', - icon: , - size: 150, - cellComponent: , - }, - { - id: 'city', - title: 'City', - icon: , - size: 150, - cellComponent: , - }, - { - id: 'jobTitle', - title: 'Job title', - icon: , - size: 150, - cellComponent: , - }, - { - id: 'linkedinUrl', - title: 'Linkedin', - icon: , - size: 150, - cellComponent: , - }, -]; diff --git a/front/src/modules/pipeline/components/EntityBoard.tsx b/front/src/modules/pipeline/components/EntityBoard.tsx index cc00ed90a..3bb93e365 100644 --- a/front/src/modules/pipeline/components/EntityBoard.tsx +++ b/front/src/modules/pipeline/components/EntityBoard.tsx @@ -9,7 +9,7 @@ import { useRecoilState } from 'recoil'; import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext'; import { BoardHeader } from '@/ui/board/components/BoardHeader'; import { SelectedSortType } from '@/ui/filter-n-sort/types/interface'; -import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { PipelineProgress, PipelineProgressOrderByWithRelationInput, diff --git a/front/src/modules/pipeline/components/EntityBoardCard.tsx b/front/src/modules/pipeline/components/EntityBoardCard.tsx index 705956129..3a34d963f 100644 --- a/front/src/modules/pipeline/components/EntityBoardCard.tsx +++ b/front/src/modules/pipeline/components/EntityBoardCard.tsx @@ -1,7 +1,7 @@ import { useEffect } from 'react'; import { Draggable } from '@hello-pangea/dnd'; -import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState'; +import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { BoardCardContext } from '../states/BoardCardContext'; import { pipelineProgressIdScopedState } from '../states/pipelineProgressIdScopedState'; diff --git a/front/src/modules/pipeline/components/EntityBoardColumn.tsx b/front/src/modules/pipeline/components/EntityBoardColumn.tsx index 16d7fe1f6..f67a88d2d 100644 --- a/front/src/modules/pipeline/components/EntityBoardColumn.tsx +++ b/front/src/modules/pipeline/components/EntityBoardColumn.tsx @@ -6,8 +6,8 @@ import { useRecoilValue } from 'recoil'; import { BoardPipelineStageColumn } from '@/ui/board/components/Board'; import { BoardColumn } from '@/ui/board/components/BoardColumn'; -import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope'; -import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; +import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { useUpdatePipelineStageMutation } from '~/generated/graphql'; import { GET_PIPELINES } from '../queries'; diff --git a/front/src/modules/pipeline/components/PipelineProgressPointOfContactPicker.tsx b/front/src/modules/pipeline/components/PipelineProgressPointOfContactPicker.tsx index d30530450..75d6852b2 100644 --- a/front/src/modules/pipeline/components/PipelineProgressPointOfContactPicker.tsx +++ b/front/src/modules/pipeline/components/PipelineProgressPointOfContactPicker.tsx @@ -2,19 +2,19 @@ import { getOperationName } from '@apollo/client/utilities'; import { Key } from 'ts-key-enum'; import { useFilteredSearchPeopleQuery } from '@/people/queries'; -import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys'; -import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState'; -import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect'; -import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState'; -import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope'; +import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect'; +import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState'; +import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect'; +import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope'; import { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreateModeScopedState'; +import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; +import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { Person, PipelineProgress, useUpdateOnePipelineProgressMutation, } from '~/generated/graphql'; -import { EntityForSelect } from '../../ui/relation-picker/types/EntityForSelect'; import { GET_PIPELINE_PROGRESS, GET_PIPELINES } from '../queries'; export type OwnProps = { diff --git a/front/src/modules/pipeline/editable-field/components/PipelineProgressPointOfContactEditableField.tsx b/front/src/modules/pipeline/editable-field/components/PipelineProgressPointOfContactEditableField.tsx index 5cc7844fb..521ddb2d2 100644 --- a/front/src/modules/pipeline/editable-field/components/PipelineProgressPointOfContactEditableField.tsx +++ b/front/src/modules/pipeline/editable-field/components/PipelineProgressPointOfContactEditableField.tsx @@ -2,8 +2,8 @@ import { PersonChip } from '@/people/components/PersonChip'; import { EditableField } from '@/ui/editable-field/components/EditableField'; import { FieldContext } from '@/ui/editable-field/states/FieldContext'; import { IconUser } from '@/ui/icon'; -import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope'; -import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope'; +import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { Person, PipelineProgress } from '~/generated/graphql'; import { PipelineProgressPointOfContactPickerFieldEditMode } from './PipelineProgressPointOfContactPickerFieldEditMode'; diff --git a/front/src/modules/pipeline/editable-field/components/ProbabilityEditableField.tsx b/front/src/modules/pipeline/editable-field/components/ProbabilityEditableField.tsx index 1aebc3056..8c7f0fd48 100644 --- a/front/src/modules/pipeline/editable-field/components/ProbabilityEditableField.tsx +++ b/front/src/modules/pipeline/editable-field/components/ProbabilityEditableField.tsx @@ -1,6 +1,6 @@ import { EditableField } from '@/ui/editable-field/components/EditableField'; import { FieldContext } from '@/ui/editable-field/states/FieldContext'; -import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { ProbabilityFieldEditMode } from './ProbabilityFieldEditMode'; diff --git a/front/src/modules/pipeline/editable-field/components/ProbabilityFieldEditMode.tsx b/front/src/modules/pipeline/editable-field/components/ProbabilityFieldEditMode.tsx index 254f75159..93f5e2a8a 100644 --- a/front/src/modules/pipeline/editable-field/components/ProbabilityFieldEditMode.tsx +++ b/front/src/modules/pipeline/editable-field/components/ProbabilityFieldEditMode.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import styled from '@emotion/styled'; import { useEditableField } from '@/ui/editable-field/hooks/useEditableField'; -import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope'; +import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; const StyledContainer = styled.div` align-items: center; diff --git a/front/src/modules/pipeline/progress/components/PipelineProgressAmountEditableField.tsx b/front/src/modules/pipeline/progress/components/PipelineProgressAmountEditableField.tsx index 338b2807a..e67cebe31 100644 --- a/front/src/modules/pipeline/progress/components/PipelineProgressAmountEditableField.tsx +++ b/front/src/modules/pipeline/progress/components/PipelineProgressAmountEditableField.tsx @@ -3,8 +3,8 @@ import { useEffect, useState } from 'react'; import { EditableField } from '@/ui/editable-field/components/EditableField'; import { FieldContext } from '@/ui/editable-field/states/FieldContext'; import { IconCurrencyDollar } from '@/ui/icon'; -import { InplaceInputText } from '@/ui/inplace-input/components/InplaceInputText'; -import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope'; +import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { PipelineProgress, useUpdateOnePipelineProgressMutation, @@ -63,7 +63,7 @@ export function PipelineProgressAmountEditableField({ progress }: OwnProps) { onCancel={handleCancel} iconLabel={} editModeContent={ - } - nonEditModeContent={} + nonEditModeContent={} > ); } diff --git a/front/src/modules/ui/board/card-field/components/BoardCardEditableFieldDateEditMode.tsx b/front/src/modules/ui/board/card-field/components/BoardCardEditableFieldDateEditMode.tsx index b2ccbb540..bb08f7904 100644 --- a/front/src/modules/ui/board/card-field/components/BoardCardEditableFieldDateEditMode.tsx +++ b/front/src/modules/ui/board/card-field/components/BoardCardEditableFieldDateEditMode.tsx @@ -1,4 +1,4 @@ -import { InplaceInputDate } from '@/ui/inplace-input/components/InplaceInputDate'; +import { DateInputEdit } from '@/ui/input/date/components/DateInputEdit'; type OwnProps = { value: Date; @@ -13,5 +13,5 @@ export function BoardCardEditableFieldDateEditMode({ onChange(newDate); } - return ; + return ; } diff --git a/front/src/modules/ui/board/card-field/components/BoardCardEditableFieldEditMode.tsx b/front/src/modules/ui/board/card-field/components/BoardCardEditableFieldEditMode.tsx index f8ab84dcd..1123af4de 100644 --- a/front/src/modules/ui/board/card-field/components/BoardCardEditableFieldEditMode.tsx +++ b/front/src/modules/ui/board/card-field/components/BoardCardEditableFieldEditMode.tsx @@ -1,9 +1,9 @@ import { ReactElement, useRef } from 'react'; import styled from '@emotion/styled'; -import { useListenClickOutside } from '@/ui/hooks/useListenClickOutside'; -import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys'; -import { overlayBackground } from '@/ui/themes/effects'; +import { overlayBackground } from '@/ui/theme/constants/effects'; +import { useListenClickOutside } from '@/ui/utilities/click-outside/hooks/useListenClickOutside'; +import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { BoardCardFieldHotkeyScope } from '../types/BoardCardFieldHotkeyScope'; diff --git a/front/src/modules/ui/board/card-field/components/BoardCardEditableFieldInternal.tsx b/front/src/modules/ui/board/card-field/components/BoardCardEditableFieldInternal.tsx index 8143ba92c..43fcb0ebc 100644 --- a/front/src/modules/ui/board/card-field/components/BoardCardEditableFieldInternal.tsx +++ b/front/src/modules/ui/board/card-field/components/BoardCardEditableFieldInternal.tsx @@ -1,8 +1,8 @@ import { ReactElement } from 'react'; import styled from '@emotion/styled'; -import { usePreviousHotkeyScope } from '@/ui/hotkey/hooks/usePreviousHotkeyScope'; -import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope'; +import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; +import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; import { useBoardCardField } from '../hooks/useBoardCardField'; import { BoardCardFieldHotkeyScope } from '../types/BoardCardFieldHotkeyScope'; diff --git a/front/src/modules/ui/board/card-field/components/BoardCardEditableFieldText.tsx b/front/src/modules/ui/board/card-field/components/BoardCardEditableFieldText.tsx index 5e95d31de..eb8d8caf9 100644 --- a/front/src/modules/ui/board/card-field/components/BoardCardEditableFieldText.tsx +++ b/front/src/modules/ui/board/card-field/components/BoardCardEditableFieldText.tsx @@ -1,7 +1,7 @@ import { ChangeEvent, useMemo, useState } from 'react'; -import { InplaceInputTextDisplayMode } from '@/ui/display/component/InplaceInputTextDisplayMode'; -import { StyledInput } from '@/ui/inplace-input/components/InplaceInputTextCellEditMode'; +import { TextInputDisplay } from '@/ui/input/text/components/TextInputDisplay'; +import { StyledInput } from '@/ui/table/editable-cell/type/components/TextCellEdit'; import { debounce } from '~/utils/debounce'; import { BoardCardEditableField } from './BoardCardEditableField'; @@ -40,9 +40,7 @@ export function BoardCardEditableFieldText({ }} /> } - nonEditModeContent={ - {value} - } + nonEditModeContent={{value}} > ); } diff --git a/front/src/modules/ui/board/card-field/hooks/useBoardCardField.ts b/front/src/modules/ui/board/card-field/hooks/useBoardCardField.ts index c9ff939db..0545e4909 100644 --- a/front/src/modules/ui/board/card-field/hooks/useBoardCardField.ts +++ b/front/src/modules/ui/board/card-field/hooks/useBoardCardField.ts @@ -1,4 +1,4 @@ -import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState'; +import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { BoardCardFieldContext } from '../states/BoardCardFieldContext'; import { isBoardCardFieldInEditModeScopedState } from '../states/isBoardCardFieldInEditModeScopedState'; diff --git a/front/src/modules/ui/board/components/BoardColumn.tsx b/front/src/modules/ui/board/components/BoardColumn.tsx index 2a9889117..7e0eb1bc9 100644 --- a/front/src/modules/ui/board/components/BoardColumn.tsx +++ b/front/src/modules/ui/board/components/BoardColumn.tsx @@ -2,9 +2,9 @@ import React from 'react'; import styled from '@emotion/styled'; import { Key } from 'ts-key-enum'; -import { usePreviousHotkeyScope } from '@/ui/hotkey/hooks/usePreviousHotkeyScope'; -import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys'; import { Tag } from '@/ui/tag/components/Tag'; +import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; +import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { BoardColumnHotkeyScope } from '../types/BoardColumnHotkeyScope'; diff --git a/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx b/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx index fb19966b8..c6a287fce 100644 --- a/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx +++ b/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx @@ -4,7 +4,7 @@ import styled from '@emotion/styled'; import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem'; import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator'; -import { textInputStyle } from '@/ui/themes/effects'; +import { textInputStyle } from '@/ui/theme/constants/effects'; import { debounce } from '~/utils/debounce'; export const StyledEditTitleContainer = styled.div` diff --git a/front/src/modules/ui/board/components/BoardColumnMenu.tsx b/front/src/modules/ui/board/components/BoardColumnMenu.tsx index 8fb9a1a4e..345cc5271 100644 --- a/front/src/modules/ui/board/components/BoardColumnMenu.tsx +++ b/front/src/modules/ui/board/components/BoardColumnMenu.tsx @@ -2,12 +2,12 @@ import { useRef, useState } from 'react'; import styled from '@emotion/styled'; import { IconPencil } from '@tabler/icons-react'; -import { icon } from '@/ui//themes/icon'; import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem'; import DropdownButton from '@/ui/filter-n-sort/components/DropdownButton'; -import { useListenClickOutside } from '@/ui/hooks/useListenClickOutside'; +import { icon } from '@/ui/theme/constants/icon'; +import { useListenClickOutside } from '@/ui/utilities/click-outside/hooks/useListenClickOutside'; import { BoardColumnEditTitleMenu } from './BoardColumnEditTitleMenu'; diff --git a/front/src/modules/ui/button/components/Button.tsx b/front/src/modules/ui/button/components/Button.tsx index ebd751a96..b55ac2cc3 100644 --- a/front/src/modules/ui/button/components/Button.tsx +++ b/front/src/modules/ui/button/components/Button.tsx @@ -2,7 +2,7 @@ import React from 'react'; import styled from '@emotion/styled'; import { SoonPill } from '@/ui/pill/components/SoonPill'; -import { rgba } from '@/ui/themes/colors'; +import { rgba } from '@/ui/theme/constants/colors'; export enum ButtonSize { Medium = 'medium', diff --git a/front/src/modules/ui/color-scheme/components/ColorSchemeCard.tsx b/front/src/modules/ui/color-scheme/components/ColorSchemeCard.tsx index 76174d186..b4a6016e1 100644 --- a/front/src/modules/ui/color-scheme/components/ColorSchemeCard.tsx +++ b/front/src/modules/ui/color-scheme/components/ColorSchemeCard.tsx @@ -8,9 +8,9 @@ import { } from 'framer-motion'; import { Checkmark } from '@/ui/checkmark/components/Checkmark'; -import DarkNoise from '@/ui/themes/assets/dark-noise.jpg'; -import LightNoise from '@/ui/themes/assets/light-noise.png'; -import { grayScale } from '@/ui/themes/colors'; +import DarkNoise from '@/ui/theme/assets/dark-noise.jpg'; +import LightNoise from '@/ui/theme/assets/light-noise.png'; +import { grayScale } from '@/ui/theme/constants/colors'; import { ColorScheme } from '~/generated/graphql'; const StyledColorSchemeBackground = styled.div< diff --git a/front/src/modules/ui/dropdown/components/DropdownMenuCheckableItem.tsx b/front/src/modules/ui/dropdown/components/DropdownMenuCheckableItem.tsx index 3c9af27b9..4b498511f 100644 --- a/front/src/modules/ui/dropdown/components/DropdownMenuCheckableItem.tsx +++ b/front/src/modules/ui/dropdown/components/DropdownMenuCheckableItem.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from '@emotion/styled'; -import { Checkbox } from '@/ui/input/components/Checkbox'; +import { Checkbox } from '@/ui/input/checkbox/components/Checkbox'; import { DropdownMenuItem } from './DropdownMenuItem'; diff --git a/front/src/modules/ui/dropdown/components/DropdownMenuItem.tsx b/front/src/modules/ui/dropdown/components/DropdownMenuItem.tsx index f625513ef..0f9ca0807 100644 --- a/front/src/modules/ui/dropdown/components/DropdownMenuItem.tsx +++ b/front/src/modules/ui/dropdown/components/DropdownMenuItem.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -import { hoverBackground } from '@/ui/themes/effects'; +import { hoverBackground } from '@/ui/theme/constants/effects'; export const DropdownMenuItem = styled.li` --horizontal-padding: ${({ theme }) => theme.spacing(1)}; diff --git a/front/src/modules/ui/dropdown/components/DropdownMenuSearch.tsx b/front/src/modules/ui/dropdown/components/DropdownMenuSearch.tsx index 19839be62..d0419aa7d 100644 --- a/front/src/modules/ui/dropdown/components/DropdownMenuSearch.tsx +++ b/front/src/modules/ui/dropdown/components/DropdownMenuSearch.tsx @@ -1,7 +1,7 @@ import { InputHTMLAttributes } from 'react'; import styled from '@emotion/styled'; -import { textInputStyle } from '@/ui/themes/effects'; +import { textInputStyle } from '@/ui/theme/constants/effects'; export const DropdownMenuSearchContainer = styled.div` --vertical-padding: ${({ theme }) => theme.spacing(1)}; diff --git a/front/src/modules/ui/dropdown/components/DropdownMenuSelectableItem.tsx b/front/src/modules/ui/dropdown/components/DropdownMenuSelectableItem.tsx index db0123454..9469a5dfe 100644 --- a/front/src/modules/ui/dropdown/components/DropdownMenuSelectableItem.tsx +++ b/front/src/modules/ui/dropdown/components/DropdownMenuSelectableItem.tsx @@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { IconCheck } from '@/ui/icon/index'; -import { hoverBackground } from '@/ui/themes/effects'; +import { hoverBackground } from '@/ui/theme/constants/effects'; import { DropdownMenuItem } from './DropdownMenuItem'; diff --git a/front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx b/front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx index 76f720763..9f0b4cca9 100644 --- a/front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx +++ b/front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx @@ -3,10 +3,10 @@ import styled from '@emotion/styled'; import type { Meta, StoryObj } from '@storybook/react'; import { IconPlus } from '@/ui/icon/index'; +import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem'; import { Avatar } from '@/users/components/Avatar'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; -import { DropdownMenuSkeletonItem } from '../../../relation-picker/components/skeletons/DropdownMenuSkeletonItem'; import { DropdownMenu } from '../DropdownMenu'; import { DropdownMenuCheckableItem } from '../DropdownMenuCheckableItem'; import { DropdownMenuItem } from '../DropdownMenuItem'; diff --git a/front/src/modules/ui/editable-field/components/EditableField.tsx b/front/src/modules/ui/editable-field/components/EditableField.tsx index 6d896646c..e7e4bc4b6 100644 --- a/front/src/modules/ui/editable-field/components/EditableField.tsx +++ b/front/src/modules/ui/editable-field/components/EditableField.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import styled from '@emotion/styled'; import { motion } from 'framer-motion'; -import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope'; +import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; import { useBindFieldHotkeyScope } from '../hooks/useBindFieldHotkeyScope'; import { useEditableField } from '../hooks/useEditableField'; diff --git a/front/src/modules/ui/editable-field/components/EditableFieldEditButton.tsx b/front/src/modules/ui/editable-field/components/EditableFieldEditButton.tsx index 4ab49aa61..e66dc3d25 100644 --- a/front/src/modules/ui/editable-field/components/EditableFieldEditButton.tsx +++ b/front/src/modules/ui/editable-field/components/EditableFieldEditButton.tsx @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; import { IconButton } from '@/ui/button/components/IconButton'; import { IconPencil } from '@/ui/icon'; -import { overlayBackground } from '@/ui/themes/effects'; +import { overlayBackground } from '@/ui/theme/constants/effects'; import { useEditableField } from '../hooks/useEditableField'; diff --git a/front/src/modules/ui/editable-field/components/EditableFieldEntityText.tsx b/front/src/modules/ui/editable-field/components/EditableFieldEntityText.tsx index e8b3b1c26..13b20c2f8 100644 --- a/front/src/modules/ui/editable-field/components/EditableFieldEntityText.tsx +++ b/front/src/modules/ui/editable-field/components/EditableFieldEntityText.tsx @@ -3,8 +3,8 @@ import { useEffect, useState } from 'react'; import { EditableField } from '@/ui/editable-field/components/EditableField'; import { FieldContext } from '@/ui/editable-field/states/FieldContext'; import { IconMap } from '@/ui/icon'; -import { InplaceInputText } from '@/ui/inplace-input/components/InplaceInputText'; -import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope'; +import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql'; type OwnProps = { @@ -48,7 +48,7 @@ export function CompanyEditableFieldAddress({ company }: OwnProps) { onCancel={handleCancel} iconLabel={} editModeContent={ - } - displayModeContent={ - - } + displayModeContent={} isDisplayModeContentEmpty={!internalValue} /> diff --git a/front/src/modules/ui/editable-field/variants/components/EditableFieldEditModeDate.tsx b/front/src/modules/ui/editable-field/variants/components/EditableFieldEditModeDate.tsx index 28878d1dd..0333c1e79 100644 --- a/front/src/modules/ui/editable-field/variants/components/EditableFieldEditModeDate.tsx +++ b/front/src/modules/ui/editable-field/variants/components/EditableFieldEditModeDate.tsx @@ -1,5 +1,5 @@ -import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope'; -import { InplaceInputDate } from '@/ui/inplace-input/components/InplaceInputDate'; +import { DateInputEdit } from '@/ui/input/date/components/DateInputEdit'; +import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; import { parseDate } from '~/utils/date-utils'; import { useEditableField } from '../../hooks/useEditableField'; @@ -19,7 +19,7 @@ export function EditableFieldEditModeDate({ value, onChange }: OwnProps) { } return ( - { handleChange(newDate.toISOString()); diff --git a/front/src/modules/ui/editable-field/variants/components/NumberEditableField.tsx b/front/src/modules/ui/editable-field/variants/components/NumberEditableField.tsx index f2944230c..1e51228c8 100644 --- a/front/src/modules/ui/editable-field/variants/components/NumberEditableField.tsx +++ b/front/src/modules/ui/editable-field/variants/components/NumberEditableField.tsx @@ -2,8 +2,8 @@ import { useEffect, useState } from 'react'; import { EditableField } from '@/ui/editable-field/components/EditableField'; import { FieldContext } from '@/ui/editable-field/states/FieldContext'; -import { InplaceInputText } from '@/ui/inplace-input/components/InplaceInputText'; -import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope'; +import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { canBeCastAsIntegerOrNull, castAsIntegerOrNull, @@ -56,7 +56,7 @@ export function NumberEditableField({ onCancel={handleCancel} iconLabel={icon} editModeContent={ - } - displayModeContent={ - - } + displayModeContent={} isDisplayModeContentEmpty={!(internalValue !== '')} useEditButton /> diff --git a/front/src/modules/ui/editable-field/variants/components/TextEditableField.tsx b/front/src/modules/ui/editable-field/variants/components/TextEditableField.tsx index 1c5a8014a..7bc3f2ecb 100644 --- a/front/src/modules/ui/editable-field/variants/components/TextEditableField.tsx +++ b/front/src/modules/ui/editable-field/variants/components/TextEditableField.tsx @@ -2,8 +2,8 @@ import { useEffect, useState } from 'react'; import { EditableField } from '@/ui/editable-field/components/EditableField'; import { FieldContext } from '@/ui/editable-field/states/FieldContext'; -import { InplaceInputText } from '@/ui/inplace-input/components/InplaceInputText'; -import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope'; +import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { OverflowingTextWithTooltip } from '../../../tooltip/OverflowingTextWithTooltip'; @@ -47,7 +47,7 @@ export function TextEditableField({ onCancel={handleCancel} iconLabel={icon} editModeContent={ - void; -}; - -export function InplaceInputDoubleTextCellEditMode({ - firstValue, - secondValue, - firstValuePlaceholder, - secondValuePlaceholder, - onSubmit, -}: OwnProps) { - const [internalFirstValue, setInternalFirstValue] = useState(firstValue); - const [internalSecondValue, setInternalSecondValue] = useState(secondValue); - - const wrapperRef = useRef(null); - - function handleSubmit() { - onSubmit(internalFirstValue, internalSecondValue); - } - - function handleCancel() { - setInternalFirstValue(firstValue); - setInternalSecondValue(secondValue); - } - - function handleFirstValueChange(event: ChangeEvent) { - setInternalFirstValue(event.target.value); - } - - function handleSecondValueChange(event: ChangeEvent) { - setInternalSecondValue(event.target.value); - } - - useEffect(() => { - setInternalFirstValue(firstValue); - }, [firstValue]); - - useEffect(() => { - setInternalSecondValue(secondValue); - }, [secondValue]); - - useRegisterCloseCellHandlers(wrapperRef, handleSubmit, handleCancel); - - return ( - - - - - ); -} diff --git a/front/src/modules/ui/input/components/AutosizeTextInput.tsx b/front/src/modules/ui/input/autosize-text/components/AutosizeTextInput.tsx similarity index 100% rename from front/src/modules/ui/input/components/AutosizeTextInput.tsx rename to front/src/modules/ui/input/autosize-text/components/AutosizeTextInput.tsx diff --git a/front/src/modules/ui/input/components/__stories__/AutosizeTextInput.stories.tsx b/front/src/modules/ui/input/autosize-text/components/__stories__/AutosizeTextInput.stories.tsx similarity index 100% rename from front/src/modules/ui/input/components/__stories__/AutosizeTextInput.stories.tsx rename to front/src/modules/ui/input/autosize-text/components/__stories__/AutosizeTextInput.stories.tsx diff --git a/front/src/modules/ui/input/components/Checkbox.tsx b/front/src/modules/ui/input/checkbox/components/Checkbox.tsx similarity index 100% rename from front/src/modules/ui/input/components/Checkbox.tsx rename to front/src/modules/ui/input/checkbox/components/Checkbox.tsx diff --git a/front/src/modules/ui/input/components/__stories__/Checkbox.stories.tsx b/front/src/modules/ui/input/checkbox/components/__stories__/Checkbox.stories.tsx similarity index 100% rename from front/src/modules/ui/input/components/__stories__/Checkbox.stories.tsx rename to front/src/modules/ui/input/checkbox/components/__stories__/Checkbox.stories.tsx diff --git a/front/src/modules/ui/display/component/InplaceInputDateDisplayMode.tsx b/front/src/modules/ui/input/date/components/DateInputDisplay.tsx similarity index 72% rename from front/src/modules/ui/display/component/InplaceInputDateDisplayMode.tsx rename to front/src/modules/ui/input/date/components/DateInputDisplay.tsx index be67cd640..0f200a439 100644 --- a/front/src/modules/ui/display/component/InplaceInputDateDisplayMode.tsx +++ b/front/src/modules/ui/input/date/components/DateInputDisplay.tsx @@ -4,6 +4,6 @@ type OwnProps = { value: Date | string | null; }; -export function InplaceInputDateDisplayMode({ value }: OwnProps) { +export function DateInputDisplay({ value }: OwnProps) { return
{value && formatToHumanReadableDate(value)}
; } diff --git a/front/src/modules/ui/inplace-input/components/InplaceInputDate.tsx b/front/src/modules/ui/input/date/components/DateInputEdit.tsx similarity index 75% rename from front/src/modules/ui/inplace-input/components/InplaceInputDate.tsx rename to front/src/modules/ui/input/date/components/DateInputEdit.tsx index 01b7aeed0..373b882d9 100644 --- a/front/src/modules/ui/inplace-input/components/InplaceInputDate.tsx +++ b/front/src/modules/ui/input/date/components/DateInputEdit.tsx @@ -1,10 +1,9 @@ import { forwardRef } from 'react'; import styled from '@emotion/styled'; -import DatePicker from '@/ui/input/components/DatePicker'; import { formatToHumanReadableDate } from '~/utils'; -import { InplaceInputContainer } from './InplaceInputContainer'; +import DatePicker from './DatePicker'; export type StyledCalendarContainerProps = { editModeHorizontalAlign?: 'left' | 'right'; @@ -52,15 +51,13 @@ type OwnProps = { onChange: (newDate: Date) => void; }; -export function InplaceInputDate({ onChange, value }: OwnProps) { +export function DateInputEdit({ onChange, value }: OwnProps) { return ( - - } - customCalendarContainer={DatePickerContainer} - /> - + } + customCalendarContainer={DatePickerContainer} + /> ); } diff --git a/front/src/modules/ui/input/components/DatePicker.tsx b/front/src/modules/ui/input/date/components/DatePicker.tsx similarity index 98% rename from front/src/modules/ui/input/components/DatePicker.tsx rename to front/src/modules/ui/input/date/components/DatePicker.tsx index 5cc9c9b4c..f828c0478 100644 --- a/front/src/modules/ui/input/components/DatePicker.tsx +++ b/front/src/modules/ui/input/date/components/DatePicker.tsx @@ -2,7 +2,7 @@ import React, { forwardRef, ReactElement, useState } from 'react'; import ReactDatePicker, { CalendarContainerProps } from 'react-datepicker'; import styled from '@emotion/styled'; -import { overlayBackground } from '@/ui/themes/effects'; +import { overlayBackground } from '@/ui/theme/constants/effects'; import 'react-datepicker/dist/react-datepicker.css'; diff --git a/front/src/modules/ui/input/components/__stories__/DatePicker.stories.tsx b/front/src/modules/ui/input/date/components/__stories__/DatePicker.stories.tsx similarity index 100% rename from front/src/modules/ui/input/components/__stories__/DatePicker.stories.tsx rename to front/src/modules/ui/input/date/components/__stories__/DatePicker.stories.tsx diff --git a/front/src/modules/ui/inplace-input/components/InplaceInputDoubleText.tsx b/front/src/modules/ui/input/double-text/components/DoubleTextInputEdit.tsx similarity index 90% rename from front/src/modules/ui/inplace-input/components/InplaceInputDoubleText.tsx rename to front/src/modules/ui/input/double-text/components/DoubleTextInputEdit.tsx index 9447eac7a..a8faa4677 100644 --- a/front/src/modules/ui/inplace-input/components/InplaceInputDoubleText.tsx +++ b/front/src/modules/ui/input/double-text/components/DoubleTextInputEdit.tsx @@ -1,7 +1,7 @@ import { ChangeEvent } from 'react'; import styled from '@emotion/styled'; -import { StyledInput } from '@/ui/inplace-input/components/InplaceInputTextCellEditMode'; +import { StyledInput } from '@/ui/table/editable-cell/type/components/TextCellEdit'; type OwnProps = { firstValue: string; @@ -24,7 +24,7 @@ const StyledNameInput = styled(StyledInput)` width: auto; `; -export function InplaceInputDoubleText({ +export function DoubleTextInputEdit({ firstValue, secondValue, firstValuePlaceholder, diff --git a/front/src/modules/ui/input/components/ImageInput.tsx b/front/src/modules/ui/input/image/components/ImageInput.tsx similarity index 100% rename from front/src/modules/ui/input/components/ImageInput.tsx rename to front/src/modules/ui/input/image/components/ImageInput.tsx diff --git a/front/src/modules/ui/input/components/__stories__/ImageInput.stories.tsx b/front/src/modules/ui/input/image/components/__stories__/ImageInput.stories.tsx similarity index 100% rename from front/src/modules/ui/input/components/__stories__/ImageInput.stories.tsx rename to front/src/modules/ui/input/image/components/__stories__/ImageInput.stories.tsx diff --git a/front/src/modules/ui/display/component/InplaceInputPhoneDisplayMode.tsx b/front/src/modules/ui/input/phone/components/PhoneInputDisplay.tsx similarity index 91% rename from front/src/modules/ui/display/component/InplaceInputPhoneDisplayMode.tsx rename to front/src/modules/ui/input/phone/components/PhoneInputDisplay.tsx index 0ec12ed7d..8e2cd8e82 100644 --- a/front/src/modules/ui/display/component/InplaceInputPhoneDisplayMode.tsx +++ b/front/src/modules/ui/input/phone/components/PhoneInputDisplay.tsx @@ -18,7 +18,7 @@ type OwnProps = { value: string | null; }; -export function InplaceInputPhoneDisplayMode({ value }: OwnProps) { +export function PhoneInputDisplay({ value }: OwnProps) { return value && isValidPhoneNumber(value) ? ( theme.border.color.medium}; border-radius: ${({ theme }) => theme.border.radius.sm}; diff --git a/front/src/modules/ui/display/component/InplaceInputTextDisplayMode.tsx b/front/src/modules/ui/input/text/components/TextInputDisplay.tsx similarity index 69% rename from front/src/modules/ui/display/component/InplaceInputTextDisplayMode.tsx rename to front/src/modules/ui/input/text/components/TextInputDisplay.tsx index 0bf93f8d6..ddffea53f 100644 --- a/front/src/modules/ui/display/component/InplaceInputTextDisplayMode.tsx +++ b/front/src/modules/ui/input/text/components/TextInputDisplay.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -export const InplaceInputTextDisplayMode = styled.div` +export const TextInputDisplay = styled.div` overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/front/src/modules/ui/inplace-input/components/InplaceInputText.tsx b/front/src/modules/ui/input/text/components/TextInputEdit.tsx similarity index 72% rename from front/src/modules/ui/inplace-input/components/InplaceInputText.tsx rename to front/src/modules/ui/input/text/components/TextInputEdit.tsx index ac086b4ec..957f5dfd6 100644 --- a/front/src/modules/ui/inplace-input/components/InplaceInputText.tsx +++ b/front/src/modules/ui/input/text/components/TextInputEdit.tsx @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; -import { textInputStyle } from '@/ui/themes/effects'; +import { textInputStyle } from '@/ui/theme/constants/effects'; -import { InplaceInputContainer } from './InplaceInputContainer'; +import { TextInputContainer } from './TextInputContainer'; export const InplaceInputTextInput = styled.input` margin: 0; @@ -17,14 +17,14 @@ type OwnProps = { autoFocus?: boolean; }; -export function InplaceInputText({ +export function TextInputEdit({ placeholder, value, onChange, autoFocus, }: OwnProps) { return ( - + onChange?.(e.target.value)} /> - + ); } diff --git a/front/src/modules/ui/input/components/__stories__/TextInput.stories.tsx b/front/src/modules/ui/input/text/components/__stories__/TextInput.stories.tsx similarity index 100% rename from front/src/modules/ui/input/components/__stories__/TextInput.stories.tsx rename to front/src/modules/ui/input/text/components/__stories__/TextInput.stories.tsx diff --git a/front/src/modules/ui/input/types/InputHotkeyScope.ts b/front/src/modules/ui/input/text/types/InputHotkeyScope.ts similarity index 100% rename from front/src/modules/ui/input/types/InputHotkeyScope.ts rename to front/src/modules/ui/input/text/types/InputHotkeyScope.ts diff --git a/front/src/modules/ui/display/component/InplaceInputURLDisplayMode.tsx b/front/src/modules/ui/input/url/components/URLTextInputDisplay.tsx similarity index 100% rename from front/src/modules/ui/display/component/InplaceInputURLDisplayMode.tsx rename to front/src/modules/ui/input/url/components/URLTextInputDisplay.tsx diff --git a/front/src/modules/ui/layout/components/DefaultLayout.tsx b/front/src/modules/ui/layout/components/DefaultLayout.tsx index ee3f1ce6f..3446cbe3f 100644 --- a/front/src/modules/ui/layout/components/DefaultLayout.tsx +++ b/front/src/modules/ui/layout/components/DefaultLayout.tsx @@ -7,7 +7,7 @@ import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus'; import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus'; import { CommandMenu } from '@/command-menu/components/CommandMenu'; import { NavbarAnimatedContainer } from '@/ui/navbar/components/NavbarAnimatedContainer'; -import { MOBILE_VIEWPORT } from '@/ui/themes/themes'; +import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme'; import { AppNavbar } from '~/AppNavbar'; import { CompaniesMockMode } from '~/pages/companies/CompaniesMockMode'; diff --git a/front/src/modules/ui/layout/components/Panel.tsx b/front/src/modules/ui/layout/components/PagePanel.tsx similarity index 85% rename from front/src/modules/ui/layout/components/Panel.tsx rename to front/src/modules/ui/layout/components/PagePanel.tsx index e07145567..1fb1c2500 100644 --- a/front/src/modules/ui/layout/components/Panel.tsx +++ b/front/src/modules/ui/layout/components/PagePanel.tsx @@ -12,6 +12,6 @@ const StyledPanel = styled.div` width: 100%; `; -export function Panel({ children }: { children: React.ReactNode }) { +export function PagePanel({ children }: { children: React.ReactNode }) { return {children}; } diff --git a/front/src/modules/ui/layout/components/RightDrawerContainer.tsx b/front/src/modules/ui/layout/components/RightDrawerContainer.tsx index 2a161b8fe..14a0d2888 100644 --- a/front/src/modules/ui/layout/components/RightDrawerContainer.tsx +++ b/front/src/modules/ui/layout/components/RightDrawerContainer.tsx @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; import { RightDrawer } from '@/ui/right-drawer/components/RightDrawer'; -import { Panel } from './Panel'; +import { PagePanel } from './PagePanel'; type OwnProps = { children: JSX.Element | JSX.Element[]; @@ -37,7 +37,7 @@ export function RightDrawerContainer({ children, topMargin }: OwnProps) { return ( - {children} + {children} diff --git a/front/src/modules/ui/layout/components/ShowPageContainer.tsx b/front/src/modules/ui/layout/components/ShowPageContainer.tsx index 7128806d8..608dc80be 100644 --- a/front/src/modules/ui/layout/components/ShowPageContainer.tsx +++ b/front/src/modules/ui/layout/components/ShowPageContainer.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -import { useIsMobile } from '@/ui/hooks/useIsMobile'; +import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; export const ShowPageContainer = styled.div` display: flex; diff --git a/front/src/modules/ui/layout/components/SubMenuTopBarContainer.tsx b/front/src/modules/ui/layout/components/SubMenuTopBarContainer.tsx index 37ebfb2d5..ee4635b5c 100644 --- a/front/src/modules/ui/layout/components/SubMenuTopBarContainer.tsx +++ b/front/src/modules/ui/layout/components/SubMenuTopBarContainer.tsx @@ -1,7 +1,8 @@ import styled from '@emotion/styled'; -import { useIsMobile } from '../../hooks/useIsMobile'; -import { TopBar } from '../top-bar/components/TopBar'; +import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; + +import { PageBar } from '../page-bar/components/PageBar'; import { RightDrawerContainer } from './RightDrawerContainer'; @@ -23,7 +24,7 @@ export function SubMenuTopBarContainer({ children, title, icon }: OwnProps) { return ( - {isMobile && } + {isMobile && } {children} ); diff --git a/front/src/modules/ui/layout/components/WithTopBarContainer.tsx b/front/src/modules/ui/layout/components/WithTopBarContainer.tsx index 3f75eb58e..0f1e5b5ec 100644 --- a/front/src/modules/ui/layout/components/WithTopBarContainer.tsx +++ b/front/src/modules/ui/layout/components/WithTopBarContainer.tsx @@ -1,8 +1,8 @@ import { ReactNode } from 'react'; import styled from '@emotion/styled'; -import { TopBarHotkeys } from '../top-bar/components/TableTopBarHotkeys'; -import { TOP_BAR_MIN_HEIGHT, TopBar } from '../top-bar/components/TopBar'; +import { PAGE_BAR_MIN_HEIGHT, PageBar } from '../page-bar/components/PageBar'; +import { PageBarHotkeys } from '../page-bar/components/PageBarHotkeys'; import { RightDrawerContainer } from './RightDrawerContainer'; @@ -29,14 +29,14 @@ export function WithTopBarContainer({ }: OwnProps) { return ( - - + - + {children} diff --git a/front/src/modules/ui/layout/top-bar/components/TopBar.tsx b/front/src/modules/ui/layout/page-bar/components/PageBar.tsx similarity index 94% rename from front/src/modules/ui/layout/top-bar/components/TopBar.tsx rename to front/src/modules/ui/layout/page-bar/components/PageBar.tsx index c5210b4f4..94fd4f890 100644 --- a/front/src/modules/ui/layout/top-bar/components/TopBar.tsx +++ b/front/src/modules/ui/layout/page-bar/components/PageBar.tsx @@ -4,15 +4,15 @@ import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; import { IconButton } from '@/ui/button/components/IconButton'; -import { useIsMobile } from '@/ui/hooks/useIsMobile'; import { IconChevronLeft, IconPlus } from '@/ui/icon/index'; import NavCollapseButton from '@/ui/navbar/components/NavCollapseButton'; +import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { navbarIconSize } from '../../../navbar/constants'; import { OverflowingTextWithTooltip } from '../../../tooltip/OverflowingTextWithTooltip'; import { isNavbarOpenedState } from '../../states/isNavbarOpenedState'; -export const TOP_BAR_MIN_HEIGHT = 40; +export const PAGE_BAR_MIN_HEIGHT = 40; const TopBarContainer = styled.div` align-items: center; @@ -22,7 +22,7 @@ const TopBarContainer = styled.div` flex-direction: row; font-size: ${({ theme }) => theme.font.size.lg}; justify-content: space-between; - min-height: ${TOP_BAR_MIN_HEIGHT}px; + min-height: ${PAGE_BAR_MIN_HEIGHT}px; padding: ${({ theme }) => theme.spacing(2)}; padding-left: 0; padding-right: ${({ theme }) => theme.spacing(3)}; @@ -65,7 +65,7 @@ type OwnProps = { onAddButtonClick?: () => void; }; -export function TopBar({ +export function PageBar({ title, hasBackButton, icon, diff --git a/front/src/modules/ui/layout/top-bar/components/TableTopBarHotkeys.tsx b/front/src/modules/ui/layout/page-bar/components/PageBarHotkeys.tsx similarity index 63% rename from front/src/modules/ui/layout/top-bar/components/TableTopBarHotkeys.tsx rename to front/src/modules/ui/layout/page-bar/components/PageBarHotkeys.tsx index d0c3bb1f1..d5dc00302 100644 --- a/front/src/modules/ui/layout/top-bar/components/TableTopBarHotkeys.tsx +++ b/front/src/modules/ui/layout/page-bar/components/PageBarHotkeys.tsx @@ -1,11 +1,11 @@ -import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys'; import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope'; +import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; type OwnProps = { onAddButtonClick?: () => void; }; -export function TopBarHotkeys({ onAddButtonClick }: OwnProps) { +export function PageBarHotkeys({ onAddButtonClick }: OwnProps) { useScopedHotkeys('c', () => onAddButtonClick?.(), TableHotkeyScope.Table, [ onAddButtonClick, ]); diff --git a/front/src/modules/ui/layout/top-bar/components/TopTitle.tsx b/front/src/modules/ui/layout/page-bar/components/PageTitle.tsx similarity index 91% rename from front/src/modules/ui/layout/top-bar/components/TopTitle.tsx rename to front/src/modules/ui/layout/page-bar/components/PageTitle.tsx index 103c6970d..5a5589c9f 100644 --- a/front/src/modules/ui/layout/top-bar/components/TopTitle.tsx +++ b/front/src/modules/ui/layout/page-bar/components/PageTitle.tsx @@ -17,7 +17,7 @@ type OwnProps = { title: string; }; -export function TopTitle({ title }: OwnProps) { +export function PageTitle({ title }: OwnProps) { return ( {title} diff --git a/front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx b/front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx index f1838ba81..86313cd83 100644 --- a/front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx +++ b/front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -import { useIsMobile } from '@/ui/hooks/useIsMobile'; +import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; export const ShowPageLeftContainer = styled.div` background: ${({ theme }) => theme.background.secondary}; diff --git a/front/src/modules/ui/layout/states/isNavbarOpenedState.ts b/front/src/modules/ui/layout/states/isNavbarOpenedState.ts index 0c71d0ebb..9c3253770 100644 --- a/front/src/modules/ui/layout/states/isNavbarOpenedState.ts +++ b/front/src/modules/ui/layout/states/isNavbarOpenedState.ts @@ -1,6 +1,6 @@ import { atom } from 'recoil'; -import { MOBILE_VIEWPORT } from '@/ui/themes/themes'; +import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme'; const isMobile = window.innerWidth <= MOBILE_VIEWPORT; diff --git a/front/src/modules/ui/modal/components/Modal.tsx b/front/src/modules/ui/modal/components/Modal.tsx index 8b2b80daf..704d77468 100644 --- a/front/src/modules/ui/modal/components/Modal.tsx +++ b/front/src/modules/ui/modal/components/Modal.tsx @@ -5,7 +5,7 @@ import { motion } from 'framer-motion'; import { ClickOutsideMode, useListenClickOutside, -} from '@/ui/hooks/useListenClickOutside'; +} from '@/ui/utilities/click-outside/hooks/useListenClickOutside'; const StyledContainer = styled.div` align-items: center; diff --git a/front/src/modules/ui/navbar/components/NavCollapseButton.tsx b/front/src/modules/ui/navbar/components/NavCollapseButton.tsx index 97fe718f5..7a309085b 100644 --- a/front/src/modules/ui/navbar/components/NavCollapseButton.tsx +++ b/front/src/modules/ui/navbar/components/NavCollapseButton.tsx @@ -1,12 +1,12 @@ import styled from '@emotion/styled'; import { useRecoilState } from 'recoil'; -import { useIsMobile } from '@/ui/hooks/useIsMobile'; import { IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightCollapse, } from '@/ui/icon'; import { isNavbarOpenedState } from '@/ui/layout/states/isNavbarOpenedState'; +import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { navbarIconSize } from '../constants'; diff --git a/front/src/modules/ui/navbar/components/NavItem.tsx b/front/src/modules/ui/navbar/components/NavItem.tsx index 857f8e447..d87abff4b 100644 --- a/front/src/modules/ui/navbar/components/NavItem.tsx +++ b/front/src/modules/ui/navbar/components/NavItem.tsx @@ -3,8 +3,8 @@ import { useNavigate } from 'react-router-dom'; import styled from '@emotion/styled'; import { useRecoilState } from 'recoil'; -import { useIsMobile } from '@/ui/hooks/useIsMobile'; -import { MOBILE_VIEWPORT } from '@/ui/themes/themes'; +import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme'; +import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { isNavbarOpenedState } from '../../layout/states/isNavbarOpenedState'; diff --git a/front/src/modules/ui/navbar/components/NavbarAnimatedContainer.tsx b/front/src/modules/ui/navbar/components/NavbarAnimatedContainer.tsx index 0d798e972..4332eab4f 100644 --- a/front/src/modules/ui/navbar/components/NavbarAnimatedContainer.tsx +++ b/front/src/modules/ui/navbar/components/NavbarAnimatedContainer.tsx @@ -3,10 +3,10 @@ import styled from '@emotion/styled'; import { motion } from 'framer-motion'; import { useRecoilState, useRecoilValue } from 'recoil'; -import { useIsMobile } from '@/ui/hooks/useIsMobile'; import { useIsSubMenuNavbarDisplayed } from '@/ui/layout/hooks/useIsSubMenuNavbarDisplayed'; import { isNavbarOpenedState } from '@/ui/layout/states/isNavbarOpenedState'; import { isNavbarSwitchingSizeState } from '@/ui/layout/states/isNavbarSwitchingSizeState'; +import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { leftNavbarWidth, leftSubMenuNavbarWidth } from '../constants'; diff --git a/front/src/modules/ui/navbar/components/SubMenuNavbar.tsx b/front/src/modules/ui/navbar/components/SubMenuNavbar.tsx index c556566bd..84180103d 100644 --- a/front/src/modules/ui/navbar/components/SubMenuNavbar.tsx +++ b/front/src/modules/ui/navbar/components/SubMenuNavbar.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -import { useIsMobile } from '@/ui/hooks/useIsMobile'; +import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { leftNavbarWidth } from '../constants'; diff --git a/front/src/modules/ui/right-drawer/components/RightDrawer.tsx b/front/src/modules/ui/right-drawer/components/RightDrawer.tsx index ce1bcab50..c37eafcdf 100644 --- a/front/src/modules/ui/right-drawer/components/RightDrawer.tsx +++ b/front/src/modules/ui/right-drawer/components/RightDrawer.tsx @@ -5,14 +5,14 @@ import { motion } from 'framer-motion'; import { useRecoilState } from 'recoil'; import { Key } from 'ts-key-enum'; -import { useIsMobile } from '@/ui/hooks/useIsMobile'; import { ClickOutsideMode, useListenClickOutside, -} from '@/ui/hooks/useListenClickOutside'; +} from '@/ui/utilities/click-outside/hooks/useListenClickOutside'; +import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; +import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { isDefined } from '~/utils/isDefined'; -import { useScopedHotkeys } from '../../hotkey/hooks/useScopedHotkeys'; import { leftNavbarWidth } from '../../navbar/constants'; import { useRightDrawer } from '../hooks/useRightDrawer'; import { isRightDrawerExpandedState } from '../states/isRightDrawerExpandedState'; diff --git a/front/src/modules/ui/right-drawer/components/RightDrawerBody.tsx b/front/src/modules/ui/right-drawer/components/RightDrawerBody.tsx deleted file mode 100644 index 86c069c06..000000000 --- a/front/src/modules/ui/right-drawer/components/RightDrawerBody.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import styled from '@emotion/styled'; - -export const RightDrawerBody = styled.div` - display: flex; - flex-direction: column; - height: calc( - 100vh - ${({ theme }) => theme.spacing(14)} - 1px - ); // (-1 for border) - overflow: auto; - position: relative; -`; diff --git a/front/src/modules/ui/right-drawer/components/RightDrawerPage.tsx b/front/src/modules/ui/right-drawer/components/RightDrawerPage.tsx deleted file mode 100644 index e368e0abf..000000000 --- a/front/src/modules/ui/right-drawer/components/RightDrawerPage.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import styled from '@emotion/styled'; - -export const RightDrawerPage = styled.div` - display: flex; - flex-direction: column; - height: 100%; - width: 100%; -`; diff --git a/front/src/modules/ui/right-drawer/components/RightDrawerRouter.tsx b/front/src/modules/ui/right-drawer/components/RightDrawerRouter.tsx index a47bcada0..e9f1e7e50 100644 --- a/front/src/modules/ui/right-drawer/components/RightDrawerRouter.tsx +++ b/front/src/modules/ui/right-drawer/components/RightDrawerRouter.tsx @@ -1,28 +1,55 @@ +import styled from '@emotion/styled'; import { useRecoilState } from 'recoil'; import { RightDrawerCreateActivity } from '@/activities/right-drawer/components/create/RightDrawerCreateActivity'; import { RightDrawerEditActivity } from '@/activities/right-drawer/components/edit/RightDrawerEditActivity'; import { RightDrawerTimeline } from '@/activities/right-drawer/components/RightDrawerTimeline'; -import { isDefined } from '~/utils/isDefined'; import { rightDrawerPageState } from '../states/rightDrawerPageState'; import { RightDrawerPages } from '../types/RightDrawerPages'; +import { RightDrawerTopBar } from './RightDrawerTopBar'; + +const RightDrawerPage = styled.div` + display: flex; + flex-direction: column; + height: 100%; + width: 100%; +`; + +const RightDrawerBody = styled.div` + display: flex; + flex-direction: column; + height: calc( + 100vh - ${({ theme }) => theme.spacing(14)} - 1px + ); // (-1 for border) + overflow: auto; + position: relative; +`; + export function RightDrawerRouter() { const [rightDrawerPage] = useRecoilState(rightDrawerPageState); - if (!isDefined(rightDrawerPage)) { - return <>; - } + let page = <>; switch (rightDrawerPage) { case RightDrawerPages.Timeline: - return ; + page = ; + break; case RightDrawerPages.CreateActivity: - return ; + page = ; + break; case RightDrawerPages.EditActivity: - return ; + page = ; + break; default: - return <>; + break; } + + return ( + + + {page} + + ); } diff --git a/front/src/modules/ui/right-drawer/components/RightDrawerTopBar.tsx b/front/src/modules/ui/right-drawer/components/RightDrawerTopBar.tsx index 9b192ea7b..20b86669a 100644 --- a/front/src/modules/ui/right-drawer/components/RightDrawerTopBar.tsx +++ b/front/src/modules/ui/right-drawer/components/RightDrawerTopBar.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -import { useIsMobile } from '@/ui/hooks/useIsMobile'; +import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { RightDrawerTopBarCloseButton } from './RightDrawerTopBarCloseButton'; import { RightDrawerTopBarExpandButton } from './RightDrawerTopBarExpandButton'; diff --git a/front/src/modules/ui/snack-bar/components/SnackBar.tsx b/front/src/modules/ui/snack-bar/components/SnackBar.tsx index 0225c7d8a..5f5c78643 100644 --- a/front/src/modules/ui/snack-bar/components/SnackBar.tsx +++ b/front/src/modules/ui/snack-bar/components/SnackBar.tsx @@ -7,7 +7,7 @@ import { ProgressBar, ProgressBarControls, } from '@/ui/progress-bar/components/ProgressBar'; -import { rgba } from '@/ui/themes/colors'; +import { rgba } from '@/ui/theme/constants/colors'; import { usePausableTimeout } from '../hooks/usePausableTimeout'; diff --git a/front/src/modules/ui/table/components/CheckboxCell.tsx b/front/src/modules/ui/table/components/CheckboxCell.tsx index f324d9ee8..91e06da77 100644 --- a/front/src/modules/ui/table/components/CheckboxCell.tsx +++ b/front/src/modules/ui/table/components/CheckboxCell.tsx @@ -2,7 +2,7 @@ import { useCallback } from 'react'; import styled from '@emotion/styled'; import { useSetRecoilState } from 'recoil'; -import { Checkbox } from '@/ui/input/components/Checkbox'; +import { Checkbox } from '@/ui/input/checkbox/components/Checkbox'; import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected'; import { contextMenuPositionState } from '../states/contextMenuPositionState'; diff --git a/front/src/modules/ui/table/components/EntityTable.tsx b/front/src/modules/ui/table/components/EntityTable.tsx index 6ed158fba..18b5fb6d7 100644 --- a/front/src/modules/ui/table/components/EntityTable.tsx +++ b/front/src/modules/ui/table/components/EntityTable.tsx @@ -1,13 +1,12 @@ import * as React from 'react'; import styled from '@emotion/styled'; -import { TableColumn } from '@/people/table/components/peopleColumns'; import { SelectedSortType, SortType } from '@/ui/filter-n-sort/types/interface'; -import { useListenClickOutside } from '@/ui/hooks/useListenClickOutside'; +import { useListenClickOutside } from '@/ui/utilities/click-outside/hooks/useListenClickOutside'; -import { useIsPageLoading } from '../../hooks/useIsPageLoading'; import { useLeaveTableFocus } from '../hooks/useLeaveTableFocus'; import { useMapKeyboardToSoftFocus } from '../hooks/useMapKeyboardToSoftFocus'; +import { EntityUpdateMutationHookContext } from '../states/EntityUpdateMutationHookContext'; import { TableHeader } from '../table-header/components/TableHeader'; import { EntityTableBody } from './EntityTableBody'; @@ -85,20 +84,20 @@ const StyledTableWrapper = styled.div` `; type OwnProps = { - columns: Array; viewName: string; viewIcon?: React.ReactNode; availableSorts?: Array>; onSortsUpdate?: (sorts: Array>) => void; onRowSelectionChange?: (rowSelection: string[]) => void; + useUpdateEntityMutation: any; }; export function EntityTable({ - columns, viewName, viewIcon, availableSorts, onSortsUpdate, + useUpdateEntityMutation, }: OwnProps) { const tableBodyRef = React.useRef(null); @@ -113,28 +112,24 @@ export function EntityTable({ }, }); - const isPageLoading = useIsPageLoading(); - - if (isPageLoading) { - return null; - } - return ( - - - - - - - - - - - + + + + + + + + + + + + + ); } diff --git a/front/src/modules/ui/table/components/EntityTableBody.tsx b/front/src/modules/ui/table/components/EntityTableBody.tsx index a7bd37146..c6204abde 100644 --- a/front/src/modules/ui/table/components/EntityTableBody.tsx +++ b/front/src/modules/ui/table/components/EntityTableBody.tsx @@ -1,6 +1,5 @@ import { useRecoilValue } from 'recoil'; -import { TableColumn } from '@/people/table/components/peopleColumns'; import { isNavbarSwitchingSizeState } from '@/ui/layout/states/isNavbarSwitchingSizeState'; import { isFetchingEntityTableDataState } from '../states/isFetchingEntityTableDataState'; @@ -10,7 +9,7 @@ import { tableRowIdsState } from '../states/tableRowIdsState'; import { EntityTableRow } from './EntityTableRow'; -export function EntityTableBody({ columns }: { columns: Array }) { +export function EntityTableBody() { const rowIds = useRecoilValue(tableRowIdsState); const isNavbarSwitchingSize = useRecoilValue(isNavbarSwitchingSizeState); @@ -28,7 +27,7 @@ export function EntityTableBody({ columns }: { columns: Array }) { {rowIds.map((rowId, index) => ( - + ))} diff --git a/front/src/modules/ui/table/components/EntityTableBodyV2.tsx b/front/src/modules/ui/table/components/EntityTableBodyV2.tsx deleted file mode 100644 index 819cede10..000000000 --- a/front/src/modules/ui/table/components/EntityTableBodyV2.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { useRecoilValue } from 'recoil'; - -import { isNavbarSwitchingSizeState } from '@/ui/layout/states/isNavbarSwitchingSizeState'; - -import { isFetchingEntityTableDataState } from '../states/isFetchingEntityTableDataState'; -import { RowIdContext } from '../states/RowIdContext'; -import { RowIndexContext } from '../states/RowIndexContext'; -import { tableRowIdsState } from '../states/tableRowIdsState'; - -import { EntityTableRow } from './EntityTableRowV2'; - -export function EntityTableBody() { - const rowIds = useRecoilValue(tableRowIdsState); - - const isNavbarSwitchingSize = useRecoilValue(isNavbarSwitchingSizeState); - - const isFetchingEntityTableData = useRecoilValue( - isFetchingEntityTableDataState, - ); - - if (isFetchingEntityTableData || isNavbarSwitchingSize) { - return null; - } - - return ( - - {rowIds.map((rowId, index) => ( - - - - - - ))} - - ); -} diff --git a/front/src/modules/ui/table/components/EntityTableCell.tsx b/front/src/modules/ui/table/components/EntityTableCell.tsx index 69b480caf..ba5882be5 100644 --- a/front/src/modules/ui/table/components/EntityTableCell.tsx +++ b/front/src/modules/ui/table/components/EntityTableCell.tsx @@ -1,19 +1,15 @@ +import { useContext } from 'react'; import { useSetRecoilState } from 'recoil'; -import { RecoilScope } from '../../recoil-scope/components/RecoilScope'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; + +import { GenericEditableCell } from '../editable-cell/components/GenericEditableCell'; import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected'; import { ColumnIndexContext } from '../states/ColumnIndexContext'; import { contextMenuPositionState } from '../states/contextMenuPositionState'; +import { ViewFieldContext } from '../states/ViewFieldContext'; -export function EntityTableCell({ - cellIndex, - children, - size, -}: { - size: number; - cellIndex: number; - children: React.ReactNode; -}) { +export function EntityTableCell({ cellIndex }: { cellIndex: number }) { const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); const { setCurrentRowSelected } = useCurrentRowSelected(); @@ -29,18 +25,24 @@ export function EntityTableCell({ }); } + const viewField = useContext(ViewFieldContext); + + if (!viewField) { + return null; + } + return ( handleContextMenu(event)} style={{ - width: size, - minWidth: size, - maxWidth: size, + width: viewField.columnSize, + minWidth: viewField.columnSize, + maxWidth: viewField.columnSize, }} > - {children} + diff --git a/front/src/modules/ui/table/components/EntityTableCellV2.tsx b/front/src/modules/ui/table/components/EntityTableCellV2.tsx deleted file mode 100644 index d4ee44e32..000000000 --- a/front/src/modules/ui/table/components/EntityTableCellV2.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { useContext } from 'react'; -import { useSetRecoilState } from 'recoil'; - -import { GenericEditableCell } from '@/ui/table/components/GenericEditableCell'; - -import { RecoilScope } from '../../recoil-scope/components/RecoilScope'; -import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected'; -import { ColumnIndexContext } from '../states/ColumnIndexContext'; -import { contextMenuPositionState } from '../states/contextMenuPositionState'; -import { ViewFieldContext } from '../states/ViewFieldContext'; - -export function EntityTableCell({ cellIndex }: { cellIndex: number }) { - const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); - - const { setCurrentRowSelected } = useCurrentRowSelected(); - - function handleContextMenu(event: React.MouseEvent) { - event.preventDefault(); - - setCurrentRowSelected(true); - - setContextMenuPosition({ - x: event.clientX, - y: event.clientY, - }); - } - - const viewField = useContext(ViewFieldContext); - - if (!viewField) { - return null; - } - - return ( - - - handleContextMenu(event)} - style={{ - width: viewField.columnSize, - minWidth: viewField.columnSize, - maxWidth: viewField.columnSize, - }} - > - - - - - ); -} diff --git a/front/src/modules/ui/table/components/EntityTableHeader.tsx b/front/src/modules/ui/table/components/EntityTableHeader.tsx index 292962fea..a21705991 100644 --- a/front/src/modules/ui/table/components/EntityTableHeader.tsx +++ b/front/src/modules/ui/table/components/EntityTableHeader.tsx @@ -1,13 +1,13 @@ -import { TableColumn } from '@/people/table/components/peopleColumns'; +import { useRecoilValue } from 'recoil'; + +import { viewFieldsFamilyState } from '../states/viewFieldsState'; import { ColumnHead } from './ColumnHead'; import { SelectAllCheckbox } from './SelectAllCheckbox'; -export function EntityTableHeader({ - columns, -}: { - columns: Array; -}) { +export function EntityTableHeader() { + const viewFields = useRecoilValue(viewFieldsFamilyState); + return ( @@ -20,16 +20,19 @@ export function EntityTableHeader({ > - {columns.map((column) => ( + {viewFields.map((viewField) => ( - + ))} diff --git a/front/src/modules/ui/table/components/EntityTableHeaderV2.tsx b/front/src/modules/ui/table/components/EntityTableHeaderV2.tsx deleted file mode 100644 index a21705991..000000000 --- a/front/src/modules/ui/table/components/EntityTableHeaderV2.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { useRecoilValue } from 'recoil'; - -import { viewFieldsFamilyState } from '../states/viewFieldsState'; - -import { ColumnHead } from './ColumnHead'; -import { SelectAllCheckbox } from './SelectAllCheckbox'; - -export function EntityTableHeader() { - const viewFields = useRecoilValue(viewFieldsFamilyState); - - return ( - - - - - - {viewFields.map((viewField) => ( - - - - ))} - - - - ); -} diff --git a/front/src/modules/ui/table/components/EntityTableRow.tsx b/front/src/modules/ui/table/components/EntityTableRow.tsx index 68b235cb0..d01b14de2 100644 --- a/front/src/modules/ui/table/components/EntityTableRow.tsx +++ b/front/src/modules/ui/table/components/EntityTableRow.tsx @@ -1,6 +1,8 @@ import styled from '@emotion/styled'; +import { useRecoilValue } from 'recoil'; -import { TableColumn } from '@/people/table/components/peopleColumns'; +import { ViewFieldContext } from '../states/ViewFieldContext'; +import { viewFieldsFamilyState } from '../states/viewFieldsState'; import { CheckboxCell } from './CheckboxCell'; import { EntityTableCell } from './EntityTableCell'; @@ -10,27 +12,22 @@ const StyledRow = styled.tr<{ selected: boolean }>` props.selected ? props.theme.background.secondary : 'none'}; `; -export function EntityTableRow({ - columns, - rowId, -}: { - columns: TableColumn[]; - rowId: string; -}) { +export function EntityTableRow({ rowId }: { rowId: string }) { + const viewFields = useRecoilValue(viewFieldsFamilyState); + return ( - {columns.map((column, columnIndex) => { + {viewFields.map((viewField, columnIndex) => { return ( - - {column.cellComponent} - + + ); })} diff --git a/front/src/modules/ui/table/components/EntityTableRowV2.tsx b/front/src/modules/ui/table/components/EntityTableRowV2.tsx deleted file mode 100644 index d95a21aa4..000000000 --- a/front/src/modules/ui/table/components/EntityTableRowV2.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import styled from '@emotion/styled'; -import { useRecoilValue } from 'recoil'; - -import { ViewFieldContext } from '../states/ViewFieldContext'; -import { viewFieldsFamilyState } from '../states/viewFieldsState'; - -import { CheckboxCell } from './CheckboxCell'; -import { EntityTableCell } from './EntityTableCellV2'; - -const StyledRow = styled.tr<{ selected: boolean }>` - background: ${(props) => - props.selected ? props.theme.background.secondary : 'none'}; -`; - -export function EntityTableRow({ rowId }: { rowId: string }) { - const viewFields = useRecoilValue(viewFieldsFamilyState); - - return ( - - - - - {viewFields.map((viewField, columnIndex) => { - return ( - - - - ); - })} - - - ); -} diff --git a/front/src/modules/ui/table/components/EntityTableV2.tsx b/front/src/modules/ui/table/components/EntityTableV2.tsx deleted file mode 100644 index 21c341350..000000000 --- a/front/src/modules/ui/table/components/EntityTableV2.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import * as React from 'react'; -import styled from '@emotion/styled'; - -import { SelectedSortType, SortType } from '@/ui/filter-n-sort/types/interface'; -import { useListenClickOutside } from '@/ui/hooks/useListenClickOutside'; - -import { useLeaveTableFocus } from '../hooks/useLeaveTableFocus'; -import { useMapKeyboardToSoftFocus } from '../hooks/useMapKeyboardToSoftFocus'; -import { EntityUpdateMutationHookContext } from '../states/EntityUpdateMutationHookContext'; -import { TableHeader } from '../table-header/components/TableHeader'; - -import { EntityTableBody } from './EntityTableBodyV2'; -import { EntityTableHeader } from './EntityTableHeaderV2'; - -const StyledTable = styled.table` - border-collapse: collapse; - - border-radius: ${({ theme }) => theme.border.radius.sm}; - border-spacing: 0; - margin-left: ${({ theme }) => theme.table.horizontalCellMargin}; - margin-right: ${({ theme }) => theme.table.horizontalCellMargin}; - table-layout: fixed; - width: calc(100% - ${({ theme }) => theme.table.horizontalCellMargin} * 2); - - th { - border: 1px solid ${({ theme }) => theme.border.color.light}; - border-collapse: collapse; - color: ${({ theme }) => theme.font.color.tertiary}; - padding: 0; - text-align: left; - - :last-child { - border-right-color: transparent; - } - :first-of-type { - border-left-color: transparent; - border-right-color: transparent; - } - :last-of-type { - min-width: 0; - width: 100%; - } - } - - td { - border: 1px solid ${({ theme }) => theme.border.color.light}; - border-collapse: collapse; - color: ${({ theme }) => theme.font.color.primary}; - padding: 0; - - text-align: left; - - :last-child { - border-right-color: transparent; - } - :first-of-type { - border-left-color: transparent; - border-right-color: transparent; - } - :last-of-type { - min-width: 0; - width: 100%; - } - } -`; - -const StyledTableWithHeader = styled.div` - display: flex; - flex: 1; - flex-direction: column; - width: 100%; -`; - -const StyledTableContainer = styled.div` - display: flex; - flex-direction: column; - height: 100%; - overflow: auto; -`; - -const StyledTableWrapper = styled.div` - flex: 1; - overflow: auto; -`; - -type OwnProps = { - viewName: string; - viewIcon?: React.ReactNode; - availableSorts?: Array>; - onSortsUpdate?: (sorts: Array>) => void; - onRowSelectionChange?: (rowSelection: string[]) => void; - useUpdateEntityMutation: any; -}; - -export function EntityTable({ - viewName, - viewIcon, - availableSorts, - onSortsUpdate, - useUpdateEntityMutation, -}: OwnProps) { - const tableBodyRef = React.useRef(null); - - useMapKeyboardToSoftFocus(); - - const leaveTableFocus = useLeaveTableFocus(); - - useListenClickOutside({ - refs: [tableBodyRef], - callback: () => { - leaveTableFocus(); - }, - }); - - return ( - - - - - - - - - - - - - - ); -} diff --git a/front/src/modules/ui/table/components/SelectAllCheckbox.tsx b/front/src/modules/ui/table/components/SelectAllCheckbox.tsx index 74e91e168..af2c5b3f1 100644 --- a/front/src/modules/ui/table/components/SelectAllCheckbox.tsx +++ b/front/src/modules/ui/table/components/SelectAllCheckbox.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -import { Checkbox } from '@/ui/input/components/Checkbox'; +import { Checkbox } from '@/ui/input/checkbox/components/Checkbox'; import { useSelectAllRows } from '../hooks/useSelectAllRows'; 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 394d80c47..530177968 100644 --- a/front/src/modules/ui/table/editable-cell/components/EditableCell.tsx +++ b/front/src/modules/ui/table/editable-cell/components/EditableCell.tsx @@ -1,7 +1,7 @@ import { ReactElement } from 'react'; import styled from '@emotion/styled'; -import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope'; +import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; import { CellHotkeyScopeContext } from '../../states/CellHotkeyScopeContext'; import { TableHotkeyScope } from '../../types/TableHotkeyScope'; 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 f61a4b992..3bb37c9d1 100644 --- a/front/src/modules/ui/table/editable-cell/components/EditableCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/components/EditableCellEditMode.tsx @@ -1,7 +1,7 @@ import { ReactElement } from 'react'; import styled from '@emotion/styled'; -import { overlayBackground } from '@/ui/themes/effects'; +import { overlayBackground } from '@/ui/theme/constants/effects'; export const EditableCellEditModeContainer = styled.div` align-items: center; diff --git a/front/src/modules/ui/table/editable-cell/components/EditableCellSoftFocusMode.tsx b/front/src/modules/ui/table/editable-cell/components/EditableCellSoftFocusMode.tsx index 216fcb928..bfac7d872 100644 --- a/front/src/modules/ui/table/editable-cell/components/EditableCellSoftFocusMode.tsx +++ b/front/src/modules/ui/table/editable-cell/components/EditableCellSoftFocusMode.tsx @@ -1,7 +1,7 @@ import { PropsWithChildren } from 'react'; -import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys'; -import { isNonTextWritingKey } from '@/ui/hotkey/utils/isNonTextWritingKey'; +import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; +import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey'; import { TableHotkeyScope } from '../../types/TableHotkeyScope'; import { useEditableCell } from '../hooks/useEditableCell'; diff --git a/front/src/modules/ui/table/components/GenericEditableCell.tsx b/front/src/modules/ui/table/editable-cell/components/GenericEditableCell.tsx similarity index 50% rename from front/src/modules/ui/table/components/GenericEditableCell.tsx rename to front/src/modules/ui/table/editable-cell/components/GenericEditableCell.tsx index 483beff35..607e5f165 100644 --- a/front/src/modules/ui/table/components/GenericEditableCell.tsx +++ b/front/src/modules/ui/table/editable-cell/components/GenericEditableCell.tsx @@ -3,25 +3,24 @@ import { ViewFieldMetadata, } from '@/ui/table/types/ViewField'; -import { isViewFieldChip } from '../types/guards/isViewFieldChip'; -import { isViewFieldDate } from '../types/guards/isViewFieldDate'; -import { isViewFieldDoubleText } from '../types/guards/isViewFieldDoubleText'; -import { isViewFieldDoubleTextChip } from '../types/guards/isViewFieldDoubleTextChip'; -import { isViewFieldNumber } from '../types/guards/isViewFieldNumber'; -import { isViewFieldPhone } from '../types/guards/isViewFieldPhone'; -import { isViewFieldRelation } from '../types/guards/isViewFieldRelation'; -import { isViewFieldText } from '../types/guards/isViewFieldText'; -import { isViewFieldURL } from '../types/guards/isViewFieldURL'; - -import { GenericEditableChipCell } from './GenericEditableChipCell'; -import { GenericEditableDateCell } from './GenericEditableDateCell'; -import { GenericEditableDoubleTextCell } from './GenericEditableDoubleTextCell'; -import { GenericEditableDoubleTextChipCell } from './GenericEditableDoubleTextChipCell'; -import { GenericEditableNumberCell } from './GenericEditableNumberCell'; -import { GenericEditablePhoneCell } from './GenericEditablePhoneCell'; -import { GenericEditableRelationCell } from './GenericEditableRelationCell'; -import { GenericEditableTextCell } from './GenericEditableTextCell'; -import { GenericEditableURLCell } from './GenericEditableURLCell'; +import { isViewFieldChip } from '../../types/guards/isViewFieldChip'; +import { isViewFieldDate } from '../../types/guards/isViewFieldDate'; +import { isViewFieldDoubleText } from '../../types/guards/isViewFieldDoubleText'; +import { isViewFieldDoubleTextChip } from '../../types/guards/isViewFieldDoubleTextChip'; +import { isViewFieldNumber } from '../../types/guards/isViewFieldNumber'; +import { isViewFieldPhone } from '../../types/guards/isViewFieldPhone'; +import { isViewFieldRelation } from '../../types/guards/isViewFieldRelation'; +import { isViewFieldText } from '../../types/guards/isViewFieldText'; +import { isViewFieldURL } from '../../types/guards/isViewFieldURL'; +import { GenericEditableChipCell } from '../type/components/GenericEditableChipCell'; +import { GenericEditableDateCell } from '../type/components/GenericEditableDateCell'; +import { GenericEditableDoubleTextCell } from '../type/components/GenericEditableDoubleTextCell'; +import { GenericEditableDoubleTextChipCell } from '../type/components/GenericEditableDoubleTextChipCell'; +import { GenericEditableNumberCell } from '../type/components/GenericEditableNumberCell'; +import { GenericEditablePhoneCell } from '../type/components/GenericEditablePhoneCell'; +import { GenericEditableRelationCell } from '../type/components/GenericEditableRelationCell'; +import { GenericEditableTextCell } from '../type/components/GenericEditableTextCell'; +import { GenericEditableURLCell } from '../type/components/GenericEditableURLCell'; type OwnProps = { viewField: ViewFieldDefinition; diff --git a/front/src/modules/ui/table/editable-cell/components/__stories__/EditableCellText.stories.tsx b/front/src/modules/ui/table/editable-cell/components/__stories__/EditableCellText.stories.tsx deleted file mode 100644 index 450c7cf1b..000000000 --- a/front/src/modules/ui/table/editable-cell/components/__stories__/EditableCellText.stories.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { expect } from '@storybook/jest'; -import type { Meta, StoryObj } from '@storybook/react'; -import { userEvent, within } from '@storybook/testing-library'; - -import { CellPositionDecorator } from '~/testing/decorators/CellPositionDecorator'; -import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; -import { sleep } from '~/testing/sleep'; - -import { EditableCellText } from '../../types/EditableCellText'; - -const meta: Meta = { - title: 'UI/EditableCell/EditableCellText', - component: EditableCellText, - decorators: [ComponentDecorator, CellPositionDecorator], - args: { - value: 'Content', - }, -}; - -export default meta; -type Story = StoryObj; - -export const DisplayMode: Story = { - render: EditableCellText, -}; - -export const SoftFocusMode: Story = { - ...DisplayMode, - play: async ({ canvasElement, step }) => { - const canvas = within(canvasElement); - - const content = await canvas.findByText('Content'); - - await userEvent.click(content); - await userEvent.keyboard('{esc}'); - - await sleep(10); - - await step('Has soft focus mode', () => { - expect(canvas.getByTestId('editable-cell-soft-focus-mode')).toBeDefined(); - }); - }, -}; - -export const EditMode: Story = { - ...DisplayMode, - play: async ({ canvasElement, step }) => { - const canvas = within(canvasElement); - - const click = () => userEvent.click(canvas.getByText('Content')); - - await step('Click once', click); - - await step('Has edit mode', () => { - expect( - canvas.getByTestId('editable-cell-edit-mode-container'), - ).toBeDefined(); - }); - }, -}; diff --git a/front/src/modules/ui/table/editable-cell/hooks/useEditableCell.ts b/front/src/modules/ui/table/editable-cell/hooks/useEditableCell.ts index 165a0c156..8a514f1a8 100644 --- a/front/src/modules/ui/table/editable-cell/hooks/useEditableCell.ts +++ b/front/src/modules/ui/table/editable-cell/hooks/useEditableCell.ts @@ -1,7 +1,7 @@ import { useContext } from 'react'; -import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope'; -import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope'; +import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; +import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; import { useCloseCurrentCellInEditMode } from '../../hooks/useClearCellInEditMode'; import { CellHotkeyScopeContext } from '../../states/CellHotkeyScopeContext'; diff --git a/front/src/modules/ui/table/editable-cell/hooks/useRegisterCloseCellHandlers.ts b/front/src/modules/ui/table/editable-cell/hooks/useRegisterCloseCellHandlers.ts index 134ec8e67..cfbc7d710 100644 --- a/front/src/modules/ui/table/editable-cell/hooks/useRegisterCloseCellHandlers.ts +++ b/front/src/modules/ui/table/editable-cell/hooks/useRegisterCloseCellHandlers.ts @@ -1,5 +1,5 @@ -import { useListenClickOutside } from '@/ui/hooks/useListenClickOutside'; -import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys'; +import { useListenClickOutside } from '@/ui/utilities/click-outside/hooks/useListenClickOutside'; +import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { useMoveSoftFocus } from '../../hooks/useMoveSoftFocus'; import { TableHotkeyScope } from '../../types/TableHotkeyScope'; diff --git a/front/src/modules/ui/table/editable-cell/hooks/useSetSoftFocusOnCurrentCell.ts b/front/src/modules/ui/table/editable-cell/hooks/useSetSoftFocusOnCurrentCell.ts index 4abd2372b..7993980b4 100644 --- a/front/src/modules/ui/table/editable-cell/hooks/useSetSoftFocusOnCurrentCell.ts +++ b/front/src/modules/ui/table/editable-cell/hooks/useSetSoftFocusOnCurrentCell.ts @@ -1,6 +1,6 @@ import { useRecoilCallback } from 'recoil'; -import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope'; +import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; import { useSetSoftFocusPosition } from '../../hooks/useSetSoftFocusPosition'; import { isSoftFocusActiveState } from '../../states/isSoftFocusActiveState'; diff --git a/front/src/modules/ui/table/editable-cell/types/EditableCellDateEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/DateCellEdit.tsx similarity index 64% rename from front/src/modules/ui/table/editable-cell/types/EditableCellDateEditMode.tsx rename to front/src/modules/ui/table/editable-cell/type/components/DateCellEdit.tsx index 20df294ef..01491b019 100644 --- a/front/src/modules/ui/table/editable-cell/types/EditableCellDateEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/DateCellEdit.tsx @@ -2,12 +2,12 @@ import { useRef } from 'react'; import styled from '@emotion/styled'; import { Key } from 'ts-key-enum'; -import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys'; -import { InplaceInputDate } from '@/ui/inplace-input/components/InplaceInputDate'; +import { DateInputEdit } from '@/ui/input/date/components/DateInputEdit'; +import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope'; +import { useListenClickOutside } from '@/ui/utilities/click-outside/hooks/useListenClickOutside'; +import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; -import { useListenClickOutside } from '../../../hooks/useListenClickOutside'; -import { TableHotkeyScope } from '../../types/TableHotkeyScope'; -import { useEditableCell } from '../hooks/useEditableCell'; +import { useEditableCell } from '../../hooks/useEditableCell'; const EditableCellDateEditModeContainer = styled.div` margin-top: -1px; @@ -19,10 +19,7 @@ export type EditableDateProps = { onSubmit: (date: Date) => void; }; -export function EditableCellDateEditMode({ - value, - onSubmit, -}: EditableDateProps) { +export function DateCellEdit({ value, onSubmit }: EditableDateProps) { const { closeEditableCell } = useEditableCell(); function handleDateChange(newDate: Date) { @@ -55,7 +52,7 @@ export function EditableCellDateEditMode({ return ( - + ); } diff --git a/front/src/modules/ui/table/editable-cell/types/EditableCellDoubleTextEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/DoubleTextCellEdit.tsx similarity index 88% rename from front/src/modules/ui/table/editable-cell/types/EditableCellDoubleTextEditMode.tsx rename to front/src/modules/ui/table/editable-cell/type/components/DoubleTextCellEdit.tsx index 09ede873d..036b641c1 100644 --- a/front/src/modules/ui/table/editable-cell/types/EditableCellDoubleTextEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/DoubleTextCellEdit.tsx @@ -2,13 +2,14 @@ import { ChangeEvent, useEffect, useRef, useState } from 'react'; import styled from '@emotion/styled'; import { Key } from 'ts-key-enum'; -import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys'; -import { StyledInput } from '@/ui/inplace-input/components/InplaceInputTextCellEditMode'; +import { useMoveSoftFocus } from '@/ui/table/hooks/useMoveSoftFocus'; +import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope'; +import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; -import { useMoveSoftFocus } from '../../hooks/useMoveSoftFocus'; -import { TableHotkeyScope } from '../../types/TableHotkeyScope'; -import { useEditableCell } from '../hooks/useEditableCell'; -import { useRegisterCloseCellHandlers } from '../hooks/useRegisterCloseCellHandlers'; +import { useEditableCell } from '../../hooks/useEditableCell'; +import { useRegisterCloseCellHandlers } from '../../hooks/useRegisterCloseCellHandlers'; + +import { StyledInput } from './TextCellEdit'; type OwnProps = { firstValue: string; @@ -35,7 +36,7 @@ const StyledContainer = styled.div` } `; -export function EditableCellDoubleTextEditMode({ +export function DoubleTextCellEdit({ firstValue, secondValue, firstValuePlaceholder, diff --git a/front/src/modules/ui/table/components/GenericEditableChipCell.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCell.tsx similarity index 89% rename from front/src/modules/ui/table/components/GenericEditableChipCell.tsx rename to front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCell.tsx index 8ce55dbd6..8915a2da1 100644 --- a/front/src/modules/ui/table/components/GenericEditableChipCell.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCell.tsx @@ -1,6 +1,8 @@ import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell'; - -import { ViewFieldChipMetadata, ViewFieldDefinition } from '../types/ViewField'; +import { + ViewFieldChipMetadata, + ViewFieldDefinition, +} from '@/ui/table/types/ViewField'; import { GenericEditableChipCellDisplayMode } from './GenericEditableChipCellDisplayMode'; import { GenericEditableChipCellEditMode } from './GenericEditableChipCellEditMode'; diff --git a/front/src/modules/ui/table/components/GenericEditableChipCellDisplayMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellDisplayMode.tsx similarity index 95% rename from front/src/modules/ui/table/components/GenericEditableChipCellDisplayMode.tsx rename to front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellDisplayMode.tsx index f7e32ce0d..7d391ae14 100644 --- a/front/src/modules/ui/table/components/GenericEditableChipCellDisplayMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellDisplayMode.tsx @@ -1,7 +1,7 @@ import { useRecoilValue } from 'recoil'; import { CompanyChip } from '@/companies/components/CompanyChip'; -import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect'; +import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; import { diff --git a/front/src/modules/ui/table/components/GenericEditableChipCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellEditMode.tsx similarity index 84% rename from front/src/modules/ui/table/components/GenericEditableChipCellEditMode.tsx rename to front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellEditMode.tsx index d76bd1922..77bf25662 100644 --- a/front/src/modules/ui/table/components/GenericEditableChipCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellEditMode.tsx @@ -1,11 +1,14 @@ import { useRecoilState } from 'recoil'; -import { InplaceInputTextCellEditMode } from '@/ui/inplace-input/components/InplaceInputTextCellEditMode'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; +import { + ViewFieldChipMetadata, + ViewFieldDefinition, +} from '@/ui/table/types/ViewField'; -import { ViewFieldChipMetadata, ViewFieldDefinition } from '../types/ViewField'; +import { TextCellEdit } from './TextCellEdit'; type OwnProps = { viewField: ViewFieldDefinition; @@ -35,7 +38,7 @@ export function GenericEditableChipCellEditMode({ viewField }: OwnProps) { } return ( - } - nonEditModeContent={} + nonEditModeContent={} > ); } diff --git a/front/src/modules/ui/table/components/GenericEditableDateCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCellEditMode.tsx similarity index 87% rename from front/src/modules/ui/table/components/GenericEditableDateCellEditMode.tsx rename to front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCellEditMode.tsx index f0f4feb28..7480f9b23 100644 --- a/front/src/modules/ui/table/components/GenericEditableDateCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCellEditMode.tsx @@ -4,9 +4,12 @@ import { useRecoilState } from 'recoil'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; +import { + ViewFieldDateMetadata, + ViewFieldDefinition, +} from '@/ui/table/types/ViewField'; -import { EditableCellDateEditMode } from '../editable-cell/types/EditableCellDateEditMode'; -import { ViewFieldDateMetadata, ViewFieldDefinition } from '../types/ViewField'; +import { DateCellEdit } from './DateCellEdit'; type OwnProps = { viewField: ViewFieldDefinition; @@ -42,7 +45,7 @@ export function GenericEditableDateCellEditMode({ viewField }: OwnProps) { } return ( - diff --git a/front/src/modules/ui/table/components/GenericEditableDoubleTextCell.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCell.tsx similarity index 84% rename from front/src/modules/ui/table/components/GenericEditableDoubleTextCell.tsx rename to front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCell.tsx index d26fd626d..979e11b78 100644 --- a/front/src/modules/ui/table/components/GenericEditableDoubleTextCell.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCell.tsx @@ -1,14 +1,13 @@ import { useRecoilValue } from 'recoil'; -import { InplaceInputTextDisplayMode } from '@/ui/display/component/InplaceInputTextDisplayMode'; +import { TextInputDisplay } from '@/ui/input/text/components/TextInputDisplay'; import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; - import { ViewFieldDefinition, ViewFieldDoubleTextMetadata, -} from '../types/ViewField'; +} from '@/ui/table/types/ViewField'; import { GenericEditableDoubleTextCellEditMode } from './GenericEditableDoubleTextCellEditMode'; @@ -40,9 +39,7 @@ export function GenericEditableDoubleTextCell({ viewField }: OwnProps) { editModeContent={ } - nonEditModeContent={ - {displayName} - } + nonEditModeContent={{displayName}} > ); } diff --git a/front/src/modules/ui/table/components/GenericEditableDoubleTextCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCellEditMode.tsx similarity index 90% rename from front/src/modules/ui/table/components/GenericEditableDoubleTextCellEditMode.tsx rename to front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCellEditMode.tsx index 491ea4497..89173f095 100644 --- a/front/src/modules/ui/table/components/GenericEditableDoubleTextCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCellEditMode.tsx @@ -1,14 +1,14 @@ import { useRecoilState } from 'recoil'; -import { InplaceInputDoubleTextCellEditMode } from '@/ui/inplace-input/components/InplaceInputDoubleTextCellEditMode'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; - import { ViewFieldDefinition, ViewFieldDoubleTextMetadata, -} from '../types/ViewField'; +} from '@/ui/table/types/ViewField'; + +import { DoubleTextCellEdit } from './DoubleTextCellEdit'; type OwnProps = { viewField: ViewFieldDefinition; @@ -49,7 +49,7 @@ export function GenericEditableDoubleTextCellEditMode({ viewField }: OwnProps) { } return ( - ; @@ -61,7 +61,7 @@ export function GenericEditableDoubleTextChipCellEditMode({ } return ( - ; @@ -57,10 +57,6 @@ export function GenericEditableNumberCellEditMode({ viewField }: OwnProps) { } return ( - + ); } diff --git a/front/src/modules/ui/table/components/GenericEditablePhoneCell.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCell.tsx similarity index 84% rename from front/src/modules/ui/table/components/GenericEditablePhoneCell.tsx rename to front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCell.tsx index cdbe56150..ffcc76a60 100644 --- a/front/src/modules/ui/table/components/GenericEditablePhoneCell.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCell.tsx @@ -1,14 +1,13 @@ import { useRecoilValue } from 'recoil'; -import { InplaceInputPhoneDisplayMode } from '@/ui/display/component/InplaceInputPhoneDisplayMode'; +import { PhoneInputDisplay } from '@/ui/input/phone/components/PhoneInputDisplay'; import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; - import { ViewFieldDefinition, ViewFieldPhoneMetadata, -} from '../types/ViewField'; +} from '@/ui/table/types/ViewField'; import { GenericEditablePhoneCellEditMode } from './GenericEditablePhoneCellEditMode'; @@ -36,7 +35,7 @@ export function GenericEditablePhoneCell({ editModeContent={ } - nonEditModeContent={} + nonEditModeContent={} > ); } diff --git a/front/src/modules/ui/table/components/GenericEditablePhoneCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCellEditMode.tsx similarity index 88% rename from front/src/modules/ui/table/components/GenericEditablePhoneCellEditMode.tsx rename to front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCellEditMode.tsx index 5ef3cab6b..9cbe3ab5b 100644 --- a/front/src/modules/ui/table/components/GenericEditablePhoneCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCellEditMode.tsx @@ -1,14 +1,14 @@ import { useRecoilState } from 'recoil'; -import { InplaceInputTextCellEditMode } from '@/ui/inplace-input/components/InplaceInputTextCellEditMode'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; - import { ViewFieldDefinition, ViewFieldPhoneMetadata, -} from '../types/ViewField'; +} from '@/ui/table/types/ViewField'; + +import { TextCellEdit } from './TextCellEdit'; type OwnProps = { viewField: ViewFieldDefinition; @@ -38,7 +38,7 @@ export function GenericEditablePhoneCellEditMode({ viewField }: OwnProps) { } return ( - } - nonEditModeContent={ - {fieldValue} - } + nonEditModeContent={{fieldValue}} > ); } diff --git a/front/src/modules/ui/table/components/GenericEditableTextCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCellEditMode.tsx similarity index 84% rename from front/src/modules/ui/table/components/GenericEditableTextCellEditMode.tsx rename to front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCellEditMode.tsx index db5e8747f..42d4984e1 100644 --- a/front/src/modules/ui/table/components/GenericEditableTextCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCellEditMode.tsx @@ -1,11 +1,14 @@ import { useRecoilState } from 'recoil'; -import { InplaceInputTextCellEditMode } from '@/ui/inplace-input/components/InplaceInputTextCellEditMode'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField'; import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector'; +import { + ViewFieldDefinition, + ViewFieldTextMetadata, +} from '@/ui/table/types/ViewField'; -import { ViewFieldDefinition, ViewFieldTextMetadata } from '../types/ViewField'; +import { TextCellEdit } from './TextCellEdit'; type OwnProps = { viewField: ViewFieldDefinition; @@ -35,7 +38,7 @@ export function GenericEditableTextCellEditMode({ viewField }: OwnProps) { } return ( - ; @@ -35,7 +38,7 @@ export function GenericEditableURLCellEditMode({ viewField }: OwnProps) { } return ( - void; }; -export function InplaceInputTextCellEditMode({ +export function TextCellEdit({ placeholder, autoFocus, value, diff --git a/front/src/modules/ui/table/editable-cell/types/EditableCellDate.tsx b/front/src/modules/ui/table/editable-cell/types/EditableCellDate.tsx deleted file mode 100644 index 6af62c29c..000000000 --- a/front/src/modules/ui/table/editable-cell/types/EditableCellDate.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { InplaceInputDateDisplayMode } from '@/ui/display/component/InplaceInputDateDisplayMode'; - -import { TableHotkeyScope } from '../../types/TableHotkeyScope'; -import { EditableCell } from '../components/EditableCell'; - -import { EditableCellDateEditMode } from './EditableCellDateEditMode'; - -export type EditableDateProps = { - value: Date; - onChange: (date: Date) => void; - editModeHorizontalAlign?: 'left' | 'right'; -}; - -export function EditableCellDate({ - value, - onChange, - editModeHorizontalAlign, -}: EditableDateProps) { - return ( - - } - nonEditModeContent={} - editHotkeyScope={{ scope: TableHotkeyScope.CellDateEditMode }} - > - ); -} diff --git a/front/src/modules/ui/table/editable-cell/types/EditableCellDoubleText.tsx b/front/src/modules/ui/table/editable-cell/types/EditableCellDoubleText.tsx deleted file mode 100644 index 3f347f558..000000000 --- a/front/src/modules/ui/table/editable-cell/types/EditableCellDoubleText.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ReactElement } from 'react'; - -import { TableHotkeyScope } from '../../types/TableHotkeyScope'; -import { CellSkeleton } from '../components/CellSkeleton'; -import { EditableCell } from '../components/EditableCell'; - -import { EditableCellDoubleTextEditMode } from './EditableCellDoubleTextEditMode'; - -type OwnProps = { - firstValue: string; - secondValue: string; - firstValuePlaceholder: string; - secondValuePlaceholder: string; - nonEditModeContent: ReactElement; - onSubmit?: (firstValue: string, secondValue: string) => void; - onCancel?: () => void; - loading?: boolean; -}; - -export function EditableCellDoubleText({ - firstValue, - secondValue, - firstValuePlaceholder, - secondValuePlaceholder, - - onSubmit, - onCancel, - nonEditModeContent, - loading, -}: OwnProps) { - return ( - - } - nonEditModeContent={loading ? : nonEditModeContent} - > - ); -} diff --git a/front/src/modules/ui/table/editable-cell/types/EditableCellPhone.tsx b/front/src/modules/ui/table/editable-cell/types/EditableCellPhone.tsx deleted file mode 100644 index 580d3da3f..000000000 --- a/front/src/modules/ui/table/editable-cell/types/EditableCellPhone.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { InplaceInputPhoneDisplayMode } from '@/ui/display/component/InplaceInputPhoneDisplayMode'; -import { InplaceInputTextCellEditMode } from '@/ui/inplace-input/components/InplaceInputTextCellEditMode'; - -import { EditableCell } from '../components/EditableCell'; - -type OwnProps = { - placeholder?: string; - value: string; - onSubmit?: (newText: string) => void; -}; - -export function EditableCellPhone({ value, placeholder, onSubmit }: OwnProps) { - return ( - onSubmit?.(newText)} - /> - } - nonEditModeContent={} - /> - ); -} diff --git a/front/src/modules/ui/table/editable-cell/types/EditableCellRelationCreateButton.tsx b/front/src/modules/ui/table/editable-cell/types/EditableCellRelationCreateButton.tsx deleted file mode 100644 index 7c1d22ca0..000000000 --- a/front/src/modules/ui/table/editable-cell/types/EditableCellRelationCreateButton.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import styled from '@emotion/styled'; - -export const EditableCellRelationCreateButton = styled.button` - align-items: center; - background: none; - border: none; - border-radius: ${({ theme }) => theme.border.radius.sm}; - cursor: pointer; - display: flex; - font-family: 'Inter'; - font-size: ${({ theme }) => theme.font.size.md}; - gap: ${({ theme }) => theme.spacing(2)}; - height: 31px; - padding-bottom: ${({ theme }) => theme.spacing(1)}; - padding-left: ${({ theme }) => theme.spacing(1)}; - padding-top: ${({ theme }) => theme.spacing(1)}; - user-select: none; - width: 100%; -`; diff --git a/front/src/modules/ui/table/editable-cell/types/EditableCellText.tsx b/front/src/modules/ui/table/editable-cell/types/EditableCellText.tsx deleted file mode 100644 index eb7bac805..000000000 --- a/front/src/modules/ui/table/editable-cell/types/EditableCellText.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { InplaceInputTextDisplayMode } from '@/ui/display/component/InplaceInputTextDisplayMode'; -import { InplaceInputTextCellEditMode } from '@/ui/inplace-input/components/InplaceInputTextCellEditMode'; - -import { CellSkeleton } from '../components/CellSkeleton'; -import { EditableCell } from '../components/EditableCell'; - -type OwnProps = { - placeholder?: string; - value: string; - editModeHorizontalAlign?: 'left' | 'right'; - loading?: boolean; - onSubmit?: (newText: string) => void; -}; - -export function EditableCellText({ - value, - placeholder, - editModeHorizontalAlign, - loading, - onSubmit, -}: OwnProps) { - return ( - onSubmit?.(newText)} - /> - } - nonEditModeContent={ - loading ? ( - - ) : ( - {value} - ) - } - > - ); -} diff --git a/front/src/modules/ui/table/editable-cell/types/EditableCellURL.tsx b/front/src/modules/ui/table/editable-cell/types/EditableCellURL.tsx deleted file mode 100644 index 8968f3fa4..000000000 --- a/front/src/modules/ui/table/editable-cell/types/EditableCellURL.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { InplaceInputTextCellEditMode } from '@/ui/inplace-input/components/InplaceInputTextCellEditMode'; - -import { RawLink } from '../../../link/components/RawLink'; -import { CellSkeleton } from '../components/CellSkeleton'; -import { EditableCell } from '../components/EditableCell'; - -type OwnProps = { - placeholder?: string; - url: string; - onChange?: (newURL: string) => void; - editModeHorizontalAlign?: 'left' | 'right'; - loading?: boolean; - onSubmit?: (newURL: string) => void; - onCancel?: () => void; -}; - -export function EditableCellURL({ - url, - placeholder, - editModeHorizontalAlign, - loading, - onSubmit, -}: OwnProps) { - return ( - onSubmit?.(newURL)} - /> - } - nonEditModeContent={ - loading ? ( - - ) : ( - e.stopPropagation()} href={url ?? ''}> - {url} - - ) - } - > - ); -} diff --git a/front/src/modules/ui/table/editable-cell/types/EditableChip.tsx b/front/src/modules/ui/table/editable-cell/types/EditableChip.tsx deleted file mode 100644 index 2cce7e079..000000000 --- a/front/src/modules/ui/table/editable-cell/types/EditableChip.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { ReactNode, useEffect, useState } from 'react'; -import styled from '@emotion/styled'; - -import { InplaceInputTextCellEditMode } from '../../../inplace-input/components/InplaceInputTextCellEditMode'; -import { EditableCell } from '../components/EditableCell'; - -export type EditableChipProps = { - placeholder?: string; - value: string; - editModeHorizontalAlign?: 'left' | 'right'; - ChipComponent: React.ReactNode; - activityCount?: number; - onCommentClick?: (event: React.MouseEvent) => void; - rightEndContents?: ReactNode[]; - onSubmit?: (newValue: string) => void; - onCancel?: () => void; -}; - -const NoEditModeContainer = styled.div` - align-items: center; - display: flex; - justify-content: space-between; - width: 100%; -`; - -const RightContainer = styled.div` - margin-left: ${(props) => props.theme.spacing(1)}; -`; - -// TODO: move right end content in EditableCell -export function EditableCellChip({ - value, - placeholder, - editModeHorizontalAlign, - ChipComponent, - rightEndContents, - onSubmit, -}: EditableChipProps) { - const [inputValue, setInputValue] = useState(value); - - useEffect(() => { - setInputValue(value); - }, [value]); - - const handleRightEndContentClick = ( - event: React.MouseEvent, - ) => { - event.stopPropagation(); - }; - - return ( - onSubmit?.(newValue)} - /> - } - nonEditModeContent={ - - {ChipComponent} - - {rightEndContents && - rightEndContents.length > 0 && - rightEndContents.map((content, index) => ( -
- {content} -
- ))} - - - } - /> - ); -} diff --git a/front/src/modules/ui/table/hooks/useInitializeEntityTableFilters.ts b/front/src/modules/ui/table/hooks/useInitializeEntityTableFilters.ts index d066271e0..130e5e6fb 100644 --- a/front/src/modules/ui/table/hooks/useInitializeEntityTableFilters.ts +++ b/front/src/modules/ui/table/hooks/useInitializeEntityTableFilters.ts @@ -2,7 +2,7 @@ import { useEffect } from 'react'; import { availableFiltersScopedState } from '@/ui/filter-n-sort/states/availableFiltersScopedState'; import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition'; -import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState'; +import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { TableContext } from '../states/TableContext'; diff --git a/front/src/modules/ui/table/hooks/useLeaveTableFocus.ts b/front/src/modules/ui/table/hooks/useLeaveTableFocus.ts index defb46cdd..a551f0961 100644 --- a/front/src/modules/ui/table/hooks/useLeaveTableFocus.ts +++ b/front/src/modules/ui/table/hooks/useLeaveTableFocus.ts @@ -1,7 +1,7 @@ import { useRecoilCallback } from 'recoil'; -import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope'; -import { currentHotkeyScopeState } from '@/ui/hotkey/states/internal/currentHotkeyScopeState'; +import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; +import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState'; import { isSoftFocusActiveState } from '../states/isSoftFocusActiveState'; import { TableHotkeyScope } from '../types/TableHotkeyScope'; diff --git a/front/src/modules/ui/table/hooks/useMapKeyboardToSoftFocus.ts b/front/src/modules/ui/table/hooks/useMapKeyboardToSoftFocus.ts index ddc330cb3..93db2d60a 100644 --- a/front/src/modules/ui/table/hooks/useMapKeyboardToSoftFocus.ts +++ b/front/src/modules/ui/table/hooks/useMapKeyboardToSoftFocus.ts @@ -1,7 +1,7 @@ import { Key } from 'ts-key-enum'; -import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys'; -import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope'; +import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; +import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; import { TableHotkeyScope } from '../types/TableHotkeyScope'; diff --git a/front/src/modules/ui/table/hooks/useSetEntityTableData.ts b/front/src/modules/ui/table/hooks/useSetEntityTableData.ts index 688c64e17..70f75806b 100644 --- a/front/src/modules/ui/table/hooks/useSetEntityTableData.ts +++ b/front/src/modules/ui/table/hooks/useSetEntityTableData.ts @@ -2,7 +2,6 @@ import { useRecoilCallback } from 'recoil'; import { availableFiltersScopedState } from '@/ui/filter-n-sort/states/availableFiltersScopedState'; import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition'; -import { useContextScopeId } from '@/ui/recoil-scope/hooks/useContextScopeId'; import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; import { entityTableDimensionsState } from '@/ui/table/states/entityTableDimensionsState'; import { isFetchingEntityTableDataState } from '@/ui/table/states/isFetchingEntityTableDataState'; @@ -14,6 +13,7 @@ import { ViewFieldDefinition, ViewFieldMetadata, } from '@/ui/table/types/ViewField'; +import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId'; export function useSetEntityTableData() { const resetTableRowSelection = useResetTableRowSelection(); diff --git a/front/src/modules/ui/table/states/CellHotkeyScopeContext.ts b/front/src/modules/ui/table/states/CellHotkeyScopeContext.ts index 434fb72e7..15419e73d 100644 --- a/front/src/modules/ui/table/states/CellHotkeyScopeContext.ts +++ b/front/src/modules/ui/table/states/CellHotkeyScopeContext.ts @@ -1,5 +1,5 @@ import { createContext } from 'react'; -import { HotkeyScope } from '../../hotkey/types/HotkeyScope'; +import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; export const CellHotkeyScopeContext = createContext(null); diff --git a/front/src/modules/ui/table/table-header/components/__stories__/TableHeader.stories.tsx b/front/src/modules/ui/table/table-header/components/__stories__/TableHeader.stories.tsx deleted file mode 100644 index 776c0301d..000000000 --- a/front/src/modules/ui/table/table-header/components/__stories__/TableHeader.stories.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { userEvent, within } from '@storybook/testing-library'; - -import { IconList } from '@/ui/icon/index'; -import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope'; -import { availableSorts } from '~/pages/companies/companies-sorts'; - -import { ComponentWithRouterDecorator } from '../../../../../../testing/decorators/ComponentWithRouterDecorator'; -import { CompanyEntityTableDataMocked } from '../../../../../companies/table/components/CompanyEntityTableDataMocked'; -import { TableContext } from '../../../states/TableContext'; -import { TableHeader } from '../TableHeader'; - -const meta: Meta = { - title: 'UI/Table/TableHeader', - component: TableHeader, - decorators: [ - (Story) => ( - - - - - ), - ComponentWithRouterDecorator, - ], - argTypes: { viewIcon: { control: false } }, - args: { - viewName: 'ViewName', - viewIcon: , - availableSorts, - }, -}; - -export default meta; -type Story = StoryObj; - -export const Empty: Story = {}; - -export const WithSortsAndFilters: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - const outsideClick = await canvas.findByText('ViewName'); - - userEvent.click(await canvas.findByText('Filter')); - userEvent.click(await canvas.findByText('Name')); - const nameInput = await canvas.findByPlaceholderText('Name'); - userEvent.type(nameInput, 'My name'); - userEvent.click(outsideClick); - - userEvent.click(await canvas.findByText('Sort')); - userEvent.click(await canvas.findByText('Name')); - - userEvent.click(await canvas.findByText('Sort')); - userEvent.click(await canvas.findByText('Creation')); - - userEvent.click(await canvas.findByText('Sort')); - userEvent.click(await canvas.findByText('Address')); - - userEvent.click(await canvas.findByText('Filter')); - userEvent.click(await canvas.findByText('Employees')); - const employeesInput = await canvas.findByPlaceholderText('Employees'); - userEvent.type(employeesInput, '12'); - - userEvent.click(await canvas.findByText('Sort')); - userEvent.click(await canvas.findByText('Url')); - - userEvent.click(await canvas.findByText('Filter')); - userEvent.click(await canvas.findByText('Created at')); - userEvent.click(await canvas.findByText('6')); - userEvent.click(outsideClick); - }, -}; diff --git a/front/src/modules/ui/table/types/ViewField.ts b/front/src/modules/ui/table/types/ViewField.ts index 6ae71e5d1..d5af391dd 100644 --- a/front/src/modules/ui/table/types/ViewField.ts +++ b/front/src/modules/ui/table/types/ViewField.ts @@ -1,5 +1,5 @@ -import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect'; -import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect'; +import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect'; +import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; export type ViewFieldType = | 'text' diff --git a/front/src/modules/ui/themes/assets/dark-noise.jpg b/front/src/modules/ui/theme/assets/dark-noise.jpg similarity index 100% rename from front/src/modules/ui/themes/assets/dark-noise.jpg rename to front/src/modules/ui/theme/assets/dark-noise.jpg diff --git a/front/src/modules/ui/themes/assets/light-noise.png b/front/src/modules/ui/theme/assets/light-noise.png similarity index 100% rename from front/src/modules/ui/themes/assets/light-noise.png rename to front/src/modules/ui/theme/assets/light-noise.png diff --git a/front/src/modules/ui/themes/components/AppThemeProvider.tsx b/front/src/modules/ui/theme/components/AppThemeProvider.tsx similarity index 91% rename from front/src/modules/ui/themes/components/AppThemeProvider.tsx rename to front/src/modules/ui/theme/components/AppThemeProvider.tsx index 768691d4e..d34b332e6 100644 --- a/front/src/modules/ui/themes/components/AppThemeProvider.tsx +++ b/front/src/modules/ui/theme/components/AppThemeProvider.tsx @@ -1,6 +1,6 @@ import { ThemeProvider } from '@emotion/react'; -import { darkTheme, lightTheme } from '@/ui/themes/themes'; +import { darkTheme, lightTheme } from '@/ui/theme/constants/theme'; import { ColorScheme } from '~/generated/graphql'; import { useColorScheme } from '../hooks/useColorScheme'; diff --git a/front/src/modules/ui/themes/accent.ts b/front/src/modules/ui/theme/constants/accent.ts similarity index 100% rename from front/src/modules/ui/themes/accent.ts rename to front/src/modules/ui/theme/constants/accent.ts diff --git a/front/src/modules/ui/themes/animation.ts b/front/src/modules/ui/theme/constants/animation.ts similarity index 100% rename from front/src/modules/ui/themes/animation.ts rename to front/src/modules/ui/theme/constants/animation.ts diff --git a/front/src/modules/ui/themes/background.ts b/front/src/modules/ui/theme/constants/background.ts similarity index 91% rename from front/src/modules/ui/themes/background.ts rename to front/src/modules/ui/theme/constants/background.ts index a78eeac31..20a54109f 100644 --- a/front/src/modules/ui/themes/background.ts +++ b/front/src/modules/ui/theme/constants/background.ts @@ -1,5 +1,6 @@ -import DarkNoise from './assets/dark-noise.jpg'; -import LightNoise from './assets/light-noise.png'; +import DarkNoise from '../assets/dark-noise.jpg'; +import LightNoise from '../assets/light-noise.png'; + import { grayScale, rgba } from './colors'; export const backgroundLight = { diff --git a/front/src/modules/ui/themes/blur.ts b/front/src/modules/ui/theme/constants/blur.ts similarity index 100% rename from front/src/modules/ui/themes/blur.ts rename to front/src/modules/ui/theme/constants/blur.ts diff --git a/front/src/modules/ui/themes/border.ts b/front/src/modules/ui/theme/constants/border.ts similarity index 100% rename from front/src/modules/ui/themes/border.ts rename to front/src/modules/ui/theme/constants/border.ts diff --git a/front/src/modules/ui/themes/boxShadow.ts b/front/src/modules/ui/theme/constants/boxShadow.ts similarity index 100% rename from front/src/modules/ui/themes/boxShadow.ts rename to front/src/modules/ui/theme/constants/boxShadow.ts diff --git a/front/src/modules/ui/themes/colors.ts b/front/src/modules/ui/theme/constants/colors.ts similarity index 100% rename from front/src/modules/ui/themes/colors.ts rename to front/src/modules/ui/theme/constants/colors.ts diff --git a/front/src/modules/ui/themes/effects.ts b/front/src/modules/ui/theme/constants/effects.ts similarity index 96% rename from front/src/modules/ui/themes/effects.ts rename to front/src/modules/ui/theme/constants/effects.ts index 1b33187b8..a14d0d09c 100644 --- a/front/src/modules/ui/themes/effects.ts +++ b/front/src/modules/ui/theme/constants/effects.ts @@ -1,6 +1,6 @@ import { css } from '@emotion/react'; -import { ThemeType } from './themes'; +import { ThemeType } from './theme'; export const overlayBackground = (props: { theme: ThemeType }) => css` diff --git a/front/src/modules/ui/themes/font.ts b/front/src/modules/ui/theme/constants/font.ts similarity index 100% rename from front/src/modules/ui/themes/font.ts rename to front/src/modules/ui/theme/constants/font.ts diff --git a/front/src/modules/ui/themes/icon.ts b/front/src/modules/ui/theme/constants/icon.ts similarity index 100% rename from front/src/modules/ui/themes/icon.ts rename to front/src/modules/ui/theme/constants/icon.ts diff --git a/front/src/modules/ui/themes/tag.ts b/front/src/modules/ui/theme/constants/tag.ts similarity index 100% rename from front/src/modules/ui/themes/tag.ts rename to front/src/modules/ui/theme/constants/tag.ts diff --git a/front/src/modules/ui/themes/text.ts b/front/src/modules/ui/theme/constants/text.ts similarity index 100% rename from front/src/modules/ui/themes/text.ts rename to front/src/modules/ui/theme/constants/text.ts diff --git a/front/src/modules/ui/themes/themes.ts b/front/src/modules/ui/theme/constants/theme.ts similarity index 100% rename from front/src/modules/ui/themes/themes.ts rename to front/src/modules/ui/theme/constants/theme.ts diff --git a/front/src/modules/ui/themes/hooks/useColorScheme.ts b/front/src/modules/ui/theme/hooks/useColorScheme.ts similarity index 100% rename from front/src/modules/ui/themes/hooks/useColorScheme.ts rename to front/src/modules/ui/theme/hooks/useColorScheme.ts diff --git a/front/src/modules/ui/themes/hooks/useSystemColorScheme.ts b/front/src/modules/ui/theme/hooks/useSystemColorScheme.ts similarity index 100% rename from front/src/modules/ui/themes/hooks/useSystemColorScheme.ts rename to front/src/modules/ui/theme/hooks/useSystemColorScheme.ts diff --git a/front/src/modules/ui/title/components/H1Title.tsx b/front/src/modules/ui/typography/components/H1Title.tsx similarity index 100% rename from front/src/modules/ui/title/components/H1Title.tsx rename to front/src/modules/ui/typography/components/H1Title.tsx diff --git a/front/src/modules/ui/title/components/H2Title.tsx b/front/src/modules/ui/typography/components/H2Title.tsx similarity index 100% rename from front/src/modules/ui/title/components/H2Title.tsx rename to front/src/modules/ui/typography/components/H2Title.tsx diff --git a/front/src/modules/ui/title/components/__stories__/H1Title.stories.tsx b/front/src/modules/ui/typography/components/__stories__/H1Title.stories.tsx similarity index 100% rename from front/src/modules/ui/title/components/__stories__/H1Title.stories.tsx rename to front/src/modules/ui/typography/components/__stories__/H1Title.stories.tsx diff --git a/front/src/modules/ui/title/components/__stories__/H2Title.stories.tsx b/front/src/modules/ui/typography/components/__stories__/H2Title.stories.tsx similarity index 100% rename from front/src/modules/ui/title/components/__stories__/H2Title.stories.tsx rename to front/src/modules/ui/typography/components/__stories__/H2Title.stories.tsx diff --git a/front/src/modules/ui/animation/components/AnimatedEaseIn.tsx b/front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx similarity index 100% rename from front/src/modules/ui/animation/components/AnimatedEaseIn.tsx rename to front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx diff --git a/front/src/modules/ui/animation/components/AnimatedTextWord.tsx b/front/src/modules/ui/utilities/animation/components/AnimatedTextWord.tsx similarity index 100% rename from front/src/modules/ui/animation/components/AnimatedTextWord.tsx rename to front/src/modules/ui/utilities/animation/components/AnimatedTextWord.tsx diff --git a/front/src/modules/ui/hooks/__tests__/useListenClickOutsideArrayOfRef.test.tsx b/front/src/modules/ui/utilities/click-outside/hooks/__tests__/useListenClickOutsideArrayOfRef.test.tsx similarity index 100% rename from front/src/modules/ui/hooks/__tests__/useListenClickOutsideArrayOfRef.test.tsx rename to front/src/modules/ui/utilities/click-outside/hooks/__tests__/useListenClickOutsideArrayOfRef.test.tsx diff --git a/front/src/modules/ui/hooks/useListenClickOutside.ts b/front/src/modules/ui/utilities/click-outside/hooks/useListenClickOutside.ts similarity index 100% rename from front/src/modules/ui/hooks/useListenClickOutside.ts rename to front/src/modules/ui/utilities/click-outside/hooks/useListenClickOutside.ts diff --git a/front/src/modules/ui/debug/components/TimingProfiler.tsx b/front/src/modules/ui/utilities/debug/components/TimingProfiler.tsx similarity index 100% rename from front/src/modules/ui/debug/components/TimingProfiler.tsx rename to front/src/modules/ui/utilities/debug/components/TimingProfiler.tsx diff --git a/front/src/modules/ui/hotkey/constants/index.ts b/front/src/modules/ui/utilities/hotkey/constants/index.ts similarity index 100% rename from front/src/modules/ui/hotkey/constants/index.ts rename to front/src/modules/ui/utilities/hotkey/constants/index.ts diff --git a/front/src/modules/ui/hotkey/hooks/internal/useHotkeyScopes.ts b/front/src/modules/ui/utilities/hotkey/hooks/internal/useHotkeyScopes.ts similarity index 100% rename from front/src/modules/ui/hotkey/hooks/internal/useHotkeyScopes.ts rename to front/src/modules/ui/utilities/hotkey/hooks/internal/useHotkeyScopes.ts diff --git a/front/src/modules/ui/hotkey/hooks/useGoToHotkeys.ts b/front/src/modules/ui/utilities/hotkey/hooks/useGoToHotkeys.ts similarity index 100% rename from front/src/modules/ui/hotkey/hooks/useGoToHotkeys.ts rename to front/src/modules/ui/utilities/hotkey/hooks/useGoToHotkeys.ts diff --git a/front/src/modules/ui/hotkey/hooks/usePreviousHotkeyScope.ts b/front/src/modules/ui/utilities/hotkey/hooks/usePreviousHotkeyScope.ts similarity index 100% rename from front/src/modules/ui/hotkey/hooks/usePreviousHotkeyScope.ts rename to front/src/modules/ui/utilities/hotkey/hooks/usePreviousHotkeyScope.ts diff --git a/front/src/modules/ui/hotkey/hooks/useScopedHotkeyCallback.ts b/front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeyCallback.ts similarity index 100% rename from front/src/modules/ui/hotkey/hooks/useScopedHotkeyCallback.ts rename to front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeyCallback.ts diff --git a/front/src/modules/ui/hotkey/hooks/useScopedHotkeys.ts b/front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeys.ts similarity index 100% rename from front/src/modules/ui/hotkey/hooks/useScopedHotkeys.ts rename to front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeys.ts diff --git a/front/src/modules/ui/hotkey/hooks/useSequenceScopedHotkeys.ts b/front/src/modules/ui/utilities/hotkey/hooks/useSequenceScopedHotkeys.ts similarity index 100% rename from front/src/modules/ui/hotkey/hooks/useSequenceScopedHotkeys.ts rename to front/src/modules/ui/utilities/hotkey/hooks/useSequenceScopedHotkeys.ts diff --git a/front/src/modules/ui/hotkey/hooks/useSetHotkeyScope.ts b/front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts similarity index 100% rename from front/src/modules/ui/hotkey/hooks/useSetHotkeyScope.ts rename to front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts diff --git a/front/src/modules/ui/hotkey/states/internal/currentHotkeyScopeState.ts b/front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts similarity index 100% rename from front/src/modules/ui/hotkey/states/internal/currentHotkeyScopeState.ts rename to front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts diff --git a/front/src/modules/ui/hotkey/states/internal/internalHotkeysEnabledScopesState.ts b/front/src/modules/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState.ts similarity index 100% rename from front/src/modules/ui/hotkey/states/internal/internalHotkeysEnabledScopesState.ts rename to front/src/modules/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState.ts diff --git a/front/src/modules/ui/hotkey/states/internal/pendingHotkeysState.ts b/front/src/modules/ui/utilities/hotkey/states/internal/pendingHotkeysState.ts similarity index 100% rename from front/src/modules/ui/hotkey/states/internal/pendingHotkeysState.ts rename to front/src/modules/ui/utilities/hotkey/states/internal/pendingHotkeysState.ts diff --git a/front/src/modules/ui/hotkey/types/AppHotkeyScope.ts b/front/src/modules/ui/utilities/hotkey/types/AppHotkeyScope.ts similarity index 100% rename from front/src/modules/ui/hotkey/types/AppHotkeyScope.ts rename to front/src/modules/ui/utilities/hotkey/types/AppHotkeyScope.ts diff --git a/front/src/modules/ui/hotkey/types/CustomHotkeyScope.ts b/front/src/modules/ui/utilities/hotkey/types/CustomHotkeyScope.ts similarity index 100% rename from front/src/modules/ui/hotkey/types/CustomHotkeyScope.ts rename to front/src/modules/ui/utilities/hotkey/types/CustomHotkeyScope.ts diff --git a/front/src/modules/ui/hotkey/types/HotkeyScope.ts b/front/src/modules/ui/utilities/hotkey/types/HotkeyScope.ts similarity index 100% rename from front/src/modules/ui/hotkey/types/HotkeyScope.ts rename to front/src/modules/ui/utilities/hotkey/types/HotkeyScope.ts diff --git a/front/src/modules/ui/hotkey/utils/isNonTextWritingKey.ts b/front/src/modules/ui/utilities/hotkey/utils/isNonTextWritingKey.ts similarity index 100% rename from front/src/modules/ui/hotkey/utils/isNonTextWritingKey.ts rename to front/src/modules/ui/utilities/hotkey/utils/isNonTextWritingKey.ts diff --git a/front/src/modules/ui/hotkey/utils/isSameHotkeyScope.ts b/front/src/modules/ui/utilities/hotkey/utils/isSameHotkeyScope.ts similarity index 100% rename from front/src/modules/ui/hotkey/utils/isSameHotkeyScope.ts rename to front/src/modules/ui/utilities/hotkey/utils/isSameHotkeyScope.ts diff --git a/front/src/modules/ui/hooks/useIsPageLoading.ts b/front/src/modules/ui/utilities/loading-state/hooks/useIsPageLoading.ts similarity index 100% rename from front/src/modules/ui/hooks/useIsPageLoading.ts rename to front/src/modules/ui/utilities/loading-state/hooks/useIsPageLoading.ts diff --git a/front/src/modules/ui/states/currentPageLocationState.ts b/front/src/modules/ui/utilities/loading-state/states/currentPageLocationState.ts similarity index 100% rename from front/src/modules/ui/states/currentPageLocationState.ts rename to front/src/modules/ui/utilities/loading-state/states/currentPageLocationState.ts diff --git a/front/src/modules/ui/recoil-scope/components/RecoilScope.tsx b/front/src/modules/ui/utilities/recoil-scope/components/RecoilScope.tsx similarity index 100% rename from front/src/modules/ui/recoil-scope/components/RecoilScope.tsx rename to front/src/modules/ui/utilities/recoil-scope/components/RecoilScope.tsx diff --git a/front/src/modules/ui/recoil-scope/hooks/useContextScopeId.ts b/front/src/modules/ui/utilities/recoil-scope/hooks/useContextScopeId.ts similarity index 100% rename from front/src/modules/ui/recoil-scope/hooks/useContextScopeId.ts rename to front/src/modules/ui/utilities/recoil-scope/hooks/useContextScopeId.ts diff --git a/front/src/modules/ui/recoil-scope/hooks/useRecoilScopedState.ts b/front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedState.ts similarity index 100% rename from front/src/modules/ui/recoil-scope/hooks/useRecoilScopedState.ts rename to front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedState.ts diff --git a/front/src/modules/ui/recoil-scope/hooks/useRecoilScopedValue.ts b/front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedValue.ts similarity index 100% rename from front/src/modules/ui/recoil-scope/hooks/useRecoilScopedValue.ts rename to front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedValue.ts diff --git a/front/src/modules/ui/recoil-scope/states/RecoilScopeContext.ts b/front/src/modules/ui/utilities/recoil-scope/states/RecoilScopeContext.ts similarity index 100% rename from front/src/modules/ui/recoil-scope/states/RecoilScopeContext.ts rename to front/src/modules/ui/utilities/recoil-scope/states/RecoilScopeContext.ts diff --git a/front/src/modules/ui/recoil-scope/utils/getSnapshotScopedState.ts b/front/src/modules/ui/utilities/recoil-scope/utils/getSnapshotScopedState.ts similarity index 100% rename from front/src/modules/ui/recoil-scope/utils/getSnapshotScopedState.ts rename to front/src/modules/ui/utilities/recoil-scope/utils/getSnapshotScopedState.ts diff --git a/front/src/modules/ui/recoil-scope/utils/getSnapshotState.ts b/front/src/modules/ui/utilities/recoil-scope/utils/getSnapshotState.ts similarity index 100% rename from front/src/modules/ui/recoil-scope/utils/getSnapshotState.ts rename to front/src/modules/ui/utilities/recoil-scope/utils/getSnapshotState.ts diff --git a/front/src/modules/ui/hooks/useIsMobile.ts b/front/src/modules/ui/utilities/responsive/hooks/useIsMobile.ts similarity index 71% rename from front/src/modules/ui/hooks/useIsMobile.ts rename to front/src/modules/ui/utilities/responsive/hooks/useIsMobile.ts index db6128cc1..75bdb3d85 100644 --- a/front/src/modules/ui/hooks/useIsMobile.ts +++ b/front/src/modules/ui/utilities/responsive/hooks/useIsMobile.ts @@ -1,6 +1,6 @@ import { useMediaQuery } from 'react-responsive'; -import { MOBILE_VIEWPORT } from '@/ui/themes/themes'; +import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme'; export function useIsMobile() { return useMediaQuery({ query: `(max-width: ${MOBILE_VIEWPORT}px)` }); diff --git a/front/src/modules/users/components/FilterDropdownUserSearchSelect.tsx b/front/src/modules/users/components/FilterDropdownUserSearchSelect.tsx index 609da0a5f..0a5ff223d 100644 --- a/front/src/modules/users/components/FilterDropdownUserSearchSelect.tsx +++ b/front/src/modules/users/components/FilterDropdownUserSearchSelect.tsx @@ -2,10 +2,10 @@ import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEn import { FilterDropdownEntitySearchSelect } from '@/ui/filter-n-sort/components/FilterDropdownEntitySearchSelect'; import { filterDropdownSearchInputScopedState } from '@/ui/filter-n-sort/states/filterDropdownSearchInputScopedState'; import { filterDropdownSelectedEntityIdScopedState } from '@/ui/filter-n-sort/states/filterDropdownSelectedEntityIdScopedState'; -import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState'; -import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue'; -import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect'; +import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect'; import { TableContext } from '@/ui/table/states/TableContext'; +import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; +import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; import { useSearchUserQuery } from '~/generated/graphql'; export function FilterDropdownUserSearchSelect() { diff --git a/front/src/modules/users/components/UserPicker.tsx b/front/src/modules/users/components/UserPicker.tsx index 902c3624a..3ad4e6cd0 100644 --- a/front/src/modules/users/components/UserPicker.tsx +++ b/front/src/modules/users/components/UserPicker.tsx @@ -1,9 +1,9 @@ import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery'; -import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState'; -import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect'; -import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState'; -import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect'; -import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect'; +import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect'; +import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState'; +import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect'; +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 = { diff --git a/front/src/modules/workspace/components/WorkspaceInviteLink.tsx b/front/src/modules/workspace/components/WorkspaceInviteLink.tsx index 3c6c163dc..bf87d1961 100644 --- a/front/src/modules/workspace/components/WorkspaceInviteLink.tsx +++ b/front/src/modules/workspace/components/WorkspaceInviteLink.tsx @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; import { Button, ButtonVariant } from '@/ui/button/components/Button'; import { IconCopy, IconLink } from '@/ui/icon'; -import { TextInput } from '@/ui/input/components/TextInput'; +import { TextInput } from '@/ui/input/text/components/TextInput'; import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar'; const StyledContainer = styled.div` diff --git a/front/src/pages/auth/CreateProfile.tsx b/front/src/pages/auth/CreateProfile.tsx index b7188d623..e1949ba89 100644 --- a/front/src/pages/auth/CreateProfile.tsx +++ b/front/src/pages/auth/CreateProfile.tsx @@ -14,10 +14,10 @@ import { currentUserState } from '@/auth/states/currentUserState'; import { ProfilePictureUploader } from '@/settings/profile/components/ProfilePictureUploader'; import { PageHotkeyScope } from '@/types/PageHotkeyScope'; import { MainButton } from '@/ui/button/components/MainButton'; -import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys'; -import { TextInput } from '@/ui/input/components/TextInput'; +import { TextInput } from '@/ui/input/text/components/TextInput'; import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar'; -import { H2Title } from '@/ui/title/components/H2Title'; +import { H2Title } from '@/ui/typography/components/H2Title'; +import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { GET_CURRENT_USER } from '@/users/queries'; import { useUpdateUserMutation } from '~/generated/graphql'; diff --git a/front/src/pages/auth/CreateWorkspace.tsx b/front/src/pages/auth/CreateWorkspace.tsx index 0fec97816..c39087e98 100644 --- a/front/src/pages/auth/CreateWorkspace.tsx +++ b/front/src/pages/auth/CreateWorkspace.tsx @@ -11,10 +11,10 @@ import { Title } from '@/auth/components/Title'; import { WorkspaceLogoUploader } from '@/settings/workspace/components/WorkspaceLogoUploader'; import { PageHotkeyScope } from '@/types/PageHotkeyScope'; import { MainButton } from '@/ui/button/components/MainButton'; -import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys'; -import { TextInput } from '@/ui/input/components/TextInput'; +import { TextInput } from '@/ui/input/text/components/TextInput'; import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar'; -import { H2Title } from '@/ui/title/components/H2Title'; +import { H2Title } from '@/ui/typography/components/H2Title'; +import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { GET_CURRENT_USER } from '@/users/queries'; import { useUpdateWorkspaceMutation } from '~/generated/graphql'; diff --git a/front/src/pages/companies/Companies.tsx b/front/src/pages/companies/Companies.tsx index 02984a2ae..77dd9e2f8 100644 --- a/front/src/pages/companies/Companies.tsx +++ b/front/src/pages/companies/Companies.tsx @@ -4,15 +4,13 @@ import styled from '@emotion/styled'; import { GET_COMPANIES } from '@/companies/queries'; import { CompanyTable } from '@/companies/table/components/CompanyTable'; -import { CompanyTable as CompanyTableV2 } from '@/companies/table/components/CompanyTableV2'; import { TableActionBarButtonCreateActivityCompany } from '@/companies/table/components/TableActionBarButtonCreateActivityCompany'; import { TableActionBarButtonDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies'; import { IconBuildingSkyscraper } from '@/ui/icon'; import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; -import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope'; import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar'; import { TableContext } from '@/ui/table/states/TableContext'; -import { ACTIVATE_VIEW_FIELDS } from '~/App'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { useInsertOneCompanyMutation } from '~/generated/graphql'; import { SEARCH_COMPANY_QUERY } from '../../modules/search/queries/search'; @@ -43,10 +41,6 @@ export function Companies() { const theme = useTheme(); - const CompanyTableComponent = ACTIVATE_VIEW_FIELDS - ? CompanyTableV2 - : CompanyTable; - return ( <> - + diff --git a/front/src/pages/companies/CompaniesMockMode.tsx b/front/src/pages/companies/CompaniesMockMode.tsx index 1682eb3a4..bc6ff9af5 100644 --- a/front/src/pages/companies/CompaniesMockMode.tsx +++ b/front/src/pages/companies/CompaniesMockMode.tsx @@ -6,9 +6,9 @@ import { TableActionBarButtonCreateActivityCompany } from '@/companies/table/com import { TableActionBarButtonDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies'; import { IconBuildingSkyscraper } from '@/ui/icon'; import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; -import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope'; import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar'; import { TableContext } from '@/ui/table/states/TableContext'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; const StyledTableContainer = styled.div` display: flex; diff --git a/front/src/pages/companies/companies-filters.tsx b/front/src/pages/companies/companies-filters.tsx index c8fd77b01..9a981c0af 100644 --- a/front/src/pages/companies/companies-filters.tsx +++ b/front/src/pages/companies/companies-filters.tsx @@ -7,7 +7,7 @@ import { IconUser, IconUsers, } from '@/ui/icon/index'; -import { icon } from '@/ui/themes/icon'; +import { icon } from '@/ui/theme/constants/icon'; import { FilterDropdownUserSearchSelect } from '@/users/components/FilterDropdownUserSearchSelect'; import { Company } from '~/generated/graphql'; diff --git a/front/src/pages/opportunities/Opportunities.tsx b/front/src/pages/opportunities/Opportunities.tsx index c04012ba5..7e74bb8f7 100644 --- a/front/src/pages/opportunities/Opportunities.tsx +++ b/front/src/pages/opportunities/Opportunities.tsx @@ -13,7 +13,7 @@ import { import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers'; import { IconTargetArrow } from '@/ui/icon/index'; import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; -import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { PipelineProgressOrderByWithRelationInput } from '~/generated/graphql'; import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions'; diff --git a/front/src/pages/opportunities/opportunities-filters.tsx b/front/src/pages/opportunities/opportunities-filters.tsx index 4d5d21fcf..b75cd4a27 100644 --- a/front/src/pages/opportunities/opportunities-filters.tsx +++ b/front/src/pages/opportunities/opportunities-filters.tsx @@ -7,7 +7,7 @@ import { IconCurrencyDollar, IconUser, } from '@/ui/icon/index'; -import { icon } from '@/ui/themes/icon'; +import { icon } from '@/ui/theme/constants/icon'; import { PipelineProgress } from '~/generated/graphql'; import { FilterDropdownPeopleSearchSelect } from '../../modules/people/components/FilterDropdownPeopleSearchSelect'; diff --git a/front/src/pages/opportunities/opportunitiesBoardOptions.tsx b/front/src/pages/opportunities/opportunitiesBoardOptions.tsx index 5f6a5aa94..301732efd 100644 --- a/front/src/pages/opportunities/opportunitiesBoardOptions.tsx +++ b/front/src/pages/opportunities/opportunitiesBoardOptions.tsx @@ -1,7 +1,7 @@ import { CompanyBoardCard } from '@/companies/components/CompanyBoardCard'; import { NewCompanyProgressButton } from '@/companies/components/NewCompanyProgressButton'; import { BoardOptions } from '@/pipeline/types/BoardOptions'; -import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { opportunitiesFilters } from './opportunities-filters'; import { opportunitiesSorts } from './opportunities-sorts'; diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index 395dd9852..edbf396dc 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -4,15 +4,13 @@ import styled from '@emotion/styled'; import { GET_PEOPLE } from '@/people/queries'; import { PeopleTable } from '@/people/table/components/PeopleTable'; -import { PeopleTable as PeopleTableV2 } from '@/people/table/components/PeopleTableV2'; import { TableActionBarButtonCreateActivityPeople } from '@/people/table/components/TableActionBarButtonCreateActivityPeople'; import { TableActionBarButtonDeletePeople } from '@/people/table/components/TableActionBarButtonDeletePeople'; import { IconUser } from '@/ui/icon'; import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; -import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope'; import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar'; import { TableContext } from '@/ui/table/states/TableContext'; -import { ACTIVATE_VIEW_FIELDS } from '~/App'; +import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { useInsertOnePersonMutation } from '~/generated/graphql'; const StyledTableContainer = styled.div` @@ -37,10 +35,6 @@ export function People() { const theme = useTheme(); - const PeopleTableComponent = ACTIVATE_VIEW_FIELDS - ? PeopleTableV2 - : PeopleTable; - return ( - + diff --git a/front/src/pages/people/people-filters.tsx b/front/src/pages/people/people-filters.tsx index 628e6d04d..5ce2af084 100644 --- a/front/src/pages/people/people-filters.tsx +++ b/front/src/pages/people/people-filters.tsx @@ -9,7 +9,7 @@ import { IconUser, } from '@/ui/icon/index'; import { TableContext } from '@/ui/table/states/TableContext'; -import { icon } from '@/ui/themes/icon'; +import { icon } from '@/ui/theme/constants/icon'; import { Person } from '~/generated/graphql'; export const peopleFilters: FilterDefinitionByEntity[] = [ diff --git a/front/src/pages/settings/SettingsExperience.tsx b/front/src/pages/settings/SettingsExperience.tsx index 64316e314..262ed9e19 100644 --- a/front/src/pages/settings/SettingsExperience.tsx +++ b/front/src/pages/settings/SettingsExperience.tsx @@ -4,9 +4,9 @@ import { ColorSchemePicker } from '@/ui/color-scheme/components/ColorSchemePicke import { IconSettings } from '@/ui/icon'; import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer'; import { Section } from '@/ui/section/components/Section'; -import { useColorScheme } from '@/ui/themes/hooks/useColorScheme'; -import { H1Title } from '@/ui/title/components/H1Title'; -import { H2Title } from '@/ui/title/components/H2Title'; +import { useColorScheme } from '@/ui/theme/hooks/useColorScheme'; +import { H1Title } from '@/ui/typography/components/H1Title'; +import { H2Title } from '@/ui/typography/components/H2Title'; const StyledContainer = styled.div` display: flex; diff --git a/front/src/pages/settings/SettingsProfile.tsx b/front/src/pages/settings/SettingsProfile.tsx index 788c1e958..9a1581bb9 100644 --- a/front/src/pages/settings/SettingsProfile.tsx +++ b/front/src/pages/settings/SettingsProfile.tsx @@ -7,8 +7,8 @@ import { ProfilePictureUploader } from '@/settings/profile/components/ProfilePic import { IconSettings } from '@/ui/icon'; import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer'; import { Section } from '@/ui/section/components/Section'; -import { H1Title } from '@/ui/title/components/H1Title'; -import { H2Title } from '@/ui/title/components/H2Title'; +import { H1Title } from '@/ui/typography/components/H1Title'; +import { H2Title } from '@/ui/typography/components/H2Title'; const StyledContainer = styled.div` display: flex; diff --git a/front/src/pages/settings/SettingsWorkspace.tsx b/front/src/pages/settings/SettingsWorkspace.tsx index 6b710ac95..5ecc2d2e5 100644 --- a/front/src/pages/settings/SettingsWorkspace.tsx +++ b/front/src/pages/settings/SettingsWorkspace.tsx @@ -6,8 +6,8 @@ import { WorkspaceLogoUploader } from '@/settings/workspace/components/Workspace import { IconSettings } from '@/ui/icon'; import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer'; import { Section } from '@/ui/section/components/Section'; -import { H1Title } from '@/ui/title/components/H1Title'; -import { H2Title } from '@/ui/title/components/H2Title'; +import { H1Title } from '@/ui/typography/components/H1Title'; +import { H2Title } from '@/ui/typography/components/H2Title'; const StyledContainer = styled.div` display: flex; diff --git a/front/src/pages/settings/SettingsWorkspaceMembers.tsx b/front/src/pages/settings/SettingsWorkspaceMembers.tsx index 8be251212..f1a8698a2 100644 --- a/front/src/pages/settings/SettingsWorkspaceMembers.tsx +++ b/front/src/pages/settings/SettingsWorkspaceMembers.tsx @@ -11,8 +11,8 @@ import { import { IconSettings, IconTrash } from '@/ui/icon'; import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer'; import { Section } from '@/ui/section/components/Section'; -import { H1Title } from '@/ui/title/components/H1Title'; -import { H2Title } from '@/ui/title/components/H2Title'; +import { H1Title } from '@/ui/typography/components/H1Title'; +import { H2Title } from '@/ui/typography/components/H2Title'; import { WorkspaceInviteLink } from '@/workspace/components/WorkspaceInviteLink'; import { WorkspaceMemberCard } from '@/workspace/components/WorkspaceMemberCard'; import { diff --git a/front/src/sync-hooks/AuthAutoRouter.tsx b/front/src/sync-hooks/AuthAutoRouter.tsx index 8cd32a7be..fe9eec3f5 100644 --- a/front/src/sync-hooks/AuthAutoRouter.tsx +++ b/front/src/sync-hooks/AuthAutoRouter.tsx @@ -1,16 +1,17 @@ import { useEffect, useState } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; +import { useEventTracker } from '@/analytics/hooks/useEventTracker'; +import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus'; +import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus'; +import { AppBasePath } from '@/types/AppBasePath'; +import { AppPath } from '@/types/AppPath'; +import { PageHotkeyScope } from '@/types/PageHotkeyScope'; +import { SettingsPath } from '@/types/SettingsPath'; +import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope'; +import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; + import { useIsMatchingLocation } from '../hooks/useIsMatchingLocation'; -import { useEventTracker } from '../modules/analytics/hooks/useEventTracker'; -import { useOnboardingStatus } from '../modules/auth/hooks/useOnboardingStatus'; -import { OnboardingStatus } from '../modules/auth/utils/getOnboardingStatus'; -import { AppBasePath } from '../modules/types/AppBasePath'; -import { AppPath } from '../modules/types/AppPath'; -import { PageHotkeyScope } from '../modules/types/PageHotkeyScope'; -import { SettingsPath } from '../modules/types/SettingsPath'; -import { useSetHotkeyScope } from '../modules/ui/hotkey/hooks/useSetHotkeyScope'; -import { TableHotkeyScope } from '../modules/ui/table/types/TableHotkeyScope'; export function AuthAutoRouter() { const navigate = useNavigate(); diff --git a/front/src/sync-hooks/GotoHotkeysHooks.tsx b/front/src/sync-hooks/GotoHotkeysHooks.tsx index cc91c9cdc..c9b480f34 100644 --- a/front/src/sync-hooks/GotoHotkeysHooks.tsx +++ b/front/src/sync-hooks/GotoHotkeysHooks.tsx @@ -1,4 +1,4 @@ -import { useGoToHotkeys } from '@/ui/hotkey/hooks/useGoToHotkeys'; +import { useGoToHotkeys } from '@/ui/utilities/hotkey/hooks/useGoToHotkeys'; export function GotoHotkeysHooks() { useGoToHotkeys('p', '/people'); diff --git a/front/src/testing/InitializeHotkeyStorybookHook.tsx b/front/src/testing/InitializeHotkeyStorybookHook.tsx index 767cddc86..c1d48314d 100644 --- a/front/src/testing/InitializeHotkeyStorybookHook.tsx +++ b/front/src/testing/InitializeHotkeyStorybookHook.tsx @@ -1,7 +1,7 @@ import { useEffect } from 'react'; -import { useSetHotkeyScope } from '../modules/ui/hotkey/hooks/useSetHotkeyScope'; -import { AppHotkeyScope } from '../modules/ui/hotkey/types/AppHotkeyScope'; +import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; +import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope'; export function InitializeHotkeyStorybookHook() { const setHotkeyScope = useSetHotkeyScope();