@etdt/etdt-e-comps 0.0.0-stage → 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ETDT
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,131 @@
-# Temporary Holding Version
+# etdt-e-comps
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+## Instalar
+
+```sh
+npm install @etdt/etdt-e-comps
+```
+
+## Componentes
+
+Componentes reutilizables para aplicaciones React con Ionic:
+
+- `PForm`: formulario con campos Ionic y validación de `react-hook-form`.
+- `PInput`: campo Ionic controlado por `react-hook-form`.
+- `PFooter`: pie de página Ionic con texto opcional.
+- `PRecordList`: lista de registros con acciones opcionales.
+
+### Utilizar los componentes
+
+```tsx
+import { PFooter, PForm, PInput, PRecordList } from '@etdt/etdt-e-comps';
+```
+
+> La aplicación que utilice estos componentes debe tener instaladas las dependencias
+peer declaradas en `package.json`.
+
+## Contexto de autenticación (AuthContext.tsx)
+
+Contexto de autenticación para compartir el estado del usuario y las operaciones de inicio y
+cierre de sesión entre los componentes de la aplicación, delegando la comunicación con el
+servidor en un adaptador configurable.
+
+`createAuthContext<TUser, TLoginInput>(options)` crea un proveedor y un hook tipados.
+`TUser` es el tipo del usuario y `TLoginInput` el tipo de los datos necesarios para iniciar
+sesión.
+
+El almacenamiento se configura mediante un objeto `AuthStorage` que permite proporcionar una
+implementación propia de `getItem`, `setItem` y `removeItem` o con los siguientes `storage`:
+
+- `local`: usa `localStorage`.
+- `session`: usa `sessionStorage`.
+- `memory`: usa un `Map` en memoria; los datos se pierden al recargar o cerrar la pestaña.
+
+> Por defecto se tiene `storage: 'localStorage'` y `storageKey: 'user'`.
+
+La autenticación se conecta mediante un `AuthAdapter<TUser, TLoginInput>`, que debe
+implementar `login` y `logout`. Puede implementar también `restoreSession` para recuperar
+la sesión al iniciar o cuando se llame a `refreshSession`. Por ejemplo, para una aplicación
+que autentica mediante cookies:
+
+```tsx
+import {
+  createAuthContext,
+  type AuthAdapter,
+} from '@etdt/etdt-e-comps';
+
+interface User {
+  id: number;
+  name: string;
+}
+
+interface LoginInput {
+  username: string;
+  password: string;
+}
+
+const authAdapter: AuthAdapter<User, LoginInput> = {
+  async login(input) {
+    const response = await fetch('/api/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify(input),
+    });
+    if (!response.ok) {
+      throw new Error(`Login failed (${response.status})`);
+    }
+    return (await response.json()) as User;
+  },
+
+  async restoreSession() {
+    const response = await fetch('/api/get_user', {
+      credentials: 'include',
+    });
+    if (response.status === 401) {
+      return null;
+    }
+    if (!response.ok) {
+      throw new Error(`Session restore failed (${response.status})`);
+    }
+    return (await response.json()) as User;
+  },
+
+  async logout() {
+    const response = await fetch('/api/logout', {
+      method: 'POST',
+      credentials: 'include',
+    });
+    if (!response.ok) {
+      throw new Error(`Logout failed (${response.status})`);
+    }
+  },
+};
+
+const { AuthProvider, useAuth } = createAuthContext<User, LoginInput>({
+  storage: 'local',
+});
+
+
+const UserProvider = ({ children }: { children: React.ReactNode }) => (
+  <AuthProvider adapter={authAdapter}>{children}</AuthProvider>
+);
+
+export default UserProvider
+```
+
+`restoreSession` devuelve el usuario si la sesión sigue activa o `null` si no lo está.
+El ejemplo supone que `/api/get_user` responde directamente con el usuario y devuelve
+HTTP 401 cuando no hay sesión; adapta el manejo de la respuesta al contrato de tu API.
+El paquete no gestiona ni almacena el token o la cookie de sesión: eso corresponde a la
+aplicación y al servidor.
+
+El hook expone `user`, `isLoading`, `restoreError`, `login`, `logout`, `updateUser` y
+`refreshSession`. `login` y `logout` delegan en el adaptador. `updateUser` combina los
+cambios indicados con el usuario actual. `refreshSession` vuelve a llamar a
+`adapter.restoreSession`; si no se ha proporcionado ese método, lanza un error. El hook
+debe usarse dentro de su `AuthProvider`.
+
+El usuario guardado se serializa como JSON y se parsea al leerlo. El paquete no valida la
+forma de los datos leídos; valida la respuesta del servidor y cualquier dato almacenado si
+no confías en su origen.

