create-du-app 0.1.3 → 0.1.5

package/templates/mobile/expo/src/core/components/offline/offline-banner.tsx

@@ -0,0 +1,186 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, {
+    runOnJS,
+    useAnimatedStyle,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTranslation } from 'react-i18next';
+import { useActiveRouteName, useNetworkStatus } from '@src/core/hook';
+import { Font, fontSize, Spacing, verticalScale } from '@src/core/utils';
+import { Screen } from '@src/app/navigation/app-route-type';
+import { ThemeColors, useThemedStyles } from '@src/core/theme';
+import { Label } from '@src/core';
+
+/** How long the green "back online" confirmation stays before sliding away. */
+const BACK_ONLINE_DISMISS_MS = 2000;
+const SLIDE_DURATION_MS = 250;
+const BANNER_HEIGHT = verticalScale(34);
+
+type BannerMode = 'offline' | 'backOnline';
+
+/**
+ * A thin status banner that slides down from under the status bar when the
+ * device loses internet, and — once reconnected — briefly flips to a green
+ * "back online" confirmation before sliding away. It never blocks touches: the
+ * app keeps showing cached content underneath (offline-first), so this is a
+ * passive status hint, not a gate.
+ *
+ * Mount once at the app shell, above the navigator, so a single banner covers
+ * every tab/screen. Replaces the old full-screen OfflineGate overlay.
+ */
+export const OfflineBanner = () => {
+    const { t } = useTranslation();
+    const { top } = useSafeAreaInsets();
+    const styles = useThemedStyles(makeStyles);
+    const { isOffline } = useNetworkStatus();
+    const activeRoute = useActiveRouteName();
+
+    // Some routes are offline-by-design and the banner is noise there:
+    //  • Library tab — lists saved/downloaded audio that plays without a network.
+    //  • Full-screen player — once a track is loaded it plays from cache/buffer,
+    //    and the banner would overlap the immersive player chrome.
+    // Treat the device as connected while either is focused so the banner never
+    // appears (and the green "back online" confirmation is skipped too).
+    const bannerSuppressedRoutes: (string | undefined)[] = [
+        Screen.LibraryMain,
+        Screen.PlayerFull,
+    ];
+    const effectiveOffline =
+        isOffline && !bannerSuppressedRoutes.includes(activeRoute);
+
+    // What the banner currently shows, and whether it's on screen at all.
+    const [mode, setMode] = useState<BannerMode>('offline');
+    const [visible, setVisible] = useState(false);
+
+    // Tracks whether we were offline, so a transition offline→online can show
+    // the "back online" confirmation (but not on a fresh launch that was
+    // already online).
+    const wasOffline = useRef(false);
+    const dismissTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+    const translateY = useSharedValue(-(BANNER_HEIGHT + top));
+    const slideOut = () =>
+        (translateY.value = withTiming(
+            -(BANNER_HEIGHT + top),
+            { duration: SLIDE_DURATION_MS },
+            finished => finished && runOnJS(setVisible)(false),
+        ));
+
+    useEffect(() => {
+        if (dismissTimer.current) clearTimeout(dismissTimer.current);
+
+        if (effectiveOffline) {
+            wasOffline.current = true;
+            setMode('offline');
+            setVisible(true);
+            translateY.value = withTiming(0, { duration: SLIDE_DURATION_MS });
+            return;
+        }
+
+        // We're not showing the offline state. Only celebrate "back online" when
+        // the internet genuinely returned (we were offline AND are now truly
+        // online). If instead the banner was suppressed because the user moved
+        // to the Library while still offline, slide it away silently — no green
+        // confirmation, and keep `wasOffline` so leaving the Library re-shows it.
+        if (wasOffline.current && !isOffline) {
+            wasOffline.current = false;
+            setMode('backOnline');
+            setVisible(true);
+            translateY.value = withTiming(0, { duration: SLIDE_DURATION_MS });
+            dismissTimer.current = setTimeout(slideOut, BACK_ONLINE_DISMISS_MS);
+        } else if (wasOffline.current) {
+            // Still offline, just hidden on the Library tab — retract quietly.
+            slideOut();
+        }
+
+        return () => {
+            if (dismissTimer.current) clearTimeout(dismissTimer.current);
+        };
+        // translateY/slideOut are stable refs; network state + active tab drive this.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [effectiveOffline, isOffline, top]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: translateY.value }],
+    }));
+
+    if (!visible) return null;
+
+    const isBackOnline = mode === 'backOnline';
+    return (
+        <Animated.View
+            pointerEvents="none"
+            style={[
+                styles.container,
+                {
+                    paddingTop: top,
+                    // Paint the status-bar inset the same colour as the bar so
+                    // the banner reads as one solid strip under the notch.
+                    backgroundColor: isBackOnline
+                        ? styles.barOnline.backgroundColor
+                        : styles.barOffline.backgroundColor,
+                },
+                animatedStyle,
+            ]}
+        >
+            <View
+                style={[
+                    styles.bar,
+                    isBackOnline ? styles.barOnline : styles.barOffline,
+                ]}
+            >
+                <View
+                    style={[
+                        styles.dot,
+                        isBackOnline ? styles.dotOnline : styles.dotOffline,
+                    ]}
+                />
+                <Label
+                    style={styles.text}
+                    value={t(
+                        isBackOnline
+                            ? 'offline.banner.backOnline'
+                            : 'offline.banner.offline',
+                    )}
+                />
+            </View>
+        </Animated.View>
+    );
+};
+
+const makeStyles = (c: ThemeColors) =>
+    StyleSheet.create({
+        container: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            zIndex: 9999,
+        },
+        bar: {
+            height: BANNER_HEIGHT,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: Spacing.spacing_sm, // 8
+        },
+        barOffline: { backgroundColor: c.bg_danger_faded },
+        barOnline: { backgroundColor: c.bd_success_normal },
+        dot: {
+            width: verticalScale(7),
+            height: verticalScale(7),
+            borderRadius: verticalScale(7),
+        },
+        dotOffline: { backgroundColor: c.fg_danger_on_background },
+        dotOnline: { backgroundColor: c.fg_success_on_background },
+        text: {
+            fontSize: fontSize(13),
+            fontFamily: Font.rethinkSansMedium,
+            color: c.fg_neutral_normal,
+        },
+    });
+
+export default OfflineBanner;

