feat: tambah sistem guide onboarding per fitur dengan GuideOverlay

- Buat komponen GuideOverlay dengan animasi fade+slide, arrow tooltip, dan dot indicator
- Buat hook useGuide untuk menyimpan state guide per fitur via AsyncStorage
- Sentralisasi semua step guide di lib/guideSteps.ts
- Pasang guide pada 12 halaman: village-calendar, project detail, banner, group, position, member, announcement, discussion, division calendar/document/discussion, dan division task detail
- Posisi card menggunakan cardTopRatio (rasio layar) untuk kompatibilitas berbagai ukuran device
- Tambah styles guide dan village calendar di constants/Styles.ts
This commit is contained in:
2026-05-11 16:34:46 +08:00
parent 84935e8188
commit 7341f378dd
16 changed files with 539 additions and 1 deletions

View File

@@ -1,4 +1,5 @@
import AppHeader from "@/components/AppHeader";
import GuideOverlay from "@/components/GuideOverlay";
import HeaderRightProjectDetail from "@/components/project/headerProjectDetail";
import SectionFile from "@/components/project/sectionFile";
import SectionLink from "@/components/project/sectionLink";
@@ -9,6 +10,8 @@ import SectionCancel from "@/components/sectionCancel";
import SectionProgress from "@/components/sectionProgress";
import Styles from "@/constants/Styles";
import { apiGetProjectOne } from "@/lib/api";
import { GUIDE_PROJECT_DETAIL } from "@/lib/guideSteps";
import { useGuide } from "@/lib/useGuide";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -43,6 +46,7 @@ export default function DetailProject() {
const [isMember, setIsMember] = useState(false)
const entityUser = useSelector((state: any) => state.user)
const [refreshing, setRefreshing] = useState(false)
const { visible: guideVisible, dismiss: dismissGuide } = useGuide('project-detail')
async function handleLoad(cat: 'data' | 'progress') {
try {
@@ -129,6 +133,7 @@ export default function DetailProject() {
)
}}
/>
<GuideOverlay visible={guideVisible} steps={GUIDE_PROJECT_DETAIL} onDismiss={dismissGuide} />
<ScrollView
style={[Styles.h100, { backgroundColor: colors.background }]}
refreshControl={