Merge branch 'main' into main

Author: cmarchena

package.json

@@ -6,19 +6,20 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
-    "date-fns": "^4.1.0",
     "framer-motion": "^12.23.22",
     "lucide-react": "^0.544.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-scripts": "5.0.1",
     "react-swipeable": "^7.0.2",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "date-fns": "^4.1.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "jest",
+    "test": "react-scripts test",
+    "test:coverage": "react-scripts test --coverage",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -39,13 +40,14 @@
       "last 1 safari version"
     ]
   },
-  "devDependencies": {
-    "@babel/core": "^7.28.4",
-    "@babel/preset-env": "^7.28.3",
-    "@babel/preset-react": "^7.27.1",
-    "@testing-library/jest-dom": "^6.9.1",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.5.1",
-    "jsdom": "^27.0.0"
+  "jest": {
+    "collectCoverageFrom": [
+      "src/hooks/useAchievements.js"
+    ],
+    "testMatch": [
+      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
+      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}",
+      "<rootDir>/tests/**/*.{spec,test}.{js,jsx,ts,tsx}"
+    ]
   }
 }

src/App.css

@@ -289,3 +289,51 @@ input[type="text"]:focus, select:focus {
     transform: rotate(360deg);
   }
 }
+
+/* --- Styles for Motivational Quote Component --- */
+
+.motivational-quote-container {
+  width: 100%;
+  max-width: 600px; /* Adjust max-width as needed */
+  margin: 0 auto 1.5rem auto; /* Centers the component and adds bottom margin */
+  padding: 1.5rem;
+  background-color: #f8f9fa; /* A light, clean background */
+  border: 1px solid #dee2e6;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  text-align: center;
+}
+
+.quote-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem; /* Space between icon and title */
+}
+
+.quote-icon {
+  color: #f59e0b; /* A warm yellow for the lightbulb */
+}
+
+.quote-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #343a40;
+  margin: 0;
+}
+
+.quote-text {
+  font-size: 1.25rem;
+  font-style: italic;
+  color: #495057;
+  margin: 1rem 0;
+}
+
+.quote-author {
+  display: block; /* Makes it take its own line */
+  text-align: right; /* Aligns the author to the right */
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: #6c757d;
+  margin-top: 0.5rem;
+}

src/App.js

@@ -1,5 +1,7 @@
-import './App.css';
+import './App.css'; // This line imports the styles you just added
 import { useState, useCallback } from 'react';
+// Import custom hook for habit reminders
+import { useReminder } from './hooks/useReminder';
 import { subWeeks, addWeeks, subMonths, addMonths } from 'date-fns';
 import { useHabits } from './hooks/useHabits';
 import { achievements } from './constants';
@@ -10,6 +12,9 @@ import CalendarToggle from './components/CalendarToggle';
 import HabitGrid from './components/HabitGrid';
 import HabitCard from './components/HabitCard';
 import AchievementModal from './components/AchievementModal';
