online-compiler-widget 0.0.1

package/src/components/FileExplorer.tsx

@@ -0,0 +1,285 @@
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import cls from "./FileExplorer.module.scss";
+import DocumentIcon from "../assets/documentIcon.svg?react";
+import PlusIcon from "../assets/plus.svg?react";
+import type { EditorDocument } from "../types/EditorDocument";
+
+interface FileExplorerProps {
+    documents: EditorDocument[];
+    selectedId: string | null;
+    onSelect: (id: string) => void;
+    onAdd: (fileName?: string) => void;
+    onRename: (id: string, newName: string) => void;
+    onDelete: (id: string) => void;
+}
+
+// Компонент модального окна для создания файла
+interface AddFileModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: (fileName: string) => void;
+}
+
+const AddFileModal: React.FC<AddFileModalProps> = ({ isOpen, onClose, onConfirm }) => {
+    const [fileName, setFileName] = useState("");
+    const [error, setError] = useState("");
+    
+    if (!isOpen) return null;
+    
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        
+        const trimmedName = fileName.trim();
+        
+        if (!trimmedName) {
+            setError("Введите имя файла");
+            return;
+        }
+        
+        // Проверяем расширение
+        if (!trimmedName.includes('.')) {
+            setError("Добавьте расширение файла (например, .cs, .js, .txt)");
+            return;
+        }
+        
+        // Проверяем допустимые расширения
+        const validExtensions = ['.cs', '.js', '.txt'];
+        const hasValidExtension = validExtensions.some(ext => trimmedName.endsWith(ext));
+        
+        if (!hasValidExtension) {
+            setError(`Используйте одно из расширений: ${validExtensions.join(', ')}`);
+            return;
+        }
+        
+        onConfirm(trimmedName);
+        setFileName("");
+        setError("");
+    };
+    
+    const handleClose = () => {
+        setFileName("");
+        setError("");
+        onClose();
+    };
+    
+    return (
+        <div className={cls.modalOverlay} onClick={handleClose}>
+            <div className={cls.modalContent} onClick={(e) => e.stopPropagation()}>
+                <h3>Создать новый файл</h3>
+                <form onSubmit={handleSubmit}>
+                    <div className={cls.formGroup}>
+                        <label htmlFor="fileName">Имя файла с расширением:</label>
+                        <input
+                            id="fileName"
+                            type="text"
+                            value={fileName}
+                            onChange={(e) => {
+                                setFileName(e.target.value);
+                                setError("");
+                            }}
+                            placeholder="Например: program.cs или script.js"
+                            autoFocus
+                            className={error ? cls.error : ""}
+                        />
+                        <div className={cls.helpText}>
+                            Введите имя файла с расширением (.cs, .js, .txt)
+                        </div>
+                        {error && <div className={cls.errorMessage}>{error}</div>}
+                    </div>
+                    <div className={cls.modalActions}>
+                        <button 
+                            type="button" 
+                            onClick={handleClose}
+                            className={cls.cancelBtn}
+                        >
+                            Отмена
+                        </button>
+                        <button 
+                            type="submit" 
+                            className={cls.confirmBtn}
+                            disabled={!fileName.trim()}
+                        >
+                            Создать
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export const FileExplorer: React.FC<FileExplorerProps> = ({
+    documents,
+    selectedId,
+    onSelect,
+    onAdd,
+    onRename,
+    onDelete
+}) => {
+    const [menuId, setMenuId] = useState<string | null>(null);
+    const [editingId, setEditingId] = useState<string | null>(null);
+    const [editName, setEditName] = useState("");
+    const [showAddModal, setShowAddModal] = useState(false);
+    
+    const menuRef = useRef<HTMLDivElement | null>(null);
+    const inputRef = useRef<HTMLInputElement | null>(null);
+
+    // Закрытие меню при клике вне
+    useEffect(() => {
+        const handler = (e: MouseEvent) => {
+            if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+                setMenuId(null);
+            }
+        };
+
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+    }, []);
+
+    // Фокус на input при начале редактирования
+    useEffect(() => {
+        if (editingId && inputRef.current) {
+            inputRef.current.focus();
+            inputRef.current.select();
+        }
+    }, [editingId]);
+
+    const handleStartRename = useCallback((id: string, currentName: string) => {
+        setMenuId(null);
+        setEditingId(id);
+        setEditName(currentName);
+    }, []);
+
+    const handleSaveRename = useCallback((id: string) => {
+        if (editName.trim() && editName.trim() !== documents.find(d => d.id === id)?.name) {
+            onRename(id, editName.trim());
+        }
+        setEditingId(null);
+        setEditName("");
+    }, [editName, onRename, documents]);
+
+    const handleKeyDown = useCallback((e: React.KeyboardEvent, id: string) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleSaveRename(id);
+        } else if (e.key === 'Escape') {
+            e.preventDefault();
+            setEditingId(null);
+            setEditName("");
+        }
+    }, [handleSaveRename]);
+
+    const handleBlur = useCallback((id: string) => {
+        setTimeout(() => {
+            handleSaveRename(id);
+        }, 100);
+    }, [handleSaveRename]);
+
+    const handleAddFile = (fileName: string) => {
+        onAdd(fileName);
+        setShowAddModal(false);
+    };
+
+    return (
+        <div className={cls.fileExplorer}>
+            <AddFileModal 
+                isOpen={showAddModal}
+                onClose={() => setShowAddModal(false)}
+                onConfirm={handleAddFile}
+            />
+            
+            <div className={cls.header}>
+                <DocumentIcon className={cls.documentIcon} />
+                <span>Файлы</span>
+                <button 
+                    onClick={() => setShowAddModal(true)} 
+                    className={cls.addButton}
+                    title="Добавить файл"
+                >
+                    <PlusIcon className={cls.plusIcon} />
+                </button>
+            </div>
+
+            <ul className={cls.fileList}>
+                {documents.map(doc => (
+                    <li
+                        key={doc.id}
+                        className={`${cls.fileItem} ${
+                            selectedId === doc.id ? cls.selected : ""
+                        } ${doc.modified ? cls.modified : ""}`}
+                        onClick={() => !editingId && onSelect(doc.id)}
+                    >
+                        <div className={cls.clickZone}>
+                            <span className={cls.fileIcon}>📄</span>
+                            
+                            {editingId === doc.id ? (
+                                <div className={cls.editContainer}>
+                                    <input
+                                        ref={inputRef}
+                                        type="text"
+                                        className={cls.editInput}
+                                        value={editName}
+                                        onChange={(e) => setEditName(e.target.value)}
+                                        onKeyDown={(e) => handleKeyDown(e, doc.id)}
+                                        onBlur={() => handleBlur(doc.id)}
+                                        onClick={(e) => e.stopPropagation()}
+                                        onMouseDown={(e) => e.stopPropagation()}
+                                    />
+                                </div>
+                            ) : (
+                                <div className={cls.nameContainer}>
+                                    <span className={cls.itemText}>{doc.name}</span>
+                                    {doc.modified && (
+                                        <span 
+                                            className={cls.modifiedDot} 
+                                            title="Файл изменен (не сохранен)"
+                                        >
+                                            ●
+                                        </span>
+                                    )}
+                                </div>
+                            )}
+                        </div>
+
+                        {editingId !== doc.id && (
+                            <button
+                                className={cls.moreBtn}
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    setMenuId(menuId === doc.id ? null : doc.id);
+                                }}
+                                title="Действия с файлом"
+                            >
+                                ⋮
+                            </button>
+                        )}
+
+                        {menuId === doc.id && (
+                            <div className={cls.contextMenu} ref={menuRef}>
+                                <div
+                                    className={cls.menuItem}
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleStartRename(doc.id, doc.name);
+                                    }}
+                                >
+                                    Переименовать
+                                </div>
+                                <div
+                                    className={cls.menuItem}
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        setMenuId(null);
+                                        onDelete(doc.id);
+                                    }}
+                                >
+                                    Удалить
+                                </div>
+                            </div>
+                        )}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};

