api updates and tests for radio primitives (#1200)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: GoldGroove06

src/components/ui/TabNav/fragments/TabNavLink.tsx

@@ -39,7 +39,6 @@ const TabNavLink = ({ value, className = '', href = '#', children, disabled, asC
                 asChild={asChild}
                 aria-disabled={disabled}
                 aria-selected={isActive}
-                // @ts-expect-error
                 disabled={disabled}
                 {...disabled ? {} : { href }}
             >

src/core/primitives/Primitive/index.tsx

@@ -5,10 +5,9 @@ const SUPPORTED_HTML_ELEMENTS = ['div', 'span', 'button', 'input', 'a', 'img', '
 type SupportedElement = typeof SUPPORTED_HTML_ELEMENTS[number];
 
 // Update type definitions to be more specific
-interface PrimitiveProps extends React.HTMLAttributes<HTMLElement> {
-  asChild?: boolean;
-  children?: React.ReactNode;
-}
+type PrimitiveProps =
+  | (React.InputHTMLAttributes<HTMLInputElement> & { asChild?: boolean })
+  | (React.HTMLAttributes<HTMLElement> & { asChild?: boolean, children?: React.ReactNode });
 
 // Update component creation with proper typing
 const createPrimitiveComponent = (elementType: SupportedElement) => {

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

@@ -8,13 +8,12 @@ export default {
     render: (args:React.ComponentProps<typeof RadioPrimitive>) => <SandboxEditor>
 
         <div className='flex flex-col gap-2'>
+
             <span>
-                <RadioPrimitive name='radio' value='radio' checked={true} />
-                <label htmlFor='radio'>Radio 1</label>
-            </span>
-            <span>
-                <RadioPrimitive name='radio' value='radio2'/>
-                <label htmlFor='radio2'>Radio 2</label>
+                <form>
+                    <RadioPrimitive {...args}/>
+                    <label htmlFor='radio'>Radio 1</label>
+                </form>
             </span>
         </div>
     </SandboxEditor>
@@ -23,8 +22,23 @@ export default {
 
 export const All = {
     args: {
+        onClick: (data: any) => {
+            console.log('data', data);
+        },
+        name: 'radio',
+        value: 'radio',
+        required: true
+    }
+};
+
+export const Disabled = {
+    args: {
+        disabled: true,
+        name: 'radio',
+        value: 'radio1',
         onClick: (data: any) => {
             console.log('data', data);
         }
+
     }
 };

src/core/primitives/Radio/index.tsx

@@ -1,35 +1,35 @@
-import React, { useState } from 'react';
-import Primitive from '~/core/primitives/Primitive';
+import React from 'react';
+import Primitive from '../Primitive';
 
-export type RadioPrimitiveProps = {
-    onClick?: (data: any) => void;
-    onChange?: (data: any) => void;
-    checked?: boolean;
+type RadioPrimitiveProps = {
     name: string;
     value: string;
-};
-
-const RadioPrimitive = ({ name = '', value = '', checked = false, onClick, onChange, ...props }:RadioPrimitiveProps) => {
-    const [isChecked, setIsChecked] = useState(checked);
-    const dataAttributes = {
-        '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
-            });
-        }
-    };
+    id: string;
+    onChange?: () => void;
+    checked?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    asChild?: boolean
+}
 
+function RadioPrimitive({ name, value, id, checked, required, onChange, disabled, asChild, ...props }: RadioPrimitiveProps) {
     return (
-        <Primitive.input id={value} type='radio' value={value} name={name} onChange={handleOnChange} {...props} {...dataAttributes}/>
+        <Primitive.input
+            type="radio"
+            checked={checked}
+            name={name}
+            tabIndex={-1}
+            value={value}
+            onChange={onChange}
+            id={value}
+            aria-disabled={disabled}
+            disabled={disabled}
+            required={required}
+            aria-required={required}
+            asChild={asChild}
+            {...props}
+        />
     );
-};
+}
 
 export default RadioPrimitive;

src/core/primitives/RadioGroup/RadioGroupPrimitive.stories.js

@@ -0,0 +1,94 @@
+import React, { useState, ChangeEvent, FormEvent } from 'react';
+import RadioGroupPrimitive from './RadioGroupPrimitive';
+import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+
+interface Option {
+    id: string;
+    value: string;
+    label: string;
+}
+
+interface RadioButtonProps {
+    // Add any props you want to pass to RadioButton here
+}
+
+const RadioButton = (args: RadioButtonProps) => {
+    const options: Option[] = [
+        { id: 'html', value: 'html', label: 'HTML' },
+        { id: 'css', value: 'css', label: 'CSS' },
+        { id: 'javascript', value: 'javascript', label: 'JavaScript' }
+    ];
+
+    const [language, setLanguage] = useState<string>('css');
+
+    const handleChange = (item: string) => {
+        setLanguage(item);
+    };
+    return (
+        <SandboxEditor>
+            <RadioGroupPrimitive.Root
+                orientation='horizontal' dir='rtl'
+                name='test'
+            //  defaultValue='css'
+            >
+                {options.map((option) => (
+                    <RadioGroupPrimitive.Item key={option.id} value={option.value}>
+                        {option.label}
+                    </RadioGroupPrimitive.Item>
+                ))}
+            </RadioGroupPrimitive.Root>
+        </SandboxEditor>
+    );
+};
+
+export default {
+    title: 'Primitives/RadioGroupPrimitive',
+    component: RadioGroupPrimitive,
+    render: (args: RadioButtonProps) => <RadioButton {...args}/>
+};
+
+export const All = {};
+
+export const InForm = () => {
+    const options: Option[] = [
+        { id: 'html', value: 'html', label: 'HTML' },
+        { id: 'css', value: 'css', label: 'CSS' },
+        { id: 'javascript', value: 'javascript', label: 'JavaScript' }
+    ];
+    const [selected, setSelected] = useState<string>('css');
+    const [submitted, setSubmitted] = useState<string | null>(null);
+
+    const handleChange = (value: string) => {
+        setSelected(value);
+    };
+
+    const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        setSubmitted(selected);
+    };
+
+    return (
+        <SandboxEditor>
+            <form onSubmit={handleSubmit}>
+                <RadioGroupPrimitive.Root
+                // orientation="horizontal"
+                    name="language"
+                    value={selected}
+                    onValueChange={handleChange}
+                >
+                    {options.map((option) => (
+                        <RadioGroupPrimitive.Item key={option.id} value={option.value}>
+                            {option.label}
+                        </RadioGroupPrimitive.Item>
+                    ))}
+                </RadioGroupPrimitive.Root>
+                <button type="submit" style={{ marginTop: 16 }}>Submit</button>
+                {submitted && (
+                    <div style={{ marginTop: 12 }}>
+                        <strong>Submitted value:</strong> {submitted}
+                    </div>
+                )}
+            </form>
+        </SandboxEditor>
+    );
+};

src/core/primitives/RadioGroup/RadioGroupPrimitive.stories.tsx

@@ -8,9 +8,13 @@ export type RadioGroupProps = {
 
 } & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & PropsWithChildren
 
-const RadioGroupPrimitive = {} as const;
+const RadioGroupPrimitive = () => {
+    console.warn('Direct usage of RadioGroup is not supported. Please use RadioGroup.Root, RadioGroup.Item, etc. instead.');
+    return null;
+};
 
 RadioGroupPrimitive.Root = RadioGroupPrimitiveRoot;
 RadioGroupPrimitive.Item = RadioGroupPrimitiveItem;
 
+
 export default RadioGroupPrimitive;

src/core/primitives/RadioGroup/RadioGroupPrimitive.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
 
-const RadioGroupContext = React.createContext({
-    defaultChecked: null,
-    onChange: null
+export interface RadioGroupContextValue {
+    selectedValue: string;
+    setSelectedValue: (value: string) => void;
+    onChange?: (value: string) => void;
+    groupDisabled: boolean;
+    name: string;
+}
 
-});
+const RadioGroupContext = React.createContext<RadioGroupContextValue | null>(null);
 
 export default RadioGroupContext;

src/core/primitives/RadioGroup/context/RadioGroupContext.tsx

@@ -1,28 +1,40 @@
 import React, { PropsWithChildren, useContext } from 'react';
 import RadioGroupContext from '../context/RadioGroupContext';
-
+import RovingFocusGroup from '~/core/utils/RovingFocusGroup';
 import RadioPrimitive from '~/core/primitives/Radio';
 
-type RadioGroupItemProps = PropsWithChildren<{
+type RadioGroupPrimitiveItemProps = PropsWithChildren<{
     value: string;
+    disabled?: boolean
+    children?: React.ReactNode;
+    required?: boolean
 }>;
 
-const RadioGroupPrimitiveItem = ({ value, children, ...props }: RadioGroupPrimitiveItemProps) => {
-    const { setCheckedItem, checkedItem, onChange } = useContext(RadioGroupContext);
+const RadioGroupPrimitiveItem = ({ value, children, disabled, required = false, ...props }: RadioGroupPrimitiveItemProps) => {
+    const context = useContext(RadioGroupContext);
+    if (!context) {
+        throw new Error('RadioGroup.Item must be used within a RadioGroup.Root');
+    }
+    const { groupDisabled, name, selectedValue, setSelectedValue } = context;
+
+    return (
+        <RovingFocusGroup.Item role='radio'>
+            <div {...props} onFocus={() => setSelectedValue(value)}>
 
-    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        setCheckedItem(value);
+                <RadioPrimitive
+                    id={value}
+                    name={name}
+                    value={value}
+                    checked = {selectedValue === value}
+                    disabled={groupDisabled || disabled}
+                    required={required}
+                    onChange={() => setSelectedValue(value)}
+                />
 
-        if (typeof onChange === 'function') {
-            onChange(value);
-        }
-    };
+                <label htmlFor={value}>{children}</label>
 
-    return (
-        <div {...props}>
-            <RadioPrimitive value={value} name='radio' checked={checkedItem === value} onChange={handleOnChange} />
-            <label htmlFor={value}>{children}</label>
-        </div>
+            </div>
+        </RovingFocusGroup.Item>
     );
 };