package/templates/mobile/expo/src/core/components/screen/index.ts

@@ -0,0 +1 @@
+export * from './screen-container';

package/templates/mobile/expo/src/core/components/screen/screen-container/index.ts

@@ -0,0 +1 @@
+export { default as ScreenContainer } from './screen-container';

package/templates/mobile/expo/src/core/components/screen/screen-container/screen-container.tsx

@@ -0,0 +1,248 @@
+// ScreenContainer.tsx — Design-System scaffold (Life-Master-Design).
+//
+// Rewritten from the legacy imoni light-theme container. The public prop API is
+// kept backwards-compatible (legacy screens keep compiling) while the rendering
+// now uses the themed DS background + the DS `Header`. New screens should use
+// the DS props: `headerVariant`, `onBackPress`, `backLabel`, `headerLeft`,
+// `headerRightNode`, `scroll`.
+import { Font, fontSize, horizontalScale, isIOS, Spacing } from '@src/core/utils';
+import { ThemeColors, useTheme, useThemedStyles } from '@src/core/theme';
+import React, { PropsWithChildren, ReactNode } from 'react';
+import {
+    Image,
+    ImageSourcePropType,
+    KeyboardAvoidingView,
+    NativeScrollEvent,
+    NativeSyntheticEvent,
+    StatusBar,
+    StyleProp,
+    StyleSheet,
+    View,
+    ViewStyle,
+} from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+import { Edge, SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ImgScreenBgGradian } from '@src/assets/Images';
+import Header from '../../ui/header/header';
+import { HeaderVariant } from '../../ui/header/header.type';
+
+interface Props {
+    style?: StyleProp<ViewStyle>;
+    /** Apply the top safe-area inset (status bar / notch). @default true */
+    safeTop?: boolean;
+    /** Apply the bottom safe-area inset (home indicator). @default true */
+    safeBottom?: boolean;
+    /** @deprecated legacy background switch — ignored by the DS scaffold. */
+    bgType?: 'default' | 'full';
+    renderBottom?: () => React.ReactNode;
+    /**
+     * Full-screen background image. Defaults to the dark gradient in dark mode
+     * and to no image (flat themed background) in light mode.
+     */
+    background?: ImageSourcePropType;
+    /** Keyboard-aware scroll for forms. @default true */
+    isForm?: boolean;
+    /**
+     * Extra breathing space (px) kept above the keyboard while `isForm` — passed
+     * to KeyboardAvoidingView as `keyboardVerticalOffset`.
+     * @default Spacing.spacing_2xl (32)
+     */
+    bottomOffset?: number;
+    /**
+     * @deprecated No longer used — kept for API compatibility. Keyboard handling
+     * now uses React Native's KeyboardAvoidingView (Expo Go compatible).
+     */
+    keyboardAware?: boolean;
+    showHeader?: boolean;
+    /** @deprecated Use typeButtonBack instead */
+    buttonBackType?: 'default' | 'white' | 'blur';
+    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    onContentSizeChange?: (contentWidth: number, contentHeight: number) => void;
+
+    // --- DS props (additive) ---
+    /** DS Header layout. @default 'default' (or 'back' when only a back action is set) */
+    headerVariant?: HeaderVariant;
+    /** Header title (rendered by the `welcome` / `default` variants). */
+    title?: string;
+    /** Header subtitle under the title. */
+    subtitle?: string;
+    /** Back handler for the `back`/`step` header. */
+    onBackPress?: () => void;
+    /** Label for the `back` header variant. */
+    backLabel?: string;
+    /** Left slot node for the DS Header. */
+    headerLeft?: ReactNode;
+    /** Right slot node for the DS Header (e.g. avatar, skip). */
+    headerRightNode?: ReactNode;
+}
+
+const ScreenContainer = (props: PropsWithChildren<Props>) => {
+    const { colors, resolved } = useTheme();
+    const styles = useThemedStyles(makeStyles);
+    const {
+        children,
+        style = {},
+        safeTop = true,
+        safeBottom = true,
+        renderBottom = () => null,
+        // Dark mode keeps the gradient artwork; light mode falls back to the flat
+        // themed background until a light gradient asset is provided.
+        background = resolved === 'dark' ? ImgScreenBgGradian : undefined,
+        isForm = true,
+        bottomOffset = Spacing.spacing_2xl, // 32
+        showHeader = true,
+        onScroll,
+        onContentSizeChange,
+        headerVariant = 'default',
+        title,
+        subtitle,
+        onBackPress,
+        backLabel,
+        headerLeft,
+        headerRightNode,
+    } = props;
+
+    // SafeAreaView handles the TOP inset (status bar / notch) only. The bottom
+    // edge is applied manually below: on Android `insets.bottom` is ~0 on
+    // 3-button-nav devices, so SafeAreaView's `bottom` edge leaves no padding.
+    // We pad with `bottomInset` (floored on Android) instead — gated on
+    // `safeBottom` so screens that opt out keep zero bottom padding.
+    const resolvedEdges: Edge[] = [...(safeTop ? (['top'] as const) : [])];
+
+    const rawInsets = useSafeAreaInsets();
+    // Applied as paddingBottom on the inner wrapper below — i.e. exactly where
+    // SafeAreaView's `bottom` edge used to pad, so iOS layout is unchanged. iOS
+    // keeps the real home-indicator inset; Android floors to 16 so the padding
+    // never collapses on devices that report ~0 (3-button nav).
+    const bottomInset = safeBottom
+        ? isIOS
+            ? rawInsets.bottom
+            : Math.max(rawInsets.bottom, 16)
+        : 0;
+
+
+    const renderHeader = () => {
+        if (!showHeader) {
+            return null;
+        }
+        return (
+            <View style={styles.header}>
+                <Header
+                    variant={headerVariant}
+                    title={title}
+                    subtitle={subtitle}
+                    left={headerLeft}
+                    right={headerRightNode}
+                    onBackPress={onBackPress}
+                    backLabel={backLabel}
+                />
+            </View>
+        );
+    };
+
+    // The `back`/`step` Header variants don't render the title; show it as a
+    // centered block at the top of the body (matches the Figma auth screens).
+    const body = (
+        <>
+            {children}
+        </>
+    );
+
+    return (
+        <View style={styles.container}>
+            <StatusBar
+                barStyle={resolved === 'dark' ? 'light-content' : 'dark-content'}
+                backgroundColor={colors.transparent}
+                translucent
+            />
+            {background ? (
+                <Image source={background} style={styles.background} resizeMode="cover" />
+            ) : null}
+            <SafeAreaView style={styles.safe} edges={resolvedEdges}>
+              <View style={[styles.safe, { paddingBottom: bottomInset }]}>
+                {renderHeader()}
+
+                {isForm ? (
+                    // KeyboardAvoidingView (RN core) lifts the form above the
+                    // keyboard — works in Expo Go without a custom dev build.
+                    // `bottomOffset` keeps breathing room above the focused input.
+                    <KeyboardAvoidingView
+                        style={styles.flex}
+                        behavior={isIOS ? 'padding' : undefined}
+                        keyboardVerticalOffset={bottomOffset}
+                    >
+                        <ScrollView
+                            showsVerticalScrollIndicator={false}
+                            onScroll={onScroll}
+                            scrollEventThrottle={16}
+                            onContentSizeChange={onContentSizeChange}
+                            keyboardDismissMode="interactive"
+                            keyboardShouldPersistTaps="handled"
+                            contentContainerStyle={[styles.content, style]}
+                        >
+                            {body}
+                        </ScrollView>
+                    </KeyboardAvoidingView>
+                ) : (
+                    // Non-form screens (e.g. the auth screens) render a plain View.
+                    <View style={[styles.content, styles.flex, style]}>{body}</View>
+                )}
+
+                <View style={styles.bottom}>{renderBottom()}</View>
+              </View>
+            </SafeAreaView>
+        </View>
+    );
+};
+
+export default ScreenContainer;
+
+const makeStyles = (c: ThemeColors) =>
+    StyleSheet.create({
+        container: {
+            flex: 1,
+            backgroundColor: c.bg_elevation_level_1_normal,
+        },
+        background: {
+            ...StyleSheet.absoluteFill,
+            width: '100%',
+            height: '100%',
+        },
+        safe: {
+            flex: 1,
+        },
+        header: {
+            paddingHorizontal: horizontalScale(Spacing.spacing_base), // 16
+            paddingBottom: Spacing.spacing_sm,
+        },
+        content: {
+            paddingHorizontal: horizontalScale(Spacing.spacing_xl), // 24
+            paddingTop: Spacing.spacing_base,
+            flex: 1,
+        },
+        flex: {
+            flex: 1,
+        },
+        bottom: {
+            paddingHorizontal: horizontalScale(Spacing.spacing_xl), // 24
+        },
+        titleBlock: {
+            alignItems: 'center',
+            gap: Spacing.spacing_s_nudge, // 6
+            marginBottom: Spacing.spacing_2xl, // 32
+        },
+        title: {
+            fontFamily: Font.dmSansSemiBold,
+            fontSize: fontSize(28),
+            lineHeight: 36,
+            color: c.fg_neutral_normal,
+            textAlign: 'center',
+        },
+        subtitle: {
+            fontFamily: Font.dmSansRegular,
+            fontSize: fontSize(12),
+            lineHeight: 18,
+            color: c.fg_neutral_faded,
+            textAlign: 'center',
+        },
+    });

