native-pytech 1.0.1

package/dist/libs/page/src/components/PageWrapper/index.js

@@ -0,0 +1,13 @@
+import React, { memo } from 'react';
+import WithIcon from '../WithIcon';
+import Page from '../Page';
+/**
+    Crea una Página con ScrollView.
+*/
+const PageComponent = memo(({ children, style }) => {
+    return (<Page style={style}>
+            {children}
+        </Page>);
+});
+PageComponent.WithIcon = WithIcon;
+export default PageComponent;

package/dist/libs/page/src/components/PageWrapper/types.d.ts

@@ -0,0 +1,16 @@
+import { StyleProp, ViewStyle } from "react-native";
+import WithIcon from "../WithIcon";
+type Props = {
+    /**
+        Children
+    */
+    children: React.ReactNode;
+    /**
+        contentContainerStyle de la ScrollView.
+    */
+    style?: StyleProp<ViewStyle>;
+};
+export type Component = React.MemoExoticComponent<React.FC<Props>> & {
+    WithIcon: typeof WithIcon;
+};
+export default Props;

package/dist/libs/page/src/components/PageWrapper/types.js

@@ -0,0 +1 @@
+export {};

package/dist/libs/page/src/components/Subtitle.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const _default: React.MemoExoticComponent<({ text }: {
+    text: string;
+}) => React.JSX.Element>;
+export default _default;

package/dist/libs/page/src/components/Subtitle.js

@@ -0,0 +1,9 @@
+import React, { memo } from "react";
+import { Text } from "react-native";
+import colors from "../constants";
+import { useApp } from "../../../../libs/providers/App";
+export default memo(({ text }) => {
+    const { colorScheme } = useApp();
+    const Theme = colors[colorScheme];
+    return <Text style={{ color: Theme.text2, fontSize: 22 }}>{text}</Text>;
+});

package/dist/libs/page/src/components/WithIcon/index.d.ts

@@ -0,0 +1,3 @@
+import { Component } from './types';
+declare const WithIcon: Component;
+export default WithIcon;

package/dist/libs/page/src/components/WithIcon/index.js

@@ -0,0 +1,47 @@
+import React, { memo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useApp } from "../../../../../libs/providers/App";
+import colors from '../../constants';
+import PageWrapper from '../PageWrapper';
+import Subtitle from '../Subtitle';
+const WithIcon = memo(({ children, renderIcon, style, title, subtitle, renderSubtitle }) => {
+    const { colorScheme } = useApp();
+    const Theme = colors[colorScheme];
+    return (<PageWrapper style={style}>
+            {renderIcon &&
+            <View style={styles.viewIcon}>
+                    {renderIcon()}
+                </View>}
+            {(title || renderSubtitle) && (<View style={styles.viewTitle}>
+                    {title && <Text style={[styles.title, { color: Theme.text }]}>{title}</Text>}
+                    {subtitle && <Text style={[styles.subtitle, { color: Theme.text2 }]}>{subtitle}</Text>}
+                    {renderSubtitle?.()}
+                </View>)}
+            {children}
+        </PageWrapper>);
+});
+WithIcon.Subtitle = Subtitle;
+export default WithIcon;
+const styles = StyleSheet.create({
+    viewIcon: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 83,
+        marginTop: 22,
+        marginBottom: 39.5,
+    },
+    viewTitle: {
+        gap: 1,
+        marginHorizontal: 38,
+        marginBottom: 30,
+        flex: 1,
+    },
+    title: {
+        fontSize: 22,
+        fontWeight: '700',
+    },
+    subtitle: {
+        fontSize: 22,
+    }
+});

package/dist/libs/page/src/components/WithIcon/types.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import Subtitle from '../Subtitle';
+import PropsPageWrapper from '../PageWrapper/types';
+type Props = {
+    children?: React.ReactNode;
+    renderIcon?: () => React.ReactNode;
+    style?: PropsPageWrapper['style'];
+    title?: string;
+    subtitle?: string;
+    renderSubtitle?: () => React.ReactElement<typeof Subtitle>;
+};
+export type Component = React.MemoExoticComponent<React.FC<Props>> & {
+    Subtitle: typeof Subtitle;
+};
+export default Props;

package/dist/libs/page/src/components/WithIcon/types.js

