Update RadioPrimitive component to manage checked state

Author: kotAPI

src/core/primitives/Radio/RadioPrimitive.stories.tsx

@@ -9,11 +9,11 @@ export default {
 
         <div className='flex flex-col gap-2'>
             <span>
-                <RadioPrimitive name='radio' value='radio' onClick={() => {}} />
+                <RadioPrimitive name='radio' value='radio' checked={true} />
                 <label htmlFor='radio'>Radio 1</label>
             </span>
             <span>
-                <RadioPrimitive name='radio' value='radio2' onClick={() => {}} />
+                <RadioPrimitive name='radio' value='radio2'/>
                 <label htmlFor='radio2'>Radio 2</label>
             </span>
         </div>
@@ -23,8 +23,6 @@ export default {
 
 export const All = {
     args: {
-        checked: true,
-        value: 'radio',
         onClick: (data: any) => {
             console.log('data', data);
         }

src/core/primitives/Radio/index.tsx

@@ -1,33 +1,25 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Primitive from '~/core/primitives/Primitive';
 
-type RadioPrimitiveProps = {
-    onClick: (data: any) => void;
-    onChange: (data: any) => void;
-    checked: boolean;
+export type RadioPrimitiveProps = {
+    onClick?: (data: any) => void;
+    onChange?: (data: any) => void;
+    checked?: boolean;
     name: string;
     value: string;
 };
 
 const RadioPrimitive = ({ name = '', value = '', checked = false, onClick, onChange, ...props }:RadioPrimitiveProps) => {
+    const [isChecked, setIsChecked] = useState(checked);
     const dataAttributes = {
-        'data-checked': checked.toString()
-    };
-
-    const handleOnClick = (event: React.MouseEvent<HTMLInputElement>) => {
-        const isChecked = event.target?.checked;
-        if (typeof onClick === 'function') {
-            onClick({
-                value,
-                checked: isChecked
-            });
-        }
+        'data-checked': isChecked.toString()
     };
 
     const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         const isChecked = event.target.checked;
-
+        console.log(isChecked);
         if (typeof onChange === 'function') {
+            setIsChecked(isChecked);
             onChange({
                 value,
                 checked: isChecked
@@ -36,7 +28,7 @@ const RadioPrimitive = ({ name = '', value = '', checked = false, onClick, onCha
     };
 
     return (
-        <Primitive.input id={value} type='radio' value={value} name={name} onClick={handleOnClick} onChange={handleOnChange} {...props} {...dataAttributes}/>
+        <Primitive.input id={value} type='radio' value={value} name={name} onChange={handleOnChange} {...props} {...dataAttributes}/>
     );
 };