cdslibrary 1.0.0

package/.expo/README.md

@@ -0,0 +1,8 @@
+> Why do I have a folder named ".expo" in my project?
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+> What do the files contain?
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+> Should I commit the ".expo" folder?
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

package/.expo/devices.json

@@ -0,0 +1,3 @@
+{
+  "devices": []
+}

package/.expo/packager-info.json

@@ -0,0 +1,4 @@
+{
+  "expoServerPort": 19000,
+  "packagerPort": 19000
+}

package/.expo/settings.json

@@ -0,0 +1,10 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false,
+  "scheme": null,
+  "devClient": false
+}

package/app.json

@@ -0,0 +1,23 @@
+{
+  "expo": {
+    "name": "CDSLibrary",
+    "slug": "CDSLibrary",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "auto",
+    "newArchEnabled": true,
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

package/assets/onboarding/slides.js

@@ -0,0 +1,22 @@
+// slides.js
+export const getSlides = (isDarkMode) => [
+  {
+    id: 'slide1',
+    title: "Tus boletas en un solo lugar",
+    description: "Conoce el estado general de tus boletas y dales seguimiento desde la aplicación.",
+    image: isDarkMode ? require("./image1D.png") : require("./image1.png")
+  },
+  {
+    id: 'slide2',
+    title: "Realiza tus pagos",
+    description: "Puedes refrendar o pagar tus desempeños con diferentes métodos de pago.",
+    image: isDarkMode ? require("./image2D.png") : require("./image2.png")
+  },
+  {
+    id: 'slide3',
+    title: "Tu eliges cuánto pagar",
+    description: "Puedes elegir la cantidad que deseas pagar en tus boletas.",
+    // Revisa que el uso de imágenes sea correcto según el modo:
+    image: isDarkMode ? require("./image3D.png") : require("./image3.png")
+  }
+];

package/components/CDSBottomSheet.jsx

@@ -0,0 +1,163 @@
+import React, { useEffect, useRef, useState } from "react";
+import { View, Text, Animated, Dimensions, StyleSheet, Pressable, Platform } from "react-native";
+import { CDSButton } from "./CDSButton";
+
+import { MaterialIcons } from "@expo/vector-icons";
+import { useTheme } from "../context/CDSThemeContext";
+import { getSemanticTextStyles } from "../tokens/CDSsemanticTextStyles";
+
+const { height, width } = Dimensions.get("window");
+
+const isMobile = width <= 878;
+
+export const CDSBottomSheet = ({
+  type,
+  isVisible,
+  hasClose,
+  title,
+  description ,
+  customSlot,
+  primaryButtonLabel,
+  primaryButtonOnPress,
+  secondaryButtonLabel = "Cancelar",
+  onFinish,
+}) => {
+
+  const [childHeight, setChildHeight] = useState(0);
+  const handleLayout = (event) => {
+    const { width } = event.nativeEvent.layout;
+    console.log("Ancho:", width, "Alto:", height);
+    setChildHeight(width);  // Guardamos el ancho en el estado
+};
+
+  const { theme } = useTheme();
+  const textStyles = getSemanticTextStyles(theme);
+
+  const [modalVisible, setModalVisible] = useState(isVisible);
+  const [modalOpacity] = useState(new Animated.Value(0));
+  const [slidePosition] = useState(new Animated.Value(height));
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(modalOpacity, {
+        toValue: modalVisible ? 1 : 0,
+        duration: 500,
+        useNativeDriver: false,
+      }),
+      Animated.timing(slidePosition, {
+        toValue: modalVisible ? 0 : height,
+        duration: modalVisible ? 500 : 800,
+        useNativeDriver: false,
+      }),
+    ]).start();
+  }, [modalVisible]);
+
+  return (
+    <>
+      <Animated.View onLayout={handleLayout}
+        style={[isMobile ? styles.centeredView.typeBottomSheet : styles.centeredView.typeModal,
+        {opacity: modalOpacity,  transform: isMobile && [{ translateY: slidePosition }] },
+        ]}
+      >
+        <View style={[isMobile ? styles.container.typeBottomSheet : styles.container.typeModal, { backgroundColor: theme.surface.neutral.primary } ]}>
+          {hasClose && (
+            <MaterialIcons
+              name={"close"}
+              size={textStyles.icon.fontSize}
+              color={"red"}
+              style={{ position: "absolute", right: 16, top: 16 }}
+            />
+          )}
+          {title && <Text style={textStyles.bold.lg}>{title}</Text>}
+          {description && (
+            <Text style={textStyles.regular.md}>{description}</Text>
+          )}
+          {customSlot && <View style={{  height: childHeight,}}>{customSlot}</View>}
+          {type !== "informative" && (
+            <View style={styles.actionsContainer}>
+              <CDSButton
+                label={primaryButtonLabel}
+                onPress={
+                  onFinish
+                    ? () => settypeMVisible(!modalVisible)
+                    : primaryButtonOnPress
+                }
+              />
+              <CDSButton
+                label={secondaryButtonLabel}
+                type="ghost"
+                onPress={() => setModalVisible(!modalVisible)}
+              />
+            </View>
+          )}
+        </View>
+      </Animated.View>
+      <Animated.View
+        style={[
+          styles.overlay,
+          {
+            opacity: modalOpacity,
+            backgroundColor: theme.surface.special.overlay,
+          },
+        ]}
+      >
+        <Pressable onPress={() => setModalVisible(false)} style={{ flex: 1 }} />
+      </Animated.View>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "110%",
+    height: "104.4%",
+    zIndex: 9,
+  },
+
+  centeredView: {
+    typeBottomSheet: {
+      flex: 1,
+      justifyContent: "flex-end",
+      alignItems: "center",
+      zIndex: 99,
+      pointerEvents: "none",
+      width: "100%",
+    },
+    typeModal: {
+      justifyContent: "center",
+      alignItems: "center",
+      zIndex: 99,
+    },
+  },
+  container: {
+    typeBottomSheet: {
+      width: "100%",
+      borderTopLeftRadius: 16,
+      borderTopRightRadius: 16,
+      paddingHorizontal: 16,
+      paddingVertical: 24,
+      gap: 16,
+      zIndex: 100,
+      pointerEvents: "all",
+    },
+    typeModal: {
+      width: 600,
+      borderRadius: 16,
+      paddingHorizontal: 16,
+      paddingVertical: 24,
+      gap: 16,
+      zIndex: 100,
+      pointerEvents: "all",
+    },
+  },
+  actionsContainer: {
+    flex: "row",
+    width: "100%",
+    gap: 8,
+  },
+
+});
+

