native-pytech 1.0.1

package/dist/libs/table/src/components/OptionComponents/textView.js

@@ -0,0 +1,18 @@
+import React, { memo, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+/**
+    Pone el padding según el typeOption.
+*/
+export default memo(({ children, style = {}, isSingleLine, ...props }) => {
+    isSingleLine = useMemo(() => isSingleLine ?? (React.Children.count(children) <= 1), [children]);
+    const containerStyle = useMemo(() => [styles.container, { paddingVertical: isSingleLine ? 16.35 : 10 }, style], [isSingleLine, style]);
+    return (<View style={containerStyle} {...props}>
+            {children}
+        </View>);
+});
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'column',
+        gap: 2,
+    }
+});

package/dist/libs/table/src/components/OptionWrapper/index.d.ts

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

package/dist/libs/table/src/components/OptionWrapper/index.js

@@ -0,0 +1,9 @@
+import React, { memo } from 'react';
+import ThemeComponent from '../../../../../libs/components/Theme';
+import * as OptionComponents from '../OptionComponents';
+import Wrapper from '../Wrapper';
+const OptionWrapper = memo(({ ...props }) => {
+    return <ThemeComponent component={Wrapper} {...props}/>;
+});
+OptionWrapper.Components = OptionComponents;
+export default OptionWrapper;

package/dist/libs/table/src/components/OptionWrapper/types.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import { ViewProps } from "react-native";
+import { type ColorSchemeType } from "../../constants";
+import OptionProps from "../Option/types";
+import { DeleteIcon, DragIcon, Icon, Image, Text, TextInput, TextInputCurrency, TextView } from '../OptionComponents';
+export type Props = OptionProps & {
+    id: string;
+    isAnimated: boolean;
+    /**
+        Borde de la opción.
+        Es un dict con { left: 17, right: 16 } por defecto.
+    */
+    borders: {
+        color: string | null;
+        shownTop: boolean | null;
+        shownBottom: boolean | null;
+        left: number;
+        right: number;
+    } | undefined;
+} & ViewProps;
+export type OptionComponent = React.MemoExoticComponent<React.FC<Props & {
+    colorScheme?: ColorSchemeType;
+}>> & {
+    Components: {
+        DeleteIcon: typeof DeleteIcon;
+        DragIcon: typeof DragIcon;
+        Icon: typeof Icon;
+        Image: typeof Image;
+        Text: typeof Text;
+        TextInput: typeof TextInput;
+        TextInputCurrency: typeof TextInputCurrency;
+        TextView: typeof TextView;
+    };
+};
+export default Props;

package/dist/libs/table/src/components/OptionWrapper/types.js

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

package/dist/libs/table/src/components/Table/index.d.ts

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

package/dist/libs/table/src/components/Table/index.js

