@sincpro/mobile-ui 0.1.2 → 0.1.4

package/sincpro_mobile_ui/Dialog/Dialog.Confirmation.tsx

@@ -1,68 +0,0 @@
-import React from "react";
-import { Modal, TouchableWithoutFeedback, View } from "react-native";
-
-import { BaseButton } from "../primitives/BaseButton";
-import { theme } from "../theme";
-import Typography from "../Typography/Typography.Text";
-
-export interface Props {
-  auxTitle?: string;
-  subtitle?: string;
-  confirmButtonText?: string;
-  cancelButtonText?: string;
-  visible: boolean;
-  onCancel: () => void;
-  onConfirm: () => void;
-}
-
-const ConfirmationDialog: React.FC<Props> = ({
-  visible,
-  onCancel,
-  onConfirm,
-  auxTitle = "cambios",
-  subtitle = "¿Estás seguro de que quieres descartar los cambios realizados?",
-  confirmButtonText = "Sí",
-  cancelButtonText = "No, continuar aquí",
-}) => {
-  return (
-    <Modal animationType="fade" onRequestClose={onCancel} transparent visible={visible}>
-      <TouchableWithoutFeedback onPress={onCancel}>
-        <View className="flex-1 justify-center items-center p-6 bg-black/50">
-          <TouchableWithoutFeedback>
-            <View
-              className="rounded-xl p-3 w-full max-w-xs mx-auto"
-              style={{ backgroundColor: theme.bg.popover, ...theme.shadow.md }}
-            >
-              <Typography className="mb-1.5 text-sm" variant="body">
-                <Typography semibold variant="body">
-                  {auxTitle}
-                </Typography>
-              </Typography>
-              <Typography className="mb-3 text-xs leading-tight" variant="body">
-                {subtitle}
-              </Typography>
-              <View className="flex-row gap-2">
-                <BaseButton
-                  className="flex-1"
-                  onPress={onCancel}
-                  size="small"
-                  title={cancelButtonText}
-                  variant="outlineBlack"
-                />
-                <BaseButton
-                  className="flex-1"
-                  onPress={onConfirm}
-                  size="small"
-                  title={confirmButtonText}
-                  variant="primary"
-                />
-              </View>
-            </View>
-          </TouchableWithoutFeedback>
-        </View>
-      </TouchableWithoutFeedback>
-    </Modal>
-  );
-};
-
-export default ConfirmationDialog;

package/sincpro_mobile_ui/Dialog/Dialog.EditValue.tsx

@@ -1,134 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { FlatList, Modal, TextInput, TouchableOpacity, View } from "react-native";
-
-import { theme } from "../theme";
-import { Typography } from "../Typography";
-
-export interface EditableValueModalChip {
-  key?: string;
-  label: string;
-  onPress: () => void;
-}
-
-export interface EditableValueModalProps {
-  visible: boolean;
-  title: string;
-  value: string;
-  onChangeValue: (text: string) => void;
-  onConfirm: () => void;
-  onCancel: () => void;
-  placeholder?: string;
-  helperText?: string | React.ReactNode;
-  chips?: EditableValueModalChip[];
-  keyboardType?: "default" | "numeric" | "decimal-pad";
-  rightAdornment?: React.ReactNode;
-  confirmLabel?: string;
-  cancelLabel?: string;
-  autoFocus?: boolean;
-  testID?: string;
-}
-
-function EditableValueModal({
-  visible,
-  title,
-  value,
-  onChangeValue,
-  onConfirm,
-  onCancel,
-  placeholder,
-  helperText,
-  chips,
-  keyboardType = "decimal-pad",
-  rightAdornment,
-  confirmLabel = "Aplicar",
-  cancelLabel = "Cancelar",
-  autoFocus = true,
-  testID,
-}: EditableValueModalProps) {
-  const inputRef = useRef<TextInput>(null);
-
-  useEffect(() => {
-    if (visible && autoFocus) {
-      const t = setTimeout(() => inputRef.current?.focus(), 60);
-      return () => clearTimeout(t);
-    }
-  }, [visible, autoFocus]);
-
-  return (
-    <Modal animationType="fade" onRequestClose={onCancel} transparent visible={visible}>
-      <View className="flex-1 justify-center p-6 bg-black/40">
-        <View
-          className="rounded-xl p-4"
-          style={{ backgroundColor: theme.bg.popover, ...theme.shadow.md }}
-          testID={testID}
-        >
-          <Typography.Text className="mb-3" semibold variant="h6">
-            {title}
-          </Typography.Text>
-          <View className="flex-row items-center">
-            <TextInput
-              className="flex-1 border border-input rounded-lg p-2.5 text-lg text-text-primary"
-              keyboardType={keyboardType}
-              onChangeText={onChangeValue}
-              onSubmitEditing={onConfirm}
-              placeholder={placeholder}
-              ref={inputRef}
-              returnKeyType="done"
-              value={value}
-            />
-            {rightAdornment && <View className="ml-2">{rightAdornment}</View>}
-          </View>
-          {helperText ? (
-            <View className="mt-2">
-              {typeof helperText === "string" ? (
-                <Typography.Text className="opacity-70" variant="bodySmall">
-                  {helperText}
-                </Typography.Text>
-              ) : (
-                helperText
-              )}
-            </View>
-          ) : null}
-          {chips && chips.length > 0 && (
-            <FlatList
-              contentContainerClassName="gap-2 py-3"
-              data={chips}
-              horizontal
-              keyExtractor={(c, i) => c.key || `${c.label}-${i}`}
-              renderItem={({ item }) => (
-                <TouchableOpacity
-                  className="px-3 py-1.5 bg-accent/10 rounded-2xl border border-accent/30"
-                  onPress={item.onPress}
-                >
-                  <Typography.Text semibold variant="bodySmall">
-                    {item.label}
-                  </Typography.Text>
-                </TouchableOpacity>
-              )}
-            />
-          )}
-          <View className="flex-row justify-end gap-3">
-            <TouchableOpacity
-              className="px-4 py-2.5 rounded-lg bg-bg-hover"
-              onPress={onCancel}
-            >
-              <Typography.Text semibold variant="body">
-                {cancelLabel}
-              </Typography.Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              className="px-4 py-2.5 rounded-lg bg-accent"
-              onPress={onConfirm}
-            >
-              <Typography.Text className="text-text-inverse" semibold variant="body">
-                {confirmLabel}
-              </Typography.Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-      </View>
-    </Modal>
-  );
-}
-
-export default EditableValueModal;

