From 38e5d073d1fd39eb306808c79f4e86ffca564704 Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <likhith@regentmarkets.com>
Date: Fri, 16 Sep 2022 16:52:11 +0400
Subject: [PATCH 1/5] refactor: :art: migrated composite-checkbox component to
 ts

---
 ...te-checkbox.jsx => composite-checkbox.tsx} | 36 +++++++++++--------
 1 file changed, 22 insertions(+), 14 deletions(-)
 rename packages/components/src/components/composite-checkbox/{composite-checkbox.jsx => composite-checkbox.tsx} (63%)

diff --git a/packages/components/src/components/composite-checkbox/composite-checkbox.jsx b/packages/components/src/components/composite-checkbox/composite-checkbox.tsx
similarity index 63%
rename from packages/components/src/components/composite-checkbox/composite-checkbox.jsx
rename to packages/components/src/components/composite-checkbox/composite-checkbox.tsx
index 0b327d56c4c8..b7a7f38d233b 100644
--- a/packages/components/src/components/composite-checkbox/composite-checkbox.jsx
+++ b/packages/components/src/components/composite-checkbox/composite-checkbox.tsx
@@ -1,11 +1,30 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import Checkbox from '../checkbox/checkbox.jsx';
 import Text from '../text';
 
-const CompositeCheckbox = ({ name, value, onChange, className, label, id, description, children, ...props }) => {
-    const onClickContainer = e => {
+type TCompositeCheckbox = {
+    name: string;
+    value: boolean;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    className?: string;
+    label: string;
+    id?: string;
+    description: string;
+};
+
+const CompositeCheckbox = ({
+    name,
+    value,
+    onChange,
+    className,
+    label,
+    id,
+    description,
+    children,
+    ...props
+}: React.PropsWithChildren<TCompositeCheckbox>) => {
+    const onClickContainer = (e: React.MouseEvent<HTMLDivElement>) => {
         e.stopPropagation();
         e.preventDefault();
         onChange({
@@ -36,15 +55,4 @@ const CompositeCheckbox = ({ name, value, onChange, className, label, id, descri
     );
 };
 
-CompositeCheckbox.propTypes = {
-    name: PropTypes.string.isRequired,
-    value: PropTypes.bool.isRequired,
-    onChange: PropTypes.func.isRequired,
-    className: PropTypes.string,
-    label: PropTypes.string.isRequired,
-    id: PropTypes.string,
-    description: PropTypes.string.isRequired,
-    children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-};
-
 export default CompositeCheckbox;

From 609f279f1c1145889f8ba13be431907886e538a8 Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <likhith@regentmarkets.com>
Date: Fri, 16 Sep 2022 17:55:50 +0400
Subject: [PATCH 2/5] refactor: :art: restuctured the input

---
 .../composite-checkbox/composite-checkbox.tsx      |  8 ++------
 .../src/components/composite-checkbox/index.js     |  2 +-
 .../composite-checkbox.stories.js                  | 14 +++++++-------
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/components/composite-checkbox/composite-checkbox.tsx b/packages/components/src/components/composite-checkbox/composite-checkbox.tsx
index b7a7f38d233b..1ebb11c48846 100644
--- a/packages/components/src/components/composite-checkbox/composite-checkbox.tsx
+++ b/packages/components/src/components/composite-checkbox/composite-checkbox.tsx
@@ -6,7 +6,7 @@ import Text from '../text';
 type TCompositeCheckbox = {
     name: string;
     value: boolean;
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (event?: boolean) => void;
     className?: string;
     label: string;
     id?: string;
@@ -27,11 +27,7 @@ const CompositeCheckbox = ({
     const onClickContainer = (e: React.MouseEvent<HTMLDivElement>) => {
         e.stopPropagation();
         e.preventDefault();
-        onChange({
-            target: {
-                value: !value,
-            },
-        });
+        onChange(!value);
     };
 
     return (
diff --git a/packages/components/src/components/composite-checkbox/index.js b/packages/components/src/components/composite-checkbox/index.js
index 386a4710b35b..50c2b37ef680 100644
--- a/packages/components/src/components/composite-checkbox/index.js
+++ b/packages/components/src/components/composite-checkbox/index.js
@@ -1,4 +1,4 @@
-import CompositeCheckbox from './composite-checkbox.jsx';
+import CompositeCheckbox from './composite-checkbox';
 import './composite-checkbox.scss';
 
 export default CompositeCheckbox;
diff --git a/packages/components/stories/composite-checkbox/composite-checkbox.stories.js b/packages/components/stories/composite-checkbox/composite-checkbox.stories.js
index 7e19db0da9d8..2cf86bb78fe4 100644
--- a/packages/components/stories/composite-checkbox/composite-checkbox.stories.js
+++ b/packages/components/stories/composite-checkbox/composite-checkbox.stories.js
@@ -4,7 +4,7 @@ import { boolean, withKnobs } from '@storybook/addon-knobs';
 import { withInfo } from '@storybook/addon-info';
 import React from 'react';
 import Theme from '../shared/theme';
-import CompositeCheckbox from 'Components/composite-checkbox/composite-checkbox.jsx';
+import CompositeCheckbox from 'Components/composite-checkbox/composite-checkbox';
 import notes from './README.md';
 import 'Components/composite-checkbox/composite-checkbox.scss';
 import 'Components/checkbox/checkbox.scss';
@@ -40,8 +40,8 @@ stories
                         description='Description'
                         value={value}
                         onChange={v => {
-                            action(`Value is set to ${v.target.value}`);
-                            setValue(v.target.value);
+                            action(`Value is set to ${v}`);
+                            setValue(v);
                         }}
                     />
                 </Theme>
@@ -65,28 +65,28 @@ stories
                             value={value}
                             label='Morty'
                             description='Mortimer "Morty" Smith Sr. is one of the two eponymous main protagonists in Rick and Morty. He is the grandson of Rick and is often forced to tag along on his various misadventures. Morty attends Harry Herpson High School along with his sister, Summer.'
-                            onChange={v => setValue(v.target.value)}
+                            onChange={v => setValue(v)}
                         />
                         <CompositeCheckbox
                             name='test2'
                             value={value2}
                             label='Evil Morty'
                             description='Evil Morty is one of the many versions of Morty in the multiverse. He is the main general antagonist for Rick and Morty. He currently serves as the first Morty to be democratically elected President of The Citadel. He first appeared in "Close Rick-Counters of the Rick Kind" as the true lead antagonist, and was seen being rounded up with the other Rickless Mortys.'
-                            onChange={v => setValue2(v.target.value)}
+                            onChange={v => setValue2(v)}
                         />
                         <CompositeCheckbox
                             name='test3'
                             value={value3}
                             label='Rick'
                             description="Rick Sanchez is the titular anti-heroic main protagonist of the series. He is a genius scientist whose alcoholism and reckless, nihilistic behavior are a source of concern for his daughter's family, as well as the safety of their son, Morty. He is voiced by Justin Roiland. He is later revealed to be Morty's cousin in an interview with Roiland himself."
-                            onChange={v => setValue3(v.target.value)}
+                            onChange={v => setValue3(v)}
                         />
                         <CompositeCheckbox
                             name='test4'
                             value={value4}
                             label='Jerry Smith'
                             description='Jerry Smith is the pentagonist of Rick and Morty. Jerry is the husband of Beth Smith, the father of Summer Smith and Morty Smith, and the son-in-law of Rick Sanchez.'
-                            onChange={v => setValue4(v.target.value)}
+                            onChange={v => setValue4(v)}
                         />
                     </Grid>
                 </Theme>

From 26e7a05de6416e308d5176ab3ed8c75763a5107b Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <likhith@regentmarkets.com>
Date: Wed, 19 Oct 2022 15:42:54 +0400
Subject: [PATCH 3/5] feat: :art: added a CustomEvent type

---
 .../components/src/components/checkbox/checkbox.tsx  |  3 ++-
 .../composite-checkbox/composite-checkbox.tsx        |  9 +++++++--
 .../components/src/components/types/common.types.ts  |  2 ++
 packages/components/src/components/types/index.ts    |  3 ++-
 .../composite-checkbox/composite-checkbox.stories.js | 12 ++++++------
 5 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/components/checkbox/checkbox.tsx b/packages/components/src/components/checkbox/checkbox.tsx
index 7e1400c895fb..105633ecd82c 100644
--- a/packages/components/src/components/checkbox/checkbox.tsx
+++ b/packages/components/src/components/checkbox/checkbox.tsx
@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import Icon from '../icon';
 import Text from '../text';
+import { TCheckboxEvent } from '../types';
 
 type TCheckBoxProps = Omit<React.HTMLProps<HTMLInputElement>, 'value'> & {
     className?: string;
@@ -11,7 +12,7 @@ type TCheckBoxProps = Omit<React.HTMLProps<HTMLInputElement>, 'value'> & {
     greyDisabled?: boolean;
     id?: string;
     label: string;
-    onChange: (e: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLSpanElement>) => void;
+    onChange: (e: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLSpanElement> | TCheckboxEvent) => void;
     value?: boolean;
     withTabIndex?: number;
 };
diff --git a/packages/components/src/components/composite-checkbox/composite-checkbox.tsx b/packages/components/src/components/composite-checkbox/composite-checkbox.tsx
index 03e067d09d72..49e3bcad4294 100644
--- a/packages/components/src/components/composite-checkbox/composite-checkbox.tsx
+++ b/packages/components/src/components/composite-checkbox/composite-checkbox.tsx
@@ -2,11 +2,12 @@ import classNames from 'classnames';
 import React from 'react';
 import Checkbox from '../checkbox/checkbox';
 import Text from '../text';
+import { TCheckboxEvent } from '../types';
 
 type TCompositeCheckbox = {
     name: string;
     value: boolean;
-    onChange: (event?: boolean) => void;
+    onChange: (e: TCheckboxEvent) => void;
     className?: string;
     label: string;
     id?: string;
@@ -27,7 +28,11 @@ const CompositeCheckbox = ({
     const onClickContainer = (e: React.MouseEvent<HTMLDivElement>) => {
         e.stopPropagation();
         e.preventDefault();
-        onChange(!value);
+        onChange({
+            target: {
+                value: !value,
+            },
+        });
     };
 
     return (
diff --git a/packages/components/src/components/types/common.types.ts b/packages/components/src/components/types/common.types.ts
index c10c3c36f60f..1ad7d0a1bbea 100644
--- a/packages/components/src/components/types/common.types.ts
+++ b/packages/components/src/components/types/common.types.ts
@@ -3,3 +3,5 @@ import React from 'react';
 export type TGenericObjectType = {
     [key: string]: React.ReactNode;
 };
+
+export type TCheckboxEvent = ReturnType<() => { target: { value: boolean } }>;
diff --git a/packages/components/src/components/types/index.ts b/packages/components/src/components/types/index.ts
index ea83d4d064c5..4488d191a9aa 100644
--- a/packages/components/src/components/types/index.ts
+++ b/packages/components/src/components/types/index.ts
@@ -1,4 +1,5 @@
 import { TIconsManifest, TIconProps } from './icons.types';
 import { TAccordionProps, TAccordionItem } from './accordion.types';
+import { TCheckboxEvent } from './common.types';
 
-export type { TIconsManifest, TIconProps, TAccordionProps, TAccordionItem };
+export type { TCheckboxEvent, TIconsManifest, TIconProps, TAccordionProps, TAccordionItem };
diff --git a/packages/components/stories/composite-checkbox/composite-checkbox.stories.js b/packages/components/stories/composite-checkbox/composite-checkbox.stories.js
index 2cf86bb78fe4..7d25da5c448a 100644
--- a/packages/components/stories/composite-checkbox/composite-checkbox.stories.js
+++ b/packages/components/stories/composite-checkbox/composite-checkbox.stories.js
@@ -40,8 +40,8 @@ stories
                         description='Description'
                         value={value}
                         onChange={v => {
-                            action(`Value is set to ${v}`);
-                            setValue(v);
+                            action(`Value is set to ${v.target.value}`);
+                            setValue(v.target.value);
                         }}
                     />
                 </Theme>
@@ -65,28 +65,28 @@ stories
                             value={value}
                             label='Morty'
                             description='Mortimer "Morty" Smith Sr. is one of the two eponymous main protagonists in Rick and Morty. He is the grandson of Rick and is often forced to tag along on his various misadventures. Morty attends Harry Herpson High School along with his sister, Summer.'
-                            onChange={v => setValue(v)}
+                            onChange={v => setValue(v.target.value)}
                         />
                         <CompositeCheckbox
                             name='test2'
                             value={value2}
                             label='Evil Morty'
                             description='Evil Morty is one of the many versions of Morty in the multiverse. He is the main general antagonist for Rick and Morty. He currently serves as the first Morty to be democratically elected President of The Citadel. He first appeared in "Close Rick-Counters of the Rick Kind" as the true lead antagonist, and was seen being rounded up with the other Rickless Mortys.'
-                            onChange={v => setValue2(v)}
+                            onChange={v => setValue2(v.target.value)}
                         />
                         <CompositeCheckbox
                             name='test3'
                             value={value3}
                             label='Rick'
                             description="Rick Sanchez is the titular anti-heroic main protagonist of the series. He is a genius scientist whose alcoholism and reckless, nihilistic behavior are a source of concern for his daughter's family, as well as the safety of their son, Morty. He is voiced by Justin Roiland. He is later revealed to be Morty's cousin in an interview with Roiland himself."
-                            onChange={v => setValue3(v)}
+                            onChange={v => setValue3(v.target.value)}
                         />
                         <CompositeCheckbox
                             name='test4'
                             value={value4}
                             label='Jerry Smith'
                             description='Jerry Smith is the pentagonist of Rick and Morty. Jerry is the husband of Beth Smith, the father of Summer Smith and Morty Smith, and the son-in-law of Rick Sanchez.'
-                            onChange={v => setValue4(v)}
+                            onChange={v => setValue4(v.target.value)}
                         />
                     </Grid>
                 </Theme>

From ef53a373f0fe8f5f3d7da1595d4428d3ed73f2a7 Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <likhith@regentmarkets.com>
Date: Wed, 19 Oct 2022 16:20:59 +0400
Subject: [PATCH 4/5] feat: :construction: typecheck for checkbox event

---
 packages/components/src/components/checkbox/checkbox.tsx       | 3 +--
 .../src/components/composite-checkbox/composite-checkbox.tsx   | 3 +--
 packages/components/src/components/types/common.types.ts       | 2 --
 packages/components/src/components/types/index.ts              | 3 +--
 4 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/components/checkbox/checkbox.tsx b/packages/components/src/components/checkbox/checkbox.tsx
index 105633ecd82c..7e1400c895fb 100644
--- a/packages/components/src/components/checkbox/checkbox.tsx
+++ b/packages/components/src/components/checkbox/checkbox.tsx
@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import React from 'react';
 import Icon from '../icon';
 import Text from '../text';
-import { TCheckboxEvent } from '../types';
 
 type TCheckBoxProps = Omit<React.HTMLProps<HTMLInputElement>, 'value'> & {
     className?: string;
@@ -12,7 +11,7 @@ type TCheckBoxProps = Omit<React.HTMLProps<HTMLInputElement>, 'value'> & {
     greyDisabled?: boolean;
     id?: string;
     label: string;
-    onChange: (e: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLSpanElement> | TCheckboxEvent) => void;
+    onChange: (e: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLSpanElement>) => void;
     value?: boolean;
     withTabIndex?: number;
 };
diff --git a/packages/components/src/components/composite-checkbox/composite-checkbox.tsx b/packages/components/src/components/composite-checkbox/composite-checkbox.tsx
index 49e3bcad4294..bb6d6a6186f0 100644
--- a/packages/components/src/components/composite-checkbox/composite-checkbox.tsx
+++ b/packages/components/src/components/composite-checkbox/composite-checkbox.tsx
@@ -2,12 +2,11 @@ import classNames from 'classnames';
 import React from 'react';
 import Checkbox from '../checkbox/checkbox';
 import Text from '../text';
-import { TCheckboxEvent } from '../types';
 
 type TCompositeCheckbox = {
     name: string;
     value: boolean;
-    onChange: (e: TCheckboxEvent) => void;
+    onChange: (e: { target: { value: boolean } }) => void;
     className?: string;
     label: string;
     id?: string;
diff --git a/packages/components/src/components/types/common.types.ts b/packages/components/src/components/types/common.types.ts
index 1ad7d0a1bbea..c10c3c36f60f 100644
--- a/packages/components/src/components/types/common.types.ts
+++ b/packages/components/src/components/types/common.types.ts
@@ -3,5 +3,3 @@ import React from 'react';
 export type TGenericObjectType = {
     [key: string]: React.ReactNode;
 };
-
-export type TCheckboxEvent = ReturnType<() => { target: { value: boolean } }>;
diff --git a/packages/components/src/components/types/index.ts b/packages/components/src/components/types/index.ts
index 4488d191a9aa..ea83d4d064c5 100644
--- a/packages/components/src/components/types/index.ts
+++ b/packages/components/src/components/types/index.ts
@@ -1,5 +1,4 @@
 import { TIconsManifest, TIconProps } from './icons.types';
 import { TAccordionProps, TAccordionItem } from './accordion.types';
-import { TCheckboxEvent } from './common.types';
 
-export type { TCheckboxEvent, TIconsManifest, TIconProps, TAccordionProps, TAccordionItem };
+export type { TIconsManifest, TIconProps, TAccordionProps, TAccordionItem };

From 3d268440061572c26d68eb5e3ae6d804a6efc003 Mon Sep 17 00:00:00 2001
From: Likhith Kolayari <likhith@regentmarkets.com>
Date: Wed, 19 Oct 2022 16:43:56 +0400
Subject: [PATCH 5/5] feat: :construction: setting type for custom event

---
 .../src/components/composite-checkbox/composite-checkbox.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/composite-checkbox/composite-checkbox.tsx b/packages/components/src/components/composite-checkbox/composite-checkbox.tsx
index bb6d6a6186f0..b0a2404b5bdc 100644
--- a/packages/components/src/components/composite-checkbox/composite-checkbox.tsx
+++ b/packages/components/src/components/composite-checkbox/composite-checkbox.tsx
@@ -6,7 +6,7 @@ import Text from '../text';
 type TCompositeCheckbox = {
     name: string;
     value: boolean;
-    onChange: (e: { target: { value: boolean } }) => void;
+    onChange: (e: React.SyntheticEvent) => void;
     className?: string;
     label: string;
     id?: string;
@@ -31,7 +31,7 @@ const CompositeCheckbox = ({
             target: {
                 value: !value,
             },
-        });
+        } as any);
     };
 
     return (