create-du-app 0.1.2 → 0.1.4

package/templates/mobile/expo/src/core/api/example.api.ts

@@ -0,0 +1,53 @@
+/**
+ * EXAMPLE API module — template for new feature APIs (Life-Master).
+ *
+ * The old imoni endpoint files were removed; this is the only one kept as a
+ * reference for the pattern. Copy it per feature (e.g. `playlist.api.ts`),
+ * wire real endpoints in `@repo/shared` ApiEndpoints, then delete this file
+ * once at least one real API module exists.
+ *
+ * Pattern:
+ *   - HTTP goes through the shared `ApiService` (auth headers, device id,
+ *     session-expired handling are built in).
+ *   - Expose React Query hooks (`useQuery` / `useMutation`), not raw calls.
+ *   - Type the response with the shared models, never `any`.
+ */
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { ApiService } from '@src/core/services';
+import { ApiEndpoints } from './endpoints';
+
+// TODO(api): replace with the real model imported from `@repo/shared`.
+export interface ExampleItem {
+  id: string;
+  name: string;
+}
+
+// TODO(api): replace with the real request body shape.
+export interface CreateExampleBody {
+  name: string;
+}
+
+/** GET list — read query. */
+export const useExampleList = (enabled = true) =>
+  useQuery({
+    queryKey: ['example', 'list'],
+    queryFn: async () => {
+      // TODO(api): point at the real endpoint, e.g. ApiEndpoints.EXAMPLE.LIST
+      const res = await ApiService.get<ExampleItem[]>(ApiEndpoints.EXAMPLE?.LIST ?? '/example');
+      return res.data;
+    },
+    enabled,
+  });
+
+/** POST create — write mutation. */
+export const useCreateExample = () =>
+  useMutation({
+    mutationFn: async (body: CreateExampleBody) => {
+      // TODO(api): point at the real endpoint, e.g. ApiEndpoints.EXAMPLE.CREATE
+      const res = await ApiService.post<ExampleItem>(
+        ApiEndpoints.EXAMPLE?.CREATE ?? '/example',
+        body,
+      );
+      return res.data;
+    },
+  });

package/templates/mobile/expo/src/core/api/index.ts

@@ -0,0 +1,4 @@
+export * from './endpoints';
+// Old imoni endpoint modules were removed. `example.api` is kept as the
+// reference pattern for new feature APIs — see its header.
+export * from './example.api';

package/templates/mobile/expo/src/core/components/common/index.ts

@@ -0,0 +1 @@
+export * from './list-empty';

package/templates/mobile/expo/src/core/components/common/list-empty/index.ts

@@ -0,0 +1,2 @@
+export { default as ListEmpty } from './list-empty';
+export * from './list-empty.type';

package/templates/mobile/expo/src/core/components/common/list-empty/list-empty.tsx

@@ -0,0 +1,30 @@
+import React, { useMemo } from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+import { verticalScale } from '@src/core/utils';
+import { ImgEmptyList } from '@src/assets/Images';
+import { ListEmptyProps } from './list-empty.type';
+
+const ListEmpty = ({ image }: ListEmptyProps) => {
+    const imageSource = useMemo(() => {
+        if (image) {
+            return image;
+        }
+        return ImgEmptyList;
+    }, [image]);
+    return (
+        <View style={styles.container}>
+            <Image source={imageSource} />
+        </View>
+    );
+};
+
+export default ListEmpty;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingTop: verticalScale(33),
+    },
+});

package/templates/mobile/expo/src/core/components/common/list-empty/list-empty.type.ts

@@ -0,0 +1,5 @@
+import { ImageSourcePropType } from 'react-native';
+
+export type ListEmptyProps = {
+    image?: ImageSourcePropType;
+};

package/templates/mobile/expo/src/core/components/forms/hf-date-time.tsx