package/dist/AuthContext.d.ts

@@ -0,0 +1,33 @@
+import { type ReactElement, type ReactNode } from 'react';
+export interface AuthAdapter<TUser, TLoginInput> {
+    login: (input: TLoginInput) => Promise<TUser>;
+    logout: () => Promise<void>;
+    restoreSession?: () => Promise<TUser | null>;
+}
+export interface AuthContextValue<TUser, TLoginInput> {
+    user: TUser | null;
+    isLoading: boolean;
+    restoreError: unknown | null;
+    login: (input: TLoginInput) => Promise<void>;
+    logout: () => Promise<void>;
+    updateUser: (data: Partial<TUser>) => void;
+    refreshSession: () => Promise<TUser | null>;
+}
+export interface AuthStorage {
+    getItem: (key: string) => string | null;
+    setItem: (key: string, value: string) => void;
+    removeItem: (key: string) => void;
+}
+export interface AuthContextOptions {
+    storage?: 'local' | 'session' | 'memory' | AuthStorage;
+    storageKey?: string;
+}
+export interface AuthProviderProps<TUser, TLoginInput> {
+    adapter: AuthAdapter<TUser, TLoginInput>;
+    children: ReactNode;
+}
+export declare function createAuthContext<TUser, TLoginInput>(options?: AuthContextOptions): {
+    AuthProvider: ({ adapter, children, }: AuthProviderProps<TUser, TLoginInput>) => ReactElement;
+    useAuth: () => AuthContextValue<TUser, TLoginInput>;
+};
+//# sourceMappingURL=AuthContext.d.ts.map

package/dist/AuthContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthContext.d.ts","sourceRoot":"","sources":["../src/AuthContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,WAAW,CAAC,KAAK,EAAE,WAAW;IAC7C,KAAK,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,OAAO,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;CAC9C;AAED,MAAM,WAAW,gBAAgB,CAAC,KAAK,EAAE,WAAW;IAClD,IAAI,EAAE,KAAK,GAAG,IAAI,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,GAAG,IAAI,CAAC;IAC7B,KAAK,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,UAAU,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAC3C,cAAc,EAAE,MAAM,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;CAC7C;AAED,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IACxC,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAC;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB,CAAC,KAAK,EAAE,WAAW;IACnD,OAAO,EAAE,WAAW,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IACzC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAeD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,WAAW,EAClD,OAAO,GAAE,kBAAuB;2CA8B7B,iBAAiB,CAAC,KAAK,EAAE,WAAW,CAAC,KAAG,YAAY;mBAqInC,gBAAgB,CAAC,KAAK,EAAE,WAAW,CAAC;EASzD"}

