feat(FOROME-841): use common radio button instead custom

src/components/view-type-table.tsx

@@ -3,8 +3,7 @@ import { observer } from 'mobx-react-lite'
 
 import { ViewTypeEnum } from '@core/enum/view-type-enum'
 import { t } from '@i18n'
-import { Checkbox } from '@ui/checkbox'
-import { RadioButton } from '@ui/radio-button'
+import { Radio } from '@ui/radio'
 
 interface Props {
   viewType: ViewTypeEnum
@@ -15,24 +14,15 @@ export const ViewTypeTable = observer(
   ({ viewType, setViewType }: Props): ReactElement => (
     <div className="flex items-center text-14 leading-14 mt-3">
       {[ViewTypeEnum.Compact, ViewTypeEnum.Cozy].map(viewTypeItem => (
-        <>
-          {/*<div key={viewTypeItem} className="mr-4 flex items-center">
-            <RadioButton
-              isChecked={viewType === viewTypeItem}
-              onChange={() => setViewType(viewTypeItem)}
-            />
-            <span className="ml-1">{t(`ds.${viewTypeItem}`)}</span>
-          </div>*/}
-          <Checkbox
-            label={t(`ds.${viewTypeItem}`)}
-            checked={viewType === viewTypeItem}
-            id={viewTypeItem}
-            key={viewTypeItem}
-            className="mr-4 flex items-center"
-            lcn="ml-1"
-            onChange={() => setViewType(viewTypeItem)}
-          />
-        </>
+        <Radio
+          checked={viewType === viewTypeItem}
+          id={viewTypeItem}
+          key={viewTypeItem}
+          className="mr-4 flex items-center"
+          onChange={() => setViewType(viewTypeItem)}
+        >
+          <span>{t(`ds.${viewTypeItem}`)}</span>
+        </Radio>
       ))}
     </div>
   ),

src/pages/filter/ui/TableModal.tsx

@@ -13,7 +13,7 @@ import dtreeStore from '@store/dtree'
 import filterStore from '@store/filter'
 import variantStore from '@store/variant'
 import { Icon } from '@ui/icon'
-import { RadioButton } from '@ui/radio-button'
+import { Radio } from '@ui/radio'
 import { VariantBody } from '@components/variant/ui/body'
 import { GlbPagesNames } from '@glb/glb-names'
 import { TCondition } from '@service-providers/common/common.interface'
@@ -207,25 +207,25 @@ export const TableModal = observer(() => {
             <div className="flex w-full overflow-hidden rounded-lg">
               <div className="flex flex-col bg-white rounded-l-lg overflow-auto">
                 <div className="flex px-[14px] py-4">
-                  <div className="flex items-center mr-[14px]">
-                    <RadioButton
-                      isDisabled={variantSize === 'LARGE'}
-                      isChecked={!isSampleMode}
-                      onChange={toggleMode}
-                    />
-
-                    <div className="ml-[6px]">{t('dtree.fullList')}</div>
-                  </div>
-
-                  <div className="flex items-center">
-                    <RadioButton
-                      isDisabled={variantSize === 'SMALL'}
-                      isChecked={isSampleMode}
-                      onChange={toggleMode}
-                    />
-
-                    <p className="ml-[6px]">{t('dtree.samples25')}</p>
-                  </div>
+                  <Radio
+                    id="full-list"
+                    onChange={toggleMode}
+                    disabled={variantSize === 'LARGE'}
+                    checked={!isSampleMode}
+                    className="flex items-center mr-[14px]"
+                  >
+                    {t('dtree.fullList')}
+                  </Radio>
+
+                  <Radio
+                    id="sample-25"
+                    disabled={variantSize === 'SMALL'}
+                    checked={isSampleMode}
+                    onChange={toggleMode}
+                    className="flex items-center"
+                  >
+                    {t('dtree.samples25')}
+                  </Radio>
                 </div>
                 <table className="min-w-full table-auto">
                   <thead>

src/pages/filter/ui/query-builder/ui/final-step.tsx

@@ -5,7 +5,7 @@ import { observer } from 'mobx-react-lite'
 import { t } from '@i18n'
 import dtreeStore from '@store/dtree'
 import { Button } from '@ui/button'
-import { RadioButton } from '@ui/radio-button'
+import { Radio } from '@ui/radio'
 import activeStepStore, {
   ActiveStepOptions,
   CreateEmptyStepPositions,
@@ -72,23 +72,23 @@ export const FinalStep = observer(
               <Step className="mb-2 mt-2">{t('dtree.finalStep')}</Step>
 
               <div className="flex ml-4">
-                <div className="flex items-center mr-3">
-                  <RadioButton
-                    isChecked={!currentStep.excluded}
-                    onChange={() => toggleExclude(index, 'BOOL-TRUE')}
-                  />
-
+                <Radio
+                  id="include-final"
+                  checked={!currentStep.excluded}
+                  onChange={() => toggleExclude(index, 'BOOL-TRUE')}
+                  className="flex items-center mr-3"
+                >
                   <Operation className="ml-1">{t('dtree.include')}</Operation>
-                </div>
-
-                <div className="flex items-center">
-                  <RadioButton
-                    isChecked={currentStep.excluded}
-                    onChange={() => toggleExclude(index, 'BOOL-FALSE')}
-                  />
+                </Radio>
 
-                  <Operation className="ml-1 ">{t('dtree.exclude')}</Operation>
-                </div>
+                <Radio
+                  id="exclude-final"
+                  checked={currentStep.excluded}
+                  onChange={() => toggleExclude(index, 'BOOL-FALSE')}
+                  className="flex items-center mr-3"
+                >
+                  <Operation>{t('dtree.exclude')}</Operation>
+                </Radio>
               </div>
             </div>
             <StepDivider />

src/pages/filter/ui/query-builder/ui/next-step-header.tsx

@@ -8,7 +8,7 @@ import { useToggle } from '@core/hooks/use-toggle'
 import { t } from '@i18n'
 import dtreeStore from '@store/dtree'
 import { Icon } from '@ui/icon'
-import { RadioButton } from '@ui/radio-button'
+import { Radio } from '@ui/radio'
 import { DecisionTreesResultsDataCy } from '@components/data-testid/decision-tree-results.cy'
 import { changeStep } from '@utils/changeStep'
 import { ExpandContentButton } from './expand-content-button'
@@ -95,23 +95,23 @@ export const NextStepHeader = observer(
                 hidden: !currentStep.groups || currentStep.groups.length === 0,
               })}
             >
-              <div className="flex items-center mr-3">
-                <RadioButton
-                  isChecked={!currentStep.excluded}
-                  onChange={() => toggleExclude(index, 'BOOL-TRUE')}
-                />
-
+              <Radio
+                id={`include-${index}`}
+                checked={!currentStep.excluded}
+                onChange={() => toggleExclude(index, 'BOOL-TRUE')}
+                className="flex items-center mr-3"
+              >
                 <Operation className="ml-1">{t('dtree.include')}</Operation>
-              </div>
-
-              <div className="flex items-center">
-                <RadioButton
-                  isChecked={currentStep.excluded}
-                  onChange={() => toggleExclude(index, 'BOOL-FALSE')}
-                />
-
-                <Operation className="ml-1 ">{t('dtree.exclude')}</Operation>
-              </div>
+              </Radio>
+
+              <Radio
+                id={`exclude-${index}`}
+                checked={currentStep.excluded}
+                onChange={() => toggleExclude(index, 'BOOL-FALSE')}
+                className="flex items-center mr-3"
+              >
+                <Operation>{t('dtree.exclude')}</Operation>
+              </Radio>
             </div>
           </div>
 

src/ui/check-input.tsx

@@ -0,0 +1,38 @@
+import React, { FC } from 'react'
+import cn, { Argument } from 'classnames'
+
+export interface ICheckInputProps {
+  checked?: boolean
+  onChange?: () => void
+  className?: Argument
+  disabled?: boolean
+  type?: 'checkbox' | 'radio'
+  lcn?: Argument
+  id: string
+}
+
+export const CheckInput: FC<ICheckInputProps> = ({
+  checked,
+  disabled,
+  onChange,
+  id,
+  className,
+  lcn,
+  type = 'radio',
+  children,
+}) => {
+  return (
+    <div className={cn(className)}>
+      <input
+        type={type}
+        id={id}
+        checked={checked}
+        disabled={disabled}
+        onClick={onChange}
+      />
+      <label htmlFor={id} className={cn(lcn)}>
+        {children}
+      </label>
+    </div>
+  )
+}

src/ui/checkbox.tsx

@@ -1,38 +1,7 @@
 import React, { FC } from 'react'
 
-interface Props {
-  label: string
-  checked: boolean
-  onChange?: () => void
-  className?: string
-  type?: 'checkbox' | 'radio'
-  icn?: string
-  lcn?: string
-  id: string
-}
+import { CheckInput, ICheckInputProps } from '@ui/check-input'
 
-export const Checkbox: FC<Props> = ({
-  checked,
-  label,
-  onChange,
-  id,
-  className,
-  icn,
-  lcn,
-  type = 'radio',
-}) => {
-  return (
-    <div className={className}>
-      <input
-        type={type}
-        id={id}
-        checked={checked}
-        onClick={onChange}
-        className={icn}
-      />
-      <label htmlFor={id} className={lcn}>
-        {label}
-      </label>
-    </div>
-  )
-}
+export const Checkbox: FC<Omit<ICheckInputProps, 'type' | 'lcn'>> = props => (
+  <CheckInput lcn="ml-2" type="checkbox" {...props} />
+)

src/ui/radio.tsx

@@ -0,0 +1,7 @@
+import { FC } from 'react'
+
+import { CheckInput, ICheckInputProps } from '@ui/check-input'
+
+export const Radio: FC<Omit<ICheckInputProps, 'type' | 'lcn'>> = props => (
+  <CheckInput lcn="ml-1" {...props} />
+)