@teamnhz/rn-ui-toolkit 1.0.0 → 1.0.1

package/README.md

@@ -0,0 +1,206 @@
+# @teamnhz/rn-ui-toolkit
+
+A customizable **React Native UI Toolkit** containing prebuilt components like **Buttons, Typography (T), Input, CheckBox, RadioButton, DocumentPicker, ImagePicker, DropDown, Toast, Dividers, Accordion, Modal, VStack, and HStack**.  
+This toolkit helps you build consistent, reusable, and modern UI components for your React Native applications. 🚀  
+
+---
+
+## 📦 Installation
+
+Install via **npm** or **yarn**:
+
+```bash
+# Using npm
+npm install @teamnhz/rn-ui-toolkit
+
+# Using yarn
+yarn add @teamnhz/rn-ui-toolkit
+```
+
+---
+
+## 🚀 Quick Usage
+
+```tsx
+import React, { useState } from "react";
+import { View, ScrollView, Alert, StyleSheet, Image } from "react-native";
+import {
+  Buttons,
+  T,
+  Input,
+  CheckBox,
+  RadioButton,
+  DocumentPicker,
+  ImagePicker,
+  Toast,
+  DropDown,
+  Dividers,
+  Accordion,
+  Modal,
+  VStack,
+  HStack,
+  HorizontalFlatList,
+  AppHeader,
+} from "@teamnhz/rn-ui-toolkit";
+
+export default function App() {
+  const [name, setName] = useState("");
+  const [accepted, setAccepted] = useState(false);
+  const [selected, setSelected] = useState("option1");
+  const [visible, setVisible] = useState(false);
+
+  const close = () => setVisible(!visible);
+
+  const categories: any = [
+    { id: 1, name: "Man Shirt", image: "https://img.icons8.com/ios/100/shirt.png" },
+    { id: 2, name: "Dress", image: "https://img.icons8.com/ios/100/shirt.png" },
+    { id: 3, name: "Work Equipment", image: "https://img.icons8.com/ios/100/briefcase.png" },
+  ];
+
+  const dropdownData = [
+    { label: "United States", value: "United States" },
+    { label: "United Kingdom", value: "United Kingdom" },
+    { label: "Afghanistan", value: "Afghanistan" },
+  ];
+
+  return (
+    <ScrollView contentContainerStyle={{ padding: 20 }}>
+      {/* Typography */}
+      <T size="xl" weight="bold">Welcome to RN UI Toolkit 🚀</T>
+
+      {/* Input */}
+      <Input placeholder="Enter your name" value={name} onChangeText={setName} />
+
+      {/* Checkbox */}
+      <CheckBox label="Accept Terms" checked={accepted} onChange={setAccepted} />
+
+      {/* Radio Buttons */}
+      <RadioButton label="Option 1" selected={selected === "option1"} onPress={() => setSelected("option1")} />
+      <RadioButton label="Option 2" selected={selected === "option2"} onPress={() => setSelected("option2")} />
+
+      {/* Document Picker */}
+      <DocumentPicker onPick={(docs) => Alert.alert("Docs", JSON.stringify(docs))} />
+
+      {/* Image Picker */}
+      <ImagePicker mediaType="photo" onPick={(img) => Alert.alert("Image", JSON.stringify(img))} />
+
+      {/* Button */}
+      <Buttons title="Submit" onPress={() => Alert.alert("Submitted", `Name: ${name}`)} />
+
+      {/* Divider */}
+      <Dividers small />
+
+      {/* DropDown */}
+      <DropDown
+        value={"United States"}
+        data={dropdownData}
+        onChange={(item) => console.log("Selected:", item.value)}
+      />
+
+      {/* Toast */}
+      <Toast visible={true} message="Welcome to the toolkit!" />
+
+      {/* Accordion */}
+      <Accordion title="Profile Info" initiallyExpanded>
+        <T title="Name: John Doe" />
+        <T title="Email: john@example.com" />
+      </Accordion>
+
+      <Accordion title="Settings" showIcon>
+        <T title="🔔 Notifications: Enabled" />
+        <T title="🌙 Dark Mode: Off" />
+      </Accordion>
+
+      {/* Modal Example */}
+      <Buttons title="Open Modal" onPress={() => setVisible(true)} />
+      <Modal visible={visible} onClose={close}>
+        <T size="lg">This is a modal content 🎉</T>
+        <Buttons title="Close" onPress={close} />
+      </Modal>
+
+      {/* VStack (Vertical Layout) */}
+      <VStack spacing={12}>
+        <T size="lg">This is VStack</T>
+        <Buttons title="Button 1" onPress={() => {}} />
+        <Buttons title="Button 2" onPress={() => {}} />
+      </VStack>
+
+      {/* HStack (Horizontal Layout) */}
+      <HStack spacing={16}>
+        <Buttons title="Yes" onPress={() => {}} />
+        <Buttons title="No" onPress={() => {}} />
+      </HStack>
+
+      {/* Horizontal FlatList */}
+      <HorizontalFlatList
+        horizontal
+        data={categories}
+        keyExtractor={(item) => item.id.toString()}
+        renderItem={({ item }) => (
+          <View style={styles.item}>
+            <Image source={{ uri: item.image }} style={styles.image} />
+            <T>{item.name}</T>
+          </View>
+        )}
+      />
+
+      {/* App Header */}
+      <AppHeader title="Header" onLeftPress={() => Alert.alert("Back pressed")} />
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  image: { width: 60, height: 60, marginRight: 10 },
+  item: { alignItems: "center", marginRight: 15 },
+});
+```
+
+---
+
+## ⚙️ Android Permissions
+
+Required for **ImagePicker** and **DocumentPicker**:
+
+```xml
+ <uses-permission android:name="android.permission.INTERNET" />
+ <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32"/>
+ <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
+ <uses-permission android:name="android.permission.INTERNET" />
+ <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32"/>
+ <uses-permission android:name="android.permission.CAMERA"/>
+ <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+ <uses-permission android:name="android.permission.RECORD_AUDIO"/>
+```
+
+---
+
+## 📚 Components Overview
+
+- **Typography (T)** → Consistent text styles.  
+- **Input** → Styled text input field.  
+- **Buttons** → Primary action button.  
+- **CheckBox** → Toggle for true/false.  
+- **RadioButton** → Choose between options.  
+- **DocumentPicker** → Select and upload documents.  
+- **ImagePicker** → Select single/multiple images.  
+- **Toast** → Show quick messages.  
+- **DropDown** → Select from a list.  
+- **Dividers** → Spacing/separator lines.  
+- **Accordion** → Expandable/collapsible sections.  
+- **Modal** → Popup dialog.  
+- **VStack / HStack** → Easy vertical/horizontal layout wrappers.  
+- **HorizontalFlatList** → Prebuilt horizontal list with custom render support.  
+- **AppHeader** → Customizable header with back/extra icons.  
+
+---
+
+## 🤝 Contribution
+
+Feel free to open issues and submit PRs to improve this toolkit!  
+
+---
+
+## 📄 License
+
+MIT © 2025 [Team NHZ]

