create-du-app 0.1.2 → 0.1.4

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

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

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

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

package/templates/mobile/expo/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/expo/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/expo/src/core/components/ui/otp-input/index.ts

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

package/templates/mobile/expo/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/expo/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/expo/src/core/components/ui/page-dots/index.ts

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

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

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