cdslibrary 1.2.86 → 1.2.87

package/components/CDSImageButton.jsx

@@ -2,62 +2,105 @@ import React, { useState } from "react";
 import { Text, StyleSheet, TouchableOpacity, View, Image } from "react-native";
 import { MaterialIcons } from "@expo/vector-icons";
 import { useTheme } from "../context/CDSThemeContext";
+import { CDSTooltip } from "./CDSTooltip"; // Asegúrate de importar tu Tooltip
 
-
-
-export const CDSImageButton = ({ object, isActive, onPress }) => { // 👈 Añadimos isActive
+export const CDSImageButton = ({ object, isActive, onPress, hasHelper, helperMessage }) => {
   const { theme } = useTheme();
+  
+  // Estados para controlar el Tooltip interno
+  const [tooltipVisible, setTooltipVisible] = useState(false);
+  const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
 
+  const handleHelperPress = (event) => {
+    // Capturamos la posición global para el tooltip
+    const { pageX, pageY } = event.nativeEvent;
+    setTooltipPos({ x: pageX, y: pageY });
+    setTooltipVisible(true);
+  };
 
   return (
-    <TouchableOpacity
-    onPress={onPress}
-      style={[
-        styles.mainContainer,
-        {
-          backgroundColor: isActive 
-            ? theme.surface.neutral.primaryVariant // Color cuando está presionado
-            : theme.surface.neutral.primary,
-          gap: theme.space.sm,
-          padding: theme.space.sm,
-          // borderColor: isActive 
-          //   ? theme.outline.neutral.primary // Borde de color de marca si está activo
-          //   : theme.outline.neutral.primary,
-          borderRadius: theme.radius.md,
-          // Si está activo, quitamos la sombra o usamos una más pequeña (md)
-          ...(!isActive && theme.shadows.lg),
-          // Si quieres que se vea "hundido", podrías bajar la escala
-          transform: [{ scale: isActive ? 0.99 : 1 }] 
-        },
-      ]}
-    >
-      <Image
-        source={object.image}
-        resizeMode="cover"
-        style={{
-          flexGrow: 1,
-          width: "100%",
-          height: 80,
-          borderRadius: theme.radius.sm,
-        }}
-      />
-      <Text style={isActive ? theme.typography.semiBold.sm : theme.typography.regular.sm }>
-        {object.label}
-      </Text>
-    </TouchableOpacity>
-  );
-};
+    <>
+      <TouchableOpacity
+        onPress={onPress}
+        activeOpacity={0.7}
+        style={[
+          styles.mainContainer,
+          {
+            backgroundColor: isActive 
+              ? theme.surface.neutral.primaryVariant 
+              : theme.surface.neutral.primary,
+            gap: theme.space.xs, // Reducimos un poco el gap para el label
+            padding: theme.space.sm,
+            borderRadius: theme.radius.md,
+            borderWidth: 1,
+            borderColor: isActive ? theme.outline.neutral.focus : 'transparent',
+            ...(!isActive && theme.shadows.lg),
+            transform: [{ scale: isActive ? 0.98 : 1 }] 
+          },
+        ]}
+      >
+        <Image
+          source={object.image}
+          resizeMode="cover"
+          style={{
+            width: "100%",
+            height: 80,
+            borderRadius: theme.radius.sm,
+            marginBottom: 4
+          }}
+        />
 
+        {/* Contenedor de Texto + Ícono de ayuda */}
+        <View style={styles.labelContainer}>
+          <Text 
+            numberOfLines={1}
+            style={[
+              isActive ? theme.typography.semiBold.sm : theme.typography.regular.sm,
+              { color: theme.text.neutral.primary }
+            ]}
+          >
+            {object.label}
+          </Text>
 
+          {hasHelper && (
+            <TouchableOpacity 
+              onPress={handleHelperPress}
+              hitSlop={{ top: 15, bottom: 15, left: 15, right: 15 }}
+            >
+              <MaterialIcons 
+                name="help-outline" 
+                size={14} 
+                color={theme.text.neutral.secondary} 
+              />
+            </TouchableOpacity>
+          )}
+        </View>
+      </TouchableOpacity>
 
-const styles = StyleSheet.create ({
+      {/* Tooltip renderizado fuera del botón para evitar cortes de overflow */}
+      <CDSTooltip 
+        visible={tooltipVisible}
+        message={helperMessage}
+        targetPosition={tooltipPos}
+        onDismiss={() => setTooltipVisible(false)}
+        arrowAlign="center"
+      />
+    </>
+  );
+};
 
-mainContainer:{
+const styles = StyleSheet.create({
+  mainContainer: {
     alignItems: 'center',
     flexGrow: 1,
     maxWidth: 160,
     minWidth: 96,
-    height: 'auto'
-}
-
-})
+  },
+  labelContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 4, // Espacio entre el texto y el ícono
+    width: '100%',
+  }
+});

package/components/CDSImageButtonGroup.jsx

@@ -59,6 +59,8 @@ export const CDSImageButtonGroup = ({ array, onSelect, isCentered }) => {
                         object={item}
                         isActive={selectedId === item.id}
                         onPress={() => handlePress(item.id)}
+                        hasHelper={item.helper ? true : false}
+                        helperMessage={item.helper}
                     />
                 ))}
             </ScrollView>

