create-du-app 0.1.2 → 0.1.4

package/templates/mobile/expo/src/core/components/forms/hf-time-picker.tsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+import {
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  ViewStyle,
+} from 'react-native';
+import DatePicker from 'react-native-date-picker';
+import { Font, fontSize, horizontalScale, verticalScale, Radius } from '../../utils';
+import { ThemeColors, useThemedStyles } from '@src/core/theme';
+import { Label } from '../ui';
+
+type Props = {
+  containerStyle?: StyleProp<ViewStyle>;
+  name: string;
+  placeholder?: string;
+  onTimeSelected?: (time: string) => void;
+};
+
+const formatTime = (date: Date) => {
+  const hours = `0${date.getHours()}`.slice(-2);
+  const minutes = `0${date.getMinutes()}`.slice(-2);
+  return `${hours}:${minutes}`;
+};
+
+const parseTime = (timeString?: string) => {
+  if (!timeString) {
+    return new Date();
+  }
+  const [hours, minutes] = timeString.split(':').map(Number);
+  const date = new Date();
+  date.setHours(hours || 0);
+  date.setMinutes(minutes || 0);
+  return date;
+};
+
+const HFTimePicker = (props: Props) => {
+  const {
+    containerStyle = {},
+    name,
+    placeholder = 'HH:MM',
+    onTimeSelected,
+  } = props;
+  
+  const formContext = useFormContext();
+  const { field } = useController({
+    name,
+    control: formContext.control,
+    defaultValue: '',
+  });
+
+  const styles = useThemedStyles(makeStyles);
+
+  const [open, setOpen] = useState(false);
+  const [time, setTime] = useState<Date>(parseTime(field.value));
+
+  const handleOpen = () => {
+    setTime(parseTime(field.value));
+    setOpen(true);
+  };
+
+  const handleConfirm = (selectedTime: Date) => {
+    setOpen(false);
+    setTime(selectedTime);
+    const formatted = formatTime(selectedTime);
+    field.onChange(formatted);
+    onTimeSelected?.(formatted);
+  };
+
+  return (
+    <>
+      <TouchableOpacity
+        activeOpacity={0.7}
+        onPress={handleOpen}
+        style={[styles.container, containerStyle]}
+      >
+        <Label
+          style={[styles.text, !field.value && styles.placeholder]}
+          value={field.value || placeholder}
+        />
+      </TouchableOpacity>
+      <DatePicker
+        modal
+        mode="time"
+        open={open}
+        date={time}
+        onConfirm={handleConfirm}
+        onCancel={() => setOpen(false)}
+      />
+    </>
+  );
+};
+
+export default HFTimePicker;
+
+const makeStyles = (c: ThemeColors) =>
+  StyleSheet.create({
+    container: {
+      alignItems: 'center',
+      borderRadius: Radius.radius_lg,
+      backgroundColor: c.bg_page_normal_faded,
+      height: verticalScale(44),
+      paddingHorizontal: horizontalScale(16),
+      justifyContent: 'center',
+      borderWidth: 0.5,
+      borderColor: 'rgba(3, 7, 18, 0.2)',
+    },
+    text: {
+      fontSize: fontSize(14),
+      color: c.text_primary,
+      fontFamily: Font.rethinkSansRegular,
+    },
+    placeholder: {
+      color: c.sub_text,
+    },
+  });

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

@@ -0,0 +1,4 @@
+export { default as HFPasswordInput } from './hf-password-input';
+export { default as HFTextInput } from './hf-text-input';
+export { default as HFDateTime } from './hf-date-time';
+export { default as HFTimePicker } from './hf-time-picker';

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

@@ -0,0 +1,5 @@
+export * from './ui';
+export * from './forms';
+export * from './loading';
+export * from './common';
+export * from './splash';

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

@@ -0,0 +1 @@
+export * from './loading-app';

package/templates/mobile/expo/src/core/components/loading/loading-app/index.ts

@@ -0,0 +1 @@
+export { default as LoadingApp } from './loading-app';

package/templates/mobile/expo/src/core/components/loading/loading-app/loading-app.tsx

@@ -0,0 +1,50 @@
+import { useLoadingStore } from '@src/app/stores';
+import { LottieLoading } from '@src/assets/lotties';
+import { ThemeColors, useThemedStyles } from '@src/core/theme';
+import { horizontalScale } from '@src/core/utils';
+import LottieView from 'lottie-react-native';
+import React from 'react';
+import {  StyleSheet, View } from 'react-native';
+
+const LoadingApp = () => {
+    const styles = useThemedStyles(makeStyles);
+    const isLoading = useLoadingStore(state => state.isLoading);
+
+    return isLoading ? (
+        <View style={styles.container}>
+            <View style={styles.loading}>
+                <LottieView source={LottieLoading} autoPlay loop style={styles.lottie} />
+            </View>
+        </View>
+    ) : null;
+};
+
+const makeStyles = (c: ThemeColors) =>
+    StyleSheet.create({
+        container: {
+            ...StyleSheet.absoluteFill,
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        },
+        content: {
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100%',
+            width: '100%',
+        },
+        loading: {
+            width: 65,
+            height: 65,
+            borderRadius: horizontalScale(12),
+            backgroundColor: c.bg_page_normal_faded,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        lottie: {
+            width: 55,
+            height: 55,
+        },
+    });
+
+export default LoadingApp;

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

@@ -0,0 +1 @@
+export * from './offline-banner';

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,252 @@
+// 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,
+    NativeScrollEvent,
+    NativeSyntheticEvent,
+    StatusBar,
+    StyleProp,
+    StyleSheet,
+    View,
+    ViewStyle,
+} from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
+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 between the focused input and the top of
+     * the keyboard while `isForm`. The scroll view animates the whole form up by
+     * this much past the keyboard. @default Spacing.spacing_2xl (32)
+     */
+    bottomOffset?: number;
+    /**
+     * Let the built-in `KeyboardAwareScrollView` auto-scroll the focused input
+     * into view. Set `false` when the screen drives its own keyboard animation
+     * (e.g. a translateY/height worklet) so the two don't fight. @default true
+     */
+    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
+        keyboardAware = true,
+        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 ? (
+                    <KeyboardAwareScrollView
+                        ScrollViewComponent={ScrollView as any}
+                        showsVerticalScrollIndicator={false}
+                        onScroll={onScroll}
+                        scrollEventThrottle={16}
+                        onContentSizeChange={onContentSizeChange}
+                        // Animate the whole form up past the keyboard (UI-thread,
+                        // Reanimated) and keep `bottomOffset` of breathing room
+                        // above the focused caret. `mode="layout"` makes the flex
+                        // layout (topSpacer / marginTop:auto actions / gap) reflow
+                        // around the keyboard space so inputs are never covered.
+                        bottomOffset={bottomOffset}
+                        mode="layout"
+                        // When false, the screen drives its own keyboard animation
+                        // (translateY/height worklet) and this view stops auto-scrolling.
+                        enabled={keyboardAware}
+                        keyboardDismissMode="interactive"
+                        keyboardShouldPersistTaps="handled"
+                        contentContainerStyle={[styles.content, style]}
+                    >
+                        {body}
+                    </KeyboardAwareScrollView>
+                ) : (
+                    // 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';