package/sincpro_mobile_ui/Dialog/index.ts

@@ -1,23 +0,0 @@
-import { BottomSheet } from "./BottomSheet";
-import { ConfirmationProvider, useConfirmationContext } from "./Confirmation.context";
-import Confirmation from "./Dialog.Confirmation";
-import EditValue, {
-  type EditableValueModalChip,
-  type EditableValueModalProps,
-} from "./Dialog.EditValue";
-
-export const Dialog = {
-  Confirmation,
-  BottomSheet,
-  EditValue,
-};
-
-export {
-  BottomSheet,
-  ConfirmationProvider,
-  type EditableValueModalChip,
-  type EditableValueModalProps,
-  useConfirmationContext,
-};
-
-export default Dialog;

package/sincpro_mobile_ui/Display/Display.Avatar.tsx

@@ -1,60 +0,0 @@
-import { FC } from "react";
-import { View } from "react-native";
-
-import { cn, tv, type VariantProps } from "../theme/tw";
-import { Typography } from "../Typography";
-
-const avatar = tv({
-  base: "justify-center items-center rounded-full shadow-sm",
-  variants: {
-    size: {
-      small: "w-8 h-8",
-      medium: "w-10 h-10",
-      large: "w-12 h-12",
-      xlarge: "w-16 h-16",
-    },
-    colorScheme: {
-      default: "bg-bg-hover",
-      primary: "bg-primary/20",
-      secondary: "bg-secondary/20",
-      success: "bg-success-light",
-      warning: "bg-warning-light",
-    },
-  },
-  defaultVariants: {
-    size: "medium",
-    colorScheme: "default",
-  },
-});
-
-export interface AvatarProps extends Omit<VariantProps<typeof avatar>, "size"> {
-  initials: string;
-  size?: number;
-  className?: string;
-}
-
-const Avatar: FC<AvatarProps> = ({ initials, size, colorScheme = "default", className }) => {
-  // Map size prop to Tailwind text classes
-  const getTextSize = () => {
-    if (size && size <= 32) return "text-xs";
-    if (size && size <= 40) return "text-sm";
-    if (size && size <= 48) return "text-base";
-    return "text-lg";
-  };
-
-  return (
-    <View
-      className={cn(avatar({ colorScheme }), className)}
-      style={size ? { width: size, height: size } : undefined}
-    >
-      <Typography.Text
-        className={cn("text-text-primary font-semibold", getTextSize())}
-        variant="body"
-      >
-        {initials}
-      </Typography.Text>
-    </View>
-  );
-};
-
-export default Avatar;

package/sincpro_mobile_ui/Display/Display.Badge.tsx

