create-du-app 0.1.3 → 0.1.4

package/templates/mobile/rn/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/rn/src/core/components/splash/index.ts

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

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

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

package/templates/mobile/rn/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/rn/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/rn/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/rn/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';

package/templates/mobile/rn/src/core/components/ui/app-image/app-image.tsx

@@ -0,0 +1,104 @@
+import { ThemeColors, useThemedStyles } from '@src/core/theme';
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  Image,
+  ImageStyle,
+  StyleProp,
+  StyleSheet,
+  View,
+} from 'react-native';
+import FastImage, { ImageStyle as FastImageStyle } from 'react-native-fast-image';
+import { AppImageProps } from './app-image.type';
+
+const ImageSkeleton: React.FC<{ style?: StyleProp<ImageStyle> }> = ({ style }) => {
+  const styles = useThemedStyles(makeStyles);
+  const shimmer = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(shimmer, { toValue: 1, duration: 900, useNativeDriver: true }),
+        Animated.timing(shimmer, { toValue: 0, duration: 900, useNativeDriver: true }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [shimmer]);
+
+  const opacity = shimmer.interpolate({ inputRange: [0, 1], outputRange: [0.4, 0.9] });
+
+  return <Animated.View style={[styles.skeleton, style, { opacity }]} />;
+};
+
+const AppImage: React.FC<AppImageProps> = ({ style, source, resizeMode, containerStyle, immutable, ...rest }) => {
+  const styles = useThemedStyles(makeStyles);
+  // Start true so the shimmer shows immediately on mount and stays up until the
+  // first load resolves; flipping it false on load-end/error reveals the image.
+  // For an immutable source the bitmap is already cached on remount, so starting
+  // false avoids a shimmer flash before onLoadEnd fires (LIFEMASTER-364).
+  const [loading, setLoading] = useState(!immutable);
+
+  // Handle empty or invalid source. Keep `style` so the slot preserves its
+  // dimensions (e.g. a hero/cover) instead of collapsing to 0px while the real
+  // source is still loading or missing.
+  if (!source || (typeof source === 'object' && 'uri' in source && !source.uri)) {
+    return <View style={style} />;
+  }
+
+  // Local image or non-http/https uri
+  if (
+    typeof source === 'number' ||
+    !(source?.uri?.startsWith('http://') || source?.uri?.startsWith('https://'))
+  ) {
+    return <Image style={style} source={source} resizeMode={resizeMode} {...rest} />;
+  }
+
+  // Remote image with loading indicator
+  // `source` is narrowed to `ImageURISource` here: the `number` case returned above.
+  const uri = source.uri ?? '';
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <FastImage
+        // Default (mutable) path remounts on URL change so a re-uploaded avatar
+        // reloads instead of FastImage keeping the old native view + cached
+        // bitmap; `cache: web` revalidates a stable URL (server fix is a unique
+        // filename per upload, LIFEMASTER-260). An `immutable` source has a
+        // content-addressed URL, so we skip the remount and cache it immutably —
+        // the bitmap is served instantly on remount with no reload/flash
+        // (LIFEMASTER-364).
+        key={immutable ? undefined : uri}
+        style={style as FastImageStyle}
+        source={{
+          uri: uri || '',
+          priority: FastImage.priority.normal,
+          cache: immutable
+            ? FastImage.cacheControl.immutable
+            : FastImage.cacheControl.web,
+        }}
+        // For an immutable (already-cached) source, don't re-raise the shimmer on
+        // load-start: the bitmap is there instantly, so a flash to loading would
+        // be the very reload artifact we're removing (LIFEMASTER-364).
+        onLoadStart={() => !immutable && setLoading(true)}
+        onLoadEnd={() => setLoading(false)}
+        onError={() => setLoading(false)}
+        resizeMode={resizeMode}
+      />
+      {loading && <ImageSkeleton style={style} />}
+    </View>
+  );
+};
+
+export default AppImage;
+
+const makeStyles = (c: ThemeColors) =>
+  StyleSheet.create({
+    container: {
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    skeleton: {
+      position: 'absolute',
+      backgroundColor: c.hE3E3E3,
+    },
+  });

package/templates/mobile/rn/src/core/components/ui/app-image/app-image.type.ts

@@ -0,0 +1,19 @@
+import { ImagePropsBase, ImageStyle, ImageURISource, StyleProp, ViewStyle } from 'react-native';
+import { ResizeMode } from 'react-native-fast-image';
+
+export interface AppImageProps extends ImagePropsBase {
+  source: ImageURISource | number;
+  style?: StyleProp<ImageStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  resizeMode?: ResizeMode;
+  /**
+   * Treat the remote image as immutable (stable URL → content never changes), so
+   * FastImage serves the cached bitmap instantly on every remount instead of
+   * revalidating over the network. Use for content-addressed images (e.g. player
+   * covers): it stops the artwork from flashing/reloading when the same image
+   * remounts — like expanding the mini-player to full screen on Android
+   * (LIFEMASTER-364). Leave off for images that can change behind a stable URL
+   * (e.g. a re-uploaded avatar), which need the default revalidating `web` cache.
+   */
+  immutable?: boolean;
+}

package/templates/mobile/rn/src/core/components/ui/app-image/index.ts

@@ -0,0 +1,2 @@
+export { default as AppImage } from './app-image';
+export * from './app-image.type';

package/templates/mobile/rn/src/core/components/ui/asset-placeholder/asset-placeholder.tsx

@@ -0,0 +1,76 @@
+import { Colors, Font, fontSize, Radius } from '@src/core/utils'
+import React from 'react'
+import { DimensionValue, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
+
+interface AssetPlaceholderProps {
+    /** Asset name from the FE handoff asset checklist (e.g. 'onboarding-clarity'). */
+    name: string
+    /** Figma node id the asset comes from. */
+    figmaNodeId?: string
+    width?: DimensionValue
+    height?: DimensionValue
+    rounded?: boolean
+    style?: StyleProp<ViewStyle>
+}
+
+/**
+ * Placeholder for an image / illustration / icon that is NOT yet exported from
+ * Figma. Reserves the correct space and labels the missing asset so the layout
+ * stays intact until the real asset is imported.
+ *
+ * Replace every usage with the real asset listed in the FE handoff checklist.
+ *
+ * @example
+ * <AssetPlaceholder name="onboarding-clarity" figmaNodeId="16:6784" width={240} height={240} rounded />
+ */
+const AssetPlaceholder = ({
+    name,
+    figmaNodeId,
+    width = '100%',
+    height = 160,
+    rounded = false,
+    style,
+}: AssetPlaceholderProps) => {
+    return (
+        <View
+            style={[
+                styles.box,
+                { width, height },
+                rounded && styles.rounded,
+                style,
+            ]}
+            accessibilityRole="image"
+            accessibilityLabel={`asset:${name}`}
+        >
+            <Text style={styles.label}>{name}</Text>
+            {figmaNodeId ? <Text style={styles.node}>{figmaNodeId}</Text> : null}
+        </View>
+    )
+}
+
+export default AssetPlaceholder
+
+const styles = StyleSheet.create({
+    box: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderStyle: 'dashed',
+        borderColor: Colors.bd_neutral_faded,
+        backgroundColor: Colors.bg_input,
+        borderRadius: Radius.radius_lg,
+    },
+    rounded: {
+        borderRadius: Radius.radius_full,
+    },
+    label: {
+        fontFamily: Font.dmSansMedium,
+        fontSize: fontSize(12),
+        color: Colors.fg_neutral_faded,
+    },
+    node: {
+        fontFamily: Font.dmSansRegular,
+        fontSize: fontSize(10),
+        color: Colors.fg_neutral_faded,
+    },
+})

package/templates/mobile/rn/src/core/components/ui/asset-placeholder/index.ts

@@ -0,0 +1 @@
+export { default as AssetPlaceholder } from './asset-placeholder'