create-du-app 0.1.2 → 0.1.4

package/templates/mobile/rn/src/core/components/ui/header/header.tsx

@@ -0,0 +1,196 @@
+import { IconArrowLeft, IconArrowRight } from '@src/assets/svgs';
+import { ThemeColors, useTheme, useThemedStyles } from '@src/core/theme';
+import { Font, fontSize, horizontalScale, Spacing } from '@src/core/utils';
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { HeaderProps } from './header.type';
+
+/**
+ * Design-system Header (Life-Master-Design) — navigation/section header.
+ *
+ * Variants:
+ * - `welcome` — large title + subtitle (left), optional right slot (avatar)
+ * - `default` — centered title + subtitle, optional left/right slots (arrows)
+ * - `back` — back link (icon + label)
+ * - `step` — left + right slots spread apart (e.g. back arrow + "Skip")
+ *
+ * Use `left` / `right` slots to drop in IconButtons, avatars, etc.
+ *
+ * @example
+ * <Header variant="welcome" title="Bonjour, Anna" subtitle="…" right={<Avatar />} />
+ * <Header variant="default" title="L'Architecte de Soi" subtitle="Créer" left={<Back/>} right={<Next/>} />
+ * <Header variant="back" backLabel="Retour à l'inscription" onBackPress={goBack} />
+ */
+const Header = (props: HeaderProps) => {
+  const {
+    variant = 'default',
+    title,
+    subtitle,
+    left,
+    right,
+    onBackPress,
+    backLabel = 'Back',
+    style,
+  } = props;
+  const { colors } = useTheme();
+  const styles = useThemedStyles(makeStyles);
+
+  if (variant === 'welcome') {
+    return (
+      <View style={[styles.welcome, style]}>
+        <View style={styles.welcomeText}>
+          {title ? <Text style={styles.titleLg}>{title}</Text> : null}
+          {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : null}
+        </View>
+        {right}
+      </View>
+    );
+  }
+
+  if (variant === 'back') {
+    return (
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessibilityLabel={backLabel}
+        activeOpacity={0.7}
+        onPress={onBackPress}
+        style={[styles.backRow, style]}
+      >
+        <IconArrowRight
+          width={horizontalScale(16)}
+          height={horizontalScale(16)}
+          color={colors.fg_neutral_normal}
+          style={styles.flip}
+        />
+        <Text style={styles.backLabel}>{backLabel}</Text>
+      </TouchableOpacity>
+    );
+  }
+
+  if (variant === 'step') {
+    return (
+      <View style={[styles.rowBetween, style]}>
+        <View style={styles.side}>{left}</View>
+        <View style={styles.sideEnd}>{right}</View>
+      </View>
+    );
+  }
+
+  // default — centered title + subtitle with optional side slots. When no
+  // `left` slot is given but `onBackPress` is set, render a plain back arrow so
+  // detail screens get a back affordance without repeating the markup.
+  const autoBack = !left && !!onBackPress;
+  const leftSlot = left ?? (
+    autoBack ? (
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessibilityLabel={backLabel}
+        hitSlop={8}
+        onPress={onBackPress}
+        style={styles.back}
+      >
+        <IconArrowLeft
+          width={horizontalScale(24)}
+          height={horizontalScale(24)}
+          color={colors.fg_neutral_normal}
+        />
+      </TouchableOpacity>
+    ) : null
+  );
+
+  return (
+    <View style={[styles.rowBetween, style]}>
+      <View style={styles.side}>{leftSlot}</View>
+      <View style={styles.centerText}>
+        {title ? <Text style={styles.titleMd}>{title}</Text> : null}
+        {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : null}
+      </View>
+      <View style={styles.sideEnd}>
+        {/* When the back arrow is auto-rendered with no real right slot, keep a
+            same-width spacer so the title stays optically centered. */}
+        {right ?? (autoBack ? <View style={styles.backSpacer} /> : null)}
+      </View>
+    </View>
+  );
+};
+
+export default Header;
+
+const makeStyles = (c: ThemeColors) =>
+  StyleSheet.create({
+    welcome: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      alignSelf: 'stretch',
+      gap: Spacing.spacing_base, // 16
+    },
+    welcomeText: {
+      flex: 1,
+      gap: Spacing.spacing_2xs, // 2
+    },
+    rowBetween: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      alignSelf: 'stretch',
+      gap: Spacing.spacing_md, // 12
+    },
+    side: {
+      minWidth: horizontalScale(24),
+      alignItems: 'flex-start',
+    },
+    // Plain back affordance (no surface) auto-rendered in the `default` variant.
+    back: {
+      padding: Spacing.spacing_m_nudge, // 10
+      marginLeft: -Spacing.spacing_m_nudge, // align the icon to the edge
+    },
+    // Same width as the back arrow so the centered title stays balanced.
+    backSpacer: {
+      width: horizontalScale(24),
+      height: horizontalScale(24),
+    },
+    sideEnd: {
+      minWidth: horizontalScale(24),
+      alignItems: 'flex-end',
+    },
+    centerText: {
+      flex: 1,
+      alignItems: 'center',
+      gap: Spacing.spacing_2xs, // 2
+    },
+    titleLg: {
+      fontFamily: Font.dmSansSemiBold,
+      fontSize: fontSize(24),
+      lineHeight: 32,
+      letterSpacing: 0.5,
+      color: c.hFFFFFF,
+    },
+    titleMd: {
+      fontFamily: Font.dmSansSemiBold,
+      fontSize: fontSize(20),
+      lineHeight: 28,
+      color: c.hFFFFFF,
+      textAlign: 'center',
+    },
+    subtitle: {
+      fontFamily: Font.dmSansRegular,
+      fontSize: fontSize(12),
+      lineHeight: 18,
+      color: c.fg_neutral_faded,
+    },
+    backRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: Spacing.spacing_sm, // 8
+    },
+    flip: {
+      transform: [{ scaleX: -1 }],
+    },
+    backLabel: {
+      fontFamily: Font.dmSansMedium,
+      fontSize: fontSize(14),
+      lineHeight: 20,
+      color: c.fg_neutral_normal,
+    },
+  });

