@rn-components-dropdown/dropdown 1.0.1 → 1.0.3

package/README.md

@@ -0,0 +1,146 @@
+# @rn-components-dropdown/dropdown
+
+A lightweight, customizable, and fully typed **Dropdown** and **DropdownController** component for **React Native**.  
+Supports **single** & **multiple selection**, custom icons, styling, and easy integration with **React Hook Form**.
+
+---
+
+## 📦 Installation
+
+### Install Package
+
+```bash
+npm install @rn-components-dropdown/dropdown
+```
+
+### React Hook Form (optional — required only for DropdownController)
+
+```bash
+npm install react-hook-form
+```
+
+---
+
+## ✨ Components Provided
+
+This package includes two components:
+
+### 🔹 Dropdown  
+A standalone dropdown with:
+- Single or multi selection  
+- Custom icons  
+- Full styling customization  
+- Works independently  
+
+### 🔹 DropdownController  
+A wrapper designed for **React Hook Form**, handling form values automatically.
+
+---
+
+# 🔽 Dropdown Usage
+
+```tsx
+import { Dropdown } from "@rn-components-dropdown/dropdown";
+
+export default function MyScreen() {
+  return (
+    <Dropdown
+      data={[
+        { id: 1, label: "Apple" },
+        { id: 2, label: "Banana" },
+      ]}
+      labelField="label"
+      valueField="id"
+      placeholder="Select fruit"
+    />
+  );
+}
+```
+
+---
+
+# 🔧 Dropdown Props
+
+| Prop              | Type                    | Description                                      |
+|-------------------|-------------------------|--------------------------------------------------|
+| data              | Array<any>             | List of dropdown items                           |
+| labelField        | string                 | Key used for item label                           |
+| valueField        | string                 | Key used for item value                           |
+| value             | any                    | Current selected item/value                       |
+| placeholder       | string                 | Placeholder text                                  |
+| multiple          | boolean                | Enable multi-select                               |
+| onChange          | (item) => void         | Callback when value changes                       |
+| disable           | boolean                | Disable the dropdown                              |
+| renderIcon        | () => JSX.Element      | Custom icon renderer                              |
+| style             | ViewStyle              | Wrapper container style                           |
+| selectedStyle     | ViewStyle              | Style for selected value display                  |
+| dropdownStyle     | ViewStyle              | Dropdown list container style                     |
+| placeholderStyle  | TextStyle              | Style for placeholder text                        |
+| itemStyle         | ViewStyle              | Style for each dropdown item                      |
+| ...others         | any                    | Additional props                                  |
+
+---
+
+# 🎯 DropdownController (React Hook Form Support)
+
+A form-friendly dropdown that automatically:
+- updates values  
+- handles errors  
+- applies validation rules  
+
+---
+
+## 📘 Usage with React Hook Form
+
+```tsx
+import { useForm } from "react-hook-form";
+import { DropdownController } from "@rn-components-dropdown/dropdown";
+
+export default function FormScreen() {
+  const { control } = useForm();
+
+  return (
+    <DropdownController
+      control={control}
+      name="fruit"
+      rules={{ required: "Please select a fruit" }}
+      dropProps={{
+        data: [
+          { id: 1, label: "Apple" },
+          { id: 2, label: "Banana" },
+        ],
+        labelField: "label",
+        valueField: "id",
+        placeholder: "Pick a fruit",
+      }}
+    />
+  );
+}
+```
+
+---
+
+## 🧩 DropdownController Props
+
+| Prop          | Type        | Description                                   |
+|---------------|-------------|-----------------------------------------------|
+| control       | Control     | React Hook Form control object                |
+| name          | string      | Field name in the form                        |
+| rules         | object      | Validation rules (optional)                   |
+| dropProps     | object      | All dropdown props                             |
+| defaultValue  | any         | Initial/default value                          |
+
+---
+
+## 📝 Notes
+
+- Works on **iOS** and **Android**
+- Supports **custom icons**, SVG or any JSX via `renderIcon`
+- Fully customizable styles
+- TypeScript supported
+
+---
+
+## 📄 License
+
+MIT

