feat(ui): DOMA-12433 allow Checkbox to receive value and export Checkbox.Group, to make it all work in forms (#6776)

* feat(ui): DOMA-12433 allow Checkbox to receive value and export Checkbox.Group, to make it all work in forms

* refactor(ui): DOMA-12433 move CheckboxGroup to another file and disable unneded props for it

* chore(ui): DOMA-12433 fix typos

* chore(resident-app): DOMA-12433 remove "key" prop

* chore(resident-app): DOMA-12433 add Radio.Group, add id, className in his props, deprecate old export RadioGroup

* chore(ui): DOMA-12433 fighting with sonarcloud

Author: YEgorLu

packages/ui/src/components/Checkbox/checkbox.tsx

@@ -25,7 +25,8 @@ export type CheckboxProps = Pick<DefaultCheckboxProps,
 | 'className'
 | 'onMouseLeave'
 | 'onMouseEnter'
-| 'tabIndex'> & CondoCheckboxProps
+| 'tabIndex'
+| 'value'> & CondoCheckboxProps
 
 const Checkbox: React.FC<CheckboxProps> = (props) => {
     const {

packages/ui/src/components/Checkbox/checkboxGroup.tsx

@@ -0,0 +1,26 @@
+import { Checkbox as DefaultCheckbox } from 'antd'
+import React from 'react'
+
+import type { ComponentProps } from 'react'
+
+const DefaultCheckboxGroup = DefaultCheckbox.Group
+type DefaultCheckboxGroupProps = ComponentProps<typeof DefaultCheckboxGroup>
+
+export type CheckboxGroupProps = Pick<DefaultCheckboxGroupProps,
+'children'
+| 'className'
+| 'name'
+| 'disabled'
+| 'onChange'
+| 'defaultValue'
+| 'value'>
+
+const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>((props, ref) => {
+    return <DefaultCheckboxGroup ref={ref} {...props}>{props.children}</DefaultCheckboxGroup>
+})
+
+CheckboxGroup.displayName = 'CheckboxGroup'
+
+export {
+    CheckboxGroup,
+}

packages/ui/src/components/Checkbox/index.ts

@@ -1,5 +1,13 @@
-import { Checkbox } from './checkbox'
+import { Checkbox as CheckboxComponent } from './checkbox'
+import { CheckboxGroup } from './checkboxGroup'
 import './style.less'
 
+type CheckboxType = typeof CheckboxComponent & {
+    Group: typeof CheckboxGroup
+}
+
+const Checkbox = CheckboxComponent as CheckboxType
+Checkbox.Group = CheckboxGroup
+
 export type { CheckboxProps } from './checkbox'
 export { Checkbox }

packages/ui/src/components/Radio/index.ts

@@ -1,8 +1,22 @@
-import { Radio } from './radio'
+import { Radio as RadioComponent } from './radio'
 import { RadioGroup } from './radiogroup'
 import './style.less'
 
+type RadioType = typeof RadioComponent & {
+    Group: typeof RadioGroup
+} 
+
+const Radio = RadioComponent as RadioType
+Radio.Group = RadioGroup
+
+/** @deprecated we will remove this import in next major release, use {@link Radio.Group} instead */
+const DeprecatedRadioGroup = RadioGroup
+
 export type { RadioProps } from './radio'
 export type { RadioGroupProps, ItemGroupProps } from './radiogroup'
-export { Radio, RadioGroup }
+
+export {
+    Radio,
+    DeprecatedRadioGroup as RadioGroup,
+}
 

packages/ui/src/components/Radio/radio.tsx

@@ -18,11 +18,7 @@ type CondoRadioProps = {
 export type RadioProps = Pick<DefaultRadioProps, 'autoFocus' | 'defaultChecked' | 'disabled' | 'onChange' | 'checked' | 'value' | 'children' | 'id'>
 & CondoRadioProps
 
-export interface IRadio {
-    (props: RadioProps): React.ReactElement
-}
-
-const Radio: IRadio = (props) => {
+const Radio: React.FC<RadioProps> = (props) => {
     const { label, icon, labelProps, disabled, onChange, children, id, ...rest } = props
 
     const handleChange = useCallback((event: RadioChangeEvent) => {

packages/ui/src/components/Radio/radiogroup.tsx

@@ -19,7 +19,7 @@ export type ItemGroupProps = {
     options: Array<ItemGroupOptionType>
 }
 
-export type RadioGroupProps = Pick<DefaultRadioGroupProps, 'value' | 'onChange' | 'disabled' | 'children' | 'optionType' | 'defaultValue'>
+export type RadioGroupProps = Pick<DefaultRadioGroupProps, 'id' | 'className' | 'value' | 'onChange' | 'disabled' | 'children' | 'optionType' | 'defaultValue'>
 
 type CompoundedComponent = React.FC<RadioGroupProps> & {
     ItemGroup: React.FC<ItemGroupProps>