@sincpro/mobile-ui 0.1.2 → 0.1.4

package/sincpro_mobile_ui/Form/Form.MonetaryInput.tsx

@@ -1,66 +0,0 @@
-import { useState } from "react";
-import { View } from "react-native";
-import CurrencyInput from "react-native-currency-input";
-
-import { parseToMonetaryNumber } from "../lib/monetary";
-import { tv } from "../theme/tw";
-import { Typography } from "../Typography";
-
-const monetaryBox = tv({
-  base: "justify-center items-center bg-bg-card rounded-lg",
-  variants: {
-    focused: {
-      true: "border-2 border-border-focus",
-      false: "border border-border-default",
-    },
-  },
-  defaultVariants: { focused: false },
-});
-
-interface MonetaryInputProps {
-  amount?: number;
-  onChange?: (value: number) => void;
-  currencySymbol?: string;
-  placeholder?: string;
-}
-
-function MonetaryInput({
-  amount,
-  onChange,
-  currencySymbol = "₡",
-  placeholder = "Escriba el monto",
-}: MonetaryInputProps) {
-  const [raw, setRaw] = useState<number>(parseToMonetaryNumber(amount));
-  const [isFocused, setIsFocused] = useState(false);
-
-  const handleChange = (amount: number) => {
-    setRaw(amount);
-    onChange?.(parseToMonetaryNumber(amount));
-  };
-
-  return (
-    <View className="flex-row">
-      <View className={monetaryBox({ focused: isFocused, className: "w-10 h-10" })}>
-        <Typography.Text className="text-xl" variant="body">
-          {currencySymbol}
-        </Typography.Text>
-      </View>
-      <View
-        className={monetaryBox({ focused: isFocused, className: "flex-1 h-10 ml-2 px-4" })}
-      >
-        <CurrencyInput
-          delimiter="."
-          keyboardType="numeric"
-          onBlur={() => setIsFocused(false)}
-          onChangeValue={handleChange}
-          onFocus={() => setIsFocused(true)}
-          placeholder={placeholder}
-          separator=","
-          value={raw}
-        />
-      </View>
-    </View>
-  );
-}
-
-export default MonetaryInput;

package/sincpro_mobile_ui/Form/Form.PasswordInput.tsx