package/dist/index.d.ts

@@ -1,5 +1,2 @@
-export { default as AppText } from './components/text/AppText';
 export { default as Dropdown } from './components/dropdown/Dropdown';
-export { default as TextInput } from './components/textInput/AppTextInput';
 export { default as DropdownController } from './controller/dropDownController/DropdownController';
-export { default as TextInputController } from './controller/textInputController/AppTextInputController';

package/dist/index.js

@@ -3,14 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextInputController = exports.DropdownController = exports.TextInput = exports.Dropdown = exports.AppText = void 0;
-var AppText_1 = require("./components/text/AppText");
-Object.defineProperty(exports, "AppText", { enumerable: true, get: function () { return __importDefault(AppText_1).default; } });
+exports.DropdownController = exports.Dropdown = void 0;
 var Dropdown_1 = require("./components/dropdown/Dropdown");
 Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return __importDefault(Dropdown_1).default; } });
-var AppTextInput_1 = require("./components/textInput/AppTextInput");
-Object.defineProperty(exports, "TextInput", { enumerable: true, get: function () { return __importDefault(AppTextInput_1).default; } });
 var DropdownController_1 = require("./controller/dropDownController/DropdownController");
 Object.defineProperty(exports, "DropdownController", { enumerable: true, get: function () { return __importDefault(DropdownController_1).default; } });
