feature/CC 7 radio (#17)

* Radio, Radio List, Checkbox update

* Try import on provider

* Remove try

Changelog.md

@@ -1,11 +1,24 @@
 <!-- markdownlint-configure-file { "MD024": { "allow_different_nesting": true } } -->
 # Changelog
 
+## v0.3.0 - Radio (Jan 10 - 2024)
+
+### 👾 Feature
+
+- Radio
+
+### 🐛 Bugs
+
+- Checkbox update
+
 ## v0.2.0 - Checkbox (Jan 10 - 2024)
 
 ### 👾 Feature
 
 - Checkbox
+
+### 🐛 Bugs
+
 - Fix name Dropdown
 - Fix build chromatic
 - New util isValidUrl

package.json

@@ -10,7 +10,7 @@
     "framework design",
     "design system"
   ],
-  "version": "0.2.0",
+  "version": "0.3.0",
   "homepage": "https://github.com/creativecodeco/ui",
   "author": {
     "name": "John Toro",

src/index.ts

@@ -6,6 +6,6 @@ export * from '@/ui/components';
 export * from '@/ui/forms';
 export * from '@/ui/provider';
 
-export * from '@/types';
+export type * from '@/types';
 
 export * from '@/utils';

src/theme/main.css

@@ -4,4 +4,5 @@
 
 @import './avatar.css';
 @import './checkbox.css';
+@import './radio.css';
 @import './text-box.css';

src/theme/radio.css

@@ -0,0 +1,47 @@
+.radio-color {
+  &-primary {
+    @apply radio-primary;
+  }
+
+  &-secondary {
+    @apply radio-secondary;
+  }
+
+  &-accent {
+    @apply radio-accent;
+  }
+
+  &-success {
+    @apply radio-success;
+  }
+
+  &-warning {
+    @apply radio-warning;
+  }
+
+  &-info {
+    @apply radio-info;
+  }
+
+  &-error {
+    @apply radio-error;
+  }
+}
+
+.radio-size {
+  &-xs {
+    @apply radio-xs;
+  }
+
+  &-sm {
+    @apply radio-sm;
+  }
+
+  &-md {
+    @apply radio-md;
+  }
+
+  &-lg {
+    @apply radio-lg;
+  }
+}

src/types/ui/base/constants.types.ts

@@ -1 +1,10 @@
 export type SizeType = 'xs' | 'sm' | 'md' | 'lg';
+export type ColorType =
+  | 'primary'
+  | 'secondary'
+  | 'accent'
+  | 'success'
+  | 'warning'
+  | 'info'
+  | 'error';
+export type PositionType = 'left' | 'right';

src/types/ui/components/avatar.types.ts

@@ -1,4 +1,4 @@
-import { SizeType } from '@/types';
+import type { SizeType } from '@/types';
 
 export interface AvatarType {
   src: string;

src/types/ui/forms/checkbox.types.ts

@@ -1,24 +1,25 @@
-import type { ErrorType, SizeType } from '@/types';
+import type { ColorType, ErrorType, PositionType, SizeType } from '@/types';
 
-export interface CheckboxType extends ErrorType {
+export interface CheckboxItemType {
+  label?: string;
+  checked?: boolean;
+  value: string | number;
+}
+
+export interface CheckboxType extends CheckboxItemType, ErrorType {
   name: string;
 
   label?: string;
   checked?: boolean;
 
-  position?: 'left' | 'right';
-  color?:
-    | 'primary'
-    | 'secondary'
-    | 'accent'
-    | 'success'
-    | 'warning'
-    | 'info'
-    | 'error';
+  position?: PositionType;
+  color?: ColorType;
 
   size?: SizeType;
 
   disabled?: boolean;
+
+  onChange?: (value: CheckboxItemType) => void;
 }
 
 export type CheckboxRef = HTMLInputElement;

src/types/ui/forms/index.ts

@@ -1,3 +1,4 @@
 export type * from './checkbox.types';
 export type * from './dropdown.types';
+export type * from './radio.types';
 export type * from './text-box.types';

src/types/ui/forms/radio.types.ts

@@ -0,0 +1,29 @@
+import type { ColorType, ErrorType, PositionType, SizeType } from '@/types';
+
+export interface RadioItemType {
+  label?: string;
+  checked?: boolean;
+  value?: string | number;
+}
+
+export interface RadioType extends RadioItemType, ErrorType {
+  name: string;
+
+  label?: string;
+  checked?: boolean;
+
+  position?: PositionType;
+  color?: ColorType;
+
+  size?: SizeType;
+
+  disabled?: boolean;
+
+  onChange?: (value: RadioItemType) => void;
+}
+
+export type RadioRef = HTMLInputElement;
+
+export interface RadioListType extends RadioType {
+  options: Omit<RadioType, 'name'>[];
+}

src/ui/forms/checkbox/checkbox.component.tsx

@@ -1,37 +1,48 @@
 import React, { forwardRef } from 'react';
 import cls from 'classnames';
 
-import type { CheckboxRef, CheckboxType } from '@/types';
+import type { CheckboxItemType, CheckboxRef, CheckboxType } from '@/types';
 
 const Checkbox = forwardRef<CheckboxRef, CheckboxType>(
   (
     {
       name,
       label,
       isError,
-      checked,
       disabled,
       error,
       position = 'left',
       color,
       size = 'md',
+      checked,
+      value,
+      onChange,
       ...otherProps
     },
     ref
   ) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      onChange?.({
+        isChecked: e.target.checked,
+        value,
+        label
+      } as CheckboxItemType);
+    };
+
     const checkbox = () => (
       <input
         id={name}
         name={name}
         data-testid={name}
         ref={ref}
         type='checkbox'
-        checked={checked}
         className={cls('checkbox', {
           [`checkbox-color-${color}`]: color,
           [`checkbox-size-${size}`]: size
         })}
         disabled={disabled}
+        checked={checked}
+        onChange={handleChange}
         {...otherProps}
       />
     );

src/ui/forms/checkbox/checkbox.test.tsx

@@ -1,17 +1,25 @@
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
+
+import type { CheckboxType } from '@/types';
+
 import Checkbox from './checkbox.component';
 
+const baseProps: CheckboxType = {
+  name: 'test',
+  value: 'test'
+};
+
 describe('<Checkbox />', () => {
   it('snapshot', () => {
-    const { container } = render(<Checkbox name='test' />);
+    const { container } = render(<Checkbox {...baseProps} />);
 
     expect(container).toMatchSnapshot();
   });
 
   it('snapshot full props', () => {
     const { container } = render(
       <Checkbox
-        name='test'
+        {...baseProps}
         checked
         color='primary'
         size='lg'
@@ -28,48 +36,60 @@ describe('<Checkbox />', () => {
 
   it('label', () => {
     const label = 'Hello Word';
-    const { getByText } = render(<Checkbox name='test' label={label} />);
+    const { getByText } = render(<Checkbox {...baseProps} label={label} />);
 
     expect(getByText(label)).toBeInTheDocument();
   });
 
   it('with error', () => {
     const error = 'Error message';
     const { getByText } = render(
-      <Checkbox name='test' isError error={error} />
+      <Checkbox {...baseProps} isError error={error} />
     );
 
     expect(getByText(error)).toBeInTheDocument();
   });
 
   it('disabled', () => {
-    const { getByTestId } = render(<Checkbox name='test' disabled />);
+    const { getByTestId } = render(<Checkbox {...baseProps} disabled />);
 
     expect(getByTestId('test')).toHaveProperty('disabled', true);
   });
 
   it('position right', () => {
     const label = 'Hello Word';
     const { getByText } = render(
-      <Checkbox name='test' label={label} position='right' />
+      <Checkbox {...baseProps} label={label} position='right' />
     );
 
     expect(getByText(label)).toBeInTheDocument();
   });
 
   it('color', () => {
-    const { container } = render(<Checkbox name='test' color='primary' />);
+    const { container } = render(<Checkbox {...baseProps} color='primary' />);
 
     expect(container.querySelector('input')?.className).toEqual(
       'checkbox checkbox-color-primary checkbox-size-md'
     );
   });
 
   it('size', () => {
-    const { container } = render(<Checkbox name='test' size='lg' />);
+    const { container } = render(<Checkbox {...baseProps} size='lg' />);
 
     expect(container.querySelector('input')?.className).toEqual(
       'checkbox checkbox-size-lg'
     );
   });
+
+  it('onChange', () => {
+    const onChange = jest.fn();
+
+    const { getByRole } = render(
+      <Checkbox {...baseProps} size='lg' onChange={onChange} />
+    );
+
+    fireEvent.click(getByRole('checkbox'));
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
 });

src/ui/forms/dropdown/dropdown.test.tsx

@@ -1,9 +1,9 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 
-import Dropdown from './dropdown.component';
-
 import type { DropdownOption } from '@/types';
 
+import Dropdown from './dropdown.component';
+
 const options = Array.from({ length: 5 }).map<DropdownOption>((_, index) => ({
   value: index,
   label: `Option ${index}`

src/ui/forms/index.ts

@@ -1,3 +1,5 @@
 export * from '@/ui/forms/checkbox';
 export * from '@/ui/forms/dropdown';
+export * from '@/ui/forms/radio';
+export * from '@/ui/forms/radio-list';
 export * from '@/ui/forms/text-box';