create-du-app 0.1.2 → 0.1.4

package/templates/mobile/expo/src/core/components/ui/radio/radio.tsx

@@ -0,0 +1,121 @@
+import { Font, fontSize, horizontalScale, Radius, Spacing, Stroke } from '@src/core/utils';
+import { ThemeColors, useThemedStyles } from '@src/core/theme';
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { RadioProps } from './radio.type';
+
+const RING = horizontalScale(20);
+const DOT = horizontalScale(10);
+
+/**
+ * Design-system Radio (Life-Master-Design).
+ *
+ * States: unselected / selected, plus `error` and `disabled`.
+ * Optional `label` + `caption`. Controlled via `selected` / `onSelect`.
+ *
+ * @example
+ * <Radio selected={value === 'a'} onSelect={() => setValue('a')} label="Option A" caption="Detail" />
+ */
+const Radio = (props: RadioProps) => {
+  const {
+    selected = false,
+    onSelect,
+    label,
+    caption,
+    error = false,
+    disabled = false,
+    style,
+    accessibilityLabel,
+  } = props;
+
+  const styles = useThemedStyles(makeStyles);
+
+  const ringStyle = [
+    styles.ring,
+    selected && !disabled && styles.ringSelected,
+    error && !disabled && styles.ringError,
+    disabled && styles.ringDisabled,
+  ];
+
+  return (
+    <TouchableOpacity
+      accessibilityRole="radio"
+      accessibilityState={{ selected, disabled }}
+      accessibilityLabel={accessibilityLabel ?? label}
+      activeOpacity={0.7}
+      disabled={disabled}
+      onPress={onSelect}
+      style={[styles.row, style]}
+    >
+      <View style={ringStyle}>
+        {selected ? (
+          <View style={[styles.dot, disabled && styles.dotDisabled]} />
+        ) : null}
+      </View>
+
+      {(label || caption) && (
+        <View style={styles.texts}>
+          {label ? <Text style={[styles.label, disabled && styles.textDisabled]}>{label}</Text> : null}
+          {caption ? <Text style={styles.caption}>{caption}</Text> : null}
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+export default Radio;
+
+const makeStyles = (c: ThemeColors) =>
+  StyleSheet.create({
+    row: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      gap: Spacing.spacing_s_nudge, // 6
+    },
+    ring: {
+      width: RING,
+      height: RING,
+      borderRadius: Radius.radius_full,
+      borderWidth: Stroke.stroke_s, // 1
+      borderColor: c.bd_neutral_normal, // #c6c6c6
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: c.bg_elevation_level_1_normal, // #141414
+    },
+    ringSelected: {
+      borderColor: c.bd_primary_normal, // #6927da
+    },
+    ringError: {
+      borderColor: c.bd_danger_normal,
+    },
+    ringDisabled: {
+      borderColor: c.bd_neutral_faded,
+    },
+    dot: {
+      width: DOT,
+      height: DOT,
+      borderRadius: Radius.radius_full,
+      backgroundColor: c.fg_primary_normal, // #6927da
+    },
+    dotDisabled: {
+      backgroundColor: c.fg_neutral_faded,
+    },
+    texts: {
+      flexShrink: 1,
+    },
+    label: {
+      fontFamily: Font.dmSansMedium,
+      fontSize: fontSize(14),
+      lineHeight: 20,
+      color: c.fg_neutral_normal,
+    },
+    caption: {
+      fontFamily: Font.dmSansRegular,
+      fontSize: fontSize(12),
+      lineHeight: 18,
+      color: c.fg_neutral_faded,
+    },
+    textDisabled: {
+      color: c.fg_neutral_faded,
+    },
+  });

package/templates/mobile/expo/src/core/components/ui/radio/radio.type.ts

@@ -0,0 +1,20 @@
+import { StyleProp, ViewStyle } from 'react-native';
+
+export interface RadioProps {
+  /** Whether this radio is selected. */
+  selected?: boolean;
+  /** Fired when pressed (while not already selected). */
+  onSelect?: () => void;
+  /** Primary text next to the circle. */
+  label?: string;
+  /** Secondary text under the label. */
+  caption?: string;
+  /** Error (validation) visual — red ring. */
+  error?: boolean;
+  /** Disable interaction + faded visual. */
+  disabled?: boolean;
+  /** Override container style. */
+  style?: StyleProp<ViewStyle>;
+  /** Accessibility label when no visible `label` is provided. */
+  accessibilityLabel?: string;
+}

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

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

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+/**
+ * Full-screen vertical gradient background — the default DS screen background.
+ *
+ * Matches the Life-Master onboarding / splash screens (Figma node 16:6784):
+ * a soft top→bottom fade from `#646464` to pure black. Rendered behind all
+ * screen content; absolutely positioned and non-interactive.
+ *
+ * Used as the `gradient` variant of {@link ScreenContainer}.
+ */
+const ScreenGradient = () => {
+  return (
+    <LinearGradient
+      pointerEvents="none"
+      colors={['#646464', '#000000']}
+      locations={[0, 1]}
+      start={{ x: 0, y: 0 }}
+      end={{ x: 0, y: 1 }}
+      style={styles.gradient}
+    />
+  );
+};
+
+export default ScreenGradient;
+
+const styles = StyleSheet.create({
+  gradient: {
+    ...StyleSheet.absoluteFill,
+  },
+});

package/templates/mobile/expo/src/core/components/ui/search-box/index.ts

@@ -0,0 +1,2 @@
+export { default as SearchBox } from './search-box';
+export * from './search-box.type';

package/templates/mobile/expo/src/core/components/ui/search-box/search-box.tsx

@@ -0,0 +1,162 @@
+import { IconClose, IconSearch } from '@src/assets/svgs';
+import { ThemeColors, useTheme, useThemedStyles } from '@src/core/theme';
+import { Font, fontSize, horizontalScale, Radius, Spacing, Stroke } from '@src/core/utils';
+import React, { useState } from 'react';
+import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { SearchBoxProps } from './search-box.type';
+
+/**
+ * Design-system search input (Life-Master-Design "Search Box").
+ *
+ * Leading search icon + text input + a clear (✕) button shown when there is text.
+ * States: default / focus / typing / filled.
+ *
+ * Pass `asButton` + `onPress` to render it as a non-editable trigger (a Text
+ * placeholder instead of a TextInput) — used when tapping it should open a
+ * dedicated search screen rather than editing the box in place.
+ *
+ * @example
+ * <SearchBox value={q} onChangeText={setQ} />
+ * <SearchBox asButton placeholder="Search…" onPress={openSearch} />
+ */
+const SearchBox = (props: SearchBoxProps) => {
+  const {
+    value = '',
+    onChangeText,
+    onClear,
+    placeholder = 'Type to search',
+    disabled = false,
+    containerStyle,
+    inputStyle,
+    asButton = false,
+    onPress,
+    onFocus,
+    onBlur,
+    ...inputProps
+  } = props;
+
+  const styles = useThemedStyles(makeStyles);
+  const { colors } = useTheme();
+
+  const [focused, setFocused] = useState(false);
+  const showClear = value.length > 0 && !disabled;
+
+  const handleClear = () => {
+    onClear ? onClear() : onChangeText?.('');
+  };
+
+  // Trigger mode: a tappable box showing the placeholder/value as static text.
+  if (asButton) {
+    return (
+      <TouchableOpacity
+        accessibilityRole="search"
+        accessibilityLabel={value || placeholder}
+        activeOpacity={0.8}
+        onPress={onPress}
+        disabled={disabled}
+        style={[styles.box, styles.boxButton, containerStyle]}
+      >
+        <IconSearch
+          width={horizontalScale(20)}
+          height={horizontalScale(20)}
+          color={colors.fg_neutral_normal}
+        />
+        <Text
+          numberOfLines={1}
+          style={[
+            styles.input,
+            !value && { color: colors.fg_neutral_faded },
+            inputStyle,
+          ]}
+        >
+          {value || placeholder}
+        </Text>
+      </TouchableOpacity>
+    );
+  }
+
+  return (
+    <View
+      style={[
+        styles.box,
+        { borderColor: focused ? colors.bd_primary_normal : 'transparent' },
+        containerStyle,
+      ]}
+    >
+      <IconSearch
+        width={horizontalScale(20)}
+        height={horizontalScale(20)}
+        color={colors.fg_neutral_normal}
+      />
+
+      <TextInput
+        {...inputProps}
+        value={value}
+        editable={!disabled}
+        placeholder={placeholder}
+        placeholderTextColor={colors.fg_neutral_faded}
+        onChangeText={onChangeText}
+        onFocus={(e) => {
+          setFocused(true);
+          onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          setFocused(false);
+          onBlur?.(e);
+        }}
+        style={[styles.input, inputStyle]}
+      />
+
+      {showClear ? (
+        <TouchableOpacity
+          accessibilityRole="button"
+          accessibilityLabel="Clear search"
+          onPress={handleClear}
+          style={styles.clear}
+          hitSlop={6}
+        >
+          <IconClose
+            width={horizontalScale(8)}
+            height={horizontalScale(8)}
+            color={colors.fg_neutral_normal}
+          />
+        </TouchableOpacity>
+      ) : null}
+    </View>
+  );
+};
+
+export default SearchBox;
+
+const makeStyles = (c: ThemeColors) =>
+  StyleSheet.create({
+    box: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      alignSelf: 'stretch',
+      gap: Spacing.spacing_sm, // 8
+      paddingHorizontal: Spacing.spacing_md, // 12
+      paddingVertical: Spacing.spacing_m_nudge, // 10
+      borderRadius: Radius.radius_lg, // 12
+      borderWidth: Stroke.stroke_s, // 1 (transparent unless focused)
+      backgroundColor: c.bg_input, // rgba(0,0,0,0.4)
+    },
+    boxButton: {
+      borderColor: 'transparent',
+    },
+    input: {
+      flex: 1,
+      paddingVertical: 0,
+      fontFamily: Font.dmSansRegular,
+      fontSize: fontSize(16),
+      color: c.fg_neutral_normal,
+    },
+    clear: {
+      width: horizontalScale(16),
+      height: horizontalScale(16),
+      borderRadius: Radius.radius_full,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: c.bg_elevation_level_2_normal, // #292929
+    },
+  });

package/templates/mobile/expo/src/core/components/ui/search-box/search-box.type.ts

@@ -0,0 +1,26 @@
+import { StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
+
+export type SearchBoxProps = Omit<TextInputProps, 'style'> & {
+  /** Controlled text value. */
+  value?: string;
+  /** Fired on text change. */
+  onChangeText?: (text: string) => void;
+  /** Fired when the clear (✕) button is pressed. Defaults to clearing the value. */
+  onClear?: () => void;
+  /** Placeholder. @default 'Type to search' */
+  placeholder?: string;
+  /** Disable input. */
+  disabled?: boolean;
+  /** Override the container style. */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** Override the text input style. */
+  inputStyle?: StyleProp<TextStyle>;
+  /**
+   * Render the box as a non-editable button (a Text placeholder instead of a
+   * TextInput) and fire {@link onPress} when tapped. Use this when the box is a
+   * trigger that opens a dedicated search screen rather than editing in place.
+   */
+  asButton?: boolean;
+  /** Press handler used when {@link asButton} is set. */
+  onPress?: () => void;
+};

package/templates/mobile/expo/src/core/components/ui/segmented-control/index.ts

@@ -0,0 +1,2 @@
+export { default as SegmentedControl } from './segmented-control';
+export * from './segmented-control.type';

package/templates/mobile/expo/src/core/components/ui/segmented-control/segmented-control.tsx

@@ -0,0 +1,86 @@
+import { ThemeColors, useThemedStyles } from '@src/core/theme';
+import { Font, fontSize, Radius, Spacing } from '@src/core/utils';
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { SegmentedControlProps } from './segmented-control.type';
+
+/**
+ * Design-system segmented control (Life-Master-Design pill toggle, e.g. Français / English).
+ *
+ * Equal-width segments; the selected one gets an elevated surface + shadow.
+ *
+ * @example
+ * <SegmentedControl
+ *   items={[{ key: 'fr', label: 'Français' }, { key: 'en', label: 'English' }]}
+ *   selectedKey={lang}
+ *   onChange={setLang}
+ * />
+ */
+const SegmentedControl = ({ items, selectedKey, onChange, style }: SegmentedControlProps) => {
+  const styles = useThemedStyles(makeStyles);
+
+  return (
+    <View style={[styles.container, style]}>
+      {items.map((item) => {
+        const isSelected = item.key === selectedKey;
+        return (
+          <TouchableOpacity
+            key={item.key}
+            accessibilityRole="button"
+            accessibilityState={{ selected: isSelected }}
+            activeOpacity={0.8}
+            onPress={() => onChange(item.key)}
+            style={[styles.segment, isSelected && styles.segmentSelected]}
+          >
+            {item.leading}
+            <Text style={[styles.label, isSelected && styles.labelSelected]}>{item.label}</Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+export default SegmentedControl;
+
+const makeStyles = (c: ThemeColors) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      alignSelf: 'stretch',
+      gap: Spacing.spacing_xs, // 4
+      padding: Spacing.spacing_xs, // 4
+      borderRadius: Radius.radius_lg, // 12
+      backgroundColor: c.bg_elevation_level_2_normal, // #292929
+    },
+    segment: {
+      flex: 1,
+      minHeight: 42,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: Spacing.spacing_sm, // 8
+      paddingHorizontal: Spacing.spacing_md, // 12
+      paddingVertical: Spacing.spacing_sm, // 8
+      borderRadius: Radius.radius_md, // 8
+    },
+    segmentSelected: {
+      backgroundColor: c.bg_elevation_level_1_normal, // #141414
+      shadowColor: c.shadow_skeumorphic_inner,
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 1,
+      shadowRadius: 3,
+      elevation: 2,
+    },
+    label: {
+      fontFamily: Font.dmSansMedium,
+      fontSize: fontSize(14),
+      lineHeight: 20,
+      letterSpacing: 0.25,
+      color: c.fg_neutral_faded, // #a8a8a8
+    },
+    labelSelected: {
+      color: c.fg_neutral_normal, // #f5f5f5
+    },
+  });

package/templates/mobile/expo/src/core/components/ui/segmented-control/segmented-control.type.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+
+export interface SegmentItem {
+  /** Unique key. */
+  key: string;
+  /** Visible label. */
+  label: string;
+  /** Optional leading element (e.g. a flag/emoji icon). */
+  leading?: ReactNode;
+}
+
+export interface SegmentedControlProps {
+  /** Segments. */
+  items: SegmentItem[];
+  /** Currently selected key. */
+  selectedKey: string;
+  /** Fired with the next key on press. */
+  onChange: (key: string) => void;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+}

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

@@ -0,0 +1,2 @@
+export { default as Skeleton } from './skeleton';
+export * from './skeleton.type';

package/templates/mobile/expo/src/core/components/ui/skeleton/skeleton.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from 'react';
+import { LayoutChangeEvent, StyleSheet, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import { ThemeColors, useTheme, useThemedStyles } from '@src/core/theme';
+import { SkeletonProps } from './skeleton.type';
+
+// One sweep of the highlight band, edge to edge. Slower than a pulse so the
+// motion reads as a deliberate "loading" sheen rather than a flicker.
+const SWEEP_DURATION_MS = 1100;
+// The moving band is ~60% of the block width, so a soft highlight crosses
+// rather than a hard line.
+const BAND_RATIO = 0.6;
+
+const AnimatedGradient = Animated.createAnimatedComponent(LinearGradient);
+
+/**
+ * Loading placeholder block with a horizontal shimmer sweep.
+ *
+ * A dim base fills the box; a soft highlight band (LinearGradient) sweeps left
+ * → right on a loop on the UI thread (reanimated), giving the "professional"
+ * sheen instead of the old whole-block opacity pulse. The box clips the band
+ * (`overflow: hidden`) and measures its own width so the sweep distance is
+ * exact at any size.
+ */
+const Skeleton: React.FC<SkeletonProps> = ({
+  width = '100%',
+  height = 16,
+  borderRadius = 8,
+  style,
+}) => {
+  const styles = useThemedStyles(makeStyles);
+  const { colors } = useTheme();
+
+  // Measured pixel width drives the sweep distance (width can be a %/'100%').
+  const [boxWidth, setBoxWidth] = useState(0);
+  const progress = useSharedValue(0);
+
+  useEffect(() => {
+    if (boxWidth === 0) return;
+    progress.value = 0;
+    progress.value = withRepeat(
+      withTiming(1, { duration: SWEEP_DURATION_MS, easing: Easing.linear }),
+      -1, // infinite
+      false, // restart from the left each loop (no reverse)
+    );
+  }, [boxWidth, progress]);
+
+  const bandWidth = boxWidth * BAND_RATIO;
+
+  const bandStyle = useAnimatedStyle(() => ({
+    // Travel from fully off the left edge to fully off the right edge.
+    transform: [
+      {
+        translateX:
+          -bandWidth + progress.value * (boxWidth + bandWidth),
+      },
+    ],
+  }));
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const w = e.nativeEvent.layout.width;
+    if (w !== boxWidth) setBoxWidth(w);
+  };
+
+  return (
+    <View
+      onLayout={onLayout}
+      style={[styles.base, { width, height, borderRadius }, style]}
+    >
+      {boxWidth > 0 ? (
+        <AnimatedGradient
+          colors={[colors.transparent, colors.rgbaFFFFFF_20, colors.transparent]}
+          start={{ x: 0, y: 0.5 }}
+          end={{ x: 1, y: 0.5 }}
+          style={[styles.band, { width: bandWidth }, bandStyle]}
+        />
+      ) : null}
+    </View>
+  );
+};
+
+export default Skeleton;
+
+const makeStyles = (c: ThemeColors) =>
+  StyleSheet.create({
+    base: {
+      backgroundColor: c.bg_elevation_level_2_normal, // #292929 dim block
+      overflow: 'hidden',
+    },
+    // Full-height band pinned to the left edge; its `width` is set inline from
+    // the measured box and it sweeps across via an animated translateX (so it
+    // must NOT pin `right`, or the width would be ignored).
+    band: {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 0,
+    },
+  });

package/templates/mobile/expo/src/core/components/ui/skeleton/skeleton.type.ts

@@ -0,0 +1,8 @@
+import { DimensionValue, StyleProp, ViewStyle } from 'react-native';
+
+export interface SkeletonProps {
+    width?: DimensionValue;
+    height?: DimensionValue;
+    borderRadius?: number;
+    style?: StyleProp<ViewStyle>;
+}

package/templates/mobile/expo/src/core/components/ui/success-state/index.ts

@@ -0,0 +1 @@
+export { default as SuccessState } from './success-state'

package/templates/mobile/expo/src/core/components/ui/success-state/success-state.tsx

@@ -0,0 +1,68 @@
+import { IconCheck } from '@src/assets/svgs'
+import { Colors, Font, fontSize, horizontalScale, Spacing } from '@src/core/utils'
+import React from 'react'
+import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
+import { SvgProps } from 'react-native-svg'
+
+const BADGE_SIZE = horizontalScale(64)
+const ICON_SIZE = horizontalScale(28)
+
+interface SuccessStateProps {
+    title: string
+    subtitle?: string
+    /** Badge icon. @default IconCheck */
+    Icon?: React.FC<SvgProps>
+    style?: StyleProp<ViewStyle>
+}
+
+/**
+ * Design-system confirmation block (Life-Master-Design success screens).
+ *
+ * Centered success badge + title + optional subtitle. Used by the
+ * "reset link sent" and "password reset success" screens.
+ *
+ * @example
+ * <SuccessState title="Mot de passe mis à jour" subtitle="Connectez-vous…" />
+ */
+const SuccessState = ({ title, subtitle, Icon = IconCheck, style }: SuccessStateProps) => {
+    return (
+        <View style={[styles.container, style]}>
+            <View style={styles.badge}>
+                <Icon width={ICON_SIZE} height={ICON_SIZE} />
+            </View>
+            <Text style={styles.title}>{title}</Text>
+            {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : null}
+        </View>
+    )
+}
+
+export default SuccessState
+
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        gap: Spacing.spacing_base,
+    },
+    badge: {
+        width: BADGE_SIZE,
+        height: BADGE_SIZE,
+        borderRadius: BADGE_SIZE,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: Colors.fg_success_normal,
+    },
+    title: {
+        fontFamily: Font.dmSansSemiBold,
+        fontSize: fontSize(24),
+        lineHeight: 32,
+        textAlign: 'center',
+        color: Colors.fg_neutral_on_background,
+    },
+    subtitle: {
+        fontFamily: Font.dmSansRegular,
+        fontSize: fontSize(14),
+        lineHeight: 20,
+        textAlign: 'center',
+        color: Colors.fg_neutral_faded,
+    },
+})

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

@@ -0,0 +1,2 @@
+export { default as Tabs } from './tabs';
+export * from './tabs.type';