@wecodesolutions/shared-react-components-ts 0.12.0 → 0.12.2

package/src/components/passwordInput/PasswordInput.tsx

@@ -2,48 +2,55 @@ import React, { useState } from 'react';
 import styles from './PasswordInput.module.css'; // Import the CSS module
 
 interface PasswordInputProps {
-    label?: string; // Label for the input
-    placeholder?: string; // Placeholder text
-    value: string; // Controlled value
-    onChange: (value: string) => void; // Change handler
+  label?: string; // Label for the input
+  placeholder?: string; // Placeholder text
+  value: string; // Controlled value
+  onChange: (value: string) => void; // Change handler
+  autoFill?: boolean;
 }
 
 export const PasswordInput: React.FC<PasswordInputProps> = ({
-    label = "Password",
-    placeholder = "Enter your password",
-    value,
-    onChange,
+  label = 'Password',
+  placeholder = 'Enter your password',
+  value,
+  onChange,
+  autoFill = true,
 }) => {
-    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 
-    const togglePasswordVisibility = () => {
-        setIsPasswordVisible(!isPasswordVisible);
-    };
+  const togglePasswordVisibility = () => {
+    setIsPasswordVisible(!isPasswordVisible);
+  };
 
-    return (
-        <div className={styles.container}>
-            {label && <label className={styles.label}>{label}</label>}
-            <div className={styles.wrapper}>
-                <input
-                    type={isPasswordVisible ? "text" : "password"}
-                    value={value}
-                    onChange={(e) => onChange(e.target.value)}
-                    placeholder={placeholder}
-                    className={styles.input}
-                />
-                <button
-                    type="button"
-                    className={styles.toggle}
-                    onClick={togglePasswordVisibility}
-                    aria-label={isPasswordVisible ? "Hide password" : "Show password"}
-                >
-                    {isPasswordVisible ? (
-                        <span role="img" aria-label="Hide">🙈</span>
-                    ) : (
-                        <span role="img" aria-label="Show">👁️</span>
-                    )}
-                </button>
-            </div>
-        </div>
-    );
+  return (
+    <div className={styles.container}>
+      {label && <label className={styles.label}>{label}</label>}
+      <div className={styles.wrapper}>
+        <input
+          type={isPasswordVisible ? 'text' : 'password'}
+          value={value}
+          onChange={e => onChange(e.target.value)}
+          placeholder={placeholder}
+          className={styles.input}
+          autoComplete={autoFill ? 'on' : 'off'}
+        />
+        <button
+          type="button"
+          className={styles.toggle}
+          onClick={togglePasswordVisibility}
+          aria-label={isPasswordVisible ? 'Hide password' : 'Show password'}
+        >
+          {isPasswordVisible ? (
+            <span role="img" aria-label="Hide">
+              👁️
+            </span>
+          ) : (
+            <span role="img" aria-label="Show">
+              🙈
+            </span>
+          )}
+        </button>
+      </div>
+    </div>
+  );
 };

package/src/components/protectedRoute/ProtectedRoute.tsx

@@ -3,11 +3,13 @@ import React from 'react';
 import { Navigate } from 'react-router-dom';
 
 interface ProtectedRouteProps {
-    children: JSX.Element;
-    isAuthenticated: boolean;
+  children: JSX.Element;
+  isAuthenticated: boolean;
 }
 
-export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children, isAuthenticated = false }) => {
-    return isAuthenticated ? children : <Navigate to="/" replace />;
+export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
+  children,
+  isAuthenticated = false,
+}) => {
+  return isAuthenticated ? children : <Navigate to="/" replace />;
 };
-

package/src/components/validationMessage/ValidationMessage.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
 
 interface ValidationMessageProps {
-    message: string;
-    type: 'error' | 'success' | 'info';
+  message: string;
+  type: 'error' | 'success' | 'info';
 }
 
-export const ValidationMessage: React.FC<ValidationMessageProps> = ({ message, type }) => {
-    const colorSpan = {
-        color: `${type == 'error' ? 'red' : (type == 'info' ? 'blue' : 'black')}`
-    };
-    return (
-        <span style={colorSpan} className={`validation-message ${type}`}>{message}</span>
-    );
-}
+export const ValidationMessage: React.FC<ValidationMessageProps> = ({
+  message,
+  type,
+}) => {
+  const colorSpan = {
+    color: `${type === 'error' ? 'red' : type === 'info' ? 'blue' : 'black'}`,
+  };
+  return (
+    <span style={colorSpan} className={`validation-message ${type}`}>
+      {message}
+    </span>
+  );
+};

package/src/global.d.ts

@@ -1,4 +1,4 @@
 declare module '*.module.css' {
-    const classes: { [key: string]: string };
-    export default classes;
-}
+  const classes: { [key: string]: string };
+  export default classes;
+}

package/src/index.tsx

@@ -10,4 +10,4 @@ export * from './components/inputField/InputField';
 export * from './components/navBar/NavBar';
 export * from './components/passwordInput/PasswordInput';
 export * from './components/protectedRoute/ProtectedRoute';
-export * from './components/validationMessage/ValidationMessage';
+export * from './components/validationMessage/ValidationMessage';