@sincpro/mobile-ui 0.1.2 → 0.1.3

package/sincpro_mobile_ui/Display/Display.MenuButton.tsx

@@ -1,103 +0,0 @@
-import { ComponentType, ReactNode } from "react";
-import { TouchableOpacity, View } from "react-native";
-
-import { theme } from "../theme";
-import { tv, type VariantProps } from "../theme/tw";
-import { Typography } from "../Typography";
-
-const menuButton = tv({
-  slots: {
-    container: "flex-row items-center py-3 px-4 bg-bg-card",
-    iconContainer: "mr-3 w-8 h-8 rounded-lg items-center justify-center",
-    content: "flex-1",
-    label: "",
-    rightContainer: "ml-2",
-    chevronContainer: "ml-2 w-5 h-5 items-center justify-center",
-    chevron: "text-xl",
-  },
-  variants: {
-    variant: {
-      default: {
-        iconContainer: "bg-bg-hover",
-        label: "text-text-primary",
-      },
-      danger: {
-        iconContainer: "bg-danger-light",
-        label: "text-danger",
-      },
-    },
-    showDivider: {
-      true: {
-        container: "border-b border-border-default",
-      },
-    },
-    disabled: {
-      true: {
-        container: "opacity-40",
-      },
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-    showDivider: true,
-    disabled: false,
-  },
-});
-
-interface MenuButtonProps extends VariantProps<typeof menuButton> {
-  icon?: ComponentType<{ size?: number; color?: string }>;
-  label: string;
-  description?: string;
-  onPress?: () => void;
-  rightComponent?: ReactNode;
-  className?: string;
-}
-
-function MenuButton({
-  icon: Icon,
-  label,
-  description,
-  onPress,
-  rightComponent,
-  showDivider = true,
-  variant = "default",
-  disabled = false,
-  className,
-}: MenuButtonProps) {
-  const styles = menuButton({ variant, showDivider, disabled });
-  const isDanger = variant === "danger";
-  const isClickable = !!onPress && !disabled;
-
-  return (
-    <TouchableOpacity
-      activeOpacity={0.5}
-      className={styles.container({ className })}
-      disabled={disabled || !onPress}
-      onPress={onPress}
-    >
-      {Icon && (
-        <View className={styles.iconContainer()}>
-          <Icon color={isDanger ? theme.danger : theme.text.secondary} size={20} />
-        </View>
-      )}
-      <View className={styles.content()}>
-        <Typography.Text className={styles.label()} variant="body">
-          {label}
-        </Typography.Text>
-        {description && (
-          <Typography.Text className="text-text-secondary" variant="bodySmall">
-            {description}
-          </Typography.Text>
-        )}
-      </View>
-      {rightComponent && <View className={styles.rightContainer()}>{rightComponent}</View>}
-      {!rightComponent && isClickable && (
-        <View className={styles.chevronContainer()}>
-          <Typography.Text className={styles.chevron()}>›</Typography.Text>
-        </View>
-      )}
-    </TouchableOpacity>
-  );
-}
-
-export default MenuButton;

package/sincpro_mobile_ui/Display/Display.Monetary.tsx

@@ -1,60 +0,0 @@
-import type { StyleProp, TextStyle } from "react-native";
-
-import { formatTwoDecimals } from "../lib/monetary";
-import { typographyVariants } from "../theme/typography";
-import { Typography } from "../Typography";
-
-interface MonetaryFieldProps {
-  value: number | string | null | undefined;
-  currencySymbol?: string;
-  prefix?: string;
-  /** @deprecated Use className="text-{color}" instead */
-  color?: string;
-  textVariant?: keyof typeof typographyVariants;
-  /** @deprecated Use className for styling */
-  style?: StyleProp<TextStyle>;
-  /** @deprecated Use className="text-{color}" instead */
-  symbolColor?: string;
-  semibold?: boolean;
-  bold?: boolean;
-  className?: string;
-}
-
-function MonetaryField({
-  value,
-  currencySymbol = "₡",
-  prefix = "",
-  color,
-  textVariant = "body",
-  style = {},
-  symbolColor,
-  semibold = true,
-  bold = false,
-  className,
-}: MonetaryFieldProps) {
-  const isEmptyValue = value === null || value === undefined || value === "";
-  const formatted = isEmptyValue ? "0.00" : formatTwoDecimals(value);
-
-  return (
-    <Typography.Text
-      bold={bold}
-      className={className}
-      color={color}
-      semibold={semibold && !bold}
-      style={style as any}
-      variant={textVariant}
-    >
-      <Typography.Text
-        className={className}
-        color={symbolColor || color}
-        variant={textVariant}
-      >
-        {currencySymbol}
-      </Typography.Text>{" "}
-      {prefix && `${prefix} `}
-      {formatted}
-    </Typography.Text>
-  );
-}
-
-export default MonetaryField;

package/sincpro_mobile_ui/Display/index.ts

@@ -1,28 +0,0 @@
-import Avatar from "./Display.Avatar";
-import Badge, { type BadgeProps, BadgeVariants } from "./Display.Badge";
-import CopyableText from "./Display.CopyableText";
-import CountRecords from "./Display.CountRecords";
-import Date from "./Display.Date";
-import Divider from "./Display.Divider";
-import Icon from "./Display.Icon";
-import Logo from "./Display.Logo";
-import MenuButton from "./Display.MenuButton";
-import Monetary from "./Display.Monetary";
-
-export const Display = {
-  Badge,
-  BadgeVariants,
-  Avatar,
-  CopyableText,
-  Date,
-  Divider,
-  Icon,
-  CountRecords,
-  Logo,
-  MenuButton,
-  Monetary,
-};
-
-export { type BadgeProps, BadgeVariants };
-
-export default Display;

package/sincpro_mobile_ui/Feedback/ErrorBoundary.tsx

@@ -1,51 +0,0 @@
-import React, { Component, ReactNode } from "react";
-
-import FeedbackError from "./Feedback.Error";
-
-interface ErrorBoundaryProps {
-  children: ReactNode;
-  fallback?: (error: Error, retry: () => void) => ReactNode;
-  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
-}
-
-interface ErrorBoundaryState {
-  hasError: boolean;
-  error: Error | null;
-}
-
-export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  constructor(props: ErrorBoundaryProps) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    return { hasError: true, error };
-  }
-
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    console.error("ErrorBoundary caught an error:", error, errorInfo);
-    this.props.onError?.(error, errorInfo);
-  }
-
-  handleRetry = () => {
-    this.setState({ hasError: false, error: null });
-  };
-
-  render() {
-    if (this.state.hasError && this.state.error) {
-      if (this.props.fallback) {
-        return this.props.fallback(this.state.error, this.handleRetry);
-      }
-
-      return (
-        <FeedbackError
-          message={this.state.error.message || "Ocurrió un error inesperado"}
-          onRetry={this.handleRetry}
-        />
-      );
-    }
-
-    return this.props.children;
-  }
-}

