87 implement state machine with stepper visualization for api call coordination ynab settleup

.gitignore

@@ -54,4 +54,7 @@ coverage/
 *.webmanifest
 
 # Auto-generated version file
-src/version.js
+src/version.js
+
+# Planning files
+STATE_MACHINE_PLAN.md

README.md

@@ -152,7 +152,7 @@ The app is optimized for static hosting and works great with services like Nginx
 
 ```text
 src/
-├── App.jsx                 # Main application component
+├── ExpenseForm.jsx         # Main expense form component
 ├── AppContext.jsx          # Global application context
 ├── AuthProvider.jsx        # SettleUp authentication
 ├── MainFormPage.jsx        # Main form interface

package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
+    "@xstate/react": "^6.0.0",
     "axios": "^1.9.0",
     "firebase": "^11.10.0",
     "framer-motion": "^12.18.1",
@@ -34,6 +35,7 @@
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.9.4",
     "react-transition-group": "^4.4.5",
+    "xstate": "^5.25.1",
     "ynab": "^2.9.0"
   },
   "devDependencies": {

src/App.jsx → src/ExpenseForm.jsx

@@ -20,7 +20,7 @@ import { formStatePropType } from "./propTypes.js";
 import { getClosestLocation } from "./utils/ynabUtils.js";
 import "./index.css";
 
-export default function App({ onSubmit, formState, setFormState }) {
+export default function ExpenseForm({ onSubmit, formState, setFormState }) {
   const { ynabAPI, budgetId, setAccounts } = useAppContext();
   const { token: settleUpToken, user: settleUpUser } = useAuth();
   const [payees, setPayees] = useState([]);
@@ -429,8 +429,8 @@ export default function App({ onSubmit, formState, setFormState }) {
   );
 }
 
-App.propTypes = {
+ExpenseForm.propTypes = {
   onSubmit: PropTypes.func.isRequired,
   formState: formStatePropType.isRequired,
   setFormState: PropTypes.func.isRequired,
-};
+};

src/MainFormPage.jsx

@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 import { useState } from "react";
 
-import App from "./App.jsx";
+import ExpenseForm from "./ExpenseForm.jsx";
 import { useAuth } from "./AuthProvider.jsx";
 import CenteredCardLayout from "./components/CenteredCardLayout.jsx";
 import { formStatePropType } from "./propTypes";
@@ -35,7 +35,7 @@
           Logout
         </button>
       </div>
-      <App
+      <ExpenseForm
         onSubmit={() => setShowReview(true)}
         formState={formState}
         setFormState={setFormState}