add baseline for remaining syncModel steps

package.json

@@ -23,7 +23,8 @@
     "@netlify/functions": "^2.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router": "^6.26.2"
+    "react-router": "^6.26.2",
+    "react-router-dom": "^6.26.2"
   },
   "devDependencies": {
     "@kontent-ai/eslint-config": "^1.0.2",

src/App.tsx

@@ -1,15 +1,28 @@
-import { Header } from "./components/Header";
-
-import Wizard from "./components/Wizard";
 import "@kontent-ai/stylekit";
 
-function App() {
-  return (
-    <div className="content">
-      <Header />
-      <Wizard />
-    </div>
-  );
-}
+import React from "react";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+
+import Home from "./components/Home";
+import { SyncDiff } from "./components/sync/SyncDiff";
+import { SyncEntities } from "./components/sync/SyncEntities";
+import { SyncSource } from "./components/sync/SyncSource";
+import { SyncTarget } from "./components/sync/SyncTarget";
+import { WizardProvider } from "./WizardContext";
+
+const App: React.FC = () => (
+  <WizardProvider>
+    <Router>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/sync/source" element={<SyncSource />} />
+        <Route path="/sync/target" element={<SyncTarget />} />
+        <Route path="/sync/entities" element={<SyncEntities />} />
+        <Route path="/sync/diff" element={<SyncDiff />} />
+        {/* remaining routes */}
+      </Routes>
+    </Router>
+  </WizardProvider>
+);
 
 export default App;

src/WizardContext.tsx

@@ -0,0 +1,78 @@
+import { ManagementClient } from "@kontent-ai/management-sdk";
+import React, { createContext, useState } from "react";
+
+const syncEntityChoices = [
+  "contentTypes",
+  "contentTypeSnippets",
+  "taxonomies",
+  "collections",
+  "assetFolders",
+  "spaces",
+  "languages",
+  "webSpotlight",
+  "workflows",
+] as const;
+
+export type SyncEntityName = (typeof syncEntityChoices)[number];
+
+interface WizardContextProps {
+  action?: string;
+  sourceEnvironmentId?: string;
+  targetEnvironmentId?: string;
+  sourceClient?: ManagementClient;
+  targetClient?: ManagementClient;
+  sourceFile?: File | null;
+  sourceApiKey?: string;
+  targetApiKey?: string;
+  syncModelEntities: SyncEntityName[];
+  setAction: (action: string) => void;
+  setSourceEnvironmentId: (id: string) => void;
+  setTargetEnvironmentId: (id: string) => void;
+  setSourceClient: (client: ManagementClient) => void;
+  setTargetClient: (client: ManagementClient) => void;
+  setSourceFile: (file: File | null) => void;
+  setSourceApiKey: (key: string) => void;
+  setTargetApiKey: (key: string) => void;
+  setSyncModelEntities: (entities: SyncEntityName[]) => void;
+}
+
+export const WizardContext = createContext<WizardContextProps>({} as WizardContextProps);
+
+export const WizardProvider: React.FC<any> = ({ children }) => {
+  const [action, setAction] = useState<string>();
+  const [sourceEnvironmentId, setSourceEnvironmentId] = useState<string>();
+  const [targetEnvironmentId, setTargetEnvironmentId] = useState<string>();
+  const [sourceClient, setSourceClient] = useState<ManagementClient>();
+  const [targetClient, setTargetClient] = useState<ManagementClient>();
+  const [sourceFile, setSourceFile] = useState<File | null>(null);
+  const [sourceApiKey, setSourceApiKey] = useState<string>();
+  const [targetApiKey, setTargetApiKey] = useState<string>();
+  const [syncModelEntities, setSyncModelEntities] = useState<SyncEntityName[]>([]);
+
+  return (
+    <WizardContext.Provider
+      value={{
+        action,
+        sourceEnvironmentId,
+        targetEnvironmentId,
+        sourceClient,
+        targetClient,
+        sourceFile,
+        sourceApiKey,
+        targetApiKey,
+        syncModelEntities,
+        setAction,
+        setSourceEnvironmentId,
+        setTargetEnvironmentId,
+        setSourceClient,
+        setTargetClient,
+        setSourceFile,
+        setSourceApiKey,
+        setTargetApiKey,
+        setSyncModelEntities,
+      }}
+    >
+      {children}
+    </WizardContext.Provider>
+  );
+};

src/components/Home.tsx

@@ -0,0 +1,41 @@
+// src/components/Home.tsx
+import React, { useContext } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { WizardContext } from "../WizardContext";
+
+const Home: React.FC = () => {
+  const { setAction } = useContext(WizardContext);
+  const navigate = useNavigate();
+
+  const handleSelectAction = (selectedAction: string) => {
+    setAction(selectedAction);
+    if (selectedAction === "sync") {
+      navigate("/sync/source");
+    } else {
+      alert("This action is not implemented yet.");
+    }
+  };
+
+  return (
+    <div>
+      <h2>Select an Action</h2>
+      <ul>
+        <li>
+          <button onClick={() => handleSelectAction("sync")}>Sync</button>
+        </li>
+        <li>
+          <button disabled>Diff Model</button>
+        </li>
+        <li>
+          <button disabled>Import/Export</button>
+        </li>
+        <li>
+          <button disabled>Clean</button>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default Home;