@sincpro/mobile-ui 0.1.2 → 0.1.4

package/sincpro_mobile_ui/widgets/JSONViewer.tsx

@@ -1,192 +0,0 @@
-import React, { useMemo, useState } from "react";
-import { Platform, Text, View } from "react-native";
-
-import { ThemedActivityIndicator } from "../theme";
-
-const parseDeepJson = (value: any): any => {
-  if (typeof value === "string") {
-    try {
-      const parsed = JSON.parse(value);
-      return parseDeepJson(parsed);
-    } catch {
-      return value;
-    }
-  }
-
-  if (Array.isArray(value)) {
-    return value.map(parseDeepJson);
-  }
-
-  if (value && typeof value === "object") {
-    const result: any = {};
-    for (const key in value) {
-      result[key] = parseDeepJson(value[key]);
-    }
-    return result;
-  }
-
-  return value;
-};
-
-const JSON_COLORS = {
-  key: "#0066CC",
-  string: "#008000",
-  number: "#FF8C00",
-  boolean: "#9966CC",
-  null: "#999999",
-  punctuation: "#666666",
-};
-
-const MAX_JSON_SIZE = 500_000; // 500KB límite
-const MAX_LINES = 500; // Máximo 500 líneas con colores
-
-interface JsonLine {
-  text: string;
-  color: string;
-}
-
-function parseJsonToColoredLines(jsonString: string): JsonLine[] {
-  // Protección 1: Verificar tamaño
-  if (jsonString.length > MAX_JSON_SIZE) {
-    return [
-      {
-        text: `⚠️ JSON muy grande (${(jsonString.length / 1024).toFixed(1)}KB)\n\n`,
-        color: "#FF6600",
-      },
-      { text: "Mostrando como texto plano por performance...\n\n", color: "#666666" },
-      { text: jsonString, color: "#333333" },
-    ];
-  }
-
-  const lines = jsonString.split("\n");
-
-  // Protección 2: Verificar cantidad de líneas
-  if (lines.length > MAX_LINES) {
-    return [
-      {
-        text: `⚠️ JSON muy largo (${lines.length} líneas)\n\n`,
-        color: "#FF6600",
-      },
-      { text: "Mostrando como texto plano por performance...\n\n", color: "#666666" },
-      { text: jsonString, color: "#333333" },
-    ];
-  }
-
-  const coloredLines: JsonLine[] = [];
-
-  lines.forEach((line) => {
-    const trimmed = line.trim();
-
-    if (
-      !trimmed ||
-      trimmed === "{" ||
-      trimmed === "}" ||
-      trimmed === "[" ||
-      trimmed === "]" ||
-      trimmed === "," ||
-      trimmed.endsWith(",")
-    ) {
-      const keyMatch = line.match(/^(\s*)"([^"]+)":\s*(.+)$/);
-
-      if (keyMatch) {
-        const indent = keyMatch[1];
-        const key = keyMatch[2];
-        const valueStr = keyMatch[3];
-
-        coloredLines.push(
-          { text: indent, color: JSON_COLORS.punctuation },
-          { text: `"${key}"`, color: JSON_COLORS.key },
-          { text: ": ", color: JSON_COLORS.punctuation },
-        );
-
-        if (valueStr.startsWith('"')) {
-          coloredLines.push({ text: valueStr + "\n", color: JSON_COLORS.string });
-        } else if (!isNaN(Number(valueStr.replace(",", "")))) {
-          coloredLines.push({ text: valueStr + "\n", color: JSON_COLORS.number });
-        } else if (valueStr.startsWith("true") || valueStr.startsWith("false")) {
-          coloredLines.push({ text: valueStr + "\n", color: JSON_COLORS.boolean });
-        } else if (valueStr.startsWith("null")) {
-          coloredLines.push({ text: valueStr + "\n", color: JSON_COLORS.null });
-        } else {
-          coloredLines.push({ text: valueStr + "\n", color: JSON_COLORS.punctuation });
-        }
-        return;
-      }
-    }
-
-    coloredLines.push({ text: line + "\n", color: JSON_COLORS.punctuation });
-  });
-
-  return coloredLines;
-}
-
-const JsonPreview = ({ selectedJson }: { selectedJson: string }) => {
-  const [isProcessing, setIsProcessing] = useState(false);
-
-  // Protección 3: Formatear con try-catch robusto
-  const formattedJson = useMemo(() => {
-    if (!selectedJson || selectedJson.trim() === "") {
-      return "{}";
-    }
-
-    try {
-      const parsed = JSON.parse(selectedJson);
-      const cleaned = parseDeepJson(parsed);
-      return JSON.stringify(cleaned, null, 2);
-    } catch (error) {
-      console.warn("[JSONViewer] Error parsing JSON:", error);
-      return selectedJson; // Mostrar original si falla
-    }
-  }, [selectedJson]);
-
-  // Protección 4: Colorear con control de procesamiento
-  const coloredLines = useMemo(() => {
-    setIsProcessing(true);
-
-    try {
-      return parseJsonToColoredLines(formattedJson);
-    } catch (error) {
-      console.warn("[JSONViewer] Error coloring JSON:", error);
-      // Fallback a texto plano si falla el coloreado
-      return [{ text: formattedJson, color: "#333333" }];
-    } finally {
-      // Pequeño delay para que el loading sea visible si es necesario
-      setTimeout(() => setIsProcessing(false), 50);
-    }
-  }, [formattedJson]);
-
-  // Protección 5: Mostrar loading mientras procesa JSONs grandes
-  if (isProcessing && formattedJson.length > 50_000) {
-    return (
-      <View className="p-4 items-center justify-center min-h-[200px]">
-        <ThemedActivityIndicator size="large" />
-        <Text className="mt-2 text-text-secondary text-sm">Procesando JSON...</Text>
-      </View>
-    );
-  }
-
-  return (
-    <View className="p-4">
-      <Text
-        selectable
-        style={{
-          fontFamily: Platform.select({
-            ios: "Courier",
-            android: "monospace",
-            default: "Courier",
-          }),
-          fontSize: 13,
-          lineHeight: 18,
-        }}
-      >
-        {coloredLines.map((line, index) => (
-          <Text key={index} style={{ color: line.color }}>
-            {line.text}
-          </Text>
-        ))}
-      </Text>
-    </View>
-  );
-};
-
-export default JsonPreview;