package/templates/mobile/rn/src/core/components/ui/header/header.type.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+
+export type HeaderVariant = 'welcome' | 'default' | 'back' | 'step';
+
+export interface HeaderProps {
+  /**
+   * Layout preset:
+   * - `welcome` — big title + subtitle on the left, optional right slot (e.g. avatar)
+   * - `default` — centered title + subtitle, optional left/right slots (e.g. arrows)
+   * - `back` — a back link row (icon + label)
+   * - `step` — left slot + right slot spread apart (e.g. back arrow + "Skip")
+   * @default 'default'
+   */
+  variant?: HeaderVariant;
+  /** Main title. */
+  title?: string;
+  /** Secondary text under the title. */
+  subtitle?: string;
+  /** Left slot (e.g. a back IconButton). */
+  left?: ReactNode;
+  /** Right slot (e.g. an avatar / skip button / forward arrow). */
+  right?: ReactNode;
+  /** Press handler for the `back` variant. */
+  onBackPress?: () => void;
+  /** Label for the `back` variant. @default 'Back' */
+  backLabel?: string;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+}

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

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

package/templates/mobile/rn/src/core/components/ui/icon-button/icon-button.style.ts

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+import { horizontalScale, Radius } from '@src/core/utils';
+import { IconButtonSize } from './icon-button.type';
+
+/** Square dimensions + icon size per size token (from Figma). */
+export const ICON_SIZE_TOKENS: Record<
+  IconButtonSize,
+  { box: number; iconSize: number }
+> = {
+  // `box` is a fixed square (matches Button height) — not horizontalScale'd, so
+  // the control keeps its 44/56 spec height across screen widths.
+  md: { box: 44, iconSize: horizontalScale(24) },
+  lg: { box: 56, iconSize: horizontalScale(30) },
+};
+
+export const styles = StyleSheet.create({
+  base: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: Radius.radius_lg, // 12
+    overflow: 'hidden',
+  },
+});

