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) => ( -
- - -
- ))} -
+ { + 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} (${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 ? ( -
+ {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) => ( -
- - -
- ))} -
+ { + 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.subtitle && ( - {field.meta.subtitle} - )} -