Bahla-Team/Bahla-Frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat : BottomBar + Base component + Clean Nativewind

Browse Source
This commit is contained in:
Yaël Perret
2026-09-08 19:50:28 +02:00
parent 51a522eafc
commit 8ed48a6cd3
16 changed files with 564 additions and 722 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/(tabs)/my-events.tsx
View File

@@ -1,15 +1,22 @@
import { StyleSheet, Text, View } from 'react-native';
import { Header } from '@/components/ui/Header';
import { Screen } from '@/components/ui/Screen';
import { colors } from '@/theme/colors';
import { spacing } from '@/theme/spacing';
import { typography } from '@/theme/typography';
export default function MyEventsTabScreen() {
return (
<View style={styles.container}>
<Text style={styles.title}>My Events</Text>
<Text style={styles.description}>Base ecran mes events</Text>
</View>
<Screen>
<Header variant="large" overline="12 événements" title="Mes events" />
<View style={styles.container}>
<Text style={styles.title}>My Events</Text>
<Text style={styles.description}>Base ecran mes events</Text>
</View>
</Screen>
);
}

2
src/app/index-old.tsx
View File

@@ -10,8 +10,6 @@ import { colors } from '@/theme/colors';
import { spacing } from '@/theme/spacing';
import { typography } from '@/theme/typography';
import '../global.css';
export default function Index() {
const [selectedThemes, setSelectedThemes] = useState<string[]>(['Soirée', 'Techno', 'Festival']);

278
src/components/navigation/BahlaTabBar copy.tsx Normal file
View File

@@ -0,0 +1,278 @@
/* ------------------------------------------------------------------ *
* BahlaTabBar — barre d'onglets floutée, partagée par (tabs) et (org).
*
* Une seule implémentation pour les deux parcours : le verre dépoli,
* le calcul de safe area, le rendu des items et l'accessibilité sont
* identiques. Seul le bouton central change, et il est optionnel.
*
* Usage :
* <Tabs tabBar={(p) => <BahlaTabBar {...p} />}> // utilisateur
* <Tabs tabBar={(p) => <BahlaTabBar {...p} fabRouteName="create" // organisateur
* onFabPress={openCreateSheet} />}>
*
* Dépendances : expo-blur · expo-linear-gradient ·
* react-native-safe-area-context · react-native-svg
* ------------------------------------------------------------------ */
import { BlurView } from 'expo-blur';
import { LinearGradient } from 'expo-linear-gradient';
import { Tabs } from 'expo-router';
import { useCallback, type ComponentProps } from 'react';
import {
Platform,
Pressable,
StyleSheet,
Text,
View,
type ViewStyle,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { colors, gradientDirection, gradients } from '@/theme/colors';
import { fontFamily, typography } from '@/theme/typography';
import { Plus } from 'lucide-react-native';
/** Hauteur de la barre hors safe area. La hauteur réelle y ajoute l'inset bas. */
export const TAB_BAR_BASE_HEIGHT = 52;
const FAB_SIZE = 62;
/**
* expo-blur ne rend rien d'exploitable sous Android 9 : sans ce repli on
* obtient un rectangle transparent et des libellés illisibles.
*/
const SUPPORTS_BLUR = Platform.OS === 'ios' || Number(Platform.Version) >= 28;
type ExpoRouterTabBarProps = Parameters<
NonNullable<ComponentProps<typeof Tabs>['tabBar']>
>[0];
type Props = ExpoRouterTabBarProps & {
/**
* Nom de la route factice qui occupe l'emplacement central.
* Absent côté utilisateur — il n'y a pas de bouton flottant.
*/
fabRouteName?: string;
/** Appelé à la place d'une navigation quand on presse le bouton central. */
onFabPress?: () => void;
/** Libellé lu par les lecteurs d'écran sur le bouton central. */
fabAccessibilityLabel?: string;
};
export function BahlaTabBar({
state,
descriptors,
navigation,
fabRouteName,
onFabPress,
fabAccessibilityLabel = 'Créer',
}: Props) {
const insets = useSafeAreaInsets();
const handlePress = useCallback(
(routeKey: string, routeName: string, isFocused: boolean) => {
const event = navigation.emit({
type: 'tabPress',
target: routeKey,
canPreventDefault: true,
});
if (isFocused || event.defaultPrevented) return;
navigation.navigate(routeName as never);
},
[navigation],
);
const handleLongPress = useCallback(
(routeKey: string) => {
navigation.emit({ type: 'tabLongPress', target: routeKey });
},
[navigation],
);
return (
<BlurView
tint="dark"
intensity={SUPPORTS_BLUR ? 20 : 0}
blurMethod='dimezisBlurViewSdk31Plus'
style={[
styles.bar,
{
height: TAB_BAR_BASE_HEIGHT + insets.bottom,
paddingBottom: insets.bottom,
// Sans flou, le fond translucide ne suffit pas : on opacifie.
backgroundColor: SUPPORTS_BLUR
? colors.deepBackground
: 'rgba(10,10,18,0.96)',
},
]}
>
{state.routes.map((route: (typeof state.routes)[number], index: number) => {
const { options } = descriptors[route.key];
const isFocused = state.index === index;
const tint = isFocused ? colors.primary : colors.textSecondary;
/* --- Emplacement central : bouton flottant, pas un onglet ---- */
if (fabRouteName && route.name === fabRouteName) {
return (
<View key={route.key} style={styles.fabSlot}>
<Pressable
accessibilityRole="button"
accessibilityLabel={fabAccessibilityLabel}
onPress={onFabPress}
style={({ pressed }) => [
styles.fab,
pressed && styles.fabPressed,
]}
>
<LinearGradient
colors={gradients.signature}
start={gradientDirection.start}
end={gradientDirection.end}
style={styles.fabGradient}
>
<Plus size={28} color={colors.onPrimary} />
</LinearGradient>
</Pressable>
</View>
);
}
/* --- Onglet ordinaire ---------------------------------------- */
const label =
typeof options.tabBarLabel === 'string'
? options.tabBarLabel
: (options.title ?? route.name);
return (
<Pressable
key={route.key}
accessibilityRole="button"
accessibilityState={isFocused ? { selected: true } : {}}
accessibilityLabel={options.tabBarAccessibilityLabel ?? label}
onPress={() => handlePress(route.key, route.name, isFocused)}
onLongPress={() => handleLongPress(route.key)}
style={styles.item}
>
<View>
{options.tabBarIcon?.({
focused: isFocused,
color: tint,
size: 23,
})}
{options.tabBarBadge != null && (
<View style={styles.badge}>
<Text style={styles.badgeText} numberOfLines={1}>
{options.tabBarBadge}
</Text>
</View>
)}
</View>
<Text
numberOfLines={1}
style={[
styles.label,
{
color: tint,
fontFamily: isFocused
? fontFamily.bodySemi
: fontFamily.bodyMedium,
},
]}
>
{label}
</Text>
</Pressable>
);
})}
</BlurView>
);
}
const styles = StyleSheet.create({
bar: {
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
flexDirection: 'row',
alignItems: 'flex-start',
paddingTop: 8,
borderTopWidth: StyleSheet.hairlineWidth * 2,
borderTopColor: colors.border,
overflow: 'visible',
} as ViewStyle,
item: {
flex: 1,
alignItems: 'center',
gap: 5,
// La zone tactile couvre toute la hauteur de la barre.
alignSelf: 'stretch',
paddingTop: 2,
},
label: {
...typography.tabLabel,
fontFamily: undefined, // remplacé plus haut selon l'état
},
badge: {
position: 'absolute',
top: -4,
right: -8,
minWidth: 16,
height: 16,
paddingHorizontal: 4,
borderRadius: 999,
backgroundColor: colors.primary,
alignItems: 'center',
justifyContent: 'center',
},
badgeText: {
...typography.overlineSm,
fontSize: 9,
lineHeight: 16,
letterSpacing: 0,
color: colors.onPrimary,
},
/* Le créneau central est plus étroit que les onglets : 84 px fixes,
comme la colonne du même nom dans la maquette. */
fabSlot: {
width: 84,
alignItems: 'center',
},
fab: {
width: FAB_SIZE,
height: FAB_SIZE,
aspectRatio: 1,
borderRadius: 15,
// Remonte au-dessus de la barre et découpe un anneau dans le fond.
marginTop: -30,
overflow: 'hidden',
alignSelf: 'center',
borderWidth: 3,
borderColor: colors.deepBackground,
shadowColor: colors.primary,
shadowOffset: { width: 0, height: 14 },
shadowOpacity: 0.85,
shadowRadius: 17,
elevation: 12,
},
fabPressed: {
transform: [{ scale: 0.94 }],
shadowOpacity: 0.5,
},
fabGradient: {
width: '100%',
height: '100%',
aspectRatio: 1,
borderRadius: 15,
alignItems: 'center',
justifyContent: 'center',
},
});
export default BahlaTabBar;

87
src/components/navigation/BahlaTabBar.tsx
View File

@@ -13,17 +13,15 @@
* Dépendances : expo-blur · expo-linear-gradient ·
* react-native-safe-area-context · react-native-svg
* ------------------------------------------------------------------ */
import { BlurView } from 'expo-blur';
import { LinearGradient } from 'expo-linear-gradient';
import { Tabs } from 'expo-router';
import { useCallback, type ComponentProps } from 'react';
import {
Platform,
Pressable,
StyleSheet,
Text,
View,
type ViewStyle,
type ViewStyle
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -33,13 +31,9 @@ import { Plus } from 'lucide-react-native';
/** Hauteur de la barre hors safe area. La hauteur réelle y ajoute l'inset bas. */
export const TAB_BAR_BASE_HEIGHT = 52;
const FAB_SIZE = 62;
/**
* expo-blur ne rend rien d'exploitable sous Android 9 : sans ce repli on
* obtient un rectangle transparent et des libellés illisibles.
*/
const SUPPORTS_BLUR = Platform.OS === 'ios' || Number(Platform.Version) >= 28;
const FAB_SIZE = 72;
const FAB_RADIUS = 24;
const FAB_LIFT = 40;
type ExpoRouterTabBarProps = Parameters<
NonNullable<ComponentProps<typeof Tabs>['tabBar']>
@@ -88,18 +82,13 @@ export function BahlaTabBar({
);
return (
<BlurView
tint="dark"
intensity={SUPPORTS_BLUR ? 20 : 0}
<View
style={[
styles.bar,
{
height: TAB_BAR_BASE_HEIGHT + insets.bottom,
paddingBottom: insets.bottom,
// Sans flou, le fond translucide ne suffit pas : on opacifie.
backgroundColor: SUPPORTS_BLUR
? colors.deepBackground
: 'rgba(10,10,18,0.96)',
backgroundColor: colors.deepBackground,
},
]}
>
@@ -112,24 +101,28 @@ export function BahlaTabBar({
if (fabRouteName && route.name === fabRouteName) {
return (
<View key={route.key} style={styles.fabSlot}>
<View style={styles.fabShell}>
<Pressable
accessibilityRole="button"
accessibilityLabel={fabAccessibilityLabel}
onPress={onFabPress}
style={({ pressed }) => [
styles.fab,
pressed && styles.fabPressed,
]}
style={styles.fabPressable}
>
<LinearGradient
colors={gradients.signature}
start={gradientDirection.start}
end={gradientDirection.end}
style={styles.fabGradient}
>
<Plus size={28} color={colors.onPrimary} />
</LinearGradient>
{({ pressed }) => (
<LinearGradient
colors={gradients.signature}
start={gradientDirection.start}
end={gradientDirection.end}
style={[
styles.fabGradient,
pressed && styles.fabGradientPressed,
]}
>
<Plus size={28} color={colors.onPrimary} />
</LinearGradient>
)}
</Pressable>
</View>
</View>
);
}
@@ -181,7 +174,7 @@ export function BahlaTabBar({
</Pressable>
);
})}
</BlurView>
</View>
);
}
@@ -237,41 +230,51 @@ const styles = StyleSheet.create({
/* Le créneau central est plus étroit que les onglets : 84 px fixes,
comme la colonne du même nom dans la maquette. */
fabSlot: {
width: 84,
width: 96,
alignItems: 'center',
overflow: 'visible',
zIndex: 20,
},
fab: {
fabShell: {
width: FAB_SIZE,
height: FAB_SIZE,
aspectRatio: 1,
borderRadius: 15,
borderRadius: FAB_RADIUS,
// Remonte au-dessus de la barre et découpe un anneau dans le fond.
marginTop: -30,
marginTop: -FAB_LIFT,
overflow: 'hidden',
alignSelf: 'center',
zIndex: 20,
borderWidth: 3,
borderColor: colors.deepBackground,
shadowColor: colors.primary,
shadowOffset: { width: 0, height: 14 },
shadowOpacity: 0.85,
shadowRadius: 17,
elevation: 12,
shadowOffset: { width: 0, height: 16 },
shadowOpacity: 0.9,
shadowRadius: 20,
elevation: 18,
},
fabPressed: {
transform: [{ scale: 0.94 }],
shadowOpacity: 0.5,
fabPressable: {
width: '100%',
height: '100%',
borderRadius: FAB_RADIUS,
overflow: 'hidden',
},
fabGradient: {
width: '100%',
height: '100%',
aspectRatio: 1,
borderRadius: 15,
borderRadius: FAB_RADIUS,
alignItems: 'center',
justifyContent: 'center',
},
fabGradientPressed: {
transform: [{ scale: 0.96 }],
opacity: 0.92,
},
});
export default BahlaTabBar;

92
src/components/organizer/CreateActionSheet.tsx
View File

@@ -4,18 +4,18 @@
* ------------------------------------------------------------------ */
import { LinearGradient } from 'expo-linear-gradient';
import {
Modal,
Pressable,
StyleSheet,
Text,
View,
type ViewStyle,
Modal,
Pressable,
StyleSheet,
Text,
View,
type ViewStyle,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { colors, gradientDirection, gradients } from '@/theme/colors';
import { typography } from '@/theme/typography';
import { Plus } from 'lucide-react-native';
import { MessageSquare, Plus } from 'lucide-react-native';
type Props = {
visible: boolean;
@@ -32,6 +32,7 @@ export function CreateActionSheet({
}: Props) {
const insets = useSafeAreaInsets();
/* TODO - rendre dynamique en fonction du club connecté */
return (
<Modal
visible={visible}
@@ -40,40 +41,60 @@ export function CreateActionSheet({
onRequestClose={onClose}
>
<Pressable style={styles.scrim} onPress={onClose} accessibilityLabel="Fermer" />
<View style={[styles.sheet, { paddingBottom: insets.bottom + 24 }]}>
<View style={styles.handle} />
<Text
numberOfLines={1}
style={[
styles.modalTitle,
]}
>
Créer - Club Vertige
</Text>
<Pressable
accessibilityRole="button"
onPress={onCreateEvent}
style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
style={styles.rowPressable}
>
<LinearGradient
colors={gradients.signature}
start={gradientDirection.start}
end={gradientDirection.end}
style={styles.iconBox}
>
<Plus size={22} color={colors.onPrimary} />
</LinearGradient>
<View style={styles.rowText}>
<Text style={styles.rowTitle}>Créer un événement</Text>
<Text style={styles.rowSub}>Date, lieu, line-up, billetterie</Text>
</View>
{({ pressed }) => (
<View style={[styles.row, pressed && styles.rowPressed, { borderColor: colors.primary, borderWidth: 0.5 }]}>
<LinearGradient
colors={gradients.signature}
start={gradientDirection.start}
end={gradientDirection.end}
style={styles.iconBox}
>
<Plus size={22} color={colors.onPrimary} />
</LinearGradient>
<View style={styles.rowText}>
<Text style={styles.rowTitle}>Créer un événement</Text>
<Text style={styles.rowSub}>Date, lieu, line-up, billetterie</Text>
</View>
</View>
)}
</Pressable>
<Pressable
accessibilityRole="button"
onPress={onCreatePost}
style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
style={styles.rowPressable}
>
<View style={[styles.iconBox, styles.iconBoxPlain]}>
<Plus size={22} color={colors.tertiary} />
</View>
<View style={styles.rowText}>
<Text style={styles.rowTitle}>Publier un post</Text>
<Text style={styles.rowSub}>Sur un de tes événements à venir</Text>
</View>
{({ pressed }) => (
<View style={[styles.row, pressed && styles.rowPressed]}>
<View style={[styles.iconBox, styles.iconBoxPlain]}>
<MessageSquare size={22} color={colors.tertiary} />
</View>
<View style={styles.rowText}>
<Text style={styles.rowTitle}>Publier un post</Text>
<Text style={styles.rowSub}>Sur un de tes événements à venir</Text>
</View>
</View>
)}
</Pressable>
</View>
</Modal>
@@ -117,7 +138,13 @@ const styles = StyleSheet.create({
borderColor: colors.border,
},
rowPressed: { opacity: 0.7 },
rowPressable: {
borderRadius: 18,
},
rowPressed: {
opacity: 0.7,
},
iconBox: {
width: 48,
@@ -133,6 +160,13 @@ const styles = StyleSheet.create({
borderColor: colors.border,
},
modalTitle: {
...typography.sectionLabel,
color: colors.textPrimary,
fontSize: 14,
marginBottom: 10,
},
rowText: { flex: 1, gap: 2 },
rowTitle: {

91
src/components/ui/Header.tsx Normal file
View File

@@ -0,0 +1,91 @@
/* ------------------------------------------------------------------ *
* Header — trois variantes : large, compact, overlay.
* ------------------------------------------------------------------ */
import { useRouter } from 'expo-router';
import { ChevronLeft } from 'lucide-react-native';
import { ReactNode } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { colors } from '@/theme/colors';
import { typography } from '@/theme/typography';
type Props = {
title?: string;
/** Overline mono au-dessus du titre (variante large uniquement). */
overline?: string;
variant?: 'large' | 'compact' | 'overlay';
/** Flèche retour. Auto : true sauf en `large`. */
back?: boolean;
onBack?: () => void;
/** Actions à droite — icônes 44×44 déjà encapsulées par l'appelant. */
right?: ReactNode;
};
export function Header({ title, overline, variant = 'large', back, onBack, right }: Props) {
const router = useRouter();
const insets = useSafeAreaInsets();
const showBack = back ?? variant !== 'large';
const glass = variant === 'overlay';
return (
<View
style={[
styles.row,
variant === 'overlay' && [styles.absolute, { paddingTop: insets.top + 8 }],
variant === 'compact' && styles.compactRow,
]}
>
{showBack && (
<Pressable
hitSlop={8}
accessibilityRole="button"
accessibilityLabel="Retour"
onPress={onBack ?? (() => router.back())}
style={[styles.iconButton, glass && styles.iconButtonGlass]}
>
<ChevronLeft size={22} color={colors.textPrimary} strokeWidth={1.8} />
</Pressable>
)}
<View style={[styles.titleWrap, variant === 'compact' && styles.titleWrapCentered]}>
{overline && variant === 'large' && <Text style={styles.overline}>{overline}</Text>}
{title && (
<Text
numberOfLines={1}
style={variant === 'large' ? styles.titleLarge : styles.titleCompact}
>
{title}
</Text>
)}
</View>
{right ?? (showBack && variant === 'compact' ? <View style={styles.spacer} /> : null)}
</View>
);
}
const styles = StyleSheet.create({
row: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingTop: 6, paddingBottom: 14 },
compactRow: { paddingBottom: 10 },
absolute: { position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10, paddingHorizontal: 20 },
titleWrap: { flex: 1, minWidth: 0, gap: 2 },
titleWrapCentered: { alignItems: 'center' },
overline: { ...typography.overlineSm, color: colors.textSecondary },
titleLarge: { ...typography.screenTitleLg, color: colors.textPrimary },
titleCompact: { ...typography.cardTitle, color: colors.textPrimary },
iconButton: {
width: 44,
height: 44,
borderRadius: 14,
backgroundColor: colors.surface,
borderWidth: 1,
borderColor: colors.border,
alignItems: 'center',
justifyContent: 'center',
},
iconButtonGlass: { backgroundColor: colors.glassFill, borderColor: 'transparent' },
spacer: { width: 44 },
});

75
src/components/ui/Screen.tsx Normal file
View File

@@ -0,0 +1,75 @@
/* ------------------------------------------------------------------ *
* Screen — enveloppe d'écran. Fond, zone sûre, padding de tab bar.
* ------------------------------------------------------------------ */
import { ReactNode } from 'react';
import { ScrollView, StyleSheet, View, ViewStyle } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { colors } from '@/theme/colors';
/** Hauteur de la tab bar custom, hors safe-area. Source unique. */
import { TAB_BAR_BASE_HEIGHT } from '@/components/navigation/BahlaTabBar';
export const TAB_BAR_HEIGHT = TAB_BAR_BASE_HEIGHT;
type Props = {
children: ReactNode;
/** `scroll` enveloppe dans un ScrollView, `static` en View simple. */
layout?: 'scroll' | 'static';
/** Applique le padding haut de la zone sûre. false pour un écran à image plein bord. */
edgeToEdge?: boolean;
/** Réserve la hauteur de la tab bar en bas. false sur les écrans modaux / (org)/create. */
tabBar?: boolean;
/** Halo violet décoratif en haut à gauche (B1, C1). */
halo?: boolean;
/** Padding horizontal des enfants. 20 par défaut, 0 pour du plein bord. */
gutter?: number;
contentContainerStyle?: ViewStyle;
};
export function Screen({
children,
layout = 'scroll',
edgeToEdge = false,
tabBar = true,
halo = false,
gutter = 20,
contentContainerStyle,
}: Props) {
const insets = useSafeAreaInsets();
const padding: ViewStyle = {
paddingTop: edgeToEdge ? 0 : insets.top,
paddingHorizontal: gutter,
paddingBottom: tabBar ? TAB_BAR_HEIGHT + insets.bottom + 24 : insets.bottom + 24,
};
return (
<View style={styles.root}>
{halo && <View pointerEvents="none" style={styles.halo} />}
{layout === 'scroll' ? (
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={[padding, contentContainerStyle]}
>
{children}
</ScrollView>
) : (
<View style={[styles.flex, padding, contentContainerStyle]}>{children}</View>
)}
</View>
);
}
const styles = StyleSheet.create({
root: { flex: 1, backgroundColor: colors.deepBackground },
flex: { flex: 1 },
halo: {
position: 'absolute',
width: 380,
height: 380,
borderRadius: 190,
top: -140,
left: -60,
backgroundColor: colors.secondarySoft,
},
});

3
src/global.css
View File

@@ -1,3 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

2
src/stores/authStore.ts
View File

@@ -13,7 +13,7 @@ const DEV_MOCK_SESSION_ENABLED = true;
const DEV_MOCK_SESSION: Session = {
userId: 'dev-user',
token: 'dev-token',
role: 'org',
role: 'user',
};
type AuthState = {