package/sincpro_mobile_ui/widgets/MenuCard.tsx

@@ -1,37 +0,0 @@
-import { ComponentType } from "react";
-import { TouchableOpacity, View } from "react-native";
-
-import { IconType } from "../lib/icon";
-import { theme } from "../theme/useTheme";
-import { Typography } from "../Typography";
-import { CircleButton } from "./CircleButton";
-
-interface MenuCardProps {
-  title: string;
-  iconType?: IconType;
-  onPress?: () => void;
-  customIcon?: ComponentType<{ size?: number; color?: string }>;
-}
-
-export function MenuCard({
-  title,
-  iconType = "ionicons",
-  onPress,
-  customIcon,
-}: MenuCardProps) {
-  return (
-    <TouchableOpacity
-      activeOpacity={0.7}
-      className="bg-bg-card rounded-2xl p-4 m-2 w-[45%] shadow-sm"
-      onPress={onPress}
-      style={theme.shadow["sm"]}
-    >
-      <View className="items-center justify-center">
-        <CircleButton customIcon={customIcon} iconType={iconType} />
-        <Typography.Text className="text-text-primary mt-3 text-center" variant="label">
-          {title}
-        </Typography.Text>
-      </View>
-    </TouchableOpacity>
-  );
-}

package/sincpro_mobile_ui/widgets/MenuGrid.tsx

@@ -1,33 +0,0 @@
-import React, { ComponentType } from "react";
-import { View } from "react-native";
-
-import { IconType } from "../lib/icon";
-import { MenuCard } from "./MenuCard";
-
-export interface MenuItem {
-  id: string;
-  title: string;
-  iconType?: IconType;
-  onPress?: () => void;
-  customIcon?: ComponentType<{ size?: number; color?: string }>;
-}
-
-interface MenuGridProps {
-  readonly items: MenuItem[];
-}
-
-export const MenuGrid: React.FC<MenuGridProps> = ({ items }) => {
-  return (
-    <View className="flex-row flex-wrap justify-start p-2 bg-bg-page">
-      {items.map((item) => (
-        <MenuCard
-          customIcon={item.customIcon}
-          iconType={item.iconType}
-          key={item.id}
-          onPress={item.onPress}
-          title={item.title}
-        />
-      ))}
-    </View>
-  );
-};