package/src/components/MonacoEditorWrapper.module.scss

@@ -0,0 +1,29 @@
+$editor-header-bg: #f9fafb;
+$editor-border: #ddd;
+
+.editorContainer {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+
+  .editorHeader {
+    flex: 0 0 32px;
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+    background: $editor-header-bg;
+    border-bottom: 1px solid #eee;
+    font-weight: 500;
+    font-size: 13px;
+    color: #111;
+  }
+
+  .monaco-editor {
+    flex: 1 1 auto;
+    overflow: hidden !important;
+  }
+}
+
+

package/src/components/MonacoEditorWrapper.tsx

@@ -0,0 +1,74 @@
+// src/components/MonacoEditorWrapper.tsx
+import React, { useRef, useEffect } from "react";
+import Editor from "@monaco-editor/react";
+import * as monaco from "monaco-editor";
+import cls from "./MonacoEditorWrapper.module.scss";
+import StartIcon from "../assets/start.svg?react";
+import StopIcon from "../assets/stop.svg?react";
+
+interface MonacoEditorWrapperProps {
+    code: string;
+    language: string; // "javascript" | "csharp"
+    onChange: (value: string) => void;
+    theme?: string;
+}
+
+export const MonacoEditorWrapper: React.FC<MonacoEditorWrapperProps> = ({
+                                                                            code,
+                                                                            language,
+                                                                            onChange,
+                                                                            theme = "vs-light",
+                                                                        }) => {
+    const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+    const modelRef = useRef<monaco.editor.ITextModel | null>(null);
+
+    // Создаём модель при загрузке редактора
+    const handleEditorDidMount = (
+        editor: monaco.editor.IStandaloneCodeEditor
+    ) => {
+        editorRef.current = editor;
+    };
+
+    // 🔥 Создание / обновление модели при переключении документа
+    useEffect(() => {
+        if (!editorRef.current) return;
+
+        // удаляем старую модель
+        if (modelRef.current) {
+            modelRef.current?.dispose();
+        }
+
+        const newModel = monaco.editor.createModel(code, language);
+        modelRef.current = newModel;
+
+
+        editorRef.current?.focus();
+    }, [code, language]);
+
+    return (
+        <div className={cls.editorContainer}>
+            <div className={cls.editorHeader}>
+                <span>{language === "csharp" ? "C#" : "JS"}</span>
+            </div>
+
+            <Editor
+                height="100%"
+                language={language}
+                theme={theme}
+                onMount={handleEditorDidMount}
+                value={code} // контролируемое значение
+                onChange={(v) => onChange(v || "")}
+                options={{
+                    minimap: { enabled: false },
+                    fontSize: 10,
+                    scrollBeyondLastLine: false,
+                    wordWrap: "off",
+                    lineNumbers: "on",
+                    folding: true,
+                    renderLineHighlight: "all",
+                    tabSize: 4,
+                }}
+            />
+        </div>
+    );
+};