package/dist/AuthContext.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef, useState, } from 'react';
+function createMemoryStorage() {
+    const values = new Map();
+    return {
+        getItem: (key) => values.get(key) ?? null,
+        setItem: (key, value) => {
+            values.set(key, value);
+        },
+        removeItem: (key) => {
+            values.delete(key);
+        },
+    };
+}
+export function createAuthContext(options = {}) {
+    const AuthContext = createContext(undefined);
+    const memoryStorage = createMemoryStorage();
+    const storageKey = options.storageKey ?? 'user';
+    const getStorage = () => {
+        if (typeof options.storage === 'object') {
+            return options.storage;
+        }
+        if (options.storage === 'memory') {
+            return memoryStorage;
+        }
+        if (typeof window === 'undefined') {
+            return undefined;
+        }
+        if (options.storage === 'local') {
+            return window.localStorage;
+        }
+        if (options.storage === 'session') {
+            return window.sessionStorage;
+        }
+        return window.localStorage;
+    };
+    function AuthProvider({ adapter, children, }) {
+        const [user, setUser] = useState(() => {
+            const storage = getStorage();
+            if (!storage) {
+                return null;
+            }
+            try {
+                const storedUser = storage.getItem(storageKey);
+                return storedUser === null ? null : JSON.parse(storedUser);
+            }
+            catch (error) {
+                const detail = error instanceof Error ? error.message : String(error);
+                throw new Error(`Unable to read auth user from storage key "${storageKey}": ${detail}`);
+            }
+        });
+        const shouldRestoreSession = useRef(user === null);
+        const [isLoading, setIsLoading] = useState(adapter.restoreSession !== undefined && user === null);
+        const [restoreError, setRestoreError] = useState(null);
+        useEffect(() => {
+            const storage = getStorage();
+            if (!storage) {
+                return;
+            }
+            try {
+                if (user === null) {
+                    storage.removeItem(storageKey);
+                }
+                else {
+                    storage.setItem(storageKey, JSON.stringify(user));
+                }
+            }
+            catch (error) {
+                const detail = error instanceof Error ? error.message : String(error);
+                throw new Error(`Unable to persist auth user to storage key "${storageKey}": ${detail}`);
+            }
+        }, [storageKey, user]);
+        useEffect(() => {
+            const restoreSession = adapter.restoreSession;
+            if (!restoreSession || !shouldRestoreSession.current) {
+                setIsLoading(false);
+                return;
+            }
+            let cancelled = false;
+            setIsLoading(true);
+            setRestoreError(null);
+            const restore = async () => {
+                try {
+                    const restoredUser = await restoreSession();
+                    if (!cancelled) {
+                        setUser(restoredUser);
+                    }
+                }
+                catch (error) {
+                    if (!cancelled) {
+                        setRestoreError(error);
+                    }
+                }
+                finally {
+                    if (!cancelled) {
+                        setIsLoading(false);
+                        shouldRestoreSession.current = false;
+                    }
+                }
+            };
+            void restore();
+            return () => {
+                cancelled = true;
+            };
+        }, [adapter]);
+        const refreshSession = async () => {
+            if (!adapter.restoreSession) {
+                throw new Error('Refreshing the session requires a restoreSession adapter.');
+            }
+            setIsLoading(true);
+            setRestoreError(null);
+            try {
+                const restoredUser = await adapter.restoreSession();
+                setUser(restoredUser);
+                return restoredUser;
+            }
+            catch (error) {
+                setRestoreError(error);
+                throw error;
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        const login = async (input) => {
+            const authenticatedUser = await adapter.login(input);
+            setUser(authenticatedUser);
+            setRestoreError(null);
+        };
+        const logout = async () => {
+            await adapter.logout();
+            setUser(null);
+        };
+        const updateUser = (data) => {
+            setUser((currentUser) => currentUser === null ? null : { ...currentUser, ...data });
+        };
+        return (_jsx(AuthContext.Provider, { value: {
+                user,
+                isLoading,
+                restoreError,
+                login,
+                logout,
+                updateUser,
+                refreshSession,
+            }, children: children }));
+    }
+    function useAuth() {
+        const context = useContext(AuthContext);
+        if (!context) {
+            throw new Error('useAuth must be used within its AuthProvider');
+        }
+        return context;
+    }
+    return { AuthProvider, useAuth };
+}

package/dist/PFooter.d.ts

@@ -0,0 +1,15 @@
+/**
+ Usage:
+ 
+import PFooter from '../e_comps/PFooter'
+ 
+ <PFooter comp_name="Footer" footer_text={footer_text} color={color}/>
+ 
+ */
+interface PFooterProps {
+    footer_text?: string;
+    color?: string;
+}
+declare const PFooter: React.FC<PFooterProps>;
+export default PFooter;
+//# sourceMappingURL=PFooter.d.ts.map

package/dist/PFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PFooter.d.ts","sourceRoot":"","sources":["../src/PFooter.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH,UAAU,YAAY;IAEpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAG,MAAM,CAAA;CAGhB;AAGD,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAyBnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/PFooter.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ Usage:
+ 
+import PFooter from '../e_comps/PFooter'
+ 
+ <PFooter comp_name="Footer" footer_text={footer_text} color={color}/>
+ 
+ */
+// Ionic
+import { IonFooter, IonToolbar } from '@ionic/react';
+// Component
+const PFooter = ({ 
+// comp_name,
+footer_text, color = "tertiary",
+// test_h,
+// test_click_h,
+ }) => {
+    // Could be undefined
+    // const on_click_h = test_h ? () => test_h ({comp_data:comp_name}) : undefined
+    // const on_test_click_h = test_click_h ? (e : React.MouseEvent<HTMLIonButtonElement, MouseEvent>) => test_click_h (e) : undefined
+    /** Part renders **/
+    // Small centered note
+    const opt_part = footer_text ? (_jsx("div", { className: "ion-padding ion-text-center", children: _jsx("small", { children: footer_text }) })) : null;
+    return (_jsx(IonFooter, { children: _jsx(IonToolbar, { color: color, children: opt_part }) }));
+};
+export default PFooter;

package/dist/PForm/PForm.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Usage
+ 
+
+ 
+Custom validation fn
+- returns true or false
+ 
+ */
+import type { FC } from "react";
+import type { PFormProps } from './PForm.types.js';
+declare const PForm: FC<PFormProps>;
+export default PForm;
+//# sourceMappingURL=PForm.d.ts.map

package/dist/PForm/PForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PForm.d.ts","sourceRoot":"","sources":["../../src/PForm/PForm.tsx"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AA8B/B,OAAO,KAAK,EACV,UAAU,EACX,MAAM,kBAAkB,CAAC;AAG1B,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAgIzB,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/PForm/PForm.js

@@ -0,0 +1,47 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+// Hooks
+import { useForm } from "react-hook-form";
+// Ionic 
+import { IonContent, IonButton, IonTitle, IonItem, IonLabel, IonText, IonToolbar, IonButtons, IonIcon, } from '@ionic/react';
+// Icons
+import { chevronBackOutline } from 'ionicons/icons';
+// Components
+import PInput from '../PInput/PInput.js';
+// Component
+const PForm = ({ form_title, form_fields, fixed_fields, custom_validate_h, submit_handler, submit_btn_text = "Submit", submit_disabled, submit_btn_color = "secondary", on_back, pre_submit_btn, after_submit_content, debug = false }) => {
+    // react-hook-form
+    const { control, handleSubmit, getValues, formState: { errors, isValid }, } = useForm({
+        defaultValues: {}
+    });
+    // Customize onChange event - just log
+    const common_on_change = (e) => {
+        debug && console.debug(`common_on_change ::  ${e.target.name} : ${e.target.value}`);
+    };
+    if (fixed_fields) {
+        debug && console.debug(`fixed_fields passed : `, fixed_fields);
+    }
+    // Could be more performant ?
+    const val_h = custom_validate_h && (() => {
+        if (custom_validate_h) {
+            const vals = getValues();
+            debug && console.debug("PForm : getValues: ", vals);
+            // Pass values down
+            return custom_validate_h(vals);
+            // Validate its actually a boolean ?
+        }
+        return true;
+    });
+    // console.og("Render : isValid :", isValid)
+    // debug bar
+    const debug_status = debug &&
+        _jsxs(IonText, { children: ["IsValid : ", `${isValid}`] });
+    const back_btn = on_back ? (_jsx(IonButtons, { slot: "start", children: _jsx(IonButton, { onClick: on_back, children: _jsx(IonIcon, { icon: chevronBackOutline }) }) })) : null;
+    return (_jsxs(IonContent, { children: [form_title &&
+                _jsxs(IonToolbar, { children: [back_btn, _jsx(IonTitle, { children: form_title })] }), _jsxs("form", { onSubmit: handleSubmit(submit_handler), style: { padding: "1em" }, children: [fixed_fields?.map((f, index) => {
+                        debug && console.debug(`Fixed field`, f);
+                        return (_jsxs(IonItem, { children: [_jsx(IonLabel, { position: "stacked", children: f.label }), _jsx(IonText, { className: "ion-padding-top ion-padding-bottom", children: f.fixed_value })] }, index));
+                    }), form_fields.map((field, index) => {
+                        return (_jsx(PInput, { input_name: field.name, ion_label: field.label, input_type: field.type, control: control, readonly: field.readonly ?? false, on_change_h: field.custom_on_change || common_on_change, init_value: field.init_value, validate_h: val_h, options: field.options, modal_title: field.modal_title, ion_input_props: field.ion_input_props }, index));
+                    }), pre_submit_btn, _jsx(IonButton, { color: submit_btn_color, expand: "block", type: "submit", disabled: submit_disabled || !isValid, children: submit_btn_text }), after_submit_content, debug_status] })] }));
+};
+export default PForm;

package/dist/PForm/PForm.types.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import { TextFieldTypes } from '@ionic/core';
+import type { FieldValues, SubmitHandler } from 'react-hook-form';
+import type { PInputOption } from '../PInput/PInput.types.js';
+export interface PFormProps {
+    form_title?: string;
+    form_fields: PFormField[];
+    fixed_fields?: PFixedField[];
+    custom_validate_h?: (values: FieldValues) => boolean;
+    submit_handler: SubmitHandler<FieldValues>;
+    submit_btn_text?: string;
+    submit_disabled?: boolean;
+    submit_btn_color?: string;
+    on_back?: () => void;
+    pre_submit_btn?: ReactNode;
+    after_submit_content?: ReactNode;
+    debug?: boolean;
+}
+export interface PFormField {
+    name: string;
+    type?: TextFieldTypes | 'select';
+    label: string;
+    init_value?: unknown;
+    readonly?: boolean;
+    options?: PInputOption[];
+    modal_title?: string;
+    custom_on_change?: (event: unknown) => void;
+    ion_input_props?: Object;
+}
+export interface PFixedField {
+    label: string;
+    fixed_value: ReactNode;
+}
+//# sourceMappingURL=PForm.types.d.ts.map

package/dist/PForm/PForm.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PForm.types.d.ts","sourceRoot":"","sources":["../../src/PForm/PForm.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EACV,WAAW,EACX,aAAa,EACd,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAI9D,MAAM,WAAW,UAAU;IACzB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,UAAU,EAAE,CAAA;IACzB,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;IAC5B,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAA;IACpD,cAAc,EAAE,aAAa,CAAC,WAAW,CAAC,CAAA;IAC1C,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,OAAO,CAAC,EAAG,MAAM,IAAI,CAAA;IACrB,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,oBAAoB,CAAC,EAAE,SAAS,CAAA;IAChC,KAAK,CAAC,EAAG,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,cAAc,GAAG,QAAQ,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,SAAS,CAAC;CACxB"}

package/dist/PForm/PForm.types.js

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

package/dist/PInput/PInput.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import type { PInputProps } from './PInput.types.js';
+declare const PInput: FC<PInputProps>;
+export default PInput;
+//# sourceMappingURL=PInput.d.ts.map

package/dist/PInput/PInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PInput.d.ts","sourceRoot":"","sources":["../../src/PInput/PInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAkBhC,OAAO,KAAK,EACV,WAAW,EACZ,MAAM,mBAAmB,CAAC;AAG3B,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA0H3B,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/PInput/PInput.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import moment from 'moment';
+// Hooks
+import { Controller } from "react-hook-form";
+// Ionic 
+import { IonItem, IonLabel, IonInput, IonSelect, IonIcon, IonBadge, IonSelectOption, } from '@ionic/react';
+// Component
+const PInput = ({ input_name, input_type, ion_label, init_value, readonly, options, control, on_change_h, validate_h, ion_input_props, modal_title, debug = false }) => {
+    debug && console.debug(`PInput - type : ${input_type}; label: ${ion_label};name : (${input_name}) : init: ${init_value}`);
+    // Example: Default date to today
+    let default_value;
+    if (input_type === 'date' && !init_value) {
+        default_value = moment().format('YYYY-MM-DD');
+        debug && console.debug(`Default date set : ${moment(default_value).format('YYYY-MM-DD')}`);
+    }
+    if (init_value) {
+        default_value = init_value;
+        debug && console.debug(`Init value present for ${input_name} :: ${init_value}`);
+    }
+    // Compare function for objects
+    const compareWith = (o1, o2) => {
+        return o1 && o2 ? o1.id === o2.id : o1 === o2;
+    };
+    return (_jsxs(IonItem, { children: [ion_label && (_jsx(IonLabel, { position: "stacked", children: ion_label })), _jsx(Controller, { name: input_name, control: control, defaultValue: default_value, rules: {
+                    validate: validate_h
+                }, render: ({ field: { name, onChange, value } }) => {
+                    // Render IonSelect...
+                    if (input_type === 'select') {
+                        // console.info ("Select options:", options)
+                        // console.debug ("Value is here:", value) // Undefined
+                        return (_jsx(IonSelect, { interface: "modal", name: name, placeholder: "Seleccionar", selectedText: value?.disp, interfaceOptions: { header: modal_title }, onIonChange: (e) => {
+                                debug && console.debug("onIonChange select! ");
+                                on_change_h(e);
+                                onChange(e.detail.value); // h will return the event
+                            }, compareWith: compareWith, value: value, children: options?.map((o, index) => (_jsxs(IonSelectOption, { value: o, children: [o.badge && _jsx(IonIcon, { color: "warning", icon: o.badge.icon, slot: "start" }), o.disp, o.badge && _jsx(IonBadge, { color: "warning", slot: "end", children: o.badge.title })] }, index))) }));
+                    }
+                    // Or render IonInput
+                    else {
+                        // console.log ("Rendering IonInput : ", input_type, name)
+                        if (readonly) {
+                            debug && console.debug("Got readonly!! ", readonly);
+                        }
+                        return (_jsx(IonInput, { ...ion_input_props, name: name, type: input_type, readonly: readonly, onIonInput: (e) => {
+                                on_change_h?.(e);
+                                onChange(e.detail.value);
+                            }, value: value }));
+                    }
+                } })] }));
+};
+export default PInput;

package/dist/PInput/PInput.types.d.ts

@@ -0,0 +1,24 @@
+import type { TextFieldTypes } from '@ionic/core';
+import type { Control, FieldValues, Validate } from 'react-hook-form';
+export interface PInputOption {
+    disp: string;
+    badge?: {
+        icon: string;
+        title: string;
+    };
+}
+export interface PInputProps {
+    input_name: string;
+    input_type?: TextFieldTypes | 'select';
+    ion_label?: string;
+    init_value?: unknown;
+    readonly?: boolean;
+    options?: PInputOption[];
+    control: Control<FieldValues>;
+    on_change_h: Function;
+    validate_h?: Validate<FieldValues, FieldValues>;
+    ion_input_props?: Object;
+    modal_title?: string;
+    debug?: boolean;
+}
+//# sourceMappingURL=PInput.types.d.ts.map

package/dist/PInput/PInput.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PInput.types.d.ts","sourceRoot":"","sources":["../../src/PInput/PInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACf,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEtE,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,cAAc,GAAG,QAAQ,CAAA;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;IACxB,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;IAC7B,WAAW,EAAE,QAAQ,CAAA;IACrB,UAAU,CAAC,EAAE,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC,CAAA;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB"}

package/dist/PInput/PInput.types.js

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

package/dist/PRecordList.d.ts

@@ -0,0 +1,38 @@
+/**
+
+Basic "table"
+
+IonList with Edit and Delete icons
+
+Usage:
+ 
+import PRecordList from '../e_comps/PRecordList'
+ 
+ // Render:
+ 
+   <PRecordList
+    rec_array={rec_array}
+    list_name="Footer"
+    opt_prop={footer_text}/>
+
+ */
+import type { FC, MouseEventHandler } from 'react';
+export interface PRecordAction {
+    icon?: string;
+    click_h?: MouseEventHandler<HTMLIonButtonElement>;
+}
+export interface PRecord {
+    id?: string | number;
+    name: string;
+    note?: string;
+    icon?: string;
+    edit_params?: PRecordAction;
+    delete_params?: PRecordAction;
+}
+export interface PRecordListProps {
+    rec_array: PRecord[];
+    list_name?: string;
+}
+declare const PRecordList: FC<PRecordListProps>;
+export default PRecordList;
+//# sourceMappingURL=PRecordList.d.ts.map

package/dist/PRecordList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PRecordList.d.ts","sourceRoot":"","sources":["../src/PRecordList.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAgBnD,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;CACnD;AAED,MAAM,WAAW,OAAO;IACtB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,OAAO,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA0CrC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/PRecordList.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Ionic
+import { IonList, IonListHeader, IonItem, IonLabel, IonIcon, IonButton, IonButtons, } from '@ionic/react';
+// Icons
+import { closeCircleOutline } from 'ionicons/icons';
+const PRecordList = ({ rec_array, list_name }) => {
+    if (rec_array.length === 0) {
+        return null;
+    }
+    return (_jsxs(IonList, { children: [_jsx(IonListHeader, { color: "tertiary", lines: "full", children: list_name }), /* Records */ rec_array.map((r, key) => (_jsxs(IonItem, { children: [r.note && _jsx(IonLabel, { children: r.note }), _jsx(IonLabel, { children: r.name }), _jsxs(IonButtons, { slot: "end", children: [r.icon && (_jsx(IonIcon, { color: "secondary", size: "large", icon: r.icon })), r.edit_params && (_jsx(IonButton, { onClick: r.edit_params.click_h, children: _jsx(IonIcon, { color: "success", size: "large", icon: r.edit_params.icon }) })), r.delete_params && (_jsx(IonButton, { onClick: r.delete_params.click_h, children: _jsx(IonIcon, { color: "danger", size: "large", icon: closeCircleOutline }) }))] })] }, key)))] }));
+};
+export default PRecordList;

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { default as PForm } from './PForm/PForm.js';
+export type { PFixedField, PFormField, PFormProps, } from './PForm/PForm.types.js';
+export { default as PInput } from './PInput/PInput.js';
+export type { PInputOption, PInputProps, } from './PInput/PInput.types.js';
+export { default as PFooter } from './PFooter.js';
+export { default as PRecordList } from './PRecordList.js';
+export type { PRecord, PRecordAction, PRecordListProps, } from './PRecordList.js';
+export { createAuthContext } from './AuthContext.js';
+export type { AuthAdapter, AuthContextValue, AuthContextOptions, AuthProviderProps, AuthStorage, } from './AuthContext.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACpD,YAAY,EACV,WAAW,EACX,UAAU,EACV,UAAU,GACX,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACvD,YAAY,EACV,YAAY,EACZ,WAAW,GACZ,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC1D,YAAY,EACV,OAAO,EACP,aAAa,EACb,gBAAgB,GACjB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,YAAY,EACV,WAAW,EACX,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,WAAW,GACZ,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,5 @@
+export { default as PForm } from './PForm/PForm.js';
+export { default as PInput } from './PInput/PInput.js';
+export { default as PFooter } from './PFooter.js';
+export { default as PRecordList } from './PRecordList.js';
+export { createAuthContext } from './AuthContext.js';

package/package.json

@@ -1,6 +1,61 @@
 {
   "name": "@etdt/etdt-e-comps",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.1.0",
+  "description": "Reusable Ionic React form components",
+  "keywords": [
+    "react",
+    "typescript",
+    "ionic"
+  ],
+  "homepage": "https://gitlab.com/etdt/etdt-e-comps#readme",
+  "bugs": {
+    "url": "https://gitlab.com/etdt/etdt-e-comps/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@gitlab.com/etdt/etdt-e-comps.git"
+  },
+  "license": "MIT",
+  "author": "ETDT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc --project tsconfig.json",
+    "prepack": "npm run build"
+  },
+  "dependencies": {
+    "moment": "^2.30.1",
+    "ionicons": "^7.0.0"
+  },
+  "peerDependencies": {
+    "@capacitor/core": "^7.0.0",
+    "@ionic/react": "^9.0.0",
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0",
+      "react-hook-form": "^7.53.2"
+  },
+  "devDependencies": {
+    "@capacitor/core": "^7.0.0",
+    "@ionic/react": "^9.0.0",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-hook-form": "^7.0.0",
+    "typescript": "^5.4.0"
+  }
+}