package/templates/mobile/expo/src/core/components/splash/index.ts

@@ -0,0 +1 @@
+export * from './splash-overlay';

package/templates/mobile/expo/src/core/components/splash/splash-overlay/index.ts

@@ -0,0 +1 @@
+export { default as SplashOverlay } from './splash-overlay';

package/templates/mobile/expo/src/core/components/splash/splash-overlay/splash-overlay.tsx

@@ -0,0 +1,93 @@
+import { ImgScreenBgGradian } from '@src/assets/Images';
+import { verticalScale } from '@src/core';
+import React, { useEffect } from 'react';
+import { Image, Platform, StyleSheet } from 'react-native';
+import Animated, {
+    useAnimatedStyle,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated';
+
+const LOGO = require('@src/assets/splash/logo-white.png');
+
+const FADE_OUT_MS = 350;
+
+interface SplashOverlayProps {
+    /**
+     * Flip to `true` once the app is ready (launch route resolved + native
+     * splash hidden). The overlay then fades out and unmounts itself.
+     */
+    hidden: boolean;
+}
+
+/**
+ * Android-only fake splash.
+ *
+ * iOS renders a full-bleed gradient splash via the native storyboard
+ * (with-splash-screen-fix plugin). Android 12+ can only show a centred icon on
+ * a solid colour, so after the native splash hands off we cover the first
+ * frames with this React overlay — the shared `ImgScreenBgGradian` background
+ * + logo — then fade it out, giving Android a gradient launch look. No-op on
+ * iOS, which keeps its full-bleed native storyboard splash.
+ */
+const SplashOverlay = ({ hidden }: SplashOverlayProps) => {
+    const opacity = useSharedValue(1);
+    const gone = useSharedValue(false);
+
+    useEffect(() => {
+        if (hidden) {
+            opacity.value = withTiming(0, { duration: FADE_OUT_MS }, finished => {
+                if (finished) {
+                    gone.value = true;
+                }
+            });
+        }
+    }, [hidden, opacity, gone]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+        // Drop out of the tree (and stop intercepting touches) once faded.
+        display: gone.value ? 'none' : 'flex',
+    }));
+
+    if (Platform.OS !== 'android') {
+        return null;
+    }
+
+    return (
+        <Animated.View
+            style={[styles.container, animatedStyle]}
+            pointerEvents="none">
+            <Image
+                source={ImgScreenBgGradian}
+                style={styles.image}
+            />
+
+            <Image source={LOGO} style={styles.logo} resizeMode="contain" />
+        </Animated.View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 9999,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    image: {
+        position: 'absolute',
+        height: '100%',
+        width: '100%'
+    },
+    logo: {
+        height: verticalScale(160),
+        width: verticalScale(110)
+    },
+});
+
+export default SplashOverlay;