@@ -0,0 +1 @@
+export {};

package/dist/libs/page/src/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const colors: {
+    light: {
+        text: string;
+        text2: string;
+    };
+    dark: {
+        text: string;
+        text2: string;
+    };
+};
+export { type ColorSchemeType } from "../../../libs/constants/colors";
+export default colors;

package/dist/libs/page/src/constants.js

@@ -0,0 +1,12 @@
+import colorsLib from "../../../libs/constants/colors";
+export const colors = {
+    light: {
+        text: colorsLib.light.text,
+        text2: colorsLib.light.text2Libretas
+    },
+    dark: {
+        text: colorsLib.dark.text,
+        text2: colorsLib.dark.text2Libretas
+    }
+};
+export default colors;

package/dist/libs/providers/App/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { ColorSchemeType } from "../constants";
+import type Props from './types';
+declare const useApp: () => {
+    colorScheme: ColorSchemeType;
+    fontScale: number;
+};
+export { useApp };
+declare const _default: React.MemoExoticComponent<({ listStackNames, getBackgroundColor, getSession, renderItemLoading, onLoadingRealsed, }: Props) => React.JSX.Element>;
+export default _default;

package/dist/libs/providers/App/index.js

@@ -0,0 +1,62 @@
+import React, { memo, useMemo, useState, useRef } from "react";
+import { Stack, useRouter } from "expo-router";
+import { useColorScheme, useWindowDimensions, View, StyleSheet } from "react-native";
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
+import handleFontObserver from '../../../libs/constants/handleFontObserver';
+handleFontObserver(); // esto intercepta todos los timeouts de fuentes
+import { createCtx } from "../../../libs/constants/utils";
+import LoginSvg from '../../assets/images/login_letras.svg';
+import LoginSvgDark from '../../assets/images/login_letras_dark.svg';
+import { useAsyncEffect, useEffectWithoutFirstRender } from '../../../libs/constants/hooks';
+import colors from "../constants";
+const [Provider, useApp] = createCtx();
+export { useApp };
+export default memo(({ listStackNames = [], getBackgroundColor, getSession, renderItemLoading = ({ colorScheme }) => (colorScheme === 'dark' ?
+    <LoginSvgDark width={200} height={200}/>
+    :
+        <LoginSvg width={200} height={200}/>), onLoadingRealsed, }) => {
+    // -------------- Variables --------------
+    const colorScheme = useColorScheme();
+    const Theme = colors[colorScheme];
+    const { fontScale } = useWindowDimensions();
+    const router = useRouter();
+    const [isLoading, setIsLoading] = useState(true);
+    const hasSessionRef = useRef(false);
+    // -------------- Effects --------------
+    useEffectWithoutFirstRender(() => {
+        if (!isLoading)
+            onLoadingRealsed?.({ router, hasSession: hasSessionRef.current });
+    }, [isLoading]);
+    useAsyncEffect(async (isMounted) => {
+        hasSessionRef.current = (await getSession?.()) ?? true;
+        if (!isMounted)
+            return;
+        setIsLoading(false);
+    }, []);
+    // -------------- Return --------------
+    const value = useMemo(() => ({ colorScheme: colorScheme, fontScale: fontScale }), [colorScheme, fontScale]);
+    if (isLoading) {
+        return (<View style={[styles.container, { backgroundColor: getBackgroundColor?.({ colorScheme }) || Theme.backgroundColor }]}>
+                {renderItemLoading({ colorScheme })}
+            </View>);
+    }
+    return (<SafeAreaProvider>
+            <Provider value={value}>
+                <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+                    
+                    <Stack screenOptions={{ headerShown: false }}>
+                        {listStackNames?.map((name) => (<Stack.Screen key={name} name={name}/>))}
+                    </Stack>
+
+                </ThemeProvider>
+            </Provider>
+        </SafeAreaProvider>);
+});
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    }
+});

package/dist/libs/providers/App/types.d.ts