package/components/CDSButton.jsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { Text, StyleSheet, TouchableOpacity } from "react-native";
+import { Dimensions, Platform } from "react-native";
+import { MaterialIcons } from "@expo/vector-icons";
+import { useTheme } from "../context/CDSThemeContext";
+import {getSemanticTextStyles} from "../tokens/CDSsemanticTextStyles";
+
+const { width } = Dimensions.get("window");
+const isMobile = width <= 878 && Platform.OS !== "web";
+
+export const CDSButton = ({
+  label,
+  type = "primary",
+  size,
+  onPress,
+  icon,
+  flexend,
+}) => {
+  const { theme } = useTheme();
+  const textStyles = getSemanticTextStyles(theme);
+
+  const backgroundColor =
+    type === "disabled"
+      ? theme.surface.action.disabled
+      : type === "secondary" || type === "ghost" || type === "link"
+      ? "transparent"
+      : theme.surface.action.primary;
+
+  const textColor =
+    type === "secondary" || type === "ghost" || type === "link"
+      ? theme.text.neutral.primary
+      : type === "disabled"
+      ? theme.text.neutral.disabled
+      : theme.text.neutral.contrast;
+
+  return (
+    <TouchableOpacity
+      onPress={type !== "disabled" ? onPress : null}
+      activeOpacity={0.7}
+      style={[
+        styles.container,
+        { backgroundColor },
+        flexend && { justifyContent: "flex-end", paddingHorizontal: 0 },
+        isMobile && type !== "icon"
+          ? { width: "100%" }
+          : { paddingHorizontal: 12 },
+        type === "secondary" && {
+          borderColor: theme.outline.action.primary,
+          borderWidth: 1,
+        },
+        type === 'link' && {
+          paddingHorizontal: 0,
+          paddingVertical: 0,
+          width: 'auto',
+        }
+      ]}
+    >
+      {type !== "icon" && (
+        <Text
+          style={[
+            type === "link"
+              ? size === "small"
+                ? textStyles.link.small
+                : textStyles.link.regular
+              : textStyles.buttonText,
+            { color: textColor },
+          ]}
+        >
+          {label}
+        </Text>
+      )}
+      {icon && (
+        <MaterialIcons
+          name={icon}
+          size={textStyles.icon.fontSize}
+          color={textColor}
+        />
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    minWidth: 343,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 100,
+    gap: 8,
+  },
+});
+

package/components/CDSCarousel.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import { View, Image, ScrollView, Dimensions } from "react-native";
+import { useTheme } from "../context/CDSThemeContext";
+// const { width } = Dimensions.get("window");
+
+
+
+export const CDSCarousel = ({ activeIndex, scrollViewRef, onScroll, images }) => {
+  const { theme } = useTheme();
+  const [scrollViewWidth, setScrollViewWidth] = useState(0);
+  
+  const onLayout = (event) => {
+    const { width } = event.nativeEvent.layout;
+    setScrollViewWidth(width); // Establece el ancho del ScrollView
+  };
+
+  return (
+    <View style={{ alignItems: "center", marginTop: 20 }}>
+      <ScrollView
+        ref={scrollViewRef}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        onScroll={onScroll}
+        scrollEventThrottle={16}
+        style={{ width: '100%', }}
+        contentContainerStyle={{ width: scrollViewWidth * images.length, alignItems: 'center' }
+        }
+        onLayout={onLayout}
+      >
+        {images.map((image, index) => (
+          <View key={index} style={{ width: scrollViewWidth, justifyContent: 'center', alignItems: 'center', backgroundColor: 'red' }}>
+            <Image
+              source={image}
+              style={{
+                height: 353,
+              }}
+              resizeMode={"cover"}
+            />
+          </View>
+        ))}
+      </ScrollView>
+      <View style={{ flexDirection: "row", marginTop: 10 }}>
+        {images.map((_, index) => (
+          <View
+            key={index}
+            style={{
+              width: activeIndex === index ? 14 : 10,
+              height: 10,
+              borderRadius: 5,
+              backgroundColor: activeIndex === index ? theme.surface.special.progress : theme.surface.special.progressbarBg,
+              marginHorizontal: 5,
+            }}
+          />
+        ))}
+      </View>
+    </View>
+  );
+};
+

package/components/CDSCarouselDots.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { View, Animated, StyleSheet, Dimensions } from "react-native";
+
+const { width } = Dimensions.get("window");
+
+const PaginationDots = ({ data, scrollX, itemWidth }) => {
+  const dotWidth = 10; // Ancho de cada dot
+  const spacing = 5; // Espaciado entre dots
+
+  // Calcular la posición del dot activo
+  const translateX = scrollX.interpolate({
+    inputRange: data.map((_, index) => index * itemWidth),
+    outputRange: data.map((_, index) => index * (dotWidth + spacing)),
+    extrapolate: "clamp",
+  });
+
+  return (
+    <View style={styles.container}>
+      {/* Dots estáticos */}
+      {data.map((_, index) => (
+        <View key={index} style={styles.dot} />
+      ))}
+
+      {/* Dot animado que se mueve */}
+      <Animated.View
+        style={[styles.activeDot, { transform: [{ translateX }] }]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    marginTop: 10,
+    justifyContent: "center",
+    position: "relative",
+  },
+  dot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: "gray",
+    marginHorizontal: 5,
+  },
+  activeDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: "black",
+    position: "absolute",
+    left: 0,
+  },
+});
+
+export default PaginationDots;