@@ -1,42 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import React, { useState } from "react";
-import { TouchableOpacity, View } from "react-native";
-
-import InputField from "./Form.InputField";
-
-export interface PasswordFieldProps {
-  label: string;
-  error?: string;
-  inputProps: React.ComponentProps<typeof InputField>["inputProps"];
-}
-
-const PasswordField: React.FC<PasswordFieldProps> = ({ label, error, inputProps }) => {
-  const [showPassword, setShowPassword] = useState(false);
-
-  return (
-    <View className="mb-4 relative">
-      <InputField
-        error={error}
-        inputProps={{
-          ...inputProps,
-          secureTextEntry: !showPassword,
-          autoComplete: "off",
-          importantForAutofill: "no",
-        }}
-        label={label}
-      />
-      <TouchableOpacity
-        className="absolute right-3 bottom-[25px]"
-        onPress={() => setShowPassword(!showPassword)}
-      >
-        <Ionicons
-          className="text-text-primary"
-          name={showPassword ? "eye-off-outline" : "eye-outline"}
-          size={24}
-        />
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-export default PasswordField;

package/sincpro_mobile_ui/Form/Form.QuantitySelector.tsx

@@ -1,81 +0,0 @@
-import type React from "react";
-import { StyleProp, TouchableOpacity, View, ViewStyle } from "react-native";
-import { tv } from "tailwind-variants";
-
-import { Display } from "../Display";
-import { Typography } from "../Typography";
-
-const quantitySelector = tv({
-  slots: {
-    container: "flex-row items-center border border-brand-accent rounded-full px-1",
-    button: "w-9 h-9 rounded-full justify-center items-center",
-    valueContainer: "min-w-[40px] items-center px-3",
-  },
-  variants: {
-    disabled: {
-      true: {
-        button: "opacity-50",
-      },
-    },
-  },
-});
-
-interface QuantitySelectorProps {
-  value: number;
-  onChange: (value: number) => void;
-  min?: number;
-  max?: number;
-  style?: StyleProp<ViewStyle>;
-}
-
-function QuantitySelector({
-  value,
-  onChange,
-  min = 1,
-  max = 999,
-  style,
-}: QuantitySelectorProps) {
-  const handleDecrement = () => {
-    if (value > min) {
-      onChange(value - 1);
-    }
-  };
-
-  const handleIncrement = () => {
-    if (value < max) {
-      onChange(value + 1);
-    }
-  };
-
-  const decrementStyles = quantitySelector({ disabled: value <= min });
-  const incrementStyles = quantitySelector({ disabled: value >= max });
-  const containerStyles = quantitySelector();
-
-  return (
-    <View className={containerStyles.container()} style={style}>
-      <TouchableOpacity
-        className={decrementStyles.button()}
-        disabled={value <= min}
-        onPress={handleDecrement}
-      >
-        <Display.Icon name="minus" size={16} type="feather" />
-      </TouchableOpacity>
-
-      <View className={containerStyles.valueContainer()}>
-        <Typography.Text semibold variant="body">
-          {value}
-        </Typography.Text>
-      </View>
-
-      <TouchableOpacity
-        className={incrementStyles.button()}
-        disabled={value >= max}
-        onPress={handleIncrement}
-      >
-        <Display.Icon name="plus" size={16} type="feather" />
-      </TouchableOpacity>
-    </View>
-  );
-}
-
-export default QuantitySelector;

package/sincpro_mobile_ui/Form/Form.RadioButton.tsx

@@ -1,52 +0,0 @@
-import { TouchableOpacity, View } from "react-native";
-import { tv } from "tailwind-variants";
-
-import { Typography } from "../Typography";
-
-const radioButton = tv({
-  slots: {
-    container:
-      "flex-row items-center py-2.5 px-3 rounded-lg border-[1.5px] border-border-default bg-bg-card",
-    radioCircle:
-      "w-[18px] h-[18px] rounded-full border-2 border-border-default mr-2 justify-center items-center",
-    radioInner: "w-[9px] h-[9px] rounded-full",
-    label: "flex-1",
-  },
-  variants: {
-    selected: {
-      true: {
-        container: "border-accent bg-accent/10",
-        radioCircle: "border-accent",
-        radioInner: "bg-accent",
-        label: "text-text-primary font-semibold",
-      },
-      false: {
-        label: "text-text-secondary",
-      },
-    },
-  },
-  defaultVariants: { selected: false },
-});
-
-interface RadioButtonProps {
-  label: string;
-  selected: boolean;
-  onPress: () => void;
-}
-
-function RadioButton({ label, selected, onPress }: RadioButtonProps) {
-  const styles = radioButton({ selected });
-
-  return (
-    <TouchableOpacity activeOpacity={0.7} className={styles.container()} onPress={onPress}>
-      <View className={styles.radioCircle()}>
-        {selected && <View className={styles.radioInner()} />}
-      </View>
-      <Typography.Text className={styles.label()} variant="bodySmall">
-        {label}
-      </Typography.Text>
-    </TouchableOpacity>
-  );
-}
-
-export default RadioButton;

package/sincpro_mobile_ui/Form/Form.SearchBar.tsx

@@ -1,64 +0,0 @@
-import type React from "react";
-import { useState } from "react";
-import { TextInput, TouchableOpacity, View } from "react-native";
-
-import { Display } from "../Display";
-import { theme } from "../theme";
-import { cn, tv } from "../theme/tw";
-
-const Icon = Display.Icon;
-
-const searchBarContainer = tv({
-  base: "flex-row items-center bg-bg-card rounded-lg px-2 h-10 shadow-sm",
-  variants: {
-    focused: {
-      true: "border-2 border-border-focus",
-      false: "border border-border-default",
-    },
-  },
-  defaultVariants: { focused: false },
-});
-
-interface SearchBarProps {
-  value: string;
-  onChangeText: (text: string) => void;
-  placeholder?: string;
-  className?: string;
-}
-
-function SearchBar({
-  value,
-  onChangeText,
-  placeholder = "Search",
-  className,
-}: SearchBarProps) {
-  const [isFocused, setIsFocused] = useState(false);
-
-  return (
-    <View className={cn(searchBarContainer({ focused: isFocused }), className)}>
-      <View className="mr-1 ml-0.5 items-center justify-center h-full">
-        <Icon className="text-text-tertiary" name="search" size={18} type="ionicons" />
-      </View>
-      <TextInput
-        className="flex-1 h-full text-sm py-0 px-1.5 text-text-primary"
-        onBlur={() => setIsFocused(false)}
-        onChangeText={onChangeText}
-        onFocus={() => setIsFocused(true)}
-        placeholder={placeholder}
-        placeholderTextColor={theme.text.tertiary}
-        value={value}
-      />
-      {value.length > 0 && (
-        <TouchableOpacity
-          activeOpacity={0.7}
-          className="mr-0.5 ml-1 items-center justify-center h-full px-1"
-          onPress={() => onChangeText("")}
-        >
-          <Icon className="text-text-tertiary" name="x" size={18} type="feather" />
-        </TouchableOpacity>
-      )}
-    </View>
-  );
-}
-
-export default SearchBar;

package/sincpro_mobile_ui/Form/Form.TextInput.tsx

@@ -1,26 +0,0 @@
-import { FC } from "react";
-import { TextInput, TextInputProps } from "react-native";
-
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-
-export interface TextInputFProps extends TextInputProps {
-  error?: string;
-  className?: string;
-}
-
-const TextInputF: FC<TextInputFProps> = ({ className, ...props }) => {
-  return (
-    <TextInput
-      {...props}
-      className={cn(
-        "border border-input rounded-md h-11 px-3 py-2 text-text-primary",
-        className,
-      )}
-      placeholderTextColor={theme.text.tertiary}
-      style={props.style}
-    />
-  );
-};
-
-export default TextInputF;

package/sincpro_mobile_ui/Form/index.ts

@@ -1,46 +0,0 @@
-import ButtonWithIcon from "./Form.Button";
-import Checkbox from "./Form.Checkbox";
-import ControlledCheckbox from "./Form.ControlledCheckbox";
-import ControlledDropdown, { type DropdownOption } from "./Form.ControlledDropdown";
-import ControlledInput from "./Form.ControlledInput";
-import ControlledMonetaryInput from "./Form.ControlledMonetaryInput";
-import ControlledRadioButton from "./Form.ControlledRadioButton";
-import Dropdown from "./Form.Dropdown";
-import { FilterButton, FilterButtonGroup } from "./Form.FilterButton";
-import FractionalQuantityInput from "./Form.FractionalQuantityInput";
-import IconButton from "./Form.IconButton";
-import Input from "./Form.Input";
-import InputField from "./Form.InputField";
-import MonetaryInput from "./Form.MonetaryInput";
-import PasswordInput from "./Form.PasswordInput";
-import QuantitySelector from "./Form.QuantitySelector";
-import RadioButton from "./Form.RadioButton";
-import SearchBar from "./Form.SearchBar";
-import TextInput from "./Form.TextInput";
-
-export const Form = {
-  TextInput,
-  Input,
-  InputField,
-  Button: ButtonWithIcon,
-  IconButton,
-  PasswordInput,
-  QuantitySelector,
-  FractionalQuantityInput,
-  RadioButton,
-  Checkbox,
-  SearchBar,
-  Dropdown,
-  MonetaryInput,
-  ControlledInput,
-  ControlledRadioButton,
-  ControlledCheckbox,
-  ControlledDropdown,
-  ControlledMonetaryInput,
-  FilterButton,
-  FilterButtonGroup,
-};
-
-export { type DropdownOption };
-
-export default Form;

package/sincpro_mobile_ui/Navigation/Navigation.Header.tsx

@@ -1,50 +0,0 @@
-import React, { ReactNode } from "react";
-import { TouchableOpacity, View } from "react-native";
-
-import { Display } from "../Display";
-import GradientContainer from "../layouts/GradientContainer";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
-
-export interface HeaderProps {
-  title?: string;
-  logo?: ReactNode;
-  backButton?: boolean;
-  handleBackButton?: () => void;
-  className?: string;
-}
-
-const Header = ({ title, logo, backButton, handleBackButton, className }: HeaderProps) => {
-  const onBackPress = handleBackButton ?? (() => {});
-
-  return (
-    <GradientContainer className={cn("pt-10 pb-3.5 px-4", className)}>
-      <View className="relative items-center justify-center">
-        {backButton && (
-          <TouchableOpacity
-            className="absolute top-0 left-0 z-10 border border-white p-1.5 rounded"
-            onPress={onBackPress}
-          >
-            <Display.Icon
-              color={theme.text.inverse}
-              name="chevron-back"
-              size={25}
-              type="ionicons"
-            />
-          </TouchableOpacity>
-        )}
-        <View className="items-center justify-center">
-          {logo || <Display.Logo size="medium" />}
-          {title && (
-            <Typography.Text className="text-white" variant="h4">
-              {title}
-            </Typography.Text>
-          )}
-        </View>
-      </View>
-    </GradientContainer>
-  );
-};
-
-export default Header;

package/sincpro_mobile_ui/Navigation/Navigation.HeaderToolbar.tsx

@@ -1,111 +0,0 @@
-import type React from "react";
-import { TouchableOpacity, View } from "react-native";
-
-import { Display } from "../Display";
-import GradientContainer from "../layouts/GradientContainer";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
-
-const Icon = Display.Icon;
-const Text = Typography.Text;
-
-interface HeaderToolbarProps {
-  title?: string;
-  logo?: boolean;
-  centerTitle?: boolean;
-  subtitle?: string;
-  onBack?: () => void;
-  rightComponent?: React.ReactNode;
-  flat?: boolean;
-  children?: React.ReactNode;
-  withBackground?: boolean;
-  className?: string;
-}
-
-function HeaderToolbar({
-  title = "",
-  subtitle,
-  onBack,
-  rightComponent,
-  centerTitle = false,
-  flat = false,
-  children,
-  logo = false,
-  withBackground = true,
-  className,
-}: HeaderToolbarProps) {
-  const borderRadius = flat ? "rounded-none" : "rounded-b-[20px]";
-  const paddingBottom = flat ? "pb-0" : "pb-4";
-
-  function renderToolbar() {
-    return (
-      <>
-        <View className="flex-row items-center justify-between px-3.5 pt-2.5 h-16 relative">
-          {onBack && (
-            <TouchableOpacity
-              className="mr-3.5 border border-white rounded-lg items-center justify-center mb-3.5 p-1.5 z-[1]"
-              onPress={onBack}
-            >
-              <Icon
-                color={theme.text.inverse}
-                name="chevron-back"
-                size={25}
-                type="ionicons"
-              />
-            </TouchableOpacity>
-          )}
-
-          {logo && (
-            <View className="absolute left-0 right-0 items-center justify-center z-0">
-              <Display.Logo size="medium" />
-            </View>
-          )}
-
-          {!logo && (
-            <View
-              className={cn(
-                "flex-1",
-                centerTitle && "absolute left-0 right-0 items-center justify-center z-[1]",
-              )}
-            >
-              <Text
-                className="text-white"
-                numberOfLines={1}
-                style={{ top: centerTitle ? 0 : -4 }}
-                variant={centerTitle ? "h4" : "h6"}
-              >
-                {title}
-              </Text>
-              {subtitle && (
-                <Text
-                  className="text-white"
-                  style={{ top: centerTitle ? 0 : -4 }}
-                  variant="bodySmall"
-                >
-                  {subtitle}
-                </Text>
-              )}
-            </View>
-          )}
-
-          {rightComponent && <View className="ml-auto">{rightComponent}</View>}
-        </View>
-
-        <View>{children}</View>
-      </>
-    );
-  }
-
-  return withBackground ? (
-    <GradientContainer
-      className={cn("shadow-lg shadow-black/70", borderRadius, paddingBottom, className)}
-    >
-      {renderToolbar()}
-    </GradientContainer>
-  ) : (
-    <>{renderToolbar()}</>
-  );
-}
-
-export default HeaderToolbar;

package/sincpro_mobile_ui/Navigation/Navigation.RowItem.tsx

@@ -1,33 +0,0 @@
-import { TouchableOpacity, View } from "react-native";
-
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
-import { IRowItemProps } from "../views/types/IListView";
-
-function RowItem({ item, className }: IRowItemProps<any> & { className?: string }) {
-  function rowContent() {
-    return (
-      <View className="flex-1">
-        <Typography.Text className="flex-1" variant="title">
-          {item.rowTitle}
-        </Typography.Text>
-        <Typography.Text className="mt-0.5 text-text-secondary" variant="bodySmall">
-          {item.rowSubtitle}
-        </Typography.Text>
-      </View>
-    );
-  }
-
-  return item.readonly ? (
-    <View className={cn("flex-row items-center py-2.5", className)}>{rowContent()}</View>
-  ) : (
-    <TouchableOpacity
-      className={cn("flex-row items-center py-2.5", className)}
-      onPress={item.onPress}
-    >
-      {rowContent()}
-    </TouchableOpacity>
-  );
-}
-
-export default RowItem;

package/sincpro_mobile_ui/Navigation/Navigation.TabIcon.tsx

@@ -1,45 +0,0 @@
-import { ComponentType } from "react";
-import { View } from "react-native";
-
-import { Display } from "../Display";
-import { cn } from "../theme/tw";
-
-const Icon = Display.Icon;
-
-interface TabIconProps {
-  focused: boolean;
-  size?: number;
-  customIcon?: ComponentType<{ size?: number; color?: string }>;
-  type?: "custom" | "ionicons" | "fontawesome" | "material" | "fontawesome5";
-  name?: any;
-  className?: string;
-}
-
-function TabIcon({
-  focused,
-  size = 24,
-  customIcon,
-  type = "custom",
-  name,
-  className,
-}: TabIconProps) {
-  return (
-    <View
-      className={cn(
-        "justify-center items-center h-9 w-14 rounded-2xl",
-        focused && "bg-primary shadow-sm",
-        className,
-      )}
-    >
-      <Icon
-        className={focused ? "text-white" : "text-text-secondary"}
-        customIcon={customIcon}
-        name={name}
-        size={size}
-        type={type}
-      />
-    </View>
-  );
-}
-
-export default TabIcon;

package/sincpro_mobile_ui/Navigation/Navigation.TabItem.tsx

@@ -1,43 +0,0 @@
-import { ComponentType, FC } from "react";
-import { View } from "react-native";
-
-import { Display } from "../Display";
-import { cn } from "../theme/tw";
-
-export interface TabIconProps {
-  focused: boolean;
-  size?: number;
-  customIcon?: ComponentType<{ size?: number; color?: string }>;
-  type?: "custom" | "ionicons" | "fontawesome" | "material" | "fontawesome5";
-  name?: any;
-  className?: string;
-}
-
-const TabIcon: FC<TabIconProps> = ({
-  focused,
-  size = 24,
-  customIcon,
-  type = "custom",
-  name,
-  className,
-}) => {
-  return (
-    <View
-      className={cn(
-        "justify-center items-center w-12 h-12 rounded-full",
-        focused ? "bg-primary shadow-md" : "bg-transparent",
-        className,
-      )}
-    >
-      <Display.Icon
-        color={focused ? "#FFFFFF" : "#6B7280"}
-        customIcon={customIcon}
-        name={name}
-        size={size}
-        type={type as any}
-      />
-    </View>
-  );
-};
-
-export default TabIcon;

package/sincpro_mobile_ui/Navigation/index.ts

@@ -1,15 +0,0 @@
-import Header from "./Navigation.Header";
-import HeaderToolbar from "./Navigation.HeaderToolbar";
-import RowItem from "./Navigation.RowItem";
-import TabIcon from "./Navigation.TabIcon";
-import TabItem from "./Navigation.TabItem";
-
-export const Navigation = {
-  Header,
-  HeaderToolbar,
-  TabItem,
-  TabIcon,
-  RowItem,
-};
-
-export default Navigation;