refactor: use NL Design System form components

package.json

@@ -13,8 +13,6 @@
     "@hookform/resolvers": "3.9.0",
     "@radix-ui/react-checkbox": "1.1.2",
     "@radix-ui/react-dialog": "1.1.2",
-    "@radix-ui/react-form": "0.1.0",
-    "@radix-ui/react-label": "2.1.0",
     "@radix-ui/react-select": "2.1.2",
     "@radix-ui/react-slot": "1.1.0",
     "@radix-ui/react-visually-hidden": "1.1.0",
@@ -50,9 +48,11 @@
     "@types/react": "18",
     "@types/react-dom": "18",
     "@types/validator": "13.12.2",
+    "@utrecht/checkbox-group-react": "1.0.0",
     "@utrecht/component-library-css": "6.1.0",
     "@utrecht/component-library-react": "7.2.0",
     "@utrecht/design-tokens": "2.1.1",
+    "@utrecht/radio-group-react": "1.0.1",
     "@vitejs/plugin-react": "4.3.3",
     "autoprefixer": "10.4.20",
     "axios": "1.7.7",

src/app/[locale]/incident/add/components/questions/CheckboxInput.tsx

@@ -3,7 +3,7 @@ import { useTranslations } from 'next-intl'
 import { getValidators } from '@/lib/utils/form-validator'
 import React from 'react'
 import { useFormContext } from 'react-hook-form'
-import { Paragraph } from '@/components/index'
+import { CheckboxGroup } from '@/components/index'
 
 interface CheckboxInputProps extends QuestionField {}
 
@@ -17,35 +17,24 @@ export const CheckboxInput = ({ field }: CheckboxInputProps) => {
   const errorMessage = errors[field.key]?.message as string
 
   return (
-    <fieldset aria-invalid={!!errorMessage} data-testid="checkbox-group">
-      <legend>
-        {field.meta.label}{' '}
-        <span> {field.required ? '' : `(${t('not_required_short')})`}</span>
-        {field.meta.subtitle && <span>{field.meta.subtitle}</span>}
-      </legend>
-      {errorMessage && (
-        <Paragraph
-          id={`${field.key}-error`}
-          aria-live="assertive"
-          style={{ color: 'red' }}
-        >
-          {errorMessage}
-        </Paragraph>
-      )}
-      {Object.keys(field.meta.values).map((key: string) => (
-        <div key={key}>
-          <input
-            {...register(`${field.key}.${key}`, getValidators(field, t))}
-            type="checkbox"
-            id={`${field.key}-${key}`}
-            value={key}
-            aria-describedby={errorMessage ? `${field.key}-error` : undefined}
-          />
-          <label htmlFor={`${field.key}-${key}`}>
-            {field.meta.values[key]}
-          </label>
-        </div>
-      ))}
-    </fieldset>
+    <CheckboxGroup
+      label={`${field.meta.label} ${field.required ? `(${t('required_short')})` : `(${t('not_required_short')})`}`}
+      required={field.required}
+      id={`${field.key}`}
+      // @ts-ignore
+      options={Object.keys(field.meta.values).map((key: string) => {
+        return {
+          ...register(field.key, {
+            ...getValidators(field, t),
+          }),
+          label: field.meta.values[key],
+          value: key,
+          id: `${field.key}-${key}`,
+        }
+      })}
+      invalid={Boolean(errorMessage)}
+      errorMessage={errorMessage}
+      description={field.meta.subtitle}
+    ></CheckboxGroup>
   )
 }

src/app/[locale]/incident/add/components/questions/LocationSelect.tsx

@@ -9,8 +9,9 @@ import { useFormStore } from '@/store/form_store'
 import { getNearestAddressByCoordinate } from '@/services/location/address'
 import { useConfig } from '@/hooks/useConfig'
 import { isCoordinates } from '@/lib/utils/map'