package/templates/mobile/rn/src/core/components/ui/icon-button/icon-button.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { ActivityIndicator, TouchableOpacity } from 'react-native';
+import { useTheme } from '@src/core/theme';
+import { resolveColors } from '../button';
+import { ICON_SIZE_TOKENS, styles } from './icon-button.style';
+import { IconButtonProps } from './icon-button.type';
+
+/**
+ * Design-system Icon Button (Life-Master-Design) — a square, icon-only button.
+ *
+ * Shares the exact color matrix as {@link Button} (variant × colorScheme),
+ * reusing its `resolveColors`. Sizes: `md` (44px) | `lg` (56px).
+ * Supports `disabled` and `loading` states.
+ *
+ * @example
+ * <IconButton Icon={IconHeart} accessibilityLabel="Like" onPress={onLike} />
+ * <IconButton Icon={IconClose} variant="outline" colorScheme="neutral" size="md" accessibilityLabel="Close" />
+ */
+const IconButton = (props: IconButtonProps) => {
+  const {
+    Icon,
+    variant = 'solid',
+    colorScheme = 'primary',
+    size = 'lg',
+    disabled = false,
+    loading = false,
+    accessibilityLabel,
+    style,
+    ...rest
+  } = props;
+
+  const { colors: themeColors } = useTheme();
+  const isInteractionBlocked = disabled || loading;
+  const colors = resolveColors(themeColors, variant, colorScheme, disabled);
+  const sizeTokens = ICON_SIZE_TOKENS[size];
+
+  return (
+    <TouchableOpacity
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{ disabled: isInteractionBlocked, busy: loading }}
+      activeOpacity={0.7}
+      disabled={isInteractionBlocked}
+      style={[
+        styles.base,
+        {
+          width: sizeTokens.box,
+          height: sizeTokens.box,
+          backgroundColor: colors.background,
+          borderColor: colors.border,
+          borderWidth: colors.borderWidth,
+        },
+        style,
+      ]}
+      {...rest}
+    >
+      {loading ? (
+        <ActivityIndicator size="small" color={colors.content} />
+      ) : (
+        <Icon width={sizeTokens.iconSize} height={sizeTokens.iconSize} color={colors.content} />
+      )}
+    </TouchableOpacity>
+  );
+};
+
+export default IconButton;

package/templates/mobile/rn/src/core/components/ui/icon-button/icon-button.type.ts

@@ -0,0 +1,25 @@
+import { StyleProp, TouchableOpacityProps, ViewStyle } from 'react-native';
+import { SvgProps } from 'react-native-svg';
+import { ButtonColorScheme, ButtonVariant } from '../button';
+
+/** Size token — `md` = 44px, `lg` = 56px square. */
+export type IconButtonSize = 'md' | 'lg';
+
+export type IconButtonProps = Omit<TouchableOpacityProps, 'children'> & {
+  /** Icon to render, centered (SVG component). */
+  Icon: React.FC<SvgProps>;
+  /** Visual style. @default 'solid' */
+  variant?: ButtonVariant;
+  /** Color scheme. @default 'primary' */
+  colorScheme?: ButtonColorScheme;
+  /** Size token. @default 'lg' */
+  size?: IconButtonSize;
+  /** Disable interaction + apply the disabled (faded) visual. */
+  disabled?: boolean;
+  /** Show a spinner instead of the icon; also blocks interaction. */
+  loading?: boolean;
+  /** Accessibility label (required — icon-only control needs a name). */
+  accessibilityLabel: string;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+};

package/templates/mobile/rn/src/core/components/ui/icon-button/index.ts

@@ -0,0 +1,2 @@
+export { default as IconButton } from './icon-button';
+export * from './icon-button.type';

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

