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:
@@ -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={
|
||||
|
||||
Reference in New Issue
Block a user