refactor: simplify field components (#1756)

refactor: simplify fields

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/components/fields/Checkbox.tsx

@@ -1,4 +1,5 @@
 import type { FC, ReactNode } from 'react';
+import { cn } from '../../utils/cn';
 import { Tooltip } from './Tooltip';
 
 export interface ICheckbox {
@@ -26,10 +27,10 @@ export const Checkbox: FC<ICheckbox> = (props: ICheckbox) => {
         <div className="flex items-center ml-3">
           <label
             htmlFor={props.name}
-            className="font-medium text-gitify-font cursor-pointer"
-            style={
-              props.disabled ? { textDecoration: 'line-through' } : undefined
-            }
+            className={cn(
+              'font-medium text-gitify-font cursor-pointer',
+              props.disabled && 'line-through',
+            )}
           >
             {props.label}
           </label>

src/renderer/components/fields/FieldLabel.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { FieldLabel, type IFieldLabel } from './FieldLabel';
+
+describe('renderer/components/fields/FieldLabel.tsx', () => {
+  const props: IFieldLabel = {
+    name: 'appearance',
+    label: 'Appearance',
+  };
+
+  it('should render', () => {
+    const tree = render(<FieldLabel {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+});

src/renderer/components/fields/FieldLabel.tsx

@@ -0,0 +1,14 @@
+import type { FC } from 'react';
+
+export interface IFieldLabel {
+  name: string;
+  label: string;
+}
+
+export const FieldLabel: FC<IFieldLabel> = (props: IFieldLabel) => {
+  return (
+    <label htmlFor={props.name} className="mr-3 font-medium cursor-pointer">
+      {props.label}
+    </label>
+  );
+};

src/renderer/components/fields/RadioGroup.tsx

@@ -1,64 +1,43 @@
 import type { ChangeEvent, FC } from 'react';
 import type { RadioGroupItem } from '../../types';
-import { cn } from '../../utils/cn';
+import { FieldLabel } from './FieldLabel';
 
 export interface IRadioGroup {
   name: string;
   label: string;
   options: RadioGroupItem[];
   value: string;
-  disabled?: boolean;
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-  className?: string;
 }
 
 export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
   return (
-    <div className={cn('mt-3 mb-2 text-sm', props.className)}>
-      <div className="flex items-start">
-        <div className="mr-3">
-          <label
-            htmlFor={props.name}
-            className="font-medium text-gitify-font"
-            style={
-              props.disabled ? { textDecoration: 'line-through' } : undefined
-            }
-          >
-            {props.label}
-          </label>
-        </div>
+    <div className="flex items-start my-2 text-sm font-medium">
+      <FieldLabel name={props.name} label={props.label} />
 
-        <div
-          className="flex items-center space-x-4"
-          role="group"
-          aria-labelledby={props.name}
-        >
-          {props.options.map((item) => {
-            return (
-              <div
-                className="flex items-center"
-                key={`radio_item_${item.value.toLowerCase()}`}
-              >
-                <input
-                  type="radio"
-                  className="size-4 cursor-pointer"
-                  id={`${props.name}_${item.value.toLowerCase()}`}
-                  name={props.name}
-                  value={item.value}
-                  onChange={props.onChange}
-                  checked={item.value === props.value}
-                  disabled={props.disabled}
-                />
-                <label
-                  htmlFor={`${props.name}_${item.value.toLowerCase()}`}
-                  className="ml-3 block text-sm font-medium text-gitify-font cursor-pointer"
-                >
-                  {item.label}
-                </label>
-              </div>
-            );
-          })}
-        </div>
+      <div
+        className="flex items-center space-x-4"
+        role="group"
+        aria-labelledby={props.name}
+      >
+        {props.options.map((item) => {
+          const name = `${props.name}_${item.value.toLowerCase()}`;
+
+          return (
+            <div className="flex items-center gap-2" key={name}>
+              <input
+                type="radio"
+                className="size-4 cursor-pointer"
+                id={name}
+                name={props.name}
+                value={item.value}
+                onChange={props.onChange}
+                checked={item.value === props.value}
+              />
+              <FieldLabel name={name} label={item.label} />
+            </div>
+          );
+        })}
       </div>
     </div>
   );