@@ -1,72 +0,0 @@
-import { Text, View } from "react-native";
-
-import { tv, type VariantProps } from "../theme/tw";
-
-const badge = tv({
-  slots: {
-    root: "px-2.5 py-1.5 rounded-lg self-start",
-    text: "text-xs font-semibold",
-  },
-  variants: {
-    variant: {
-      info: {
-        root: "bg-info-light",
-        text: "text-info",
-      },
-      infoDark: {
-        root: "bg-info",
-        text: "text-text-on-primary",
-      },
-      warning: {
-        root: "bg-warning-light",
-        text: "text-warning",
-      },
-      success: {
-        root: "bg-success-light",
-        text: "text-success",
-      },
-      successDark: {
-        root: "bg-success",
-        text: "text-text-on-primary",
-      },
-      danger: {
-        root: "bg-danger-light",
-        text: "text-danger",
-      },
-    },
-  },
-  defaultVariants: {
-    variant: "info",
-  },
-});
-
-export type BadgeVariant = VariantProps<typeof badge>["variant"];
-
-export enum BadgeVariants {
-  INFO = "info",
-  WARNING = "warning",
-  SUCCESS = "success",
-  INFO_DARK = "infoDark",
-  DANGER = "danger",
-  SUCCESS_DARK = "successDark",
-}
-
-export type BadgeProps = {
-  label: string;
-  variant: BadgeVariants | BadgeVariant | string;
-  className?: string;
-};
-
-function Badge({ label, variant, className }: BadgeProps) {
-  const styles = badge({ variant: variant as BadgeVariant });
-
-  return (
-    <View className={styles.root({ className })}>
-      <Text className={styles.text()} numberOfLines={1}>
-        {label}
-      </Text>
-    </View>
-  );
-}
-
-export default Badge;

package/sincpro_mobile_ui/Display/Display.CopyableText.tsx

@@ -1,38 +0,0 @@
-import * as Clipboard from "expo-clipboard";
-import { TouchableOpacity } from "react-native";
-
-import { Typography } from "../Typography";
-
-type CopyableTextProps =
-  | {
-      value: string;
-      getValue?: never;
-      label?: string;
-      className?: string;
-    }
-  | {
-      value?: never;
-      getValue: () => string;
-      label?: string;
-      className?: string;
-    };
-
-function CopyableText({ value, getValue, label, className }: CopyableTextProps) {
-  const hasStaticValue = value !== undefined;
-  const displayText = label || value;
-
-  const handleCopy = async () => {
-    const textToCopy = hasStaticValue ? value : getValue();
-    await Clipboard.setStringAsync(textToCopy);
-  };
-
-  return (
-    <TouchableOpacity onPress={handleCopy}>
-      <Typography.Text className={className || "text-primary"} semibold variant="bodySmall">
-        {displayText}
-      </Typography.Text>
-    </TouchableOpacity>
-  );
-}
-
-export default CopyableText;

package/sincpro_mobile_ui/Display/Display.CountRecords.tsx

@@ -1,26 +0,0 @@
-import { View } from "react-native";
-
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
-
-interface IProps {
-  name?: string;
-  count: number;
-  withPadding?: boolean;
-  className?: string;
-}
-
-function CountRecords({ name, count, withPadding = true, className }: IProps) {
-  return (
-    <View className={cn("flex-row py-2", withPadding && "px-4", className)}>
-      <Typography.Text semibold variant="bodySmall">
-        {"Total "} {`${name || "Registros"} `}
-      </Typography.Text>
-      <Typography.Text className="text-text-secondary" variant="bodySmall">
-        ( {count} )
-      </Typography.Text>
-    </View>
-  );
-}
-
-export default CountRecords;

package/sincpro_mobile_ui/Display/Display.Date.tsx

@@ -1,59 +0,0 @@
-import type { StyleProp, TextStyle } from "react-native";
-
-import { formatDate } from "../lib/date";
-import { typographyVariants } from "../theme/typography";
-import { Typography } from "../Typography";
-
-type DateFormat = "short" | "long" | "numeric";
-
-interface DateFieldProps {
-  value: string | Date | null | undefined;
-  format?: DateFormat;
-  prefix?: string;
-  textVariant?: keyof typeof typographyVariants;
-  color?: string;
-  style?: StyleProp<TextStyle>;
-  semibold?: boolean;
-  bold?: boolean;
-  className?: string;
-  showTime?: boolean;
-  timezone?: string;
-}
-
-function DateField({
-  value,
-  format = "short",
-  prefix = "",
-  textVariant = "body",
-  color,
-  style = {},
-  semibold = false,
-  bold = false,
-  className,
-  showTime = true,
-  timezone,
-}: DateFieldProps) {
-  const locale = "es-CR";
-
-  const formatted = value
-    ? formatDate(value, timezone, {
-        showTime,
-        locale,
-      })
-    : "-";
-
-  return (
-    <Typography.Text
-      bold={bold}
-      className={className}
-      color={color}
-      semibold={semibold && !bold}
-      style={style as any}
-      variant={textVariant}
-    >
-      {prefix ? `${prefix}${formatted}` : formatted}
-    </Typography.Text>
-  );
-}
-
-export default DateField;

