From 47ffd20f74cebe779308a1f8d526c1b074e92590 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <muhammed@freecodecamp.org>
Date: Fri, 10 Feb 2023 15:24:23 +0200
Subject: [PATCH] fix(client): add type to warn misuse of attributes in
 formControl (#48696)

* feat: add type to warn miss usage of attributes in formControl

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* refactor the value type

Co-authored-by: sembauke <semboot699@gmail.com>

* add condition type for readyonly and onchange types

* warn when using readonly and onchange props together

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>

* allow value to be undefined

* Make read-only undefined

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>

---------

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: sembauke <semboot699@gmail.com>
Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
---
 tools/ui-components/src/form-control/types.ts | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/tools/ui-components/src/form-control/types.ts b/tools/ui-components/src/form-control/types.ts
index d26f2c1b1d6..41c77d5d169 100644
--- a/tools/ui-components/src/form-control/types.ts
+++ b/tools/ui-components/src/form-control/types.ts
@@ -2,20 +2,34 @@ import React from 'react';
 
 export type FormControlElement = HTMLInputElement | HTMLTextAreaElement;
 
-export interface FormControlProps
-  extends React.HTMLAttributes<FormControlElement> {
+type ChangibleValues =
+  | {
+      value?: never;
+      onChange?: never;
+      readonly?: never;
+    }
+  | {
+      value: string;
+      onChange?: never;
+      readonly: boolean;
+    }
+  | {
+      value: string;
+      onChange: (event: React.ChangeEvent<FormControlElement>) => void;
+      readonly?: never;
+    };
+
+export type FormControlProps = React.HTMLAttributes<FormControlElement> & {
   className?: string;
   id?: string;
   testId?: string;
-  onChange?: React.ChangeEventHandler<FormControlElement>;
-  value?: string;
   componentClass?: typeof React.Component;
   placeholder?: string;
   name?: string;
   required?: boolean;
   rows?: number;
   type?: 'text' | 'email' | 'url';
-}
+} & ChangibleValues;
 
 export interface FormControlVariationProps {
   className?: string;