orn-ui 0.1.1 → 0.2.1

package/src/molecules/Stepper.tsx

@@ -1,29 +1,89 @@
-import React, { memo } from 'react';
+import React, { memo, useState } from 'react';
 import { TextInput, TouchableOpacity, View, type StyleProp, type ViewStyle } from 'react-native';
 import { createStyles } from '../theme/createStyles';
-import { useAllowFontScaling, useColors } from '../theme/UIProvider';
+import { useAllowFontScaling, useColors, useTheme } from '../theme/UIProvider';
 import { Icon } from '../icons/Icon';
 
+export type StepperSize = 'sm' | 'md' | 'lg';
+
 export interface StepperProps {
   value: string;
   onChangeText: (text: string) => void;
   onIncrement: () => void;
   onDecrement: () => void;
-  size?: 'sm' | 'md';
+  /** Escala del control: alto, botones, ícono y tipografía. @default 'md' */
+  size?: StepperSize;
+  /** Ocupa todo el ancho disponible y el input se lleva el sobrante. @default false */
+  block?: boolean;
+  /**
+   * En false el valor sólo se cambia con los botones: el teclado no se abre y
+   * el campo pierde el fondo que lo anuncia como editable. @default true
+   */
+  editable?: boolean;
+  /**
+   * Mínimo permitido. Deshabilita "-" al alcanzarlo y acota lo tipeado al
+   * salir del campo. Los negativos se aceptan sólo si `min` es negativo.
+   */
+  min?: number;
+  /** Máximo permitido. Deshabilita "+" al alcanzarlo y acota lo tipeado. */
+  max?: number;
+  /** Acepta un separador decimal, normalizando la coma a punto. @default false */
+  allowDecimals?: boolean;
   style?: StyleProp<ViewStyle>;
   incrementAccessibilityLabel?: string;
   decrementAccessibilityLabel?: string;
+  testID?: string;
 }
 
+const SIZES: Record<StepperSize, { height: number; icon: number; inputWidth: number }> = {
+  sm: { height: 36, icon: 18, inputWidth: 48 },
+  md: { height: 44, icon: 20, inputWidth: 56 },
+  lg: { height: 52, icon: 22, inputWidth: 64 },
+};
+
 const useStyles = createStyles((theme) => ({
-  control: { flexDirection: 'row', alignItems: 'center', borderWidth: 1, borderColor: theme.colors.border, borderRadius: theme.tokens.radius.md },
-  btn: { height: '100%', justifyContent: 'center', alignItems: 'center', backgroundColor: theme.colors.inputBackground },
-  btnSm: { backgroundColor: 'transparent' },
-  input: { flex: 1, textAlign: 'center', fontSize: theme.tokens.fontSize.lg, color: theme.colors.text, height: '100%' },
-  inputSm: { flex: 0, width: 50, borderLeftWidth: 1, borderRightWidth: 1, borderColor: theme.colors.border },
+  control: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    borderRadius: theme.tokens.radius.md,
+  },
+  controlBlock: { alignSelf: 'stretch' },
+  btn: { height: '100%', justifyContent: 'center', alignItems: 'center' },
+  input: {
+    textAlign: 'center',
+    height: '100%',
+    color: theme.colors.text,
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    borderColor: theme.colors.border,
+  },
+  // El fondo distingue el campo de un valor de sólo lectura: es la única
+  // señal de que ahí se puede tipear antes de tocarlo.
+  editable: { backgroundColor: theme.colors.inputBackground },
 }));
 