-var AppTextInputController_1 = require("./controller/textInputController/AppTextInputController");
-Object.defineProperty(exports, "TextInputController", { enumerable: true, get: function () { return __importDefault(AppTextInputController_1).default; } });

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@rn-components-dropdown/dropdown",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Daynight-Himmat/react-components.git"
+  },
   "scripts": {
     "build": "tsc",
     "patch": "npm version patch",

package/src/index.ts

@@ -1,5 +1,2 @@
-export { default as AppText } from './components/text/AppText';
 export { default as Dropdown } from './components/dropdown/Dropdown';
-export { default as TextInput } from './components/textInput/AppTextInput';
-export { default as DropdownController }from './controller/dropDownController/DropdownController';
-export { default as TextInputController } from './controller/textInputController/AppTextInputController';
+export { default as DropdownController }from './controller/dropDownController/DropdownController';

package/dist/controller/textInputController/AppTextInputController.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import { AppTextProps } from '../../components/textInput/AppTextInput';
-import { StyleProp, TextStyle, ViewStyle } from 'react-native';
-import { Control, FieldValues, Path } from 'react-hook-form';
-interface Props<T extends FieldValues> extends AppTextProps {
-    textStyle?: TextStyle;
-    controllerName: Path<T>;
-    containerStyle?: ViewStyle;
-    control: Control<T> | undefined;
-    labelStyle?: StyleProp<TextStyle>;
-}
-declare const AppTextControlInput: <T extends FieldValues>({ control, textStyle, labelStyle, controllerName, containerStyle, ...rest }: Props<T>) => React.JSX.Element;
-export default AppTextControlInput;

package/dist/controller/textInputController/AppTextInputController.js

@@ -1,14 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const AppTextInput_1 = __importDefault(require("../../components/textInput/AppTextInput"));
-const InputControllerStyle_1 = require("./InputControllerStyle");
-const react_hook_form_1 = require("react-hook-form");
-const AppTextControlInput = ({ control, textStyle, labelStyle, controllerName, containerStyle, ...rest }) => {
-    const { styles } = (0, InputControllerStyle_1.useInputController)();
-    return (<react_hook_form_1.Controller control={control} name={controllerName} render={({ fieldState: { error }, field: { onChange, value, onBlur }, }) => (<AppTextInput_1.default value={value} onBlur={onBlur} error={error?.message} onChangeText={onChange} textStyle={[styles.inputText, textStyle]} labelStyle={[styles.labelText, labelStyle]} style={[styles.inputControlContainer, containerStyle]} {...rest}/>)}/>);
-};
-exports.default = AppTextControlInput;

package/dist/controller/textInputController/InputControllerStyle.d.ts

@@ -1,31 +0,0 @@
-export declare const useInputController: () => {
-    styles: {
-        labelText: {
-            color: string;
-        };
-        inputControlContainer: {
-            height: number;
-            borderWidth: number;
-            borderRadius: number;
-            alignItems: "center";
-            marginVertical: number;
-            borderColor: string;
-        };
-        inputText: {
-            color: string;
-        };
-    };
-    colors: {
-        blue: string;
-        gray: string;
-        error: string;
-        green: string;
-        white: string;
-        black: string;
-        primary: string;
-        lightGray: string;
-        grayishBlue: string;
-        red: string;
-        border: string;
-    };
-};

package/dist/controller/textInputController/InputControllerStyle.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useInputController = void 0;
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const style_1 = require("../../style");
-const useInputController = () => {
-    const { ...colors } = style_1.LIGHT_COLORS;
-    const styles = (0, react_1.useMemo)(() => {
-        return react_native_1.StyleSheet.create({
-            labelText: {
-                color: colors.gray,
-            },
-            inputControlContainer: {
-                height: 48,
-                borderWidth: 1,
-                borderRadius: 6,
-                alignItems: 'center',
-                marginVertical: style_1.SPACING.s2,
-                borderColor: colors.border,
-            },
-            inputText: {
-                color: colors.black,
-            },
-        });
-    }, [colors]);
-    return { styles, colors };
-};
-exports.useInputController = useInputController;

package/src/controller/textInputController/AppTextInputController.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import AppTextInput, {
-  AppTextProps,
-} from '../../components/textInput/AppTextInput';
-import { useInputController } from './InputControllerStyle';
-import { StyleProp, TextStyle, ViewStyle } from 'react-native';
-import { Controller, Control, FieldValues, Path } from 'react-hook-form';
-
-interface Props<T extends FieldValues> extends AppTextProps {
-  textStyle?: TextStyle;
-  controllerName: Path<T>;
-  containerStyle?: ViewStyle;
-  control: Control<T> | undefined;
-  labelStyle?: StyleProp<TextStyle>;
-}
-
-const AppTextControlInput = <T extends FieldValues>({
-  control,
-  textStyle,
-  labelStyle,
-  controllerName,
-  containerStyle,
-  ...rest
-}: Props<T>) => {
-  const { styles } = useInputController();
-
-  return (
-    <Controller
-      control={control}
-      name={controllerName}
-      render={({
-        fieldState: { error },
-        field: { onChange, value, onBlur },
-      }) => (
-        <AppTextInput
-          value={value}
-          onBlur={onBlur}
-          error={error?.message}
-          onChangeText={onChange}
-          textStyle={[styles.inputText, textStyle]}
-          labelStyle={[styles.labelText, labelStyle]}
-          style={[styles.inputControlContainer, containerStyle]}
-          {...rest}
-        />
-      )}
-    />
-  );
-};
-
-export default AppTextControlInput;

package/src/controller/textInputController/InputControllerStyle.ts

@@ -1,28 +0,0 @@
-import { useMemo } from 'react';
-import { StyleSheet } from 'react-native';
-import { LIGHT_COLORS, SPACING } from '../../style';
-
-export const useInputController = () => {
-  const { ...colors } = LIGHT_COLORS;
-
-  const styles = useMemo(() => {
-    return StyleSheet.create({
-      labelText: {
-        color: colors.gray,
-      },
-      inputControlContainer: {
-        height: 48,
-        borderWidth: 1,
-        borderRadius: 6,
-        alignItems: 'center',
-        marginVertical: SPACING.s2,
-        borderColor: colors.border,
-      },
-      inputText: {
-        color: colors.black,
-      },
-    });
-  }, [colors]);
-
-  return { styles, colors };
-};