create-du-app 0.1.2 → 0.1.4

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

@@ -0,0 +1,24 @@
+import { StyleProp, ViewStyle } from 'react-native';
+
+export type CheckboxState = 'unchecked' | 'checked' | 'indeterminate';
+
+export interface CheckboxProps {
+  /** Controlled checked value. Use `indeterminate` for the mixed/dash state. */
+  checked?: boolean;
+  /** Show the indeterminate (dash) state instead of a tick. Overrides `checked` visual. */
+  indeterminate?: boolean;
+  /** Fire with the next checked value when pressed. */
+  onChange?: (checked: boolean) => void;
+  /** Primary text next to the box. */
+  label?: string;
+  /** Secondary text under the label. */
+  caption?: string;
+  /** Error (validation) visual — red border. */
+  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/checkbox/index.ts

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

package/templates/mobile/rn/src/core/components/ui/collapsible-section/collapsible-section.tsx

@@ -0,0 +1,141 @@
+import React, { useState } from 'react';
+import {
+    Pressable,
+    StyleSheet,
+    View,
+    LayoutAnimation,
+    Platform,
+    UIManager,
+} from 'react-native';
+import {
+    Font,
+    fontSize,
+    horizontalScale,
+    verticalScale,
+    Radius,
+    Spacing,
+} from '@src/core/utils';
+import { ThemeColors, useTheme, useThemedStyles } from '@src/core/theme';
+import { IconMinus, IconPlus } from '@src/assets/svgs';
+import { Label } from '../label';
+import { CollapsibleSectionProps } from './collapsible-section.type';
+
+if (
+    Platform.OS === 'android' &&
+    UIManager.setLayoutAnimationEnabledExperimental
+) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
+    title,
+    options,
+    defaultCollapsed = true,
+}) => {
+    const styles = useThemedStyles(makeStyles);
+    const { colors } = useTheme();
+    const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+
+    const toggle = () => {
+        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+        setIsCollapsed(prev => !prev);
+    };
+
+    return (
+        <View style={styles.container}>
+            <Pressable
+                onPress={toggle}
+                style={({ pressed }) => [
+                    styles.header,
+                    pressed && styles.headerPressed,
+                ]}
+                hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+            >
+                <Label
+                    value={title}
+                    style={styles.title}
+                    fontFamily={Font.rethinkSansSemiBold}
+                />
+                <View style={styles.iconContainer}>
+                    {isCollapsed ? <IconPlus /> : <IconMinus />}
+                </View>
+            </Pressable>
+            {!isCollapsed && options.length > 0 && (
+                <View style={styles.content}>
+                    <View style={styles.divider} />
+                    <View style={styles.optionsList}>
+                        {options.map((option) => (
+                            <View key={`${option.name}-${option.value}`} style={styles.optionRow}>
+                                <Label
+                                    value={option.name}
+                                    style={styles.optionName}
+                                    color={colors.sub_text}
+                                />
+                                <Label
+                                    value={option.value}
+                                    style={styles.optionValue}
+                                    fontFamily={Font.rethinkSansRegular}
+                                />
+                            </View>
+                        ))}
+                    </View>
+                </View>
+            )}
+        </View>
+    );
+};
+
+export default CollapsibleSection;
+
+const makeStyles = (c: ThemeColors) =>
+    StyleSheet.create({
+        container: {
+            backgroundColor: 'rgba(243, 242, 255, 0.5)',
+            borderRadius: Radius.radius_xl,
+            padding: horizontalScale(Spacing.spacing_md),
+            overflow: 'hidden',
+        },
+        header: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingVertical: verticalScale(4),
+        },
+        headerPressed: {
+            opacity: 0.7,
+        },
+        title: {
+            fontSize: fontSize(14),
+            color: c.text_primary,
+            flex: 1,
+        },
+        content: {
+            gap: verticalScale(Spacing.spacing_sm),
+        },
+        divider: {
+            height: 1,
+            backgroundColor: c.bg_page_normal_faded,
+        },
+        optionsList: {
+            gap: verticalScale(Spacing.spacing_sm),
+        },
+        optionRow: {
+            gap: verticalScale(Spacing.spacing_md),
+        },
+        optionName: {
+            fontSize: fontSize(12),
+            fontFamily: Font.rethinkSansRegular,
+        },
+        optionValue: {
+            fontSize: fontSize(14),
+            color: c.text_primary,
+        },
+        iconContainer: {
+            height: horizontalScale(20),
+            width: horizontalScale(20),
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: c.bd_primary_faded,
+            borderRadius: Radius.radius_sm,
+        },
+    });

