create-du-app 0.1.3 → 0.1.4

package/templates/mobile/rn/src/core/components/ui/otp-input/otp-input.tsx

@@ -0,0 +1,129 @@
+import { Font, fontSize, horizontalScale, Radius, Spacing, Stroke } from '@src/core/utils';
+import { ThemeColors, useThemedStyles } from '@src/core/theme';
+import React, { useRef, useState } from 'react';
+import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { OtpInputProps } from './otp-input.type';
+
+const CELL = horizontalScale(48);
+
+/**
+ * Design-system verification-code (OTP) input (Life-Master-Design).
+ *
+ * Renders `length` cells driven by a single hidden TextInput.
+ * States: default / focus (active cell) / error / disabled.
+ *
+ * @example
+ * <OtpInput length={6} value={code} onChange={setCode} onComplete={verify} />
+ */
+const OtpInput = (props: OtpInputProps) => {
+  const {
+    length = 6,
+    value = '',
+    onChange,
+    onComplete,
+    error = false,
+    disabled = false,
+    autoFocus = false,
+    style,
+  } = props;
+
+  const styles = useThemedStyles(makeStyles);
+  const inputRef = useRef<TextInput>(null);
+  const [focused, setFocused] = useState(false);
+
+  const handleChange = (text: string) => {
+    const next = text.replace(/[^0-9]/g, '').slice(0, length);
+    onChange?.(next);
+    if (next.length === length) {
+      onComplete?.(next);
+    }
+  };
+
+  const cells = Array.from({ length });
+  const activeIndex = value.length;
+
+  return (
+    <Pressable
+      disabled={disabled}
+      onPress={() => inputRef.current?.focus()}
+      style={[styles.row, style]}
+    >
+      {cells.map((_, i) => {
+        const char = value[i] ?? '';
+        const isActive = focused && i === activeIndex && !disabled;
+        return (
+          <View
+            key={i}
+            style={[
+              styles.cell,
+              isActive && styles.cellActive,
+              error && !disabled && styles.cellError,
+              disabled && styles.cellDisabled,
+            ]}
+          >
+            <Text style={[styles.char, disabled && styles.charDisabled]}>{char}</Text>
+          </View>
+        );
+      })}
+
+      <TextInput
+        ref={inputRef}
+        value={value}
+        editable={!disabled}
+        autoFocus={autoFocus}
+        keyboardType="number-pad"
+        maxLength={length}
+        onChangeText={handleChange}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        style={styles.hiddenInput}
+        caretHidden
+      />
+    </Pressable>
+  );
+};
+
+export default OtpInput;
+
+const makeStyles = (c: ThemeColors) =>
+  StyleSheet.create({
+    row: {
+      flexDirection: 'row',
+      gap: Spacing.spacing_s_nudge, // 6
+    },
+    cell: {
+      width: CELL,
+      height: CELL,
+      borderRadius: Radius.radius_md, // 8
+      borderWidth: Stroke.stroke_s, // 1
+      borderColor: c.bd_neutral_faded, // #525252
+      backgroundColor: c.bg_elevation_level_1_normal, // #141414
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    cellActive: {
+      borderColor: c.bd_primary_normal, // #6927da
+    },
+    cellError: {
+      borderColor: c.bd_danger_normal, // #e11d48
+    },
+    cellDisabled: {
+      backgroundColor: c.bg_disable,
+      borderColor: c.bd_neutral_faded,
+    },
+    char: {
+      fontFamily: Font.dmSansSemiBold,
+      fontSize: fontSize(24),
+      lineHeight: 32,
+      color: c.fg_neutral_normal,
+    },
+    charDisabled: {
+      color: c.fg_neutral_faded,
+    },
+    hiddenInput: {
+      position: 'absolute',
+      opacity: 0,
+      width: 1,
+      height: 1,
+    },
+  });

package/templates/mobile/rn/src/core/components/ui/otp-input/otp-input.type.ts

@@ -0,0 +1,20 @@
+import { StyleProp, ViewStyle } from 'react-native';
+
+export interface OtpInputProps {
+  /** Number of code cells. @default 6 */
+  length?: number;
+  /** Controlled code value. */
+  value?: string;
+  /** Fired on every change with the current code. */
+  onChange?: (code: string) => void;
+  /** Fired when all cells are filled. */
+  onComplete?: (code: string) => void;
+  /** Error (validation) visual — red cell borders. */
+  error?: boolean;
+  /** Disable input. */
+  disabled?: boolean;
+  /** Autofocus on mount. */
+  autoFocus?: boolean;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+}

package/templates/mobile/rn/src/core/components/ui/page-dots/index.ts

@@ -0,0 +1 @@
+export { default as PageDots } from './page-dots'

package/templates/mobile/rn/src/core/components/ui/page-dots/page-dots.tsx

@@ -0,0 +1,60 @@
+import { Colors, horizontalScale, Spacing } from '@src/core/utils'
+import React from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+
+const DOT_SIZE = horizontalScale(6)
+const DOT_ACTIVE_WIDTH = horizontalScale(20)
+
+interface PageDotsProps {
+    /** Total number of pages. */
+    count: number
+    /** Zero-based index of the active page. */
+    activeIndex: number
+    style?: StyleProp<ViewStyle>
+}
+
+/**
+ * Design-system page indicator (Life-Master-Design onboarding).
+ *
+ * Renders `count` dots; the active dot widens into a pill.
+ *
+ * @example
+ * <PageDots count={3} activeIndex={current} />
+ */
+const PageDots = ({ count, activeIndex, style }: PageDotsProps) => {
+    return (
+        <View style={[styles.row, style]}>
+            {Array.from({ length: count }).map((_, index) => {
+                const isActive = index === activeIndex
+                return (
+                    <View
+                        key={index}
+                        style={[styles.dot, isActive ? styles.dotActive : styles.dotInactive]}
+                    />
+                )
+            })}
+        </View>
+    )
+}
+
+export default PageDots
+
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: Spacing.spacing_xs,
+    },
+    dot: {
+        height: DOT_SIZE,
+        borderRadius: DOT_SIZE,
+    },
+    dotActive: {
+        width: DOT_ACTIVE_WIDTH,
+        backgroundColor: Colors.fg_neutral_normal,
+    },
+    dotInactive: {
+        width: DOT_SIZE,
+        backgroundColor: Colors.bd_neutral_faded,
+    },
+})

package/templates/mobile/rn/src/core/components/ui/radio/index.ts

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

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

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

package/templates/mobile/rn/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/rn/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/rn/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/rn/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/rn/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/rn/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
+    },
+  });