create-du-app 0.1.2 → 0.1.4

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

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

@@ -0,0 +1,90 @@
+import { Font, fontSize, Radius, Spacing } from '@src/core/utils';
+import { ThemeColors, useTheme, useThemedStyles } from '@src/core/theme';
+import React, { useState } from 'react';
+import { StyleSheet, TextInput } from 'react-native';
+import FieldFrame from '../field/field-frame';
+import { FIELD_BORDER_WIDTH, resolveFieldBorderColor } from '../field/field.shared';
+import { TextAreaProps } from './text-area.type';
+
+/**
+ * Design-system multiline text area (Life-Master-Design "Textarea input field").
+ *
+ * Shares the field frame + border-state logic with {@link TextField}.
+ * States: default / focus / filled / error / disabled.
+ *
+ * @example
+ * <TextArea label="Description" placeholder="Text" value={v} onChangeText={setV} />
+ */
+const TextArea = (props: TextAreaProps) => {
+  const {
+    label,
+    message,
+    error = false,
+    disabled = false,
+    minHeight = 140,
+    maxHeight = 240,
+    containerStyle,
+    inputStyle,
+    onFocus,
+    onBlur,
+    ...inputProps
+  } = props;
+
+  const { colors } = useTheme();
+  const styles = useThemedStyles(makeStyles);
+
+  const [focused, setFocused] = useState(false);
+  const borderColor = resolveFieldBorderColor(colors, { focused, error, disabled });
+
+  return (
+    <FieldFrame label={label} message={message} error={error} disabled={disabled} style={containerStyle}>
+      <TextInput
+        {...inputProps}
+        multiline
+        editable={!disabled}
+        textAlignVertical="top"
+        placeholderTextColor={colors.fg_neutral_faded}
+        onFocus={(e) => {
+          setFocused(true);
+          onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          setFocused(false);
+          onBlur?.(e);
+        }}
+        scrollEnabled
+        style={[
+          styles.box,
+          {
+            minHeight,
+            maxHeight,
+            borderColor,
+            backgroundColor: disabled ? colors.bg_disable : colors.bg_input,
+          },
+          disabled && styles.inputDisabled,
+          inputStyle,
+        ]}
+      />
+    </FieldFrame>
+  );
+};
+
+export default TextArea;
+
+const makeStyles = (c: ThemeColors) =>
+  StyleSheet.create({
+    box: {
+      alignSelf: 'stretch',
+      borderRadius: Radius.radius_lg, // 12
+      borderWidth: FIELD_BORDER_WIDTH, // 1
+      paddingHorizontal: Spacing.spacing_md, // 12
+      paddingVertical: Spacing.spacing_m_nudge, // 10
+      fontFamily: Font.dmSansRegular,
+      fontSize: fontSize(16),
+      lineHeight: 24,
+      color: c.fg_neutral_normal,
+    },
+    inputDisabled: {
+      color: c.fg_neutral_faded,
+    },
+  });

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

@@ -0,0 +1,20 @@
+import { StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
+
+export type TextAreaProps = Omit<TextInputProps, 'style' | 'editable' | 'multiline'> & {
+  /** Top label / description. */
+  label?: string;
+  /** Bottom helper / error message. */
+  message?: string;
+  /** Error (validation) visual + red message. */
+  error?: boolean;
+  /** Disable input. */
+  disabled?: boolean;
+  /** Minimum height of the box. @default 140 */
+  minHeight?: number;
+  /** Maximum height; beyond this the field scrolls instead of growing. @default 240 */
+  maxHeight?: number;
+  /** 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-field/index.ts

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