package/sincpro_mobile_ui/Display/Display.Divider.tsx

@@ -1,40 +0,0 @@
-import { View } from "react-native";
-
-import { cn, tv, type VariantProps } from "../theme/tw";
-
-const divider = tv({
-  base: "w-full bg-border-divider",
-  variants: {
-    spacing: {
-      none: "my-0",
-      sm: "my-1",
-      md: "my-2",
-      lg: "my-3",
-    },
-    colorScheme: {
-      light: "bg-border-divider opacity-50",
-      default: "bg-border-divider",
-      dark: "bg-border-divider opacity-100",
-    },
-  },
-  defaultVariants: {
-    spacing: "md",
-    colorScheme: "default",
-  },
-});
-
-interface DividerProps extends VariantProps<typeof divider> {
-  thickness?: number;
-  className?: string;
-}
-
-function Divider({ thickness = 1, spacing, colorScheme, className }: DividerProps) {
-  return (
-    <View
-      className={cn(divider({ spacing, colorScheme }), className)}
-      style={{ height: thickness }}
-    />
-  );
-}
-
-export default Divider;

package/sincpro_mobile_ui/Display/Display.Icon.tsx

@@ -1,69 +0,0 @@
-import {
-  AntDesign,
-  Feather,
-  FontAwesome,
-  FontAwesome5,
-  Ionicons,
-  MaterialCommunityIcons,
-  MaterialIcons,
-  SimpleLineIcons,
-} from "@expo/vector-icons";
-import { ComponentType, FC } from "react";
-import { View } from "react-native";
-
-import { IconType } from "../lib/icon";
-import { theme } from "../theme";
-
-export interface IconProps {
-  name?: any;
-  size?: number;
-  color?: string;
-  type?: IconType;
-  customIcon?: ComponentType<{ size?: number; color?: string }>;
-  className?: string;
-}
-
-const Icon: FC<IconProps> = ({
-  name,
-  size = 24,
-  color,
-  type = "ionicons",
-  customIcon,
-  className,
-}) => {
-  const iconColor = color || theme.text.primary;
-
-  const renderIcon = () => {
-    if (type === "custom" && customIcon) {
-      const CustomIconComponent = customIcon;
-      return <CustomIconComponent color={iconColor} size={size} />;
-    }
-
-    switch (type) {
-      case "ionicons":
-        return <Ionicons color={iconColor} name={name} size={size} />;
-      case "fontawesome":
-        return <FontAwesome color={iconColor} name={name} size={size} />;
-      case "material":
-        return <MaterialIcons color={iconColor} name={name} size={size} />;
-      case "fontawesome5":
-        return <FontAwesome5 color={iconColor} name={name} size={size} />;
-      case "simplelineicons":
-        return <SimpleLineIcons color={iconColor} name={name} size={size} />;
-      case "antdesign":
-        return <AntDesign color={iconColor} name={name} size={size} />;
-      case "feather":
-        return <Feather color={iconColor} name={name} size={size} />;
-      case "MaterialCommunityIcons":
-        return <MaterialCommunityIcons color={iconColor} name={name} size={size} />;
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <View className={`justify-center items-center ${className || ""}`}>{renderIcon()}</View>
-  );
-};
-
-export default Icon;

package/sincpro_mobile_ui/Display/Display.Logo.tsx

@@ -1,51 +0,0 @@
-import { FC } from "react";
-import { Image, type ImageSourcePropType, View } from "react-native";
-
-import { tv, type VariantProps } from "../theme/tw";
-
-const logo = tv({
-  slots: {
-    container: "items-center justify-center",
-    image: "",
-  },
-  variants: {
-    size: {
-      small: {
-        image: "w-[120px] h-[80px]",
-      },
-      medium: {
-        image: "w-[180px] h-[100px]",
-      },
-      large: {
-        image: "w-[250px] h-[250px]",
-      },
-    },
-  },
-  defaultVariants: {
-    size: "medium",
-  },
-});
-
-export interface LogoProps extends VariantProps<typeof logo> {
-  source?: ImageSourcePropType;
-  className?: string;
-}
-
-function renderImage(imageClassName: string, source?: ImageSourcePropType) {
-  if (!source) {
-    return null;
-  }
-  return <Image className={imageClassName} resizeMode="contain" source={source} />;
-}
-
-const Logo: FC<LogoProps> = ({ source, size = "medium", className }) => {
-  const styles = logo({ size });
-
-  return (
-    <View className={styles.container({ className })}>
-      {renderImage(styles.image(), source)}
-    </View>
-  );
-};
-
-export default Logo;