Upgrading a react typescript project from defencedigital 2.80 to 3.30

[RichardP932]

Upgrading a react typescript project from defencedigital 2.80 to 3.30

Hi,

All help greately appreciated.

If I can sort all these out an use the latest version it will be very nice. If not I will have to abort the branch and carry on with 2.80.

Best regards,
Richard

I have these in my package json after upgrading from 2.80

"@defencedigital/css-framework": "^2.80.3",
"@defencedigital/design-tokens": "^3.2.2",
"@defencedigital/eslint-config-react": "^3.2.2",
"@defencedigital/fonts": "^3.2.2",
"@defencedigital/icon-library": "^3.3.0",
"@defencedigital/react-component-library": "^3.2.2",

I have knocked these out of the devDependencies
"@types/react-pdf": "^5.0.9",
"eslint": "^8.8.0",
"eslint-plugin-prettier": "^4.0.0",

React is;
"@types/react": "^17.0.40",
"react": "^17.0.2",
"react-scripts": "^5.0.0",
"styled-components": "^5.3.3",

npm Install gives no errors.

npm start gives errors as follows;
export 'Tab' (imported as 'Tab') was not found in '@defencedigital/react-component-library'
export 'BUTTON_SIZE' (imported as 'BUTTON_SIZE') was not found in '@defencedigital/react-component-library'

TS2305: Module '"@defencedigital/react-component-library"' has no exported member 'Tab'.
2 | import {
3 | TabSet,

4 | Tab,
| ^^^
5 | BreadcrumbsItem,
6 | Breadcrumbs,
7 | } from '@defencedigital/react-component-library'

ERROR in src/pages/LotMitigation/PerformanceMeasureCard.tsx:5:3

TS2305: Module '"@defencedigital/react-component-library"' has no exported member 'BUTTON_SIZE'.
3 | Button,
4 | BUTTON_VARIANT,

5 | BUTTON_SIZE,
| ^^^^^^^^^^^
6 | } from '@defencedigital/react-component-library'

I have other errors but I think that they are to do with upgrading esLint, a few like this;
TS2769: No overload matches this call.
Overload 1 of 2, '(props: (({ children?: ((string | number | boolean | {} | ReactElement<any, string | JSXElementConstructor> | Iterable | ReactPortal | ReactNode[]) & (boolean | ... 2 more ... | ReactPortal)) | null | undefined; ... 18 more ...; footnote?: string | undefined; } | { ...; } | { ...; }) & { ...; }) & { ...; }): ReactElement<...>', gave the following error.
Type '(event: React.ChangeEvent) => void' is not assignable to type '(event: ChangeEvent | MouseEvent<HTMLButtonElement, MouseEvent>, newValue: number | null) => void'.
Types of parameters 'event' and 'event' are incompatible.
Type 'ChangeEvent | MouseEvent<HTMLButtonElement, MouseEvent>' is not assignable to type 'ChangeEvent'.
Type 'MouseEvent<HTMLButtonElement, MouseEvent>' is not assignable to type 'ChangeEvent'.
Types of property 'target' are incompatible.
Type 'EventTarget' is not assignable to type 'EventTarget & HTMLInputElement'.
Type 'EventTarget' is missing the following properties from type 'HTMLInputElement': accept, align, alt, autocomplete, and 328 more.
Overload 2 of 2, '(props: StyledComponentPropsWithAs<FC, any, {}, never, FC, FC>): ReactElement<...>', gave the following error.
Type '(event: React.ChangeEvent) => void' is not assignable to type '(event: ChangeEvent | MouseEvent<HTMLButtonElement, MouseEvent>, newValue: number | null) => void'.
251 | <ScoreNumberInput
252 | name="currentValue"

253 | onChange={onChange}
| ^^^^^^^^
254 | onBlur={onBlur}

[RichardP932]

Just renaming Tab to TabSet has sorted one of the errors. Now working on the BUTTON_SIZE one.

[RichardP932]

That was easy too just change the constant no longer exists just use size="small"

[RichardP932]

ChangeEvent one looks tricky I have code that does this.
const onChange = (event: React.ChangeEvent) => {
const {
target: { name, value },
} = event

const newFormData = {
  ...formData,
  [name]: value,
}

[jpveooys]

Hi @RichardP932

I'd go with the latter – you'll probably want to stick with the original approach for TextInput as the callback is typed as (event: React.ChangeEvent<HTMLInputElement>) => void there.

(Though I'd use event.currentTarget instead of event.target if you can. event.currentTarget will be typed as an HTMLInputElement for an event of type React.ChangeEvent<HTMLInputElement>. event.target could be something else in other scenarios if the event has bubbled.)

[RichardP932]

Really sorry @jpveooys I am still struggling with the text one which I thought would be fairly easy.
I have method
const onChangeTextInput = (
event: React.ChangeEvent,
newValue: string | null
) => {

  const newFormData = {
    ...formData,
    newValue,
  }
  setLastSaved(null)
  updateFormData(newFormData)
}

Called from this
<JustificationInput
name="justification"
value={formData.justification || ''}
onChange={onChangeTextInput}
onBlur={onBlur}
isDisabled={!hasPostMitigationScore}
isInvalid={Boolean(errors?.justification)}
/>
I have made bold where I get the error appear;
(property) onChange?: ((event: React.ChangeEvent) => void) | undefined
Optional handler invoked when the value of the component changes.

No overload matches this call.
Overload 1 of 2, '(props: { label: string; type?: TextInputType | undefined; name: string; ref?: Ref | undefined; key?: Key | null | undefined; ... 12 more ...; startAdornment?: ReactNode; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.
Type '(event: React.ChangeEvent, newValue: string | null) => void' is not assignable to type '(event: ChangeEvent) => void'.
Overload 2 of 2, '(props: StyledComponentPropsWithAs<ForwardRefExoticComponent<TextInputProps & RefAttributes>, any, TextInputProps, never, ForwardRefExoticComponent<...>, ForwardRefExoticComponent<...>>): ReactElement<...>', gave the following error.
Type '(event: React.ChangeEvent, newValue: string | null) => void' is not assignable to type '(event: ChangeEvent) => void'.ts(2769)
TextInput.d.ts(41, 5): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & { label: string; type?: TextInputType | undefined; name: string; ref?: Ref | undefined; ... 13 more ...; startAdornment?: ReactNode; } & { ...; } & { ...; }'
TextInput.d.ts(41, 5): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & { label: string; type?: TextInputType | undefined; name: string; ref?: Ref | undefined; ... 13 more ...; startAdornment?: ReactNode; } & { ...; } & { ...; }'

[RichardP932]

I think that React.InputHTMLAttributes defines onChange as (event: ChangeEvent) => void), and in onChange it is defined as ChangeHandler.

Because it is typescript it is quite strict on types.

[jpveooys]

Hi @RichardP932

TextInput is not special like NumberInput and so its onChange doesn't have a newValue argument. So you can use event.currentTarget.value for the value in that one.

(Make sure it's assigned to the right property in formData too – looks like it would be justification from the below.)

[RichardP932]

Thank you @jpveooys that worked.

[RichardP932]

The type that is causing the problem is value={formData.justification || ''} which is defined in the class as

interface FormData {
currentValue: number | null
noData: boolean
justification: string | null
}