package/components/CDSInput.jsx

@@ -0,0 +1,54 @@
+import { StyleSheet, Text, TextInput, View } from "react-native";
+import { useTheme } from "../context/CDSThemeContext";
+import getSemanticTextStyles from "../tokens/CDSsemanticTextStyles";
+import { useState } from "react";
+
+export default function StyledInput({ label, type, keyboard, placeholder }) {
+  const { theme } = useTheme();
+  const textStyles = getSemanticTextStyles(theme);
+  const [text, setText] = useState("");
+
+  return (
+    <View style={[styles.container]}>
+      <Text
+        style={[
+          textStyles.label,
+        ]}
+      >
+        {label}
+      </Text>
+      {text === "" && (
+        <Text style={[styles.fakePlaceholder, textStyles.inputText.placeholder]}>
+          {placeholder}
+        </Text>
+      )}
+      <TextInput
+        style={[styles.textBox, textStyles.inputText.value, {backgroundColor:theme.surface.neutral.primary, borderColor: theme.outline.neutral.primary }]}
+        keyboardType={keyboard}
+        secureTextEntry={type === "password" ? true : false}
+        onChangeText={setText}
+        value={text}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    gap: 8,
+  },
+
+  fakePlaceholder: {
+    position: "absolute",
+    zIndex: 1,
+    left: 14,
+    top: 40,
+  },
+
+  textBox: {
+    padding: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+  },
+});

