react-native-form-controls 1.0.0

package/README.md

@@ -0,0 +1,122 @@
+# react-native-form-controls
+
+[![npm version](https://img.shields.io/npm/v/react-native-form-controls.svg)](https://www.npmjs.com/package/react-native-form-controls)
+
+A highly customizable input component for React Native that works in **any project**. Use it for text, password, textarea out of the box; optionally add date/time picker and Google Places autocomplete by installing extra packages.
+
+## Features
+
+- **Core types (no extra deps)**: text, password, textarea
+- **Optional date/time**: Install `react-native-date-picker` for date, time, and datetime types
+- **Optional autocomplete**: Install `react-native-google-places-autocomplete` and pass `googleApiKey` for location search
+- **Customizable styles**: container, label, input
+- **Error handling**: error message and error border
+- **Icons**: left and right icons with actions
+- **Controlled/uncontrolled**: Supports `value` and `onChangeText` for all types, including date/time
+
+## Installation
+
+**Base (works in any project):**
+
+```bash
+npm install react-native-form-controls
+# or
+yarn add react-native-form-controls
+```
+
+**Optional – date/time picker** (for `type="date"`, `type="time"`, `type="datetime"`):
+
+```bash
+npm install react-native-date-picker
+# or
+yarn add react-native-date-picker
+```
+
+**Optional – Google Places autocomplete** (for `type="autocomplete"`):
+
+```bash
+npm install react-native-google-places-autocomplete
+# or
+yarn add react-native-google-places-autocomplete
+```
+
+If you don’t install the optional packages, the component still works: text, password, and textarea work as usual; date/time and autocomplete show a fallback message asking you to install the corresponding package.
+
+## Example app
+
+A runnable example (Expo) is in the [`example/`](./example) folder:
+
+```bash
+npm run build && cd example && npm install && npm start
+```
+
+See [example/README.md](./example/README.md) for details.
+
+## Usage
+
+```tsx
+import { Input, COLORS } from 'react-native-form-controls';
+
+// Text
+<Input type="text" label="Name" placeholder="Enter name" />
+
+// Password
+<Input type="password" label="Password" placeholder="Enter password" />
+
+// Textarea
+<Input type="textarea" label="Notes" placeholder="Enter notes" />
+
+// Date (requires react-native-date-picker)
+<Input type="date" label="Birth date" onChangeText={(iso) => setDate(iso)} />
+
+// Time (requires react-native-date-picker)
+<Input type="time" label="Time" onChangeText={(iso) => setTime(iso)} />
+
+// Autocomplete (requires react-native-google-places-autocomplete + googleApiKey)
+<Input
+  type="autocomplete"
+  label="Location"
+  googleApiKey="YOUR_GOOGLE_PLACES_API_KEY"
+  onChangeText={(place) => console.log(place)}
+/>
+```
+
+Use `COLORS` from the package to match built-in theming (e.g. `labelStyle={{ color: COLORS.primary }}`).
+
+## Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `type` | `'text' \| 'password' \| 'date' \| 'time' \| 'datetime' \| 'textarea' \| 'autocomplete'` | Input type |
+| `label` | `string` | Label above the input |
+| `error` | `string` | Error message (shows below input and error border) |
+| `googleApiKey` | `string` | **Required for `type="autocomplete"`**. Google Places API key. |
+| `containerStyle` | `ViewStyle` | Container style |
+| `labelStyle` | `TextStyle` | Label style |
+| `inputStyle` | `TextStyle` | Input style |
+| `leftIcon` | `ImageSourcePropType` | Left icon image source |
+| `rightIcon` | `ReactNode` | Right icon (e.g. eye for password) |
+| Plus all standard `TextInput` props: `value`, `onChangeText`, `placeholder`, etc. |
+
+For date/time/datetime, `onChangeText` receives an ISO date string. For autocomplete, it receives an object with `addresstext`, `latitude`, `longitude`, `location` (e.g. `city`, `country`, `state`, `pincode`).
+
+## Publishing to npm
+
+From the repository root:
+
+```bash
+# 1. Build the library
+npm run build
+
+# 2. Log in to npm (one-time)
+npm login
+
+# 3. Publish
+npm publish
+```
+
+To publish a new version, update `version` in `package.json` (e.g. `1.1.1`) then run `npm publish` again. Use `npm version patch` to bump the version automatically.
+
+## License
+
+MIT

package/lib/Input.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ImageSourcePropType, TextInputProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
+export declare const COLORS: {
+    black: string;
+    white: string;
+    background: string;
+    darkGray: string;
+    lightGray: string;
+    primary: string;
+    secondary: string;
+    success: string;
+    tertiary: string;
+    danger: string;
+    warning: string;
+    info: string;
+    light: string;
+    dark: string;
+    link: string;
+    error: string;
+};
+interface InputProps extends TextInputProps {
+    type: 'text' | 'password' | 'date' | 'time' | 'datetime' | 'textarea' | 'autocomplete';
+    leftIcon?: ImageSourcePropType;
+    rightIcon?: React.ReactNode;
+    label?: string;
+    error?: string;
+    containerStyle?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    inputStyle?: StyleProp<TextStyle>;
+    /** Required for type="autocomplete". Install react-native-google-places-autocomplete to use. */
+    googleApiKey?: string;
+}
+declare const Input: React.FC<InputProps>;
+export default Input;

package/lib/Input.js

@@ -0,0 +1,289 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLORS = void 0;
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+// Optional dependencies – only loaded when used; safe for projects that don't install them
+var DatePicker = null;
+var GooglePlacesAutocomplete = null;
+try {
+    DatePicker = require('react-native-date-picker').default;
+}
+catch (_b) {
+    // react-native-date-picker not installed – date/time/datetime will show fallback
+}
+try {
+    var GooglePlaces = require('react-native-google-places-autocomplete');
+    GooglePlacesAutocomplete = (_a = GooglePlaces.GooglePlacesAutocomplete) !== null && _a !== void 0 ? _a : GooglePlaces.default;
+}
+catch (_c) {
+    // react-native-google-places-autocomplete not installed – autocomplete will show fallback
+}
+exports.COLORS = {
+    // text color
+    black: '#252F40',
+    white: '#FFFFFF',
+    background: '#FFFFF',
+    darkGray: '#A9A9A9',
+    lightGray: '#D3D3D3',
+    // base colors
+    primary: '#007bff',
+    secondary: '#627594',
+    success: '#28a745',
+    tertiary: '#E8AE4C',
+    danger: '#dc3545',
+    warning: '#FFC107',
+    info: '#17A2B8',
+    light: '#F8F9FA',
+    dark: '#343A40',
+    link: '#007BFF',
+    error: '#EB5757',
+};
+var TextInputField = function (_a) {
+    var isPasswordVisible = _a.isPasswordVisible, inputStyle = _a.inputStyle, error = _a.error, type = _a.type, props = __rest(_a, ["isPasswordVisible", "inputStyle", "error", "type"]);
+    return (react_1.default.createElement(react_native_1.TextInput, __assign({ style: [styles.input, inputStyle, error ? styles.errorBorder : {}], secureTextEntry: type === 'password' && !isPasswordVisible, placeholderTextColor: exports.COLORS.secondary }, props)));
+};
+var TextareaInput = function (_a) {
+    var inputStyle = _a.inputStyle, error = _a.error, props = __rest(_a, ["inputStyle", "error"]);
+    return (react_1.default.createElement(react_native_1.TextInput, __assign({ style: [styles.textarea, inputStyle, error ? styles.errorBorder : {}], multiline: true, placeholderTextColor: exports.COLORS.secondary }, props)));
+};
+var AutocompleteInput = function (_a) {
+    var inputStyle = _a.inputStyle, error = _a.error, googleApiKey = _a.googleApiKey, _b = _a.placeholder, placeholder = _b === void 0 ? 'Search' : _b, props = __rest(_a, ["inputStyle", "error", "googleApiKey", "placeholder"]);
+    var getAddress = (0, react_1.useCallback)(function (details) {
+        var addressComponent = details === null || details === void 0 ? void 0 : details.address_components;
+        var address = {};
+        addressComponent === null || addressComponent === void 0 ? void 0 : addressComponent.forEach(function (item) {
+            var _a, _b, _c, _d;
+            if ((_a = item === null || item === void 0 ? void 0 : item.types) === null || _a === void 0 ? void 0 : _a.includes('locality')) {
+                address.city = item === null || item === void 0 ? void 0 : item.long_name;
+            }
+            if ((_b = item === null || item === void 0 ? void 0 : item.types) === null || _b === void 0 ? void 0 : _b.includes('country')) {
+                address.country = item === null || item === void 0 ? void 0 : item.long_name;
+                address.countryCode = item === null || item === void 0 ? void 0 : item.short_name;
+            }
+            if ((_c = item === null || item === void 0 ? void 0 : item.types) === null || _c === void 0 ? void 0 : _c.includes('postal_code')) {
+                address.pincode = item === null || item === void 0 ? void 0 : item.long_name;
+            }
+            if ((_d = item === null || item === void 0 ? void 0 : item.types) === null || _d === void 0 ? void 0 : _d.includes('administrative_area_level_1')) {
+                address.state = item === null || item === void 0 ? void 0 : item.long_name;
+            }
+        });
+        return address;
+    }, []);
+    var handlePlacePress = (0, react_1.useCallback)(function (data, details) {
+        var _a, _b, _c, _d;
+        if (props.onChangeText) {
+            var addressObj = {
+                addresstext: data.description,
+                latitude: (_b = (_a = details === null || details === void 0 ? void 0 : details.geometry) === null || _a === void 0 ? void 0 : _a.location) === null || _b === void 0 ? void 0 : _b.lat,
+                longitude: (_d = (_c = details === null || details === void 0 ? void 0 : details.geometry) === null || _c === void 0 ? void 0 : _c.location) === null || _d === void 0 ? void 0 : _d.lng,
+                location: getAddress(details),
+            };
+            props.onChangeText(addressObj);
+        }
+    }, [getAddress, props.onChangeText]);
+    if (!GooglePlacesAutocomplete) {
+        return (react_1.default.createElement(react_native_1.TextInput, { style: [styles.input, styles.inputContainer, inputStyle, error ? styles.errorBorder : {}], placeholder: "Install react-native-google-places-autocomplete for location search", placeholderTextColor: exports.COLORS.secondary, editable: false }));
+    }
+    if (!googleApiKey) {
+        return (react_1.default.createElement(react_native_1.TextInput, { style: [styles.input, styles.inputContainer, inputStyle, error ? styles.errorBorder : {}], placeholder: "Provide googleApiKey for location search", placeholderTextColor: exports.COLORS.secondary, editable: false }));
+    }
+    var PlacesComponent = GooglePlacesAutocomplete;
+    return (react_1.default.createElement(PlacesComponent, __assign({ placeholder: placeholder, fetchDetails: true, onPress: handlePlacePress, query: {
+            key: googleApiKey,
+            language: 'en',
+        }, textInputProps: {
+            placeholderTextColor: exports.COLORS.secondary,
+        }, styles: {
+            textInput: [
+                styles.inputContainer,
+                inputStyle,
+                error ? styles.errorBorder : {},
+            ],
+        } }, props)));
+};
+function parseDateValue(value) {
+    if (value === undefined || value === null || value === '')
+        return undefined;
+    if (value instanceof Date)
+        return value;
+    var parsed = new Date(value);
+    return isNaN(parsed.getTime()) ? undefined : parsed;
+}
+function formatDateByType(date, type) {
+    if (type === 'date')
+        return date.toLocaleDateString();
+    if (type === 'time')
+        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    return date.toLocaleString();
+}
+var Input = function (_a) {
+    var _b;
+    var type = _a.type, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, label = _a.label, error = _a.error, containerStyle = _a.containerStyle, labelStyle = _a.labelStyle, inputStyle = _a.inputStyle, valueProp = _a.value, props = __rest(_a, ["type", "leftIcon", "rightIcon", "label", "error", "containerStyle", "labelStyle", "inputStyle", "value"]);
+    var _c = (0, react_1.useState)(false), isPasswordVisible = _c[0], setIsPasswordVisible = _c[1];
+    var initialDate = parseDateValue(valueProp);
+    var _d = (0, react_1.useState)(initialDate), date = _d[0], setDate = _d[1];
+    var _e = (0, react_1.useState)(false), isDatePickerVisible = _e[0], setIsDatePickerVisible = _e[1];
+    var isDateType = type === 'date' || type === 'time' || type === 'datetime';
+    var controlledDate = isDateType ? parseDateValue(valueProp) : undefined;
+    (0, react_1.useEffect)(function () {
+        if (isDateType && controlledDate !== undefined) {
+            setDate(controlledDate);
+        }
+    }, [isDateType, valueProp]);
+    var displayDate = (_b = date !== null && date !== void 0 ? date : controlledDate) !== null && _b !== void 0 ? _b : new Date();
+    var displayValue = isDateType
+        ? (date ? formatDateByType(date, type) : valueProp !== null && valueProp !== void 0 ? valueProp : '')
+        : valueProp;
+    var handleIconPress = function () {
+        if (type === 'password') {
+            setIsPasswordVisible(!isPasswordVisible);
+        }
+        else if (isDateType) {
+            setIsDatePickerVisible(true);
+        }
+    };
+    var renderInput = function () {
+        switch (type) {
+            case 'textarea':
+                return (react_1.default.createElement(TextareaInput, __assign({ inputStyle: inputStyle, error: error, value: valueProp }, props)));
+            case 'autocomplete':
+                return (react_1.default.createElement(AutocompleteInput, __assign({ type: 'text', inputStyle: inputStyle, error: error, googleApiKey: props.googleApiKey }, props)));
+            case 'date':
+            case 'time':
+            case 'datetime':
+                if (!DatePicker) {
+                    return (react_1.default.createElement(react_native_1.TextInput, { style: [styles.input, inputStyle, error ? styles.errorBorder : {}], placeholder: "Install react-native-date-picker for date/time selection", placeholderTextColor: exports.COLORS.secondary, editable: false }));
+                }
+                return (react_1.default.createElement(TextInputField, __assign({ type: type, value: displayValue, editable: false, inputStyle: inputStyle, error: error }, props)));
+            default:
+                return (react_1.default.createElement(TextInputField, __assign({ type: type, isPasswordVisible: isPasswordVisible, inputStyle: inputStyle, error: error, value: valueProp }, props)));
+        }
+    };
+    var renderDatePicker = function () {
+        if (!DatePicker || !isDateType || !isDatePickerVisible)
+            return null;
+        return (react_1.default.createElement(DatePicker, { modal: true, mode: type === 'datetime' ? 'datetime' : type, open: isDatePickerVisible, date: displayDate, onConfirm: function (selectedDate) {
+                setIsDatePickerVisible(false);
+                setDate(selectedDate);
+                if (props.onChangeText) {
+                    props.onChangeText(selectedDate.toISOString());
+                }
+            }, onCancel: function () { return setIsDatePickerVisible(false); } }));
+    };
+    return (react_1.default.createElement(react_native_1.View, { style: [styles.container, containerStyle] },
+        label && react_1.default.createElement(react_native_1.Text, { style: [styles.label, labelStyle] }, label),
+        react_1.default.createElement(react_native_1.View, { style: [
+                type !== 'autocomplete' && styles.inputContainer,
+                error ? styles.errorBorder : {},
+            ] },
+            leftIcon && react_1.default.createElement(react_native_1.Image, { source: leftIcon, style: styles.icon }),
+            renderInput(),
+            rightIcon && (react_1.default.createElement(react_native_1.TouchableOpacity, { onPress: handleIconPress }, rightIcon))),
+        error && react_1.default.createElement(react_native_1.Text, { style: styles.errorText }, error),
+        renderDatePicker()));
+};
+var styles = react_native_1.StyleSheet.create({
+    container: {
+        marginVertical: 5,
+    },
+    label: {
+        marginBottom: 4,
+        color: exports.COLORS.black,
+        fontSize: 16,
+    },
+    inputContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: exports.COLORS.secondary,
+        borderRadius: 8,
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+        backgroundColor: exports.COLORS.white,
+        minHeight: 40,
+    },
+    input: {
+        flex: 1,
+        color: exports.COLORS.black,
+        padding: 0,
+        fontSize: 14,
+    },
+    textarea: {
+        flex: 1,
+        color: exports.COLORS.black,
+        padding: 0,
+        fontSize: 14,
+        textAlignVertical: 'top',
+        height: 100,
+    },
+    icon: {
+        width: 16,
+        height: 16,
+    },
+    errorBorder: {
+        borderColor: exports.COLORS.error,
+    },
+    errorText: {
+        color: exports.COLORS.error,
+        fontSize: 12,
+        marginTop: 4,
+    },
+});
+exports.default = Input;

package/lib/index.d.ts

@@ -0,0 +1 @@
+export { default as Input, COLORS } from './Input';

package/lib/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLORS = exports.Input = void 0;
+var Input_1 = require("./Input");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return __importDefault(Input_1).default; } });
+Object.defineProperty(exports, "COLORS", { enumerable: true, get: function () { return Input_1.COLORS; } });

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "react-native-form-controls",
+  "version": "1.0.0",
+  "description": "A highly customizable and versatile input component for React Native.",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "lib",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tarunj116/react-native-smart-input.git"
+  },
+  "keywords": [
+    "react-native",
+    "input",
+    "component",
+    "date-picker",
+    "google-places-autocomplete"
+  ],
+  "author": "Tarun Jain",
+  "license": "MIT",
+  "dependencies": {
+    "react-native": "^0.74.3"
+  },
+  "peerDependencies": {
+    "react-native": ">=0.70.0",
+    "react-native-date-picker": "^4.0.0",
+    "react-native-google-places-autocomplete": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-date-picker": {
+      "optional": true
+    },
+    "react-native-google-places-autocomplete": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-native": "^0.73.0",
+    "typescript": "^5.5.4"
+  }
+}