@@ -0,0 +1,90 @@
+import { useObservable } from '@legendapp/state/react';
+import React, { memo, useMemo } from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import Animated, { Easing, FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated';
+import colors from '../../constants';
+import { useEffectWithoutFirstRender } from '../../../../../libs/constants/hooks';
+import { useApp } from '../../../../../libs/providers/App';
+import { isLowTier } from '../../../../../libs/constants/consts';
+import { BordersProvider, StoreProvider, TableProvider } from '../../context/table';
+import OptionWrapper from '../OptionWrapper';
+import Detail from '../Detail';
+const Table = memo(({ children, title, renderDetail, colorThemeType = 'default', type = 'default', style, contentContainerStyle, allBorders = false, keys, }) => {
+    // ------------- Variables -------------
+    const { colorScheme } = useApp();
+    const Theme = colors.theme[colorScheme];
+    const store = useObservable({
+        pressed_id: null,
+        deleted: {
+            setted: false,
+            id: null,
+            keys: keys,
+            lastId: (() => {
+                const newKeys = store.deleted.keys.get();
+                return (newKeys?.[newKeys.length - 1] ?? null);
+            }),
+            firstId: (() => {
+                const newKeys = store.deleted.keys.get();
+                return (newKeys?.[0] ?? null);
+            }),
+        },
+        borders: new Map()
+    });
+    const layoutAnimation = isLowTier ? LinearTransition.duration(500) : LinearTransition.easing(Easing.bezier(0.2, 0.2, 0, 1)).duration(600);
+    // ------------- useEffect -------------
+    useEffectWithoutFirstRender(() => store.deleted.keys.set(keys), [keys]);
+    const value = useMemo(() => ({ colorThemeType, type, keys, allBorders }), [colorThemeType, type, keys, allBorders]);
+    return (<Animated.View key={title || 'title'} layout={Platform.OS === 'web' ? undefined : LinearTransition.duration(100).easing(Easing.bezier(0.1, 0.1, 0, 1))} style={[
+            styles.container,
+            type === 'default' ? { marginRight: 16, marginLeft: 16, marginBottom: renderDetail ? 20 : 30 } : {},
+            style
+        ]}>
+            {title &&
+            <Animated.Text key={title} style={[styles.title, { color: Theme.text2 }]} exiting={FadeOut.duration(100)} entering={FadeIn.duration(100)}>
+                    {title}
+                </Animated.Text>}
+
+            <Animated.View exiting={FadeOut.duration(100)} entering={FadeIn.duration(100)} layout={layoutAnimation} style={[
+            styles.contentContainer,
+            { backgroundColor: colors.table[colorThemeType][colorScheme].background },
+            contentContainerStyle,
+            type === 'default' ? { borderRadius: 26 } : {},
+        ]}>
+                <TableProvider value={value}>
+                    <StoreProvider value={store}>
+                        <BordersProvider value={store.borders}>
+                            {children}
+                        </BordersProvider>
+                    </StoreProvider>
+                </TableProvider>
+            </Animated.View>
+
+
+            {renderDetail &&
+            <Animated.View entering={FadeIn.duration(100)} exiting={FadeOut.duration(100)}>
+                    {renderDetail()}
+                </Animated.View>}
+        </Animated.View>);
+});
+const styles = StyleSheet.create({
+    container: {
+        gap: 6,
+    },
+    title: {
+        marginLeft: 16,
+        fontSize: 17,
+        fontWeight: '600',
+    },
+    contentContainer: {
+        overflow: 'hidden',
+        position: 'relative',
+    },
+    viewDetail: {
+        marginTop: 1.5,
+        marginLeft: 15,
+        marginRight: 16
+    }
+});
+Table.Detail = Detail;
+Table.Option = OptionWrapper;
+export default Table;

package/dist/libs/table/src/components/Table/types.d.ts

@@ -0,0 +1,70 @@
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { type ColorThemeType } from '../../constants';
+import OptionWrapper from '../OptionWrapper';
+import Detail from '../Detail';
+type Props = {
+    /**
+        Opciones de la tabla.
+        Tiene que ser una lista de Options.
+    */
+    children?: (React.ReactElement<typeof OptionWrapper>)[];
+    /**
+        Texto que aparece arriba de la tabla.
+        Si es null, no se muestra.
+    */
+    title?: string;
+    /**
+        Item que aparece abajo de la tabla.
+        Si es null, no se muestra.
+        Tiene que ser un Animated.Text.
+    */
+    renderDetail?: () => React.ReactElement<typeof Detail>;
+    /**
+        Tipo de tema de la tabla.
+    */
+    colorThemeType?: ColorThemeType;
+    /**
+        Tipo de tema de la tabla.
+        'default' | 'full'.
+    */
+    type?: 'default' | 'full';
+    /**
+        Estilos de la contTable.
+        Es un Animated.View.
+    */
+    style?: StyleProp<ViewStyle>;
+    /**
+        Estilos de la contTable.
+        Es un Animated.View.
+    */
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    /**
+        Lista de keys de los children. Sirve para el delete.
+    */
+    keys?: string[] | undefined;
+    /**
+        Indica si se muestran todos los bordes de las opciones.
+        Se muestran todos los bottom y el top del primero
+    */
+    allBorders?: boolean;
+};
+export type Component = React.MemoExoticComponent<React.FC<Props>> & {
+    Option: typeof OptionWrapper;
+    Detail: typeof Detail;
+};
+export type Store = {
+    pressed_id: string | null;
+    deleted: {
+        setted: boolean;
+        id: string | null;
+        keys: string[] | undefined;
+        lastId: string | null;
+        firstId: string | null;
+    };
+    borders: Map<string, {
+        top: (show: boolean) => void;
+        bottom: (show: boolean) => void;
+    }>;
+};
+export default Props;

package/dist/libs/table/src/components/Table/types.js

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

package/dist/libs/table/src/components/Wrapper.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import Props from './OptionWrapper/types';
+declare const _default: React.MemoExoticComponent<({ children, childrenLeft, childrenRight, onPress, onDelete, onDeleteShown, removeWidth, id, style, isAnimated, borders, backgroundColorPressed, LinearGradientProps, layoutAnimation, colorScheme, hasTextView, ...props }: Props) => React.JSX.Element>;
+export default _default;

package/dist/libs/table/src/components/Wrapper.js

@@ -0,0 +1,49 @@
+import Animated, { Easing, FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated';
+import { View } from 'react-native';
+import React, { memo } from 'react';
+import colors from '../constants';
+import { isLowTier } from '../../../../libs/constants/consts';
+import { useTable } from '../context/table';
+import Delete from './Delete';
+import BordersContextWrapper from '../context/borders';
+import Borders from './Borders';
+import Option, { left, right } from './Option';
+const ViewDelete = memo(({ children, colorScheme, ...props }) => {
+    const { colorThemeType } = useTable();
+    return (<View style={{ backgroundColor: colors.table[colorThemeType][colorScheme].background }} {...props}>
+            {children}
+        </View>);
+});
+export default memo(({ children, childrenLeft, childrenRight, onPress, onDelete, onDeleteShown, removeWidth, id, style, isAnimated = true, borders = {
+    left: left,
+    right: right,
+    shownTop: null,
+    shownBottom: null,
+    color: null
+}, backgroundColorPressed, LinearGradientProps, layoutAnimation = isLowTier ?
+    LinearTransition.duration(500) : LinearTransition.easing(Easing.bezier(0.2, 0.2, 0, 1)).duration(600), colorScheme, hasTextView, ...props }) => {
+    // Restricciones
+    if (onDelete && onPress)
+        throw new Error('onDelete y onPress no pueden ser usados juntos');
+    let content = (<>
+        <Option colorScheme={colorScheme} hasTextView={hasTextView} childrenLeft={childrenLeft} childrenRight={childrenRight} onPress={onPress} style={style} backgroundColorPressed={backgroundColorPressed} LinearGradientProps={LinearGradientProps}>
+            {children}
+        </Option>
+        {borders && <Borders id={id} borders={borders}/>}
+    </>);
+    // onDelete
+    content = onDelete ? (<Delete id={id} removeWidth={removeWidth} onDelete={onDelete} onDeleteShown={onDeleteShown}>
+            <ViewDelete colorScheme={colorScheme} {...props}>
+                {content}
+            </ViewDelete>
+        </Delete>) : (props ? <View {...props}>{content}</View> : content);
+    // Borders
+    content = borders && (borders?.shownTop == null || borders?.shownBottom == null) ? (<BordersContextWrapper>
+            {content}
+        </BordersContextWrapper>) : content;
+    if (!isAnimated)
+        return content;
+    return (<Animated.View layout={layoutAnimation} exiting={FadeOut.duration(100)} entering={FadeIn.duration(100)}>
+            {content}
+        </Animated.View>);
+});

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

@@ -0,0 +1,108 @@
+export declare const colors: {
+    theme: {
+        light: {
+            text: string;
+            text2: string;
+            icon: string;
+            borderColorContCliente: string;
+        };
+        dark: {
+            text: string;
+            text2: string;
+            icon: string;
+            borderColorContCliente: string;
+        };
+    };
+    especiales: {
+        rojo: string;
+    };
+    table: {
+        default: {
+            light: {
+                background: string;
+                background_pressed: string;
+                border: string;
+            };
+            dark: {
+                background: string;
+                background_pressed: string;
+                border: string;
+            };
+        };
+        modal: {
+            light: {
+                background: string;
+                background_pressed: string;
+                border: string;
+            };
+            dark: {
+                background: string;
+                background_pressed: string;
+                border: string;
+            };
+        };
+        modal2: {
+            light: {
+                background: string;
+                background_pressed: string;
+                border: string;
+            };
+            dark: {
+                background: string;
+                background_pressed: string;
+                border: string;
+            };
+        };
+        light: {
+            light: {
+                background: string;
+                background_pressed: string;
+                border: string;
+            };
+            dark: {
+                background: string;
+                background_pressed: string;
+                border: string;
+            };
+        };
+        lightBlue: {
+            light: {
+                background: string;
+                background_pressed: string;
+                border: string;
+            };
+            dark: {
+                background: string;
+                background_pressed: string;
+                border: string;
+            };
+        };
+        orange: {
+            light: {
+                background: string;
+                background_pressed: string;
+                border: string;
+            };
+            dark: {
+                background: string;
+                background_pressed: string;
+                border: string;
+            };
+        };
+        full: {
+            light: {
+                background: string;
+                background_pressed: string;
+                border: string;
+            };
+            dark: {
+                background: string;
+                background_pressed: string;
+                border: string;
+            };
+        };
+    };
+};
+export { type ColorSchemeType } from "../../../libs/constants/colors";
+export type ColorThemeType = keyof typeof colors.table;
+export default colors;

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

@@ -0,0 +1,107 @@
+import colorsLib from "../../../libs/constants/colors";
+export const colors = {
+    theme: {
+        light: {
+            text: colorsLib.light.text,
+            text2: colorsLib.light.text2Libretas,
+            icon: 'hsl(0, 0%, 76%)',
+            borderColorContCliente: 'hsl(240, 2.40%, 92.00%)',
+        },
+        dark: {
+            text: colorsLib.dark.text,
+            text2: colorsLib.dark.text2Libretas,
+            icon: 'hsl(252, 3%, 35%)',
+            borderColorContCliente: 'hsl(252, 3%, 30%)', //'hsl(240, 2%, 22%)',
+        }
+    },
+    especiales: {
+        rojo: colorsLib.especiales.rojo
+    },
+    table: {
+        default: {
+            light: {
+                background: 'hsl(120, 100%, 100%)',
+                background_pressed: 'hsl(240, 5%, 83%)',
+                border: 'hsl(240, 2%, 91%)'
+            },
+            dark: {
+                background: 'hsl(240, 3%, 10.5%)',
+                background_pressed: 'hsl(240, 2%, 22.5%)',
+                border: 'hsl(240, 3%, 22.5%)'
+            }
+        },
+        modal: {
+            light: {
+                background: 'hsl(120, 100%, 100%)',
+                background_pressed: 'hsl(240, 5%, 83%)',
+                border: 'hsl(240, 2%, 91%)'
+            },
+            dark: {
+                background: 'hsl(240, 2%, 17.5%)',
+                background_pressed: 'hsl(240, 2%, 29.5%)',
+                border: 'hsl(240, 2%, 25.5%)'
+            }
+        },
+        modal2: {
+            light: {
+                background: 'hsl(240, 18%, 96%)',
+                background_pressed: 'hsl(252, 22%, 79%)',
+                border: 'hsl(240, 10%, 88%)'
+            },
+            dark: {
+                background: 'hsl(240, 2%, 17.5%)',
+                background_pressed: 'hsl(240, 2%, 29.5%)',
+                border: 'hsl(240, 2%, 25.5%)'
+            }
+        },
+        light: {
+            light: {
+                background: 'hsl(240, 18%, 96%)',
+                background_pressed: 'hsl(240, 8%, 91%)',
+                border: 'hsl(240, 10%, 88%)'
+            },
+            dark: {
+                background: 'hsl(240, 3%, 10.5%)',
+                background_pressed: 'hsl(240, 2%, 22.5%)',
+                border: 'hsl(240, 3%, 22.5%)'
+            }
+        },
+        lightBlue: {
+            light: {
+                background: 'hsl(190, 79%, 94%)',
+                background_pressed: 'hsl(190, 82%, 89%)',
+                border: ''
+            },
+            dark: {
+                background: 'hsl(194, 62%, 11.5%)',
+                background_pressed: 'hsl(193, 62%, 18%)',
+                border: ''
+            }
+        },
+        orange: {
+            light: {
+                background: 'hsl(37, 76.5%, 90%)',
+                background_pressed: 'hsl(36, 80%, 85%)',
+                border: ''
+            },
+            dark: {
+                background: 'hsl(38, 63.6%, 16.8%)',
+                background_pressed: 'hsl(36, 64.6%, 22.3%)',
+                border: ''
+            }
+        },
+        full: {
+            light: {
+                background: 'hsl(0, 0.00%, 100.00%)',
+                background_pressed: 'hsl(240, 5%, 83%)',
+                border: 'hsl(240, 2%, 91%)'
+            },
+            dark: {
+                background: 'hsl(0, 0.00%, 0.00%)',
+                background_pressed: 'hsl(240, 2%, 22.5%)',
+                border: 'hsl(240, 3%, 22.5%)'
+            }
+        },
+    }
+};
+export default colors;

package/dist/libs/table/src/context/borders.d.ts

@@ -0,0 +1,10 @@
+import { Dispatch, SetStateAction, RefObject } from "react";
+declare const useBorder: () => RefObject<Record<string, any> | {
+    top: Dispatch<SetStateAction<boolean>>;
+    bottom: Dispatch<SetStateAction<boolean>>;
+}>;
+export { useBorder };
+declare const _default: ({ children }: {
+    children: React.ReactNode;
+}) => import("react").JSX.Element;
+export default _default;

package/dist/libs/table/src/context/borders.js

@@ -0,0 +1,11 @@
+import { useMemo, useRef } from "react";
+import { createCtx } from "../../../../libs/constants/utils";
+const [Provider, useBorder] = createCtx();
+export { useBorder };
+export default ({ children }) => {
+    const bordersRef = useRef({});
+    const valueBorders = useMemo(() => (bordersRef), []);
+    return (<Provider value={valueBorders}>
+            {children}
+        </Provider>);
+};

package/dist/libs/table/src/context/delete.d.ts

@@ -0,0 +1 @@
+export declare const DeleteProvider: import("react").Provider<() => void>, useDelete: () => () => void;

package/dist/libs/table/src/context/delete.js

@@ -0,0 +1,2 @@
+import { createCtx } from "../../../../libs/constants/utils";
+export const [DeleteProvider, useDelete] = createCtx();

package/dist/libs/table/src/context/table.d.ts

@@ -0,0 +1,21 @@
+import type { Observable } from '@legendapp/state';
+import Props, { Store } from '../components/Table/types';
+export declare const StoreProvider: import("react").Provider<Observable<Store>>, useStore: () => Observable<Store>;
+export declare const BordersProvider: import("react").Provider<Observable<Map<string, {
+    top: (show: boolean) => void;
+    bottom: (show: boolean) => void;
+}>>>, useBorders: () => Observable<Map<string, {
+    top: (show: boolean) => void;
+    bottom: (show: boolean) => void;
+}>>;
+export declare const TableProvider: import("react").Provider<{
+    colorThemeType: Exclude<Props["colorThemeType"], undefined>;
+    allBorders: Props["allBorders"];
+    type: Props["type"];
+    keys: Props["keys"];
+}>, useTable: () => {
+    colorThemeType: Exclude<Props["colorThemeType"], undefined>;
+    allBorders: Props["allBorders"];
+    type: Props["type"];
+    keys: Props["keys"];
+};

package/dist/libs/table/src/context/table.js

@@ -0,0 +1,4 @@
+import { createCtx } from '../../../../libs/constants/utils';
+export const [StoreProvider, useStore] = createCtx();
+export const [BordersProvider, useBorders] = createCtx();
+export const [TableProvider, useTable] = createCtx();

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "native-pytech",
+  "version": "1.0.1",
+  "description": "Libreria de React Native Pytech",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "author": "Matias Tobias Gutierrez",
+  "license": "MIT",
+  "scripts": {
+    "build": "node scripts/build.js",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "@expo/vector-icons": "^15.0.3",
+    "@legendapp/list": "^2.0.19",
+    "@legendapp/state": "^3.0.0-beta.45",
+    "@react-native-async-storage/async-storage": "~2.2.0",
+    "@react-native-masked-view/masked-view": "0.3.2",
+    "@supabase/supabase-js": "^2.104.1",
+    "color2k": "^2.0.3",
+    "expo": "~55.0.16",
+    "expo-blur": "~55.0.0",
+    "expo-constants": "~55.0.15",
+    "expo-device": "~55.0.15",
+    "expo-glass-effect": "~55.0.0",
+    "expo-linear-gradient": "~55.0.0",
+    "expo-mesh-gradient": "~55.0.0",
+    "expo-router": "~55.0.0",
+    "expo-sqlite": "*",
+    "react": "~19.2.0",
+    "react-native": "^0.83.6",
+    "react-native-reanimated": "^4.2.1",
+    "react-native-reorderable-list": "^0.17.0",
+    "react-native-svg": "^15.15.0",
+    "react-native-url-polyfill": "^3.0.0",
+    "react-native-worklets": "^0.7.4"
+  },
+  "devDependencies": {
+    "@types/fontfaceobserver": "^2.1.3",
+    "@types/react": "~19.2.10",
+    "babel-plugin-module-resolver": "^5.0.3",
+    "copyfiles": "^2.4.1",
+    "expo": "~55.0.0",
+    "react": "~19.2.0",
+    "react-native": "0.83.6",
+    "react-native-svg-transformer": "^1.5.3",
+    "rimraf": "^6.1.3",
+    "tsc-alias": "^1.8.16",
+    "typescript": "~5.9.2"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/app/*.d.ts",
+      "default": "./dist/app/*.js"
+    },
+    "./assets/images/*": {
+      "default": "./dist/libs/assets/images/*"
+    }
+  },
+  "dependencies": {
+    "@expo/ui": "~55.0.12"
+  }
+}