@@ -0,0 +1,35 @@
+import { ColorSchemeType } from "../../../libs/constants/colors";
+import { Router } from "expo-router";
+type Props = {
+    /**
+     Lista de nombres de los Stacks que se deben renderizar.
+     */
+    listStackNames?: string[];
+    /**
+        Función para obtener el color de fondo de las paginas por defecto.
+    */
+    getBackgroundColor?: ({ colorScheme }: {
+        colorScheme: ColorSchemeType;
+    }) => string;
+    /**
+        Función para inicializar la sesión.
+        @default true
+    */
+    getSession?: () => Promise<boolean>;
+    /**
+     Función para renderizar el item cuando está cargando.
+        @default LoginSvg (white | black)
+    */
+    renderItemLoading?: ({ colorScheme }: {
+        colorScheme: ColorSchemeType;
+    }) => React.ReactNode;
+    /**
+        Función para ejecutar cuando se realice el cambio de estado de loading a false.
+        Se utiliza para redirigir a la página de inicio.
+    */
+    onLoadingRealsed?: ({ router, hasSession }: {
+        router: Router;
+        hasSession: boolean;
+    }) => void;
+};
+export default Props;

package/dist/libs/providers/App/types.js

@@ -0,0 +1 @@
+export {};

package/dist/libs/providers/constants.d.ts

@@ -0,0 +1,10 @@
+declare const colors: {
+    light: {
+        backgroundColor: string;
+    };
+    dark: {
+        backgroundColor: string;
+    };
+};
+export { type ColorSchemeType } from "../../libs/constants/colors";
+export default colors;

package/dist/libs/providers/constants.js

@@ -0,0 +1,10 @@
+import colorsLib from "../../libs/constants/colors";
+const colors = {
+    light: {
+        backgroundColor: colorsLib.light.backgroundColor3,
+    },
+    dark: {
+        backgroundColor: colorsLib.dark.backgroundColor3,
+    }
+};
+export default colors;

package/dist/libs/segmentedControl/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./src/components/Wrapper";
+export { default as Provider, useShared } from "./src/context/shared";

package/dist/libs/segmentedControl/index.js

@@ -0,0 +1,2 @@
+export { default } from "./src/components/Wrapper";
+export { default as Provider, useShared } from "./src/context/shared";

package/dist/libs/segmentedControl/src/colors.d.ts

@@ -0,0 +1,15 @@
+export declare const colors: {
+    light: {
+        text: string;
+        text2: string;
+        background: string;
+        chip: string;
+    };
+    dark: {
+        text: string;
+        text2: string;
+        background: string;
+        chip: string;
+    };
+};
+export default colors;

package/dist/libs/segmentedControl/src/colors.js

@@ -0,0 +1,16 @@
+import colorsLib from "../../../libs/constants/colors";
+export const colors = {
+    light: {
+        text: colorsLib.light.text,
+        text2: colorsLib.light.text2Libretas,
+        background: colorsLib.light.backgroundColor,
+        chip: 'hsl(0, 0%, 93%)',
+    },
+    dark: {
+        text: colorsLib.dark.text,
+        text2: colorsLib.dark.text2Libretas,
+        background: colorsLib.dark.backgroundColor2,
+        chip: 'hsl(0, 0%, 23%)',
+    }
+};
+export default colors;

package/dist/libs/segmentedControl/src/components/AnimatedChip/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import Props from './types';
+declare const _default: React.MemoExoticComponent<({ isScrollable, onFinishedSelectedIndex, onChangeEqualWidths, widthsShared, widthContainerShared }: Props) => React.JSX.Element>;
+export default _default;

package/dist/libs/segmentedControl/src/components/AnimatedChip/index.js

