Initial commit

2025-11-21 00:16:32 +03:00
commit 8ceb9e8781
33 changed files with 5940 additions and 0 deletions
--- a/src/components/FileUploader.css
+++ b/src/components/FileUploader.css
@@ -0,0 +1,56 @@
+.file-uploader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.file-input {
+  display: none;
+}
+
+.upload-label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 2rem 2.5rem;
+  background: white;
+  border: 3px dashed #dee2e6;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+.upload-label:hover {
+  border-color: #667eea;
+  background: #f8f9ff;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 24px rgba(102, 126, 234, 0.2);
+}
+
+.upload-label svg {
+  color: #667eea;
+  transition: transform 0.3s ease;
+}
+
+.upload-label:hover svg {
+  transform: translateY(-4px);
+}
+
+.upload-label span {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #495057;
+}
+
+@media (max-width: 1024px) {
+  .upload-label {
+    padding: 1.5rem 2rem;
+  }
+
+  .upload-label span {
+    font-size: 0.9rem;
+  }
+}
--- a/src/components/FileUploader.tsx
+++ b/src/components/FileUploader.tsx
@@ -0,0 +1,75 @@
+import { useRef, type ChangeEvent } from 'react';
+import { validateJsonFile } from '../utils/jsonFormatter';
+import './FileUploader.css';
+
+interface FileUploaderProps {
+  onFileLoad: (content: string) => void;
+  onError: (error: string) => void;
+  label?: string;
+  accept?: string;
+  validator?: (file: File) => { valid: boolean; error?: string };
+}
+
+export function FileUploader({
+  onFileLoad,
+  onError,
+  label = 'Загрузить JSON файл',
+  accept = '.json,application/json',
+  validator = validateJsonFile
+}: FileUploaderProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    // Валидация файла
+    const validation = validator(file);
+    if (!validation.valid) {
+      onError(validation.error || 'Ошибка валидации файла');
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+      return;
+    }
+
+    // Чтение файла
+    try {
+      const content = await file.text();
+      onFileLoad(content);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    } catch (error) {
+      onError('Ошибка при чтении файла');
+    }
+  };
+
+  return (
+    <div className="file-uploader">
+      <label htmlFor="file-input" className="upload-label">
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+          <polyline points="17 8 12 3 7 8" />
+          <line x1="12" y1="3" x2="12" y2="15" />
+        </svg>
+        <span>{label}</span>
+      </label>
+      <input
+        ref={fileInputRef}
+        id="file-input"
+        type="file"
+        accept={accept}
+        onChange={handleFileChange}
+        className="file-input"
+      />
+    </div>
+  );
+}
--- a/src/components/FontSelector.css
+++ b/src/components/FontSelector.css
@@ -0,0 +1,57 @@
+.font-selector {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1.5rem;
+  background: white;
+  border: 2px solid #e2e8f0;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+.font-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #4a5568;
+}
+
+.font-label svg {
+  color: #667eea;
+}
+
+.font-select {
+  width: 100%;
+  padding: 0.65rem 1rem;
+  border: 2px solid #e2e8f0;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  background: white;
+  color: #2d3748;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  outline: none;
+}
+
+.font-select:hover {
+  border-color: #667eea;
+}
+
+.font-select:focus {
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.font-select option {
+  padding: 0.5rem;
+}
+
+@media (max-width: 1024px) {
+  .font-selector {
+    width: 100%;
+    max-width: 300px;
+  }
+}
--- a/src/components/FontSelector.tsx
+++ b/src/components/FontSelector.tsx
@@ -0,0 +1,40 @@
+import './FontSelector.css';
+
+export type FontFamily = 'jetbrains' | 'fira';
+
+interface FontSelectorProps {
+  selectedFont: FontFamily;
+  onFontChange: (font: FontFamily) => void;
+}
+
+const FONTS = [
+  { value: 'jetbrains' as FontFamily, label: 'JetBrains Mono', family: 'JetBrains Mono' },
+  { value: 'fira' as FontFamily, label: 'Fira Mono', family: 'Fira Mono' }
+];
+
+export function FontSelector({ selectedFont, onFontChange }: FontSelectorProps) {
+  return (
+    <div className="font-selector">
+      <label htmlFor="font-select" className="font-label">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <polyline points="4 7 4 4 20 4 20 7"></polyline>
+          <line x1="9" y1="20" x2="15" y2="20"></line>
+          <line x1="12" y1="4" x2="12" y2="20"></line>
+        </svg>
+        Шрифт
+      </label>
+      <select
+        id="font-select"
+        className="font-select"
+        value={selectedFont}
+        onChange={(e) => onFontChange(e.target.value as FontFamily)}
+      >
+        {FONTS.map(font => (
+          <option key={font.value} value={font.value} style={{ fontFamily: font.family }}>
+            {font.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
--- a/src/components/JsonEditor.css
+++ b/src/components/JsonEditor.css
@@ -0,0 +1,58 @@
+.json-editor {
+  flex: 0 0 33.33%;
+  max-width: 500px;
+  display: flex;
+  flex-direction: column;
+  height: 75vh;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.json-editor h2 {
+  margin: 0;
+  padding: 1.5rem;
+  background: #f8f9fa;
+  border-bottom: 2px solid #e9ecef;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #495057;
+}
+
+.editor-textarea {
+  flex: 1;
+  width: 100%;
+  border: none;
+  padding: 1.5rem;
+  font-family: 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.6;
+  resize: none;
+  outline: none;
+  background: white;
+}
+
+.editor-textarea.error {
+  background: #fff5f5;
+}
+
+.editor-textarea::placeholder {
+  color: #adb5bd;
+}
+
+.error-message {
+  padding: 1rem 1.5rem;
+  background: #fee;
+  color: #c92a2a;
+  font-size: 0.9rem;
+  border-top: 1px solid #fcc;
+}
+
+@media (max-width: 1024px) {
+  .json-editor {
+    flex: 1;
+    max-width: 100%;
+    height: 40vh;
+  }
+}
--- a/src/components/JsonEditor.tsx
+++ b/src/components/JsonEditor.tsx
@@ -0,0 +1,46 @@
+import { type ChangeEvent } from 'react';
+import './JsonEditor.css';
+
+export type FontFamily = 'jetbrains' | 'fira';
+
+interface JsonEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  error?: string;
+  title?: string;
+  placeholder?: string;
+  fontFamily?: FontFamily;
+}
+
+const FONT_FAMILIES = {
+  jetbrains: "'JetBrains Mono', monospace",
+  fira: "'Fira Mono', monospace"
+};
+
+export function JsonEditor({
+  value,
+  onChange,
+  error,
+  title = 'Ввод JSON',
+  placeholder = 'Введите JSON данные или загрузите файл...',
+  fontFamily = 'jetbrains'
+}: JsonEditorProps) {
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    onChange(e.target.value);
+  };
+
+  return (
+    <div className="json-editor">
+      <h2>{title}</h2>
+      <textarea
+        className={`editor-textarea ${error ? 'error' : ''}`}
+        value={value}
+        onChange={handleChange}
+        placeholder={placeholder}
+        spellCheck={false}
+        style={{ fontFamily: FONT_FAMILIES[fontFamily] }}
+      />
+      {error && <div className="error-message">{error}</div>}
+    </div>
+  );
+}
--- a/src/components/JsonViewer.css
+++ b/src/components/JsonViewer.css
@@ -0,0 +1,131 @@
+.json-viewer {
+  flex: 0 0 33.33%;
+  max-width: 500px;
+  display: flex;
+  flex-direction: column;
+  height: 75vh;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  position: relative;
+}
+
+.viewer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem;
+  background: #f8f9fa;
+  border-bottom: 2px solid #e9ecef;
+}
+
+.viewer-header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #495057;
+}
+
+.copy-button {
+  background: #667eea;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.copy-button:hover {
+  background: #5568d3;
+  transform: scale(1.05);
+}
+
+.copy-button:active {
+  transform: scale(0.95);
+}
+
+.copy-button svg {
+  display: block;
+}
+
+.viewer-content {
+  flex: 1;
+  margin: 0;
+  padding: 1.5rem;
+  font-family: 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.6;
+  overflow: auto;
+  background: white;
+  color: #212529;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.viewer-content:empty::before {
+  content: attr(data-placeholder);
+  color: #adb5bd;
+}
+
+/* Подсветка синтаксиса JSON */
+.viewer-content .key {
+  color: #8B1538;
+  font-weight: 600;
+}
+
+.viewer-content .string {
+  color: #0D5F0D;
+}
+
+.viewer-content .number {
+  color: #003A70;
+}
+
+.viewer-content .boolean {
+  color: #d73a49;
+  font-weight: 600;
+}
+
+.viewer-content .null {
+  color: #6f42c1;
+  font-weight: 600;
+}
+
+.copy-notification {
+  position: absolute;
+  bottom: 2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #38a169;
+  color: white;
+  padding: 0.75rem 1.5rem;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  animation: slideUp 0.3s ease;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+@media (max-width: 1024px) {
+  .json-viewer {
+    flex: 1;
+    max-width: 100%;
+    height: 40vh;
+  }
+}
--- a/src/components/JsonViewer.tsx
+++ b/src/components/JsonViewer.tsx
@@ -0,0 +1,83 @@
+import { useState, useMemo } from 'react';
+import { syntaxHighlight } from '../utils/syntaxHighlight';
+import './JsonViewer.css';
+
+export type FontFamily = 'jetbrains' | 'fira';
+
+interface JsonViewerProps {
+  value: string;
+  title?: string;
+  placeholder?: string;
+  fontFamily?: FontFamily;
+}
+
+const FONT_FAMILIES = {
+  jetbrains: "'JetBrains Mono', monospace",
+  fira: "'Fira Mono', monospace"
+};
+
+export function JsonViewer({
+  value,
+  title = 'Форматированный JSON',
+  placeholder = 'Форматированный результат появится здесь...',
+  fontFamily = 'jetbrains'
+}: JsonViewerProps) {
+  const [copied, setCopied] = useState(false);
+
+  const highlightedValue = useMemo(() => {
+    return value ? syntaxHighlight(value) : '';
+  }, [value]);
+
+  const handleCopy = async () => {
+    if (!value) return;
+
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Ошибка копирования:', err);
+    }
+  };
+
+  return (
+    <div className="json-viewer">
+      <div className="viewer-header">
+        <h2>{title}</h2>
+        {value && (
+          <button
+            className="copy-button"
+            onClick={handleCopy}
+            title="Копировать в буфер обмена"
+          >
+            {copied ? (
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            ) : (
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+              </svg>
+            )}
+          </button>
+        )}
+      </div>
+      {value ? (
+        <pre
+          className="viewer-content"
+          dangerouslySetInnerHTML={{ __html: highlightedValue }}
+          style={{ fontFamily: FONT_FAMILIES[fontFamily] }}
+        />
+      ) : (
+        <pre
+          className="viewer-content"
+          style={{ fontFamily: FONT_FAMILIES[fontFamily] }}
+        >
+          {placeholder}
+        </pre>
+      )}
+      {copied && <div className="copy-notification">Скопировано!</div>}
+    </div>
+  );
+}