Add RadioCards and RadioGroup components with styles

Author: kotAPI

src/components/ui/RadioCards/RadioCards.stories.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+import RadioCards from './RadioCards';
+
+const RadioCardsTemplate = (args) => {
+    const options = [
+        { id: 'config-1', value: '8-core CPU', label: '8-core CPU' },
+        { id: 'config-2', value: '16-core CPU', label: '16-core CPU' },
+        { id: 'config-3', value: '32-core CPU', label: '32-core CPU' }];
+
+    const [language, setLanguage] = useState('css');
+
+    const handleChange = (e) => {
+        setLanguage(e.target.value);
+    };
+    return (
+        <SandboxEditor>
+
+            <RadioCards.Root defaultChecked={language} onChange={handleChange} >
+                {options.map((option) => (
+                    <RadioCards.Item key={option.id} value={option.value}>
+                        <div>
+                            {option.label}
+                        </div>
+                    </RadioCards.Item>
+                ))}
+            </RadioCards.Root>
+        </SandboxEditor>
+    );
+};
+
+export default {
+    title: 'Components/RadioCards',
+    component: RadioCards,
+    render: (args) => <RadioCardsTemplate {...args}/>
+};
+
+export const All = {};
+All.args = {};

src/components/ui/RadioCards/RadioCards.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import RadioCardsRoot from './fragments/RadioCardsRoot';
+import RadioCardsItem from './fragments/RadioCardsItem';
+
+const RadioCards = {
+    Root: RadioCardsRoot,
+    Item: RadioCardsItem
+} as const;
+
+export default RadioCards;

src/components/ui/RadioCards/context/RadioCardsContext.tsx

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+export const RadioCardsContext = createContext({
+    defaultChecked: null,
+    rootClass: '',
+    onChange: null
+});

src/components/ui/RadioCards/fragments/RadioCardsItem.tsx

@@ -0,0 +1,12 @@
+import React, { useContext } from 'react';
+import RadioGroupPrimitive from '~/core/primitives/RadioGroup/RadioGroupPrimitive';
+import { RadioCardsContext } from '../context/RadioCardsContext';
+
+import clsx from 'clsx';
+
+const RadioCardsItem = ({ children, className = '', ...props }: { children: React.ReactNode } & RadioGroupPrimitive.ItemProps) => {
+    const { defaultChecked, onChange, rootClass } = useContext(RadioCardsContext);
+    return <RadioGroupPrimitive.Item className={clsx(`${rootClass}-item`, className)} {...props}>{children}</RadioGroupPrimitive.Item>;
+};
+
+export default RadioCardsItem;

src/components/ui/RadioCards/fragments/RadioCardsRoot.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import RadioGroupPrimitive from '~/core/primitives/RadioGroup/RadioGroupPrimitive';
+
+import clsx from 'clsx';
+import { customClassSwitcher } from '~/core';
+
+import { RadioCardsContext } from '../context/RadioCardsContext';
+
+const COMPONENT_NAME = 'RadioCards';
+
+type RadioCardsRootProps = {
+    children: React.ReactNode;
+    className?: string;
+    defaultChecked?: string | null;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    customRootClass?: string;
+};
+
+const RadioCardsRoot = ({ children, className = '', defaultChecked = null, onChange = null, customRootClass = '' }: RadioCardsRootProps) => {
+    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
+
+    return <RadioCardsContext.Provider value={{ defaultChecked, rootClass, onChange }}>
+        <RadioGroupPrimitive.Root className={clsx(rootClass, className)} customRootClass={customRootClass}>{children}</RadioGroupPrimitive.Root>
+    </RadioCardsContext.Provider>;
+};
+
+export default RadioCardsRoot;

src/components/ui/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,36 @@
+import RadioGroup from './RadioGroup';
+import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+import { useState } from 'react';
+
+const RadioButton = (args) => {
+    const options = [
+        { id: 'html', value: 'html', label: 'HTML' },
+        { id: 'css', value: 'css', label: 'CSS' },
+        { id: 'javascript', value: 'javascript', label: 'JavaScript' }];
+
+    const [language, setLanguage] = useState('css');
+
+    const handleChange = (e) => {
+        setLanguage(e.target.value);
+    };
+    return (
+        <SandboxEditor>
+            <RadioGroup.Root defaultChecked={language} items={options} onChange={handleChange} >
+                {options.map((option) => (
+                    <RadioGroup.Item key={option.id} value={option.value}>
+                        {option.label}
+                    </RadioGroup.Item>
+                ))}
+            </RadioGroup.Root>
+        </SandboxEditor>
+    );
+};
+
+export default {
+    title: 'Components/RadioGroup',
+    component: RadioGroup,
+    render: (args) => <RadioButton {...args}/>
+};
+
+export const All = {};
+All.args = {};

src/components/ui/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import RadioGroupRoot from './fragments/RadioGroupRoot';
+import RadioGroupItem from './fragments/RadioGroupItem';
+
+const RadioGroup = {} as const;
+
+RadioGroup.Root = RadioGroupRoot;
+RadioGroup.Item = RadioGroupItem;
+
+export default RadioGroup;

src/components/ui/RadioGroup/context/RadioGroupContext.tsx

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+export const RadioGroupContext = createContext({
+    defaultChecked: null,
+    customRootClass: null,
+    onChange: null
+});

src/components/ui/RadioGroup/fragments/RadioGroupItem.tsx

@@ -0,0 +1,11 @@
+import React, { useContext } from 'react';
+import RadioGroupPrimitive from '~/core/primitives/RadioGroup/RadioGroupPrimitive';
+import { RadioGroupContext } from '../context/RadioGroupContext';
+import clsx from 'clsx';
+
+const RadioGroupItem = ({ children, className = '', ...props }: { children: React.ReactNode } & RadioGroupPrimitive.ItemProps) => {
+    const { defaultChecked, onChange, rootClass } = useContext(RadioGroupContext);
+    return <RadioGroupPrimitive.Item className={clsx(`${rootClass}-item`, className)} {...props}>{children}</RadioGroupPrimitive.Item>;
+};
+
+export default RadioGroupItem;

src/components/ui/RadioGroup/fragments/RadioGroupRoot.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import RadioGroupPrimitive from '~/core/primitives/RadioGroup/RadioGroupPrimitive';
+
+import clsx from 'clsx';
+import { customClassSwitcher } from '~/core';
+
+import { RadioGroupContext } from '../context/RadioGroupContext';
+
+const COMPONENT_NAME = 'RadioGroup';
+
+type RadioGroupRootProps = {
+    children: React.ReactNode;
+    className?: string;
+    defaultChecked?: string | null;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    customRootClass?: string;
+};
+
+const RadioGroupRoot = ({ children, className = '', defaultChecked = null, onChange = null, customRootClass = '' }: RadioGroupRootProps) => {
+    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
+
+    return <RadioGroupContext.Provider value={{ defaultChecked, rootClass, onChange }}>
+        <RadioGroupPrimitive.Root className={clsx(rootClass, className)} customRootClass={customRootClass}>{children}</RadioGroupPrimitive.Root>
+    </RadioGroupContext.Provider>;
+};
+
+export default RadioGroupRoot;