package/templates/mobile/expo/src/core/components/ui/animated-list-item/animated-list-item.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import Animated, { FadeInRight, FadeOutRight, Layout } from 'react-native-reanimated';
+import { AnimatedListItemProps } from './animated-list-item.type';
+
+const ANIMATION_DELAY_STAGGER = 50;
+const ANIMATION_DURATION = 200;
+const ENTERING_BASE = FadeInRight.duration(ANIMATION_DURATION).springify();
+const EXITING = FadeOutRight.duration(ANIMATION_DURATION);
+const LAYOUT = Layout.springify();
+const PressableAnimated = Animated.createAnimatedComponent(Pressable);
+
+const AnimatedListItem: React.FC<AnimatedListItemProps> = ({
+    children,
+    index,
+    style,
+    delayStagger = ANIMATION_DELAY_STAGGER,
+    onPress,
+}) => {
+    const entering = ENTERING_BASE.delay(index * delayStagger);
+
+    if (onPress) {
+        return (
+            <PressableAnimated
+                entering={entering}
+                exiting={EXITING}
+                layout={LAYOUT}
+                style={style}
+                onPress={onPress}
+            >
+                {children}
+            </PressableAnimated>
+        );
+    }
+
+    return (
+        <Animated.View
+            entering={entering}
+            exiting={EXITING}
+            layout={LAYOUT}
+            style={style}
+        >
+            {children}
+        </Animated.View>
+    );
+};
+
+export default AnimatedListItem;

package/templates/mobile/expo/src/core/components/ui/animated-list-item/animated-list-item.type.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+
+export interface AnimatedListItemProps {
+    children: React.ReactNode;
+    index: number;
+    style?: StyleProp<ViewStyle>;
+    delayStagger?: number;
+    onPress?: () => void;
+}

package/templates/mobile/expo/src/core/components/ui/animated-list-item/index.ts

@@ -0,0 +1,2 @@
+export { default as AnimatedListItem } from './animated-list-item';
+export * from './animated-list-item.type';