package/templates/mobile/rn/src/core/components/ui/collapsible-section/collapsible-section.type.ts

@@ -0,0 +1,10 @@
+export interface CollapsibleOption {
+    name: string;
+    value: string;
+}
+
+export type CollapsibleSectionProps = {
+    title: string;
+    options: CollapsibleOption[];
+    defaultCollapsed?: boolean;
+};

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

@@ -0,0 +1,2 @@
+export { default as CollapsibleSection } from './collapsible-section';
+export * from './collapsible-section.type';

package/templates/mobile/rn/src/core/components/ui/components.registry.json

@@ -0,0 +1,313 @@
+{
+  "$schema": "./components.registry.schema.json",
+  "description": "Catalog of design-system UI components (Life-Master-Design). The create-UI / create-component skill MUST check this registry first: if a component exists with status 'active', reuse it instead of creating a new one.",
+  "themePolicy": "All components are theme-aware (light/dark). NEVER import the static `Colors` from @src/core/utils in a component. Read colors via `useTheme().colors.*` (inline JSX/prop colors) or via a `makeStyles(c: ThemeColors)` factory + `useThemedStyles` hook (StyleSheet). Token keys are identical across light & dark; missing tokens go into both light.theme.ts and dark.theme.ts. See src/core/theme.",
+  "designFile": "https://www.figma.com/design/ZQACuYkbsoGBaOQkYamjVt/Life-Master-Design",
+  "basePath": "src/core/components/ui",
+  "components": [
+    {
+      "name": "Button",
+      "status": "active",
+      "path": "src/core/components/ui/button",
+      "import": "import { Button } from '@src/core';",
+      "figmaNodeId": "2067:27704",
+      "ticket": "LIFEMASTER-75",
+      "replaces": "ButtonPrimary (src/core/components/button/button-primary.tsx — deprecated)",
+      "props": {
+        "label": "string (required)",
+        "variant": "'solid' | 'outline' | 'faded' (default 'solid')",
+        "colorScheme": "'primary' | 'secondary' | 'neutral' (default 'primary')",
+        "size": "'md' (44px) | 'lg' (56px) (default 'lg'). Heights are fixed px (not screen-scaled).",
+        "disabled": "boolean",
+        "loading": "boolean",
+        "fullWidth": "boolean",
+        "IconLeft": "React.FC<SvgProps>",
+        "IconRight": "React.FC<SvgProps>",
+        "style": "StyleProp<ViewStyle>",
+        "labelStyle": "StyleProp<TextStyle>"
+      },
+      "states": ["default", "disabled", "loading"],
+      "showcase": "ComponentShowcase screen → 'Button' tab"
+    },
+    {
+      "name": "IconButton",
+      "status": "active",
+      "path": "src/core/components/ui/icon-button",
+      "import": "import { IconButton } from '@src/core';",
+      "figmaNodeId": "2067:30151",
+      "ticket": "LIFEMASTER-75",
+      "replaces": "ButtonIcon (src/core/components/button/button-icon.tsx — legacy, keep until migrated)",
+      "reuses": "Button.resolveColors (same variant × colorScheme color matrix)",
+      "props": {
+        "Icon": "React.FC<SvgProps> (required)",
+        "accessibilityLabel": "string (required)",
+        "variant": "'solid' | 'outline' | 'faded' (default 'solid')",
+        "colorScheme": "'primary' | 'secondary' | 'neutral' (default 'primary')",
+        "size": "'md' | 'lg' (default 'lg' — 44px / 56px square)",
+        "disabled": "boolean",
+        "loading": "boolean",
+        "style": "StyleProp<ViewStyle>"
+      },
+      "states": ["default", "disabled", "loading"],
+      "showcase": "ComponentShowcase screen → 'IconButton' tab"
+    },
+    {
+      "name": "Checkbox",
+      "status": "active",
+      "path": "src/core/components/ui/checkbox",
+      "import": "import { Checkbox } from '@src/core';",
+      "figmaNodeId": "2067:27907",
+      "ticket": "LIFEMASTER-75",
+      "replaces": "UICheckBox (src/core/components/element/ui-checkbox.tsx — legacy, keep until migrated)",
+      "props": {
+        "checked": "boolean",
+        "indeterminate": "boolean",
+        "onChange": "(checked: boolean) => void",
+        "label": "string",
+        "caption": "string",
+        "error": "boolean",
+        "disabled": "boolean",
+        "style": "StyleProp<ViewStyle>",
+        "accessibilityLabel": "string"
+      },
+      "states": ["unchecked", "checked", "indeterminate", "error", "disabled"],
+      "showcase": "ComponentShowcase screen → 'Checkbox' tab"
+    },
+    {
+      "name": "Radio",
+      "status": "active",
+      "path": "src/core/components/ui/radio",
+      "import": "import { Radio } from '@src/core';",
+      "figmaNodeId": "2067:27907",
+      "ticket": "LIFEMASTER-75",
+      "replaces": "UIRadioBoxV1/V2 (src/core/components/element/ui-radiobox-*.tsx — legacy, keep until migrated)",
+      "props": {
+        "selected": "boolean",
+        "onSelect": "() => void",
+        "label": "string",
+        "caption": "string",
+        "error": "boolean",
+        "disabled": "boolean",
+        "style": "StyleProp<ViewStyle>",
+        "accessibilityLabel": "string"
+      },
+      "states": ["unselected", "selected", "error", "disabled"],
+      "showcase": "ComponentShowcase screen → 'Radio' tab"
+    },
+    {
+      "name": "Toggle",
+      "status": "active",
+      "path": "src/core/components/ui/toggle",
+      "import": "import { Toggle } from '@src/core';",
+      "figmaNodeId": "2067:30809",
+      "ticket": "LIFEMASTER-75",
+      "replaces": "UISwitch (src/core/components/element/ui-switch.tsx — legacy, keep until migrated)",
+      "props": {
+        "value": "boolean",
+        "onValueChange": "(value: boolean) => void",
+        "size": "'sm' | 'lg' (default 'sm' — 48×24 / 60×32)",
+        "disabled": "boolean",
+        "style": "StyleProp<ViewStyle>",
+        "accessibilityLabel": "string"
+      },
+      "states": ["off", "on", "disabled"],
+      "showcase": "ComponentShowcase screen → 'Toggle' tab"
+    },
+    {
+      "name": "TextField",
+      "status": "active",
+      "path": "src/core/components/ui/text-field",
+      "import": "import { TextField } from '@src/core';",
+      "figmaNodeId": "2067:28944",
+      "ticket": "LIFEMASTER-75",
+      "replaces": "HFTextInput (src/core/components/forms/hf-text-input.tsx — legacy RHF-bound, keep until migrated)",
+      "props": {
+        "label": "string",
+        "message": "string",
+        "error": "boolean",
+        "disabled": "boolean",
+        "IconTrailing": "React.FC<SvgProps>",
+        "onTrailingPress": "() => void",
+        "...": "all TextInputProps (value, onChangeText, placeholder, secureTextEntry, keyboardType...)"
+      },
+      "states": ["default", "focus", "filled", "error", "disabled"],
+      "showcase": "ComponentShowcase screen → 'TextField' tab"
+    },
+    {
+      "name": "TextArea",
+      "status": "active",
+      "path": "src/core/components/ui/text-area",
+      "import": "import { TextArea } from '@src/core';",
+      "figmaNodeId": "2067:28944",
+      "ticket": "LIFEMASTER-75",
+      "reuses": "field/FieldFrame + resolveFieldBorderColor (shared with TextField)",
+      "props": {
+        "label": "string",
+        "message": "string",
+        "error": "boolean",
+        "disabled": "boolean",
+        "minHeight": "number (default 140)",
+        "maxHeight": "number (default 240 — scrolls beyond this instead of growing)",
+        "...": "all TextInputProps except multiline"
+      },
+      "states": ["default", "focus", "filled", "error", "disabled"],
+      "showcase": "ComponentShowcase screen → 'TextArea' tab"
+    },
+    {
+      "name": "OtpInput",
+      "status": "active",
+      "path": "src/core/components/ui/otp-input",
+      "import": "import { OtpInput } from '@src/core';",
+      "figmaNodeId": "2067:28944",
+      "ticket": "LIFEMASTER-75",
+      "replaces": "code-field (src/modules/auth/components/code-field.tsx — legacy, keep until migrated)",
+      "props": {
+        "length": "number (default 6)",
+        "value": "string",
+        "onChange": "(code: string) => void",
+        "onComplete": "(code: string) => void",
+        "error": "boolean",
+        "disabled": "boolean",
+        "autoFocus": "boolean"
+      },
+      "states": ["default", "focus", "error", "disabled"],
+      "showcase": "ComponentShowcase screen → 'OtpInput' tab"
+    },
+    {
+      "name": "TagInput",
+      "status": "active",
+      "path": "src/core/components/ui/tag-input",
+      "import": "import { TagInput } from '@src/core';",
+      "figmaNodeId": "2067:28944",
+      "ticket": "LIFEMASTER-75",
+      "reuses": "field/FieldFrame + resolveFieldBorderColor (shared with TextField)",
+      "props": {
+        "label": "string",
+        "message": "string",
+        "tags": "string[] (required)",
+        "onChangeTags": "(tags: string[]) => void (required)",
+        "placeholder": "string",
+        "error": "boolean",
+        "disabled": "boolean"
+      },
+      "states": ["default", "focus", "error", "disabled"],
+      "showcase": "ComponentShowcase screen → 'TagInput' tab"
+    },
+    {
+      "name": "SearchBox",
+      "status": "active",
+      "path": "src/core/components/ui/search-box",
+      "import": "import { SearchBox } from '@src/core';",
+      "figmaNodeId": "2067:29936",
+      "ticket": "LIFEMASTER-75",
+      "props": {
+        "value": "string",
+        "onChangeText": "(text: string) => void",
+        "onClear": "() => void",
+        "placeholder": "string (default 'Type to search')",
+        "disabled": "boolean",
+        "...": "all TextInputProps"
+      },
+      "states": ["default", "focus", "typing", "filled"],
+      "showcase": "ComponentShowcase screen → 'SearchBox' tab"
+    },
+    {
+      "name": "Tabs",
+      "status": "active",
+      "path": "src/core/components/ui/tabs",
+      "import": "import { Tabs } from '@src/core';",
+      "figmaNodeId": "2067:30514",
+      "ticket": "LIFEMASTER-75",
+      "props": {
+        "items": "TabItem[] ({ key, label }) (required)",
+        "activeKey": "string (required)",
+        "onChange": "(key: string) => void (required)",
+        "scrollable": "boolean (default true)"
+      },
+      "states": ["active", "inactive"],
+      "showcase": "ComponentShowcase screen → 'Tabs' tab"
+    },
+    {
+      "name": "SegmentedControl",
+      "status": "active",
+      "path": "src/core/components/ui/segmented-control",
+      "import": "import { SegmentedControl } from '@src/core';",
+      "figmaNodeId": "2067:30514",
+      "ticket": "LIFEMASTER-75",
+      "props": {
+        "items": "SegmentItem[] ({ key, label, leading? }) (required)",
+        "selectedKey": "string (required)",
+        "onChange": "(key: string) => void (required)"
+      },
+      "states": ["selected", "unselected"],
+      "showcase": "ComponentShowcase screen → 'Segmented' tab"
+    },
+    {
+      "name": "Header",
+      "status": "active",
+      "path": "src/core/components/ui/header",
+      "import": "import { Header } from '@src/core';",
+      "figmaNodeId": "2067:29754",
+      "ticket": "LIFEMASTER-75",
+      "props": {
+        "variant": "'welcome' | 'default' | 'back' | 'step' (default 'default')",
+        "title": "string",
+        "subtitle": "string",
+        "left": "ReactNode (e.g. back IconButton)",
+        "right": "ReactNode (e.g. avatar / skip / next)",
+        "onBackPress": "() => void (back variant)",
+        "backLabel": "string (back variant)"
+      },
+      "states": ["welcome", "default", "back", "step"],
+      "showcase": "ComponentShowcase screen → 'Header' tab"
+    },
+    {
+      "name": "AudioCard",
+      "status": "active",
+      "path": "src/core/components/ui/audio-card",
+      "import": "import { AudioCard } from '@src/core';",
+      "figmaNodeId": "2067:29606",
+      "ticket": "LIFEMASTER-75",
+      "note": "Feature card (list layout): cover + premium crown + title + category badge + meta (duration/tag) + favorite.",
+      "props": {
+        "cover": "ImageSourcePropType (required)",
+        "title": "string (required)",
+        "category": "string",
+        "duration": "string",
+        "tag": "string",
+        "premium": "boolean",
+        "favorite": "boolean",
+        "onToggleFavorite": "() => void",
+        "onPress": "() => void",
+        "IconDuration": "React.FC<SvgProps>",
+        "IconTag": "React.FC<SvgProps>"
+      },
+      "states": ["default", "premium", "favorited"],
+      "showcase": "ComponentShowcase screen → 'AudioCard' tab"
+    },
+    {
+      "name": "ScreenContainer",
+      "status": "active",
+      "path": "src/core/components/screen/screen-container.tsx",
+      "import": "import { ScreenContainer } from '@src/core';",
+      "figmaNodeId": "209:1291",
+      "ticket": "LIFEMASTER-75",
+      "note": "DS dark screen scaffold: aura gradient background + safe area + DS Header + scroll body + fixed bottom slot. Replaces the legacy imoni light container (prop API kept backwards-compatible).",
+      "props": {
+        "title": "string",
+        "subtitle": "string",
+        "headerVariant": "'welcome' | 'default' | 'back' | 'step' (default 'default')",
+        "onBackPress": "() => void",
+        "backLabel": "string",
+        "headerLeft": "ReactNode",
+        "headerRightNode": "ReactNode",
+        "showHeader": "boolean (default true)",
+        "isForm": "boolean — keyboard-aware scroll (default true)",
+        "renderBottom": "() => ReactNode — fixed bottom area",
+        "paddingBottom": "boolean (default true)"
+      },
+      "reuses": "ui/header Header, ui/screen ScreenAura (gradient + blur background)",
+      "showcase": "Reachable via navigation (Screen.OtpVerification sample) — not a showcase tab"
+    }
+  ]
+}

