diff --git a/package-lock.json b/package-lock.json
index 147e2f3..f993cfa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,8 +11,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",
@@ -48,9 +46,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",
@@ -1981,47 +1981,6 @@
}
}
},
- "node_modules/@radix-ui/react-form": {
- "version": "0.1.0",
- "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.1.0.tgz",
- "integrity": "sha512-1/oVYPDjbFILOLIarcGcMKo+y6SbTVT/iUKVEw59CF4offwZgBgC3ZOeSBewjqU0vdA6FWTPWTN63obj55S/tQ==",
- "dependencies": {
- "@radix-ui/primitive": "1.1.0",
- "@radix-ui/react-compose-refs": "1.1.0",
- "@radix-ui/react-context": "1.1.0",
- "@radix-ui/react-id": "1.1.0",
- "@radix-ui/react-label": "2.1.0",
- "@radix-ui/react-primitive": "2.0.0"
- },
- "peerDependencies": {
- "@types/react": "*",
- "@types/react-dom": "*",
- "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
- "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
- },
- "peerDependenciesMeta": {
- "@types/react": {
- "optional": true
- },
- "@types/react-dom": {
- "optional": true
- }
- }
- },
- "node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-context": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
- "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
- "peerDependencies": {
- "@types/react": "*",
- "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
- },
- "peerDependenciesMeta": {
- "@types/react": {
- "optional": true
- }
- }
- },
"node_modules/@radix-ui/react-id": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
@@ -2040,29 +1999,6 @@
}
}
},
- "node_modules/@radix-ui/react-label": {
- "version": "2.1.0",
- "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.0.tgz",
- "integrity": "sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==",
- "license": "MIT",
- "dependencies": {
- "@radix-ui/react-primitive": "2.0.0"
- },
- "peerDependencies": {
- "@types/react": "*",
- "@types/react-dom": "*",
- "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
- "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
- },
- "peerDependenciesMeta": {
- "@types/react": {
- "optional": true
- },
- "@types/react-dom": {
- "optional": true
- }
- }
- },
"node_modules/@radix-ui/react-popper": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
@@ -3180,6 +3116,29 @@
"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
},
+ "node_modules/@utrecht/checkbox-group-react": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/@utrecht/checkbox-group-react/-/checkbox-group-react-1.0.0.tgz",
+ "integrity": "sha512-LswvhqrwPZnR9fIwgZFcBorNuoagliv7O/XGw5/BT973OJuSLH0nn592s4ZRWmoElmGeOWmR1+HJVbsNag62bQ==",
+ "dev": true,
+ "dependencies": {
+ "clsx": "2.1.1"
+ },
+ "peerDependencies": {
+ "@babel/runtime": "*",
+ "react": "18",
+ "react-dom": "18"
+ }
+ },
+ "node_modules/@utrecht/checkbox-group-react/node_modules/clsx": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+ "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+ "dev": true,
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/@utrecht/component-library-css": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@utrecht/component-library-css/-/component-library-css-6.1.0.tgz",
@@ -3234,6 +3193,29 @@
"dev": true,
"license": "SEE LICENSE IN ./LICENSE.md"
},
+ "node_modules/@utrecht/radio-group-react": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/@utrecht/radio-group-react/-/radio-group-react-1.0.1.tgz",
+ "integrity": "sha512-1a92Eaxn8UrPz1g0Up4hBNcHBI2/Oba5lcIHFQIfgEtEENGLndz6r0pEJjshMUTKs7IhgpMuhAuJa4KfTg/Y6A==",
+ "dev": true,
+ "dependencies": {
+ "clsx": "2.1.1"
+ },
+ "peerDependencies": {
+ "@babel/runtime": "*",
+ "react": "18",
+ "react-dom": "18"
+ }
+ },
+ "node_modules/@utrecht/radio-group-react/node_modules/clsx": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+ "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+ "dev": true,
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/@vitejs/plugin-react": {
"version": "4.3.3",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.3.tgz",
diff --git a/package.json b/package.json
index 0dd1019..3581795 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/[locale]/incident/add/components/questions/CheckboxInput.tsx b/src/app/[locale]/incident/add/components/questions/CheckboxInput.tsx
index 07ae0a6..5ed9cc9 100644
--- a/src/app/[locale]/incident/add/components/questions/CheckboxInput.tsx
+++ b/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 (
-
-
- {field.meta.label}{' '}
- {field.required ? '' : `(${t('not_required_short')})`}
- {field.meta.subtitle && {field.meta.subtitle} }
-
- {errorMessage && (
-
- {errorMessage}
-
- )}
- {Object.keys(field.meta.values).map((key: string) => (
-
-
-
- {field.meta.values[key]}
-
-
- ))}
-
+ {
+ 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}
+ >
)
}
diff --git a/src/app/[locale]/incident/add/components/questions/LocationSelect.tsx b/src/app/[locale]/incident/add/components/questions/LocationSelect.tsx
index 7188365..fae72fb 100644
--- a/src/app/[locale]/incident/add/components/questions/LocationSelect.tsx
+++ b/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(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 (
-
- {errorMessage &&
{errorMessage} }
-
- {field ? field.meta.label : 'Waar is het?'}
-
+
+
+ {field
+ ? `${field.meta.label} (${t('required_short')})`
+ : `${t('map_label')} (${t('required_short')})`}
+
+
+ {Boolean(errorMessage) && errorMessage && (
+ {errorMessage}
+ )}
+
{address}
@@ -75,7 +83,6 @@ export const LocationSelect = ({ field }: LocationSelectProps) => {
/>
- {/* TODO: toon locatie, straatnaam bijv. */}
-
+
)
}
diff --git a/src/app/[locale]/incident/add/components/questions/PlainText.tsx b/src/app/[locale]/incident/add/components/questions/PlainText.tsx
index 18865d6..a95913e 100644
--- a/src/app/[locale]/incident/add/components/questions/PlainText.tsx
+++ b/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 ? (
-
+
) : (
<>>
)
diff --git a/src/app/[locale]/incident/add/components/questions/RadioInput.tsx b/src/app/[locale]/incident/add/components/questions/RadioInput.tsx
index 30ba54d..e873972 100644
--- a/src/app/[locale]/incident/add/components/questions/RadioInput.tsx
+++ b/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 (
-
-
- {field.meta.label}{' '}
- {field.required ? '' : `(${t('not_required_short')})`}
- {field.meta.subtitle && {field.meta.subtitle} }
-
-
- {errorMessage && (
-
- {errorMessage}
-
- )}
-
- {Object.keys(field.meta.values).map((key: string) => (
-
-
-
- {field.meta.values[key]}
-
-
- ))}
-
+ {
+ 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}
+ >
)
}
diff --git a/src/app/[locale]/incident/add/components/questions/TextAreaInput.tsx b/src/app/[locale]/incident/add/components/questions/TextAreaInput.tsx
index bc2a4d8..d87eb68 100644
--- a/src/app/[locale]/incident/add/components/questions/TextAreaInput.tsx
+++ b/src/app/[locale]/incident/add/components/questions/TextAreaInput.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 { FormFieldTextarea } from '@/components/index'
interface TextAreaInputProps extends QuestionField {}
@@ -17,30 +17,20 @@ export const TextAreaInput = ({ field }: TextAreaInputProps) => {
return (
- {errorMessage && (
-
- {errorMessage}
-
- )}
-
- {field.meta.label}{' '}
- {field.required ? '' : `(${t('not_required_short')})`}
-
- {field.meta.subtitle && (
-
{field.meta.subtitle}
- )}
-
)
diff --git a/src/app/[locale]/incident/add/components/questions/TextInput.tsx b/src/app/[locale]/incident/add/components/questions/TextInput.tsx
index e010577..2ed1519 100644
--- a/src/app/[locale]/incident/add/components/questions/TextInput.tsx
+++ b/src/app/[locale]/incident/add/components/questions/TextInput.tsx
@@ -3,7 +3,7 @@ import React from 'react'
import { useTranslations } from 'next-intl'
import { getValidators } from '@/lib/utils/form-validator'
import { useFormContext } from 'react-hook-form'
-import { Paragraph } from '@/components/index'
+import { FormFieldTextbox } from '@/components'
interface TextInputProps extends QuestionField {}
@@ -17,30 +17,16 @@ export const TextInput = ({ field }: TextInputProps) => {
return (
- {errorMessage && (
-
- {errorMessage}
-
- )}
-
- {field.meta.label}{' '}
- {field.required ? '' : `(${t('not_required_short')})`}
-
- {field.meta.subtitle && (
-
{field.meta.subtitle}
- )}
-
)
diff --git a/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx b/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx
index 83e3ab3..059a8aa 100644
--- a/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx
+++ b/src/app/[locale]/incident/components/IncidentDescriptionForm.tsx
@@ -1,14 +1,6 @@
'use client'
import * as z from 'zod'
-import {
- Form,
- FormControl,
- FormField,
- FormItem,
- FormMessage,
- FormDescription,
-} from '@/components/ui/Form'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { useTranslations } from 'next-intl'
@@ -28,8 +20,13 @@ import {
MIN_FILE_SIZE,
} from '@/components/ui/upload/FileUpload'
-import { FormFieldTextarea } from '@utrecht/component-library-react/dist/css-module'
-import { Label } from '@amsterdam/design-system-react'
+import { FormFieldTextarea } from '@/components/index'
+import {
+ Fieldset,
+ FieldsetLegend,
+ FormFieldDescription,
+ FormFieldErrorMessage,
+} from '@/components/index'
export const IncidentDescriptionForm = () => {
const t = useTranslations('describe-report.form')
@@ -131,54 +128,43 @@ export const IncidentDescriptionForm = () => {
}
return (
-
+
+
+
+
)
}
diff --git a/src/app/[locale]/incident/components/IncidentDescriptionPage.tsx b/src/app/[locale]/incident/components/IncidentDescriptionPage.tsx
index d0a0fa1..29b1e3e 100644
--- a/src/app/[locale]/incident/components/IncidentDescriptionPage.tsx
+++ b/src/app/[locale]/incident/components/IncidentDescriptionPage.tsx
@@ -3,7 +3,7 @@
import { useTranslations } from 'next-intl'
import { useFormStore } from '@/store/form_store'
import { Heading, Paragraph, HeadingGroup, PreHeading } from '@/components'
-import { Alert, Link } from '@utrecht/component-library-react/dist/css-module'
+import { Alert, Link } from '@/components'
import { IncidentDescriptionForm } from '@/app/[locale]/incident/components/IncidentDescriptionForm'
const currentStep = 1
diff --git a/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx b/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx
index 8da8d23..e14b130 100644
--- a/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx
+++ b/src/app/[locale]/incident/contact/components/IncidentContactForm.tsx
@@ -7,23 +7,22 @@ import { useRouter } from '@/routing/navigation'
import * as z from 'zod'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
-import {
- Form,
- FormControl,
- FormField,
- FormItem,
- FormLabel,
- FormMessage,
-} from '@/components/ui/Form'
import validator from 'validator'
-import { Input } from '@/components/ui/Input'
-import { Checkbox } from '@/components/ui/Checkbox'
import { useFormStore } from '@/store/form_store'
import { useEffect } from 'react'
-import { Paragraph, Heading } from '@/components/index'
+import {
+ Fieldset,
+ FieldsetLegend,
+ FormFieldCheckbox,
+ FormFieldDescription,
+ FormFieldTextbox,
+ Heading,
+ Paragraph,
+} from '@/components/index'
const IncidentContactForm = () => {
const t = useTranslations('describe-contact.form')
+ const tGeneral = useTranslations('general.describe_form')
const { updateForm, formState } = useFormStore()
const { addOneStep, setLastCompletedStep } = useStepperStore()
const router = useRouter()
@@ -35,11 +34,21 @@ const IncidentContactForm = () => {
const incidentContactFormSchema = z.object({
phone: z
.string()
- .refine(validator.isMobilePhone, t('errors.number_not_valid'))
- .optional()
- .nullable(),
- email: z.string().email(t('errors.email_not_valid')).optional().nullable(),
- sharing_allowed: z.boolean().optional(),
+ .refine(
+ (value) => value == '' || validator.isMobilePhone(value),
+ t('errors.number_not_valid')
+ )
+ .nullable()
+ .optional(),
+ email: z
+ .string()
+ .refine(
+ (value) => value == '' || validator.isEmail(value),
+ t('errors.email_not_valid')
+ )
+ .nullable()
+ .optional(),
+ sharing_allowed: z.boolean(),
})
const form = useForm>({
@@ -67,76 +76,53 @@ const IncidentContactForm = () => {
return (
-
-
-
-
{t('heading')}
-
{t('description')}
-
- (
-
-
- {t('describe_phone_input_heading')}
-
-
-
-
-
-
- )}
- />
- (
-
-
- {t('describe_mail_input_heading')}
-
-
-
-
-
-
- )}
- />
-
+
+
{t('heading')}
+
{t('description')}
+
+
+
+
+
+
{t('send_to_other_instance_heading')}
- {t('send_to_other_instance_description')}
-
-
-
(
-
-
-
-
-
- {t('describe_checkbox_input_description')}
-
-
- )}
- />
+
+
+
+ {t('send_to_other_instance_description')}
+
+
+
+
-
-
-
+
+
+
)
}
diff --git a/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx b/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx
index b5fed32..45a5a2c 100644
--- a/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx
+++ b/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx
@@ -137,6 +137,10 @@ const IncidentSummaryForm = () => {
? answer.answer
: Array.isArray(answer.answer)
? answer.answer
+ .filter(
+ (singleAnswer) =>
+ singleAnswer !== false && singleAnswer !== 'empty'
+ )
.map((singleAnswer) => singleAnswer.label)
.join(', ')
: answer.answer.label
@@ -153,9 +157,10 @@ const IncidentSummaryForm = () => {
{t('steps.step_three.edit')}
- {formState.phone === undefined &&
- formState.email === undefined &&
- formState.sharing_allowed === false ? (
+ {formState.phone === '' ||
+ (formState.phone === undefined && formState.email === '') ||
+ (formState.email === undefined &&
+ formState.sharing_allowed === false) ? (
{t('steps.step_three.no_contact_details')}
) : (
<>
@@ -203,7 +208,7 @@ export const IncidentSummaryFormItem = ({
}) => {
return (
-
{title}
+ {value !== '' &&
{title} }
{value !== '' ? (
{value}
) : (
diff --git a/src/components/index.ts b/src/components/index.ts
index 66c7b92..de0e11d 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -5,6 +5,15 @@ export { Select, Container }
export {
Alert,
+ Fieldset,
+ FieldsetLegend,
+ FormField,
+ FormFieldCheckbox,
+ FormFieldDescription,
+ FormFieldErrorMessage,
+ FormFieldTextbox,
+ FormFieldTextarea,
+ FormLabel,
Button,
ButtonGroup,
Heading,
@@ -13,5 +22,10 @@ export {
Image,
Paragraph,
PreHeading,
+ LinkButton,
Icon,
+ RadioButton,
} from '@utrecht/component-library-react/dist/css-module'
+
+export { RadioGroup } from '@utrecht/radio-group-react'
+export { CheckboxGroup } from '@utrecht/checkbox-group-react'
diff --git a/src/components/ui/Form.tsx b/src/components/ui/Form.tsx
deleted file mode 100644
index b32a70b..0000000
--- a/src/components/ui/Form.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as LabelPrimitive from '@radix-ui/react-label'
-import { Slot } from '@radix-ui/react-slot'
-import {
- Controller,
- ControllerProps,
- FieldError,
- FieldPath,
- FieldValues,
- FormProvider,
- useFormContext,
-} from 'react-hook-form'
-
-import { cn } from '@/lib/utils/style'
-import { Label } from '@/components/ui/Label'
-
-const Form = FormProvider
-
-type FormFieldContextValue<
- TFieldValues extends FieldValues = FieldValues,
- TName extends FieldPath
= FieldPath,
-> = {
- name: TName
-}
-
-const FormFieldContext = React.createContext(
- {} as FormFieldContextValue
-)
-
-const FormField = <
- TFieldValues extends FieldValues = FieldValues,
- TName extends FieldPath = FieldPath,
->({
- ...props
-}: ControllerProps) => {
- return (
-
-
-
- )
-}
-
-const useFormField = () => {
- const fieldContext = React.useContext(FormFieldContext)
- const itemContext = React.useContext(FormItemContext)
- const { getFieldState, formState } = useFormContext()
-
- const fieldState = getFieldState(fieldContext.name, formState)
-
- if (!fieldContext) {
- throw new Error('useFormField should be used within ')
- }
-
- const { id } = itemContext
-
- return {
- id,
- name: fieldContext.name,
- formItemId: `${id}-form-item`,
- formDescriptionId: `${id}-form-item-description`,
- formMessageId: `${id}-form-item-message`,
- ...fieldState,
- }
-}
-
-type FormItemContextValue = {
- id: string
-}
-
-const FormItemContext = React.createContext(
- {} as FormItemContextValue
-)
-
-type FormItemProps = {
- error?: FieldError
-} & React.HTMLAttributes
-
-const FormItem = React.forwardRef(
- ({ className, error, ...props }, ref) => {
- const id = React.useId()
-
- return (
-
-
-
- )
- }
-)
-FormItem.displayName = 'FormItem'
-
-const FormLabel = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => {
- const { error, formItemId } = useFormField()
-
- return (
-
- )
-})
-FormLabel.displayName = 'FormLabel'
-const FormControl = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ ...props }, ref) => {
- const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
-
- return (
-
- )
-})
-FormControl.displayName = 'FormControl'
-
-const FormDescription = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => {
- const { formDescriptionId } = useFormField()
-
- return (
-
- )
-})
-FormDescription.displayName = 'FormDescription'
-
-type FormMessageProps = {
- customError?: FieldError
-} & React.HTMLAttributes
-
-const FormMessage = React.forwardRef(
- ({ className, customError, children, ...props }, ref) => {
- const { error, formMessageId } = useFormField()
- const body = customError
- ? String(customError?.message)
- : error
- ? String(error?.message)
- : children
-
- if (!body) {
- return null
- }
-
- return (
-
- {body}
-
- )
- }
-)
-FormMessage.displayName = 'FormMessage'
-
-export {
- useFormField,
- Form,
- FormItem,
- FormControl,
- FormDescription,
- FormMessage,
- FormField,
- FormLabel,
-}
diff --git a/src/components/ui/Label.tsx b/src/components/ui/Label.tsx
deleted file mode 100644
index b7756c7..0000000
--- a/src/components/ui/Label.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as LabelPrimitive from '@radix-ui/react-label'
-import React from 'react'
-import { cn } from '@/lib/utils/style'
-
-const Label = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-))
-Label.displayName = LabelPrimitive.Root.displayName
-
-export { Label }
diff --git a/translations/en.json b/translations/en.json
index aefef84..53c5373 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -14,7 +14,7 @@
"form": {
"describe_textarea_heading": "What is it about?",
"describe_textarea_description": "Do not type personal information in this description. We will ask this of you later in this form.",
- "describe_upload_heading": "Add photos (not required)",
+ "describe_upload_heading": "Add photos",
"describe_upload_description": "Add a photo to clarify the situation (maximum of 5 photos).",
"errors": {
"textarea_required": "This is a required field",
@@ -22,7 +22,9 @@
"file_size_too_large": "File size too large. Each file must be less than 20MB.",
"file_size_too_small": "File size too small. Each file must be at least 30KB.",
"file_limit_exceeded": "Maximum number of files is 3."
- }
+ },
+ "required_short": "required",
+ "not_required_short": "not required"
}
},
"describe-add": {
@@ -35,7 +37,9 @@
}
},
"map": {
- "map_heading": "Choose your location"
+ "map_heading": "Choose your location",
+ "map_label": "Where is the location?",
+ "required_short": "required"
}
},
"describe-contact": {
@@ -45,13 +49,14 @@
"description": "Often we have another question. With this we can solve the problem faster or better. Or we want to explain something. We would then like to give you a call. Or else we e-mail you.\n\nWe only use your phone number and e-mail address for this report.",
"send_to_other_instance_heading": "May we forward your report?",
"send_to_other_instance_description": "Sometimes the municipality cannot do anything. Another organization must then get to work. If so, we can sometimes forward your report. We send your phone number or e-mail address along with it. But we only do that if you agree.",
- "describe_phone_input_heading": "What is your telephone number? (not required)",
- "describe_mail_input_heading": "What is your e-mail address? (not required)",
+ "describe_phone_input_heading": "What is your telephone number?",
+ "describe_mail_input_heading": "What is your e-mail address?",
"describe_checkbox_input_description": "Yes, I give the Municipality of Amsterdam permission to forward my report to other organizations if the report is not intended for the Municipality.",
"errors": {
"number_not_valid": "Use a valid telephone number",
"email_not_valid": "Use a valid mail address"
- }
+ },
+ "not_required_short": "not required"
}
},
"describe-summary": {
@@ -104,12 +109,14 @@
"pre-heading": "Step {current} of {max}",
"back_button": "Back",
"next_button": "Next",
- "submit_button": "Submit"
+ "submit_button": "Submit",
+ "not-required": "This field is not required."
},
"errors": {
"required": "This field is required",
"max_length": "This field has a maximal length of {maxLength} characters",
"not_required_short": "not required",
+ "required_short": "required",
"location_required": "Location is required"
},
"button": {
diff --git a/translations/nl.json b/translations/nl.json
index 54d98ab..73460b2 100644
--- a/translations/nl.json
+++ b/translations/nl.json
@@ -13,8 +13,10 @@
"heading": "Beschrijf uw melding",
"form": {
"describe_textarea_heading": "Waar gaat het om?",
+ "required_short": "verplicht",
+ "not_required_short": "niet verplicht",
"describe_textarea_description": "Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u.",
- "describe_upload_heading": "Foto's toevoegen (niet verplicht)",
+ "describe_upload_heading": "Foto's toevoegen",
"describe_upload_description": "Voeg een foto toe om de situatie te verduidelijken (maximaal 5 foto's).",
"errors": {
"textarea_required": "Dit is een verplicht veld",
@@ -35,7 +37,9 @@
}
},
"map": {
- "map_heading": "Kies uw locatie"
+ "map_heading": "Kies uw locatie",
+ "map_label": "Waar is het?",
+ "required_short": "verplicht"
}
},
"describe-contact": {
@@ -45,13 +49,14 @@
"description": "Vaak hebben we nog een vraag. Daarmee kunnen we het probleem sneller of beter oplossen. Of we willen iets uitleggen. Wij willen u dan graag even bellen. Of anders e-mailen wij u.\n\nWij gebruiken uw telefoonnummer en e-mailadres alléén voor deze melding.",
"send_to_other_instance_heading": "Mogen we uw melding doorsturen?",
"send_to_other_instance_description": "Soms kan de gemeente niets doen. Een andere organisatie moet dan aan het werk. Als dat zo is kunnen wij uw melding soms doorsturen. Wij sturen uw telefoonnummer of e-mailadres mee. Maar dat doen we alleen als u dat goed vindt.",
- "describe_phone_input_heading": "Wat is uw telefoonnummer? (niet verplicht)",
- "describe_mail_input_heading": "Wat is uw e-mailadres? (niet verplicht)",
+ "describe_phone_input_heading": "Wat is uw telefoonnummer?",
+ "describe_mail_input_heading": "Wat is uw e-mailadres?",
"describe_checkbox_input_description": "Ja, ik geef de gemeente Amsterdam toestemming om mijn melding door te sturen naar andere organisaties als de melding niet voor de gemeente is bestemd.",
"errors": {
"number_not_valid": "Gebruik een geldig telefoonnummer",
"email_not_valid": "Gebruik een geldig mailadres"
- }
+ },
+ "not_required_short": "niet verplicht"
}
},
"describe-summary": {
@@ -105,13 +110,15 @@
"pre-heading": "Stap {current} van {max}",
"back_button": "Vorige",
"next_button": "Volgende",
- "submit_button": "Verstuur"
+ "submit_button": "Verstuur",
+ "not-required": "Dit veld is niet verplicht."
},
"errors": {
"required": "Dit veld is verplicht",
"max_length": "Dit veld heeft een maximale lengte van {maxLength} karakters",
"not_required_short": "niet verplicht",
- "location_required": "Locatie is verplicht"
+ "location_required": "Locatie is verplicht",
+ "required_short": "verplicht"
},
"button": {
"upload_file": "Upload bestand",