Convert Input and Button UI component to TypeScript

src/components/Filter/Filter.jsx

@@ -1,5 +1,5 @@
 import styles from "./Filter.module.css";
-import Button from "../ui/button/button.jsx"
+import Button from "../ui/button/button.tsx"
 
 function Filter({isFilterVisible, filters, setFilters}){
     const setAlphabeticalOrder = (order) => {

src/components/Footer/Footer.jsx

@@ -2,7 +2,7 @@ import styles from "./Footer.module.css"
 import {Link} from "react-router";
 import {useState} from "react";
 import Modal from "../ui/modal/modal.jsx";
-import Button from "../ui/button/button.jsx";
+import Button from "../ui/button/button.tsx";
 import scrollToTop from "../../utils/scrollToTop.js";
 
 export default function Footer(){

src/components/ToolBar/ToolBar.jsx

@@ -3,7 +3,7 @@ import Filter from "../Filter/Filter.jsx";
 import {useContext, useEffect, useState} from "react";
 import SearchBar from "../SearchBar/SearchBar.jsx";
 import CreateEventBtn from "../createEventBtn/CreateEventBtn.jsx";
-import Button from "../ui/button/button.jsx";
+import Button from "../ui/button/button.tsx";
 import {AuthContext} from "../../contexts/auth/AuthContext.js";
 
 function ToolBar({setFilters, filters, showCreate = true}) {

src/components/createEventBtn/CreateEventBtn.jsx

@@ -1,8 +1,8 @@
 import styles from "./createEventBtn.module.css"
 import { useState, useContext } from "react";
 import Modal from "../ui/modal/modal.jsx";
-import Button from "../ui/button/button.jsx";
+import Button from "../ui/button/button.tsx";
-import TextInput from "../ui/input/input.jsx";
+import TextInput from "../ui/input/input.tsx";
 import { EventContext } from "../../contexts/events/EventContext.js";
 
 

src/components/ui/button/button.jsx

@@ -1,16 +0,0 @@
-import styles from "./button.module.css";
-
-const Button = ({ children, variant = "primary", onClick, className }) => {
-    let btnStyle;
-
-    if (variant === "primary") btnStyle = styles.primary;
-    else if (variant === "danger") btnStyle = styles.danger;
-    else if(variant === "transparent") btnStyle = styles.transparent;
-    else btnStyle = styles.default;
-
-    return <div className={`${styles.btn} ${btnStyle} ${className}`} onClick={onClick}>
-        {children}
-    </div>;
-};
-
-export default Button;

src/components/ui/button/button.tsx

@@ -0,0 +1,44 @@
+import { ReactNode, MouseEventHandler } from "react";
+import styles from "./button.module.css";
+
+type ButtonVariant = "primary" | "danger" | "transparent" | "default";
+
+interface ButtonProps {
+    children: ReactNode;
+    variant?: ButtonVariant;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    className?: string;
+}
+
+const Button = ({
+                    children,
+                    variant = "primary",
+                    onClick,
+                    className = "",
+                }: ButtonProps) => {
+    let btnStyle: string;
+
+    if (variant === "primary") { // @ts-ignore
+        btnStyle = styles.primary;
+    }
+    else if (variant === "danger") { // @ts-ignore
+        btnStyle = styles.danger;
+    }
+    else if (variant === "transparent") { // @ts-ignore
+        btnStyle = styles.transparent;
+    }
+    else { // @ts-ignore
+        btnStyle = styles.default;
+    }
+
+    return (
+        <div
+            className={`${styles.btn} ${btnStyle} ${className}`}
+            onClick={onClick}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default Button;

src/components/ui/input/input.jsx

@@ -1,38 +0,0 @@
-import styles from "./input.module.css";
-import { useState } from "react";
-
-const TextInput = ({ placeholder, onChange, value, borderStyle, password, className, ...props }) => {
-
-    const [showPassword, setShowPassword] = useState(false);
-
-    let inputBorderStyle = styles.square;
-    if (borderStyle === "square") inputBorderStyle = styles.square;
-    if(borderStyle === "rounded") inputBorderStyle = styles.rounded;
-
-    const toggleShowPassword = () => {
-        setShowPassword(!showPassword);
-    };
-
-    if(password) return (
-        <div className={styles.passwordContainer}>
-            <TextInput
-                type={showPassword ? "text" : "password"}
-                value={value}
-                placeholder={placeholder}
-                onChange={onChange}
-                className={styles.passwordInput}
-            />
-            <button
-                type="button"
-                onClick={toggleShowPassword}
-                className={styles.passwordBtn}
-            >
-                {showPassword ? '👁️' : '🔒'}
-            </button>
-        </div>
-    );
-
-    return <input className={`${styles.input} ${inputBorderStyle} ${className}`} onChange={onChange} placeholder={placeholder} value={value} {...props} />
-};
-
-export default TextInput;

src/components/ui/input/input.tsx

@@ -0,0 +1,62 @@
+import styles from "./input.module.css";
+import { useState, ChangeEvent, InputHTMLAttributes } from "react";
+
+interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    placeholder?: string;
+    value?: string;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    borderStyle?: "square" | "rounded";
+    password?: boolean;
+    className?: string;
+}
+
+const TextInput = ({
+                       placeholder,
+                       onChange,
+                       value,
+                       borderStyle = "square",
+                       password,
+                       className = "",
+                       ...props
+                   }: TextInputProps) => {
+    const [showPassword, setShowPassword] = useState<boolean>(false);
+
+    let inputBorderStyle = styles.square;
+    if (borderStyle === "rounded") inputBorderStyle = styles.rounded;
+
+    const toggleShowPassword = () => {
+        setShowPassword((prev) => !prev);
+    };
+
+    if (password)
+        return (
+            <div className={styles.passwordContainer}>
+                <TextInput
+                    type={showPassword ? "text" : "password"}
+                    value={value}
+                    placeholder={placeholder}
+                    onChange={onChange}
+                    className={styles.passwordInput}
+                />
+                <button
+                    type="button"
+                    onClick={toggleShowPassword}
+                    className={styles.passwordBtn}
+                >
+                    {showPassword ? "👁️" : "🔒"}
+                </button>
+            </div>
+        );
+
+    return (
+        <input
+            className={`${styles.input} ${inputBorderStyle} ${className}`}
+            onChange={onChange}
+            placeholder={placeholder}
+            value={value}
+            {...props}
+        />
+    );
+};
+
+export default TextInput;

src/components/ui/modal/modal.jsx

@@ -1,6 +1,6 @@
 import { createPortal } from "react-dom";
 import styles from "./modal.module.css";
-import Button from "../button/button.jsx";
+import Button from "../button/button.tsx";
 
 const Modal = ({ open, onClose, children, title }) => {
 

src/components/ui/themeSwitcher/ThemeSwitcher.jsx

@@ -1,4 +1,4 @@
-import Button from "../button/button.jsx";
+import Button from "../button/button.tsx";
 import { useState, useEffect } from "react";
 import styles from "./ThemeSwitcher.module.css";
 

src/pages/Admin/components/pendingMembers/PendingMembers.jsx

@@ -1,5 +1,5 @@
 import React, {useState, useEffect} from "react";
-import Button from "../../../../components/ui/button/button.jsx";
+import Button from "../../../../components/ui/button/button.tsx";
 import styles from "./PendingMembers.module.css";
 import Modal from "../../../../components/ui/modal/modal.jsx";
 import getUserToValidate from "../../../../utils/users/getUserToValidate.js";

src/pages/Events/components/Event/Event.jsx

@@ -1,7 +1,7 @@
 import styles from "./Event.module.css";
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router";
-import Button from "/src/components/ui/button/button.jsx"
+import Button from "/src/components/ui/button/button"
 
 function Event({event}){
 

src/pages/Login/components/loginform/loginForm.jsx

@@ -1,7 +1,7 @@
 import { useState, useContext } from "react";
 import styles from "./loginForm.module.css";
-import Button from "../../../../components/ui/button/button.jsx";
+import Button from "../../../../components/ui/button/button.tsx";
-import Input from "../../../../components/ui/input/input.jsx";
+import Input from "../../../../components/ui/input/input.tsx";
 import Modal from "../../../../components/ui/modal/modal.jsx";
 import { useNavigate } from "react-router";
 import { AuthContext } from "../../../../contexts/auth/AuthContext.js";

src/pages/Profile/components/SettingsModal/SettingsModal.jsx

@@ -1,10 +1,10 @@
 import Modal from "../../../../components/ui/modal/modal.jsx";
-import Button from "../../../../components/ui/button/button.jsx";
+import Button from "../../../../components/ui/button/button.tsx";
 import styles from "./SettingsModal.module.css"
 import { useContext, useState } from "react";
 import ThemeSwitcher from "../../../../components/ui/themeSwitcher/ThemeSwitcher.jsx";
 import { AuthContext } from "../../../../contexts/auth/AuthContext.js";
-import TextInput from "../../../../components/ui/input/input.jsx";
+import TextInput from "../../../../components/ui/input/input.tsx";
 import updateUser from "../../../../utils/users/updateUser.js";
 import deleteUser from "../../../../utils/users/deleteUser.js";
 

src/pages/Register/RegisterPage.jsx

@@ -1,7 +1,7 @@
 import styles from "./RegisterPage.module.css";
 import Background from "../../components/background/background.jsx";
-import Input from "../../components/ui/input/input.jsx";
+import Input from "../../components/ui/input/input.tsx";
-import Button from "../../components/ui/button/button.jsx";
+import Button from "../../components/ui/button/button.tsx";
 import {useContext, useEffect, useState} from "react";
 import register from "../../utils/register.js";
 import { useNavigate } from "react-router";

src/pages/VolunteerProfile/components/manageMember/ManageMember.jsx

@@ -1,4 +1,4 @@
-import Button from "../../../../components/ui/button/button.jsx";
+import Button from "../../../../components/ui/button/button.tsx";
 import Modal from "../../../../components/ui/modal/modal.jsx";
 import {useContext, useState} from "react";
 import styles from "./manageMember.module.css"

src/pages/VolunteerProfile/components/manageMember/deactivateMember/deactivateMemberBtn.jsx

@@ -1,4 +1,4 @@
-import Button from "../../../../../components/ui/button/button.jsx";
+import Button from "../../../../../components/ui/button/button.tsx";
 import Modal from "../../../../../components/ui/modal/modal.jsx";
 import { useState } from "react";
 import deactivateUser from "../../../../../utils/users/deactivateUser.js"

src/pages/VolunteerProfile/components/manageMember/modifyrole/ModifyRole.jsx

@@ -1,5 +1,5 @@
 import styles from "../manageMember.module.css";
-import Button from "../../../../../components/ui/button/button.jsx";
+import Button from "../../../../../components/ui/button/button.tsx";
 import modifyRole from "../../../../../utils/users/modifyRole.js";
 import { useState, useEffect } from "react";
 import getRoles from "../../../../../utils/getRoles.js";

src/pages/Volunteers/VolunteerCard.jsx

@@ -2,7 +2,7 @@ import React, {useState} from "react";
 import styles from "./VolunteersPage.module.css";
 import formatDate from "../../utils/date/formatDate.js";
 import { useNavigate } from "react-router";
-import Button from "../../components/ui/button/button.jsx";
+import Button from "../../components/ui/button/button.tsx";
 
 export default function VolunteerCard({ user }) {
 

src/pages/eventDetail/components/EventTask/EventTask.jsx

@@ -1,6 +1,6 @@
 import styles from "./eventTask.module.css";
 import { formatDateLetter } from "../../../../utils/date/formatDateLetter.js";
-import Button from "../../../../components/ui/button/button.jsx";
+import Button from "../../../../components/ui/button/button.tsx";
 import assign from "../../../../utils/tasks/assign.js";
 import unAssign from "../../../../utils/tasks/unAssign.js";
 import { useContext, useEffect, useState } from "react";

src/pages/eventDetail/components/createTaskBtn/createTaskBtn.jsx

@@ -1,7 +1,7 @@
 import styles from "../../eventDetail.module.css";
-import Button from "../../../../components/ui/button/button.jsx";
+import Button from "../../../../components/ui/button/button.tsx";
 import {useContext, useState} from "react";
-import TextInput from "../../../../components/ui/input/input.jsx";
+import TextInput from "../../../../components/ui/input/input.tsx";
 import Modal from "../../../../components/ui/modal/modal.jsx";
 import createTaskApi from "../../../../utils/tasks/createTask.js";
 import {EventDetailContext} from "../../../../contexts/eventDetail/eventDetail.js";

src/pages/eventDetail/components/deleteEventBtn/deleteEventBtn.jsx

@@ -1,5 +1,5 @@
 import styles from "../../eventDetail.module.css";
-import Button from "../../../../components/ui/button/button.jsx";
+import Button from "../../../../components/ui/button/button.tsx";
 import Modal from "../../../../components/ui/modal/modal.jsx";
 import { useContext, useState } from "react";
 import { EventDetailContext } from "../../../../contexts/eventDetail/eventDetail.js";

src/pages/eventDetail/components/deleteTaskBtn/deleteTaskBtn.jsx

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import { AuthContext } from "../../../../contexts/auth/AuthContext.js";
 import { EventDetailContext } from "../../../../contexts/eventDetail/eventDetail.js";
-import Button from "../../../../components/ui/button/button.jsx";
+import Button from "../../../../components/ui/button/button.tsx";
 import { useState } from "react";
 import Modal from "../../../../components/ui/modal/modal.jsx";
 import styles from "../../eventDetail.module.css";

src/pages/waitValidationPage/ValidationErrorPage.jsx

@@ -1,6 +1,6 @@
 import styles from "./validationErrorPage.module.css"
 import Background from "../../components/background/background.jsx";
-import Button from "../../components/ui/button/button.jsx";
+import Button from "../../components/ui/button/button.tsx";
 import { useContext } from "react";
 import { AuthContext } from "../../contexts/auth/AuthContext.js";
 import { Navigate, useNavigate, Link } from "react-router";

src/stories/Button.stories.jsx

@@ -1,6 +1,6 @@
 import { fn } from 'storybook/test';
 
-import Button from '../components/ui/button/button.jsx';
+import Button from '../components/ui/button/button.tsx';
 
 
 export default {

src/stories/Input.stories.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import TextInput from "../components/ui/input/input.jsx";
+import TextInput from "../components/ui/input/input.tsx";
 
 
 export default {

src/stories/Modal.stories.jsx

@@ -1,5 +1,5 @@
 import Modal from "../components/ui/modal/modal.jsx";
-import Button from "../components/ui/button/button.jsx";
+import Button from "../components/ui/button/button.tsx";
 import { useState } from "react";
 
 export default {