@dropi/react-native-design-system 0.3.10 → 0.3.12

package/lib/molecules/InputField/Input.d.ts

@@ -2,25 +2,47 @@ type InputType = "text" | "number" | "email" | "password";
 type InputFactoryProps = {
     type: InputType;
 };
-export declare const Input: ({ type, ...props }: InputFactoryProps) => import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & {
-    type?: import("react-native").KeyboardTypeOptions;
+export declare const Input: ({ type, ...props }: InputFactoryProps) => (({ preIcon, helper, tooltip, value, onChange, hasError, errorMessage, readOnly, }: {
     preIcon?: import("dropi-lib-icons").IconName;
+    helper?: string;
+    tooltip?: string;
+    value: string;
+    onChange: (value: string) => void;
+    hasError: boolean;
+    errorMessage?: string;
+    readOnly: boolean;
+}) => import("react/jsx-runtime").JSX.Element) | import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & {
+    preIcon?: import("dropi-lib-icons").IconName;
+    helper?: string;
+    tooltip?: string;
+    value: string;
+    onChangeFunction: (value: string) => void;
+    hasError: boolean;
+    errorMessage?: string;
+} & import("react").RefAttributes<import("react-native").TextInput>> | (({ label, preIcon, helper, tooltip, placeholder, value, onChange, hasError, errorMessage, readOnly, }: {
     label?: string;
+    preIcon?: import("dropi-lib-icons").IconName;
     helper?: string;
-    placeholder?: string;
     tooltip?: string;
+    placeholder?: string;
     value: string;
+    onChange: (value: string) => void;
     hasError: boolean;
     errorMessage?: string;
-    isFocus: boolean;
-} & import("react").RefAttributes<import("react-native").TextInput>> | (({ preIcon, helper, tooltip, value, onChange, hasError, errorMessage, readOnly, }: {
+    readOnly?: boolean;
+}) => import("react/jsx-runtime").JSX.Element) | (({ label, preIcon, helper, tooltip, placeholder, value, onChange, hasError, errorMessage, readOnly, allowDecimals, minValue, maxValue, }: {
+    label?: string;
     preIcon?: import("dropi-lib-icons").IconName;
     helper?: string;
     tooltip?: string;
+    placeholder?: string;
     value: string;
     onChange: (value: string) => void;
     hasError: boolean;
     errorMessage?: string;
-    readOnly: boolean;
+    readOnly?: boolean;
+    allowDecimals?: boolean;
+    minValue?: number;
+    maxValue?: number;
 }) => import("react/jsx-runtime").JSX.Element);
 export {};

package/lib/molecules/InputField/Input.js

@@ -4,15 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Input = void 0;
-var _BaseInput = require("./BaseInput");
+var _TextInput = require("./TextInput");
+var _NumberInput = require("./NumberInput");
 var _EmailInput = require("./EmailInput");
-// import { PasswordInput } from "./PasswordInput"
-
+var _PasswordInput = require("./PasswordInput");
 const InputComponents = {
-  text: _BaseInput.BaseInput,
-  number: _BaseInput.BaseInput,
+  text: _TextInput.TextInput,
+  number: _NumberInput.NumberInput,
   email: _EmailInput.EmailInput,
-  password: _EmailInput.EmailInput
+  password: _PasswordInput.PasswordInput
 };
 const Input = ({
   type,

package/lib/molecules/InputField/NumberInput.d.ts

@@ -0,0 +1,19 @@
+import { IconName } from "dropi-lib-icons";
+type NumberInputProps = {
+    label?: string;
+    preIcon?: IconName;
+    helper?: string;
+    tooltip?: string;
+    placeholder?: string;
+    value: string;
+    onChange: (value: string) => void;
+    hasError: boolean;
+    errorMessage?: string;
+    readOnly?: boolean;
+    allowDecimals?: boolean;
+    minValue?: number;
+    maxValue?: number;
+};
+export declare const validateNumber: (value: string, allowDecimals?: boolean, minValue?: number, maxValue?: number) => boolean;
+export declare const NumberInput: ({ label, preIcon, helper, tooltip, placeholder, value, onChange, hasError, errorMessage, readOnly, allowDecimals, minValue, maxValue, }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/InputField/NumberInput.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateNumber = exports.NumberInput = void 0;
+var _BaseInput = require("./BaseInput");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+const validateNumber = (value, allowDecimals = true, minValue, maxValue) => {
+  if (value === "" || value === "-") return true;
+  const numberRegex = allowDecimals ? /^-?\d+\.?\d*$/ : /^-?\d+$/;
+  if (!numberRegex.test(value)) return false;
+  const numValue = parseFloat(value);
+  if (minValue !== undefined && numValue < minValue) return false;
+  if (maxValue !== undefined && numValue > maxValue) return false;
+  return true;
+};
+exports.validateNumber = validateNumber;
+const NumberInput = ({
+  label,
+  preIcon,
+  helper,
+  tooltip,
+  placeholder,
+  value,
+  onChange,
+  hasError,
+  errorMessage,
+  readOnly = false,
+  allowDecimals = true,
+  minValue,
+  maxValue
+}) => {
+  const [focus, setFocus] = (0, _react.useState)(false);
+  const [invalidNumber, setInvalidNumber] = (0, _react.useState)(false);
+  const [wasVisited, setWasVisited] = (0, _react.useState)(false);
+  const onFocus = () => {
+    setFocus(true);
+  };
+  const onBlur = () => {
+    setFocus(false);
+    if (!wasVisited) {
+      setWasVisited(true);
+      if (value && !validateNumber(value, allowDecimals, minValue, maxValue)) {
+        setInvalidNumber(true);
+      }
+    }
+  };
+  const getErrorMessage = () => {
+    if (hasError) {
+      return errorMessage;
+    }
+    if (invalidNumber) {
+      if (!allowDecimals) {
+        return "Ingresa un número entero válido";
+      }
+      return "Ingresa un número válido";
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseInput.BaseInput, {
+    type: "decimal-pad",
+    label: label,
+    placeholder: placeholder || "Ingresa un número",
+    value: value,
+    preIcon: preIcon,
+    helper: helper,
+    tooltip: tooltip,
+    onChangeText: text => {
+      onChange(text);
+      if (wasVisited) {
+        if (text === "" || validateNumber(text, allowDecimals, minValue, maxValue)) {
+          setInvalidNumber(false);
+        } else {
+          setInvalidNumber(true);
+        }
+      }
+    },
+    hasError: hasError || invalidNumber,
+    errorMessage: getErrorMessage(),
+    autoCorrect: false,
+    readOnly: readOnly,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    isFocus: focus
+  });
+};
+exports.NumberInput = NumberInput;

package/lib/molecules/InputField/TextInput.d.ts

@@ -0,0 +1,15 @@
+import { IconName } from "dropi-lib-icons";
+type TextInputProps = {
+    label?: string;
+    preIcon?: IconName;
+    helper?: string;
+    tooltip?: string;
+    placeholder?: string;
+    value: string;
+    onChange: (value: string) => void;
+    hasError: boolean;
+    errorMessage?: string;
+    readOnly?: boolean;
+};
+export declare const TextInput: ({ label, preIcon, helper, tooltip, placeholder, value, onChange, hasError, errorMessage, readOnly, }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/InputField/TextInput.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextInput = void 0;
+var _BaseInput = require("./BaseInput");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+const TextInput = ({
+  label,
+  preIcon,
+  helper,
+  tooltip,
+  placeholder,
+  value,
+  onChange,
+  hasError,
+  errorMessage,
+  readOnly = false
+}) => {
+  const [focus, setFocus] = (0, _react.useState)(false);
+  const onFocus = () => {
+    setFocus(true);
+  };
+  const onBlur = () => {
+    setFocus(false);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseInput.BaseInput, {
+    type: "default",
+    label: label,
+    placeholder: placeholder || "Ingresa texto",
+    value: value,
+    preIcon: preIcon,
+    helper: helper,
+    tooltip: tooltip,
+    onChangeText: text => {
+      onChange(text);
+    },
+    hasError: hasError,
+    errorMessage: errorMessage,
+    autoCorrect: false,
+    readOnly: readOnly,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    isFocus: focus
+  });
+};
+exports.TextInput = TextInput;

package/lib/molecules/InputField/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./EmailInput";
 export * from "./PasswordInput";
 export * from "./BaseInput";
+export * from "./TextInput";
+export * from "./NumberInput";

package/lib/molecules/InputField/index.js

@@ -35,4 +35,26 @@ Object.keys(_BaseInput).forEach(function (key) {
       return _BaseInput[key];
     }
   });
+});
+var _TextInput = require("./TextInput");
+Object.keys(_TextInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TextInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TextInput[key];
+    }
+  });
+});
+var _NumberInput = require("./NumberInput");
+Object.keys(_NumberInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _NumberInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _NumberInput[key];
+    }
+  });
 });

