[questions][ui] remove ui-patch components

apps/portal/src/components/questions/ContributeQuestionForm.tsx

@@ -3,7 +3,14 @@ import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { CalendarDaysIcon, UserIcon } from '@heroicons/react/24/outline';
 import type { QuestionsQuestionType } from '@prisma/client';
-import { Button, Collapsible, Select, TextArea, TextInput } from '@tih/ui';
+import {
+  Button,
+  CheckboxInput,
+  Collapsible,
+  Select,
+  TextArea,
+  TextInput,
+} from '@tih/ui';
 
 import { QUESTION_TYPES } from '~/utils/questions/constants';
 import {
@@ -11,7 +18,6 @@ import {
   useSelectRegister,
 } from '~/utils/questions/useFormRegister';
 
-import Checkbox from './ui-patch/Checkbox';
 import CompaniesTypeahead from '../shared/CompaniesTypeahead';
 import type { Month } from '../shared/MonthYearPicker';
 import MonthYearPicker from '../shared/MonthYearPicker';
@@ -148,10 +154,11 @@ export default function ContributeQuestionForm({
       </div> */}
       <div className="bg-primary-50 fixed bottom-0 left-0 w-full px-4 py-3 sm:flex sm:flex-row sm:justify-between sm:px-6">
         <div className="mb-1 flex">
-          <Checkbox
-            checked={canSubmit}
+          <CheckboxInput
             label="I have checked that my question is new"
-            onChange={handleCheckSimilarQuestions}></Checkbox>
+            value={canSubmit}
+            onChange={handleCheckSimilarQuestions}
+          />
         </div>
         <div className=" flex gap-x-2">
           <button

apps/portal/src/components/questions/filter/FilterSection.tsx

@@ -1,8 +1,5 @@
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
-import { Collapsible, TextInput } from '@tih/ui';
-
-import Checkbox from '../ui-patch/Checkbox';
-import RadioGroup from '../ui-patch/RadioGroup';
+import { CheckboxInput, Collapsible, RadioList, TextInput } from '@tih/ui';
 
 export type FilterOption<V extends string = string> = {
   checked: boolean;
@@ -66,17 +63,27 @@ export default function FilterSection<
             />
           )}
           {isSingleSelect ? (
-            <RadioGroup
-              radioData={options}
+            <RadioList
+              label=""
+              value={options.find((option) => option.checked)?.value}
               onChange={(value) => {
                 onOptionChange(value);
-              }}></RadioGroup>
+              }}>
+              {options.map((option) => (
+                <RadioList.Item
+                  key={option.value}
+                  label={option.label}
+                  value={option.value}
+                />
+              ))}
+            </RadioList>
           ) : (
             <div className="mx-1">
               {options.map((option) => (
-                <Checkbox
+                <CheckboxInput
                   key={option.value}
-                  {...option}
+                  label={option.label}
+                  value={option.checked}
                   onChange={(checked) => {
                     onOptionChange(option.value, checked);
                   }}

apps/portal/src/components/questions/ui-patch/Checkbox.tsx

@@ -1,25 +0,0 @@
-import { useId } from 'react';
-
-export type CheckboxProps = {
-  checked: boolean;
-  label: string;
-  onChange: (checked: boolean) => void;
-};
-
-export default function Checkbox({ label, checked, onChange }: CheckboxProps) {
-  const id = useId();
-  return (
-    <div className="flex items-center">
-      <input
-        checked={checked}
-        className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300"
-        id={id}
-        type="checkbox"
-        onChange={(event) => onChange(event.target.checked)}
-      />
-      <label className="ml-3 min-w-0 flex-1 text-gray-700" htmlFor={id}>
-        {label}
-      </label>
-    </div>
-  );
-}

apps/portal/src/components/questions/ui-patch/RadioGroup.tsx

@@ -1,36 +0,0 @@
-export type RadioProps = {
-  onChange: (value: string) => void;
-  radioData: Array<RadioData>;
-};
-
-export type RadioData = {
-  checked: boolean;
-  label: string;
-  value: string;
-};
-
-export default function RadioGroup({ radioData, onChange }: RadioProps) {
-  return (
-    <div className="mx-1 space-y-1">
-      {radioData.map((radio) => (
-        <div key={radio.value} className="flex items-center">
-          <input
-            checked={radio.checked}
-            className="text-primary-600 focus:ring-primary-500 h-4 w-4 border-gray-300"
-            type="radio"
-            value={radio.value}
-            onChange={(event) => {
-              const target = event.target as HTMLInputElement;
-              onChange(target.value);
-            }}
-          />
-          <label
-            className="ml-3 min-w-0 flex-1 text-gray-700"
-            htmlFor={radio.value}>
-            {radio.label}
-          </label>
-        </div>
-      ))}
-    </div>
-  );
-}