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>
This commit is contained in:
gitstart-app[bot]
committed by
GitHub
GitHub
parent
fa0933b292
commit
9b6359984d
@ -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 = {
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -1,51 +0,0 @@
|
||||
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';
|
||||
|
||||
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,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -1,51 +0,0 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
@ -1,33 +0,0 @@
|
||||
import { editor } from 'monaco-editor';
|
||||
import { ThemeType } from 'twenty-ui';
|
||||
|
||||
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,
|
||||
},
|
||||
};
|
||||
};
|
||||
@ -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};
|
||||
|
||||
Reference in New Issue
Block a user