@@ -0,0 +1,79 @@
+import React, { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, { interpolate, useAnimatedStyle, useDerivedValue, useAnimatedReaction } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+import { useApp } from '../../../../../libs/providers/App';
+import { useShared } from '../../context/shared';
+import colors from '../../colors';
+export default memo(({ isScrollable, onFinishedSelectedIndex, onChangeEqualWidths, widthsShared, widthContainerShared }) => {
+    // ---------------- Variables ----------------
+    const { colorScheme } = useApp();
+    const Theme = colors[colorScheme];
+    const { selectedIndexShared } = useShared();
+    // ---------------- useDerivedValue ----------------
+    const equalWidthsShared = useDerivedValue(() => {
+        if (!isScrollable)
+            return true;
+        const widthContainer = widthContainerShared.value;
+        const widths = widthsShared.value;
+        const sumWidths = widths.reduce((acc, width) => acc + width, 0);
+        return sumWidths <= widthContainer;
+    });
+    const idxInferiorShared = useDerivedValue(() => Math.floor(selectedIndexShared.value));
+    const idxSuperiorShared = useDerivedValue(() => Math.ceil(selectedIndexShared.value));
+    const leftChipShared = useDerivedValue(() => {
+        const widths = widthsShared.value;
+        const inferior = idxInferiorShared.value;
+        const superior = idxSuperiorShared.value;
+        // Los widths son iguales
+        if (equalWidthsShared.value) {
+            const width = widthContainerShared.value / widths.length;
+            const newLeft = interpolate(selectedIndexShared.value, [inferior, superior], [inferior * width, superior * width]);
+            return newLeft;
+        }
+        // Varian los widths
+        const leftInferior = widths.slice(0, inferior).reduce((acc, width) => acc + (width || 0), 0);
+        const leftSuperior = widths.slice(0, superior).reduce((acc, width) => acc + (width || 0), 0);
+        const newLeft = interpolate(selectedIndexShared.value, [inferior, superior], [leftInferior, leftSuperior]);
+        return newLeft;
+    });
+    const widthChipShared = useDerivedValue(() => {
+        const widths = widthsShared.value;
+        if (equalWidthsShared.value)
+            return widthContainerShared.value / widths.length;
+        const inferior = idxInferiorShared.value;
+        const superior = idxSuperiorShared.value;
+        const widthInferior = widths[inferior] || 0;
+        const widthSuperior = widths[superior] || 0;
+        const newWidth = interpolate(selectedIndexShared.value, [inferior, superior], [widthInferior, widthSuperior]);
+        return newWidth;
+    });
+    // ---------------- useAnimatedReaction ----------------
+    useAnimatedReaction(() => selectedIndexShared.value, (value, prev) => {
+        if (prev === value)
+            return;
+        const hasFinished = Number.isInteger(value);
+        if (hasFinished && onFinishedSelectedIndex)
+            scheduleOnRN(onFinishedSelectedIndex, value);
+    });
+    useAnimatedReaction(() => equalWidthsShared.value, (value) => {
+        onChangeEqualWidths && scheduleOnRN(onChangeEqualWidths, value);
+    });
+    // ---------------- useAnimatedStyle ----------------
+    const animatedStyle = useAnimatedStyle(() => {
+        return { width: widthChipShared.value, left: leftChipShared.value };
+    });
+    return (<Animated.View style={[styles.container, animatedStyle]}>
+            <View style={[styles.chip, { backgroundColor: Theme.chip }]}/>
+        </Animated.View>);
+});
+const styles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        height: '100%',
+    },
+    chip: {
+        flex: 1,
+        borderRadius: 999,
+    },
+});

package/dist/libs/segmentedControl/src/components/AnimatedChip/types.d.ts

@@ -0,0 +1,28 @@
+import type { SharedValue } from "react-native-reanimated";
+type Props = {
+    /**
+        Para ver el ancho del chip.
+    */
+    isScrollable: boolean;
+    /**
+        Se ejecuta cuando el index seleccionado ha terminado de animar (selectedIndexShared).
+        Está dentro de un useAnimatedReaction. Se ejecuta con scheduleOnRN.
+    */
+    onFinishedSelectedIndex?: (index: number) => void;
+    /**
+        Se ejecuta cuando cambia el valor de equalWidthsShared.
+        Está dentro de un useAnimatedReaction. Se ejecuta con scheduleOnRN.
+    */
+    onChangeEqualWidths?: (equalWidths: boolean) => void;
+    /**
+        Usado en el cálculo de equalWidthsShared, leftChipShared, widthChipShared.
+        Se utiliza dentro de useDerivedValue.
+    */
+    widthsShared: SharedValue<number[]>;
+    /**
+        Usado en el cálculo de equalWidthsShared, leftChipShared, widthChipShared.
+        Se utiliza dentro de useDerivedValue.
+    */
+    widthContainerShared: SharedValue<number>;
+};
+export default Props;

package/dist/libs/segmentedControl/src/components/AnimatedChip/types.js

@@ -0,0 +1 @@
+export {};

package/dist/libs/segmentedControl/src/components/Container/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import Props from './types';
+declare const _default: React.MemoExoticComponent<({ children, onLayout, style }: Props) => React.JSX.Element>;
+export default _default;

