create-du-app 0.1.3 → 0.1.4

package/templates/mobile/expo/src/core/components/forms/hf-password-input.tsx

@@ -0,0 +1,153 @@
+import { ErrorMessage } from '@hookform/error-message';
+import { IconEye, IconEyeHide } from '@src/assets/svgs';
+import React, { useCallback, useState } from 'react';
+import { useController, useFormContext, useFormState } from 'react-hook-form';
+import {
+    ImageSourcePropType,
+    StyleProp,
+    StyleSheet,
+    TextInput,
+    TextInputProps,
+    TouchableOpacity,
+    View,
+    ViewStyle,
+} from 'react-native';
+import { ThemeColors, useTheme, useThemedStyles } from '@src/core/theme';
+import { Font, fontSize, horizontalScale, verticalScale } from '../../utils';
+import { Label } from '../ui';
+type Props = TextInputProps & {
+    containerStyle?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    name: string;
+    label?: string;
+    leftIcon?: ImageSourcePropType;
+    isRequired?: boolean;
+    note?: string;
+};
+
+const HFPasswordInput = (props: Props) => {
+    const {
+        containerStyle = {},
+        contentStyle = {},
+        leftIcon = null,
+        style,
+        name,
+        label = null,
+        isRequired = false,
+        note = null,
+        ...rest
+    } = props;
+    const { colors } = useTheme();
+    const styles = useThemedStyles(makeStyles);
+    const formContext = useFormContext();
+    const { field } = useController({
+        name,
+        control: formContext.control,
+        defaultValue: '',
+    });
+
+    const { errors } = useFormState({
+        control: formContext.control,
+    });
+
+    const [isSecure, setSecure] = useState(true);
+    const handlePress = useCallback(() => {
+        setSecure(!isSecure);
+    }, [isSecure]);
+
+    return (
+        <View style={[styles.container, containerStyle]}>
+            {label && (
+                <Label style={styles.label} value={label}>
+                    <Label
+                        style={styles.labelRequired}
+                        value={`${isRequired ? ' *' : ''}`}
+                    />
+                </Label>
+            )}
+            <View style={[styles.content, contentStyle]}>
+                <TextInput
+                    {...rest}
+                    style={[styles.input, style]}
+                    value={field.value}
+                    onChangeText={field.onChange}
+                    placeholderTextColor={colors.h848D9A}
+                    secureTextEntry={isSecure}
+                />
+                <TouchableOpacity style={styles.action} onPress={handlePress}>
+                    {!isSecure ? <IconEyeHide /> : <IconEye />}
+                </TouchableOpacity>
+            </View>
+            {note && <Label style={styles.note} value={note} />}
+            <ErrorMessage
+                errors={errors}
+                name={name}
+                render={({ message }) => {
+                    return <Label style={styles.error} value={message} />;
+                }}
+            />
+        </View>
+    );
+};
+
+export default HFPasswordInput;
+
+const makeStyles = (c: ThemeColors) =>
+    StyleSheet.create({
+        container: {
+            gap: verticalScale(7),
+        },
+        label: {
+            color: c.text_secondary,
+            fontSize: fontSize(14),
+            fontFamily: Font.rethinkSansBold,
+        },
+        labelRequired: {
+            color: c.hFF2B00,
+            fontSize: fontSize(17),
+            fontFamily: Font.rethinkSansMedium,
+        },
+        content: {
+            alignItems: 'center',
+            borderRadius: horizontalScale(100),
+            backgroundColor: c.hFFFFFF,
+            height: verticalScale(44),
+            paddingHorizontal: horizontalScale(15),
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            borderWidth: 1,
+            borderColor: c.fg_primary_on_background,
+        },
+        input: {
+            flex: 1,
+            fontSize: fontSize(14),
+            color: c.text_primary,
+            fontFamily: Font.rethinkSansRegular,
+            padding: 0,
+        },
+        error: {
+            fontSize: fontSize(12),
+            lineHeight: fontSize(14),
+            color: 'red',
+            marginTop: verticalScale(4),
+        },
+        textValueCode: {
+            fontSize: fontSize(16),
+            color: c.h3C3C3B,
+            marginRight: horizontalScale(5),
+        },
+        iconLeft: {
+            height: horizontalScale(20),
+            marginRight: horizontalScale(14),
+        },
+        action: {
+            height: '100%',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        note: {
+            fontSize: fontSize(14),
+            color: c.fg_neutral_normal,
+            fontFamily: Font.rethinkSansRegular,
+        },
+    });

package/templates/mobile/expo/src/core/components/forms/hf-text-input.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+import { TextField, TextArea } from '../ui';
+import { TextFieldProps } from '../ui/text-field/text-field.type';
+import { TextAreaProps } from '../ui/text-area/text-area.type';
+
+type SharedProps = {
+    /** Form field name (path in the react-hook-form schema). */
+    name: string;
+    /** Render the multiline {@link TextArea} variant instead of {@link TextField}. */
+    multiline?: boolean;
+    /**
+     * Helper text shown under the field while it's valid (e.g. a password-rule
+     * hint). The validation error replaces it whenever the field is invalid.
+     */
+    helperText?: string;
+};
+
+type Props = SharedProps &
+    Omit<TextFieldProps & TextAreaProps, 'value' | 'onChangeText' | 'onBlur' | 'error' | 'message'>;
+
+/**
+ * react-hook-form binding over the design-system {@link TextField} / {@link TextArea}.
+ *
+ * Reads `control` from the surrounding `<FormProvider>`, so a field is just:
+ *
+ * @example
+ * <HFTextInput name="firstName" label={t('...')} autoCapitalize="words" />
+ * <HFTextInput name="preferences" label={t('...')} multiline />
+ * <HFTextInput name="password" secureTextEntry helperText={t('...')} />
+ *
+ * Label, error border, and the helper/error message all come from the DS field
+ * (theme-aware, light/dark) — this wrapper only wires value/onChange/error from
+ * the form. Validation messages surface from `fieldState.error.message`; while
+ * the field is valid the optional `helperText` shows instead.
+ */
+const HFTextInput = ({ name, multiline = false, helperText, ...rest }: Props) => {
+    const { control } = useFormContext();
+    const {
+        field: { value, onChange, onBlur },
+        fieldState: { error },
+    } = useController({ name, control, defaultValue: '' });
+
+    const shared = {
+        value,
+        onChangeText: onChange,
+        onBlur,
+        error: !!error,
+        message: error?.message ?? helperText,
+    };
+
+    if (multiline) {
+        return <TextArea {...(rest as TextAreaProps)} {...shared} />;
+    }
+
+    return <TextField {...(rest as TextFieldProps)} {...shared} />;
+};
+
+export default HFTextInput;

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';