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',
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user