42 add typescript

jsconfig.json

@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "jsx": "react",
         "baseUrl": ".",
         "paths": {
             "@": ["src"],

package.json

@@ -22,13 +22,15 @@
     },
     "devDependencies": {
         "@types/react": "^18.0.18",
+        "@types/styled-components": "^5.1.26",
         "@vitejs/plugin-react": "^2.1.0",
         "compass-mixins": "^0.12.12",
         "eslint": "^8.23.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-react": "^7.31.7",
         "prettier": "2.7.1",
         "sass": "^1.54.8",
+        "typescript": "^5.0.4",
         "vite": "^3.0.7"
     }
 }

src/components/BankCard.jsx → src/components/BankCard.tsx

@@ -1,13 +1,18 @@
+import React from 'react';
 import banksData from '../constants/bankData';
 import S from 'styled-components';
 
-function BankCard({bankNumber}) {
+interface BankCardProps {
+   bankNumber: string;
+   }
 
-const bankName = banksData[bankNumber]?.name ?? 'Nepostojeća banka';
+const BankCard:React.FC<BankCardProps> = ({bankNumber}) => {
+
+const bank = banksData.find((item) => item.bankNumber === bankNumber) ;
 
   return (
   <BankCardWrapper>
-     <BankName>Ovaj račun pripada: {bankName}</BankName>
+     <BankName>Ovaj račun pripada: {bank?.name ?? 'Nepostojeća banka'}</BankName>
   </BankCardWrapper>
    )}
 

src/components/ErrorMessage.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import S from 'styled-components'
+
+interface ErrorMessageProps {
+    id: string;
+    errorMessage: string;
+}
+
+const ErrorMessage:React.FC<ErrorMessageProps> = ({ id, errorMessage }) => <StyledErrorMessage id={id}>{errorMessage}</StyledErrorMessage>
+
+const StyledErrorMessage = S.p`
+display: none;
+margin-top: 0.5rem;
+color: red;
+font-size: 13px;
+font-family: Arial, Helvetica, sans-serif;
+`
+
+export default ErrorMessage

src/components/Input.jsx → src/components/Input.tsx

@@ -1,16 +1,33 @@
+import React from 'react';
+import { deviceBrakepoints } from '../config/device-brakepoints'
 import Label from './Label.jsx'
 import S from 'styled-components'
-import { deviceBrakepoints } from '@config/device-brakepoints.jsx'
 
-const Input = ({ type = 'text', id, help, helpText, disabled, width, label, value, whenChanged }) => (
+interface InputProps {
+   type?: string;
+   id: string;
+   help: string;
+   helpText: string;
+   disabled?: boolean;
+   width: number;
+   label: string;
+   value: string | number; 
+   whenChanged: (e:any) => void;
+};
+
+const Input:React.FC<InputProps> = ({ type = 'text', id, help, helpText, disabled, width, label, value, whenChanged }) => (
     <Container width={width} >
-        <Label label={label} for={id}/>
+        <Label label={label} forId={id}/>
         <InnerInput type={type} name={id} id={id} aria-describedby={help} disabled={disabled} value={value} onChange={whenChanged} />
         <span hidden id={help}>{helpText}</span>
     </Container>
 )
 
-const Container = S.div`
+interface ContainerProps {
+   width: number;
+};
+
+const Container = S.div<ContainerProps>`
    display: inline-block;
    text-align: left;
    margin-bottom: 7px;

src/components/InputGroup.jsx → src/components/InputGroup.tsx

@@ -1,14 +1,22 @@
-import ErrorMessage from './ErrorMessage.jsx'
+import React from 'react'
+import ErrorMessage from './ErrorMessage.js'
 import S from 'styled-components'
 import { useState } from 'react'
+import { InputsProps } from './SplittedInput.js';
 
-const InputGroup = ({ input, index }) => {
+interface InputGroupProps {
+    input: InputsProps;
+    index: number;
+}
+
+const InputGroup:React.FC<InputGroupProps> = ({ input, index }) => {
     const [focused, setFocused] = useState(false)
 
-    const handleFocus = event => {
+    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
         setFocused(true)
         if (input?.appendZeros && event.target.value.length < 13) input.appendZeros(event.target.value)
     }
+
     return (
         <StyledInputGroup width={input.width}>
             <StyledInput
@@ -27,7 +35,11 @@ const InputGroup = ({ input, index }) => {
     )
 }
 
-const StyledInputGroup = S.div`
+interface StyledInputGroup {
+    width: number;
+ };
+
+const StyledInputGroup = S.div<StyledInputGroup>`
 width: ${props => (props.width ? props.width : '100')}%;
 display: inline-block;
 `

src/components/Label.jsx → src/components/Label.tsx

@@ -1,6 +1,12 @@
+import React from 'react'
 import S from 'styled-components'
 
-const Label = ({ label }) => <StyledLabel htmlFor={label}>{label}</StyledLabel>
+interface LabelProps {
+label: string;
+forId?: string;
+}
+
+const Label:React.FC<LabelProps> = ({ label, forId }) => <StyledLabel htmlFor={forId}>{label}</StyledLabel>
 
 const StyledLabel = S.label`
     display: block;

src/components/Modal.jsx → src/components/Modal.tsx

@@ -1,11 +1,16 @@
 import React, { useEffect } from 'react'
 import S from 'styled-components';
 
-const Modal = ({closeModal, children}) => {
+interface ModalProps {
+  closeModal: () => void;
+  children: React.ReactNode;
+}
+
+const Modal:React.FC<ModalProps> = ({closeModal, children}) => {
 
- const handleClickOutside = (event) => {
-    const target = event.target;
-    if (target.id === 'backdrop') {
+ const handleClickOutside = (event: MouseEvent) => {
+    const target = event.target as HTMLElement;
+    if (target?.id === 'backdrop') {
         closeModal()
     }
   };

src/components/Modelselect.jsx → src/components/Modelselect.tsx

@@ -1,9 +1,11 @@
 import Label from './Label.jsx'
 import S from 'styled-components'
 import Select from 'react-select'
+import React from 'react'
+import { ModelCodeOptionsType, PayCodeOptionsType } from '../constants/type.js'
 
 const ModelselectStyles = {
-    control: styles => ({
+    control: (styles: any) => ({
         ...styles,
         borderRadius: '0',
         backgroundColor: 'lightgrey',
@@ -12,23 +14,23 @@ const ModelselectStyles = {
         boxShadow: 'none',
         top: '-1px'
     }),
-    menu: styles => ({
+    menu: (styles: any) => ({
         ...styles,
         white: '200px'
     }),
-    menuList: styles => ({
+    menuList: (styles: any) => ({
         ...styles,
         background: 'white',
         color: 'lightgray'
     }),
-    option: (styles, { isFocused, isSelected }) => ({
+    option: (styles: any, { isFocused, isSelected }: any) => ({
         ...styles,
         background: isFocused ? 'gray' : isSelected ? 'lightgrey' : 'undefined',
         zIndex: 1
     })
 }
 
-const theme = theme => ({
+const theme = (theme: { colors: any; spacing: any }) => ({
     ...theme,
     colors: {
         ...theme.colors,
@@ -44,7 +46,20 @@ const theme = theme => ({
     }
 })
 
-const Modelselect = ({ width, placeholder, helpId, helpText, label, value, whenChanged, options }) => (
+interface ModelselectProps {
+    width: number;
+    placeholder: string;
+    helpId: string;
+    helpText:string;
+    label: string;
+    value: string;
+    whenChanged: (e:any) => void;
+    options: PayCodeOptionsType[] | ModelCodeOptionsType[];
+}
+
+
+
+const Modelselect:React.FC<ModelselectProps> = ({ width, placeholder, helpId, helpText, label, value, whenChanged, options }) => (
     <Container width={width}>
         <Label label={label} />
         <Select
@@ -61,8 +76,11 @@ const Modelselect = ({ width, placeholder, helpId, helpText, label, value, whenC
         <span hidden id={helpId}>{helpText}</span>
     </Container>
 )
+interface ContainerProps {
+    width: number;
+ };
 
-const Container = S.div`
+const Container = S.div<ContainerProps>`
    display: inline-block;
    text-align: left;
    margin-bottom: 7px;