related-ui-components 1.1.6

package/src/components/Input/Input.tsx

@@ -0,0 +1,218 @@
+import React, { forwardRef, useState } from 'react';
+import {
+  TextInput,
+  TextInputProps,
+  Text,
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import { useTheme, ThemeType } from '../../theme';
+
+export interface CustomInputProps extends Omit<TextInputProps, 'style'> {
+  label?: string;
+  error?: string;
+  helper?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  onRightIconPress?: () => void;
+  containerStyle?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  inputStyle?: StyleProp<TextStyle>;
+  inputContainerStyle?: StyleProp<ViewStyle>;
+  errorStyle?: StyleProp<TextStyle>;
+  helperStyle?: StyleProp<TextStyle>;
+  onChangeText?: (text: string) => void;
+  onBlur?: () => void;
+  onFocus?: () => void;
+  isRTL?: boolean;
+}
+
+const CustomInput = forwardRef<TextInput, CustomInputProps>(
+  (
+    {
+      label,
+      error,
+      helper,
+      leftIcon,
+      rightIcon,
+      onRightIconPress,
+      containerStyle,
+      labelStyle,
+      inputStyle,
+      inputContainerStyle,
+      errorStyle,
+      helperStyle,
+      onChangeText,
+      onBlur,
+      onFocus,
+      isRTL = false,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme();
+    const [isFocused, setIsFocused] = useState(false);
+
+    const handleFocus = () => {
+      setIsFocused(true);
+      onFocus && onFocus();
+    };
+    const handleBlur = () => {
+      setIsFocused(false);
+      onBlur && onBlur();
+    };
+
+    // Define styles using a function to access theme
+    const styles = createStyles(theme);
+
+    return (
+      <View style={[styles.container, containerStyle]}>
+        {label && (
+          <Text
+            style={[
+              styles.label,
+              { textAlign: isRTL ? 'right' : 'left' },
+              labelStyle,
+            ]}
+          >
+            {label}
+          </Text>
+        )}
+
+        <View
+          style={[
+            styles.inputContainer,
+            inputContainerStyle,
+            isFocused && styles.focusedInput,
+            error && styles.errorInput,
+            isRTL && { flexDirection: 'row-reverse' },
+          ]}
+        >
+          {leftIcon && (
+            <View
+              style={[
+                styles.leftIcon,
+                isRTL && { paddingRight: 12, paddingLeft: 0 },
+              ]}
+            >
+              {leftIcon}
+            </View>
+          )}
+
+          <TextInput
+            ref={ref}
+            style={[
+              styles.input,
+              leftIcon ? styles.inputWithLeftIcon : undefined,
+              rightIcon ? styles.inputWithRightIcon : undefined,
+              { textAlign: isRTL ? 'right' : 'left' },
+              inputStyle,
+            ]}
+            onChangeText={onChangeText}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            placeholderTextColor={theme.placeholderText} // Use placeholderText
+            {...rest}
+          />
+
+          {rightIcon && (
+            <TouchableOpacity
+              style={[
+                styles.rightIcon,
+                isRTL && { paddingLeft: 12, paddingRight: 0 },
+              ]}
+              onPress={onRightIconPress}
+              disabled={!onRightIconPress}
+            >
+              {rightIcon}
+            </TouchableOpacity>
+          )}
+        </View>
+
+        {error ? (
+          <Text
+            style={[
+              styles.error,
+              { textAlign: isRTL ? 'right' : 'left' },
+              errorStyle,
+            ]}
+          >
+            {error}
+          </Text>
+        ) : helper ? (
+          <Text
+            style={[
+              styles.helper,
+              { textAlign: isRTL ? 'right' : 'left' },
+              helperStyle,
+            ]}
+          >
+            {helper}
+          </Text>
+        ) : null}
+      </View>
+    );
+  }
+);
+
+// Function to create themed styles
+const createStyles = (theme: ThemeType) =>
+  StyleSheet.create({
+    container: {},
+    label: {
+      fontSize: 14,
+      fontWeight: '500',
+      marginBottom: 6,
+      color: theme.labelText, // Use labelText
+    },
+    inputContainer: {
+      flexDirection: 'row',
+      borderWidth: 1,
+      borderColor: theme.border, // Use border
+      borderRadius: 8,
+      backgroundColor: theme.inputBackground, // Use inputBackground
+      alignItems: 'center',
+      minHeight: 48,
+    },
+    focusedInput: {
+      borderColor: theme.primary, // Use primary for focus indication
+    },
+    errorInput: {
+      borderColor: theme.error, // Correctly uses error
+    },
+    input: {
+      flex: 1,
+      paddingHorizontal: 12,
+      fontSize: 16,
+      color: theme.inputText, // Use inputText
+      backgroundColor: 'transparent', // Keep transparent
+    },
+    inputWithLeftIcon: {
+      paddingLeft: 8,
+    },
+    inputWithRightIcon: {
+      paddingRight: 8,
+    },
+    leftIcon: {
+      paddingLeft: 12,
+    },
+    rightIcon: {
+      paddingRight: 12,
+    },
+    error: {
+      fontSize: 12,
+      color: theme.error, // Correctly uses error
+      marginTop: 4,
+    },
+    helper: {
+      fontSize: 12,
+      color: theme.helper, // Correctly uses helper
+      marginTop: 4,
+    },
+  });
+
+export default CustomInput;

package/src/components/Input/README.md

@@ -0,0 +1,128 @@
+# CustomInput Component
+
+A flexible, themeable text input component for React Native applications with support for labels, icons, error messages, and helper text.
+
+## Basic Usage
+
+```jsx
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { CustomInput } from '@your-org/component-library';
+
+const MyForm = () => {
+  const [name, setName] = useState('');
+  
+  return (
+    <View style={{ padding: 16 }}>
+      <CustomInput
+        label="Full Name"
+        placeholder="Enter your full name"
+        value={name}
+        onChangeText={setName}
+      />
+    </View>
+  );
+};
+
+export default MyForm;
+```
+
+## Props
+
+The `CustomInput` component extends React Native's `TextInputProps` (except for the `style` prop which is replaced with more specific styling props) and adds the following:
+
+### Core Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `label` | `string` | ❌ | - | Text to display above the input field |
+| `error` | `string` | ❌ | - | Error message to display below the input (turns border red) |
+| `helper` | `string` | ❌ | - | Helper text to display below the input (hidden if error is present) |
+
+### Icon Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `leftIcon` | `React.ReactNode` | ❌ | - | Icon component to display on the left side of the input |
+| `rightIcon` | `React.ReactNode` | ❌ | - | Icon component to display on the right side of the input |
+| `onRightIconPress` | `() => void` | ❌ | - | Function to call when the right icon is pressed |
+
+### Style Customization
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `containerStyle` | `StyleProp<ViewStyle>` | ❌ | - | Style for the outer container |
+| `labelStyle` | `StyleProp<TextStyle>` | ❌ | - | Style for the label text |
+| `inputStyle` | `StyleProp<TextStyle>` | ❌ | - | Style for the text input itself |
+| `inputContainerStyle` | `StyleProp<ViewStyle>` | ❌ | - | Style for the container around the input and icons |
+| `errorStyle` | `StyleProp<TextStyle>` | ❌ | - | Style for the error message text |
+| `helperStyle` | `StyleProp<TextStyle>` | ❌ | - | Style for the helper text |
+
+### Behavior Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `onChangeText` | `(text: string) => void` | ❌ | - | Function to call when text changes |
+| `onBlur` | `() => void` | ❌ | - | Function to call when input loses focus |
+| `onFocus` | `() => void` | ❌ | - | Function to call when input gains focus |
+
+## Examples
+
+### Basic Input with Label
+
+```jsx
+<CustomInput
+  label="Username"
+  placeholder="Enter your username"
+  onChangeText={(text) => console.log(text)}
+/>
+```
+
+### Input with Error State
+
+```jsx
+<CustomInput
+  label="Email"
+  placeholder="Enter your email"
+  value={email}
+  onChangeText={setEmail}
+  error={!isValidEmail(email) ? "Please enter a valid email address" : ""}
+/>
+```
+
+### Input with Helper Text
+
+```jsx
+<CustomInput
+  label="Password"
+  placeholder="Enter your password"
+  secureTextEntry
+  helper="Password must be at least 8 characters long"
+  onChangeText={setPassword}
+/>
+```
+
+### Input with Icons
+
+```jsx
+import { Ionicons } from '@expo/vector-icons';
+
+// Password input with toggle icon
+const [showPassword, setShowPassword] = useState(false);
+
+<CustomInput
+  label="Password"
+  placeholder="Enter your password"
+  secureTextEntry={!showPassword}
+  leftIcon={<Ionicons name="lock-closed" size={20} color="#888" />}
+  rightIcon={
+    <Ionicons 
+      name={showPassword ? "eye-off" : "eye"} 
+      size={20} 
+      color="#888" 
+    />
+  }
+  onRightIconPress={() => setShowPassword(!showPassword)}
+  onChangeText={setPassword}
+/>
+```

package/src/components/Input/index.ts

@@ -0,0 +1,2 @@
+export { default as Input} from "./Input";
+export * from "./Input";

package/src/components/LockOverlay/LockOverlay.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  TouchableOpacity,
+  TouchableOpacityProps,
+} from 'react-native';
+
+import { Ionicons } from '@expo/vector-icons';
+
+interface LockOverlayProps extends TouchableOpacityProps {
+  visible?: boolean;
+  containerStyle?: ViewStyle;
+  iconStyle?: ViewStyle;
+  textStyle?: TextStyle;
+  text?: string;
+  iconSize?: number;
+  iconColor?: string;
+  overlayOpacity?: number;
+  contentVerticalAlign? : 'center' | 'top'
+}
+
+const LockOverlay: React.FC<LockOverlayProps> = ({
+  visible = true,
+  containerStyle,
+  iconStyle,
+  textStyle,
+  text = 'Unlock',
+  iconSize = 50,
+  iconColor = 'white',
+  overlayOpacity = 0.7,
+  contentVerticalAlign = "center",
+  ...touchableProps
+}) => {
+  if (!visible) return null;
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.overlay,
+        { backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})` },
+        contentVerticalAlign == "top" && {justifyContent:"flex-start", paddingTop: 50},
+        containerStyle,
+      ]}
+      activeOpacity={0.8}
+      {...touchableProps}
+    >
+      <Ionicons
+        name="lock-closed"
+        size={iconSize}
+        color={iconColor}
+        // style={iconStyle}
+      />
+      <Text style={[styles.text, { color: iconColor }, textStyle]}>
+        {text}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 999,
+  },
+  text: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    marginTop: 12,
+  },
+});
+
+export default LockOverlay;

package/src/components/LockOverlay/index.ts

@@ -0,0 +1,2 @@
+export { default as LockOverlay} from "./LockOverlay"
+export * from "./LockOverlay"