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:
217
lib/guideSteps.ts
Normal file
217
lib/guideSteps.ts
Normal file
@@ -0,0 +1,217 @@
|
||||
import { GuideStep } from "@/components/GuideOverlay";
|
||||
|
||||
export const GUIDE_VILLAGE_CALENDAR: GuideStep[] = [
|
||||
{
|
||||
title: 'Kalender Umum',
|
||||
description: 'Halaman ini menampilkan semua acara divisi dan kegiatan yang ada di desa kamu dalam satu kalender.',
|
||||
cardTopRatio: 0.58,
|
||||
arrowDirection: 'up',
|
||||
arrowOffset: 0.5,
|
||||
},
|
||||
{
|
||||
title: 'Pilih Tanggal',
|
||||
description: 'Ketuk tanggal pada kalender untuk melihat acara dan kegiatan yang berlangsung pada hari tersebut.',
|
||||
cardTopRatio: 0.58,
|
||||
arrowDirection: 'up',
|
||||
arrowOffset: 0.5,
|
||||
},
|
||||
{
|
||||
title: 'Indikator Dot',
|
||||
description: 'Titik ungu menandakan ada acara divisi, titik biru-abu menandakan ada kegiatan pada tanggal tersebut.',
|
||||
cardTopRatio: 0.63,
|
||||
arrowDirection: 'up',
|
||||
arrowOffset: 0.12,
|
||||
},
|
||||
{
|
||||
title: 'Detail Event',
|
||||
description: 'Ketuk salah satu acara atau kegiatan di bawah untuk melihat detail lengkapnya.',
|
||||
cardTopRatio: 0.35,
|
||||
arrowDirection: 'down',
|
||||
arrowOffset: 0.5,
|
||||
},
|
||||
];
|
||||
|
||||
export const GUIDE_DIVISION_DISCUSSION: GuideStep[] = [
|
||||
{
|
||||
title: 'Diskusi Divisi',
|
||||
description: 'Halaman ini menampilkan semua topik diskusi dalam divisi. Setiap card menunjukkan pembuat, deskripsi singkat, jumlah komentar, dan status diskusi.',
|
||||
cardTopRatio: 0.35,
|
||||
arrowDirection: 'none',
|
||||
},
|
||||
{
|
||||
title: 'Buka Diskusi',
|
||||
description: 'Ketuk salah satu diskusi untuk membaca detail dan ikut berkomentar.',
|
||||
cardTopRatio: 0.35,
|
||||
arrowDirection: 'none',
|
||||
},
|
||||
];
|
||||
|
||||
export const GUIDE_DIVISION_DOCUMENT: GuideStep[] = [
|
||||
{
|
||||
title: 'Dokumen Divisi',
|
||||
description: 'Halaman ini menampilkan semua file dan folder dokumen milik divisi kamu.',
|
||||
cardTopRatio: 0.35,
|
||||
arrowDirection: 'none',
|
||||
},
|
||||
{
|
||||
title: 'Buka File atau Folder',
|
||||
description: 'Ketuk folder untuk masuk ke dalamnya, atau ketuk file untuk langsung membukanya.',
|
||||
cardTopRatio: 0.35,
|
||||
arrowDirection: 'none',
|
||||
},
|
||||
{
|
||||
title: 'Pilih & Kelola',
|
||||
description: 'Centang file atau folder untuk memilihnya, lalu gunakan menu di bawah untuk menghapus, mengganti nama, atau membagikan ke divisi lain.',
|
||||
cardTopRatio: 0.35,
|
||||
arrowDirection: 'none',
|
||||
},
|
||||
];
|
||||
|
||||
export const GUIDE_DIVISION_CALENDAR: GuideStep[] = [
|
||||
{
|
||||
title: 'Kalender Divisi',
|
||||
description: 'Halaman ini menampilkan semua acara yang ada di divisi kamu dalam satu kalender.',
|
||||
cardTopRatio: 0.50,
|
||||
arrowDirection: 'none',
|
||||
arrowOffset: 0.5,
|
||||
},
|
||||
{
|
||||
title: 'Indikator Acara',
|
||||
description: 'Garis di bawah tanggal menandakan ada acara pada hari tersebut. Ketuk tanggal untuk melihat daftarnya.',
|
||||
cardTopRatio: 0.50,
|
||||
arrowDirection: 'none',
|
||||
arrowOffset: 0.55,
|
||||
},
|
||||
{
|
||||
title: 'Detail Acara',
|
||||
description: 'Ketuk salah satu acara di bawah kalender untuk melihat detail lengkapnya.',
|
||||
cardTopRatio: 0.35,
|
||||
arrowDirection: 'down',
|
||||
arrowOffset: 0.55,
|
||||
},
|
||||
];
|
||||
|
||||
export const GUIDE_DISCUSSION: GuideStep[] = [
|
||||
{
|
||||
title: 'Daftar Diskusi',
|
||||
description: 'Halaman ini menampilkan semua topik diskusi. Setiap card menunjukkan judul, deskripsi singkat, jumlah komentar, dan status diskusi.',
|
||||
cardTopRatio: 0.35,
|
||||
arrowDirection: 'none',
|
||||
},
|
||||
{
|
||||
title: 'Buka Diskusi',
|
||||
description: 'Ketuk salah satu diskusi untuk membaca detail dan ikut berkomentar.',
|
||||
cardTopRatio: 0.35,
|
||||
arrowDirection: 'none',
|
||||
},
|
||||
];
|
||||
|
||||
export const GUIDE_ANNOUNCEMENT: GuideStep[] = [
|
||||
{
|
||||
title: 'Daftar Pengumuman',
|
||||
description: 'Halaman ini menampilkan semua pengumuman yang ada di desamu.',
|
||||
cardTopRatio: 0.35,
|
||||
arrowDirection: 'none',
|
||||
},
|
||||
{
|
||||
title: 'Detail Pengumuman',
|
||||
description: 'Ketuk salah satu pengumuman untuk membaca isi lengkapnya.',
|
||||
cardTopRatio: 0.35,
|
||||
arrowDirection: 'none',
|
||||
},
|
||||
];
|
||||
|
||||
export const GUIDE_MEMBER: GuideStep[] = [
|
||||
{
|
||||
title: 'Daftar Anggota',
|
||||
description: 'Halaman ini menampilkan semua anggota desa. Gunakan tab untuk memfilter anggota aktif atau tidak aktif.',
|
||||
cardTopRatio: 0.35,
|
||||
arrowDirection: 'none',
|
||||
},
|
||||
{
|
||||
title: 'Detail Anggota',
|
||||
description: 'Ketuk salah satu anggota untuk melihat informasi lengkapnya seperti NIK, jabatan, lembaga, dan kontak.',
|
||||
cardTopRatio: 0.35,
|
||||
arrowDirection: 'none',
|
||||
},
|
||||
];
|
||||
|
||||
export const GUIDE_POSITION: GuideStep[] = [
|
||||
{
|
||||
title: 'Daftar Jabatan',
|
||||
description: 'Halaman ini menampilkan semua jabatan yang terdaftar. Gunakan tab untuk memfilter jabatan aktif atau tidak aktif.',
|
||||
cardTopRatio: 0.35,
|
||||
arrowDirection: 'none',
|
||||
},
|
||||
{
|
||||
title: 'Menu Aksi',
|
||||
description: 'Ketuk salah satu jabatan untuk membuka menu aksi — kamu bisa mengaktifkan/menonaktifkan atau mengedit nama jabatan.',
|
||||
cardTopRatio: 0.35,
|
||||
arrowDirection: 'none',
|
||||
},
|
||||
];
|
||||
|
||||
export const GUIDE_GROUP: GuideStep[] = [
|
||||
{
|
||||
title: 'Daftar Lembaga Desa',
|
||||
description: 'Halaman ini menampilkan semua lembaga desa yang terdaftar. Gunakan tab untuk memfilter yang aktif atau tidak aktif.',
|
||||
cardTopRatio: 0.35,
|
||||
arrowDirection: 'none',
|
||||
},
|
||||
{
|
||||
title: 'Menu Aksi',
|
||||
description: 'Ketuk salah satu lembaga untuk membuka menu aksi — kamu bisa mengaktifkan/menonaktifkan atau mengedit nama lembaga.',
|
||||
cardTopRatio: 0.35,
|
||||
arrowDirection: 'none',
|
||||
},
|
||||
];
|
||||
|
||||
export const GUIDE_BANNER: GuideStep[] = [
|
||||
{
|
||||
title: 'Daftar Banner',
|
||||
description: 'Halaman ini menampilkan semua banner yang ada di desa kamu.',
|
||||
cardTopRatio: 0.35,
|
||||
arrowDirection: 'none',
|
||||
},
|
||||
{
|
||||
title: 'Buka Menu Aksi',
|
||||
description: 'Ketuk salah satu banner untuk membuka menu aksi — kamu bisa melihat, mengedit, atau menghapus banner.',
|
||||
cardTopRatio: 0.35,
|
||||
arrowDirection: 'none',
|
||||
},
|
||||
{
|
||||
title: 'Tambah Banner',
|
||||
description: 'Ketuk tombol tambah di pojok kanan atas untuk menambahkan banner baru.',
|
||||
cardTopRatio: 0.15,
|
||||
arrowDirection: 'up',
|
||||
arrowOffset: 1.05,
|
||||
},
|
||||
];
|
||||
|
||||
export const GUIDE_PROJECT_DETAIL: GuideStep[] = [
|
||||
{
|
||||
title: 'Detail Kegiatan',
|
||||
description: 'Halaman ini menampilkan informasi lengkap sebuah kegiatan, mulai dari progress, tugas, file, hingga anggota.',
|
||||
cardTopRatio: 0.35,
|
||||
arrowDirection: 'none',
|
||||
},
|
||||
{
|
||||
title: 'Progress Kegiatan',
|
||||
description: 'Bar ini menunjukkan seberapa banyak tugas yang sudah diselesaikan dari total tugas yang ada.',
|
||||
cardTopRatio: 0.28,
|
||||
arrowDirection: 'up',
|
||||
arrowOffset: 0.5,
|
||||
},
|
||||
{
|
||||
title: 'Daftar Tugas',
|
||||
description: 'Semua tugas dalam kegiatan ini ditampilkan di sini. Ketuk tugas untuk melihat detail atau mengubah statusnya.',
|
||||
cardTopRatio: 0.35,
|
||||
arrowDirection: 'none',
|
||||
},
|
||||
{
|
||||
title: 'File & Tautan',
|
||||
description: 'File dan tautan pendukung kegiatan tersedia di bagian bawah. Scroll ke bawah untuk mengaksesnya.',
|
||||
cardTopRatio: 0.35,
|
||||
arrowDirection: 'none',
|
||||
},
|
||||
];
|
||||
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