-/** Stepper: botón "-" + input numérico editable + botón "+". */
+/** Deja sólo lo que puede formar parte del número permitido por el rango. */
+export function sanitizeNumeric(text: string, { allowDecimals = false, allowNegative = false } = {}): string {
+  const normalized = allowDecimals ? text.replace(',', '.') : text;
+  const negative = allowNegative && normalized.trimStart().startsWith('-');
+  const digits = normalized.replace(allowDecimals ? /[^0-9.]/g : /[^0-9]/g, '');
+  const [whole = '', ...decimals] = digits.split('.');
+  const body = decimals.length > 0 ? `${whole}.${decimals.join('')}` : whole;
+  return negative ? `-${body}` : body;
+}
+
+/**
+ * Stepper
+ * Botón "-" + input numérico editable + botón "+". `size` controla sólo la
+ * escala y `block` sólo el ancho, así que los dos ejes se combinan libremente.
+ *
+ * El componente no hace la aritmética de los botones —eso vive en
+ * `onIncrement`/`onDecrement`—, pero sí limpia lo que se tipea y avisa cuándo
+ * el valor llegó a un extremo del rango deshabilitando el botón que lo pasaría.
+ */
 export const Stepper = memo(
   ({
     value,
@@ -31,44 +91,99 @@ export const Stepper = memo(
     onIncrement,
     onDecrement,
     size = 'md',
+    block = false,
+    editable = true,
+    min,
+    max,
+    allowDecimals = false,
     style,
     incrementAccessibilityLabel = 'Increment',
     decrementAccessibilityLabel = 'Decrement',
+    testID,
   }: StepperProps) => {
+    const theme = useTheme();
     const colors = useColors();
     const styles = useStyles();
     const allowFontScaling = useAllowFontScaling();
-    const isSmall = size === 'sm';
-    const btnSize = isSmall ? 36 : 48;
-    const iconSize = isSmall ? 18 : 20;
+    const [focused, setFocused] = useState(false);
+
+    const { height, icon, inputWidth } = SIZES[size];
+    const fontSize =
+      size === 'sm' ? theme.tokens.fontSize.md : size === 'md' ? theme.tokens.fontSize.lg : theme.tokens.fontSize.xl;
+
+    const allowNegative = min !== undefined && min < 0;
+    const numeric = Number(value);
+    const isNumber = value.trim() !== '' && Number.isFinite(numeric);
+    const atMin = isNumber && min !== undefined && numeric <= min;
+    const atMax = isNumber && max !== undefined && numeric >= max;
+
+    const handleChangeText = (text: string) => {
+      onChangeText(sanitizeNumeric(text, { allowDecimals, allowNegative }));
+    };
+
+    // El recorte al rango espera al blur: hacerlo mientras se tipea impide
+    // llegar a "12" cuando el mínimo es 5, porque el "1" ya se corregiría.
+    const handleBlur = () => {
+      setFocused(false);
+      if (!isNumber) return;
+      const clamped = Math.min(max ?? numeric, Math.max(min ?? numeric, numeric));
+      if (clamped !== numeric) onChangeText(String(clamped));
+    };
+
+    const stepButton = (
+      direction: 'decrement' | 'increment',
+      onPress: () => void,
+      disabled: boolean,
+      label: string
+    ) => (
+      <TouchableOpacity
+        onPress={onPress}
+        disabled={disabled}
+        style={[styles.btn, { width: height }]}
+        accessibilityRole="button"
+        accessibilityLabel={label}
+        accessibilityState={{ disabled }}
+        testID={testID && `${testID}-${direction}`}
+      >
+        <Icon
+          name={direction === 'increment' ? 'plus' : 'minus'}
+          size={icon}
+          color={disabled ? colors.textLight : colors.primary}
+        />
+      </TouchableOpacity>
+    );
 
     return (
-      <View style={[styles.control, { height: isSmall ? 36 : 48 }, style]}>
-        <TouchableOpacity
-          onPress={onDecrement}
-          style={[styles.btn, { width: btnSize }, isSmall && styles.btnSm]}
-          accessibilityRole="button"
-          accessibilityLabel={decrementAccessibilityLabel}
-        >
-          <Icon name="minus" size={iconSize} color={colors.primary} />
-        </TouchableOpacity>
+      <View
+        testID={testID}
+        style={[
+          styles.control,
+          { height },
+          block && styles.controlBlock,
+          focused && { borderColor: colors.primary },
+          style,
+        ]}
+      >
+        {stepButton('decrement', onDecrement, atMin, decrementAccessibilityLabel)}
         <TextInput
           allowFontScaling={allowFontScaling}
-          style={[styles.input, isSmall && styles.inputSm]}
+          style={[
+            styles.input,
+            { fontSize },
+            editable && styles.editable,
+            focused && { borderColor: colors.primary },
+            block ? { flex: 1 } : { width: inputWidth },
+          ]}
           value={value}
-          onChangeText={onChangeText}
-          keyboardType="numeric"
+          onChangeText={handleChangeText}
+          onFocus={() => setFocused(true)}
+          onBlur={handleBlur}
+          editable={editable}
+          keyboardType={allowDecimals ? 'decimal-pad' : 'number-pad'}
           selectTextOnFocus
           accessibilityLabel="Quantity"
         />
-        <TouchableOpacity
-          onPress={onIncrement}
-          style={[styles.btn, { width: btnSize }, isSmall && styles.btnSm]}
-          accessibilityRole="button"
-          accessibilityLabel={incrementAccessibilityLabel}
-        >
-          <Icon name="plus" size={iconSize} color={colors.primary} />
-        </TouchableOpacity>
+        {stepButton('increment', onIncrement, atMax, incrementAccessibilityLabel)}
       </View>
     );
   }

package/src/molecules/Steps.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { Text, TouchableOpacity, View, type StyleProp, type ViewStyle } from 'react-native';
+import { ScrollView, Text, TouchableOpacity, View, type StyleProp, type ViewStyle } from 'react-native';
 import { createStyles } from '../theme/createStyles';
 import { useAllowFontScaling, useColors } from '../theme/UIProvider';
 import { Icon } from '../icons/Icon';
@@ -28,19 +28,29 @@ export interface StepsProps {
 }
 
 const CIRCLE = 32;
+/** Ancho mínimo de una columna horizontal: por debajo, las etiquetas se parten. */
+const STEP_MIN_WIDTH = 76;
 
 const useStyles = createStyles((theme) => ({
   rowContainer: { flexDirection: 'row', alignItems: 'flex-start' },
   columnContainer: { flexDirection: 'column' },
 
   // horizontal
-  hStep: { flex: 1, alignItems: 'center', gap: theme.tokens.spacing.sm },
+  // ScrollView trae flexGrow: 1 de fábrica y se comía todo el alto disponible
+  // del contenedor, dejando los pasos pegados arriba de una caja enorme.
+  hScrollView: { flexGrow: 0, flexShrink: 0 },
+  hScroll: { flexGrow: 1, flexDirection: 'row', alignItems: 'flex-start' },
+  // `minWidth` es lo que evita que RN parta palabras a la mitad
+  // ("Almacé / n"): antes que apretar la columna por debajo de una palabra
+  // corriente, la fila se vuelve scrollable.
+  hStep: { flex: 1, minWidth: STEP_MIN_WIDTH, alignItems: 'center', gap: theme.tokens.spacing.sm },
   hLabels: { alignItems: 'center', gap: 2, paddingHorizontal: 4 },
   // El conector toma una fracción chica del ancho: compitiendo de igual a
   // igual con los pasos (flex: 1) cada etiqueta se quedaba con 1/(2n-1) del
-  // total y RN partía palabras a la mitad ("Paymen / t"). Con 0.3 un flujo de
-  // 4 pasos deja ~68px por etiqueta, suficiente para una palabra corriente.
-  hConnector: { height: 2, flex: 0.3, marginTop: CIRCLE / 2 - 1 },
+  // total.
+  hConnector: { height: 2, flex: 0.3, minWidth: 12, marginTop: CIRCLE / 2 - 1 },
+  hLabel: { fontSize: theme.tokens.fontSize.sm },
+  hDescription: { fontSize: theme.tokens.fontSize.xs },
 
   // vertical
   vStep: { flexDirection: 'row', gap: theme.tokens.spacing.md },
@@ -110,6 +120,7 @@ export const Steps = memo(
           style={[
             styles.label,
             centered && styles.labelCentered,
+            centered && styles.hLabel,
             status === 'pending' && { color: colors.textLight },
           ]}
         >
@@ -118,7 +129,7 @@ export const Steps = memo(
         {!!step.description && (
           <Text
             allowFontScaling={allowFontScaling}
-            style={[styles.description, centered && styles.descriptionCentered]}
+            style={[styles.description, centered && styles.descriptionCentered, centered && styles.hDescription]}
           >
             {step.description}
           </Text>
@@ -167,7 +178,15 @@ export const Steps = memo(
     }
 
     return (
-      <View style={[styles.rowContainer, style]}>
+      <ScrollView
+        testID="steps-row"
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        // Con espacio de sobra los pasos se reparten la fila igual que antes
+        // (flexGrow); cuando no entran, se desplaza en vez de apretar el texto.
+        style={[styles.hScrollView, style]}
+        contentContainerStyle={styles.hScroll}
+      >
         {steps.map((step, index) => {
           const status = statusOf(index, current);
           const isLast = index === steps.length - 1;
@@ -191,7 +210,7 @@ export const Steps = memo(
             </React.Fragment>
           );
         })}
-      </View>
+      </ScrollView>
     );
   }
 );

package/src/molecules/index.ts

@@ -1,5 +1,5 @@
-export { Stepper } from './Stepper';
-export type { StepperProps } from './Stepper';
+export { Stepper, sanitizeNumeric } from './Stepper';
+export type { StepperProps, StepperSize } from './Stepper';
 export { OptionCard } from './OptionCard';
 export type { OptionCardProps } from './OptionCard';
 export { InfoRow } from './InfoRow';
@@ -8,7 +8,7 @@ export { FormActions } from './FormActions';
 export type { FormActionsProps } from './FormActions';
 export { AvatarHeader } from './AvatarHeader';
 export type { AvatarHeaderProps } from './AvatarHeader';
-export { ThemeToggle } from './ThemeToggle';
-export type { ThemeToggleProps } from './ThemeToggle';
+export { SegmentedControl } from './SegmentedControl';
+export type { SegmentedControlProps, SegmentedControlOption } from './SegmentedControl';
 export { Steps } from './Steps';
 export type { StepsProps, StepItem, StepStatus } from './Steps';

package/src/organisms/AlertProvider.tsx

@@ -1,5 +1,6 @@
-import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Alert, type AlertButton, type AlertType } from './Alert';
+import { createImperativeBridge } from './imperativeBridge';
 
 export interface AlertOptions {
   title: string;
@@ -23,6 +24,25 @@ interface AlertContextValue {
 }
 
 const AlertContext = createContext<AlertContextValue | undefined>(undefined);
+const bridge = createImperativeBridge<AlertContextValue>('AlertProvider');
+
+/**
+ * Abre un alert desde fuera del árbol de React —un servicio, un interceptor—
+ * sin pasar por el hook. Sin <AlertProvider> montado resuelve de inmediato, así
+ * que un `await` nunca queda colgado.
+ */
+export function showAlert(options: AlertOptions): Promise<void> {
+  return bridge.get()?.alert(options) ?? Promise.resolve();
+}
+
+/** Igual que showAlert, pero resuelve true/false. Sin provider, false. */
+export function showConfirm(options: ConfirmOptions): Promise<boolean> {
+  return bridge.get()?.confirm(options) ?? Promise.resolve(false);
+}
+
+export function hideAlert(): void {
+  bridge.get()?.hide();
+}
 
 interface InternalState {
   visible: boolean;
@@ -108,6 +128,11 @@ export function AlertProvider({ children }: { children: React.ReactNode }) {
 
   const value = useMemo<AlertContextValue>(() => ({ alert: alertFn, confirm: confirmFn, hide }), [alertFn, confirmFn, hide]);
 
+  useEffect(() => {
+    bridge.set(value);
+    return () => bridge.set(null);
+  }, [value]);
+
   return (
     <AlertContext.Provider value={value}>
       {children}