package/components/CDSOnboarding.jsx

@@ -0,0 +1,70 @@
+import React, { act, useRef, useState } from "react";
+import { Dimensions } from "react-native";
+import {CDSBottomSheet} from "./CDSBottomSheet";
+import {CDSCarousel} from "./CDSCarousel";
+import { useTheme } from "../context/CDSThemeContext";
+import { Onboarding } from "./Onboarding";
+const { width } = Dimensions.get("window");
+
+export const CDSOnboarding = () => {
+  const { isDarkMode } = useTheme();
+  const scrollViewRef = useRef(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [isLastSlide, setIsLastSlide] = useState(false);
+
+  const images = !isDarkMode
+    ? [
+        require("../assets/onboarding/image1.png"),
+        require("../assets/onboarding/image2.png"),
+        require("../assets/onboarding/image3.png"),
+      ]
+    : [
+        require("../assets/onboarding/image1D.png"),
+        require("../assets/onboarding/image2D.png"),
+        require("../assets/onboarding/image3D.png"),
+      ];
+
+  const handleScroll = (event) => {
+    const index = Math.round(event.nativeEvent.contentOffset.x / width);
+    setActiveIndex(index);
+    setIsLastSlide(index === images.length - 1);
+  };
+
+  const handleNext = () =>
+    !isLastSlide &&
+    scrollViewRef.current.scrollTo({
+      x: (activeIndex + 1) * width,
+      animated: true,
+    });
+
+  return (
+    <CDSBottomSheet
+      isVisible
+      customSlot={
+        <CDSCarousel
+          activeIndex={activeIndex}
+          scrollViewRef={scrollViewRef}
+          onScroll={handleScroll}
+          images={images}
+        />
+      }
+      title={
+        (activeIndex === 0 && "Tus boletas en un solo lugar") ||
+        (activeIndex === 1 && "Realiza tus pagos") ||
+        (activeIndex === 2 && "Tu eliges cuánto pagar")
+      }
+      description={
+        (activeIndex === 0 &&
+          "Conoce el estado general de tus boletas y dales seguimiento desde la aplicación.") ||
+        (activeIndex === 1 &&
+          "Puedes refrendar o pagar tus desempeños con diferentes métodos de pago.") ||
+        (activeIndex === 2 &&
+          "Con “Pagos libres” elige la cantidad, reduce los intereses y abona a capital desde el primer día.")
+      }
+      primaryButtonLabel={!isLastSlide ? "Siguiente" : "Finalizar"}
+      primaryButtonOnPress={handleNext}
+      onFinish={isLastSlide && true}
+      secondaryButtonLabel="Ahora no"
+    />
+  );
+};

package/components/CDSSwitch.jsx

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import { View, Text, Switch, StyleSheet } from "react-native";
+import { useTheme } from "../context/CDSThemeContext";
+import getSemanticTextStyles from "../tokens/CDSsemanticTextStyles";
+
+export default function CDSSwitch({ label }) {
+  const { theme } = useTheme();
+  const textStyles = getSemanticTextStyles(theme);
+  const [isEnabled, setIsEnabled] = useState(false);
+
+  const toggleSwitch = () => setIsEnabled((previousState) => !previousState);
+
+  return (
+    <View style={styles.container}>
+      <Text style={textStyles.label}>
+        {label}
+      </Text>
+      <Switch onValueChange={toggleSwitch} value={isEnabled} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+});

package/components/CustomSlotDebug.jsx

@@ -0,0 +1,14 @@
+import React, { useEffect } from 'react';
+import { Platform } from 'react-native';
+
+const CustomSlotDebug = ({ customSlot, isVisible }) => {
+    useEffect(() => {
+        console.log('Platform:', Platform.OS);
+        console.log('Custom Slot:', customSlot);
+        console.log('Is Visible:', isVisible);
+    }, [customSlot, isVisible]);
+
+    return <>{customSlot}</>;
+};
+
+export default CustomSlotDebug;