package/sincpro_mobile_ui/widgets/ScreenHeader.tsx

@@ -1,72 +0,0 @@
-import { View } from "react-native";
-
-import GradientContainer from "../layouts/GradientContainer";
-import { Navigation } from "../Navigation";
-
-const Header = Navigation.Header;
-const HeaderToolbar = Navigation.HeaderToolbar;
-
-export const enum EVariantScreenHeader {
-  FLAT_HEADER = "FLAT_HEADER",
-  ROUNDED_HEADER = "ROUNDED_HEADER",
-  LOGO_WITH_BACK_BUTTON = "LOGO_WITH_BACK_BUTTON",
-  ONLY_LOGO = "ONLY_LOGO",
-}
-
-interface ScreenHeaderProps {
-  variant?: EVariantScreenHeader;
-  title?: string;
-  centerTitle?: boolean;
-  subtitle?: string;
-  logo?: boolean;
-  rightComponent?: React.ReactNode;
-  children?: React.ReactNode;
-  withGradientContainer?: boolean;
-  onBack?: () => void;
-}
-
-function ScreenHeader({
-  variant,
-  title = "Distribución",
-  subtitle,
-  onBack,
-  children,
-}: ScreenHeaderProps) {
-  switch (variant) {
-    case EVariantScreenHeader.FLAT_HEADER:
-      return (
-        <>
-          <HeaderToolbar
-            flat={true}
-            onBack={onBack}
-            subtitle={subtitle}
-            title={title}
-            withBackground={true}
-          />
-          <View>{children}</View>
-        </>
-      );
-    case EVariantScreenHeader.ROUNDED_HEADER:
-      return (
-        <GradientContainer className="pt-0.5 shadow-lg shadow-black/70 rounded-b-[18px] pb-6">
-          <HeaderToolbar
-            flat={true}
-            onBack={onBack}
-            subtitle={subtitle}
-            title={title}
-            withBackground={false}
-          >
-            {children}
-          </HeaderToolbar>
-        </GradientContainer>
-      );
-    case EVariantScreenHeader.LOGO_WITH_BACK_BUTTON:
-      return <Header backButton handleBackButton={onBack} title={"Distribución"} />;
-    case EVariantScreenHeader.ONLY_LOGO:
-      return <Header title={title} />;
-    default:
-      return null;
-  }
-}
-
-export default ScreenHeader;

package/sincpro_mobile_ui/widgets/TimeZoneSelector.tsx

