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

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

@@ -20,6 +20,8 @@ import {
   textResources,
 } from './test-data/textResources';
 import type { TextResource } from '../../types/TextResource';
+import { codeListWithNumberValues } from './test-data/codeListWithNumberValues';
+import { codeListWithBooleanValues } from './test-data/codeListWithBooleanValues';
 
 // Test data:
 const onAddOrDeleteItem = jest.fn();
@@ -478,6 +480,92 @@ describe('StudioCodeListEditor', () => {
     await user.click(deleteButton);
     expect(screen.getByRole('table')).toBeInTheDocument();
   });
+
+  describe('Type handling', () => {
+    it('Renders textfield when item value is a string', () => {
+      renderCodeListEditor();
+      const textfield = screen.getByRole('textbox', { name: texts.itemValue(1) });
+      expect(textfield).not.toHaveProperty('inputMode', 'decimal');
+    });
+
+    it('Renders numberfield when item value is a number', () => {
+      renderCodeListEditor({ codeList: codeListWithNumberValues });
+      const numberfield = screen.getByRole('textbox', { name: texts.itemValue(1) });
+      expect(numberfield).toHaveProperty('inputMode', 'decimal');
+    });
+
+    it('Renders checkbox when item value is a boolean', () => {
+      renderCodeListEditor({ codeList: codeListWithBooleanValues });
+      expect(screen.getByRole('checkbox', { name: texts.itemValue(1) })).toBeInTheDocument();
+    });
+
+    it('Saves changed item value as string when initial value was string', async () => {
+      const user = userEvent.setup();
+      renderCodeListEditor();
+
+      const valueInput = screen.getByRole('textbox', { name: texts.itemValue(1) });
+      const changedValue = 'new text';
+      await user.type(valueInput, changedValue);
+      await user.tab();
+
+      expect(onBlurAny).toHaveBeenCalledTimes(1);
+      expect(onBlurAny).toHaveBeenCalledWith([
+        { ...codeListWithoutTextResources[0], value: changedValue },
+        codeListWithoutTextResources[1],
+        codeListWithoutTextResources[2],
+      ]);
+    });
+
+    it('Saves changed item value as number when initial value was number', async () => {
+      const user = userEvent.setup();
+      renderCodeListEditor({ codeList: codeListWithNumberValues });
+
+      const valueInput = screen.getByRole('textbox', { name: texts.itemValue(1) });
+      await user.type(valueInput, '10');
+      await user.tab();
+
+      expect(onBlurAny).toHaveBeenCalledTimes(1);
+      expect(onBlurAny).toHaveBeenCalledWith([
+        { ...codeListWithNumberValues[0], value: 10 },
+        codeListWithNumberValues[1],
+        codeListWithNumberValues[2],
+      ]);
+    });
+
+    it('Saves changed item value as boolean when initial value was boolean', async () => {
+      const user = userEvent.setup();
+      const codeListWithSingleBooleanValue: CodeList = [codeListWithBooleanValues[0]];
+      renderCodeListEditor({ codeList: codeListWithSingleBooleanValue });
+
+      const valueInput = screen.getByRole('checkbox', { name: texts.itemValue(1) });
+      await user.click(valueInput);
+
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange).toHaveBeenCalledWith([{ ...codeListWithBooleanValues[0], value: false }]);
+    });
+
+    it('Numberfield does not change codelist when given string value', async () => {
+      const user = userEvent.setup();
+      renderCodeListEditor({ codeList: codeListWithNumberValues });
+
+      const valueInput = screen.getByRole('textbox', { name: texts.itemValue(1) });
+      await user.type(valueInput, 'not-a-number');
+      await user.tab();
+
+      expect(onBlurAny).toHaveBeenCalledWith([...codeListWithNumberValues]);
+    });
+
+    it('Numberfield does not change codelist when given empty input', async () => {
+      const user = userEvent.setup();
+      renderCodeListEditor({ codeList: codeListWithNumberValues });
+
+      const valueInput = screen.getByRole('textbox', { name: texts.itemValue(1) });
+      await user.clear(valueInput);
+      await user.tab();
+
+      expect(onBlurAny).toHaveBeenCalledWith([...codeListWithNumberValues]);
+    });
+  });
 });
 
 function renderCodeListEditor(props: Partial<StudioCodeListEditorProps> = {}): RenderResult {

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

@@ -3,7 +3,7 @@ import type { CodeListItemValue } from '../types/CodeListItemValue';
 import { StudioInputTable } from '../../StudioInputTable';
 import { TrashIcon } from '../../../../../studio-icons';
 import type { FocusEvent, HTMLInputAutoCompleteAttribute, ReactElement } from 'react';
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { forwardRef, useCallback, useEffect, useRef } from 'react';
 import { changeDescription, changeHelpText, changeLabel, changeValue } from './utils';
 import { useStudioCodeListEditorContext } from '../StudioCodeListEditorContext';
 import type { ValueError } from '../types/ValueError';
@@ -49,7 +49,7 @@ export function StudioCodeListEditorRow({
   );
 
   const handleValueChange = useCallback(
-    (value: string) => {
+    (value: CodeListItemValue) => {
       const updatedItem = changeValue(item, value);
       onChange(updatedItem);
     },
@@ -66,7 +66,7 @@ export function StudioCodeListEditorRow({
 
   return (
     <StudioInputTable.Row>
-      <TextfieldCell
+      <TypedInputCell
         autoComplete='off'
         error={error && texts.valueErrors[error]}
         label={texts.itemValue(number)}
@@ -105,45 +105,139 @@ export function StudioCodeListEditorRow({
   );
 }
 
-type TextfieldCellProps = {
-  error?: string;
-  label: string;
-  onChange: (newString: string) => void;
+type TypedInputCellProps = {
   value: CodeListItemValue;
+  label: string;
+  onChange: (newValue: CodeListItemValue) => void;
+  onFocus?: (event: FocusEvent) => void;
   autoComplete?: HTMLInputAutoCompleteAttribute;
+  error?: string;
 };
 
-function TextfieldCell({ error, label, value, onChange, autoComplete }: TextfieldCellProps) {
+function TypedInputCell({ error, label, value, onChange, autoComplete }: TypedInputCellProps) {
   const ref = useRef<HTMLInputElement>(null);
 
   useEffect((): void => {
     ref.current?.setCustomValidity(error || '');
   }, [error]);
 
-  const handleChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>): void => {
-      onChange(event.target.value);
-    },
-    [onChange],
-  );
-
   const handleFocus = useCallback((event: FocusEvent<HTMLInputElement>): void => {
     event.target.reportValidity();
   }, []);
 
-  return (
-    <StudioInputTable.Cell.Textfield
-      aria-label={label}
-      autoComplete={autoComplete}
-      className={classes.textfieldCell}
-      onChange={handleChange}
-      onFocus={handleFocus}
-      ref={ref}
-      value={(value as string) ?? ''}
-    />
-  );
+  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, TypedInputCellProps>(
+  ({ label, value, onChange, onFocus, autoComplete }, ref) => {
+    const handleNumberChange = useCallback(
+      (numberValue: number): void => {
+        if (numberValue === undefined) return;
+        onChange(numberValue);
+      },
+      [onChange],
+    );
+
+    return (
+      <StudioInputTable.Cell.Numberfield
+        ref={ref}
+        aria-label={label}
+        autoComplete={autoComplete}
+        className={classes.textfieldCell}
+        onChange={handleNumberChange}
+        onFocus={onFocus}
+        value={value as number}
+      />
+    );
+  },
+);
+
+NumberfieldCell.displayName = 'NumberfieldCell';
+
+const CheckboxCell = forwardRef<HTMLInputElement, TypedInputCellProps>(
+  ({ label, value, onChange, onFocus }, ref) => {
+    const handleBooleanChange = useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>): void => {
+        onChange(event.target.checked);
+      },
+      [onChange],
+    );
+
+    return (
+      <StudioInputTable.Cell.Checkbox
+        ref={ref}
+        aria-label={label}
+        onChange={handleBooleanChange}
+        onFocus={onFocus}
+        checked={value as boolean}
+        value={String(value)}
+      >
+        {String(value)}
+      </StudioInputTable.Cell.Checkbox>
+    );
+  },
+);
+
+CheckboxCell.displayName = 'CheckboxCell';
+
+const TextfieldCell = forwardRef<HTMLInputElement, TypedInputCellProps>(
+  ({ label, value, onChange, onFocus, autoComplete }, ref) => {
+    const handleTextChange = useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>): void => {
+        onChange(event.target.value);
+      },
+      [onChange],
+    );
+
+    return (
+      <StudioInputTable.Cell.Textfield
+        ref={ref}
+        aria-label={label}
+        autoComplete={autoComplete}
+        className={classes.textfieldCell}
+        onChange={handleTextChange}
+        onFocus={onFocus}
+        value={value as string}
+      />
+    );
+  },
+);
+
+TextfieldCell.displayName = 'TextfieldCell';
+
 type TextResourceIdCellProps = {
   currentId: string;
   label: string;
@@ -159,7 +253,7 @@ function TextResourceIdCell(props: TextResourceIdCellProps): ReactElement {
   if (textResources) {
     return <TextResourceSelectorCell {...props} textResources={textResources} />;
   } else {
-    return <TextfieldCell label={label} onChange={onChangeCurrentId} value={currentId || ''} />;
+    return <TypedInputCell label={label} onChange={onChangeCurrentId} value={currentId || ''} />;
   }
 }
 

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

@@ -1,4 +1,5 @@
 import type { CodeListItem } from '../types/CodeListItem';
+import type { CodeListItemValue } from '../types/CodeListItemValue';
 
 export function changeLabel(item: CodeListItem, label: string): CodeListItem {
   return { ...item, label };
@@ -8,7 +9,7 @@ export function changeDescription(item: CodeListItem, description: string): Code
   return { ...item, description };
 }
 
-export function changeValue(item: CodeListItem, value: string): CodeListItem {
+export function changeValue(item: CodeListItem, value: CodeListItemValue): CodeListItem {
   return { ...item, value };
 }
 

frontend/libs/studio-components/src/components/StudioCodelistEditor/test-data/codeListWithBooleanValues.ts

@@ -0,0 +1,18 @@
+import type { CodeListItem } from '../types/CodeListItem';
+import type { CodeList } from '../types/CodeList';
+
+const item1: CodeListItem = {
+  description: 'Test 1 description',
+  helpText: 'Test 1 help text',
+  label: 'Test 1',
+  value: true,
+};
+
+const item2: CodeListItem = {
+  description: 'Test 2 description',
+  helpText: 'Test 2 help text',
+  label: 'Test 2',
+  value: false,
+};
+
+export const codeListWithBooleanValues: CodeList = [item1, item2];

frontend/libs/studio-components/src/components/StudioCodelistEditor/test-data/codeListWithNumberValues.ts

@@ -0,0 +1,25 @@
+import type { CodeListItem } from '../types/CodeListItem';
+import type { CodeList } from '../types/CodeList';
+
+const item1: CodeListItem = {
+  description: 'Positive number',
+  helpText: 'Test 1 help text',
+  label: 'Test 1',
+  value: 1,
+};
+
+const item2: CodeListItem = {
+  description: 'Decimal',
+  helpText: 'Test 2 help text',
+  label: 'Test 2',
+  value: 3.14,
+};
+
+const item3: CodeListItem = {
+  description: 'Negative number',
+  helpText: 'Test 3 help text',
+  label: 'Test 3',
+  value: -1,
+};
+
+export const codeListWithNumberValues: CodeList = [item1, item2, item3];

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';