@@ -0,0 +1,301 @@
+import { ErrorMessage } from '@hookform/error-message';
+import React, { FC, useMemo, useState } from 'react';
+import { useController, useFormContext, useFormState } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import {
+    StyleProp,
+    StyleSheet,
+    TextInput,
+    TouchableOpacity,
+    View,
+    ViewProps,
+    ViewStyle,
+} from 'react-native';
+import DatePicker from 'react-native-date-picker';
+import {
+    Font,
+    fontSize,
+    formatDateFrLong,
+    horizontalScale,
+    verticalScale,
+} from '../../utils';
+import { ThemeColors, useThemedStyles } from '@src/core/theme';
+import { Label } from '../ui';
+import { SvgProps } from 'react-native-svg';
+import { IconCalendar } from '@src/assets/svgs';
+import { i18n } from '@src/app/config/translation';
+
+type Props = ViewProps & {
+    containerStyle?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    name: string;
+    label?: string;
+    LeftIcon?: FC<SvgProps>;
+    valueCode?: string;
+    secureTextEntry?: boolean;
+    RightIcon?: FC<SvgProps>;
+    isRequired?: boolean;
+    placeholder?: string;
+    note?: string;
+    yearOnly?: boolean;
+};
+
+const parseDate = (value?: string | Date, yearOnly?: boolean) => {
+    if (value instanceof Date) {
+        return Number.isNaN(value.getTime()) ? new Date() : value;
+    }
+    if (!value) {
+        return new Date();
+    }
+
+    const parseSafeDate = (year: number, month: number, day: number) => {
+        const date = new Date(year, month - 1, day);
+
+        if (
+            Number.isNaN(date.getTime()) ||
+            date.getFullYear() !== year ||
+            date.getMonth() !== month - 1 ||
+            date.getDate() !== day
+        ) {
+            return new Date();
+        }
+
+        return date;
+    };
+
+    if (yearOnly) {
+        const year = parseInt(value, 10);
+        if (!Number.isNaN(year)) {
+            return new Date(year, 0, 1);
+        }
+        return new Date();
+    }
+
+    const normalizedValue = String(value).trim();
+    const isoMatch = normalizedValue.match(/^(\d{4})[-/](\d{1,2})[-/](\d{1,2})$/);
+    if (isoMatch) {
+        const [, year, month, day] = isoMatch;
+        return parseSafeDate(parseInt(year, 10), parseInt(month, 10), parseInt(day, 10));
+    }
+
+    const dmyMatch = normalizedValue.match(/^(\d{1,2})[-/](\d{1,2})[-/](\d{4})$/);
+    if (dmyMatch) {
+        const [, day, month, year] = dmyMatch;
+        return parseSafeDate(parseInt(year, 10), parseInt(month, 10), parseInt(day, 10));
+    }
+
+    const fallbackDate = new Date(normalizedValue);
+    return Number.isNaN(fallbackDate.getTime()) ? new Date() : fallbackDate;
+};
+
+const formatDate = (date: Date, yearOnly?: boolean) => {
+    if (yearOnly) {
+        return `${date.getFullYear()}`;
+    }
+    const dd = `0${date.getDate()}`.slice(-2);
+    const mm = `0${date.getMonth() + 1}`.slice(-2);
+    const yyyy = date.getFullYear();
+    return `${yyyy}-${mm}-${dd}`;
+};
+
+const HFDateTime = (props: Props) => {
+    const { t } = useTranslation();
+    const styles = useThemedStyles(makeStyles);
+    const {
+        containerStyle = {},
+        contentStyle = {},
+        name,
+        label = null,
+        valueCode = null,
+        // secureTextEntry is not used but kept for API parity with other fields
+        // secureTextEntry = false,
+        LeftIcon = null,
+        RightIcon = null,
+        isRequired = false,
+        note = null,
+        placeholder = '',
+        yearOnly = false,
+    } = props;
+    const formContext = useFormContext();
+    const { field } = useController({
+        name,
+        control: formContext.control,
+        defaultValue: '',
+    });
+    const { errors } = useFormState({
+        control: formContext.control,
+    });
+
+    const [open, setOpen] = useState(false);
+    const [date, setDate] = useState<Date>(parseDate(field.value, yearOnly));
+    const displayValue = useMemo(() => {
+        if (field.value instanceof Date) {
+            return formatDate(field.value, yearOnly);
+        }
+        if (field.value) {
+            if (yearOnly) {
+                return field.value;
+            }
+            // Format string date values using French long format
+            const formatted = formatDateFrLong(field.value);
+            return formatted !== '--' ? formatted : placeholder;
+        }
+        return placeholder;
+    }, [field.value, yearOnly, placeholder]);
+
+    const handleOpen = () => {
+        setDate(parseDate(field.value, yearOnly));
+        setOpen(true);
+    };
+
+    const handleConfirm = (selectedDate: Date) => {
+        setOpen(false);
+        setDate(selectedDate);
+        const formatted = formatDate(selectedDate, yearOnly);
+        field.onChange(formatted);
+    };
+
+    return (
+        <>
+            <View style={[styles.container, containerStyle]}>
+                {label && (
+                    <Label style={styles.label} value={label}>
+                        <Label
+                            style={styles.labelRequired}
+                            value={`${isRequired ? ' *' : ''}`}
+                        />
+                    </Label>
+                )}
+                {yearOnly ? (
+                    <View style={[styles.content, contentStyle]}>
+                        {LeftIcon && <LeftIcon />}
+                        <TextInput
+                            value={typeof field.value === 'string' ? field.value : ''}
+                            onChangeText={text => {
+                                const digits = text.replace(/\D/g, '').slice(0, 4)
+                                // Reject future years: clamp 4-digit input to current year.
+                                if (digits.length === 4) {
+                                    const currentYear = new Date().getFullYear()
+                                    const year = parseInt(digits, 10)
+                                    field.onChange(year > currentYear ? String(currentYear) : digits)
+                                    return
+                                }
+                                field.onChange(digits)
+                            }}
+                            placeholder={placeholder}
+                            keyboardType="number-pad"
+                            maxLength={4}
+                            style={styles.yearInput}
+                        />
+                        {RightIcon && <RightIcon />}
+                    </View>
+                ) : (
+                    <TouchableOpacity
+                        activeOpacity={0.7}
+                        onPress={handleOpen}
+                        style={[styles.content, contentStyle]}
+                    >
+                        {valueCode && (
+                            <Label
+                                style={styles.textValueCode}
+                                value={valueCode}
+                            />
+                        )}
+                        {LeftIcon && <LeftIcon />}
+                        <Label
+                            style={field.value ? styles.textValueCode : styles.placeholder}
+                            value={displayValue}
+                        />
+                        <View style={{ width: horizontalScale(16) }} />
+                        <IconCalendar />
+                        {RightIcon && <RightIcon />}
+                    </TouchableOpacity>
+                )}
+                {note && <Label style={styles.note} value={note} />}
+                <ErrorMessage
+                    errors={errors}
+                    name={name}
+                    render={({ message }) => {
+                        return <Label style={styles.error} value={message} />;
+                    }}
+                />
+            </View>
+            <DatePicker
+                modal
+                mode="date"
+                open={open}
+                date={date}
+                maximumDate={new Date()}
+                locale={i18n.language}
+                title={t('common.selectDate')}
+                confirmText={t('common.confirm')}
+                cancelText={t('common.cancel')}
+                onConfirm={handleConfirm}
+                onCancel={() => setOpen(false)}
+            />
+        </>
+    );
+};
+
+export default HFDateTime;
+
+const makeStyles = (c: ThemeColors) =>
+    StyleSheet.create({
+        container: {
+            gap: verticalScale(8),
+        },
+        label: {
+            color: c.text_secondary,
+            fontSize: fontSize(14),
+            fontFamily: Font.rethinkSansBold,
+        },
+        labelRequired: {
+            color: c.hFF2B00,
+            fontSize: fontSize(14),
+            fontFamily: Font.rethinkSansBold,
+            marginLeft: 2,
+        },
+        content: {
+            alignItems: 'center',
+            borderRadius: horizontalScale(100),
+            backgroundColor: c.hFFFFFF,
+            height: verticalScale(44),
+            paddingHorizontal: horizontalScale(15),
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            borderWidth: 1,
+            borderColor: c.fg_primary_on_background,
+        },
+        error: {
+            fontSize: fontSize(12),
+            lineHeight: fontSize(14),
+            color: 'red',
+            marginTop: verticalScale(4),
+        },
+        textValueCode: {
+            flex: 1,
+            fontSize: fontSize(14),
+            color: c.text_primary,
+            fontFamily: Font.rethinkSansRegular,
+            padding: 0,
+        },
+        placeholder: {
+            color: c.h848D9A,
+        },
+        yearInput: {
+            flex: 1,
+            fontSize: fontSize(14),
+            color: c.text_primary,
+            fontFamily: Font.rethinkSansRegular,
+            padding: 0,
+        },
+        iconLeft: {
+            height: horizontalScale(20),
+            marginRight: horizontalScale(14),
+        },
+        note: {
+            fontSize: fontSize(14),
+            color: c.fg_neutral_normal,
+            fontFamily: Font.rethinkSansRegular,
+        },
+    });