package/dist/components/AppHeader/index.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+type Props = {
+    title?: string;
+    leftIcon?: string;
+    onLeftPress?: () => void;
+    onDrawerPress?: () => void;
+    children?: React.ReactNode;
+    isDrawer?: boolean;
+    containerStyle?: StyleProp<ViewStyle>;
+    titleStyle?: StyleProp<TextStyle>;
+    leftContainerStyle?: StyleProp<ViewStyle>;
+    rightContainerStyle?: StyleProp<ViewStyle>;
+    iconStyle?: StyleProp<ViewStyle>;
+};
+declare const AppHeader: React.FC<Props>;
+export default AppHeader;

package/dist/components/AppHeader/index.js

@@ -0,0 +1,47 @@
+// src/components/AppHeader.tsx
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet, } from "react-native";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+const AppHeader = ({ title, leftIcon, onLeftPress, onDrawerPress, children, containerStyle, titleStyle, leftContainerStyle, rightContainerStyle, iconStyle, isDrawer, }) => {
+    return (React.createElement(View, { style: [styles.container, containerStyle] },
+        React.createElement(View, { style: [styles.leftContainer, leftContainerStyle] },
+            isDrawer && (React.createElement(TouchableOpacity, { style: [styles.iconBtn, iconStyle], onPress: onDrawerPress },
+                React.createElement(Icon, { name: "menu", size: 24, color: "#000" }))),
+            leftIcon && (React.createElement(TouchableOpacity, { style: [styles.iconBtn, iconStyle], onPress: onLeftPress },
+                React.createElement(Icon, { name: leftIcon, size: 24, color: "#000" }))),
+            title && (React.createElement(Text, { style: [styles.title, titleStyle], numberOfLines: 1 }, title))),
+        React.createElement(View, { style: [styles.rightContainer, rightContainerStyle] }, children)));
+};
+export default AppHeader;
+const styles = StyleSheet.create({
+    container: {
+        height: 56,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        shadowColor: "#000",
+        shadowOpacity: 0.1,
+        shadowOffset: { width: 0, height: 2 },
+        shadowRadius: 4,
+        paddingHorizontal: 8,
+    },
+    leftContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        flexShrink: 1,
+    },
+    iconBtn: {
+        padding: 8,
+        marginRight: 5,
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: "600",
+        color: "#000",
+        marginLeft: 5,
+    },
+    rightContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+    },
+});