package/sincpro_mobile_ui/Feedback/Feedback.DomainSplashScreen.tsx

@@ -1,135 +0,0 @@
-import type React from "react";
-import { ReactNode, useCallback, useEffect, useState } from "react";
-import { StyleSheet, View } from "react-native";
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
-import { scheduleOnRN } from "react-native-worklets";
-
-import GradientContainer from "../layouts/GradientContainer";
-import { Typography } from "../Typography";
-
-interface DomainSplashScreenProps {
-  domainName: string;
-  isLoading: boolean;
-  children: ReactNode;
-  onComplete?: () => void;
-  minDuration?: number;
-}
-
-function DomainSplashScreen({
-  domainName,
-  isLoading,
-  children,
-  onComplete,
-  minDuration = 300,
-}: DomainSplashScreenProps) {
-  const progressValue = useSharedValue(0);
-  const opacityValue = useSharedValue(1);
-  const [isComplete, setIsComplete] = useState(false);
-
-  const handleComplete = useCallback(() => {
-    if (onComplete) {
-      onComplete();
-    }
-  }, [onComplete]);
-
-  useEffect(() => {
-    if (!isLoading) {
-      progressValue.value = withTiming(100, {
-        duration: 300,
-        easing: Easing.out(Easing.ease),
-      });
-
-      setTimeout(() => {
-        opacityValue.value = withTiming(0, {
-          duration: 400,
-          easing: Easing.out(Easing.ease),
-        });
-      }, 100);
-      return;
-    }
-
-    const startTime = Date.now();
-    const totalDuration = 2500;
-
-    const interval = setInterval(() => {
-      const elapsed = Date.now() - startTime;
-      const newProgress = Math.min((elapsed / totalDuration) * 100, 100);
-      progressValue.value = newProgress;
-
-      if (newProgress >= 100) {
-        clearInterval(interval);
-        setIsComplete(true);
-        setTimeout(() => {
-          opacityValue.value = withTiming(
-            0,
-            {
-              duration: 800,
-              easing: Easing.out(Easing.ease),
-            },
-            (finished) => {
-              if (finished) {
-                scheduleOnRN(handleComplete);
-              }
-            },
-          );
-        }, 500);
-      }
-    }, 50);
-
-    return () => clearInterval(interval);
-  }, [isLoading]);
-
-  const progressBarStyle = useAnimatedStyle(() => ({
-    width: `${progressValue.value}%`,
-  }));
-
-  const splashStyle = useAnimatedStyle(() => ({
-    opacity: opacityValue.value,
-  }));
-
-  return (
-    <View style={styles.container}>
-      {children}
-      <Animated.View
-        pointerEvents={isLoading ? "auto" : "none"}
-        style={[StyleSheet.absoluteFillObject, splashStyle]}
-      >
-        <GradientContainer className="flex-1 justify-center items-center px-8">
-          <View className="w-full items-center gap-6">
-            <Typography.Text className="text-2xl font-bold text-white">
-              {isComplete ? "¡Listo!" : `Cargando ${domainName}`}
-            </Typography.Text>
-
-            {!isComplete && (
-              <View className="w-full bg-transparent border border-white/30 rounded-full h-4 overflow-hidden">
-                <Animated.View
-                  className="bg-white rounded-full h-4 shadow-lg"
-                  style={progressBarStyle}
-                />
-              </View>
-            )}
-
-            {isComplete && (
-              <Typography.Text className="text-sm text-white/80">
-                Ya puedes comenzar a usar {domainName}.
-              </Typography.Text>
-            )}
-          </View>
-        </GradientContainer>
-      </Animated.View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
-
-export default DomainSplashScreen;

package/sincpro_mobile_ui/Feedback/Feedback.Empty.tsx

@@ -1,29 +0,0 @@
-import { View } from "react-native";
-
-import { Display } from "../Display";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
-
-interface EmptyProps {
-  handleGoHome?: () => void;
-  className?: string;
-}
-
-function Empty({ handleGoHome, className }: EmptyProps) {
-  return (
-    <View className={cn("flex-1 items-center justify-center px-4", className)}>
-      <Display.Icon name="sad-cry" size={80} type="fontawesome5" />
-      <Typography.Text className="pt-4 text-text-primary" semibold variant="h3">
-        ¡Oops!
-      </Typography.Text>
-      <Typography.Text
-        className="pt-2 text-center text-base leading-5.5 text-text-secondary"
-        variant="h5"
-      >
-        No se encontraron registros disponibles.
-      </Typography.Text>
-    </View>
-  );
-}
-
-export default Empty;

package/sincpro_mobile_ui/Feedback/Feedback.Error.tsx

@@ -1,47 +0,0 @@
-import { View } from "react-native";
-
-import { Display } from "../Display";
-import Button from "../Form/Form.Button";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
-
-interface ErrorProps {
-  message?: string;
-  onRetry?: () => void;
-  onBack?: () => void;
-  onHome?: () => void;
-  className?: string;
-}
-
-function Error({ message, onRetry, onBack, onHome, className }: ErrorProps) {
-  return (
-    <View className={cn("flex-1 items-center justify-center px-4", className)}>
-      <Display.Icon color="#ef4444" name="exclamation-circle" size={80} type="fontawesome5" />
-      <Typography.Text className="pt-4 text-text-primary" semibold variant="h3">
-        ¡Error!
-      </Typography.Text>
-      <Typography.Text
-        className="pt-2 text-center text-base leading-5.5 text-text-secondary"
-        variant="h5"
-      >
-        {message || "Ocurrió un error al cargar la información"}
-      </Typography.Text>
-      <View className="mt-8 w-full gap-3">
-        {onRetry && <Button className="w-full" onPress={onRetry} title="Reintentar" />}
-        {onBack && (
-          <Button className="w-full" onPress={onBack} title="Volver" variant="secondary" />
-        )}
-        {onHome && (
-          <Button
-            className="w-full"
-            onPress={onHome}
-            title="Ir al inicio"
-            variant="outline"
-          />
-        )}
-      </View>
-    </View>
-  );
-}
-
-export default Error;

package/sincpro_mobile_ui/Feedback/Feedback.Loading.tsx

@@ -1,27 +0,0 @@
-import type React from "react";
-import { View } from "react-native";
-
-import { cn } from "../theme/tw";
-import Spinner from "./Feedback.Spinner";
-
-interface LoadingStateProps {
-  message?: string;
-  size?: "small" | "large";
-  style?: object;
-  className?: string;
-}
-
-function LoadingState({
-  message = "Actualizando lista de órdenes",
-  size = "small",
-  style = {},
-  className,
-}: LoadingStateProps) {
-  return (
-    <View className={cn("flex-1 justify-center items-center", className)} style={style}>
-      <Spinner className="mb-5" size={size} text={message} />
-    </View>
-  );
-}
-
-export default LoadingState;

package/sincpro_mobile_ui/Feedback/Feedback.Spinner.tsx

@@ -1,34 +0,0 @@
-import type React from "react";
-import { ActivityIndicator, View, type ViewStyle } from "react-native";
-
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
-
-export interface SpinnerProps {
-  size?: "small" | "large";
-  color?: string;
-  text?: string;
-  style?: ViewStyle;
-  className?: string;
-}
-
-const Spinner: React.FC<SpinnerProps> = ({
-  size = "large",
-  color = "#FF7B0A",
-  text,
-  style,
-  className,
-}) => {
-  return (
-    <View className={cn("items-center justify-center", className)} style={style}>
-      <ActivityIndicator color={color} size={size} />
-      {text && (
-        <Typography.Text className="mt-2.5 text-base" variant="body">
-          {text}
-        </Typography.Text>
-      )}
-    </View>
-  );
-};
-
-export default Spinner;

package/sincpro_mobile_ui/Feedback/Feedback.Splash.tsx

@@ -1,68 +0,0 @@
-import type { ReactNode } from "react";
-import { useEffect, useRef, useState } from "react";
-import { Image, type ImageSourcePropType, View } from "react-native";
-
-import GradientContainer from "../layouts/GradientContainer";
-import Loading from "./Feedback.Loading";
-
-interface SplashScreenProps {
-  isReady: boolean;
-  logo?: ImageSourcePropType;
-  minDuration?: number;
-  message?: string;
-  children?: ReactNode;
-}
-
-function renderLogo(logo?: ImageSourcePropType) {
-  if (!logo) {
-    return null;
-  }
-  return <Image className="w-[250px] h-[200px] mb-12" resizeMode="contain" source={logo} />;
-}
-
-function Splash({
-  isReady,
-  logo,
-  minDuration = 800,
-  message = "Inicializando...",
-  children,
-}: SplashScreenProps) {
-  const [showContent, setShowContent] = useState(false);
-  const minDurationTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-  useEffect(() => {
-    if (minDurationTimeoutRef.current) {
-      clearTimeout(minDurationTimeoutRef.current);
-    }
-
-    if (!isReady) {
-      setShowContent(false);
-      return;
-    }
-
-    minDurationTimeoutRef.current = setTimeout(() => {
-      setShowContent(true);
-    }, minDuration);
-
-    return () => {
-      if (minDurationTimeoutRef.current) {
-        clearTimeout(minDurationTimeoutRef.current);
-      }
-    };
-  }, [isReady, minDuration]);
-
-  if (!showContent) {
-    return (
-      <GradientContainer className="flex-1">
-        <View className="flex-1 justify-center items-center">
-          {renderLogo(logo)}
-          <Loading message={message} size="large" />
-        </View>
-      </GradientContainer>
-    );
-  }
-
-  return children;
-}
-
-export default Splash;

package/sincpro_mobile_ui/Feedback/index.ts

@@ -1,17 +0,0 @@
-import DomainSplashScreen from "./Feedback.DomainSplashScreen";
-import Empty from "./Feedback.Empty";
-import Error from "./Feedback.Error";
-import Loading from "./Feedback.Loading";
-import Spinner from "./Feedback.Spinner";
-
-export { ErrorBoundary } from "./ErrorBoundary";
-
-export const Feedback = {
-  Loading,
-  Spinner,
-  Empty,
-  Error,
-  DomainSplashScreen,
-};
-
-export default Feedback;