package/templates/mobile/expo/src/core/components/forms/hf-password-input.tsx

@@ -0,0 +1,153 @@
+import { ErrorMessage } from '@hookform/error-message';
+import { IconEye, IconEyeHide } from '@src/assets/svgs';
+import React, { useCallback, useState } from 'react';
+import { useController, useFormContext, useFormState } from 'react-hook-form';
+import {
+    ImageSourcePropType,
+    StyleProp,
+    StyleSheet,
+    TextInput,
+    TextInputProps,
+    TouchableOpacity,
+    View,
+    ViewStyle,
+} from 'react-native';
+import { ThemeColors, useTheme, useThemedStyles } from '@src/core/theme';
+import { Font, fontSize, horizontalScale, verticalScale } from '../../utils';
+import { Label } from '../ui';
+type Props = TextInputProps & {
+    containerStyle?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    name: string;
+    label?: string;
+    leftIcon?: ImageSourcePropType;
+    isRequired?: boolean;
+    note?: string;
+};
+
+const HFPasswordInput = (props: Props) => {
+    const {
+        containerStyle = {},
+        contentStyle = {},
+        leftIcon = null,
+        style,
+        name,
+        label = null,
+        isRequired = false,
+        note = null,
+        ...rest
+    } = props;
+    const { colors } = useTheme();
+    const styles = useThemedStyles(makeStyles);
+    const formContext = useFormContext();
+    const { field } = useController({
+        name,
+        control: formContext.control,
+        defaultValue: '',
+    });
+
+    const { errors } = useFormState({
+        control: formContext.control,
+    });
+
+    const [isSecure, setSecure] = useState(true);
+    const handlePress = useCallback(() => {
+        setSecure(!isSecure);
+    }, [isSecure]);
+
+    return (
+        <View style={[styles.container, containerStyle]}>
+            {label && (
+                <Label style={styles.label} value={label}>
+                    <Label
+                        style={styles.labelRequired}
+                        value={`${isRequired ? ' *' : ''}`}
+                    />
+                </Label>
+            )}
+            <View style={[styles.content, contentStyle]}>
+                <TextInput
+                    {...rest}
+                    style={[styles.input, style]}
+                    value={field.value}
+                    onChangeText={field.onChange}
+                    placeholderTextColor={colors.h848D9A}
+                    secureTextEntry={isSecure}
+                />
+                <TouchableOpacity style={styles.action} onPress={handlePress}>
+                    {!isSecure ? <IconEyeHide /> : <IconEye />}
+                </TouchableOpacity>
+            </View>
+            {note && <Label style={styles.note} value={note} />}
+            <ErrorMessage
+                errors={errors}
+                name={name}
+                render={({ message }) => {
+                    return <Label style={styles.error} value={message} />;
+                }}
+            />
+        </View>
+    );
+};
+
+export default HFPasswordInput;
+
+const makeStyles = (c: ThemeColors) =>
+    StyleSheet.create({
+        container: {
+            gap: verticalScale(7),
+        },
+        label: {
+            color: c.text_secondary,
+            fontSize: fontSize(14),
+            fontFamily: Font.rethinkSansBold,
+        },
+        labelRequired: {
+            color: c.hFF2B00,
+            fontSize: fontSize(17),
+            fontFamily: Font.rethinkSansMedium,
+        },
+        content: {
+            alignItems: 'center',
+            borderRadius: horizontalScale(100),
+            backgroundColor: c.hFFFFFF,
+            height: verticalScale(44),
+            paddingHorizontal: horizontalScale(15),
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            borderWidth: 1,
+            borderColor: c.fg_primary_on_background,
+        },
+        input: {
+            flex: 1,
+            fontSize: fontSize(14),
+            color: c.text_primary,
+            fontFamily: Font.rethinkSansRegular,
+            padding: 0,
+        },
+        error: {
+            fontSize: fontSize(12),
+            lineHeight: fontSize(14),
+            color: 'red',
+            marginTop: verticalScale(4),
+        },
+        textValueCode: {
+            fontSize: fontSize(16),
+            color: c.h3C3C3B,
+            marginRight: horizontalScale(5),
+        },
+        iconLeft: {
+            height: horizontalScale(20),
+            marginRight: horizontalScale(14),
+        },
+        action: {
+            height: '100%',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        note: {
+            fontSize: fontSize(14),
+            color: c.fg_neutral_normal,
+            fontFamily: Font.rethinkSansRegular,
+        },
+    });

package/templates/mobile/expo/src/core/components/forms/hf-text-input.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+import { TextField, TextArea } from '../ui';
+import { TextFieldProps } from '../ui/text-field/text-field.type';
+import { TextAreaProps } from '../ui/text-area/text-area.type';
+
+type SharedProps = {
+    /** Form field name (path in the react-hook-form schema). */
+    name: string;
+    /** Render the multiline {@link TextArea} variant instead of {@link TextField}. */
+    multiline?: boolean;
+    /**
+     * Helper text shown under the field while it's valid (e.g. a password-rule
+     * hint). The validation error replaces it whenever the field is invalid.
+     */
+    helperText?: string;
+};
+
+type Props = SharedProps &
+    Omit<TextFieldProps & TextAreaProps, 'value' | 'onChangeText' | 'onBlur' | 'error' | 'message'>;
+
+/**
+ * react-hook-form binding over the design-system {@link TextField} / {@link TextArea}.
+ *
+ * Reads `control` from the surrounding `<FormProvider>`, so a field is just:
+ *
+ * @example
+ * <HFTextInput name="firstName" label={t('...')} autoCapitalize="words" />
+ * <HFTextInput name="preferences" label={t('...')} multiline />
+ * <HFTextInput name="password" secureTextEntry helperText={t('...')} />
+ *
+ * Label, error border, and the helper/error message all come from the DS field
+ * (theme-aware, light/dark) — this wrapper only wires value/onChange/error from
+ * the form. Validation messages surface from `fieldState.error.message`; while
+ * the field is valid the optional `helperText` shows instead.
+ */
+const HFTextInput = ({ name, multiline = false, helperText, ...rest }: Props) => {
+    const { control } = useFormContext();
+    const {
+        field: { value, onChange, onBlur },
+        fieldState: { error },
+    } = useController({ name, control, defaultValue: '' });
+
+    const shared = {
+        value,
+        onChangeText: onChange,
+        onBlur,
+        error: !!error,
+        message: error?.message ?? helperText,
+    };
+
+    if (multiline) {
+        return <TextArea {...(rest as TextAreaProps)} {...shared} />;
+    }
+
+    return <TextField {...(rest as TextFieldProps)} {...shared} />;
+};
+
+export default HFTextInput;