Migrate to twenty-ui - input components (#7914)

### Description

Migrate Input components: 

- CardPicker
- Radio
- RadioGroup
- Checkbox
- Toggle
- IconListViewGrip

### Demo

Radio Component on Storybook


![](https://assets-service.gitstart.com/4814/2d0c7436-9fab-4f3d-a5c4-be874e885789.png)

Checkbox component on Storybook


![](https://assets-service.gitstart.com/4814/07bcc040-cc92-4c7e-9be8-ca1a5f454993.png)

###### Fixes twentyhq/private-issues#92

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

packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx

@@ -1,11 +1,15 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconCalendar, OverflowingTextWithTooltip } from 'twenty-ui';
+import {
+  Checkbox,
+  CheckboxShape,
+  IconCalendar,
+  OverflowingTextWithTooltip,
+} from 'twenty-ui';
 
 import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
 import { ActivityTargetsInlineCell } from '@/activities/inline-cell/components/ActivityTargetsInlineCell';
 import { getActivitySummary } from '@/activities/utils/getActivitySummary';
-import { Checkbox, CheckboxShape } from '@/ui/input/components/Checkbox';
 import { beautifyExactDate, hasDatePassed } from '~/utils/date-utils';
 
 import { ActivityRow } from '@/activities/components/ActivityRow';

packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx

@@ -17,7 +17,6 @@ import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/
 import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
 import { RecordBoardScrollWrapperContext } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
@@ -29,6 +28,8 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import {
   AnimatedEaseInOut,
   AvatarChipVariant,
+  Checkbox,
+  CheckboxVariant,
   ChipSize,
   IconEye,
   IconEyeOff,

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx

@@ -4,7 +4,7 @@ import { useCallback, useContext } from 'react';
 import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
 import { RecordTableTd } from '@/object-record/record-table/record-table-cell/components/RecordTableTd';
 import { useSetCurrentRowSelected } from '@/object-record/record-table/record-table-row/hooks/useSetCurrentRowSelected';
-import { Checkbox } from '@/ui/input/components/Checkbox';
+import { Checkbox } from 'twenty-ui';
 
 const StyledContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellGrip.tsx

@@ -3,7 +3,7 @@ import { useContext } from 'react';
 
 import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
 import { RecordTableTd } from '@/object-record/record-table/record-table-cell/components/RecordTableTd';
-import { IconListViewGrip } from '@/ui/input/components/IconListViewGrip';
+import { IconListViewGrip } from 'twenty-ui';
 
 const StyledContainer = styled.div`
   cursor: grab;

packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx

@@ -3,7 +3,7 @@ import { useRecoilValue } from 'recoil';
 
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
-import { Checkbox } from '@/ui/input/components/Checkbox';
+import { Checkbox } from 'twenty-ui';
 
 const StyledContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
 import { ReactNode } from 'react';
 
-import { Radio } from '@/ui/input/components/Radio';
-import { Card, CardContent } from 'twenty-ui';
+import { Card, CardContent, Radio } from 'twenty-ui';
 
 type SettingsAccountsRadioSettingsCardProps<Option extends { value: string }> =
   {

packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx

@@ -1,7 +1,6 @@
-import styled from '@emotion/styled';
-import { Radio } from '@/ui/input/components/Radio';
-import { IconComponent, CardContent } from 'twenty-ui';
 import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { CardContent, IconComponent, Radio } from 'twenty-ui';
 
 const StyledRadioCardContent = styled(CardContent)`
   display: flex;

packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx

@@ -1,9 +1,8 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useIcons } from 'twenty-ui';
+import { Checkbox, useIcons } from 'twenty-ui';
 
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { Checkbox } from '@/ui/input/components/Checkbox';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 

packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectColumn.tsx

@@ -2,7 +2,7 @@
 import { Column, FormatterProps, useRowSelection } from 'react-data-grid';
 
 import { ImportedRow } from '@/spreadsheet-import/types';
-import { Radio } from '@/ui/input/components/Radio';
+import { Radio } from 'twenty-ui';
 
 const SELECT_COLUMN_KEY = 'select-row';
 

packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx

@@ -8,8 +8,7 @@ import { SpreadsheetImportStep } from '@/spreadsheet-import/steps/types/Spreadsh
 import { SpreadsheetImportStepType } from '@/spreadsheet-import/steps/types/SpreadsheetImportStepType';
 import { exceedsMaxRecords } from '@/spreadsheet-import/utils/exceedsMaxRecords';
 import { mapWorkbook } from '@/spreadsheet-import/utils/mapWorkbook';
-import { Radio } from '@/ui/input/components/Radio';
-import { RadioGroup } from '@/ui/input/components/RadioGroup';
+import { Radio, RadioGroup } from 'twenty-ui';
 
 import { Modal } from '@/ui/layout/modal/components/Modal';
 import { WorkBook } from 'xlsx-ugnis';

packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx

@@ -2,11 +2,10 @@ import styled from '@emotion/styled';
 // @ts-expect-error // Todo: remove usage of react-data-grid
 import { Column, useRowSelection } from 'react-data-grid';
 import { createPortal } from 'react-dom';
-import { AppTooltip, Toggle } from 'twenty-ui';
+import { AppTooltip, Checkbox, CheckboxVariant, Toggle } from 'twenty-ui';
 
 import { MatchColumnSelect } from '@/spreadsheet-import/components/MatchColumnSelect';
 import { Fields, ImportedStructuredRow } from '@/spreadsheet-import/types';
-import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { isDefined } from '~/utils/isDefined';
 

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
-import { IconComponent, Tag, ThemeColor } from 'twenty-ui';
+import { Checkbox, IconComponent, Tag, ThemeColor } from 'twenty-ui';
 
-import { Checkbox } from '@/ui/input/components/Checkbox';
 import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent';
 
 import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase';

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx

@@ -1,8 +1,6 @@
-import { ReactNode } from 'react';
 import styled from '@emotion/styled';
-import { OverflowingTextWithTooltip } from 'twenty-ui';
-
-import { Checkbox } from '@/ui/input/components/Checkbox';
+import { ReactNode } from 'react';
+import { Checkbox, OverflowingTextWithTooltip } from 'twenty-ui';
 
 import {
   StyledMenuItemBase,

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectTag.tsx

@@ -1,10 +1,10 @@
-import { Tag, ThemeColor } from 'twenty-ui';
-
 import {
   Checkbox,
   CheckboxShape,
   CheckboxSize,
-} from '@/ui/input/components/Checkbox';
+  Tag,
+  ThemeColor,
+} from 'twenty-ui';
 
 import {
   StyledMenuItemBase,

packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx

@@ -7,12 +7,17 @@ import { billingState } from '@/client-config/states/billingState';
 import { AppPath } from '@/types/AppPath';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { CardPicker } from '@/ui/input/components/CardPicker';
 import styled from '@emotion/styled';
 import { isNonEmptyString, isNumber } from '@sniptt/guards';
 import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { ActionLink, CAL_LINK, Loader, MainButton } from 'twenty-ui';
+import {
+  ActionLink,
+  CAL_LINK,
+  CardPicker,
+  Loader,
+  MainButton,
+} from 'twenty-ui';
 import {
   ProductPriceEntity,
   SubscriptionInterval,

packages/twenty-front/tsup.ui.index.tsx

@@ -3,12 +3,9 @@ import { ThemeType } from 'twenty-ui';
 export { ThemeProvider } from '@emotion/react';
 export * from 'twenty-ui';
 export * from './src/modules/ui/input/components/AutosizeTextInput';
-export * from './src/modules/ui/input/components/Checkbox';
 export * from './src/modules/ui/input/components/EntityTitleDoubleTextInput';
 export * from './src/modules/ui/input/components/IconPicker';
 export * from './src/modules/ui/input/components/ImageInput';
-export * from './src/modules/ui/input/components/Radio';
-export * from './src/modules/ui/input/components/RadioGroup';
 export * from './src/modules/ui/input/components/Select';
 export * from './src/modules/ui/input/components/TextArea';
 export * from './src/modules/ui/input/components/TextInput';

packages/twenty-ui/src/input/components/CardPicker.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-import { Radio } from '@/ui/input/components/Radio';
+import { Radio } from './Radio';
 
 const StyledSubscriptionCardContainer = styled.button`
   background-color: ${({ theme }) => theme.background.secondary};

packages/twenty-ui/src/input/components/Checkbox.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import * as React from 'react';
-import { IconCheck, IconMinus } from 'twenty-ui';
+import { IconCheck, IconMinus } from '@ui/display/icon/components/TablerIcons';
 
 export enum CheckboxVariant {
   Primary = 'primary',

packages/twenty-ui/src/input/components/IconListViewGrip.tsx

@@ -1,4 +1,4 @@
-import IconListViewGripRaw from '@/ui/input/components/list-view-grip.svg?react';
+import IconListViewGripRaw from '@ui/input/components/list-view-grip.svg?react';
 import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
 
 type IconListViewGripProps = Pick<IconComponentProps, 'size' | 'stroke'>;

packages/twenty-ui/src/input/components/Radio.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import * as React from 'react';
-import { RGBA } from 'twenty-ui';
-
+import { RGBA } from '@ui/theme';
 import { RadioGroup } from './RadioGroup';
 
 export enum RadioSize {

packages/twenty-ui/src/input/components/__stories__/Checkbox.stories.tsx

@@ -1,5 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { CatalogDecorator, CatalogStory, ComponentDecorator } from 'twenty-ui';
+import {
+  CatalogDecorator,
+  CatalogStory,
+  ComponentDecorator,
+} from '@ui/testing';
 
 import {
   Checkbox,

packages/twenty-ui/src/input/components/__stories__/Radio.stories.tsx

@@ -1,5 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { CatalogDecorator, CatalogStory, ComponentDecorator } from 'twenty-ui';
+import {
+  CatalogDecorator,
+  CatalogStory,
+  ComponentDecorator,
+} from '@ui/testing';
 
 import { LabelPosition, Radio, RadioSize } from '../Radio';
 

packages/twenty-ui/src/input/index.ts

@@ -17,5 +17,10 @@ export * from './code-editor/components/CodeEditorHeader';
 export * from './code-editor/theme/utils/codeEditorTheme';
 export * from './color-scheme/components/ColorSchemeCard';
 export * from './color-scheme/components/ColorSchemePicker';
+export * from './components/CardPicker';
+export * from './components/Checkbox';
+export * from './components/IconListViewGrip';
+export * from './components/Radio';
+export * from './components/RadioGroup';
 export * from './components/Toggle';
 export * from './types/ColorScheme';

packages/twenty-website/src/content/twenty-ui/input/checkbox.mdx

@@ -9,7 +9,7 @@ Used when a user needs to select multiple values from several options.
 <ArticleTabs label1="Usage" label2="Props">
 <ArticleTab>
 
-<SandpackEditor content={`import { Checkbox } from "@/ui/input/components/Checkbox";
+<SandpackEditor content={`import { Checkbox } from "twenty-ui";
 
 export const MyComponent = () => {
   return (

packages/twenty-website/src/content/twenty-ui/input/radio.mdx

@@ -9,7 +9,7 @@ Used when users may only choose one option from a series of options.
 <ArticleTabs label1="Usage" label2="Props">
 <ArticleTab>
 
-<SandpackEditor content={`import { Radio } from "@/ui/input/components/Radio";
+<SandpackEditor content={`import { Radio } from "twenty-ui";
 
 export const MyComponent = () => {
 
@@ -65,8 +65,7 @@ Groups together related radio buttons.
 <ArticleTab>
 
 <SandpackEditor content={`import React, { useState } from "react";
-import { Radio } from "@/ui/input/components/Radio";
-import { RadioGroup } from "@/ui/input/components/RadioGroup";
+import { Radio, RadioGroup } from "twenty-ui";
 
 export const MyComponent = () => {