@sincpro/mobile-ui 0.1.2 → 0.1.3

package/sincpro_mobile_ui/layouts/AuthContainer.tsx

@@ -1,73 +0,0 @@
-import { ReactNode } from "react";
-import {
-  Dimensions,
-  Keyboard,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  View,
-} from "react-native";
-import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
-import { SafeAreaView } from "react-native-safe-area-context";
-
-import { Display } from "../Display";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import GradientContainer from "./GradientContainer";
-
-interface AuthContainerProps {
-  header: ReactNode;
-  children: ReactNode;
-  onBackPress?: () => void;
-  className?: string;
-}
-
-function AuthContainer({ header, children, onBackPress, className }: AuthContainerProps) {
-  const screenHeight = Dimensions.get("window").height;
-
-  return (
-    <GradientContainer className={cn("flex-1", className)}>
-      <SafeAreaView className="flex-1" edges={["top"]}>
-        <View className="flex-1">
-          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-            <View
-              className="justify-center items-center relative"
-              style={{ height: screenHeight * 0.3 }}
-            >
-              {onBackPress && (
-                <TouchableOpacity
-                  className="absolute top-4 left-4 p-2 z-[1]"
-                  onPress={onBackPress}
-                >
-                  <Display.Icon
-                    color={theme.text.inverse}
-                    name="arrow-back"
-                    size={24}
-                    type="ionicons"
-                  />
-                </TouchableOpacity>
-              )}
-              {header}
-            </View>
-          </TouchableWithoutFeedback>
-          <View
-            className="flex-1 bg-bg-card rounded-t-3xl shadow-lg"
-            style={{ minHeight: screenHeight * 0.7 }}
-          >
-            <KeyboardAwareScrollView
-              bottomOffset={50}
-              bounces={false}
-              className="flex-1"
-              contentContainerClassName="flex-grow pb-10"
-              keyboardShouldPersistTaps="handled"
-              showsVerticalScrollIndicator={false}
-            >
-              <View className="p-4">{children}</View>
-            </KeyboardAwareScrollView>
-          </View>
-        </View>
-      </SafeAreaView>
-    </GradientContainer>
-  );
-}
-
-export default AuthContainer;

package/sincpro_mobile_ui/layouts/Container.tsx

@@ -1,40 +0,0 @@
-import React, { FC, ReactNode } from "react";
-import { StatusBar, ViewStyle } from "react-native";
-import { Edge, SafeAreaView } from "react-native-safe-area-context";
-
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-
-type ContainerProps = {
-  children: ReactNode;
-  style?: ViewStyle;
-  statusBarColor?: string;
-  barStyle?: "light-content" | "dark-content";
-  statusBarHidden?: boolean;
-  edges?: Edge[];
-  className?: string;
-};
-
-const Container: FC<ContainerProps> = ({
-  children,
-  style,
-  statusBarColor = theme.primary,
-  barStyle = "light-content",
-  statusBarHidden = false,
-  edges = ["top", "bottom", "left", "right"],
-  className,
-}) => {
-  return (
-    <SafeAreaView className={cn("flex-1 bg-bg-page", className)} edges={edges} style={style}>
-      <StatusBar
-        backgroundColor={statusBarColor}
-        barStyle={barStyle}
-        hidden={statusBarHidden}
-        translucent={false}
-      />
-      {children}
-    </SafeAreaView>
-  );
-};
-
-export default Container;

package/sincpro_mobile_ui/layouts/GradientContainer.tsx

@@ -1,22 +0,0 @@
-import { LinearGradient } from "expo-linear-gradient";
-import { ReactNode } from "react";
-
-import { theme } from "../theme";
-
-interface GradientContainerProps {
-  children: ReactNode;
-  style?: object;
-  className?: string;
-}
-
-const GradientContainer = ({ children, style, className }: GradientContainerProps) => {
-  const gradientColors = theme.gradient.primary;
-
-  return (
-    <LinearGradient className={className} colors={[...gradientColors]} style={style}>
-      {children}
-    </LinearGradient>
-  );
-};
-
-export default GradientContainer;

package/sincpro_mobile_ui/layouts/PlainLayout.tsx

@@ -1,14 +0,0 @@
-import { memo, ReactNode } from "react";
-import { View } from "react-native";
-
-interface PlainLayoutProps {
-  children?: ReactNode;
-}
-
-const PlainLayout = memo(({ children }: PlainLayoutProps) => {
-  return <View className="flex-1">{children}</View>;
-});
-
-PlainLayout.displayName = "PlainLayout";
-
-export default PlainLayout;