package/components/CDSTooltip.jsx

@@ -0,0 +1,126 @@
+import React, { useEffect } from "react";
+import { StyleSheet, Text, View, Modal, TouchableWithoutFeedback } from "react-native";
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withSpring,
+    withTiming,
+} from "react-native-reanimated";
+import { useTheme } from "../context/CDSThemeContext";
+
+export const CDSTooltip = ({ message, visible, onDismiss, targetPosition = { x: 0, y: 0 }, arrowAlign = 'center' }) => {
+    const { theme } = useTheme();
+    const opacity = useSharedValue(0);
+    const scale = useSharedValue(1);
+
+    useEffect(() => {
+        if (visible) {
+            opacity.value = withTiming(1, { duration: 200 });
+            // scale.value = withSpring(1, { damping: 12 });
+        } else {
+            opacity.value = withTiming(0, { duration: 200 });
+            // scale.value = withTiming(0.8);
+        }
+    }, [visible]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+        // transform: [{ scale: scale.value }],
+    }));
+
+    // 1. Alineación de la flecha dentro del globo
+    const getArrowStyle = () => {
+        switch (arrowAlign) {
+            case 'left': return { left: 15 };
+            case 'right': return { right: 15 };
+            default: return { alignSelf: 'center' };
+        }
+    };
+
+    // 2. Alineación del globo respecto al clic (x)
+    const getTooltipContainerStyle = () => {
+        const tooltipWidth = 200; // Ancho estimado o fijo
+        let leftPosition = targetPosition.x;
+
+        if (arrowAlign === 'center') {
+            leftPosition = targetPosition.x - (tooltipWidth / 2);
+        } else if (arrowAlign === 'right') {
+            leftPosition = targetPosition.x - tooltipWidth + 25; // 25 es el margen de la flecha
+        } else {
+            leftPosition = targetPosition.x - 25;
+        }
+
+        return {
+            top: targetPosition.y + 24, // Debajo del clic
+            left: Math.max(10, leftPosition), // Evita que se salga de la pantalla por la izquierda
+            width: tooltipWidth,
+        };
+    };
+
+    if (!visible && opacity.value === 0) return null;
+
+    return (
+        <Modal transparent visible={visible} animationType="none" onRequestClose={onDismiss}>
+            <TouchableWithoutFeedback onPress={onDismiss}>
+                <View style={styles.overlay}>
+                    <Animated.View
+                        style={[
+                            styles.tooltip,
+                            animatedStyle,
+                            getTooltipContainerStyle(),
+                            {
+                                backgroundColor: theme.surface.special.tooltip,
+                                borderRadius: theme.radius.sm,
+                                padding: theme.space.sm,
+                            }
+                        ]}
+                    >
+                        {/* La Flecha */}
+                        <View style={[
+                            styles.arrowUp,
+                            getArrowStyle(),
+                            { borderBottomColor: theme.surface.special.tooltip }
+                        ]} />
+
+                        {/* El Texto con alineación dinámica */}
+                        <Text style={[
+                            theme.typography.regular.xs,
+                            {
+                                color: theme.text.neutral.contrast,
+                                textAlign: arrowAlign // 'left', 'right' o 'center'
+                            }
+                        ]}>
+                            {message}
+                        </Text>
+                    </Animated.View>
+                </View>
+            </TouchableWithoutFeedback>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create({
+    overlay: { flex: 1, backgroundColor: 'transparent' },
+    tooltip: {
+        position: 'absolute',
+        zIndex: 10000,
+        elevation: 5,
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.2,
+        shadowRadius: 4,
+    },
+    arrowUp: {
+        position: 'absolute',
+        top: -8,
+        width: 0,
+        height: 0,
+        borderLeftWidth: 8,
+        borderRightWidth: 8,
+        borderBottomWidth: 8,
+        borderStyle: 'solid',
+        backgroundColor: 'transparent',
+        borderLeftColor: 'transparent',
+        borderRightColor: 'transparent',
+    }
+});

package/index.js

@@ -25,6 +25,7 @@ export {CDSSnackBar} from './components/CDSSnackBar';
 export {CDSImageButton} from './components/CDSImageButton'
 export {CDSImageButtonGroup} from './components/CDSImageButtonGroup'
 export {CDSCheckbox} from './components/CDSCheckbox';
+export {CDSTooltip} from './components/CDSTooltip';
 
 
 export {CDSThemeProvider, useTheme} from './context/CDSThemeContext';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cdslibrary",
   "license": "0BSD",
-  "version": "1.2.86",
+  "version": "1.2.87",
   "main": "index.js",
   "author": "Nat Viramontes",
   "description": "A library of components for the CDS project",

package/tokens/CDSsemanticColors.js

@@ -54,7 +54,7 @@ export const CDSsemanticColors = {
         overlay: CDSprimitiveColors.overlay.light,
         scroll: CDSprimitiveColors.neutral[400],
         snackbar: CDSprimitiveColors.neutral[700],
-        tooltip: CDSprimitiveColors.neutral[500],
+        tooltip: CDSprimitiveColors.neutral[600],
         progress: CDSprimitiveColors.brand[600],
         progressbarBg: CDSprimitiveColors.neutral[400],
         display: CDSprimitiveColors.neutral[800],