Migrate to twenty-ui - input/code-editor (#8072)

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

 --- 

### Description.  

Migrate `code-editor` component to twenty ui.\
\
Fixes twentyhq/private-issues#94

---------

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

packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionCodeEditor.tsx

@@ -1,10 +1,10 @@
 import { SettingsServerlessFunctionCodeEditorContainer } from '@/settings/serverless-functions/components/SettingsServerlessFunctionCodeEditorContainer';
 import { useGetAvailablePackages } from '@/settings/serverless-functions/hooks/useGetAvailablePackages';
-import { CodeEditor } from '@/ui/input/code-editor/components/CodeEditor';
 import { EditorProps, Monaco } from '@monaco-editor/react';
 import dotenv from 'dotenv';
 import { editor, MarkerSeverity } from 'monaco-editor';
 import { AutoTypings } from 'monaco-editor-auto-typings';
+import { CodeEditor } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 
 export type File = {

packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionCodeEditorTab.tsx

@@ -6,7 +6,6 @@ import { SETTINGS_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/settings/s
 import { SettingsServerlessFunctionHotkeyScope } from '@/settings/serverless-functions/types/SettingsServerlessFunctionHotKeyScope';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { CoreEditorHeader } from '@/ui/input/code-editor/components/CodeEditorHeader';
 import { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
@@ -16,6 +15,7 @@ import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 import {
   Button,
+  CoreEditorHeader,
   H2Title,
   IconGitCommit,
   IconPlayerPlay,

packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTestTab.tsx

@@ -1,4 +1,11 @@
-import { Button, H2Title, IconPlayerPlay, Section } from 'twenty-ui';
+import {
+  Button,
+  CodeEditor,
+  CoreEditorHeader,
+  H2Title,
+  IconPlayerPlay,
+  Section,
+} from 'twenty-ui';
 
 import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton';
 import { SettingsServerlessFunctionCodeEditorContainer } from '@/settings/serverless-functions/components/SettingsServerlessFunctionCodeEditorContainer';
@@ -9,8 +16,6 @@ import { settingsServerlessFunctionOutputState } from '@/settings/serverless-fun
 import { SettingsServerlessFunctionHotkeyScope } from '@/settings/serverless-functions/types/SettingsServerlessFunctionHotKeyScope';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { CodeEditor } from '@/ui/input/code-editor/components/CodeEditor';
-import { CoreEditorHeader } from '@/ui/input/code-editor/components/CodeEditorHeader';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import styled from '@emotion/styled';
 import { useNavigate } from 'react-router-dom';

packages/twenty-front/src/modules/workflow/components/WorkflowRunOutputVisualizer.tsx

@@ -1,7 +1,6 @@
-import { CodeEditor } from '@/ui/input/code-editor/components/CodeEditor';
 import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
 import styled from '@emotion/styled';
-import { isDefined } from 'twenty-ui';
+import { CodeEditor, isDefined } from 'twenty-ui';
 
 const StyledSourceCodeContainer = styled.div`
   border: 1px solid ${({ theme }) => theme.border.color.medium};

packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx

@@ -1,7 +1,11 @@
-import { codeEditorTheme } from '@/ui/input/code-editor/utils/codeEditorTheme';
 import { useTheme } from '@emotion/react';
 import Editor, { EditorProps } from '@monaco-editor/react';
-import { isDefined } from 'twenty-ui';
+import { codeEditorTheme } from '@ui/input';
+import { isDefined } from '@ui/utilities';
+
+export type CodeEditorPackage = {
+  [packageName: string]: string;
+};
 
 type CodeEditorProps = Omit<EditorProps, 'onChange'> & {
   onChange?: (value: string) => void;

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

@@ -0,0 +1,3 @@
+export * from './components/CodeEditor';
+export * from './components/CodeEditorHeader';
+export * from './theme/utils/codeEditorTheme';

packages/twenty-ui/src/input/code-editor/theme/utils/codeEditorTheme.ts

@@ -1,5 +1,5 @@
+import { ThemeType } from '@ui/theme';
 import { editor } from 'monaco-editor';
-import { ThemeType } from 'twenty-ui';
 
 export const codeEditorTheme = (theme: ThemeType) => {
   return {

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

@@ -12,6 +12,9 @@ export * from './button/components/LightIconButton';
 export * from './button/components/LightIconButtonGroup';
 export * from './button/components/MainButton';
 export * from './button/components/RoundedIconButton';
+export * from './code-editor/components/CodeEditor';
+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/Toggle';