@@ -0,0 +1,107 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+    FlatList,
+    StyleSheet,
+    View,
+    ViewToken,
+} from 'react-native';
+import FastImage from 'react-native-fast-image';
+
+import { AppImage } from '../app-image';
+import { Label } from '../label';
+import { useTheme } from '@src/core/theme';
+import { Font, fontSize, horizontalScale, Radius, verticalScale, WIDTH_SCREEN } from '@src/core/utils';
+import { ImageSliderProps } from './image-slider.type';
+
+const ImageSlider: React.FC<ImageSliderProps> = ({
+    images,
+    width = WIDTH_SCREEN,
+    style,
+    counterStyle,
+    showCounter = true,
+    preloadRest = true,
+}) => {
+    const { colors } = useTheme();
+    const data = images;
+    const [activeIndex, setActiveIndex] = useState(0);
+    const viewabilityConfig = useRef({ viewAreaCoveragePercentThreshold: 50 });
+    const onViewableItemsChanged = useRef(
+        ({ viewableItems }: { viewableItems: ViewToken[] }) => {
+            if (viewableItems.length > 0 && viewableItems[0].index != null) {
+                setActiveIndex(viewableItems[0].index);
+            }
+        },
+    );
+
+    useEffect(() => {
+        if (!preloadRest) return;
+        const rest = data.slice(1).filter(Boolean).map(uri => ({ uri }));
+        if (rest.length > 0) FastImage.preload(rest);
+    }, [data, preloadRest]);
+
+    if (data.length === 0) return null;
+
+    return (
+        <View style={[styles.container, style]}>
+            <FlatList
+                data={data}
+                horizontal
+                pagingEnabled
+                showsHorizontalScrollIndicator={false}
+                keyExtractor={(_, i) => String(i)}
+                viewabilityConfig={viewabilityConfig.current}
+                onViewableItemsChanged={onViewableItemsChanged.current}
+                renderItem={({ item }) => (
+                    <View style={[styles.slide, { width }]}>
+                        <AppImage
+                            source={{ uri: item }}
+                            style={styles.image}
+                            containerStyle={StyleSheet.absoluteFill}
+                            resizeMode="cover"
+                        />
+                    </View>
+                )}
+            />
+            {showCounter && (
+                <View style={[styles.counter, counterStyle]}>
+                    <Label
+                        value={`${activeIndex + 1}/${data.length}`}
+                        style={styles.counterText}
+                        fontFamily={Font.rethinkSansRegular}
+                        color={colors.hFFFFFF}
+                    />
+                </View>
+            )}
+        </View>
+    );
+};
+
+export default ImageSlider;
+
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+        height: '100%',
+    },
+    slide: {
+        height: '100%',
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+    },
+    counter: {
+        position: 'absolute',
+        top: verticalScale(12),
+        right: horizontalScale(12),
+        backgroundColor: 'rgba(0,0,0,0.3)',
+        borderWidth: 0.5,
+        borderColor: 'rgba(255,255,255,0.4)',
+        borderRadius: Radius.radius_full,
+        paddingHorizontal: horizontalScale(8),
+        paddingVertical: verticalScale(2),
+    },
+    counterText: {
+        fontSize: fontSize(12),
+    },
+});

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

@@ -0,0 +1,10 @@
+import { StyleProp, ViewStyle } from 'react-native';
+
+export interface ImageSliderProps {
+    images: string[];
+    width?: number;
+    style?: StyleProp<ViewStyle>;
+    counterStyle?: StyleProp<ViewStyle>;
+    showCounter?: boolean;
+    preloadRest?: boolean;
+}

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

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

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

@@ -0,0 +1,25 @@
+// Design-system UI components (Life-Master-Design).
+// See components.registry.json for the catalog used by the create-UI skill.
+export * from './button';
+export * from './icon-button';
+export * from './checkbox';
+export * from './radio';
+export * from './toggle';
+export * from './text-field';
+export * from './text-area';
+export * from './otp-input';
+export * from './tag-input';
+export * from './search-box';
+export * from './tabs';
+export * from './segmented-control';
+export * from './header';
+export * from './screen';
+export * from './label';
+export * from './modal';
+export * from './bottom-sheet';
+export * from './app-image';
+export * from './image-slider';
+export * from './collapsible-section';
+export * from './animated-list-item';
+export * from './skeleton';
+export * from './avatar-image';

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

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