package/dist/libs/segmentedControl/src/components/Container/index.ios.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import Props from './types';
+declare const _default: React.MemoExoticComponent<({ children, onLayout, style }: Props) => React.JSX.Element>;
+export default _default;

package/dist/libs/segmentedControl/src/components/Container/index.ios.js

@@ -0,0 +1,15 @@
+import { GlassView } from "expo-glass-effect";
+import React, { memo } from "react";
+import { StyleSheet } from "react-native";
+export default memo(({ children, onLayout, style }) => {
+    return (<GlassView glassEffectStyle={'clear'} style={[styles.container, style]} onLayout={onLayout}>
+            {children}
+        </GlassView>);
+});
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 999,
+        minHeight: 32,
+        overflow: 'hidden',
+    }
+});

package/dist/libs/segmentedControl/src/components/Container/index.js

@@ -0,0 +1,18 @@
+import React, { memo } from "react";
+import { View, StyleSheet } from "react-native";
+import { useApp } from "../../../../../libs/providers/App";
+import colors from "../../colors";
+export default memo(({ children, onLayout, style }) => {
+    const { colorScheme } = useApp();
+    const Theme = colors[colorScheme];
+    return (<View style={[styles.container, { backgroundColor: Theme.background }, style]} onLayout={onLayout}>
+            {children}
+        </View>);
+});
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 999,
+        minHeight: 32,
+        overflow: 'hidden',
+    }
+});

package/dist/libs/segmentedControl/src/components/Container/types.d.ts

@@ -0,0 +1,16 @@
+import { LayoutChangeEvent, StyleProp, ViewStyle } from "react-native";
+type Props = {
+    /**
+        Children del componente.
+    */
+    children: React.ReactNode;
+    /**
+        Función para obtener el ancho del contenedor.
+    */
+    onLayout: (event: LayoutChangeEvent) => void;
+    /**
+        Style del contenedor.
+    */
+    style?: StyleProp<ViewStyle>;
+};
+export default Props;

package/dist/libs/segmentedControl/src/components/Container/types.js

@@ -0,0 +1 @@
+export {};

package/dist/libs/segmentedControl/src/components/Item/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type Props from "./types";
+declare const _default: React.MemoExoticComponent<({ text, onPress, onLayout, textStyle, }: Props) => React.JSX.Element>;
+export default _default;

package/dist/libs/segmentedControl/src/components/Item/index.js

@@ -0,0 +1,26 @@
+import React, { memo } from "react";
+import { Pressable, StyleSheet, Text } from "react-native";
+import { useApp } from "../../../../../libs/providers/App";
+import colors from "../../colors";
+export default memo(({ text, onPress, onLayout, textStyle, }) => {
+    const { colorScheme } = useApp();
+    const Theme = colors[colorScheme];
+    return (<Pressable style={styles.pressable} onPress={onPress} onLayout={onLayout}>
+            <Text numberOfLines={1} style={[styles.text, { color: Theme.text }, textStyle]}>
+                {text}
+            </Text>
+        </Pressable>);
+});
+const styles = StyleSheet.create({
+    pressable: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 15,
+        overflow: 'hidden',
+    },
+    text: {
+        fontSize: 13,
+        fontWeight: '600',
+    }
+});

package/dist/libs/segmentedControl/src/components/Item/types.d.ts

@@ -0,0 +1,20 @@
+import { LayoutChangeEvent, StyleProp, TextStyle } from "react-native";
+type Props = {
+    /**
+        Texto del item.
+    */
+    text: string;
+    /**
+        onPress del Pressable.
+    */
+    onPress: () => void;
+    /**
+        onLayout del Pressable.
+    */
+    onLayout: (event: LayoutChangeEvent) => void;
+    /**
+        style del texto.
+    */
+    textStyle?: StyleProp<TextStyle>;
+};
+export default Props;

package/dist/libs/segmentedControl/src/components/Item/types.js

@@ -0,0 +1 @@
+export {};

package/dist/libs/segmentedControl/src/components/Segmented/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import Props from './types';
+declare const _default: React.MemoExoticComponent<({ data, selectedIndex, setCurrentSelectedIndex, isScrollable, style, contentContainerStyle, ...itemProps }: Props) => React.JSX.Element>;
+export default _default;