package/src/components/OutputPanel.module.scss

@@ -0,0 +1,123 @@
+$output-bg: #fafafa;
+$output-border: #ddd;
+$tab-active-bg: #e0f0ff;
+$tab-active-border: #007bff;
+
+
+
+.outputPanel {
+  flex: 0 0 300px;      // ширина правой панели (можно менять через resize)
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: $output-bg;
+  border-left: 1px solid $output-border;
+  box-sizing: border-box;
+
+  .tabs {
+    display: flex;
+    background: #F8FAFC;
+    border-bottom: 1px solid #E2E8F0;
+
+    .tab {
+      width: 100%;
+      padding: 7px 12px;
+      display: flex;
+      align-items: center;
+      font-size: 8px;
+      cursor: pointer;
+      border: none;
+      transition: background 0.2s;
+      border-radius: 0px;
+      outline: none;
+      justify-content: center;
+      align-items: center;
+
+      &.active {
+        border: 0px;
+        background: #FFFFFF;
+        border-bottom: 1px solid $tab-active-border;
+        border-radius: 0px;
+      }
+
+      .icon {
+        margin-right: 2px;
+        height: 10px;
+        padding-top: 2px;
+      }
+    }
+  }
+
+  .content {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: 8px 12px;
+
+    background: #fff;
+    box-sizing: border-box;
+
+    pre {
+      background: #f8f8f8;
+      padding: 8px;
+
+      font-family: 'Courier New', Courier, monospace;
+      font-size: 13px;
+      line-height: 1.4;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+
+    .output {
+      margin: 0;
+      padding: 0;
+      white-space: pre-wrap;
+      font-size: 12px;
+      line-height: 20px;
+    }
+
+    .placeholder {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: #999;
+      text-align: center;
+      gap: 6px;
+
+      .bigIcon{
+        height: 28px;
+        color: #CAD5E2;
+      }
+
+      span {
+        font-size: 28px;
+        opacity: 0.4;
+      }
+
+      p {
+        margin: 0;
+        font-family: Arial;
+        font-weight: 400;
+        font-size: 11px;
+        color: #62748E;
+      }
+
+      small {
+        font-family: Arial;
+        font-weight: 400;
+        font-size: 9px;
+        opacity: 0.7;
+        color: #90A1B9;
+      }
+    }
+
+    .historyItem {
+      margin-bottom: 8px;
+      padding: 6px;
+      background: #f0f0f0;
+
+      border-left: 3px solid $tab-active-border;
+    }
+  }
+}

package/src/components/OutputPanel.tsx

@@ -0,0 +1,53 @@
+// src/components/OutputPanel.tsx
+import React, { useState } from 'react';
+import cls from './OutputPanel.module.scss';
+import HistoryIcon from "../assets/history.svg?react";
+import OutputIcon from "../assets/output.svg?react";
+
+interface OutputPanelProps {
+    output: string;
+    history: string[];
+}
+
+export const OutputPanel: React.FC<OutputPanelProps> = ({ output, history }) => {
+    const [activeTab, setActiveTab] = useState<'output' | 'history'>('output');
+
+    return (
+        <div className={cls.outputPanel}>
+            <div className={cls.tabs}>
+                <button
+                    className={`${cls.tab} ${activeTab === 'output' ? cls.active : ''}`}
+                    onClick={() => setActiveTab('output')}
+                >
+                    <OutputIcon className={cls.icon}/>
+                    <span>Вывод</span>
+                </button>
+                <button
+                    className={`${cls.tab} ${activeTab === 'history' ? cls.active : ''}`}
+                    onClick={() => setActiveTab('history')}
+                >
+                    <HistoryIcon className={cls.icon}/>
+                    <span>История</span>
+                </button>
+            </div>
+
+            <div className={cls.content}>
+                {!output && activeTab === 'output' && (
+                            <div className={cls.placeholder}>
+                                <OutputIcon className={cls.bigIcon}/>
+                                <p>Нет результата кода</p>
+                                <small>Запустите свой код, чтобы увидеть результат</small>
+                            </div>
+                )}
+
+                <p className={cls.output}>{output}</p>
+
+                {activeTab === 'history' && (
+                            <div className={cls.placeholder}>
+                                <HistoryIcon className={cls.bigIcon}/>
+                                <p>История пуста</p>
+                            </div>)}
+            </div>
+        </div>
+    );
+};