package/dist/components/DocumentPicker/index.d.ts

@@ -12,5 +12,5 @@ interface AppDocumentPickerProps {
     iconStyle?: StyleProp<ViewStyle>;
     renderContent?: () => React.ReactNode;
 }
-declare const AppDocumentPicker: React.FC<AppDocumentPickerProps>;
-export default AppDocumentPicker;
+declare const DocumentPicker: React.FC<AppDocumentPickerProps>;
+export default DocumentPicker;

package/dist/components/DocumentPicker/index.js

@@ -4,7 +4,7 @@ import * as DocumentPickerLib from '@react-native-documents/picker';
 import { requestDocumentPermission } from '../../utils/permissions';
 import { Colors } from '../../styles';
 import Image from '../Image';
-const AppDocumentPicker = ({ label = 'Upload File', icon = require('../../assets/images/upload.png'), onPick, disabled = false, containerStyle, labelStyle, iconStyle, iconColor = Colors.primaryColor, renderContent, }) => {
+const DocumentPicker = ({ label = 'Upload File', icon = require('../../assets/images/upload.png'), onPick, disabled = false, containerStyle, labelStyle, iconStyle, iconColor = Colors.primaryColor, renderContent, }) => {
     const [selectedFile, setSelectedFile] = useState(null);
     const handlePick = async () => {
         const granted = await requestDocumentPermission();
@@ -29,7 +29,7 @@ const AppDocumentPicker = ({ label = 'Upload File', icon = require('../../assets
         selectedFile ? (React.createElement(Image, { source: { uri: selectedFile.uri }, style: [styles.fileIcon, iconStyle], resizeMode: "contain" })) : (React.createElement(Image, { source: icon, style: [{ width: 20, height: 20 }, iconStyle], tintColor: iconColor, resizeMode: "contain" })),
         React.createElement(Text, { style: [styles.label, labelStyle] }, selectedFile ? selectedFile.name || 'Uploaded File' : label)))));
 };
-export default AppDocumentPicker;
+export default DocumentPicker;
 const styles = StyleSheet.create({
     container: {
         flexDirection: 'row',

package/dist/components/Input/index.js

@@ -64,6 +64,7 @@ const Input = ({ intlType, textKey, placeholder, leftIcon, rightIcon, onLeftIcon
                 styles.container,
                 disabled && styles.disabled,
                 !!showError && styles.errorBorder,
+                isFocused && styles.focusedBorder,
                 style,
             ] },
             leftIcon && (React.createElement(TouchableOpacity, { onPress: onLeftIconPress, disabled: !onLeftIconPress, style: styles.iconWrapper },
@@ -86,6 +87,9 @@ const styles = StyleSheet.create({
         height: Scale.moderateScale(50),
         paddingHorizontal: Scale.moderateScale(10),
     },
+    focusedBorder: {
+        borderColor: Colors.primaryColor,
+    },
     input: {
         flex: 1,
         ...Typography.style.standardU(),

package/dist/components/index.d.ts

@@ -26,3 +26,4 @@ export { default as BottomSheet } from './BottomSheet';
 export { default as ProgressBar } from './ProgressBar';
 export { default as DocumentPicker } from './DocumentPicker';
 export { default as ImagePicker } from './ImagePicker';
+export { default as AppHeader } from './AppHeader';

package/dist/components/index.js

@@ -26,3 +26,4 @@ export { default as BottomSheet } from './BottomSheet';
 export { default as ProgressBar } from './ProgressBar';
 export { default as DocumentPicker } from './DocumentPicker';
 export { default as ImagePicker } from './ImagePicker';
+export { default as AppHeader } from './AppHeader';

package/dist/styles/index.d.ts

@@ -3,5 +3,5 @@ import Images from './images';
 import * as Scale from './scale';
 import Typography from './typography';
 import * as Mixins from './mixins';
-declare const Icon: typeof import("react-native-vector-icons/Icon").Icon;
+declare const Icon: any;
 export { Colors, Images, Scale, Typography, Icon, Mixins };

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@teamnhz/rn-ui-toolkit",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": ["dist"],
+  "license": "MIT",
   "scripts": {
     "build": "tsc && cpx \"src/**/*.json\" dist && cpx \"src/assets/images/*\" dist/assets/images",
     "prepare": "npm run build"