From 27f0fe3db2e662293bf1507fa8e6ce7873a7605d Mon Sep 17 00:00:00 2001 From: Ivan Kovacevic Date: Thu, 13 Apr 2023 16:41:49 +0200 Subject: [PATCH 01/16] 41-add-typescript --- jsconfig.json | 1 + package-lock.json | 20 ++++ package.json | 1 + src/{App.jsx => App.tsx} | 0 src/components/{BankCard.jsx => BankCard.tsx} | 7 +- .../{ErrorMessage.jsx => ErrorMessage.tsx} | 1 + src/components/{Input.jsx => Input.tsx} | 25 ++++- .../{InputGroup.jsx => InputGroup.tsx} | 10 +- src/components/{Label.jsx => Label.tsx} | 8 +- src/components/{Modal.jsx => Modal.tsx} | 7 +- .../{Modelselect.jsx => Modelselect.tsx} | 32 ++++-- ...ntTemplate.jsx => SaveCurrentTemplate.tsx} | 15 ++- ...{SavedTemplates.jsx => SavedTemplates.tsx} | 11 ++- .../{SplittedInput.jsx => SplittedInput.tsx} | 5 +- src/components/{Textarea.jsx => Textarea.tsx} | 4 +- ...brakepoints.jsx => device-brakepoints.tsx} | 0 src/config/{icon.jsx => icon.tsx} | 0 src/constants/{bankData.js => bankData.ts} | 0 src/main.jsx | 4 +- src/pages/{Payslip.jsx => Payslip.tsx} | 98 +++++++++++++------ tsconfig.json | 19 ++++ 21 files changed, 209 insertions(+), 59 deletions(-) rename src/{App.jsx => App.tsx} (100%) rename src/components/{BankCard.jsx => BankCard.tsx} (81%) rename src/components/{ErrorMessage.jsx => ErrorMessage.tsx} (92%) rename src/components/{Input.jsx => Input.tsx} (64%) rename src/components/{InputGroup.jsx => InputGroup.tsx} (90%) rename src/components/{Label.jsx => Label.tsx} (52%) rename src/components/{Modal.jsx => Modal.tsx} (88%) rename src/components/{Modelselect.jsx => Modelselect.tsx} (67%) rename src/components/{SaveCurrentTemplate.jsx => SaveCurrentTemplate.tsx} (84%) rename src/components/{SavedTemplates.jsx => SavedTemplates.tsx} (83%) rename src/components/{SplittedInput.jsx => SplittedInput.tsx} (82%) rename src/components/{Textarea.jsx => Textarea.tsx} (92%) rename src/config/{device-brakepoints.jsx => device-brakepoints.tsx} (100%) rename src/config/{icon.jsx => icon.tsx} (100%) rename src/constants/{bankData.js => bankData.ts} (100%) rename src/pages/{Payslip.jsx => Payslip.tsx} (91%) create mode 100644 tsconfig.json diff --git a/jsconfig.json b/jsconfig.json index 46688d4..dafa634 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -1,5 +1,6 @@ { "compilerOptions": { + "jsx": "react", "baseUrl": ".", "paths": { "@": ["src"], diff --git a/package-lock.json b/package-lock.json index 83f2214..0e20334 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,7 @@ "eslint-plugin-react": "^7.31.7", "prettier": "2.7.1", "sass": "^1.54.8", + "typescript": "^5.0.4", "vite": "^3.0.7" } }, @@ -3777,6 +3778,19 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/typescript": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz", + "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==", + "dev": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=12.20" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -6560,6 +6574,12 @@ "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", "dev": true }, + "typescript": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz", + "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==", + "dev": true + }, "unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/package.json b/package.json index 5cccc0e..ec7fdba 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "eslint-plugin-react": "^7.31.7", "prettier": "2.7.1", "sass": "^1.54.8", + "typescript": "^5.0.4", "vite": "^3.0.7" } } diff --git a/src/App.jsx b/src/App.tsx similarity index 100% rename from src/App.jsx rename to src/App.tsx diff --git a/src/components/BankCard.jsx b/src/components/BankCard.tsx similarity index 81% rename from src/components/BankCard.jsx rename to src/components/BankCard.tsx index 8cda799..5cfa3e8 100644 --- a/src/components/BankCard.jsx +++ b/src/components/BankCard.tsx @@ -1,7 +1,12 @@ +import React from 'react'; import banksData from '../constants/bankData'; import S from 'styled-components'; -function BankCard({bankNumber}) { +interface BankCardProps { + bankNumber: number; + } + +const BankCard:React.FC = ({bankNumber}) => { const bankName = banksData[bankNumber]?.name ?? 'Nepostojeća banka'; diff --git a/src/components/ErrorMessage.jsx b/src/components/ErrorMessage.tsx similarity index 92% rename from src/components/ErrorMessage.jsx rename to src/components/ErrorMessage.tsx index 2f4547c..a407c7e 100644 --- a/src/components/ErrorMessage.jsx +++ b/src/components/ErrorMessage.tsx @@ -1,3 +1,4 @@ +import React from 'react' import S from 'styled-components' const ErrorMessage = ({ id, errorMessage }) => {errorMessage} diff --git a/src/components/Input.jsx b/src/components/Input.tsx similarity index 64% rename from src/components/Input.jsx rename to src/components/Input.tsx index ccaf755..3a02ca1 100644 --- a/src/components/Input.jsx +++ b/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 = ({ type = 'text', id, help, helpText, disabled, width, label, value, whenChanged }) => ( - ) -const Container = S.div` +interface ContainerProps { + width: number; +}; + +const Container = S.div` display: inline-block; text-align: left; margin-bottom: 7px; diff --git a/src/components/InputGroup.jsx b/src/components/InputGroup.tsx similarity index 90% rename from src/components/InputGroup.jsx rename to src/components/InputGroup.tsx index 8193df4..505a7b2 100644 --- a/src/components/InputGroup.jsx +++ b/src/components/InputGroup.tsx @@ -1,4 +1,5 @@ -import ErrorMessage from './ErrorMessage.jsx' +import React from 'react' +import ErrorMessage from './ErrorMessage.js' import S from 'styled-components' import { useState } from 'react' @@ -9,6 +10,7 @@ const InputGroup = ({ input, index }) => { setFocused(true) if (input?.appendZeros && event.target.value.length < 13) input.appendZeros(event.target.value) } + return ( { ) } -const StyledInputGroup = S.div` +interface StyledInputGroup { + width: number; + }; + +const StyledInputGroup = S.div` width: ${props => (props.width ? props.width : '100')}%; display: inline-block; ` diff --git a/src/components/Label.jsx b/src/components/Label.tsx similarity index 52% rename from src/components/Label.jsx rename to src/components/Label.tsx index a1c29cf..f91a940 100644 --- a/src/components/Label.jsx +++ b/src/components/Label.tsx @@ -1,6 +1,12 @@ +import React from 'react' import S from 'styled-components' -const Label = ({ label }) => {label} +interface LabelProps { +label: string; +forId?: string; +} + +const Label:React.FC = ({ label, forId }) => {label} const StyledLabel = S.label` display: block; diff --git a/src/components/Modal.jsx b/src/components/Modal.tsx similarity index 88% rename from src/components/Modal.jsx rename to src/components/Modal.tsx index 83ad8db..b7c037c 100644 --- a/src/components/Modal.jsx +++ b/src/components/Modal.tsx @@ -1,7 +1,12 @@ 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 = ({closeModal, children}) => { const handleClickOutside = (event) => { const target = event.target; diff --git a/src/components/Modelselect.jsx b/src/components/Modelselect.tsx similarity index 67% rename from src/components/Modelselect.jsx rename to src/components/Modelselect.tsx index 2808839..203531d 100644 --- a/src/components/Modelselect.jsx +++ b/src/components/Modelselect.tsx @@ -1,9 +1,11 @@ -import Label from './Label.jsx' +import React from 'react' +import Label from './Label.js' import S from 'styled-components' import Select from 'react-select' +import { PayCodeOptions } from '../pages/Payslip' const ModelselectStyles = { - control: styles => ({ + control: (styles: any) => ({ ...styles, borderRadius: '0', backgroundColor: 'lightgrey', @@ -12,16 +14,16 @@ 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 @@ -44,7 +46,19 @@ 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: {label:string, value: string}[]; +} + + +const Modelselect:React.FC = ({ width, placeholder, helpId, helpText, label, value, whenChanged, options }) => ( -) +)} interface ContainerProps { width: number; diff --git a/src/pages/Payslip.tsx b/src/pages/Payslip.tsx index 19f3c92..59d58c4 100644 --- a/src/pages/Payslip.tsx +++ b/src/pages/Payslip.tsx @@ -16,7 +16,7 @@ import Textarea from '../components/Textarea' import { deviceBrakepoints } from '../config/device-brakepoints' import styled from 'styled-components' -interface ModelCodeOptions { +export interface ModelCodeOptionsType { value: string; label: string; } @@ -27,12 +27,12 @@ export const ModelCodeOptions = [ { value: '00', label: '00' } ] -export interface PayCodeOptions { +export interface PayCodeOptionsType { value: number | string; label: string; } //TODO: change value param to string or vice versa -export const PayCodeOptions = [ + export const PayCodeOptions:PayCodeOptionsType[] = [ { value: 20, label: 'Prоmеt rоbе i uslugа – mеđufаznа pоtrоšnjа' @@ -835,14 +835,14 @@ interface InitialState { payer: string; paymentDescription: string; receiver: string; - payCode: PayCodeOptions, + payCode: PayCodeOptionsType, currencyCode: string; totalAmount: string; bankNumber: string; accountNumber: string; controlNumber: string; accountReceivable: string; - modelCode: ModelCodeOptions; + modelCode: ModelCodeOptionsType; paymentNumber: string; currentTemplate: CurrentTemplate; modalIsOpen: boolean; @@ -1084,11 +1084,6 @@ const useTemplate = (template: CurrentTemplate) => { } } - console.table({ - accountNumber, - amount, - modelCode - }) }, []) const whichModalContentToShow = () => { From a575a2370204ac2ac8d761dc25e308eb84e88c7b Mon Sep 17 00:00:00 2001 From: Ivan Kovacevic Date: Thu, 13 Apr 2023 17:42:00 +0200 Subject: [PATCH 03/16] refactor BankCard --- src/components/BankCard.tsx | 6 +-- src/components/Modal.tsx | 4 +- src/constants/bankData.ts | 81 ++++++++++++++++++++++++++----------- tsconfig.json | 2 +- 4 files changed, 64 insertions(+), 29 deletions(-) diff --git a/src/components/BankCard.tsx b/src/components/BankCard.tsx index 5cfa3e8..bc627a6 100644 --- a/src/components/BankCard.tsx +++ b/src/components/BankCard.tsx @@ -3,16 +3,16 @@ import banksData from '../constants/bankData'; import S from 'styled-components'; interface BankCardProps { - bankNumber: number; + bankNumber: string; } const BankCard:React.FC = ({bankNumber}) => { -const bankName = banksData[bankNumber]?.name ?? 'Nepostojeća banka'; +const bank = banksData.find((item) => item.bankNumber === bankNumber) ; return ( - Ovaj račun pripada: {bankName} + Ovaj račun pripada: {bank?.name ?? 'Nepostojeća banka'} )} diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index b7c037c..83b8cfa 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -8,9 +8,9 @@ interface ModalProps { const Modal:React.FC = ({closeModal, children}) => { - const handleClickOutside = (event) => { + const handleClickOutside = (event: MouseEvent) => { const target = event.target; - if (target.id === 'backdrop') { + if (target?.id === 'backdrop') { closeModal() } }; diff --git a/src/constants/bankData.ts b/src/constants/bankData.ts index bf420fb..a3d3533 100644 --- a/src/constants/bankData.ts +++ b/src/constants/bankData.ts @@ -1,90 +1,125 @@ -const banksData = { - 105: { +interface BanksDataType { + bankNumber: string; + name: string; + img: string; +}; +const banksData:BanksDataType[] = [ + { + bankNumber: '105', name: 'AGROINDUSTRIJSKO KOMERCIJALNA BANKA AIK BANKA, AD, BEOGRAD', img: '', }, - 115: { + + { + bankNumber: '115', name: 'MOBI BANKA, AD, BEOGRAD', img: '', }, - 145: { + + { + bankNumber: '145', name: 'EXPOBANK,AD,BEOGRAD', img: '', }, - 155: { + + { + bankNumber: '155', name: 'HALKBANK, AD, BEOGRAD', img: '', }, - 160: { + + { + bankNumber: '160', name: 'BANCAINTESA,AD,BEOGRAD', img: '', }, - 165: { + + { + bankNumber: '165', name: 'ADDIKO BANK, AD, BEOGRAD', img: '', }, - 170: { + + { + bankNumber: '170', name: 'UNICREDIT BANK SRBIJA, AD, BEOGRAD', img: '', }, - 190: { + { + bankNumber: '190', name: 'ALTA BANKA, AD, BEOGRAD', img: '', }, - 200: { + + { + bankNumber: '200', name: 'BANKA POSTANSKA STEDIONICA, AD, BEOGRAD', img: '', }, - 205: { + + { + bankNumber: '205', name: 'NLB KOMERCIJALNABANKA,AD, BEOGRAD', img: '', }, - 220: { + + { + bankNumber: '220', name: 'PROCREDIT BANK, AD, BEOGRAD', img: '', }, - 250: { + { + bankNumber: '250', name: 'EUROBANK DIREKTNA, AD, BEOGRAD', img: '', }, - 265: { + { + bankNumber: '265', name: 'RAIFFEISEN BANKA, AD, BEOGRAD', img: '', }, - 295: { + { + bankNumber: '295', name: 'SRPSKA BANKA, AD, BEOGRAD', img: '', }, - 325: { + { + bankNumber: '325', name: 'OTP BANKA SRBIJA AKCIONARSKO DRUSTVO NOVI SAD', img: '', }, - 330: { + { + bankNumber: '330', name: 'RBA BANKA, AD, NOVI SAD', img: '', }, - 340: { + { + bankNumber: '340', name: 'ERSTE BANK, AD, NOVI SAD', img: '', }, - 370: { + { + bankNumber: '370', name: '3 BANKA, AD, NOVI SAD', img: '', }, - 375: { + { + bankNumber: '375', name: 'API BANK, AD, BEOGRAD', img: '', }, - 380: { + { + bankNumber: '380', name: 'MIRABANK, AD, BEOGRAD', img: '', }, - 385: { + { + bankNumber: '385', name: 'BANK OF CHINA SRBIJA, AD, BEOGRAD - NOVI BEOGRAD', img: '', }, -}; +]; export default banksData; diff --git a/tsconfig.json b/tsconfig.json index c9616d4..7348468 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,7 +6,7 @@ "sourceMap": true, "jsx": "react", "strict": true, - "allowImportingTsExtensions": true, + "moduleResolution": "node", "esModuleInterop": true, "experimentalDecorators": true, "noUnusedLocals": true, From 2d2cded99d1b8cae7ebee49a2bffb1c5d176306f Mon Sep 17 00:00:00 2001 From: Ivan Kovacevic Date: Thu, 13 Apr 2023 18:25:19 +0200 Subject: [PATCH 04/16] fixing type script --- package-lock.json | 43 ++++++++++++++++++++++++++++++++ package.json | 1 + src/components/ErrorMessage.tsx | 7 +++++- src/components/InputGroup.tsx | 7 +++++- src/components/Modal.tsx | 2 +- src/components/SplittedInput.tsx | 7 +++++- src/components/Textarea.tsx | 11 +++++++- tsconfig.json | 1 - 8 files changed, 73 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0e20334..bca4758 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ }, "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", @@ -744,6 +745,16 @@ "node": ">= 8" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dev": true, + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -777,6 +788,17 @@ "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" }, + "node_modules/@types/styled-components": { + "version": "5.1.26", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.26.tgz", + "integrity": "sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw==", + "dev": true, + "dependencies": { + "@types/hoist-non-react-statics": "*", + "@types/react": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@vitejs/plugin-react": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-2.1.0.tgz", @@ -4477,6 +4499,16 @@ "fastq": "^1.6.0" } }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dev": true, + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -4510,6 +4542,17 @@ "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" }, + "@types/styled-components": { + "version": "5.1.26", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.26.tgz", + "integrity": "sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw==", + "dev": true, + "requires": { + "@types/hoist-non-react-statics": "*", + "@types/react": "*", + "csstype": "^3.0.2" + } + }, "@vitejs/plugin-react": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-2.1.0.tgz", diff --git a/package.json b/package.json index ec7fdba..73e9d7d 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ }, "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", diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx index a407c7e..fac4283 100644 --- a/src/components/ErrorMessage.tsx +++ b/src/components/ErrorMessage.tsx @@ -1,7 +1,12 @@ import React from 'react' import S from 'styled-components' -const ErrorMessage = ({ id, errorMessage }) => {errorMessage} +interface ErrorMessageProps { + id: string; + errorMessage: string; +} + +const ErrorMessage:React.FC = ({ id, errorMessage }) => {errorMessage} const StyledErrorMessage = S.p` display: none; diff --git a/src/components/InputGroup.tsx b/src/components/InputGroup.tsx index 505a7b2..56b3362 100644 --- a/src/components/InputGroup.tsx +++ b/src/components/InputGroup.tsx @@ -3,10 +3,15 @@ import ErrorMessage from './ErrorMessage.js' import S from 'styled-components' import { useState } from 'react' +interface InputGroupProps { + input: HTMLInputElement; + index: ; +} + const InputGroup = ({ input, index }) => { const [focused, setFocused] = useState(false) - const handleFocus = event => { + const handleFocus = (event: React.FocusEventHandler) => { setFocused(true) if (input?.appendZeros && event.target.value.length < 13) input.appendZeros(event.target.value) } diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 83b8cfa..65845a7 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -9,7 +9,7 @@ interface ModalProps { const Modal:React.FC = ({closeModal, children}) => { const handleClickOutside = (event: MouseEvent) => { - const target = event.target; + const target = event.target as HTMLElement; if (target?.id === 'backdrop') { closeModal() } diff --git a/src/components/SplittedInput.tsx b/src/components/SplittedInput.tsx index 9528b3d..a4d848b 100644 --- a/src/components/SplittedInput.tsx +++ b/src/components/SplittedInput.tsx @@ -3,7 +3,12 @@ import InputGroup from './InputGroup.js' import S from 'styled-components' import { deviceBrakepoints } from '../config/device-brakepoints.js' -const SplittedInput = ({ legend, inputs }) => ( +interface SplittedInputProps { + legend: HTMLLegendElement; + inputs: HTMLElement; +} + +const SplittedInput:React.FC = ({ legend, inputs }) => ( {legend} {inputs.map((input, index) => ( diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx index 430a253..ba153b0 100644 --- a/src/components/Textarea.tsx +++ b/src/components/Textarea.tsx @@ -2,7 +2,16 @@ import React from 'react' import S from 'styled-components' import Label from './Label' -const Textarea = ({ label, id, help, helpText, value, whenChanged }) => ( +interface TextareaProps { + id: string; + help: string; + helpText: string; + label: string; + value: string | number; + whenChanged: (e:any) => void; +} + +const Textarea:React.FC = ({ label, id, help, helpText, value, whenChanged }) => (