@@ -1,83 +0,0 @@
-import { useState } from "react";
-import { View } from "react-native";
-
-import { Display, Form } from "../index";
-import { TimezoneLocale } from "../lib/timezone";
-import { theme } from "../theme/useTheme";
-import { Typography } from "../Typography";
-import { TimeZoneSelectorModal } from "./TimeZoneSelectorModal";
-
-interface TimeZoneSelectorProps {
-  onSelect?: (tz: TimezoneLocale) => void;
-  timezone?: string | null;
-}
-
-export function TimeZoneSelector({ onSelect, timezone }: TimeZoneSelectorProps) {
-  const [currentTimezone, setCurrentTimezone] = useState(timezone);
-  const [selectorVisible, setSelectorVisible] = useState(false);
-
-  function handleTimezoneSelected(tz: TimezoneLocale) {
-    setCurrentTimezone(tz.timezone);
-    onSelect?.(tz);
-  }
-
-  const displayTimezone = currentTimezone
-    ? currentTimezone.replace(/_/g, " ").replace("America/", "")
-    : "No configurada";
-
-  return (
-    <View className="bg-slate-50 rounded-xl p-5 my-2.5 shadow-sm">
-      <View className="flex-row items-start">
-        <Display.Icon
-          color={currentTimezone ? theme.info : theme.text.tertiary}
-          name="schedule"
-          size={35}
-          type="material"
-        />
-        <View className="ml-2.5 flex-1">
-          <Typography.Text className="text-base mb-1" semibold>
-            Zona Horaria
-          </Typography.Text>
-
-          {currentTimezone ? (
-            <View className="mt-2 bg-white rounded-lg p-3">
-              <Typography.Text className="text-gray-700" semibold>
-                {displayTimezone}
-              </Typography.Text>
-              <Typography.Text className="text-gray-400 text-xs">
-                {currentTimezone}
-              </Typography.Text>
-
-              <View className="flex-row gap-2 mt-2">
-                <Form.Button
-                  onPress={() => setSelectorVisible(true)}
-                  size="small"
-                  title="Cambiar"
-                  variant="outline"
-                />
-              </View>
-            </View>
-          ) : (
-            <>
-              <Typography.Text className="text-gray-500 mb-2">
-                Selecciona una zona horaria
-              </Typography.Text>
-              <Form.Button
-                onPress={() => setSelectorVisible(true)}
-                size="small"
-                title="Seleccionar Zona Horaria"
-              />
-            </>
-          )}
-        </View>
-      </View>
-
-      <TimeZoneSelectorModal
-        currentTimezone={currentTimezone}
-        onClose={() => setSelectorVisible(false)}
-        onSelect={handleTimezoneSelected}
-        visible={selectorVisible}
-      />
-    </View>
-  );
-}

package/sincpro_mobile_ui/widgets/TimeZoneSelectorModal.tsx

