refactor: gebruik NL Design System componenten voor stap 1

.npmrc

@@ -0,0 +1,2 @@
+save-exact=true
+save-prefix=

package.json

@@ -17,7 +17,7 @@
     "@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",
+    "@radix-ui/react-visually-hidden": "1.1.0",
     "@types/lodash": "4.17.10",
     "axios-retry": "3.9.1",
     "class-variance-authority": "0.7.0",
@@ -43,11 +43,15 @@
   "devDependencies": {
     "@testing-library/dom": "10.4.0",
     "@testing-library/react": "16.0.1",
+    "@amsterdam/design-system-react": "0.11.1",
     "@types/node": "20",
     "@types/react": "18",
     "@types/react-dom": "18",
     "@types/validator": "13.12.2",
     "@vitejs/plugin-react": "4.3.3",
+    "@utrecht/component-library-css": "6.1.0",
+    "@utrecht/component-library-react": "7.2.0",
+    "@utrecht/design-tokens": "2.1.1",
     "autoprefixer": "10.4.20",
     "axios": "1.7.7",
     "eslint": "9",

src/app/[locale]/incident/add/page.tsx

@@ -1,13 +1,14 @@
 import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
 import { IncidentQuestionsLocationForm } from '@/app/[locale]/incident/add/components/IncidentQuestionsLocationForm'
+import { Heading1 } from '@utrecht/component-library-react/dist/css-module'
 
 export default function AddAditionalInformationPage() {
   const t = useTranslations('describe-add')
   const messages = useMessages()
 
   return (
     <div className="flex flex-col gap-4">
-      <h1>{t('heading')}</h1>
+      <Heading1>{t('heading')}</Heading1>
       <NextIntlClientProvider messages={messages}>
         <IncidentQuestionsLocationForm />
       </NextIntlClientProvider>

src/app/[locale]/incident/components/IncidentDescriptionForm.tsx

@@ -7,14 +7,11 @@ import {
   FormField,
   FormItem,
   FormMessage,
-  FormLabel,
   FormDescription,
 } from '@/components/ui/Form'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useTranslations } from 'next-intl'
-import { Textarea } from '@/components/ui/TextArea'
-import { Input } from '@/components/ui/Input'
 import { IncidentFormFooter } from '@/app/[locale]/incident/components/IncidentFormFooter'
 import { useStepperStore } from '@/store/stepper_store'
 import { useRouter } from '@/routing/navigation'
@@ -23,6 +20,9 @@ import { getCategoryForDescription } from '@/services/classification'
 import { debounce } from 'lodash'
 import { useFormStore } from '@/store/form_store'
 
+import { FormFieldTextarea } from '@utrecht/component-library-react/dist/css-module'
+import { FileInput, Label } from '@amsterdam/design-system-react'
+
 export const IncidentDescriptionForm = () => {
   const t = useTranslations('describe-report.form')
   const { updateForm, formState } = useFormStore()
@@ -89,35 +89,37 @@ export const IncidentDescriptionForm = () => {
           name={'description'}
           control={form.control}
           render={({ field, formState: { errors } }) => (
-            <FormItem error={errors.description}>
-              <div>
-                <FormLabel>{t('describe_textarea_heading')}</FormLabel>
-                <FormDescription>
-                  {t('describe_textarea_description')}
-                </FormDescription>
-                <FormMessage />
-              </div>
-              <FormControl>
-                <Textarea rows={5} {...field} />
-              </FormControl>
-            </FormItem>
+            <FormFieldTextarea
+              rows={5}
+              description={t('describe_textarea_description')}
+              label={t('describe_textarea_heading')}
+              errorMessage={errors.description?.message}
+              invalid={Boolean(errors.description?.message)}
+              {...field}
+            />
           )}
         />
+
         <FormField
           name={'files'}
           control={form.control}
           render={({ field, formState: { errors } }) => (
             <FormItem>
               <div>
-                <FormLabel>{t('describe_upload_heading')}</FormLabel>
+                <Label>{t('describe_upload_heading')}</Label>
                 <FormDescription>
                   {t('describe_upload_description')}
                 </FormDescription>
                 <FormMessage />
               </div>
               <FormControl>
                 {/* TODO: put onChange handler on file upload, or provide defaultValue (bind to react-hook-form). To prevent error */}
-                <Input type="file" value="" onChange={() => 'test'} />
+                <FileInput
+                  type="file"
+                  value=""
+                  onChange={() => 'test'}
+                  multiple
+                />
               </FormControl>
             </FormItem>
           )}

src/app/[locale]/incident/components/IncidentFormFooter.tsx

@@ -66,12 +66,6 @@ const IncidentFormFooter = ({
           </Button>
         )}
       </div>
-      <p className="text-light_text">
-        Lukt het niet om een melding te doen? Bel het telefoonnummer 14 020
-        <br />
-        Wij zijn bereikbaar van maandag tot en met vrijdag van 08.00 tot 18.00
-        uur.
-      </p>
     </>
   )
 }

src/app/[locale]/incident/components/Stepper.tsx

@@ -1,11 +1,15 @@
 'use client'
 
 import { useTranslations } from 'next-intl'
-import { Link, Paths, usePathname } from '@/routing/navigation'
+import { Paths, usePathname } from '@/routing/navigation'
 import { useStepperStore } from '@/store/stepper_store'
 import { useEffect, useRef } from 'react'
-import { Button } from '@/components/ui/Button'
 import { useFormStore } from '@/store/form_store'
+import {
+  Button,
+  Link,
+  Paragraph,
+} from '@utrecht/component-library-react/dist/css-module'
 
 type StepperProps = {}
 
@@ -107,13 +111,13 @@ export const Stepper = ({}: StepperProps) => {
                 >
                   {index + 1}
                 </div>
-                <p
+                <Paragraph
                   className={`${
                     step == index + 1 ? 'text-xl font-semibold -ml-3' : ''
                   } md:block hidden transition duration-100 group-hover:underline group-focus:underline`}
                 >
                   {item.name}
-                </p>
+                </Paragraph>
               </Link>
             )
           })}

src/app/[locale]/incident/page.tsx

@@ -1,5 +1,11 @@
 import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
 import { IncidentDescriptionForm } from '@/app/[locale]/incident/components/IncidentDescriptionForm'
+import {
+  Heading1,
+  Paragraph,
+  Alert,
+  Link,
+} from '@utrecht/component-library-react/dist/css-module'
 
 export default async function Home() {
   return <IncidentDescriptionPage />
@@ -12,7 +18,18 @@ function IncidentDescriptionPage() {
   return (
     <>
       <div className="flex flex-col gap-4">
-        <h1>{t('heading')}</h1>
+        <Heading1>{t('heading')}</Heading1>
+        <Alert>
+          <Paragraph>
+            Lukt het niet om een melding te doen? Bel het telefoonnummer
+            <Link href="tel:14 020"> 14 020.</Link>
+          </Paragraph>
+          <Paragraph>
+            Wij zijn bereikbaar van maandag tot en met vrijdag van 08:00 tot
+            18:00 uur.
+          </Paragraph>
+        </Alert>
+
         <NextIntlClientProvider messages={messages}>
           <IncidentDescriptionForm />
         </NextIntlClientProvider>