package/lib/molecules/RadioButtons/TitleDescription/TitleDescription.d.ts

@@ -1,4 +1,4 @@
-import { TouchableOpacityProps } from 'react-native';
+import { TouchableOpacityProps } from "react-native";
 interface TitleDescriptionProps extends TouchableOpacityProps {
     title: string;
     label?: string;

package/lib/molecules/RadioButtons/TitleDescription/TitleDescription.js

@@ -34,63 +34,72 @@ const TitleDescription = ({
     }],
     disabled: isActive || isDisabled,
     ...rest,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(OptionSelector, {
-      isActive: isActive
-    }), imageSource && /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
-      source: imageSource,
-      style: styles.image
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.textContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
-        type: "m-regular",
-        style: styles.titleText,
-        children: title
-      }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
-        type: "s-regular",
-        style: styles.optionText,
-        children: label
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: "row",
+        alignItems: "center"
+      },
+      children: [imageSource && /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
+        style: styles.image,
+        source: imageSource,
+        contentFit: "contain"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.textContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+          type: "m-regular",
+          style: styles.titleText,
+          children: title
+        }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+          type: "s-regular",
+          style: styles.optionText,
+          children: label
+        })]
       })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionSelector, {
+      isActive: isActive
     })]
   });
 };
 exports.TitleDescription = TitleDescription;
 const styles = _reactNative.StyleSheet.create({
   option: {
-    padding: _constants.spacing['size-4'],
-    borderRadius: _constants.radius['border-2'],
+    padding: _constants.spacing["size-4"],
+    borderRadius: _constants.radius["border-2"],
     borderWidth: 1,
-    borderColor: _constants.colors['Gray-200'].light,
-    marginBottom: _constants.spacing['size-5'],
-    flexDirection: 'row',
-    alignItems: 'center'
+    borderColor: _constants.colors["Gray-200"].light,
+    marginBottom: _constants.spacing["size-5"],
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
   },
   selectedOption: {
-    padding: _constants.spacing['size-4'],
-    borderRadius: _constants.radius['border-2'],
+    padding: _constants.spacing["size-4"],
+    borderRadius: _constants.radius["border-2"],
     borderWidth: 1,
     borderColor: _constants.colors["Primary-500"].light,
-    marginBottom: _constants.spacing['size-5'],
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: _constants.colors['Primary-50'].light
+    marginBottom: _constants.spacing["size-5"],
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: _constants.colors["Primary-50"].light,
+    justifyContent: "space-between"
   },
   optionSelector: {
     width: !_utils.isTablet ? 20 : 20 * 1.5,
     height: !_utils.isTablet ? 20 : 20 * 1.5,
     borderRadius: _constants.radius.circle,
-    marginRight: _constants.spacing['size-3'],
+    marginRight: _constants.spacing["size-3"],
     borderWidth: 2,
-    borderColor: _constants.colors['Gray-200'].light
+    borderColor: _constants.colors["Gray-200"].light
   },
   selectedOptionSelector: {
     width: !_utils.isTablet ? 20 : 20 * 1.5,
     height: !_utils.isTablet ? 20 : 20 * 1.5,
     borderRadius: _constants.radius.circle,
-    marginRight: _constants.spacing['size-3'],
+    marginRight: _constants.spacing["size-3"],
     borderWidth: 2,
     borderColor: _constants.colors["Primary-500"].light,
-    justifyContent: 'center',
-    alignItems: 'center'
+    justifyContent: "center",
+    alignItems: "center"
   },
   innerSelector: {
     width: !_utils.isTablet ? 12 : 12 * 1.5,
@@ -98,19 +107,19 @@ const styles = _reactNative.StyleSheet.create({
     borderRadius: _constants.radius.circle,
     backgroundColor: _constants.colors["Primary-500"].light
   },
-  image: {
-    width: !_utils.isTablet ? 32 : 32 * 1.5,
-    height: !_utils.isTablet ? 32 : 32 * 1.5,
-    marginRight: _constants.spacing['size-3'],
-    borderRadius: _constants.radius.circle
-  },
   textContainer: {
-    flexDirection: 'column'
+    flexDirection: "column"
   },
   titleText: {
-    color: _constants.colors['Gray-700'].light
+    color: _constants.colors["Gray-700"].light
   },
   optionText: {
-    color: _constants.colors['Gray-600'].light
+    color: _constants.colors["Gray-600"].light
+  },
+  image: {
+    width: !_utils.isTablet ? 32 : 32 * 1.5,
+    height: !_utils.isTablet ? 32 : 32 * 1.5,
+    marginRight: _constants.spacing["size-3"],
+    borderRadius: _constants.radius.circle
   }
 });

package/lib/molecules/Select/Select.d.ts

@@ -1,6 +1,8 @@
 export type SelectOption = {
     label: string;
     value: string | number;
+    image?: string | number;
+    message?: string;
 };
 type SelectProps = {
     options: SelectOption[];

package/lib/molecules/Select/Select.js

@@ -7,10 +7,11 @@ exports.Select = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _reactNative2 = _interopRequireDefault(require("dropi-lib-icons/react-native"));
-var _atoms = require("../../atoms");
 var _BottomSheet = require("../BottomSheet");
-var _constants = require("../../constants/");
+var _atoms = require("../../atoms");
+var _constants = require("../../constants");
 var _RadioButtons = require("../RadioButtons");
+var _expoImage = require("expo-image");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Select = ({
@@ -18,7 +19,7 @@ const Select = ({
   value = null,
   onChange,
   label,
-  placeholder = 'Seleccionar',
+  placeholder = "Seleccionar",
   helper,
   hasError = false,
   errorMessage,
@@ -31,9 +32,9 @@ const Select = ({
   const [draftSelection, setDraftSelection] = (0, _react.useState)(null);
   const currentValue = value;
   const getBorderColor = () => {
-    if (hasError) return _constants.colors['Error-500'].light;
-    if (isFocus) return _constants.colors['Info-500'].light;
-    return _constants.colors['Gray-200'].light;
+    if (hasError) return _constants.colors["Error-500"].light;
+    if (isFocus) return _constants.colors["Info-500"].light;
+    return _constants.colors["Gray-200"].light;
   };
   const hasChanges = (0, _react.useMemo)(() => {
     if (!draftSelection) return false;
@@ -73,7 +74,9 @@ const Select = ({
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButtons.TitleDescription, {
       title: item.label,
       isActive: isSelected,
-      onPress: () => handleDraftSelect(item)
+      onPress: () => handleDraftSelect(item),
+      imageSource: item.image,
+      label: item.message
     });
   }, [draftSelection, handleDraftSelect]);
   const footer = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -98,7 +101,7 @@ const Select = ({
     children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
       type: "m-regular",
       style: {
-        color: _constants.colors['Gray-600'].light
+        color: _constants.colors["Gray-600"].light
       },
       children: label
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
@@ -107,10 +110,14 @@ const Select = ({
       }, disabled && styles.disabled],
       onPress: handleOpen,
       activeOpacity: 0.7,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+      children: [currentValue?.image && /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
+        style: styles.image,
+        source: currentValue.image,
+        contentFit: "contain"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
         type: "m-regular",
         style: {
-          color: currentValue ? _constants.colors['Gray-600'].light : _constants.colors['Gray-400'].light,
+          color: currentValue ? _constants.colors["Gray-600"].light : _constants.colors["Gray-400"].light,
           flex: 1
         },
         numberOfLines: 1,
@@ -119,16 +126,16 @@ const Select = ({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.default, {
         name: "dropdown-down",
         size: _constants.sizes.xl,
-        color: _constants.colors['Gray-400'].light
+        color: _constants.colors["Gray-400"].light
       })]
     }), helper && !hasError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
-        marginTop: _constants.spacing['size-2']
+        marginTop: _constants.spacing["size-2"]
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
         type: "s-regular",
         style: {
-          color: _constants.colors['Gray-600'].light
+          color: _constants.colors["Gray-600"].light
         },
         children: helper
       })
@@ -139,7 +146,7 @@ const Select = ({
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.default, {
           name: "warning-circle",
           size: _constants.sizes.s,
-          color: _constants.colors['Error-500'].light
+          color: _constants.colors["Error-500"].light
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
         type: "s-regular",
@@ -148,8 +155,8 @@ const Select = ({
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_BottomSheet.BottomSheetComponent, {
       ref: bottomSheetRef,
-      title: title ?? label ?? 'Seleccionar',
-      snapPoints: ['70%', '90%'],
+      title: title ?? label ?? "Seleccionar",
+      snapPoints: ["90%"],
       onDismiss: handleDismiss,
       footer: footer,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
@@ -165,41 +172,48 @@ const Select = ({
 exports.Select = Select;
 const styles = _reactNative.StyleSheet.create({
   fieldContainer: {
-    marginBottom: _constants.spacing['size-4'],
-    width: '100%'
+    marginBottom: _constants.spacing["size-4"],
+    width: "100%"
   },
   selectButton: {
-    width: '100%',
-    borderRadius: _constants.radius['border-2'],
+    width: "100%",
+    borderRadius: _constants.radius["border-2"],
     borderWidth: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginTop: _constants.spacing['size-2'],
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginTop: _constants.spacing["size-2"],
     height: 48,
-    paddingHorizontal: _constants.spacing['size-3']
+    paddingHorizontal: _constants.spacing["size-3"]
   },
   disabled: {
     opacity: 0.5
   },
   errorContainer: {
-    marginTop: _constants.spacing['size-2'],
-    flexDirection: 'row',
-    width: '100%'
+    marginTop: _constants.spacing["size-2"],
+    flexDirection: "row",
+    width: "100%"
   },
   errorIcon: {
-    alignItems: 'center',
-    paddingTop: _constants.spacing['size-1']
+    alignItems: "center",
+    paddingTop: _constants.spacing["size-1"]
   },
   errorText: {
-    color: _constants.colors['Error-500'].light,
-    marginLeft: _constants.spacing['size-1'],
+    color: _constants.colors["Error-500"].light,
+    marginLeft: _constants.spacing["size-1"],
     flex: 1
   },
   optionsList: {
-    paddingHorizontal: _constants.spacing['size-5']
+    paddingHorizontal: _constants.spacing["size-5"],
+    paddingBottom: _constants.spacing["size-8"]
   },
   footerSecondaryButton: {
-    marginTop: _constants.spacing['size-4']
+    marginTop: _constants.spacing["size-4"]
+  },
+  image: {
+    width: _constants.sizes.l,
+    height: _constants.sizes.l,
+    marginRight: _constants.spacing["size-3"],
+    borderRadius: _constants.radius.circle
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/react-native-design-system",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "description": "A React Native package built from scratch",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",