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-ui/src/input/code-editor/components/CodeEditor.tsx

@@ -0,0 +1,55 @@
+import { useTheme } from '@emotion/react';
+import Editor, { EditorProps } from '@monaco-editor/react';
+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;
+};
+
+export const CodeEditor = ({
+  value,
+  language,
+  onMount,
+  onChange,
+  onValidate,
+  height = 450,
+  options,
+}: CodeEditorProps) => {
+  const theme = useTheme();
+
+  return (
+    <Editor
+      height={height}
+      value={value}
+      language={language}
+      onMount={(editor, monaco) => {
+        monaco.editor.defineTheme('codeEditorTheme', codeEditorTheme(theme));
+        monaco.editor.setTheme('codeEditorTheme');
+
+        onMount?.(editor, monaco);
+      }}
+      onChange={(value) => {
+        if (isDefined(value)) {
+          onChange?.(value);
+        }
+      }}
+      onValidate={onValidate}
+      options={{
+        overviewRulerLanes: 0,
+        scrollbar: {
+          vertical: 'hidden',
+          horizontal: 'hidden',
+        },
+        minimap: {
+          enabled: false,
+        },
+        ...options,
+      }}
+    />
+  );
+};

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

@@ -0,0 +1,51 @@
+import styled from '@emotion/styled';
+
+const StyledEditorHeader = styled.div`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.transparent.lighter};
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  display: flex;
+  height: ${({ theme }) => theme.spacing(10)};
+  padding: ${({ theme }) => `0 ${theme.spacing(2)}`};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
+  border-top-right-radius: ${({ theme }) => theme.border.radius.sm};
+  justify-content: space-between;
+`;
+
+const StyledElementContainer = styled.div`
+  align-content: flex-end;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+export type CoreEditorHeaderProps = {
+  title?: string;
+  leftNodes?: React.ReactNode[];
+  rightNodes?: React.ReactNode[];
+};
+
+export const CoreEditorHeader = ({
+  title,
+  leftNodes,
+  rightNodes,
+}: CoreEditorHeaderProps) => {
+  return (
+    <StyledEditorHeader>
+      <StyledElementContainer>
+        {leftNodes &&
+          leftNodes.map((leftButton, index) => {
+            return <div key={`left-${index}`}>{leftButton}</div>;
+          })}
+        {title}
+      </StyledElementContainer>
+      <StyledElementContainer>
+        {rightNodes &&
+          rightNodes.map((rightButton, index) => {
+            return <div key={`right-${index}`}>{rightButton}</div>;
+          })}
+      </StyledElementContainer>
+    </StyledEditorHeader>
+  );
+};

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

@@ -0,0 +1,33 @@
+import { ThemeType } from '@ui/theme';
+import { editor } from 'monaco-editor';
+
+export const codeEditorTheme = (theme: ThemeType) => {
+  return {
+    base: 'vs' as editor.BuiltinTheme,
+    inherit: true,
+    rules: [
+      {
+        token: '',
+        foreground: theme.code.text.gray,
+        fontStyle: 'bold',
+      },
+      { token: 'keyword', foreground: theme.code.text.sky },
+      {
+        token: 'delimiter',
+        foreground: theme.code.text.gray,
+      },
+      { token: 'string', foreground: theme.code.text.pink },
+      {
+        token: 'comment',
+        foreground: theme.code.text.orange,
+      },
+    ],
+    colors: {
+      'editor.background': theme.background.secondary,
+      'editorCursor.foreground': theme.font.color.primary,
+      'editorLineNumber.foreground': theme.font.color.extraLight,
+      'editorLineNumber.activeForeground': theme.font.color.light,
+      'editor.lineHighlightBackground': theme.background.tertiary,
+    },
+  };
+};