online-compiler-widget 0.0.4 → 1.0.2

package/src/components/FileExplorer.tsx

@@ -1,285 +0,0 @@
-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

@@ -1,29 +0,0 @@
-$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

@@ -1,74 +0,0 @@
-// 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

@@ -1,123 +0,0 @@
-$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

@@ -1,53 +0,0 @@
-// 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>
-    );
-};