package/sincpro_mobile_ui/layouts/ScrollContainer.tsx

@@ -1,37 +0,0 @@
-import React, { ReactNode } from "react";
-import { KeyboardAvoidingView, Platform, ScrollView, StatusBar, View } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
-
-import { cn } from "../theme/tw";
-
-type ScrollContainerProps = {
-  children: ReactNode;
-  contentContainerStyle?: object;
-  className?: string;
-};
-
-function ScrollContainer({
-  children,
-  contentContainerStyle = {},
-  className,
-}: ScrollContainerProps) {
-  return (
-    <SafeAreaView className={cn("flex-1 bg-bg-card", className)}>
-      <StatusBar barStyle="dark-content" translucent={false} />
-      <KeyboardAvoidingView
-        behavior={Platform.OS === "ios" ? "padding" : undefined}
-        className="flex-1"
-      >
-        <ScrollView
-          contentContainerStyle={[{ flexGrow: 1, padding: 16 }, contentContainerStyle]}
-          keyboardShouldPersistTaps="handled"
-          showsVerticalScrollIndicator={false}
-        >
-          <View className="flex-1">{children}</View>
-        </ScrollView>
-      </KeyboardAvoidingView>
-    </SafeAreaView>
-  );
-}
-
-export default ScrollContainer;

package/sincpro_mobile_ui/layouts/TabNavigatorLayout.tsx