package/templates/mobile/rn/src/core/components/ui/label/label.tsx

@@ -0,0 +1,36 @@
+import { Font, fontSize } from '@src/core/utils';
+import { ThemeColors, useTheme, useThemedStyles } from '@src/core/theme';
+import React from 'react';
+import { StyleSheet, Text } from 'react-native';
+import { LabelProps } from './label.type';
+
+const Label = (props: LabelProps) => {
+  const { colors } = useTheme();
+  const styles = useThemedStyles(makeStyles);
+  const {
+    value = '',
+    style = {},
+    fontFamily = Font.rethinkSansRegular,
+    numberOfLines = undefined,
+    children,
+    color = colors.fg_neutral_normal,
+    onPress,
+  } = props;
+
+  return (
+    <Text onPress={onPress} style={[styles.regular, { fontFamily, color }, style]} numberOfLines={numberOfLines}>
+      {value}
+      {children}
+    </Text>
+  );
+};
+
+export default Label;
+
+const makeStyles = (c: ThemeColors) =>
+  StyleSheet.create({
+    regular: {
+      fontSize: fontSize(14),
+      color: c.fg_neutral_normal,
+    },
+  });

package/templates/mobile/rn/src/core/components/ui/label/label.type.ts

@@ -0,0 +1,12 @@
+import { StyleProp, TextStyle } from 'react-native';
+import { ReactChildren } from '@src/core/constants';
+
+export interface LabelProps {
+  value?: string;
+  style?: StyleProp<TextStyle>;
+  numberOfLines?: number;
+  children?: ReactChildren;
+  fontFamily?: string;
+  color?: string;
+  onPress?: () => void;
+}

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

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

package/templates/mobile/rn/src/core/components/ui/modal/modal.tsx

@@ -0,0 +1,62 @@
+import React, { FC, memo } from 'react';
+import {
+    Modal as RNModal,
+    Pressable,
+    StyleSheet,
+} from 'react-native';
+import { horizontalScale, verticalScale } from '../../../utils';
+import { ThemeColors, useTheme, useThemedStyles } from '@src/core/theme';
+import { ModalAppProps as ModalProps } from './modal.type';
+
+const Modal: FC<ModalProps> = memo(props => {
+    const {
+        visible,
+        animationType = 'fade',
+        children,
+        styleContainer = {},
+        styleContent = {},
+        onHideModal = () => {},
+    } = props;
+
+    const { colors } = useTheme();
+    const styles = useThemedStyles(makeStyles);
+
+    return (
+        <RNModal
+            visible={visible}
+            animationType={animationType}
+            transparent
+            backdropColor={colors.rgba000000_50}
+            statusBarTranslucent
+            onRequestClose={onHideModal}
+        >
+            <Pressable
+                style={[styles.container, styleContainer]}
+                onPress={onHideModal}
+            >
+                <Pressable style={[styles.content, styleContent]}>
+                    {children}
+                </Pressable>
+            </Pressable>
+        </RNModal>
+    );
+});
+
+export default Modal;
+
+const makeStyles = (c: ThemeColors) =>
+    StyleSheet.create({
+        container: {
+            width: '100%',
+            height: '100%',
+            backgroundColor: c.rgba000000_50,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        content: {
+            width: horizontalScale(335),
+            minHeight: verticalScale(50),
+            backgroundColor: c.hFFFFFF,
+            borderRadius: horizontalScale(16),
+        },
+    });

package/templates/mobile/rn/src/core/components/ui/modal/modal.type.ts

@@ -0,0 +1,11 @@
+import { ModalProps, StyleProp, ViewStyle } from 'react-native';
+import { ReactChildren } from '@src/core/constants';
+
+export type ModalAppProps = {
+    visible: boolean;
+    animationType?: ModalProps['animationType'];
+    onHideModal?: () => void;
+    styleContainer?: StyleProp<ViewStyle>;
+    styleContent?: StyleProp<ViewStyle>;
+    children?: ReactChildren;
+};

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

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