package/templates/mobile/rn/src/core/components/ui/field/field-frame.tsx

@@ -0,0 +1,62 @@
+import { Font, fontSize, Spacing } from '@src/core/utils';
+import { ThemeColors, useThemedStyles } from '@src/core/theme';
+import React, { ReactNode } from 'react';
+import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
+
+interface FieldFrameProps {
+  /** Top label (optional). */
+  label?: string;
+  /** Bottom helper / error message (optional). */
+  message?: string;
+  /** Show the message in the error color. */
+  error?: boolean;
+  /** Dim the label (disabled state). */
+  disabled?: boolean;
+  /** The input control (box) rendered between label and message. */
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Shared layout for text-field controls: Label → control → Message.
+ * Used by {@link TextField} and {@link TextArea} to avoid duplication.
+ */
+const FieldFrame = ({ label, message, error, disabled, children, style }: FieldFrameProps) => {
+  const styles = useThemedStyles(makeStyles);
+
+  return (
+    <View style={[styles.container, style]}>
+      {label ? <Text style={[styles.label, disabled && styles.labelDisabled]}>{label}</Text> : null}
+      {children}
+      {message ? <Text style={[styles.message, error && styles.messageError]}>{message}</Text> : null}
+    </View>
+  );
+};
+
+export default FieldFrame;
+
+const makeStyles = (c: ThemeColors) =>
+  StyleSheet.create({
+    container: {
+      gap: Spacing.spacing_xs, // 4
+      alignSelf: 'stretch',
+    },
+    label: {
+      fontFamily: Font.dmSansMedium,
+      fontSize: fontSize(14),
+      lineHeight: 20,
+      color: c.fg_neutral_normal,
+    },
+    labelDisabled: {
+      color: c.fg_neutral_faded,
+    },
+    message: {
+      fontFamily: Font.dmSansRegular,
+      fontSize: fontSize(12),
+      lineHeight: 18,
+      color: c.fg_neutral_faded,
+    },
+    messageError: {
+      color: c.bd_danger_normal,
+    },
+  });

package/templates/mobile/rn/src/core/components/ui/field/field.shared.ts

@@ -0,0 +1,31 @@
+import { Stroke } from '@src/core/utils';
+import { ThemeColors } from '@src/core/theme';
+
+/**
+ * Resolve the border color for a text-field-like control based on its state.
+ * Priority: disabled → error → focused → default.
+ *
+ * Takes the active theme `colors` so the border reads correctly in both light
+ * and dark mode — callers pass `useTheme().colors`.
+ */
+export const resolveFieldBorderColor = (
+  colors: ThemeColors,
+  opts: {
+    focused: boolean;
+    error: boolean;
+    disabled: boolean;
+  },
+): string => {
+  if (opts.disabled) {
+    return colors.bd_neutral_faded;
+  }
+  if (opts.error) {
+    return colors.bd_danger_normal;
+  }
+  if (opts.focused) {
+    return colors.bd_primary_normal;
+  }
+  return colors.bd_neutral_faded;
+};
+
+export const FIELD_BORDER_WIDTH = Stroke.stroke_s; // 1