@@ -1,154 +0,0 @@
-import React, { Children, isValidElement, ReactElement, ReactNode } from "react";
-import { TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-import { Display } from "../Display";
-import { Typography } from "../Typography";
-import Container from "./Container";
-
-interface TabNavigatorLayoutProps {
-  className?: string;
-  children?: ReactNode;
-  content?: ReactNode;
-  currentPath?: string;
-  onTabPress?: (path: string) => void;
-  persistentComponent?: ReactNode;
-  persistentRoutePath?: string;
-}
-
-interface TabProps {
-  path: string;
-  label: string;
-  Icon: any;
-  onReselect?: () => void;
-}
-
-interface TabNavigatorProps {
-  items: TabProps[];
-  currentPath?: string;
-  onTabPress?: (path: string) => void;
-}
-
-function TabIcon({ focused, Icon }: { focused: boolean; Icon: any }): ReactElement {
-  return (
-    <View className="justify-center items-center w-10 h-10">
-      {focused && <View className="absolute w-10 h-10 rounded-full bg-primary" />}
-      <Display.Icon
-        color={focused ? "#FFFFFF" : "#6B7280"}
-        customIcon={Icon}
-        size={24}
-        type="custom"
-      />
-    </View>
-  );
-}
-
-function TabNavigator({
-  items,
-  currentPath,
-  onTabPress,
-}: TabNavigatorProps): ReactElement | null {
-  const insets = useSafeAreaInsets();
-  const Text = Typography.Text;
-
-  if (!items.length) return null;
-
-  return (
-    <View
-      className="border-t border-border-default bg-bg-card"
-      style={{ paddingBottom: Math.max(insets.bottom, 8) }}
-    >
-      <View className="mt-2 h-16 flex-row justify-around items-center px-2">
-        {items.map(({ path, label, Icon, onReselect }) => {
-          const focused = currentPath === path;
-
-          return (
-            <TouchableOpacity
-              className="items-center justify-center flex-1"
-              key={path}
-              onPress={() => {
-                if (focused && onReselect) {
-                  onReselect();
-                  return;
-                }
-                onTabPress?.(path);
-              }}
-            >
-              <TabIcon focused={focused} Icon={Icon} />
-              <Text
-                className={`text-xs mt-1.5 font-medium ${focused ? "text-primary" : "text-text-secondary"}`}
-              >
-                {label}
-              </Text>
-            </TouchableOpacity>
-          );
-        })}
-      </View>
-    </View>
-  );
-}
-
-function Tabs({ children: tabsChildren }: { children?: ReactNode }) {
-  return <>{tabsChildren}</>;
-}
-
-function Tab(_props: TabProps) {
-  return null;
-}
-
-function TabNavigatorLayoutComponent({
-  className,
-  children,
-  content,
-  currentPath,
-  onTabPress,
-  persistentComponent,
-  persistentRoutePath,
-}: TabNavigatorLayoutProps): ReactElement {
-  const tabs: TabProps[] = [];
-
-  Children.forEach(children, (child) => {
-    if (!isValidElement(child)) return;
-    if (child.type === Tabs) {
-      const tabsChildren = (child.props as { children?: ReactNode }).children;
-
-      Children.forEach(tabsChildren, (tabChild) => {
-        if (!isValidElement(tabChild)) return;
-        if (tabChild.type === Tab) {
-          tabs.push(tabChild.props as TabProps);
-        }
-      });
-    }
-  });
-
-  const isPersistentRouteActive =
-    persistentRoutePath && currentPath ? currentPath.includes(persistentRoutePath) : false;
-
-  return (
-    <Container className={className} edges={["top", "left", "right"]}>
-      <View className="flex-1 bg-bg-page">
-        {persistentComponent && (
-          <View style={{ flex: 1, display: isPersistentRouteActive ? "flex" : "none" }}>
-            {persistentComponent}
-          </View>
-        )}
-        <View style={{ flex: 1, display: isPersistentRouteActive ? "none" : "flex" }}>
-          {content}
-        </View>
-      </View>
-      <TabNavigator currentPath={currentPath} items={tabs} onTabPress={onTabPress} />
-    </Container>
-  );
-}
-
-type TabLayoutComponent = ((props: TabNavigatorLayoutProps) => ReactElement) & {
-  Tabs: typeof Tabs;
-  Tab: typeof Tab;
-};
-
-const TabNavigatorLayout = Object.assign(TabNavigatorLayoutComponent, {
-  Tabs,
-  Tab,
-}) as TabLayoutComponent;
-
-export default TabNavigatorLayout;

package/sincpro_mobile_ui/lib/date.ts

@@ -1,149 +0,0 @@
-import dayjs from "dayjs";
-import timezone from "dayjs/plugin/timezone";
-import utc from "dayjs/plugin/utc";
-import { getLocales } from "expo-localization";
-
-const DEFAULT_TIMEZONE = "America/Costa_Rica";
-const DEFAULT_LOCALE = "es-CR";
-
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
-interface FormatDateOptions {
-  locale?: string | null;
-  showTime?: boolean; // Si no se especifica se auto-detecta según si la entrada trae hora
-}
-
-/**
- * Formatea una fecha en la zona horaria indicada respetando la granularidad de la entrada.
- *
- * Reglas de detección:
- * 1. Si `input` es un string 'YYYY-MM-DD' (solo fecha) => se interpreta como medianoche (00:00:00)
- *    en la zona horaria destino y se devuelve SOLO la parte de fecha (sin hora).
- * 2. Si `input` incluye componente de tiempo (ISO completo o Date) => se convierte a la zona destino
- *    y se muestra fecha + hora (HH:MM) salvo que se fuerce lo contrario mediante `options.showTime`.
- * 3. Cuando `options.showTime` es `true` o `false` se sobre‑escribe la auto‑detección.
- * 4. Si `timezone` es null/undefined o inválido se retorna la cadena "Error de formateo".
- *
- * Localización:
- * - Usa el primer locale del dispositivo (`expo-localization`) como predeterminado.
- * - Puedes forzar uno diferente con `options.locale` (ej: 'es-CR', 'en-US').
- *
- * Seguridad de zona horaria:
- * - El parse de una fecha sin hora NO se hace en la zona local del dispositivo para luego convertir,
- *   sino directamente en la zona destino para evitar corrimientos de día.
- *
- * Ejemplos:
- * ```ts
- * formatDate('2025-09-02', 'America/Costa_Rica');
- * // => "2 de septiembre de 2025"
- *
- * formatDate('2025-09-02T18:30:00Z', 'America/Costa_Rica');
- * // => "2 de septiembre de 2025, 12:30 p. m." (dependiendo del locale real)
- *
- * formatDate(new Date('2025-09-02T23:15:00Z'), 'Europe/Madrid');
- * // => "3 de septiembre de 2025, 01:15" (cambio de día por zona +02)
- *
- * formatDate('2025-09-02', 'America/Costa_Rica', { showTime: true });
- * // => "2 de septiembre de 2025, 12:00 a. m." (fuerza hora)
- * ```
- *
- * @param input      Fecha (string ISO, 'YYYY-MM-DD' o instancia Date)
- * @param timezone   Zona horaria IANA (ej: 'America/Costa_Rica', 'Asia/Tokyo'). Si es null/undefined usa Costa Rica
- * @param options    Opcional: locale forzado y/o bandera para mostrar hora
- * @returns          Cadena localizada o "Error de formateo" si no se puede procesar
- */
-export function formatDate(
-  input: string | Date,
-  timezone: string | null | undefined,
-  options?: FormatDateOptions,
-): string {
-  // Usar timezone por defecto si no se proporciona
-  const effectiveTimezone = timezone || DEFAULT_TIMEZONE;
-
-  const fallbackLocale = DEFAULT_LOCALE.split("-")[0]; // "es" from "es-CR"
-  const deviceLocale = getLocales()?.[0]?.languageTag ?? fallbackLocale;
-  const usedLocale = options?.locale ?? deviceLocale;
-
-  try {
-    const rawStr = typeof input === "string" ? input : input.toISOString();
-    const isDateOnly = /^\d{4}-\d{2}-\d{2}$/.test(rawStr);
-
-    // Auto-detect showTime si no se pasa explicitamente
-    const effectiveShowTime =
-      options?.showTime !== undefined
-        ? options.showTime
-        : !isDateOnly && /T\d{2}:\d{2}/.test(rawStr); // tiene componente hora
-
-    const dateInstance = isDateOnly
-      ? dayjs.tz(`${rawStr}T00:00:00`, effectiveTimezone)
-      : dayjs.utc(rawStr).tz(effectiveTimezone);
-    const dateInZone = dateInstance.toDate();
-
-    const formatOptions: Intl.DateTimeFormatOptions = {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-      timeZone: effectiveTimezone,
-    };
-
-    if (effectiveShowTime) {
-      formatOptions.hour = "2-digit";
-      formatOptions.minute = "2-digit";
-    }
-
-    return new Intl.DateTimeFormat(usedLocale, formatOptions).format(dateInZone);
-  } catch (error) {
-    console.warn("Error formateando fecha:", error);
-    return "Error de formateo";
-  }
-}
-
-/**
- * Formatea una fecha usando automáticamente el timezone por defecto (Costa Rica).
- * Útil para casos donde no se tiene acceso al timezone del usuario.
- *
- * @param input      Fecha (string ISO, 'YYYY-MM-DD' o instancia Date)
- * @param options    Opcional: locale forzado y/o bandera para mostrar hora
- * @returns          Cadena localizada en timezone de Costa Rica
- */
-export function formatDateWithDefaultTimezone(
-  input: string | Date,
-  options?: FormatDateOptions,
-): string {
-  return formatDate(input, DEFAULT_TIMEZONE, options);
-}
-
-/**
- * Obtiene la fecha actual en formato YYYY-MM-DD en el timezone especificado.
- * Útil para crear fechas de programación que respeten el timezone del usuario.
- *
- * @param timezone Zona horaria IANA. Si es null/undefined usa Costa Rica
- * @returns Fecha actual en formato YYYY-MM-DD en el timezone especificado
- */
-export function getCurrentDateInTimezone(timezone?: string | null): string {
-  const effectiveTimezone = timezone || DEFAULT_TIMEZONE;
-  try {
-    return dayjs().tz(effectiveTimezone).format("YYYY-MM-DD");
-  } catch (error) {
-    console.warn("Error obteniendo fecha actual en timezone:", error);
-    return dayjs().format("YYYY-MM-DD"); // Fallback to local
-  }
-}
-
-/**
- * Obtiene la fecha y hora actual en formato ISO en el timezone especificado.
- * Útil para timestamps que necesiten reflejar el timezone del usuario.
- *
- * @param timezone Zona horaria IANA. Si es null/undefined usa Costa Rica
- * @returns Fecha actual en formato ISO en el timezone especificado
- */
-export function getCurrentDateTimeInTimezone(timezone?: string | null): string {
-  const effectiveTimezone = timezone || DEFAULT_TIMEZONE;
-  try {
-    return dayjs().tz(effectiveTimezone).toISOString();
-  } catch (error) {
-    console.warn("Error obteniendo fecha/hora actual en timezone:", error);
-    return dayjs().toISOString(); // Fallback to local
-  }
-}

package/sincpro_mobile_ui/lib/icon.ts

@@ -1,10 +0,0 @@
-export type IconType =
-  | "ionicons"
-  | "fontawesome"
-  | "material"
-  | "fontawesome5"
-  | "simplelineicons"
-  | "antdesign"
-  | "custom"
-  | "feather"
-  | "MaterialCommunityIcons";

package/sincpro_mobile_ui/lib/monetary.ts

@@ -1,33 +0,0 @@
-import { Big } from "big.js";
-
-export function parseToMonetaryNumber(input?: string | number | null): number {
-  if (input == null) return 0;
-  const s = String(input).trim();
-  if (!/[0-9]/.test(s)) return 0;
-
-  const cleaned = s.replace(/[^0-9.-]+/g, "");
-  try {
-    return Number(new Big(cleaned).toString());
-  } catch {
-    return 0;
-  }
-}
-
-export function formatTwoDecimals(value?: number | string | null): string {
-  const raw = parseToMonetaryNumber(value);
-  const rounded = new Big(raw).toFixed(2);
-  const num = Number(rounded);
-  return new Intl.NumberFormat("de-DE", {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
-  }).format(num);
-}
-
-export function calculateDiscountedTotal(total: number, discount: number): number {
-  if (discount === 0) {
-    return 0;
-  }
-
-  const result = (parseToMonetaryNumber(total) * discount) / 100;
-  return parseToMonetaryNumber(result);
-}

package/sincpro_mobile_ui/lib/quantity.ts

@@ -1,52 +0,0 @@
-import { Big } from "big.js";
-
-/** Redondea a la precisión indicada usando round half up */
-export function roundTo(value: number, precision: number): number {
-  if (isNaN(value)) return 0;
-  const factor = new Big(10).pow(precision);
-  return Number(new Big(value).times(factor).round(0, 1).div(factor).toString());
-}
-
-/** Normaliza la cantidad al múltiplo más cercano del incremento mínimo */
-export function normalizeQuantity(
-  value: number,
-  minIncrement: number,
-  precision: number,
-): number {
-  if (!isFinite(value)) return 0;
-  if (value < 0) value = 0;
-  if (minIncrement <= 0) return roundTo(value, precision);
-  const steps = Math.round(value / minIncrement);
-  const normalized = steps * minIncrement;
-  return roundTo(normalized, precision);
-}
-
-/** Convierte un valor a entero escalado según precisión para cálculos seguros */
-export function toScaledInt(value: number, precision: number): number {
-  if (!isFinite(value)) return 0;
-  const factor = Math.pow(10, precision);
-  return Math.round(value * factor);
-}
-
-export function fromScaledInt(scaled: number, precision: number): number {
-  const factor = Math.pow(10, precision);
-  return scaled / factor;
-}
-
-/** Multiplicación segura evitando errores binarios típicos */
-export function safeMul(a: number, b: number, precision: number): number {
-  const factor = Math.pow(10, precision);
-  return (Math.round(a * factor) * Math.round(b * factor)) / (factor * factor);
-}
-
-/** Valida si un valor es múltiplo del incremento mínimo dentro de la precisión */
-export function isMultipleOfIncrement(
-  value: number,
-  minIncrement: number,
-  precision: number,
-): boolean {
-  if (minIncrement <= 0) return true;
-  const scaledValue = toScaledInt(value, precision + 3); // extra precisión para reducir error
-  const scaledInc = toScaledInt(minIncrement, precision + 3);
-  return scaledValue % scaledInc === 0;
-}

package/sincpro_mobile_ui/lib/serializer.ts

@@ -1,59 +0,0 @@
-export function safeJsonStringify(obj: any, pretty: boolean = false): string {
-  const seen = new WeakSet();
-
-  if (pretty) {
-    return JSON.stringify(
-      obj,
-      (key, value) => {
-        if (key.startsWith("_")) {
-          return undefined;
-        }
-
-        if (value instanceof Map) {
-          return Object.fromEntries(value);
-        }
-
-        if (value instanceof Set) {
-          return Array.from(value);
-        }
-
-        if (typeof value === "object" && value !== null) {
-          if (seen.has(value)) {
-            return "[Circular]";
-          }
-          seen.add(value);
-        }
-
-        return value;
-      },
-      2,
-    );
-  }
-
-  return JSON.stringify(obj, (key, value) => {
-    if (key.startsWith("_")) {
-      return undefined;
-    }
-
-    if (value instanceof Map) {
-      return Object.fromEntries(value);
-    }
-
-    if (value instanceof Set) {
-      return Array.from(value);
-    }
-
-    if (typeof value === "object" && value !== null) {
-      if (seen.has(value)) {
-        return "[Circular]";
-      }
-      seen.add(value);
-    }
-
-    return value;
-  });
-}
-
-export function safeJsonParse(json: string): any {
-  return JSON.parse(json);
-}

package/sincpro_mobile_ui/lib/timezone.ts

@@ -1,4 +0,0 @@
-export interface TimezoneLocale {
-  timezone: string;
-  locale: string;
-}

package/sincpro_mobile_ui/nativewind-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="nativewind/types" />

package/sincpro_mobile_ui/notifications/index.ts

@@ -1,2 +0,0 @@
-// Notification components will be added here
-export {};