refactor: getGroups

src/components/ToolContent.tsx

@@ -46,6 +46,9 @@ interface ToolContentProps<Options, Input> extends ToolComponentProps {
     setFieldValue: (fieldName: string, value: any) => void
   ) => ReactNode;
   initialValues: Options;
+  /**
+   * should return non-empty array or null
+   */
   getGroups: GetGroupsType<Options> | null;
   compute: (optionsValues: Options, input: Input) => void;
   toolInfo?: {

src/components/options/ToolOptions.tsx

@@ -6,10 +6,10 @@ import { FormikProps, FormikValues, useFormikContext } from 'formik';
 import ToolOptionGroups, { ToolOptionGroup } from './ToolOptionGroups';
 
 export type UpdateField<T> = <Y extends keyof T>(field: Y, value: T[Y]) => void;
-
+type NonEmptyArray<T> = [T, ...T[]];
 export type GetGroupsType<T> = (
   formikProps: FormikProps<T> & { updateField: UpdateField<T> }
-) => ToolOptionGroup[];
+) => NonEmptyArray<ToolOptionGroup>;
 
 export default function ToolOptions<T extends FormikValues>({
   children,
@@ -50,7 +50,7 @@ export default function ToolOptions<T extends FormikValues>({
       <Box mt={2}>
         <Stack direction={'row'} spacing={2}>
           <ToolOptionGroups
-            groups={getGroups({ ...formikContext, updateField }) ?? []}
+            groups={getGroups({ ...formikContext, updateField }) ?? null}
             vertical={vertical}
           />
           {children}

src/pages/tools/number/generic-calc/index.tsx

@@ -240,6 +240,7 @@ export default async function makeTool(
           description: calcData.longDescription
         }}
         verticalGroups
+        // @ts-ignore
         getGroups={({ values, updateField }) => [
           ...(calcData.presets?.length
             ? [

src/pages/tools/time/check-leap-years/index.tsx

@@ -63,7 +63,7 @@ export default function ConvertDaysToHours({
     setResult(checkLeapYear(input));
   };
 
-  const getGroups: GetGroupsType<InitialValuesType> | null = () => [];
+  const getGroups: GetGroupsType<InitialValuesType> | null = null;
 
   return (
     <ToolContent