feat: StudioCodeListEditor - display Numberfield or Checkbox based on value type

frontend/libs/studio-components/src/components/StudioCodelistEditor/StudioCodeListEditor.tsx

@@ -6,7 +6,7 @@ import type { CodeListItem } from './types/CodeListItem';
 import { StudioButton } from '../StudioButton';
 import {
   removeCodeListItem,
-  addEmptyCodeListItem,
+  addNewCodeListItem,
   changeCodeListItem,
   isCodeListEmpty,
 } from './utils';
@@ -110,7 +110,7 @@ function ControlledCodeListEditor({
   const errorMap = useMemo<ValueErrorMap>(() => findCodeListErrors(codeList), [codeList]);
 
   const handleAddButtonClick = useCallback(() => {
-    const updatedCodeList = addEmptyCodeListItem(codeList);
+    const updatedCodeList = addNewCodeListItem(codeList);
     onChange(updatedCodeList);
     onAddOrDeleteItem?.(updatedCodeList);
   }, [codeList, onChange, onAddOrDeleteItem]);

frontend/libs/studio-components/src/components/StudioCodelistEditor/StudioCodeListEditorRow/StudioCodeListEditorRow.tsx

@@ -105,7 +105,7 @@ export function StudioCodeListEditorRow({
   );
 }
 
-type InputCellProps = {
+type TypedInputCellProps = {
   value: CodeListItemValue;
   label: string;
   onChange: (newValue: CodeListItemValue) => void;
@@ -114,7 +114,7 @@ type InputCellProps = {
   error?: string;
 };
 
-function TypedInputCell({ error, label, value, onChange, autoComplete }: InputCellProps) {
+function TypedInputCell({ error, label, value, onChange, autoComplete }: TypedInputCellProps) {
   const ref = useRef<HTMLInputElement>(null);
 
   useEffect((): void => {
@@ -125,45 +125,43 @@ function TypedInputCell({ error, label, value, onChange, autoComplete }: InputCe
     event.target.reportValidity();
   }, []);
 
-  const shouldRenderNumberfield = typeof value === 'number';
-  const shouldRenderCheckbox = typeof value === 'boolean';
-
-  if (shouldRenderNumberfield) {
-    return (
-      <NumberfieldCell
-        label={label}
-        value={value}
-        autoComplete={autoComplete}
-        onChange={onChange}
-        onFocus={handleFocus}
-        ref={ref}
-      />
-    );
-  } else if (shouldRenderCheckbox) {
-    return (
-      <CheckboxCell
-        label={label}
-        value={value}
-        onChange={onChange}
-        onFocus={handleFocus}
-        ref={ref}
-      />
-    );
-  } else {
-    return (
-      <TextfieldCell
-        label={label}
-        value={value}
-        autoComplete={autoComplete}
-        onChange={onChange}
-        onFocus={handleFocus}
-        ref={ref}
-      />
-    );
+  switch (typeof value) {
+    case 'number':
+      return (
+        <NumberfieldCell
+          label={label}
+          value={value}
+          autoComplete={autoComplete}
+          onChange={onChange}
+          onFocus={handleFocus}
+          ref={ref}
+        />
+      );
+    case 'boolean':
+      return (
+        <CheckboxCell
+          label={label}
+          value={value}
+          onChange={onChange}
+          onFocus={handleFocus}
+          ref={ref}
+        />
+      );
+    default:
+      return (
+        <TextfieldCell
+          label={label}
+          value={value}
+          autoComplete={autoComplete}
+          onChange={onChange}
+          onFocus={handleFocus}
+          ref={ref}
+        />
+      );
   }
 }
 
-const NumberfieldCell = forwardRef<HTMLInputElement, InputCellProps>(
+const NumberfieldCell = forwardRef<HTMLInputElement, TypedInputCellProps>(
   ({ label, value, onChange, onFocus, autoComplete }, ref) => {
     const handleNumberChange = useCallback(
       (numberValue: number): void => {
@@ -189,7 +187,7 @@ const NumberfieldCell = forwardRef<HTMLInputElement, InputCellProps>(
 
 NumberfieldCell.displayName = 'NumberfieldCell';
 
-const CheckboxCell = forwardRef<HTMLInputElement, InputCellProps>(
+const CheckboxCell = forwardRef<HTMLInputElement, TypedInputCellProps>(
   ({ label, value, onChange, onFocus }, ref) => {
     const handleBooleanChange = useCallback(
       (event: React.ChangeEvent<HTMLInputElement>): void => {
@@ -215,7 +213,7 @@ const CheckboxCell = forwardRef<HTMLInputElement, InputCellProps>(
 
 CheckboxCell.displayName = 'CheckboxCell';
 
-const TextfieldCell = forwardRef<HTMLInputElement, InputCellProps>(
+const TextfieldCell = forwardRef<HTMLInputElement, TypedInputCellProps>(
   ({ label, value, onChange, onFocus, autoComplete }, ref) => {
     const handleTextChange = useCallback(
       (event: React.ChangeEvent<HTMLInputElement>): void => {

frontend/libs/studio-components/src/components/StudioCodelistEditor/types/TypeofResult.ts

@@ -0,0 +1,9 @@
+export type TypeofResult =
+  | 'string'
+  | 'number'
+  | 'bigint'
+  | 'boolean'
+  | 'symbol'
+  | 'undefined'
+  | 'object'
+  | 'function';

frontend/libs/studio-components/src/components/StudioCodelistEditor/utils.test.ts

@@ -1,6 +1,6 @@
 import type { CodeList } from './types/CodeList';
 import {
-  addEmptyCodeListItem,
+  addNewCodeListItem,
   changeCodeListItem,
   emptyBooleanItem,
   emptyNumberItem,
@@ -29,7 +29,7 @@ describe('StudioCodelistEditor utils', () => {
   describe('addEmptyCodeListItem', () => {
     it('Adds an empty string item when the code list is empty', () => {
       const codeList: CodeList = [];
-      const updatedCodeList = addEmptyCodeListItem(codeList);
+      const updatedCodeList = addNewCodeListItem(codeList);
       expect(updatedCodeList).toEqual([...codeList, emptyStringItem]);
     });
 
@@ -38,7 +38,7 @@ describe('StudioCodelistEditor utils', () => {
         { value: 1, label: 'numberItem' },
         { value: 'two', label: 'stringItem' },
       ];
-      const updatedCodeList = addEmptyCodeListItem(codeList);
+      const updatedCodeList = addNewCodeListItem(codeList);
       expect(updatedCodeList).toEqual([...codeList, emptyStringItem]);
     });
 
@@ -47,7 +47,7 @@ describe('StudioCodelistEditor utils', () => {
         { value: 'one', label: 'stringItem' },
         { value: 2, label: 'numberItem' },
       ];
-      const updatedCodeList = addEmptyCodeListItem(codeList);
+      const updatedCodeList = addNewCodeListItem(codeList);
       expect(updatedCodeList).toEqual([...codeList, emptyNumberItem]);
     });
 
@@ -56,13 +56,13 @@ describe('StudioCodelistEditor utils', () => {
         { value: 0, label: 'numberItem' },
         { value: true, label: 'booleanItem' },
       ];
-      const updatedCodeList = addEmptyCodeListItem(codeList);
+      const updatedCodeList = addNewCodeListItem(codeList);
       expect(updatedCodeList).toEqual([...codeList, emptyBooleanItem]);
     });
 
     it('Returns a new instance', () => {
       const codeList = createTestCodeList();
-      const updatedCodeList = addEmptyCodeListItem(codeList);
+      const updatedCodeList = addNewCodeListItem(codeList);
       expect(updatedCodeList).not.toBe(codeList);
     });
   });

frontend/libs/studio-components/src/components/StudioCodelistEditor/utils.ts

@@ -1,5 +1,6 @@
 import type { CodeListItem } from './types/CodeListItem';
 import type { CodeList } from './types/CodeList';
+import type { TypeofResult } from './types/TypeofResult';
 import { ArrayUtils } from '@studio/pure-functions';
 
 export const emptyStringItem: CodeListItem = {
@@ -17,12 +18,12 @@ export const emptyBooleanItem: CodeListItem = {
   label: '',
 };
 
-export function addEmptyCodeListItem(codeList: CodeList): CodeList {
-  const emptyItem: CodeListItem = getEmptyItem(codeList);
-  return addCodeListItem(codeList, emptyItem);
+export function addNewCodeListItem(codeList: CodeList): CodeList {
+  const newEmptyItem: CodeListItem = getNewEmptyItem(codeList);
+  return addCodeListItem(codeList, newEmptyItem);
 }
 
-function getEmptyItem(codeList: CodeList): CodeListItem {
+function getNewEmptyItem(codeList: CodeList): CodeListItem {
   if (codeList.length === 0) return emptyStringItem;
 
   switch (getTypeOfLastValue(codeList)) {
@@ -35,9 +36,9 @@ function getEmptyItem(codeList: CodeList): CodeListItem {
   }
 }
 
-function getTypeOfLastValue(codeList: CodeList) {
+function getTypeOfLastValue(codeList: CodeList): TypeofResult {
   const lastCodeListItem = codeList[codeList.length - 1];
-  return typeof lastCodeListItem.value as 'string' | 'number' | 'boolean';
+  return typeof lastCodeListItem.value;
 }
 
 function addCodeListItem(codeList: CodeList, item: CodeListItem): CodeList {