@schandlergarcia/sf-web-components 2.2.0 → 2.3.0

package/brands/engine/app/pages/DataTest.tsx

@@ -0,0 +1,78 @@
+import { createDataSDK, gql } from "@salesforce/sdk-data";
+import { useEffect, useState } from "react";
+
+const GET_CURRENT_USER = gql`
+  query GetCurrentUser {
+    uiapi {
+      currentUser {
+        Id
+        Name @optional { value }
+        Email @optional { value }
+      }
+    }
+  }
+`;
+
+export default function DataTest() {
+  const [status, setStatus] = useState("Loading...");
+  const [user, setUser] = useState<any>(null);
+  const [error, setError] = useState<any>(null);
+
+  useEffect(() => {
+    async function test() {
+      try {
+        console.log("Creating Data SDK...");
+        const sdk = await createDataSDK();
+        console.log("SDK created:", sdk);
+
+        console.log("Executing GraphQL query...");
+        const response = await sdk.graphql?.(GET_CURRENT_USER);
+        console.log("Response:", response);
+
+        if (response?.errors?.length) {
+          throw new Error(JSON.stringify(response.errors, null, 2));
+        }
+
+        const userData = response?.data?.uiapi?.currentUser;
+        console.log("User data:", userData);
+        setUser(userData);
+        setStatus("Success!");
+      } catch (err: any) {
+        console.error("Error:", err);
+        setError(err);
+        setStatus("Error - check console");
+      }
+    }
+
+    test();
+  }, []);
+
+  return (
+    <div style={{ padding: "2rem", fontFamily: "monospace" }}>
+      <h1>Data SDK Test</h1>
+      <div style={{ marginTop: "1rem" }}>
+        <strong>Status:</strong> {status}
+      </div>
+
+      {user && (
+        <div style={{ marginTop: "1rem", background: "#e8f5e9", padding: "1rem", borderRadius: "4px" }}>
+          <strong>Current User:</strong>
+          <pre>{JSON.stringify(user, null, 2)}</pre>
+        </div>
+      )}
+
+      {error && (
+        <div style={{ marginTop: "1rem", background: "#ffebee", padding: "1rem", borderRadius: "4px" }}>
+          <strong>Error:</strong>
+          <pre>{error.toString()}</pre>
+          {error.stack && <pre style={{ fontSize: "0.8em", marginTop: "0.5rem" }}>{error.stack}</pre>}
+        </div>
+      )}
+
+      <div style={{ marginTop: "2rem", fontSize: "0.9em", color: "#666" }}>
+        <p>Check browser console for detailed logs</p>
+        <p>Expected: Current user info from Salesforce org</p>
+      </div>
+    </div>
+  );
+}

package/brands/engine/app/pages/Home.tsx

@@ -0,0 +1,5 @@
+import CommandCenter from "@/components/workspace/CommandCenter";
+
+export default function HomePage() {
+	return <CommandCenter />;
+}

package/brands/engine/app/pages/NotFound.tsx

@@ -0,0 +1,19 @@
+import { useNavigate } from "react-router";
+import { Button } from "@/components/ui/button";
+
+export default function NotFound() {
+	const navigate = useNavigate();
+
+	return (
+		<div className="flex min-h-[80vh] items-center justify-center px-4 sm:px-6 lg:px-8">
+			<div className="w-full max-w-2xl text-center">
+				<h1 className="text-6xl font-bold text-slate-900 dark:text-slate-50 mb-4">404</h1>
+				<h2 className="text-2xl font-semibold text-slate-700 dark:text-slate-300 mb-4">Page Not Found</h2>
+				<p className="text-lg text-slate-600 dark:text-slate-400 mb-8">
+					The page you're looking for doesn't exist.
+				</p>
+				<Button onClick={() => navigate("/")}>Go Home</Button>
+			</div>
+		</div>
+	);
+}