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:
@@ -1,3 +1,4 @@
|
||||
import GuideOverlay from "@/components/GuideOverlay";
|
||||
import ModalConfirmation from "@/components/ModalConfirmation";
|
||||
import BorderBottomItem from "@/components/borderBottomItem";
|
||||
import { ButtonForm } from "@/components/buttonForm";
|
||||
@@ -12,6 +13,8 @@ import WrapTab from "@/components/wrapTab";
|
||||
import Styles from "@/constants/Styles";
|
||||
import { apiDeleteGroup, apiEditGroup, apiGetGroup } from "@/lib/api";
|
||||
import { setUpdateGroup } from "@/lib/groupSlice";
|
||||
import { GUIDE_GROUP } from "@/lib/guideSteps";
|
||||
import { useGuide } from "@/lib/useGuide";
|
||||
import { useAuthSession } from "@/providers/AuthProvider";
|
||||
import { useTheme } from "@/providers/ThemeProvider";
|
||||
import { AntDesign, Feather, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
|
||||
@@ -41,6 +44,7 @@ export default function Index() {
|
||||
const [titleChoose, setTitleChoose] = useState('')
|
||||
const queryClient = useQueryClient()
|
||||
const [refreshing, setRefreshing] = useState(false)
|
||||
const { visible: guideVisible, dismiss: dismissGuide } = useGuide('group')
|
||||
|
||||
const dispatch = useDispatch()
|
||||
const update = useSelector((state: any) => state.groupUpdate)
|
||||
@@ -136,6 +140,7 @@ export default function Index() {
|
||||
|
||||
return (
|
||||
<View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
|
||||
<GuideOverlay visible={guideVisible} steps={GUIDE_GROUP} onDismiss={dismissGuide} />
|
||||
<View style={[Styles.mb10]}>
|
||||
<WrapTab>
|
||||
<ButtonTab
|
||||
|
||||
Reference in New Issue
Block a user