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:
28
lib/useGuide.ts
Normal file
28
lib/useGuide.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
const KEY_PREFIX = '@guide:';
|
||||
|
||||
export function useGuide(featureKey: string) {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [checked, setChecked] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
AsyncStorage.getItem(KEY_PREFIX + featureKey).then((val) => {
|
||||
if (!val) setVisible(true);
|
||||
setChecked(true);
|
||||
});
|
||||
}, [featureKey]);
|
||||
|
||||
async function dismiss() {
|
||||
setVisible(false);
|
||||
await AsyncStorage.setItem(KEY_PREFIX + featureKey, 'done');
|
||||
}
|
||||
|
||||
async function reset() {
|
||||
await AsyncStorage.removeItem(KEY_PREFIX + featureKey);
|
||||
setVisible(true);
|
||||
}
|
||||
|
||||
return { visible: checked && visible, dismiss, reset };
|
||||
}
|
||||
Reference in New Issue
Block a user