Merge pull request #1 from Joacohbc/feature/move-to-absolute-paths

Joacohbc · web-flow · commit 914853c2cf8b · 2025-06-27T19:15:17.000-03:00
Update import paths to use alias for cleaner code structure
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,6 +1,6 @@
 import { BrowserRouter, HashRouter } from 'react-router-dom';
-import { useStudySets } from './contexts/useStudySets';
-import AppLayout from './layout/AppLayout';
+import { useStudySets } from '@/contexts/useStudySets';
+import AppLayout from '@/layout/AppLayout';
 
 function App() {
     const {
diff --git a/src/components/common/Navigation.jsx b/src/components/common/Navigation.jsx
@@ -1,9 +1,9 @@
 import { NavLink, useLocation } from 'react-router-dom';
-import QuizIcon from '../../icons/QuizIcon';
-import CardIcon from '../../icons/CardIcon';
-import EditIcon from '../../icons/EditIcon';
-import ImportExportIcon from '../../icons/ImportExportIcon';
-import HelpIcon from '../../icons/HelpIcon';
+import QuizIcon from '@/icons/QuizIcon';
+import CardIcon from '@/icons/CardIcon';
+import EditIcon from '@/icons/EditIcon';
+import ImportExportIcon from '@/icons/ImportExportIcon';
+import HelpIcon from '@/icons/HelpIcon';
 
 /**
  * Componente de navegación usando React Router
diff --git a/src/components/common/QuestionImage.jsx b/src/components/common/QuestionImage.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { formatBase64Image, isValidBase64Image } from '../../utils/imageUtils';
+import { formatBase64Image, isValidBase64Image } from '@/utils/imageUtils';
 
 // QuestionImage Component - Handles display of base64 images in questions
 const QuestionImage = ({ imageData, altText = "Question image", className = "" }) => {
diff --git a/src/components/common/ShuffleControls.jsx b/src/components/common/ShuffleControls.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import ShuffleIcon from '../../icons/ShuffleIcon';
-import ResetIcon from '../../icons/ResetIcon';
+import ShuffleIcon from '@/icons/ShuffleIcon';
+import ResetIcon from '@/icons/ResetIcon';
 
 /**
  * Reusable ShuffleControls component for handling shuffle and reset order functionality
diff --git a/src/components/editor/ClipboardControls.jsx b/src/components/editor/ClipboardControls.jsx
@@ -1,7 +1,7 @@
 // src/components/editor/ClipboardControls.jsx
 import React from 'react';
-import CopyIcon from '../../icons/CopyIcon';
-import PasteIcon from '../../icons/PasteIcon';
+import CopyIcon from '@/icons/CopyIcon';
+import PasteIcon from '@/icons/PasteIcon';
 
 /**
  * ClipboardControls - Componente reutilizable para operaciones de portapapeles
diff --git a/src/components/flashcards/EmptyFlashcardState.jsx b/src/components/flashcards/EmptyFlashcardState.jsx
@@ -1,4 +1,4 @@
-import EmptyFlashcardIcon from '../../icons/EmptyFlashcardIcon';
+import EmptyFlashcardIcon from '@/icons/EmptyFlashcardIcon';
 
 const EmptyFlashcardState = ({ activeFlashcardSetName, onGoToEditor }) => {
     return (
diff --git a/src/components/flashcards/Flashcard.jsx b/src/components/flashcards/Flashcard.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
-import '../theme/Flashcard.css';
-import QuestionImage from '../common/QuestionImage';
+import '@/components/theme/Flashcard.css';
+import QuestionImage from '@/components/common/QuestionImage';
 
 const Flashcard = ({ card, isFlipped, onFlip, index }) => {
     const frontContentRef = useRef(null);
diff --git a/src/components/flashcards/GridFlashcardView.jsx b/src/components/flashcards/GridFlashcardView.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import Flashcard from './Flashcard';
-import ShowAllIcon from '../../icons/ShowAllIcon'; // Importa el nuevo ícono
-import HideAllIcon from '../../icons/HideAllIcon'; // Importa el nuevo ícono
+import Flashcard from '@/components/flashcards/Flashcard';
+import ShowAllIcon from '@/icons/ShowAllIcon'; // Importa el nuevo ícono
+import HideAllIcon from '@/icons/HideAllIcon'; // Importa el nuevo ícono
 
 const GridFlashcardView = ({ flashcards, activeFlashcardSetName }) => {
     const [flippedStates, setFlippedStates] = useState({});
diff --git a/src/components/flashcards/SingleFlashcardView.jsx b/src/components/flashcards/SingleFlashcardView.jsx
@@ -1,10 +1,10 @@
-import React, { useState, useEffect } from 'react';
-import Flashcard from './Flashcard';
-import ArrowLeftIcon from '../../icons/ArrowLeftIcon';
-import ArrowRightIcon from '../../icons/ArrowRightIcon';
-import FlipIcon from '../../icons/FlipIcon';
-import ShuffleIcon from '../../icons/ShuffleIcon';
-import ProgressBar from '../ProgressBar';
+import React, { useState, useRef, useEffect } from 'react';
+import Flashcard from '@/components/flashcards/Flashcard';
+import ArrowLeftIcon from '@/icons/ArrowLeftIcon';
+import ArrowRightIcon from '@/icons/ArrowRightIcon';
+import FlipIcon from '@/icons/FlipIcon';
+import ShuffleIcon from '@/icons/ShuffleIcon';
+import ProgressBar from '@/components/ProgressBar';
 
 const SingleFlashcardView = ({
     shuffledData,
diff --git a/src/components/questions/FillInTheBlanksQuestion.jsx b/src/components/questions/FillInTheBlanksQuestion.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import QuestionImage from '../common/QuestionImage';
+import QuestionImage from '@/components/common/QuestionImage';
 
 // FillInTheBlanksQuestion Component
 // Removed unused questionIndex prop
diff --git a/src/components/questions/MatchingQuestion.jsx b/src/components/questions/MatchingQuestion.jsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react'; // Import useMemo
-import { shuffleArray } from '../../utils/helpers';
-import DraggableTerm from '../dnd/DraggableTerm';
-import DropZoneDefinition from '../dnd/DropZoneDefinition';
-import QuestionImage from '../common/QuestionImage';
+import { shuffleArray } from '@/utils/helpers';
+import DraggableTerm from '@/components/dnd/DraggableTerm';
+import DropZoneDefinition from '@/components/dnd/DropZoneDefinition';
+import QuestionImage from '@/components/common/QuestionImage';
 
 // MatchingQuestion Component
 const MatchingQuestion = ({ questionData, matches = {}, onMatchChange, isSubmitted, feedback, isIndividuallyChecked }) => {
diff --git a/src/components/questions/MultipleChoiceQuestion.jsx b/src/components/questions/MultipleChoiceQuestion.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { shuffleArray } from '../../utils/helpers';
-import QuestionImage from '../common/QuestionImage';
+import { shuffleArray } from '@/utils/helpers';
+import QuestionImage from '@/components/common/QuestionImage';
 
 // MultipleChoiceQuestion Component
 const MultipleChoiceQuestion = ({ questionData, questionIndex, selectedAnswers = [], onChange, isSubmitted, feedback, isIndividuallyChecked }) => {
diff --git a/src/components/questions/SingleChoiceQuestion.jsx b/src/components/questions/SingleChoiceQuestion.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { shuffleArray } from '../../utils/helpers';
-import QuestionImage from '../common/QuestionImage';
+import { shuffleArray } from '@/utils/helpers';
+import QuestionImage from '@/components/common/QuestionImage';
 
 // SingleChoiceQuestion Component
 const SingleChoiceQuestion = ({ questionData, questionIndex, selectedAnswer, onChange, isSubmitted, feedback, isIndividuallyChecked }) => {
diff --git a/src/components/quizz/NoQuestions.jsx b/src/components/quizz/NoQuestions.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import QuestionIcon from '../../icons/QuestionIcon';
+import QuestionIcon from '@/icons/QuestionIcon';
 
 const NoQuestions = ({ activeSetName }) => {
     return (
diff --git a/src/components/quizz/QuestionList.jsx b/src/components/quizz/QuestionList.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import SingleChoiceQuestion from '../questions/SingleChoiceQuestion';
-import MultipleChoiceQuestion from '../questions/MultipleChoiceQuestion';
-import MatchingQuestion from '../questions/MatchingQuestion';
-import FillInTheBlanksQuestion from '../questions/FillInTheBlanksQuestion';
-import CheckIcon from '../../icons/CheckIcon';
+import SingleChoiceQuestion from '@/components/questions/SingleChoiceQuestion';
+import MultipleChoiceQuestion from '@/components/questions/MultipleChoiceQuestion';
+import MatchingQuestion from '@/components/questions/MatchingQuestion';
+import FillInTheBlanksQuestion from '@/components/questions/FillInTheBlanksQuestion';
+import CheckIcon from '@/icons/CheckIcon';
 
 const QuestionList = ({
     questions,
diff --git a/src/components/quizz/QuizHeader.jsx b/src/components/quizz/QuizHeader.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import QuestionIcon from '../../icons/QuestionIcon';
-import ResetIcon from '../../icons/ResetIcon';
-import ProgressBar from '../ProgressBar';
-import { useGlobalConfirmation } from '../../contexts/ConfirmationModalContext';
+import QuestionIcon from '@/icons/QuestionIcon';
+import ResetIcon from '@/icons/ResetIcon';
+import ProgressBar from '@/components/ProgressBar';
+import { useGlobalConfirmation } from '@/contexts/ConfirmationModalContext';
 
 const QuizHeader = ({ activeSetName, quizData, isSubmitted, completionPercentage, onClearProgress }) => {
     const { confirmDanger } = useGlobalConfirmation();
diff --git a/src/components/quizz/QuizResults.jsx b/src/components/quizz/QuizResults.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import TrophyIcon from '../../icons/TrophyIcon';
-import RefreshIcon from '../../icons/RefreshIcon';
+import TrophyIcon from '@/icons/TrophyIcon';
+import RefreshIcon from '@/icons/RefreshIcon';
 
 const QuizResults = ({ results, activeSetName, onRetry, shuffledQuestions }) => {
     if (!results) return null;
diff --git a/src/contexts/ConfirmationModalContext.jsx b/src/contexts/ConfirmationModalContext.jsx
@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from 'react';
-import { useConfirmationModal } from '../hooks/useConfirmationModal';
-import ConfirmationModal from '../components/common/ConfirmationModal';
+import { useConfirmationModal } from '@/hooks/useConfirmationModal';
+import ConfirmationModal from '@/components/common/ConfirmationModal';
 
 const ConfirmationModalContext = createContext();
 
diff --git a/src/contexts/StudySetContext.jsx b/src/contexts/StudySetContext.jsx
@@ -1,6 +1,6 @@
 import React, { createContext, useState, useCallback } from 'react';
-import { useQuizData } from '../hooks/useQuizData';
-import { useFlashcardData } from '../hooks/useFlashcardData';
+import { useQuizData } from '@/hooks/useQuizData';
+import { useFlashcardData } from '@/hooks/useFlashcardData';
 
 const StudySetContext = createContext();
 
diff --git a/src/contexts/useStudySets.js b/src/contexts/useStudySets.js
@@ -1,4 +1,4 @@
 import { useContext } from 'react';
-import { StudySetContext } from './StudySetContext'; // Assuming StudySetContext is default export or named export from its file
+import { StudySetContext } from '@/contexts/StudySetContext'; // Assuming StudySetContext is default export or named export from its file
 
 export const useStudySets = () => useContext(StudySetContext);
diff --git a/src/hooks/useFlashcardData.js b/src/hooks/useFlashcardData.js
@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import { loadAllSets, saveAllSets, loadActiveSetName, saveActiveSetName, getDefaultsForType } from '../services/storageManager';
+import { loadAllSets, saveAllSets, loadActiveSetName, saveActiveSetName, getDefaultsForType } from '@/services/storageManager';
 
 const flashcardDefaults = getDefaultsForType('flashcard');
 
diff --git a/src/hooks/useQuizData.js b/src/hooks/useQuizData.js
@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import { loadAllSets, saveAllSets, loadActiveSetName, saveActiveSetName, getDefaultsForType } from '../services/storageManager';
+import { loadAllSets, saveAllSets, loadActiveSetName, saveActiveSetName, getDefaultsForType } from '@/services/storageManager';
 
 const quizDefaults = getDefaultsForType('quiz');
 
diff --git a/src/hooks/useQuizProgress.js b/src/hooks/useQuizProgress.js
@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from 'react';
-import { saveQuizProgress, loadQuizProgress, clearQuizProgress } from '../services/storageManager';
-import { useShuffle } from './useShuffle';
+import { saveQuizProgress, loadQuizProgress, clearQuizProgress } from '@/services/storageManager';
+import { useShuffle } from '@/hooks/useShuffle';
 
 export const useQuizProgress = (activeQuizSetName, originalQuestions, isSubmitted) => {
     const [answers, setAnswers] = useState({});
diff --git a/src/hooks/useShuffle.js b/src/hooks/useShuffle.js
@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { shuffleArray } from '../utils/helpers';
+import { shuffleArray } from '@/utils/helpers';
 
 /**
  * Custom hook to manage shuffle functionality for any data array
diff --git a/src/layout/AppLayout.jsx b/src/layout/AppLayout.jsx
@@ -1,13 +1,13 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
-import Navigation from '../components/common/Navigation';
-import AppRoutes from '../routes/AppRoutes';
-import RouteDebugger from '../components/debug/RouteDebugger';
-import GitHubIcon from '../icons/GitHubIcon';
-import ArrowUpIcon from '../icons/ArrowUpIcon';
-import ArrowDownIcon from '../icons/ArrowDownIcon';
-import QuestionIcon from '../icons/QuestionIcon';
-import BookIcon from '../icons/BookIcon';
+import Navigation from '@/components/common/Navigation';
+import AppRoutes from '@/routes/AppRoutes';
+import RouteDebugger from '@/components/debug/RouteDebugger';
+import GitHubIcon from '@/icons/GitHubIcon';
+import ArrowUpIcon from '@/icons/ArrowUpIcon';
+import ArrowDownIcon from '@/icons/ArrowDownIcon';
+import QuestionIcon from '@/icons/QuestionIcon';
+import BookIcon from '@/icons/BookIcon';
 
 /**
  * Layout principal de la aplicación con React Router
diff --git a/src/main.jsx b/src/main.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import './index.css';
-import { StudySetProvider } from './contexts/StudySetContext'; // Import the provider
-import { ConfirmationModalProvider } from './contexts/ConfirmationModalContext'; // Import the modal provider
+import { createRoot } from 'react-dom/client';
+import App from '@/App';
+import '@/index.css';
+import { StudySetProvider } from '@/contexts/StudySetContext'; // Import the provider
+import { ConfirmationModalProvider } from '@/contexts/ConfirmationModalContext'; // Import the modal provider
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <StudySetProvider> {/* Wrap App with the provider */}
       <ConfirmationModalProvider> {/* Wrap App with the modal provider */}
diff --git a/src/pages/EditorPage.jsx b/src/pages/EditorPage.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { useStudySets } from '../contexts/useStudySets';
-import EditorTab from '../tabs/EditorTab';
-import QuizIcon from '../icons/QuizIcon';
-import CardIcon from '../icons/CardIcon';
+import { useStudySets } from '@/contexts/useStudySets';
+import EditorTab from '@/tabs/EditorTab';
+import QuizIcon from '@/icons/QuizIcon';
+import CardIcon from '@/icons/CardIcon';
 
 /**
  * Página del Editor con selector de tipo de contenido
diff --git a/src/pages/ExportPage.jsx b/src/pages/ExportPage.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useContext, useCallback } from 'react';
-import { StudySetContext } from '../contexts/StudySetContext';
-import ImportExportIcon from '../icons/ImportExportIcon';
-import ClipboardControls from '../components/editor/ClipboardControls';
+import { StudySetContext } from '@/contexts/StudySetContext';
+import ImportExportIcon from '@/icons/ImportExportIcon';
+import ClipboardControls from '@/components/editor/ClipboardControls';
 
 const ExportPage = () => {
   const {
diff --git a/src/pages/ImportPage.jsx b/src/pages/ImportPage.jsx
@@ -1,8 +1,8 @@
 import React, { useState, useContext } from 'react';
-import { StudySetContext } from '../contexts/StudySetContext';
-import ImportExportIcon from '../icons/ImportExportIcon';
-import ClipboardControls from '../components/editor/ClipboardControls';
-import FileDropZone from '../components/common/FileDropZone';
+import { StudySetContext } from '@/contexts/StudySetContext';
+import ImportExportIcon from '@/icons/ImportExportIcon';
+import ClipboardControls from '@/components/editor/ClipboardControls';
+import FileDropZone from '@/components/common/FileDropZone';
 
 const ImportPage = () => {
   const { handleSaveAsNewSet } = useContext(StudySetContext);
diff --git a/src/routes/AppRoutes.jsx b/src/routes/AppRoutes.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Routes, Route, Navigate } from 'react-router-dom';
-import QuizTab from '../tabs/QuizTab';
-import EditorPage from '../pages/EditorPage';
-import ImportPage from '../pages/ImportPage';
-import ExportPage from '../pages/ExportPage';
-import HelpTab from '../tabs/HelpTab';
-import FlashcardTab from '../tabs/FlashcardTab';
+import QuizTab from '@/tabs/QuizTab';
+import EditorPage from '@/pages/EditorPage';
+import ImportPage from '@/pages/ImportPage';
+import ExportPage from '@/pages/ExportPage';
+import HelpTab from '@/tabs/HelpTab';
+import FlashcardTab from '@/tabs/FlashcardTab';
 
 /**
  * Configuración declarativa de rutas de la aplicación
diff --git a/src/tabs/EditorTab.jsx b/src/tabs/EditorTab.jsx
@@ -1,13 +1,13 @@
-import { useState, useEffect } from 'react';
-import { useStudySets } from '../contexts/useStudySets'; // Import useStudySets
-import { useGlobalConfirmation } from '../contexts/ConfirmationModalContext';
-import { parseAndValidateSetData } from '../services/validationService';
-import { copyToClipboard, readFromClipboard } from '../services/clipboardManager';
-import { loadQuizProgress, clearQuizProgress } from '../services/storageManager';
-import { calculateProgressPercentage } from '../utils/progressUtils';
-import SetManagementControls from '../components/editor/SetManagementControls';
-import ClipboardControls from '../components/editor/ClipboardControls';
-import SaveActions from '../components/editor/SaveActions';
+import React, { useState, useRef, useEffect } from 'react';
+import { useStudySets } from '@/contexts/useStudySets'; // Import useStudySets
+import { useGlobalConfirmation } from '@/contexts/ConfirmationModalContext';
+import { parseAndValidateSetData } from '@/services/validationService';
+import { copyToClipboard, readFromClipboard } from '@/services/clipboardManager';
+import { loadQuizProgress, clearQuizProgress } from '@/services/storageManager';
+import { calculateProgressPercentage } from '@/utils/progressUtils';
+import SetManagementControls from '@/components/editor/SetManagementControls';
+import ClipboardControls from '@/components/editor/ClipboardControls';
+import SaveActions from '@/components/editor/SaveActions';
 
 // Editor Tab Component: Allows editing the quiz questions and managing sets
 const EditorTab = () => { // Removed all props
diff --git a/src/tabs/FlashcardTab.jsx b/src/tabs/FlashcardTab.jsx
@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { useStudySets } from '../contexts/useStudySets';
-import EmptyFlashcardIcon from '../icons/EmptyFlashcardIcon';
-import SingleFlashcardView from '../components/flashcards/SingleFlashcardView';
-import GridFlashcardView from '../components/flashcards/GridFlashcardView';
-import ShuffleControls from '../components/common/ShuffleControls';
-import { useShuffle } from '../hooks/useShuffle';
-import EmptyFlashcardState from '../components/flashcards/EmptyFlashcardState';
+import { useStudySets } from '@/contexts/useStudySets';
+import EmptyFlashcardIcon from '@/icons/EmptyFlashcardIcon';
+import SingleFlashcardView from '@/components/flashcards/SingleFlashcardView';
+import GridFlashcardView from '@/components/flashcards/GridFlashcardView';
+import ShuffleControls from '@/components/common/ShuffleControls';
+import { useShuffle } from '@/hooks/useShuffle';
+import EmptyFlashcardState from '@/components/flashcards/EmptyFlashcardState';
 
 // FlashcardTab Component: Displays flashcards and handles navigation
 const FlashcardTab = () => {
diff --git a/src/tabs/HelpTab.jsx b/src/tabs/HelpTab.jsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { AI_PROMPT, HELP_TAB_CONTENT } from '../constants/helpTabConstants';
-import { copyToClipboard } from '../services/clipboardManager';
+import { AI_PROMPT, HELP_TAB_CONTENT } from '@/constants/helpTabConstants';
+import { copyToClipboard } from '@/services/clipboardManager';
 
 // Help Tab Component: Displays static help content using JSX and adds Copy Prompt button
 const HelpTab = () => {
diff --git a/src/tabs/QuizTab.jsx b/src/tabs/QuizTab.jsx
diff --git a/vite.config.js b/vite.config.js

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import EmptyFlashcardIcon from '../../icons/EmptyFlashcardIcon';`
	`1`	`+import EmptyFlashcardIcon from '@/icons/EmptyFlashcardIcon';`
`2`	`2`
`3`	`3`	`const EmptyFlashcardState = ({ activeFlashcardSetName, onGoToEditor }) => {`
`4`	`4`	`return (`