[Feature] show onboarding gudie when first time open

Signed-off-by: Kent Huang <kent@infuseai.io>

js/app/page.tsx

@@ -44,6 +44,7 @@ import { StateSynchronizer } from "@/components/check/StateSynchronizer";
 import { Check, listChecks } from "@/lib/api/checks";
 import { cacheKeys } from "@/lib/api/cacheKeys";
 import { LineagePage } from "@/components/lineage/LineagePage";
+import OnboardingGuide from "@/components/onboarding-guide/OnboardingGuide";
 
 function getCookie(key: string) {
   var b = document.cookie.match("(^|;)\\s*" + key + "\\s*=\\s*([^;]+)");
@@ -297,6 +298,7 @@ export default function Home() {
               <Flex direction="column" height="100vh">
                 <TopBar />
                 <NavBar />
+                <OnboardingGuide />
                 <ErrorBoundary>
                   <Box
                     p={0}

js/src/components/onboarding-guide/OnboardingGuide.tsx

@@ -0,0 +1,55 @@
+import { Button, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Image, List, ListItem, Stack, Divider } from "@chakra-ui/react";
+import React from "react";
+import { useEffect, useState } from "react";
+
+
+const OnboardingGuide = () => {
+  const [isGuideOpen, setIsGuideOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    const hasVisited = localStorage.getItem("hasVisited");
+    if (!hasVisited) {
+      setIsGuideOpen(true);
+      localStorage.setItem("hasVisited", "true");
+    }
+  }, []);
+
+  const closeGuide = () => {
+    setIsGuideOpen(false);
+  }
+
+  return (
+  <>
+    <Modal isOpen={isGuideOpen} onClose={closeGuide}>
+      <ModalOverlay />
+        <ModalContent maxW="80vw" h="80vh">
+          <ModalHeader>Welcome to Recce: 3 Steps to Begin</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Stack spacing={4}>
+            <List spacing={2}>
+              <ListItem>Step 1: Click the model you want to check</ListItem>
+              <ListItem>Step 2: Click &quot;Explore Change&quot;</ListItem>
+              <ListItem>Step 3: Click &quot;Add to Checklist&quot;</ListItem>
+            </List>
+            <Divider />
+            <Image
+              src="https://datarecce.io/assets/images/onboarding/material.svg"
+              alt="placeholder"
+            />
+            </Stack>
+          </ModalBody>
+          <ModalFooter>
+            <Button colorScheme="blue" onClick={closeGuide}>
+              Got it!
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+    </Modal>
+  </>
+  );
+};
+
+
+export default OnboardingGuide;
+