create-du-app 0.1.3 → 0.1.5

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

@@ -0,0 +1,146 @@
+import { StyleSheet } from 'react-native';
+import { Font, horizontalScale, Radius, Stroke } from '@src/core/utils';
+import { ThemeColors } from '@src/core/theme';
+import { ButtonColorScheme, ButtonColorTokens, ButtonSize, ButtonVariant } from './button.type';
+
+/** Size-specific dimensions, paddings, gap and typography (from Figma). */
+export const SIZE_TOKENS: Record<
+  ButtonSize,
+  {
+    height: number;
+    paddingHorizontal: number;
+    gap: number;
+    fontSize: number;
+    lineHeight: number;
+    iconSize: number;
+  }
+> = {
+  md: {
+    // Height is a FIXED vertical dimension from Figma (line-height 24 + 10px
+    // vertical padding = 44). It must NOT be horizontalScale'd — that scales a
+    // vertical value by screen width and drifts off-spec on non-base widths.
+    height: 44,
+    paddingHorizontal: horizontalScale(12),
+    gap: horizontalScale(4),
+    fontSize: 16,
+    lineHeight: 24,
+    iconSize: horizontalScale(20),
+  },
+  lg: {
+    height: 56,
+    paddingHorizontal: horizontalScale(16),
+    gap: horizontalScale(8),
+    fontSize: 20,
+    lineHeight: 28,
+    iconSize: horizontalScale(24),
+  },
+};
+
+/** Disabled appearance — shared across every variant/scheme (Figma "Faded" neutral). */
+const disabledTokens = (c: ThemeColors): ButtonColorTokens => ({
+  background: c.bg_elevation_level_2_normal,
+  border: c.bd_neutral_faded,
+  borderWidth: Stroke.stroke_xs, // 0.5
+  content: c.fg_neutral_faded,
+});
+
+const solid = (c: ThemeColors): Record<ButtonColorScheme, ButtonColorTokens> => ({
+  primary: {
+    background: c.bg_primary_normal,
+    border: c.bg_primary_normal,
+    borderWidth: Stroke.stroke_none,
+    content: c.fg_primary_on_background,
+  },
+  secondary: {
+    background: c.bg_secondary_normal,
+    border: c.bg_secondary_normal,
+    borderWidth: Stroke.stroke_none,
+    content: c.fg_secondary_on_background,
+  },
+  neutral: {
+    background: c.bg_elevation_reverse,
+    border: c.bg_elevation_reverse,
+    borderWidth: Stroke.stroke_none,
+    content: c.fg_neutral_reverse,
+  },
+});
+
+const outline = (c: ThemeColors): Record<ButtonColorScheme, ButtonColorTokens> => ({
+  primary: {
+    background: c.bg_elevation_level_1_normal,
+    border: c.bd_primary_normal,
+    borderWidth: Stroke.stroke_s, // 1
+    content: c.fg_primary_normal,
+  },
+  secondary: {
+    background: c.bg_elevation_level_1_normal,
+    border: c.bd_secondary_normal,
+    borderWidth: Stroke.stroke_s,
+    content: c.fg_secondary_normal,
+  },
+  neutral: {
+    background: c.bg_elevation_level_1_normal,
+    border: c.bd_neutral_normal,
+    borderWidth: Stroke.stroke_s,
+    content: c.fg_neutral_normal,
+  },
+});
+
+const faded = (c: ThemeColors): Record<ButtonColorScheme, ButtonColorTokens> => ({
+  primary: {
+    background: c.bg_primary_faded,
+    border: c.bd_primary_faded,
+    borderWidth: Stroke.stroke_xs, // 0.5
+    content: c.fg_primary_faded,
+  },
+  secondary: {
+    background: c.bg_secondary_normal,
+    border: c.bg_secondary_normal,
+    borderWidth: Stroke.stroke_none,
+    content: c.fg_secondary_on_background,
+  },
+  neutral: {
+    background: c.bg_elevation_level_2_normal,
+    border: c.bd_neutral_faded,
+    borderWidth: Stroke.stroke_xs,
+    content: c.fg_neutral_faded,
+  },
+});
+
+/**
+ * Resolve the final color tokens for a button against the active theme.
+ * Disabled state overrides variant/scheme with the shared faded-neutral look.
+ */
+export const resolveColors = (
+  colors: ThemeColors,
+  variant: ButtonVariant,
+  colorScheme: ButtonColorScheme,
+  disabled: boolean,
+): ButtonColorTokens => {
+  if (disabled) {
+    return disabledTokens(colors);
+  }
+  const variantMap: Record<ButtonVariant, Record<ButtonColorScheme, ButtonColorTokens>> = {
+    solid: solid(colors),
+    outline: outline(colors),
+    faded: faded(colors),
+  };
+  return variantMap[variant][colorScheme];
+};
+
+export const styles = StyleSheet.create({
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: Radius.radius_lg, // 12
+    overflow: 'hidden',
+  },
+  fullWidth: {
+    alignSelf: 'stretch',
+  },
+  label: {
+    fontFamily: Font.dmSansSemiBold,
+    textAlign: 'center',
+  },
+});

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