@@ -1,179 +0,0 @@
-import { useMemo, useState } from "react";
-import { FlatList, TextInput, TouchableOpacity, View } from "react-native";
-
-import { BottomSheet } from "../Dialog/BottomSheet";
-import { Display, Form } from "../index";
-import { TimezoneLocale } from "../lib/timezone";
-import { theme } from "../theme";
-import { Typography } from "../Typography";
-
-interface TimeZoneSelectorModalProps {
-  visible: boolean;
-  onClose: () => void;
-  onSelect: (tz: TimezoneLocale) => void;
-  currentTimezone?: string | null;
-}
-
-const TIMEZONES_LOCALES: Record<string, TimezoneLocale> = {
-  bolivia: { timezone: "America/La_Paz", locale: "es-BO" },
-  costaRica: { timezone: "America/Costa_Rica", locale: "es-CR" },
-  guatemala: { timezone: "America/Guatemala", locale: "es-GT" },
-  argentina: { timezone: "America/Argentina/Buenos_Aires", locale: "es-AR" },
-  peru: { timezone: "America/Lima", locale: "es-PE" },
-  newYork: { timezone: "America/New_York", locale: "en-US" },
-  japon: { timezone: "Asia/Tokyo", locale: "ja-JP" },
-};
-
-interface TimezoneItem extends TimezoneLocale {
-  label: string;
-}
-
-function TimezoneRow({
-  item,
-  isSelected,
-  onSelect,
-}: {
-  item: TimezoneItem;
-  isSelected: boolean;
-  onSelect: () => void;
-}) {
-  return (
-    <TouchableOpacity
-      activeOpacity={0.7}
-      className={`flex-row items-center p-4 border-b border-gray-100 ${
-        isSelected ? "bg-blue-50" : "bg-white"
-      }`}
-      onPress={onSelect}
-    >
-      <Display.Icon
-        color={isSelected ? theme.info : theme.text.secondary}
-        name="schedule"
-        size={24}
-        type="material"
-      />
-      <View className="ml-3 flex-1">
-        <Typography.Text semibold>{item.label}</Typography.Text>
-        <Typography.Text className="text-gray-400 text-xs">{item.locale}</Typography.Text>
-      </View>
-      {isSelected && (
-        <View className="w-6 h-6 rounded-full bg-blue-500 items-center justify-center">
-          <Display.Icon color={theme.text.inverse} name="check" size={16} type="material" />
-        </View>
-      )}
-    </TouchableOpacity>
-  );
-}
-
-function EmptyState() {
-  return (
-    <View className="p-8 items-center justify-center" style={{ minHeight: 200 }}>
-      <Display.Icon color={theme.text.tertiary} name="search-off" size={48} type="material" />
-      <Typography.Text className="text-gray-500 text-center mt-4">
-        {"No se encontraron zonas horarias"}
-      </Typography.Text>
-    </View>
-  );
-}
-
-function TimeZoneSelectorModal({
-  visible,
-  onClose,
-  onSelect,
-  currentTimezone,
-}: TimeZoneSelectorModalProps) {
-  const [query, setQuery] = useState("");
-  const [selectedTimezone, setSelectedTimezone] = useState<string | null>(
-    currentTimezone || null,
-  );
-
-  const timezoneList = useMemo<TimezoneItem[]>(() => {
-    return Object.values(TIMEZONES_LOCALES).map((tz) => ({
-      ...tz,
-      label: tz.timezone.replace(/_/g, " ").replace("America/", ""),
-    }));
-  }, []);
-
-  const filteredTimezones = useMemo(() => {
-    if (!query.trim()) return timezoneList;
-
-    const normalizedQuery = query
-      .toLowerCase()
-      .normalize("NFD")
-      .replace(/[\u0300-\u036f]/g, "");
-
-    return timezoneList.filter(({ label, timezone }) => {
-      const normalizedLabel = label
-        .toLowerCase()
-        .normalize("NFD")
-        .replace(/[\u0300-\u036f]/g, "");
-      const normalizedTz = timezone.toLowerCase();
-      return (
-        normalizedLabel.includes(normalizedQuery) || normalizedTz.includes(normalizedQuery)
-      );
-    });
-  }, [query, timezoneList]);
-
-  function handleConfirm() {
-    const selected = timezoneList.find((tz) => tz.timezone === selectedTimezone);
-    if (selected) {
-      onSelect({ timezone: selected.timezone, locale: selected.locale });
-      onClose();
-    }
-  }
-
-  return (
-    <BottomSheet.Root onClose={onClose} size="large" visible={visible}>
-      <BottomSheet.Header>
-        <View className="px-5 pb-3">
-          <Typography.Text bold variant="subtitle">
-            {"Zona Horaria"}
-          </Typography.Text>
-          <Typography.Text className="text-gray-500 text-xs">
-            {"Selecciona tu zona horaria"}
-          </Typography.Text>
-        </View>
-        <View className="px-5 pb-3">
-          <TextInput
-            className="bg-gray-100 px-4 py-3 rounded-xl"
-            onChangeText={setQuery}
-            placeholder={"Buscar zona horaria..."}
-            placeholderTextColor={theme.text.tertiary}
-            value={query}
-          />
-        </View>
-      </BottomSheet.Header>
-
-      <BottomSheet.Content scrollable>
-        {filteredTimezones.length === 0 ? (
-          <EmptyState />
-        ) : (
-          <FlatList
-            data={filteredTimezones}
-            keyExtractor={(item) => item.timezone}
-            renderItem={({ item }) => (
-              <TimezoneRow
-                isSelected={selectedTimezone === item.timezone}
-                item={item}
-                onSelect={() => setSelectedTimezone(item.timezone)}
-              />
-            )}
-            scrollEnabled={false}
-          />
-        )}
-      </BottomSheet.Content>
-
-      <BottomSheet.Actions layout="horizontal">
-        <View className="flex-1">
-          <Form.Button onPress={onClose} title={"Cancelar"} variant="outline" />
-        </View>
-        {selectedTimezone && (
-          <View className="flex-1">
-            <Form.Button onPress={handleConfirm} title={"Confirmar"} variant="primary" />
-          </View>
-        )}
-      </BottomSheet.Actions>
-    </BottomSheet.Root>
-  );
-}
-
-export { TimeZoneSelectorModal };

package/sincpro_mobile_ui/widgets/index.ts

@@ -1,7 +0,0 @@
-export { CircleButton } from "./CircleButton";
-export { default as GeoPermissionCard } from "./GeoPermissionCard";
-export { HomeHeader } from "./HomeHeader";
-export { MenuCard } from "./MenuCard";
-export type { MenuItem } from "./MenuGrid";
-export { MenuGrid } from "./MenuGrid";
-export { TimeZoneSelector } from "./TimeZoneSelector";