Merge pull request #1070 from rainlanguage/1069-migrate-codemirror-co…

…mponents-into-ui-components

Move CodeMirror component in ui-components

packages/ui-components/src/__tests__/CodeMirrorDotrain.test.ts

@@ -0,0 +1,72 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, waitFor } from '@testing-library/svelte';
+import { CodeMirrorDotrain } from '@rainlanguage/ui-components';
+import { RawRainlangExtension } from 'codemirror-rainlang'; // Direct import
+import { writable } from 'svelte/store';
+
+vi.mock('codemirror-rainlang', () => ({
+	RawRainlangExtension: vi.fn(() => ({
+		plugin: vi.fn(),
+		hover: vi.fn(),
+		completion: vi.fn(),
+		language: vi.fn(),
+		diagnostics: vi.fn()
+	}))
+}));
+
+vi.mock('@codemirror/lint', () => ({
+	openLintPanel: vi.fn()
+}));
+
+vi.mock('svelte-codemirror-editor', async () => {
+	const mockCodeMirror = (await import('../lib/__mocks__/MockComponent.svelte')).default;
+	return { default: mockCodeMirror };
+});
+
+describe('CodeMirrorDotrain', () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('should render codemirror-dotrain', async () => {
+		const testValue = 'initial dotrain value';
+		const rainlangExtensionMock = new RawRainlangExtension({
+			hover: async () => null,
+			completion: async () => null,
+			diagnostics: async () => []
+		});
+
+		const screen = render(CodeMirrorDotrain, {
+			props: {
+				rainlangText: testValue,
+				disabled: false,
+				styles: {},
+				rainlangExtension: rainlangExtensionMock,
+				codeMirrorTheme: writable({})
+			}
+		});
+		await waitFor(() => {
+			expect(screen.getByTestId('codemirror-dotrain')).toBeInTheDocument();
+		});
+	});
+
+	it('should render codemirror-dotrain component with correct initial value', async () => {
+		const testValue = 'initial dotrain value';
+		const rainlangExtensionMock = new RawRainlangExtension({
+			hover: async () => null,
+			completion: async () => null,
+			diagnostics: async () => []
+		});
+
+		const screen = render(CodeMirrorDotrain, {
+			props: {
+				rainlangText: testValue,
+				disabled: false,
+				styles: {},
+				rainlangExtension: rainlangExtensionMock,
+				codeMirrorTheme: writable({})
+			}
+		});
+		expect(screen.component.$$.ctx[0]).toBe(testValue);
+	});
+});

packages/ui-components/src/lib/components/CodeMirrorDotrain.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import CodeMirror from 'svelte-codemirror-editor';
+	import { RawRainlangExtension } from 'codemirror-rainlang';
+	import { openLintPanel } from '@codemirror/lint';
+
+	export let rainlangText: string | undefined = undefined;
+	export let disabled = false;
+	export let styles = {};
+	export let rainlangExtension: RawRainlangExtension;
+	export let codeMirrorTheme;
+</script>
+
+<div data-testid="codemirror-dotrain">
+	<CodeMirror
+		value={rainlangText || ''}
+		extensions={[rainlangExtension]}
+		theme={codeMirrorTheme}
+		readonly={disabled}
+		useTab={true}
+		tabSize={2}
+		styles={{
+			'&': {
+				width: '100%'
+			},
+			...styles
+		}}
+		on:ready={(e) => {
+			openLintPanel(e.detail);
+		}}
+	/>
+</div>
+
+<style global>
+	:global(.ͼ1 .cm-panel.cm-panel-lint ul [aria-selected]) {
+		background-color: inherit;
+	}
+</style>

packages/ui-components/src/lib/index.ts

@@ -50,6 +50,7 @@ export { default as VaultBalanceChangesTable } from './components/tables/VaultBa
 export { default as VaultBalanceChart } from './components/charts/VaultBalanceChart.svelte';
 export { default as VaultDetail } from './components/detail/VaultDetail.svelte';
 export { default as InputToken } from './components/input/InputToken.svelte';
+export { default as CodeMirrorDotrain } from './components/CodeMirrorDotrain.svelte';
 
 //Types
 export type { AppStoresInterface } from './types/appStores.ts';

packages/webapp/src/routes/test/+page.svelte

@@ -1,15 +1,24 @@
 <script lang="ts" generics="T">
 	import { ButtonLoading, IconError } from '@rainlanguage/ui-components';
+	import { RawRainlangExtension } from 'codemirror-rainlang';
 	import {
 		IconInfo,
 		IconLedger,
 		IconSuccess,
 		IconTelegram,
 		IconWalletConnect,
 		IconWarning,
-		IconExternalLink
+		IconExternalLink,
+		CodeMirrorDotrain,
+		darkCodeMirrorTheme
 	} from '@rainlanguage/ui-components';
 	let isLoading: boolean = true;
+	let rainlangText: string = 'Hello there';
+	const rainlangExtension = new RawRainlangExtension({
+		hover: async () => null,
+		completion: async () => null,
+		diagnostics: async () => []
+	});
 </script>
 
 <div>
@@ -24,4 +33,11 @@
 	<IconTelegram dark />
 	<IconWalletConnect />
 	<IconWarning />
+	<CodeMirrorDotrain
+		codeMirrorTheme={darkCodeMirrorTheme}
+		{rainlangText}
+		disabled={false}
+		styles={{ '&': { minHeight: '400px' } }}
+		{rainlangExtension}
+	/>
 </div>

tauri-app/src/routes/orders/add/+page.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-  import { PageHeader } from '@rainlanguage/ui-components';
-  import CodeMirrorDotrain from '$lib/components/CodeMirrorDotrain.svelte';
-  import { ButtonLoading } from '@rainlanguage/ui-components';
+  import { PageHeader, CodeMirrorDotrain, ButtonLoading } from '@rainlanguage/ui-components';
   import FileTextarea from '$lib/components/FileTextarea.svelte';
   import { Label, Button, Spinner, Tabs, TabItem } from 'flowbite-svelte';
   import { RawRainlangExtension, type Problem } from 'codemirror-rainlang';
@@ -25,8 +23,7 @@
   } from '$lib/services/order';
   import { ethersExecute } from '$lib/services/ethersTx';
   import { formatEthersTransactionError } from '$lib/utils/transaction';
-  import { CodeMirrorRainlang } from '@rainlanguage/ui-components';
-  import { promiseTimeout } from '@rainlanguage/ui-components';
+  import { promiseTimeout, CodeMirrorRainlang } from '@rainlanguage/ui-components';
   import { SentrySeverityLevel, reportErrorToSentry } from '$lib/services/sentry';
   import { pickScenarios } from '$lib/services/pickConfig';
   import {
@@ -221,7 +218,8 @@
 
   <svelte:fragment slot="textarea">
     <CodeMirrorDotrain
-      bind:value={$globalDotrainFile.text}
+      codeMirrorTheme={$codeMirrorTheme}
+      rainlangText={$globalDotrainFile.text}
       disabled={isSubmitting}
       styles={{ '&': { minHeight: '400px' } }}
       {rainlangExtension}