orn-ui 0.2.9 → 0.3.0

package/lib/module/molecules/Steps.js

@@ -1,14 +1,21 @@
 "use strict";
 
-import React, { memo } from 'react';
+import React, { memo, useEffect, useRef, useState } from 'react';
 import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { useReduceMotion } from '../theme/useReduceMotion';
 import { createStyles } from '../theme/createStyles';
-import { useAllowFontScaling, useColors } from '../theme/UIProvider';
+import { useAllowFontScaling, useColors, useLabels } from '../theme/UIProvider';
 import { Icon } from '../icons/Icon';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CIRCLE = 32;
-/** Ancho mínimo de una columna horizontal: por debajo, las etiquetas se parten. */
+const CIRCLE_BORDER = 2;
+const CHECK_SIZE = 18;
+const CONNECTOR = 2;
+/** Minimum width of a horizontal column: below it, labels break mid-word. */
 const STEP_MIN_WIDTH = 76;
+/** Share of the row a horizontal connector takes next to a step (flex: 1). */
+const CONNECTOR_FLEX = 0.3;
+const PRESSED_OPACITY = 0.7;
 const useStyles = createStyles(theme => ({
   rowContainer: {
     flexDirection: 'row',
@@ -18,8 +25,8 @@ const useStyles = createStyles(theme => ({
     flexDirection: 'column'
   },
   // horizontal
-  // 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.
+  // ScrollView ships with flexGrow: 1 and was eating all the available height
+  // of the container, leaving the steps stuck to the top of a huge box.
   hScrollView: {
     flexGrow: 0,
     flexShrink: 0
@@ -29,9 +36,9 @@ const useStyles = createStyles(theme => ({
     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.
+  // `minWidth` is what keeps RN from breaking words in half
+  // ("Almacé / n"): rather than squeezing the column below a regular
+  // word, the row becomes scrollable.
   hStep: {
     flex: 1,
     minWidth: STEP_MIN_WIDTH,
@@ -40,23 +47,25 @@ const useStyles = createStyles(theme => ({
   },
   hLabels: {
     alignItems: 'center',
-    gap: 2,
-    paddingHorizontal: 4
+    gap: theme.tokens.spacing.xxs,
+    paddingHorizontal: theme.tokens.spacing.xs
   },
-  // 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
+  // The connector takes a small fraction of the width: competing on equal
+  // terms with the steps (flex: 1), each label ended up with 1/(2n-1) of the
   // total.
   hConnector: {
-    height: 2,
-    flex: 0.3,
-    minWidth: 12,
-    marginTop: CIRCLE / 2 - 1
+    height: CONNECTOR,
+    flex: CONNECTOR_FLEX,
+    minWidth: theme.tokens.spacing.md,
+    marginTop: CIRCLE / 2 - CONNECTOR / 2
   },
   hLabel: {
-    fontSize: theme.tokens.fontSize.sm
+    fontSize: theme.tokens.fontSize.sm,
+    lineHeight: theme.tokens.lineHeight.sm
   },
   hDescription: {
-    fontSize: theme.tokens.fontSize.xs
+    fontSize: theme.tokens.fontSize.xs,
+    lineHeight: theme.tokens.lineHeight.sm
   },
   // vertical
   vStep: {
@@ -67,21 +76,25 @@ const useStyles = createStyles(theme => ({
     alignItems: 'center'
   },
   vConnector: {
-    width: 2,
+    width: CONNECTOR,
     flex: 1,
-    minHeight: 20,
-    marginVertical: 4
+    minHeight: theme.tokens.spacing.xl,
+    marginVertical: theme.tokens.spacing.xs
   },
   vLabels: {
     flex: 1,
-    gap: 2,
+    gap: theme.tokens.spacing.xxs,
     paddingBottom: theme.tokens.spacing.lg
   },
+  // The last step has no connector below: no trailing space either.
+  vLabelsLast: {
+    paddingBottom: 0
+  },
   circle: {
     width: CIRCLE,
     height: CIRCLE,
     borderRadius: CIRCLE / 2,
-    borderWidth: 2,
+    borderWidth: CIRCLE_BORDER,
     alignItems: 'center',
     justifyContent: 'center'
   },
@@ -91,14 +104,23 @@ const useStyles = createStyles(theme => ({
   },
   label: {
     fontSize: theme.tokens.fontSize.md,
+    lineHeight: theme.tokens.lineHeight.md,
     fontWeight: theme.tokens.fontWeight.semibold,
     color: theme.colors.text
   },
+  labelCurrent: {
+    color: theme.colors.primaryText
+  },
+  labelPending: {
+    color: theme.colors.textLight,
+    fontWeight: theme.tokens.fontWeight.medium
+  },
   labelCentered: {
     textAlign: 'center'
   },
   description: {
     fontSize: theme.tokens.fontSize.sm,
+    lineHeight: theme.tokens.lineHeight.sm,
     color: theme.colors.textLight
   },
   descriptionCentered: {
@@ -113,8 +135,17 @@ function statusOf(index, current) {
 
 /**
  * Steps
- * Indicador de progreso multi-paso. Base visual de `Wizard`, pero utilizable
- * suelto para mostrar el avance de un flujo que se navega de otra forma.
+ * Multi-step progress indicator. The visual base of `Wizard`, but usable on
+ * its own to show progress through a flow that is navigated some other way.
+ *
+ * Gestalt, continuity: a connector line runs through the circles, so the steps
+ * read as one path; the stretch already walked is filled with the accent.
+ * Similarity: every step is the same circle + label, and the state only
+ * changes fill and color (done = filled, current = outlined accent, pending =
+ * grey). Von Restorff: the current step is the only accent-colored label.
+ *
+ * Accessibility: each step announces "Step 2 of 3: Payment, current", with
+ * every word from `labels`.
  */
 export const Steps = /*#__PURE__*/memo(({
   steps,
@@ -122,12 +153,34 @@ export const Steps = /*#__PURE__*/memo(({
   orientation = 'horizontal',
   completedIndicator = 'check',
   onStepPress,
-  style
+  style,
+  testID
 }) => {
   const colors = useColors();
+  const labels = useLabels();
   const styles = useStyles();
   const allowFontScaling = useAllowFontScaling();
   const isVertical = orientation === 'vertical';
+  const reduceMotion = useReduceMotion();
+
+  // Horizontal overflow: when the steps don't fit, the row scrolls. A hidden
+  // step gave no hint of existing, so the current step is brought into view
+  // and the scroll bar flashes once (visibility of system status).
+  const scrollRef = useRef(null);
+  const [viewportWidth, setViewportWidth] = useState(0);
+  const [contentWidth, setContentWidth] = useState(0);
+  const stepX = useRef([]);
+  const overflows = !isVertical && viewportWidth > 0 && contentWidth > viewportWidth + 1;
+  useEffect(() => {
+    if (!overflows) return;
+    const x = stepX.current[current] ?? 0;
+    // A quarter of the row of lead-in: the previous step stays partly visible.
+    scrollRef.current?.scrollTo({
+      x: Math.max(0, x - viewportWidth / 4),
+      animated: !reduceMotion
+    });
+    scrollRef.current?.flashScrollIndicators();
+  }, [overflows, current, viewportWidth, reduceMotion]);
   const colorsFor = status => {
     if (status === 'completed') return {
       bg: colors.primary,
@@ -155,7 +208,7 @@ export const Steps = /*#__PURE__*/memo(({
       }],
       children: showCheck ? /*#__PURE__*/_jsx(Icon, {
         name: "check",
-        size: 18,
+        size: CHECK_SIZE,
         color: c.fg
       }) : /*#__PURE__*/_jsx(Text, {
         allowFontScaling: allowFontScaling,
@@ -166,13 +219,11 @@ export const Steps = /*#__PURE__*/memo(({
       })
     });
   };
-  const renderLabels = (step, status, centered) => /*#__PURE__*/_jsxs(View, {
-    style: centered ? styles.hLabels : styles.vLabels,
+  const renderLabels = (step, status, centered, isLast = false) => /*#__PURE__*/_jsxs(View, {
+    style: centered ? styles.hLabels : [styles.vLabels, isLast && styles.vLabelsLast],
     children: [/*#__PURE__*/_jsx(Text, {
       allowFontScaling: allowFontScaling,
-      style: [styles.label, centered && styles.labelCentered, centered && styles.hLabel, status === 'pending' && {
-        color: colors.textLight
-      }],
+      style: [styles.label, centered && styles.labelCentered, centered && styles.hLabel, status === 'current' && styles.labelCurrent, status === 'pending' && styles.labelPending],
       children: step.label
     }), !!step.description && /*#__PURE__*/_jsx(Text, {
       allowFontScaling: allowFontScaling,
@@ -180,26 +231,33 @@ export const Steps = /*#__PURE__*/memo(({
       children: step.description
     })]
   });
+  const statusLabel = {
+    completed: labels.stepCompleted,
+    current: labels.stepCurrent,
+    pending: labels.stepPending
+  };
   const stepAccessibility = (index, step, status) => ({
     accessibilityRole: onStepPress ? 'button' : 'text',
-    accessibilityLabel: `Step ${index + 1}: ${step.label}`,
+    accessibilityLabel: `${labels.stepOf.replace('{n}', String(index + 1)).replace('{total}', String(steps.length)).replace('{label}', step.label)}, ${statusLabel[status]}`,
     accessibilityState: {
       selected: status === 'current',
       disabled: false
-    }
+    },
+    testID: testID && `${testID}-${index}`
   });
   if (isVertical) {
     return /*#__PURE__*/_jsx(View, {
       style: [styles.columnContainer, style],
+      testID: testID,
       children: steps.map((step, index) => {
         const status = statusOf(index, current);
         const isLast = index === steps.length - 1;
         const Wrapper = onStepPress ? TouchableOpacity : View;
-        // Sólo tocable si hay onStepPress: pasarle onPress/activeOpacity
-        // a un View plano no crashea, pero los deja como ruido silencioso.
+        // Only touchable when there is onStepPress: passing onPress/activeOpacity
+        // to a plain View doesn't crash, but leaves them as silent noise.
         const interactiveProps = onStepPress ? {
           onPress: () => onStepPress(index),
-          activeOpacity: 0.7
+          activeOpacity: PRESSED_OPACITY
         } : undefined;
         return /*#__PURE__*/_jsxs(Wrapper, {
           style: styles.vStep,
@@ -212,17 +270,20 @@ export const Steps = /*#__PURE__*/memo(({
                 backgroundColor: index < current ? colors.primary : colors.border
               }]
             })]
-          }), renderLabels(step, status, false)]
+          }), renderLabels(step, status, false, isLast)]
         }, `${step.label}-${index}`);
       })
     });
   }
   return /*#__PURE__*/_jsx(ScrollView, {
-    testID: "steps-row",
+    ref: scrollRef,
+    testID: testID,
     horizontal: true,
-    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.
+    showsHorizontalScrollIndicator: overflows,
+    onLayout: e => setViewportWidth(e.nativeEvent.layout.width),
+    onContentSizeChange: width => setContentWidth(width)
+    // With room to spare the steps share the row just like before
+    // (flexGrow); when they don't fit, it scrolls instead of squeezing the text.
     ,
     style: [styles.hScrollView, style],
     contentContainerStyle: styles.hScroll,
@@ -232,11 +293,14 @@ export const Steps = /*#__PURE__*/memo(({
       const Wrapper = onStepPress ? TouchableOpacity : View;
       const interactiveProps = onStepPress ? {
         onPress: () => onStepPress(index),
-        activeOpacity: 0.7
+        activeOpacity: PRESSED_OPACITY
       } : undefined;
       return /*#__PURE__*/_jsxs(React.Fragment, {
         children: [/*#__PURE__*/_jsxs(Wrapper, {
           style: styles.hStep,
+          onLayout: e => {
+            stepX.current[index] = e.nativeEvent.layout.x;
+          },
           ...interactiveProps,
           ...stepAccessibility(index, step, status),
           children: [renderCircle(index, status), renderLabels(step, status, true)]

package/lib/module/molecules/Steps.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","memo","ScrollView","Text","TouchableOpacity","View","createStyles","useAllowFontScaling","useColors","Icon","jsx","_jsx","jsxs","_jsxs","CIRCLE","STEP_MIN_WIDTH","useStyles","theme","rowContainer","flexDirection","alignItems","columnContainer","hScrollView","flexGrow","flexShrink","hScroll","hStep","flex","minWidth","gap","tokens","spacing","sm","hLabels","paddingHorizontal","hConnector","height","marginTop","hLabel","fontSize","hDescription","xs","vStep","md","vIndicatorColumn","vConnector","width","minHeight","marginVertical","vLabels","paddingBottom","lg","circle","borderRadius","borderWidth","justifyContent","circleNumber","fontWeight","semibold","label","color","colors","text","labelCentered","textAlign","description","textLight","descriptionCentered","statusOf","index","current","Steps","steps","orientation","completedIndicator","onStepPress","style","styles","allowFontScaling","isVertical","colorsFor","status","bg","primary","border","fg","onPrimary","primaryText","renderCircle","c","showCheck","backgroundColor","borderColor","children","name","size","renderLabels","step","centered","stepAccessibility","accessibilityRole","accessibilityLabel","accessibilityState","selected","disabled","map","isLast","length","Wrapper","interactiveProps","onPress","activeOpacity","undefined","testID","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","Fragment","displayName"],"sourceRoot":"../../../src","sources":["molecules/Steps.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","memo","useEffect","useRef","useState","ScrollView","Text","TouchableOpacity","View","useReduceMotion","createStyles","useAllowFontScaling","useColors","useLabels","Icon","jsx","_jsx","jsxs","_jsxs","CIRCLE","CIRCLE_BORDER","CHECK_SIZE","CONNECTOR","STEP_MIN_WIDTH","CONNECTOR_FLEX","PRESSED_OPACITY","useStyles","theme","rowContainer","flexDirection","alignItems","columnContainer","hScrollView","flexGrow","flexShrink","hScroll","hStep","flex","minWidth","gap","tokens","spacing","sm","hLabels","xxs","paddingHorizontal","xs","hConnector","height","md","marginTop","hLabel","fontSize","lineHeight","hDescription","vStep","vIndicatorColumn","vConnector","width","minHeight","xl","marginVertical","vLabels","paddingBottom","lg","vLabelsLast","circle","borderRadius","borderWidth","justifyContent","circleNumber","fontWeight","semibold","label","color","colors","text","labelCurrent","primaryText","labelPending","textLight","medium","labelCentered","textAlign","description","descriptionCentered","statusOf","index","current","Steps","steps","orientation","completedIndicator","onStepPress","style","testID","labels","styles","allowFontScaling","isVertical","reduceMotion","scrollRef","viewportWidth","setViewportWidth","contentWidth","setContentWidth","stepX","overflows","x","scrollTo","Math","max","animated","flashScrollIndicators","colorsFor","status","bg","primary","border","fg","onPrimary","renderCircle","c","showCheck","backgroundColor","borderColor","children","name","size","renderLabels","step","centered","isLast","statusLabel","completed","stepCompleted","stepCurrent","pending","stepPending","stepAccessibility","accessibilityRole","accessibilityLabel","stepOf","replace","String","length","accessibilityState","selected","disabled","map","Wrapper","interactiveProps","onPress","activeOpacity","undefined","ref","horizontal","showsHorizontalScrollIndicator","onLayout","e","nativeEvent","layout","onContentSizeChange","contentContainerStyle","Fragment","displayName"],"sourceRoot":"../../../src","sources":["molecules/Steps.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/molecules/SymmetricGrid.js

@@ -3,14 +3,11 @@
 import React, { useMemo } from 'react';
 import { View } from 'react-native';
 import { createStyles } from '../theme/createStyles';
+import { useTheme } from '../theme/UIProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = createStyles(theme => ({
-  grid: {
-    gap: theme.tokens.spacing.md
-  },
+const useStyles = createStyles(() => ({
   row: {
-    flexDirection: 'row',
-    gap: theme.tokens.spacing.md
+    flexDirection: 'row'
   },
   rowBalanced: {
     justifyContent: 'center'
@@ -31,10 +28,16 @@ function chunk(data, size) {
 
 /**
  * SymmetricGrid
- * Ley de Prägnanz (buena forma): agrupa en filas parejas de N columnas.
- * La última fila, cuando queda incompleta, se centra por defecto en vez de
- * quedar pegada a un borde — eso es lo que la lee como "fila corta" y no
- * como un layout roto con un hueco a un lado.
+ * Law of Prägnanz (good form): groups items into even rows of N columns.
+ * The last row, when incomplete, is centered by default instead of sticking
+ * to one edge — that is what makes it read as a "short row" and not as a
+ * broken layout with a gap on one side.
+ *
+ * Gestalt, similarity: every cell has exactly the same width, also in the
+ * centered short row, so items read as peers. The horizontal gap is padding
+ * inside each cell (and a negative margin on the row), not flex `gap`: a
+ * `100 / columns %` width plus a gap made every row wider than the grid and
+ * pushed the right column out of the container.
  */
 export function SymmetricGrid({
   data,
@@ -43,31 +46,36 @@ export function SymmetricGrid({
   columns = 2,
   gap,
   balanceLastRow = true,
-  style
+  style,
+  testID
 }) {
+  const theme = useTheme();
   const styles = useStyles();
   const rows = useMemo(() => chunk(data, columns), [data, columns]);
+  const space = gap ?? theme.tokens.spacing.md;
   const cellWidth = `${100 / columns}%`;
   return /*#__PURE__*/_jsx(View, {
-    style: [styles.grid, gap !== undefined && {
-      gap
+    style: [{
+      gap: space
     }, style],
+    testID: testID,
     children: rows.map((row, rowIndex) => {
       const isLastRow = rowIndex === rows.length - 1;
       const isIncomplete = row.length < columns;
       const centered = isLastRow && isIncomplete && balanceLastRow;
       return /*#__PURE__*/_jsx(View
-      // `columns` en la key: si cambia, las filas no reusan nodos DOM
-      // de una fila armada con otra cantidad de columnas.
+      // `columns` in the key: if it changes, rows don't reuse DOM nodes
+      // from a row built with a different number of columns.
       , {
-        style: [styles.row, centered ? styles.rowBalanced : styles.rowFull, gap !== undefined && {
-          gap
+        style: [styles.row, centered ? styles.rowBalanced : styles.rowFull, {
+          marginHorizontal: -space / 2
         }],
         children: row.map((item, colIndex) => {
           const index = rowIndex * columns + colIndex;
           return /*#__PURE__*/_jsx(View, {
             style: [styles.cell, {
-              width: cellWidth
+              width: cellWidth,
+              paddingHorizontal: space / 2
             }],
             children: renderItem(item, index)
           }, keyExtractor(item, index));

package/lib/module/molecules/SymmetricGrid.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","View","createStyles","jsx","_jsx","useStyles","theme","grid","gap","tokens","spacing","md","row","flexDirection","rowBalanced","justifyContent","rowFull","cell","flexGrow","flexShrink","chunk","data","size","rows","i","length","push","slice","SymmetricGrid","renderItem","keyExtractor","columns","balanceLastRow","style","styles","cellWidth","undefined","children","map","rowIndex","isLastRow","isIncomplete","centered","item","colIndex","index","width"],"sourceRoot":"../../../src","sources":["molecules/SymmetricGrid.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useMemo","View","createStyles","useTheme","jsx","_jsx","useStyles","row","flexDirection","rowBalanced","justifyContent","rowFull","cell","flexGrow","flexShrink","chunk","data","size","rows","i","length","push","slice","SymmetricGrid","renderItem","keyExtractor","columns","gap","balanceLastRow","style","testID","theme","styles","space","tokens","spacing","md","cellWidth","children","map","rowIndex","isLastRow","isIncomplete","centered","marginHorizontal","item","colIndex","index","width","paddingHorizontal"],"sourceRoot":"../../../src","sources":["molecules/SymmetricGrid.tsx"],"mappings":"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","ignoreList":[]}