-import { Alert } from '@utrecht/component-library-react/dist/css-module'
-import { LinkButton } from '@utrecht/component-library-react'
+import { Fieldset, FieldsetLegend, LinkButton } from '@/components/index'
+import { useTranslations } from 'next-intl'
+import { FormFieldErrorMessage } from '@/components'
 
 export interface LocationSelectProps {
   field?: PublicQuestion
@@ -24,6 +25,7 @@ export const LocationSelect = ({ field }: LocationSelectProps) => {
   const { formState: formStoreState } = useFormStore()
   const [address, setAddress] = useState<string | null>(null)
   const { config } = useConfig()
+  const t = useTranslations('describe-add.map')
 
   useEffect(() => {
     const getAddress = async () => {
@@ -44,11 +46,17 @@ export const LocationSelect = ({ field }: LocationSelectProps) => {
   }, [formStoreState.coordinates])
 
   return (
-    <div className="w-full">
-      {errorMessage && <Alert type="error">{errorMessage}</Alert>}
-      <label htmlFor="location-button">
-        {field ? field.meta.label : 'Waar is het?'}
-      </label>
+    <Fieldset invalid={Boolean(errorMessage)} className="w-full">
+      <FieldsetLegend>
+        {field
+          ? `${field.meta.label} (${t('required_short')})`
+          : `${t('map_label')} (${t('required_short')})`}
+      </FieldsetLegend>
+
+      {Boolean(errorMessage) && errorMessage && (
+        <FormFieldErrorMessage>{errorMessage}</FormFieldErrorMessage>
+      )}
+
       <div className="relative w-full">
         <LocationMap />
         <Paragraph>{address}</Paragraph>
@@ -74,7 +82,6 @@ export const LocationSelect = ({ field }: LocationSelectProps) => {
           />
         </MapProvider>
       </div>
-      {/* TODO: toon locatie, straatnaam bijv. */}
-    </div>
+    </Fieldset>
   )
 }

src/app/[locale]/incident/add/components/questions/PlainText.tsx

@@ -1,17 +1,15 @@
 import { QuestionField } from '@/types/form'
 import Markdown from 'react-markdown'
+import { Alert } from '@/components'
 
 interface PlainTextProps extends QuestionField {}
 
 export const PlainText = ({ field }: PlainTextProps) => {
   // TODO: Discuss if alert is the only used PlainText type in Signalen, style Markdown
   return field.meta.value ? (
-    <div
-      className="bg-red-100 rounded-lg p-4"
-      data-testid="plain-text-hard-stop"
-    >
+    <Alert type="error" data-testid="plain-text-hard-stop">
       <Markdown>{field.meta.value}</Markdown>
-    </div>
+    </Alert>
   ) : (
     <></>
   )

src/app/[locale]/incident/add/components/questions/RadioInput.tsx

@@ -3,7 +3,7 @@ import { useTranslations } from 'next-intl'
 import { QuestionField } from '@/types/form'
 import { getValidators } from '@/lib/utils/form-validator'
 import { useFormContext } from 'react-hook-form'
-import { Paragraph } from '@/components/index'
+import { RadioGroup } from '@/components/index'
 
 interface RadioGroupProps extends QuestionField {}
 
@@ -17,39 +17,24 @@ export const RadioInput = ({ field }: RadioGroupProps) => {
   const errorMessage = errors[field.key]?.message as string
 
   return (
-    <fieldset aria-invalid={!!errorMessage} role="radiogroup">
-      <legend>
-        {field.meta.label}{' '}
-        <span> {field.required ? '' : `(${t('not_required_short')})`}</span>
-        {field.meta.subtitle && <span>{field.meta.subtitle}</span>}
-      </legend>
-
-      {errorMessage && (
-        <Paragraph
-          id={`${field.key}-error`}
-          aria-live="assertive"
-          style={{ color: 'red' }}
-        >
-          {errorMessage}
-        </Paragraph>
-      )}
-
-      {Object.keys(field.meta.values).map((key: string) => (
-        <div key={key}>
-          <input
-            {...register(field.key, {
-              ...getValidators(field, t),
-            })}
-            type="radio"
-            id={`${field.key}-${key}`}
-            value={key}
-            aria-describedby={errorMessage ? `${field.key}-error` : undefined}
-          />
-          <label htmlFor={`${field.key}-${key}`}>
-            {field.meta.values[key]}
-          </label>
-        </div>
-      ))}
-    </fieldset>
+    <RadioGroup
+      label={`${field.meta.label} ${field.required ? `(${t('required_short')})` : `(${t('not_required_short')})`}`}
+      required={field.required}
+      id={`${field.key}`}
+      // @ts-ignore
+      options={Object.keys(field.meta.values).map((key: string) => {
+        return {
+          ...register(field.key, {
+            ...getValidators(field, t),
+          }),
+          label: field.meta.values[key],
+          value: key,
+          id: `${field.key}-${key}`,
+        }
+      })}
+      invalid={Boolean(errorMessage)}
+      errorMessage={errorMessage}
+      description={field.meta.subtitle}
+    ></RadioGroup>
   )
 }