create-du-app 0.1.3 → 0.1.4

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

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

@@ -0,0 +1,273 @@
+import { Font, fontSize, Radius, Spacing, Stroke } from '@src/core/utils';
+import { ThemeColors, useTheme, useThemedStyles } from '@src/core/theme';
+import React, { useCallback, useEffect, useRef } from 'react';
+import {
+  LayoutChangeEvent,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { TabItem, TabsProps } from './tabs.type';
+
+// One timing for both the underline slide and the label scale, so the
+// indicator and the text settle together.
+const SLIDE_DURATION = 240;
+// Active label nudges up a touch — subtle; the row height stays put because the
+// inactive label already reserves the line-height.
+const LABEL_SCALE_ACTIVE = 1.06;
+
+/** Per-tab measured geometry, used to place the sliding underline. */
+type TabLayout = { x: number; width: number };
+
+type Styles = ReturnType<typeof makeStyles>;
+
+/**
+ * One tab cell. Measures itself (`onLayout`) so the parent can drive the
+ * sliding underline, and scales its label up while active. Memoized so a tab
+ * switch only re-renders the two tabs whose active state actually flips.
+ */
+const Tab = React.memo(function Tab({
+  item,
+  isActive,
+  onPress,
+  onMeasure,
+  styles,
+}: {
+  item: TabItem;
+  isActive: boolean;
+  onPress: (key: string) => void;
+  onMeasure: (key: string, layout: TabLayout) => void;
+  styles: Styles;
+}) {
+  const scale = useSharedValue(isActive ? LABEL_SCALE_ACTIVE : 1);
+
+  useEffect(() => {
+    scale.value = withTiming(isActive ? LABEL_SCALE_ACTIVE : 1, {
+      duration: SLIDE_DURATION,
+    });
+  }, [isActive, scale]);
+
+  const labelStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  const handleLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      const { x, width } = e.nativeEvent.layout;
+      onMeasure(item.key, { x, width });
+    },
+    [item.key, onMeasure],
+  );
+
+  const handlePress = useCallback(() => onPress(item.key), [item.key, onPress]);
+
+  return (
+    <TouchableOpacity
+      accessibilityRole="tab"
+      accessibilityState={{ selected: isActive }}
+      activeOpacity={0.7}
+      onPress={handlePress}
+      onLayout={handleLayout}
+      style={styles.tab}
+    >
+      <Animated.Text
+        style={[styles.label, isActive && styles.labelActive, labelStyle]}
+      >
+        {item.label}
+      </Animated.Text>
+    </TouchableOpacity>
+  );
+});
+
+/**
+ * Design-system underline tabs (Life-Master-Design "Horizontal tabs").
+ *
+ * The active tab keeps the same look as before — a 2px primary underline + a
+ * highlighted label — but the underline now *slides* between tabs (reanimated)
+ * and the active label scales up a touch, so switching reads as continuous
+ * motion instead of a hard swap. The whole bar keeps its 1px bottom divider.
+ *
+ * @example
+ * <Tabs items={[{key:'all',label:'Tout'}]} activeKey={key} onChange={setKey} />
+ */
+const Tabs = ({ items, activeKey, onChange, scrollable = true, style }: TabsProps) => {
+  const styles = useThemedStyles(makeStyles);
+  const { colors } = useTheme();
+
+  // Measured geometry per tab key — the underline reads from here. A ref, so a
+  // measurement never triggers a render; the underline is repositioned
+  // imperatively on the UI thread instead.
+  const layouts = useRef<Record<string, TabLayout>>({});
+
+  const underlineX = useSharedValue(0);
+  const underlineW = useSharedValue(0);
+  // Skip the first animation so the underline appears already under the active
+  // tab instead of flying in from x=0 on mount.
+  const placed = useRef(false);
+
+  // The horizontal scroller + its measured viewport width, so a tap on a tab
+  // near either edge can recenter that tab. Width is needed to compute the
+  // centering offset; the ref drives the imperative scroll.
+  const scrollRef = useRef<ScrollView>(null);
+  const viewportW = useRef(0);
+
+  // Scroll so the tapped tab sits centered in the viewport, clamped at both
+  // ends so we never overscroll past the content edges.
+  const centerTab = useCallback((key: string) => {
+    const l = layouts.current[key];
+    const vw = viewportW.current;
+    if (!l || !vw) return;
+    const target = l.x + l.width / 2 - vw / 2;
+    scrollRef.current?.scrollTo({ x: Math.max(0, target), animated: true });
+  }, []);
+
+  const placeUnderline = useCallback(
+    (key: string, animated: boolean) => {
+      const l = layouts.current[key];
+      if (!l) return;
+      if (animated) {
+        underlineX.value = withTiming(l.x, { duration: SLIDE_DURATION });
+        underlineW.value = withTiming(l.width, { duration: SLIDE_DURATION });
+      } else {
+        underlineX.value = l.x;
+        underlineW.value = l.width;
+      }
+    },
+    [underlineX, underlineW],
+  );
+
+  const onMeasure = useCallback(
+    (key: string, layout: TabLayout) => {
+      const prev = layouts.current[key];
+      if (prev && prev.x === layout.x && prev.width === layout.width) return;
+      layouts.current[key] = layout;
+      // First time the active tab reports its box, snap the underline under it.
+      if (key === activeKey && !placed.current) {
+        placeUnderline(key, false);
+        placed.current = true;
+      }
+    },
+    [activeKey, placeUnderline],
+  );
+
+  // Slide whenever the active tab changes. If the active tab has already been
+  // measured, `placed` is true → animate; otherwise the measure callback snaps.
+  // Also recenter the now-active tab so edge tabs (and external swipes that
+  // move the active key) pull themselves into the middle of the scroller.
+  useEffect(() => {
+    placeUnderline(activeKey, placed.current);
+    centerTab(activeKey);
+  }, [activeKey, placeUnderline, centerTab]);
+
+  const underlineStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: underlineX.value }],
+    width: underlineW.value,
+  }));
+
+  const row = items.map((item) => (
+    <Tab
+      key={item.key}
+      item={item}
+      isActive={item.key === activeKey}
+      onPress={onChange}
+      onMeasure={onMeasure}
+      styles={styles}
+    />
+  ));
+
+  // Absolutely positioned over the bar; left + width animate to the active tab.
+  const underline = (
+    <Animated.View
+      pointerEvents="none"
+      style={[
+        styles.underline,
+        { backgroundColor: colors.bd_primary_normal },
+        underlineStyle,
+      ]}
+    />
+  );
+
+  if (scrollable) {
+    return (
+      <View style={styles.content}>
+        <ScrollView
+          ref={scrollRef}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          onLayout={(e) => {
+            viewportW.current = e.nativeEvent.layout.width;
+          }}
+          style={style}
+          contentContainerStyle={styles.bar}
+        >
+          {row}
+          {underline}
+        </ScrollView>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.bar, styles.barStatic, style]}>
+      {row}
+      {underline}
+    </View>
+  );
+};
+
+export default Tabs;
+
+const makeStyles = (c: ThemeColors) =>
+  StyleSheet.create({
+    bar: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: Spacing.spacing_sm, // 8
+      // Anchor the absolute sliding underline to the bar's bottom edge.
+      position: 'relative',
+      paddingBottom: Stroke.stroke_m, // 2 — room for the underline
+    },
+    barStatic: {
+      alignSelf: 'stretch',
+    },
+    content: {
+      borderBottomWidth: Stroke.stroke_m, // 1
+      borderBottomColor: c.bd_neutral_faded, // #525252
+    },
+    tab: {
+      minHeight: 46,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: Spacing.spacing_base, // 16
+      paddingTop: Spacing.spacing_sm, // 8
+      paddingBottom: Spacing.spacing_m_nudge, // 10
+      borderTopLeftRadius: Radius.radius_md, // 8
+      borderTopRightRadius: Radius.radius_md,
+    },
+    // Slides between tabs; left (translateX) + width are animated inline.
+    underline: {
+      position: 'absolute',
+      left: 0,
+      bottom: 0,
+      height: Stroke.stroke_m, // 2
+      borderRadius: Stroke.stroke_m,
+    },
+    label: {
+      fontFamily: Font.dmSansMedium,
+      fontSize: fontSize(14),
+      lineHeight: 20,
+      letterSpacing: 0.25,
+      color: c.fg_neutral_faded, // #a8a8a8
+      paddingHorizontal: Spacing.spacing_s_nudge, // 6
+      paddingVertical: Spacing.spacing_2xs, // 2
+    },
+    labelActive: {
+      color: c.fg_primary_faded, // #ece9fe
+    },
+  });

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

