Files
mobile-darmasaba/lib/guideSteps.ts
amaliadwiy 7341f378dd 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
2026-05-11 16:34:46 +08:00

218 lines
6.9 KiB
TypeScript

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',
},
];