native-pytech 1.0.1 → 1.0.4

package/README.md

@@ -8,23 +8,59 @@ Librería de componentes y utilidades para apps **React Native** / **Expo** (Pyt
 npm install native-pytech
 ```
 
+Para mantener actualizado:
+
+```bash
+npx expo install native-pytech@latest
+```
+
 Instalá también las **peer dependencies** que use tu app (Expo, React Native, etc.). Revisá la sección `peerDependencies` en el `package.json` del paquete o de este repo.
 
 ## Uso
 
-Entrada principal (reexporta los módulos públicos):
-
 ```ts
-import { ... } from 'native-pytech'
+import { ... } from 'native-pytech/{submodulo}'
 ```
 
-Submódulos (ejemplos):
+Ejemplos:
 
 ```ts
-import { ... } from 'native-pytech/login'
-import { ... } from 'native-pytech/supabase'
+import Login, { ... } from 'native-pytech/login'
+import Table, { ... } from 'native-pytech/table'
 ```
 
+# Rutas disponibles
+
+- `/assets`
+    - `/components`
+        - `/RemoveCircle`
+        - `/ReorderThreeOutline`
+    - `/images`
+    - `/ionicons`
+- `/components`
+    - `/Gradient`
+    - `/CloseButton`
+    - `/Link`
+    - `/Text`
+    - `/Theme`
+- `/constants`
+    - `/colors`
+    - `/consts`
+    - `/handleFontObserver`
+    - `/hooks`
+    - `/utils`
+- `/editPage`
+- `/footer`
+- `/login`
+- `/page`
+- `/providers`
+    - `/app`
+- `/segmentedControl`
+- `/sql`
+- `/supabase`
+- `/swiftui`
+- `/table`
+
 ## Licencia
 
 MIT — ver `LICENSE`.

package/dist/app/editPage.d.ts

@@ -0,0 +1 @@
+export { default } from '../libs/editPage';

package/dist/app/editPage.js

@@ -0,0 +1 @@
+export { default } from '../libs/editPage';

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

@@ -0,0 +1,7 @@
+import Page from './src/components/Page';
+import Item from './src/components/Item';
+type EditPageComponent = typeof Page & {
+    Item: typeof Item;
+};
+declare const EditPage: EditPageComponent;
+export default EditPage;

package/dist/libs/editPage/index.js

@@ -0,0 +1,5 @@
+import Page from './src/components/Page';
+import Item from './src/components/Item';
+const EditPage = Page;
+EditPage.Item = Item;
+export default EditPage;

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

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

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

@@ -0,0 +1,12 @@
+import { HStack, Spacer, Text } from '@expo/ui/swift-ui';
+import React, { memo } from 'react';
+import TextField from '../TextField';
+export default memo(({ label, minLengthSpacer, ...textFieldProps }) => {
+    if (!label)
+        return <TextField {...textFieldProps}/>;
+    return (<HStack>
+            <Text>{label}</Text>
+			<Spacer minLength={minLengthSpacer}/>
+			<TextField {...textFieldProps}/>
+        </HStack>);
+});

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

@@ -0,0 +1,15 @@
+import { type SpacerProps } from "@expo/ui/swift-ui";
+import type TextFieldProps from '../TextField/types';
+type Props = TextFieldProps & {
+    /**
+        Text to display on the left of the text field.
+        If not provided, the item will be only a text field.
+    */
+    label?: string;
+    /**
+        Minimum length of the spacer between the title and the text field.
+        If the title is not provided, will not be displayed.
+    */
+    minLengthSpacer?: SpacerProps['minLength'];
+};
+export default Props;

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

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

package/dist/libs/editPage/src/components/Page/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import Props from './types';
+declare function Component<T>({ data, renderItem, onSave, }: Props<T>): React.JSX.Element;
+declare const _default: typeof Component;
+export default _default;

package/dist/libs/editPage/src/components/Page/index.js

@@ -0,0 +1,84 @@
+import { Host, List, Section } from '@expo/ui/swift-ui';
+import { useObservable, useValue } from '@legendapp/state/react';
+import { Stack, useRouter } from 'expo-router';
+import React, { memo, useCallback, useMemo, useRef } from 'react';
+import { useEffectWithoutFirstRender } from '../../../../../libs/constants/hooks';
+import { Provider } from '../../context/page';
+import { Provider as ItemProvider } from '../../context/item';
+function Component({ data = [], renderItem, onSave, }) {
+    // ------------------- Variables -------------------
+    const router = useRouter();
+    const saveEnabledRef = useRef(false);
+    const values = (data ?? []).reduce((acc, item, index) => {
+        acc[index] = {
+            value: undefined,
+            hasChanged: false,
+            isValid: true,
+        };
+        return acc;
+    }, {});
+    const store = useObservable({
+        values: values,
+        saveEnabled: (() => {
+            const values = store.values.get();
+            const listValues = Object.values(values);
+            const hasChanged = listValues.some(value => value.hasChanged);
+            const allValid = listValues.every(value => value.isValid);
+            return hasChanged && allValid;
+        }),
+    });
+    const saveEnabled = useValue(() => store.saveEnabled.get());
+    useEffectWithoutFirstRender(() => {
+        saveEnabledRef.current = saveEnabled;
+    }, [saveEnabled]);
+    const textFieldsRefs = useRef({});
+    // ------------------- Functions -------------------
+    const onPressSave = useCallback(async () => {
+        // Obtengo los valores del store
+        const values = store.values.peek();
+        const valuesToSave = Object.values(values).map(value => value.value ?? null);
+        // Llamo a la función onSave
+        const result = await onSave?.(valuesToSave);
+        if (result === false)
+            return;
+        router.back();
+    }, [onSave, store.values]);
+    // ------------------- Provider -------------------
+    const value = useMemo(() => ({
+        store,
+        saveEnabledRef,
+        onPressSave,
+        isUniqueItem: (data?.length ?? 0) === 1,
+        textFieldsRefs
+    }), []);
+    return (<>
+			<Stack.Toolbar placement="left">
+				<Stack.Toolbar.Button onPress={() => router.back()}>
+					<Stack.Toolbar.Icon sf="xmark"/>
+				</Stack.Toolbar.Button>
+			</Stack.Toolbar>
+
+			<Stack.Toolbar placement="right">
+				<Stack.Toolbar.Button disabled={!saveEnabled} variant="done" onPress={onPressSave}>
+					<Stack.Toolbar.Icon sf="checkmark"/>
+				</Stack.Toolbar.Button>
+			</Stack.Toolbar>
+
+			<Host style={{ flex: 1 }}>
+				<List>
+					<Section>
+						<Provider value={value}>
+							{data.map((item, index) => {
+            const nextIndex = index + 1;
+            const value = { index, nextIndex: nextIndex < data.length ? nextIndex : undefined };
+            return (<ItemProvider key={index} value={value}>
+										{renderItem?.(item)}
+									</ItemProvider>);
+        })}
+						</Provider>
+					</Section>
+				</List>
+			</Host>
+		</>);
+}
+export default memo(Component);

package/dist/libs/editPage/src/components/Page/types.d.ts

@@ -0,0 +1,26 @@
+type Props<T> = {
+    /**
+        The data items to be rendered inside the list.
+        @default []
+    */
+    data?: T[];
+    /**
+        The function to render the item.
+    */
+    renderItem?: (item: T) => React.ReactNode;
+    /**
+        Function to be called when the user saves the changes.
+        If the function returns true, the user will be redirected to the previous screen.
+    */
+    onSave?: (values: (string | null)[]) => boolean | Promise<boolean>;
+};
+export type Values = Record<number, {
+    value: string | null | undefined;
+    hasChanged: boolean;
+    isValid: boolean;
+}>;
+export type Store = {
+    values: Values;
+    saveEnabled: boolean;
+};
+export default Props;

package/dist/libs/editPage/src/components/Page/types.js

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

package/dist/libs/editPage/src/components/TextField/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type Props from './types';
+declare const _default: React.MemoExoticComponent<({ defaultValue, placeholder, keyboardType, autocapitalization, secureTextEntry, isValid, }: Props) => React.JSX.Element>;
+export default _default;

package/dist/libs/editPage/src/components/TextField/index.js

@@ -0,0 +1,55 @@
+import React, { useMemo, memo, useRef, useCallback, useEffect } from "react";
+import { SecureField, TextField } from "@expo/ui/swift-ui";
+import { keyboardType as keyboardTypeModifier, submitLabel, textInputAutocapitalization, onSubmit } from '@expo/ui/swift-ui/modifiers';
+import { usePage } from '../../context/page';
+import { useItem } from '../../context/item';
+export default memo(({ defaultValue, placeholder, keyboardType, autocapitalization = true, secureTextEntry, isValid, }) => {
+    // ------------------- Variables -------------------
+    const { store, isUniqueItem, saveEnabledRef, onPressSave, textFieldsRefs } = usePage();
+    const { index, nextIndex } = useItem();
+    const ref = useRef(null);
+    textFieldsRefs.current[index] = ref;
+    useEffect(() => {
+        store.values[index].value.set(defaultValue);
+    }, [defaultValue]);
+    // -------------------- Functions --------------------
+    const onValueChange = useCallback((value) => {
+        const _value = value.trim() === '' ? null : value.trim();
+        store.values[index].set({
+            value: _value,
+            hasChanged: _value !== defaultValue,
+            isValid: isValid?.(_value) ?? true,
+        });
+    }, []);
+    const _onSubmit = useCallback(() => {
+        // Guarda los cambios
+        if (isUniqueItem) {
+            const saveEnabled = saveEnabledRef.current;
+            if (!saveEnabled)
+                return;
+            onPressSave();
+            return;
+        }
+        // Va al siguiente campo
+        if (!nextIndex)
+            return;
+        textFieldsRefs.current[nextIndex].current?.focus();
+    }, []);
+    // -------------------- Props --------------------
+    const modifiers = useMemo(() => [
+        ...(isUniqueItem ? [submitLabel('done')] : []),
+        ...(keyboardType ? [keyboardTypeModifier(keyboardType)] : []),
+        ...(!autocapitalization ? [textInputAutocapitalization('never')] : []),
+        onSubmit(_onSubmit),
+    ], [keyboardType, autocapitalization, isUniqueItem]);
+    const props = useMemo(() => ({
+        autoFocus: isUniqueItem,
+        modifiers,
+        placeholder,
+        defaultValue,
+        onValueChange,
+    }), [modifiers, placeholder, defaultValue]);
+    if (secureTextEntry)
+        return <SecureField {...props} ref={ref}/>;
+    return <TextField {...props} ref={ref}/>;
+});

package/dist/libs/editPage/src/components/TextField/types.d.ts

@@ -0,0 +1,29 @@
+import { keyboardType } from "@expo/ui/swift-ui/modifiers";
+type Props = {
+    /**
+        Default value of the text field.
+    */
+    defaultValue?: string;
+    /**
+        Placeholder of the text field.
+    */
+    placeholder?: string;
+    /**
+        Keyboard type. Uses the keyboardType modifier.
+    */
+    keyboardType?: Parameters<typeof keyboardType>[0];
+    /**
+        If true, the text field will be autocapitalized. Uses the textInputAutocapitalization modifier.
+        @default true
+    */
+    autocapitalization?: boolean;
+    /**
+        If true, the text field will be secure (password).
+    */
+    secureTextEntry?: boolean;
+    /**
+        Function to validate the value.
+    */
+    isValid?: (value: string | null) => boolean;
+};
+export default Props;

package/dist/libs/editPage/src/components/TextField/types.js

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

package/dist/libs/editPage/src/context/item.d.ts

@@ -0,0 +1,7 @@
+export declare const Provider: import("react").Provider<{
+    index: number;
+    nextIndex?: number;
+}>, useItem: () => {
+    index: number;
+    nextIndex?: number;
+};

package/dist/libs/editPage/src/context/item.js

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

package/dist/libs/editPage/src/context/page.d.ts

@@ -0,0 +1,18 @@
+import type { Observable } from '@legendapp/state';
+import { TextFieldRef } from '@expo/ui/swift-ui';
+import type { RefObject } from 'react';
+import type { Store } from '../components/Page/types';
+export type TextFieldsRefsType = Record<number, RefObject<TextFieldRef | null>>;
+export declare const Provider: import("react").Provider<{
+    store: Observable<Store>;
+    saveEnabledRef: RefObject<boolean>;
+    onPressSave: () => Promise<void>;
+    isUniqueItem: boolean;
+    textFieldsRefs: RefObject<TextFieldsRefsType>;
+}>, usePage: () => {
+    store: Observable<Store>;
+    saveEnabledRef: RefObject<boolean>;
+    onPressSave: () => Promise<void>;
+    isUniqueItem: boolean;
+    textFieldsRefs: RefObject<TextFieldsRefsType>;
+};

package/dist/libs/editPage/src/context/page.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-pytech",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "Libreria de React Native Pytech",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,7 +9,8 @@
   "scripts": {
     "build": "node scripts/build.js",
     "typecheck": "tsc --noEmit",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "release": "npm version patch && npm publish"
   },
   "files": [
     "dist",