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,3 +1,4 @@
import GuideOverlay from "@/components/GuideOverlay";
import ButtonTab from "@/components/buttonTab";
import InputSearch from "@/components/inputSearch";
import LabelStatus from "@/components/labelStatus";
@@ -6,6 +7,8 @@ import Text from "@/components/Text";
import WrapTab from "@/components/wrapTab";
import Styles from "@/constants/Styles";
import { apiGetDiscussionGeneral } from "@/lib/api";
import { GUIDE_DISCUSSION } from "@/lib/guideSteps";
import { useGuide } from "@/lib/useGuide";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign, Feather } from "@expo/vector-icons";
@@ -34,6 +37,7 @@ export default function Discussion() {
const queryClient = useQueryClient()
const [status, setStatus] = useState<'true' | 'false'>(active == 'false' ? 'false' : 'true')
const [refreshing, setRefreshing] = useState(false)
const { visible: guideVisible, dismiss: dismissGuide } = useGuide('discussion')
const {
data,
@@ -85,6 +89,7 @@ export default function Discussion() {
return (
<View style={[Styles.flex1, { backgroundColor: colors.background }]}>
<GuideOverlay visible={guideVisible} steps={GUIDE_DISCUSSION} onDismiss={dismissGuide} />
{/* Header controls */}
<View style={[Styles.ph15, { paddingTop: 12 }]}>
{entityUser.role != "user" && entityUser.role != "coadmin" && (