@@ -0,0 +1,21 @@
+import { StyleProp, ViewStyle } from 'react-native';
+
+export interface TabItem {
+  /** Unique key. */
+  key: string;
+  /** Visible label. */
+  label: string;
+}
+
+export interface TabsProps {
+  /** Tab items. */
+  items: TabItem[];
+  /** Currently active tab key. */
+  activeKey: string;
+  /** Fired with the next key when a tab is pressed. */
+  onChange: (key: string) => void;
+  /** Scroll horizontally when tabs overflow. @default true */
+  scrollable?: boolean;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+}

package/templates/mobile/expo/src/core/components/ui/tag-input/index.ts

@@ -0,0 +1,2 @@
+export { default as TagInput } from './tag-input';
+export * from './tag-input.type';

package/templates/mobile/expo/src/core/components/ui/tag-input/tag-input.tsx

@@ -0,0 +1,146 @@
+import { IconClose } 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 FieldFrame from '../field/field-frame';
+import { FIELD_BORDER_WIDTH, resolveFieldBorderColor } from '../field/field.shared';
+import { TagInputProps } from './tag-input.type';
+
+/**
+ * Design-system tag / badge input (Life-Master-Design "Badge" input field).
+ *
+ * Removable chips + a free-text input. Submitting the input adds a tag;
+ * backspace on an empty input removes the last tag. Shares the field frame
+ * + border-state logic with {@link TextField}.
+ *
+ * @example
+ * <TagInput label="People" tags={tags} onChangeTags={setTags} placeholder="Add…" />
+ */
+const TagInput = (props: TagInputProps) => {
+  const {
+    label,
+    message,
+    tags,
+    onChangeTags,
+    placeholder,
+    error = false,
+    disabled = false,
+    containerStyle,
+    inputStyle,
+  } = props;
+
+  const { colors } = useTheme();
+  const styles = useThemedStyles(makeStyles);
+
+  const [text, setText] = useState('');
+  const [focused, setFocused] = useState(false);
+  const borderColor = resolveFieldBorderColor(colors, { focused, error, disabled });
+
+  const addTag = () => {
+    const value = text.trim();
+    if (value) {
+      onChangeTags([...tags, value]);
+      setText('');
+    }
+  };
+
+  const removeTag = (index: number) => {
+    onChangeTags(tags.filter((_, i) => i !== index));
+  };
+
+  const handleKeyPress = (key: string) => {
+    if (key === 'Backspace' && text.length === 0 && tags.length > 0) {
+      removeTag(tags.length - 1);
+    }
+  };
+
+  return (
+    <FieldFrame label={label} message={message} error={error} disabled={disabled} style={containerStyle}>
+      <View
+        style={[
+          styles.box,
+          { borderColor, backgroundColor: disabled ? colors.bg_disable : colors.bg_input },
+        ]}
+      >
+        {tags.map((tag, i) => (
+          <View key={`${tag}-${i}`} style={styles.chip}>
+            <Text style={styles.chipText}>{tag}</Text>
+            <TouchableOpacity disabled={disabled} onPress={() => removeTag(i)} hitSlop={6}>
+              <IconClose
+                width={horizontalScale(12)}
+                height={horizontalScale(12)}
+                color={colors.fg_neutral_faded}
+              />
+            </TouchableOpacity>
+          </View>
+        ))}
+
+        <TextInput
+          value={text}
+          editable={!disabled}
+          placeholder={tags.length === 0 ? placeholder : undefined}
+          placeholderTextColor={colors.fg_neutral_faded}
+          onChangeText={setText}
+          onSubmitEditing={addTag}
+          onKeyPress={(e) => {
+            // Android may report a null/undefined key — guard before handling.
+            if (e.nativeEvent?.key) {
+              handleKeyPress(e.nativeEvent.key);
+            }
+          }}
+          onFocus={() => setFocused(true)}
+          onBlur={() => {
+            setFocused(false);
+            addTag();
+          }}
+          blurOnSubmit={false}
+          style={[styles.input, inputStyle]}
+        />
+      </View>
+    </FieldFrame>
+  );
+};
+
+export default TagInput;
+
+const makeStyles = (c: ThemeColors) =>
+  StyleSheet.create({
+    box: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      alignSelf: 'stretch',
+      gap: Spacing.spacing_xs, // 4
+      borderRadius: Radius.radius_lg, // 12
+      borderWidth: FIELD_BORDER_WIDTH, // 1
+      paddingHorizontal: Spacing.spacing_md, // 12
+      paddingVertical: Spacing.spacing_s_nudge, // 6
+    },
+    chip: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: Spacing.spacing_xs, // 4
+      paddingHorizontal: Spacing.spacing_sm, // 8
+      paddingVertical: Spacing.spacing_2xs, // 2
+      borderRadius: Radius.radius_sm, // 4
+      borderWidth: Stroke.stroke_xs, // 0.5
+      borderColor: c.bd_neutral_faded,
+      backgroundColor: c.bg_elevation_level_2_normal, // #292929
+    },
+    chipText: {
+      fontFamily: Font.dmSansMedium,
+      fontSize: fontSize(12),
+      lineHeight: 18,
+      color: c.fg_neutral_normal,
+    },
+    input: {
+      flexGrow: 1,
+      minWidth: horizontalScale(60),
+      paddingVertical: Spacing.spacing_xs, // 4
+      fontFamily: Font.dmSansRegular,
+      fontSize: fontSize(16),
+      lineHeight: 24,
+      color: c.fg_neutral_normal,
+    },
+  });

package/templates/mobile/expo/src/core/components/ui/tag-input/tag-input.type.ts

@@ -0,0 +1,22 @@
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+export interface TagInputProps {
+  /** Top label. */
+  label?: string;
+  /** Bottom helper / error message. */
+  message?: string;
+  /** Current list of tags (controlled). */
+  tags: string[];
+  /** Fired with the next list when a tag is added or removed. */
+  onChangeTags: (tags: string[]) => void;
+  /** Placeholder for the text input. */
+  placeholder?: string;
+  /** Error (validation) visual + red message. */
+  error?: boolean;
+  /** Disable input. */
+  disabled?: boolean;
+  /** Override the outer container style. */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** Override the text input style. */
+  inputStyle?: StyleProp<TextStyle>;
+};

package/templates/mobile/expo/src/core/components/ui/text-area/index.ts

@@ -0,0 +1,2 @@
+export { default as TextArea } from './text-area';
+export * from './text-area.type';