@@ -0,0 +1,97 @@
+import React from 'react';
+import { ActivityIndicator, TouchableOpacity } from 'react-native';
+import { useTheme } from '@src/core/theme';
+import { Label } from '../label';
+import { resolveColors, SIZE_TOKENS, styles } from './button.style';
+import { ButtonProps } from './button.type';
+
+/**
+ * Design-system Button (Life-Master-Design).
+ *
+ * Variants: `solid` | `outline` | `faded`.
+ * Color schemes: `primary` | `secondary` | `neutral`.
+ * Sizes: `md` (44px) | `lg` (56px).
+ *
+ * Supports `disabled` and `loading` states, optional leading/trailing SVG icons,
+ * and `fullWidth`. Styling is centralized in `button.style.ts` and reads DS tokens
+ * from `@src/core/utils`.
+ *
+ * @example
+ * <Button label="Continue" onPress={onNext} />
+ * <Button label="Cancel" variant="outline" colorScheme="neutral" size="md" />
+ * <Button label="Save" loading={isSaving} IconLeft={IconSave} fullWidth />
+ */
+const Button = (props: ButtonProps) => {
+  const {
+    label,
+    variant = 'solid',
+    colorScheme = 'primary',
+    size = 'lg',
+    disabled = false,
+    loading = false,
+    fullWidth = false,
+    IconLeft,
+    IconRight,
+    style,
+    labelStyle,
+    children,
+    ...rest
+  } = props;
+
+  const { colors: themeColors } = useTheme();
+  const isInteractionBlocked = disabled || loading;
+  const colors = resolveColors(themeColors, variant, colorScheme, disabled);
+  const sizeTokens = SIZE_TOKENS[size];
+
+  return (
+    <TouchableOpacity
+      accessibilityRole="button"
+      accessibilityState={{ disabled: isInteractionBlocked, busy: loading }}
+      activeOpacity={0.7}
+      disabled={isInteractionBlocked}
+      style={[
+        styles.base,
+        {
+          height: sizeTokens.height,
+          paddingHorizontal: sizeTokens.paddingHorizontal,
+          gap: sizeTokens.gap,
+          backgroundColor: colors.background,
+          borderColor: colors.border,
+          borderWidth: colors.borderWidth,
+        },
+        fullWidth && styles.fullWidth,
+        style,
+      ]}
+      {...rest}
+    >
+      {loading ? (
+        <ActivityIndicator size="small" color={colors.content} />
+      ) : (
+        <>
+          {IconLeft ? (
+            <IconLeft width={sizeTokens.iconSize} height={sizeTokens.iconSize} color={colors.content} />
+          ) : null}
+
+          {children ?? (
+            <Label
+              value={label}
+              color={colors.content}
+              fontFamily={styles.label.fontFamily}
+              style={[
+                styles.label,
+                { fontSize: sizeTokens.fontSize, lineHeight: sizeTokens.lineHeight },
+                labelStyle,
+              ]}
+            />
+          )}
+
+          {IconRight ? (
+            <IconRight width={sizeTokens.iconSize} height={sizeTokens.iconSize} color={colors.content} />
+          ) : null}
+        </>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+export default Button;

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

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import { StyleProp, TextStyle, TouchableOpacityProps, ViewStyle } from 'react-native';
+import { SvgProps } from 'react-native-svg';
+
+/** Visual style of the button. */
+export type ButtonVariant = 'solid' | 'outline' | 'faded';
+
+/** Color scheme mapped to the design-system palette. */
+export type ButtonColorScheme = 'primary' | 'secondary' | 'neutral';
+
+/** Size token — `md` = 44px height, `lg` = 56px height. */
+export type ButtonSize = 'md' | 'lg';
+
+export type ButtonProps = Omit<TouchableOpacityProps, 'children'> & {
+  /** Text rendered inside the button. */
+  label: string;
+  /** Visual style. @default 'solid' */
+  variant?: ButtonVariant;
+  /** Color scheme. @default 'primary' */
+  colorScheme?: ButtonColorScheme;
+  /** Size token. @default 'lg' */
+  size?: ButtonSize;
+  /** Disable interaction + apply the disabled (faded) visual. */
+  disabled?: boolean;
+  /** Show a spinner instead of the label/icons; also blocks interaction. */
+  loading?: boolean;
+  /** Stretch the button to fill the parent width. */
+  fullWidth?: boolean;
+  /** Leading icon (SVG component). */
+  IconLeft?: React.FC<SvgProps>;
+  /** Trailing icon (SVG component). */
+  IconRight?: React.FC<SvgProps>;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+  /** Override the label style. */
+  labelStyle?: StyleProp<TextStyle>;
+  /** Custom node rendered in place of the default label (advanced). */
+  children?: ReactNode;
+};
+
+/** Resolved colors for a variant + colorScheme + state combination. */
+export interface ButtonColorTokens {
+  background: string;
+  border: string;
+  borderWidth: number;
+  content: string;
+}

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

@@ -0,0 +1,4 @@
+export { default as Button } from './button';
+export * from './button.type';
+// Shared color resolver reused by IconButton (same DS color matrix).
+export { resolveColors } from './button.style';

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

@@ -0,0 +1,127 @@
+import { IconCheck } 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 from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { CheckboxProps } from './checkbox.type';
+
+const BOX = horizontalScale(20);
+
+/**
+ * Design-system Checkbox (Life-Master-Design).
+ *
+ * States: unchecked / checked / indeterminate, plus `error` and `disabled`.
+ * Optional `label` + `caption`. Controlled via `checked` / `onChange`.
+ *
+ * @example
+ * <Checkbox checked={agree} onChange={setAgree} label="I agree" caption="Terms & conditions" />
+ * <Checkbox indeterminate label="Select all" />
+ */
+const Checkbox = (props: CheckboxProps) => {
+  const {
+    checked = false,
+    indeterminate = false,
+    onChange,
+    label,
+    caption,
+    error = false,
+    disabled = false,
+    style,
+    accessibilityLabel,
+  } = props;
+
+  const { colors } = useTheme();
+  const styles = useThemedStyles(makeStyles);
+
+  const isFilled = checked || indeterminate;
+
+  const boxStyle = [
+    styles.box,
+    isFilled && !disabled && styles.boxFilled,
+    error && !disabled && styles.boxError,
+    disabled && styles.boxDisabled,
+  ];
+
+  const iconColor = disabled ? colors.fg_neutral_faded : colors.fg_primary_on_background;
+
+  return (
+    <TouchableOpacity
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: indeterminate ? 'mixed' : checked, disabled }}
+      accessibilityLabel={accessibilityLabel ?? label}
+      activeOpacity={0.7}
+      disabled={disabled}
+      onPress={() => onChange?.(!checked)}
+      style={[styles.row, style]}
+    >
+      <View style={boxStyle}>
+        {indeterminate ? (
+          <View style={[styles.dash, { backgroundColor: iconColor }]} />
+        ) : checked ? (
+          <IconCheck width={horizontalScale(12)} height={horizontalScale(12)} color={iconColor} />
+        ) : null}
+      </View>
+
+      {(label || caption) && (
+        <View style={styles.texts}>
+          {label ? <Text style={[styles.label, disabled && styles.textDisabled]}>{label}</Text> : null}
+          {caption ? <Text style={styles.caption}>{caption}</Text> : null}
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+export default Checkbox;
+
+const makeStyles = (c: ThemeColors) =>
+  StyleSheet.create({
+    row: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      gap: Spacing.spacing_s_nudge, // 6
+    },
+    box: {
+      width: BOX,
+      height: BOX,
+      borderRadius: Radius.radius_sm, // 4
+      borderWidth: Stroke.stroke_m, // 1.5
+      borderColor: c.bd_neutral_normal, // #c6c6c6
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    boxFilled: {
+      backgroundColor: c.bg_primary_normal, // #6927da
+      borderColor: c.bd_primary_normal,
+    },
+    boxError: {
+      borderColor: c.bd_danger_normal,
+    },
+    boxDisabled: {
+      backgroundColor: c.bg_elevation_level_2_normal,
+      borderColor: c.bd_neutral_faded,
+    },
+    dash: {
+      width: horizontalScale(10),
+      height: Stroke.stroke_m,
+      borderRadius: Stroke.stroke_m,
+    },
+    texts: {
+      flexShrink: 1,
+    },
+    label: {
+      fontFamily: Font.dmSansMedium,
+      fontSize: fontSize(14),
+      lineHeight: 20,
+      color: c.fg_neutral_normal,
+    },
+    caption: {
+      fontFamily: Font.dmSansRegular,
+      fontSize: fontSize(12),
+      lineHeight: 18,
+      color: c.fg_neutral_faded,
+    },
+    textDisabled: {
+      color: c.fg_neutral_faded,
+    },
+  });

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