+import NotificationSettings from './components/NotificationSettings/NotificationSettings';
+// --- 1. IMPORT THE NEW MOTIVATIONAL QUOTE COMPONENT ---
+import MotivationalQuote from './components/MotivationalQuote';
 
 function App() {
   const {
@@ -24,10 +29,18 @@ function App() {
 
   const [selectedCategory, setSelectedCategory] = useState('All');
   const [calendarMode, setCalendarMode] = useState('90day');
-  const [newlyUnlocked, setNewlyUnlocked] = useState([]);
-  const [modalOpen, setModalOpen] = useState(false);
+  // Removed unused state: newlyUnlocked, setNewlyUnlocked, modalOpen, setModalOpen
   const [selectedHabit, setSelectedHabit] = useState(null);
   const [currentDate, setCurrentDate] = useState(new Date());
+  // User opt-in for habit reminders (permission control)
+  const [reminderPermission, setReminderPermission] = useState(false);
+  // Function to show a simple toast/alert for reminders
+  const showReminder = (habit) => {
+    alert(`Reminder: Complete Daily ${habit.name}!`);
+  };
+
+  // Integrate reminder hook: only active if user has opted in
+  useReminder(habits, showReminder, reminderPermission);
 
   const filteredHabits = selectedCategory === 'All'
     ? habits
@@ -43,16 +56,15 @@ function App() {
 
   const handleToggleCompletion = useCallback((habitId, day) => {
     toggleCompletion(habitId, day);
-    // Note: Handling newly unlocked achievements would need to be adjusted
   }, [toggleCompletion]);
 
+  // Show achievements modal for selected habit
   const handleViewAchievements = useCallback((habit) => {
     setSelectedHabit(habit);
-    setModalOpen(true);
   }, []);
 
+  // Close achievements modal
   const handleCloseModal = useCallback(() => {
-    setModalOpen(false);
     setSelectedHabit(null);
   }, []);
 
@@ -90,21 +102,15 @@ function App() {
     link.click();
     document.body.removeChild(link);
   };
-
-  // START: Added JSON Export Logic
+  
   const handleExportJSON = () => {
     if (habits.length === 0) {
       alert("There are no habits to export.");
       return;
     }
 
-    // Convert the habits array to a pretty-printed JSON string
     const jsonContent = JSON.stringify(habits, null, 2);
-
-    // Create a Blob from the JSON string
     const blob = new Blob([jsonContent], { type: 'application/json;charset=utf-8;' });
-
-    // Create a link element to trigger the download
     const link = document.createElement('a');
     const url = URL.createObjectURL(blob);
     link.setAttribute('href', url);
@@ -114,14 +120,27 @@ function App() {
     link.click();
     document.body.removeChild(link);
   };
-  // END: Added JSON Export Logic
 
   return (
     <div className="App">
+      {/* Reminder permission opt-in UI */}
+      <div className="mb-4">
+        {/* Checkbox to allow user to enable/disable reminders */}
+        <label className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            checked={reminderPermission}
+            onChange={e => setReminderPermission(e.target.checked)}
+          />
+          Enable habit reminders (opt-in)
+        </label>
+      </div>
       <header className="App-header">
         <HabitForm onAddHabit={addHabit} />
+        
+        {/* --- 2. RENDER THE NEW COMPONENT RIGHT HERE --- */}
+        <MotivationalQuote />
 
-        {/* START: Added Export Buttons Container */}
         <div className="flex gap-2 mb-4">
           <button 
             onClick={handleExportCSV} 
@@ -136,9 +155,9 @@ function App() {
             Export to JSON
           </button>
         </div>
+        <NotificationSettings />
         {/* END: Added Export Buttons Container */}
 
-        {/* Achievements display */}
         <div className="mb-4 w-full max-w-sm text-left">
           <h4 className="font-semibold mb-2">Achievements:</h4>
           {habits.map(habit => (
@@ -167,7 +186,6 @@ function App() {
         </div>
 
         <CategoryFilter selectedCategory={selectedCategory} onSelectCategory={setSelectedCategory} />
-
         <CalendarToggle calendarMode={calendarMode} onToggle={toggleCalendarMode} />
 
         {calendarMode !== '90day' && (
@@ -177,7 +195,6 @@ function App() {
           </div>
         )}
 
-        {/* Display current habits */}
         <div style={{ marginTop: '20px', textAlign: 'left' }}>
           <h3>Current Habits:</h3>
           {filteredHabits.length === 0 ? (
@@ -192,7 +209,7 @@ function App() {
                   averageCompletion={averageCompletion}
                   onViewAchievements={handleViewAchievements}
                   onDelete={deleteHabit}
-                  newlyUnlocked={newlyUnlocked}
+                  // newlyUnlocked prop removed
                 />
               ))}
             </div>
@@ -223,4 +240,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

src/components/HabitCard.js

@@ -2,7 +2,7 @@ import { motion } from 'framer-motion';
 import { Award, Star, Medal, TrendingUp } from 'lucide-react';
 import { achievements } from '../constants';
 
-function HabitCard({ habit, calculateStreak, averageCompletion, onViewAchievements, onDelete, newlyUnlocked }) {
+function HabitCard({ habit, calculateStreak, averageCompletion, onViewAchievements, onDelete }) {
   const streak = calculateStreak(habit);
   const avg = averageCompletion(habit);
 
@@ -14,11 +14,10 @@ function HabitCard({ habit, calculateStreak, averageCompletion, onViewAchievemen
           const ach = achievements.find(a => a.id === aid);
           const Icon = ach.icon === 'Award' ? Award : ach.icon === 'Star' ? Star : Medal;
           const bgColor = ach.icon === 'Award' ? 'bg-yellow-500' : ach.icon === 'Star' ? 'bg-blue-500' : 'bg-green-500';
-          const isNew = newlyUnlocked.includes(aid);
+          // No 'isNew' animation since newlyUnlocked is not used
           return (
             <motion.div
               key={aid}
-              initial={isNew ? { scale: 0 } : { scale: 1 }}
               animate={{ scale: 1 }}
               whileHover={{ scale: 1.05 }}
               transition={{ duration: 0.5 }}

src/components/HabitForm.js

@@ -1,8 +1,10 @@
 import { useState } from 'react';
+import PropTypes from 'prop-types';
 import { categories } from '../constants';
 
 function HabitForm({ onAddHabit }) {
-  const [newHabit, setNewHabit] = useState({ name: '', category: 'General' });
+  // State includes reminderTime for optional daily reminder
+  const [newHabit, setNewHabit] = useState({ name: '', category: 'General', reminderTime: '' });
 
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -17,6 +19,7 @@ function HabitForm({ onAddHabit }) {
 
   return (
     <form onSubmit={handleSubmit} className="mb-4">
+      {/* Habit name input */}
       <input
         type="text"
         placeholder="Habit name"
@@ -25,13 +28,22 @@ function HabitForm({ onAddHabit }) {
         className="mb-2 p-2 border border-gray-300 rounded-md w-full max-w-sm"
         required
       />
+      {/* Category selection */}
       <select
         value={newHabit.category}
         onChange={(e) => setNewHabit({ ...newHabit, category: e.target.value })}
         className="mb-2 p-2 border border-gray-300 rounded-md w-full max-w-sm"
       >
         {categories.map(cat => <option key={cat} value={cat}>{cat}</option>)}
       </select>
+      {/* Reminder time input (optional) */}
+      <input
+        type="time"
+        value={newHabit.reminderTime}
+        onChange={e => setNewHabit({ ...newHabit, reminderTime: e.target.value })}
+        className="mb-2 p-2 border border-gray-300 rounded-md w-full max-w-sm"
+        placeholder="Reminder time (optional)"
+      />
       <button
         type="submit"
         className="mb-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
@@ -42,4 +54,9 @@ function HabitForm({ onAddHabit }) {
   );
 }
 
+
+HabitForm.propTypes = {
+  onAddHabit: PropTypes.func.isRequired,
+};
+
 export default HabitForm;

src/components/MotivationalQuote.js

@@ -0,0 +1,40 @@
+import { useState, useEffect } from 'react';
+import { Lightbulb } from 'lucide-react';
+
+// A self-contained list of quotes. This can be easily expanded.
+const quotes = [
+  { text: "The secret of getting ahead is getting started.", author: "Mark Twain" },
+  { text: "Consistency is more important than perfection.", author: "Unknown" },
+  { text: "Code is like humor. When you have to explain it, it’s bad.", author: "Cory House" },
+  { text: "The only way to do great work is to love what you do.", author: "Steve Jobs" },
+  { text: "Success is the sum of small efforts, repeated day in and day out.", author: "Robert Collier" },
+  { text: "Don't watch the clock; do what it does. Keep going.", author: "Sam Levenson" },
+  { text: "The best time to plant a tree was 20 years ago. The second best time is now.", author: "Chinese Proverb" }
+];
+
+function MotivationalQuote() {
+  const [quote, setQuote] = useState({ text: '', author: '' });
+
+  // This useEffect runs only once when the component is first mounted.
+  useEffect(() => {
+    const randomIndex = Math.floor(Math.random() * quotes.length);
+    setQuote(quotes[randomIndex]);
+  }, []); // Empty dependency array ensures it runs only once.
+
+  if (!quote.text) {
+    return null; // Don't render anything until a quote is selected
+  }
+
+  return (
+    <div className="motivational-quote-container">
+      <div className="quote-header">
+        <Lightbulb size={20} className="quote-icon" />
+        <h3 className="quote-title">Food for Thought</h3>
+      </div>
+      <p className="quote-text">"{quote.text}"</p>
+      <span className="quote-author">- {quote.author}</span>
+    </div>
+  );
+}
+
+export default MotivationalQuote;