feat(Input): add input visibility toggle (#37)

* feat(Input): add input visibility toggle
- Implement `TextField` `endAdorment` for password fields.
- Add `showPasswordToggle` prop.
- Add `@mui/icons-material` to devDependencies.
- Integrate `Visibility`/`VisibilityOff` MUI icons.
- Create test for password toggle feature.
- Validate visibility toggle button behavior for password inputs.

* Apply suggestions from code review
Co-authored-by: Ryan James Meneses <[email protected]>

* fix: remove `handleMouseDownShowInput` and refactor tests

---------

Co-authored-by: Ryan James Meneses <[email protected]>

package.json

@@ -33,6 +33,7 @@
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
+    "@mui/icons-material": "^6.4.1",
     "@stylistic/eslint-plugin-ts": "^2.13.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",

src/components/atoms/Input.tsx

@@ -1,8 +1,10 @@
 'use client';
 
+import { IconButton, InputAdornment } from '@mui/material';
+import React, { useState } from 'react';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
 import { InputProps } from '@components/atoms/Input';
 import { TextField as MuiInput } from '@mui/material';
-import React from 'react';
 
 const Input: React.FC<InputProps> = ({
   label,
@@ -20,8 +22,15 @@ const Input: React.FC<InputProps> = ({
   ariaLabel,
   ariaLabelledBy,
   tabIndex,
+  hideInput = false,
   ...props
 }: InputProps) => {
+  const [showInput, setShowInput] = useState(false);
+
+  const handleClickShowInput = () => {
+    setShowInput(!showInput);
+  };
+
   return (
     <MuiInput
       disabled={disabled}
@@ -36,13 +45,24 @@ const Input: React.FC<InputProps> = ({
         input: {
           'aria-label': ariaLabel,
           'aria-labelledby': ariaLabelledBy,
+          endAdornment: hideInput ? (
+            <InputAdornment position="end">
+              <IconButton
+                aria-label="toggle input visibility"
+                onClick={handleClickShowInput}
+                edge="end"
+              >
+                {showInput ? <Visibility /> : <VisibilityOff />}{' '}
+              </IconButton>
+            </InputAdornment>
+          ) : undefined,
         },
         htmlInput: {
           tabIndex: tabIndex,
         },
       }}
       sx={sx}
-      type={type}
+      type={showInput ? 'text' : type}
       value={value}
       variant={variant}
       {...props}

src/types/Input.types.d.ts

@@ -19,6 +19,7 @@ declare module '@components/atoms/Input' {
     tabIndex?: number;
     ariaLabel?: string;
     ariaLabelledBy?: string;
+    hideInput?: boolean;
   }
 
   const Input: FC<InputProps>;

tests/components/atoms/Input.test.tsx

@@ -71,4 +71,28 @@ describe('Input component', () => {
     expect(input.tagName.toLowerCase()).toBe('textarea');
     expect(input.rows).toBe(3);
   });
+
+  it('should show an input toggle button when hideInput is true', () => {
+    render(<Input {...defaultProps} type="password" hideInput />);
+    const input = screen.getByLabelText('Test Input') as HTMLInputElement;
+    expect(input.type).toBe('password');
+
+    const inputToggle = screen.getByLabelText('toggle input visibility');
+    expect(inputToggle).toBeInTheDocument();
+
+    fireEvent.click(inputToggle);
+    expect(input.type).toBe('text');
+
+    fireEvent.click(inputToggle);
+    expect(input.type).toBe('password');
+  });
+
+  it('should not show an input toggle button when hideInput is false', () => {
+    render(<Input {...defaultProps} type="password" hideInput={false} />);
+    const input = screen.getByLabelText('Test Input') as HTMLInputElement;
+    expect(input.type).toBe('password');
+
+    const inputToggle = screen.queryByLabelText('toggle input visibility');
+    expect(inputToggle).not.toBeInTheDocument();
+  });
 });