Migrate to twenty-ui - input/button (#7994)

This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-7529](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7529).

 --- 

### Description

- Migrated all button components to `twenty-ui`    \
  \
  `Button`\
  `ButtonGroup`\
  `ColorPickerButton`\
  `FloatingButton`\
  `FloatingButtonGroup`\
  `FloatingIconButton`\
  `FloatingIconButtonGroup`\
  `IconButton`\
  `IconButtonGroup`\
  `LightButton`\
  `LightIconButton`\
  `LightIconButtonGroup`\
  `MainButton`\
  \
  Fixes twentyhq/private-issues#89

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/ui/layout/bottom-bar/components/__stories__/BottomBar.stories.tsx

@@ -1,11 +1,9 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { IconPlus } from 'twenty-ui';
-
-import { Button } from '@/ui/input/button/components/Button';
 import { BottomBar } from '@/ui/layout/bottom-bar/components/BottomBar';
 import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState';
 import styled from '@emotion/styled';
+import { Meta, StoryObj } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
+import { Button, IconPlus } from 'twenty-ui';
 
 const StyledContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx

@@ -1,9 +1,7 @@
-import { ComponentProps, MouseEvent } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
-
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
+import { ComponentProps, MouseEvent } from 'react';
+import { IconComponent, LightIconButton } from 'twenty-ui';
 
 const StyledHeader = styled.li`
   align-items: center;

packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx

@@ -3,9 +3,8 @@ import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, waitFor, within } from '@storybook/test';
 import { PlayFunction } from '@storybook/types';
 import { useState } from 'react';
-import { Avatar, ComponentDecorator } from 'twenty-ui';
+import { Avatar, Button, ComponentDecorator } from 'twenty-ui';
 
-import { Button } from '@/ui/input/button/components/Button';
 import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemMultiSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar';

packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx

@@ -1,10 +1,9 @@
 import styled from '@emotion/styled';
 import { AnimatePresence, LayoutGroup } from 'framer-motion';
 import { ReactNode, useState } from 'react';
-import { H1Title, H1TitleFontColor } from 'twenty-ui';
+import { Button, ButtonAccent, H1Title, H1TitleFontColor } from 'twenty-ui';
 import { useDebouncedCallback } from 'use-debounce';
 
-import { Button, ButtonAccent } from '@/ui/input/button/components/Button';
 import { TextInput } from '@/ui/input/components/TextInput';
 
 import { Modal, ModalVariants } from '@/ui/layout/modal/components/Modal';

packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx

@@ -1,6 +1,4 @@
-import { IconPlus } from 'twenty-ui';
-
-import { IconButton } from '@/ui/input/button/components/IconButton';
+import { IconButton, IconPlus } from 'twenty-ui';
 
 type PageAddButtonProps = {
   onClick: () => void;

packages/twenty-front/src/modules/ui/layout/page/components/PageFavoriteButton.tsx

@@ -1,6 +1,4 @@
-import { IconHeart } from 'twenty-ui';
-
-import { IconButton } from '@/ui/input/button/components/IconButton';
+import { IconButton, IconHeart } from 'twenty-ui';
 
 type PageFavoriteButtonProps = {
   isFavorite: boolean;

packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { ReactNode } from 'react';
 import { useRecoilValue } from 'recoil';
 import {
+  IconButton,
   IconChevronDown,
   IconChevronUp,
   IconComponent,
@@ -11,7 +12,6 @@ import {
   OverflowingTextWithTooltip,
 } from 'twenty-ui';
 
-import { IconButton } from '@/ui/input/button/components/IconButton';
 import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton';
 
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx

@@ -1,6 +1,4 @@
-import { IconX } from 'twenty-ui';
-
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
+import { IconX, LightIconButton } from 'twenty-ui';
 
 import { useRightDrawer } from '../hooks/useRightDrawer';
 

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx

@@ -1,6 +1,5 @@
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
-import { IconExternalLink, UndecoratedLink } from 'twenty-ui';
+import { IconExternalLink, LightIconButton, UndecoratedLink } from 'twenty-ui';
 
 export const RightDrawerTopBarExpandButton = ({ to }: { to: string }) => {
   const { closeRightDrawer } = useRightDrawer();

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarMinimizeButton.tsx

@@ -1,6 +1,5 @@
-import { IconMinus } from 'twenty-ui';
+import { IconMinus, LightIconButton } from 'twenty-ui';
 
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 
 export const RightDrawerTopBarMinimizeButton = () => {

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx

@@ -1,10 +1,9 @@
 import styled from '@emotion/styled';
-import { IconCheckbox, IconNotes, IconPlus } from 'twenty-ui';
+import { IconButton, IconCheckbox, IconNotes, IconPlus } from 'twenty-ui';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
-import { IconButton } from '@/ui/input/button/components/IconButton';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { SHOW_PAGE_ADD_BUTTON_DROPDOWN_ID } from '@/ui/layout/show-page/constants/ShowPageAddButtonDropdownId';

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx

@@ -1,11 +1,15 @@
 import styled from '@emotion/styled';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { IconDotsVertical, IconRestore, IconTrash } from 'twenty-ui';
+import {
+  IconButton,
+  IconDotsVertical,
+  IconRestore,
+  IconTrash,
+} from 'twenty-ui';
 
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
-import { IconButton } from '@/ui/input/button/components/IconButton';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';