Merge pull request #698 from thomasm0/forms-developers-amsterdam

Front-end/docs - Add Forms.developers.amsterdam

Author: tomootes

docs/front-end/index.mdx

@@ -34,21 +34,21 @@ import DocCardList from '@theme/DocCardList';
     linkLabel="Naar de tutorial"
   />
 
-<Card
-  appearance="default"
-  description="Wil je snel bouwen met rijkshuisstijl componenten? Volg dan deze tutorial."
-  heading="Getting started: Rijkshuisstijl Community"
-  href="https://rijkshuisstijl-community.vercel.app/?path=/docs/react-components-readme--docs"
-  linkLabel="React componenten docs"
-/>
-
-<Card
-  appearance="default"
-  description="Monitor je project continu op de WCAG-toegankelijkheidseisen."
-  heading="Voeg een Github action toe voor accessibility"
-  href="./standaarden/digitoegankelijk/run-axe"
-  linkLabel="Voeg een Github action toe"
-/>
+  <Card
+    appearance="default"
+    description="Wil je snel bouwen met rijkshuisstijl componenten? Volg dan deze tutorial."
+    heading="Getting started: Rijkshuisstijl Community"
+    href="https://rijkshuisstijl-community.vercel.app/?path=/docs/react-components-readme--docs"
+    linkLabel="React componenten docs"
+  />
+
+  <Card
+    appearance="default"
+    description="Monitor je project continu op de WCAG-toegankelijkheidseisen."
+    heading="Voeg een Github action toe voor accessibility"
+    href="./standaarden/digitoegankelijk/run-axe"
+    linkLabel="Voeg een Github action toe"
+  />
 
   <Card
     appearance="default"
@@ -57,6 +57,14 @@ import DocCardList from '@theme/DocCardList';
     href="./maps-developers-amsterdam"
     linkLabel="Naar het artikel"
   />
+
+  <Card
+    appearance="default"
+    heading="Werken met formulieren en React Hook Form"
+    description="Gemeente Amsterdam biedt een developer omgeving met code examples."
+    href="./forms-developers-amsterdam"
+    linkLabel="Naar het artikel"
+  />
 </Grid>
 
 <br />

docs/front-end/tools/forms-developers-amsterdam/index.mdx

@@ -0,0 +1,34 @@
+---
+tags:
+  - "front-end"
+  - "formulieren"
+  - "amsterdam"
+  - "react"
+  - "react-hook-form"
+title: "Forms.developers.amsterdam"
+sidebar_position: 1
+---
+
+Forms.developers.amsterdam biedt een collectie demo's en code-examples van hoe
+je in een front-end met <b>HTML5</b>, <b>React Hook Form</b> en/of <b>React</b>
+formulieren kan bouwen.
+
+Alle voorbeelden zijn opgebouwd met Amsterdamse kaarten maar de voorbeelden zijn
+generieke use-cases van kaarten in front-ends.
+
+Alle voorbeelden zijn gebaseerd op veelvoorkomende formulierpatronen binnen de
+Gemeente Amsterdam. De demo’s lopen van een eenvoudige Contact Form, via een
+Booking Form (met conditionele tijdvalidatie), tot een geavanceerd Backstage
+Entity-formulier (repeaters, conditionele velden en autocomplete), inclusief
+technieken voor schema-validatie met <b>Zod</b>.
+
+## Rationale keuze voor React Hook Form
+
+Het bevat ook een
+[uitgebreide afweging](https://forms.developers.amsterdam/?path=/docs/docs-alternative-solutions--docs)
+waarom gemeente Amsterdam heeft gekozen voor React Hook Form.
+
+<Link href="https://forms.developers.amsterdam">
+  Naar forms.developers.amsterdam
+  <Icon icon="pijl-naar-rechts" />
+</Link>

…-end/maps-developers-amsterdam/index.mdx …ools/maps-developers-amsterdam/index.mdxdocs/front-end/maps-developers-amsterdam/index.mdx renamed to docs/front-end/tools/maps-developers-amsterdam/index.mdx docs/front-end/maps-developers-amsterdam/index.mdx renamed to docs/front-end/tools/maps-developers-amsterdam/index.mdx

@@ -8,6 +8,7 @@ tags:
   - "amsterdam"
   - "react"
 title: "Maps.developers.amsterdam"
+sidebar_position: 2
 ---
 
 Maps.developers.amsterdam biedt een collectie demo's en code-examples van hoe je

tags.yml

@@ -22,14 +22,13 @@ architecture:
   description: Software- en systeemarchitectuur
   label: Architectuur
 argo-cd:
-  description:
-    Argo CD is een declaratieve, GitOps-gebaseerde continuous delivery tool voor
-    Kubernetes.
+  description: Argo CD is een declaratieve, GitOps-gebaseerde continuous delivery
+    tool voor Kubernetes.
   label: Argo CD
 asyncapi:
-  description:
-    AsyncAPI is een standaard om asynchrone berichtuitwisselingen te beschrijven
-    analoog aan hoe Open API Specification(OAS) dit doet voor REST APIs
+  description: AsyncAPI is een standaard om asynchrone berichtuitwisselingen te
+    beschrijven analoog aan hoe Open API Specification(OAS) dit doet voor REST
+    APIs
   label: AsyncAPI
 avg:
   description: Algemene verordening gegevensbescherming (AVG)
@@ -56,16 +55,15 @@ cli:
 cloudevents:
   label: CloudEvents
 common-ground:
-  description:
-    Common Ground is een initiatief van de Vereniging van Nederlandse Gemeenten
-    (VNG) dat leidde tot een toekomstbestendige architectuurvisie.
+  description: Common Ground is een initiatief van de Vereniging van Nederlandse
+    Gemeenten (VNG) dat leidde tot een toekomstbestendige architectuurvisie.
   label: Common Ground
 community:
   label: Community
 containerization:
-  description:
-    Containerization is het proces waarbij applicaties en hun afhankelijkheden
-    worden geïsoleerd in gestandaardiseerde eenheden (containers).
+  description: Containerization is het proces waarbij applicaties en hun
+    afhankelijkheden worden geïsoleerd in gestandaardiseerde eenheden
+    (containers).
   label: Containerization
 data-bij-de-bron:
   description: Het principe Data bij de Bron
@@ -74,19 +72,17 @@ dcat:
   label: DCAT
 dependabot:
   label: dependabot
-  description:
-    Dependabot is een geautomatiseerde service van GitHub die je helpt bij het
-    bijhouden van dependencies in je project.
+  description: Dependabot is een geautomatiseerde service van GitHub die je helpt
+    bij het bijhouden van dependencies in je project.
 design-system:
   label: Design System
 developer.overheid.nl:
   label: developer.overheid.nl
 development:
   label: Development
 devops:
-  description:
-    DevOps (een samentrekking van "development" en "operations") is een gebruik
-    en een praktijk binnen softwareontwikkeling die tot doel heeft
+  description: DevOps (een samentrekking van "development" en "operations") is een
+    gebruik en een praktijk binnen softwareontwikkeling die tot doel heeft
     softwareontwikkeling (Dev) en softwareoperaties (Ops) samen te brengen.
   label: DevOps
 digid:
@@ -95,35 +91,29 @@ digid:
 digikoppeling:
   label: Digikoppeling
 digitale-autonomie:
-  description:
-    Digitale autonomie is het principe dat de overheid zelf de regie heeft over
-    haar digitale infrastructuur en data.
+  description: Digitale autonomie is het principe dat de overheid zelf de regie
+    heeft over haar digitale infrastructuur en data.
   label: Digitale autonomie
 digitale-soevereiniteit:
-  description:
-    Digitale soevereiniteit is het principe van het beschikken over zeggenschap,
-    invloed, regie en keuzevrijheid over digitale systemen.
+  description: Digitale soevereiniteit is het principe van het beschikken over
+    zeggenschap, invloed, regie en keuzevrijheid over digitale systemen.
   label: Digitale soevereiniteit
 docker:
-  description:
-    Docker is een platform voor het bouwen, distribueren en draaien van
+  description: Docker is een platform voor het bouwen, distribueren en draaien van
     applicaties in individuele containers
   label: Docker
 eherkenning:
-  description:
-    eHerkenning is het zakelijke inlogmiddel voor bedrijven om veilig toegang te
-    krijgen tot digitale overheidsdiensten.
+  description: eHerkenning is het zakelijke inlogmiddel voor bedrijven om veilig
+    toegang te krijgen tot digitale overheidsdiensten.
   label: eHerkenning
 eidas:
-  description:
-    eIDAS is een Europese verordening die zorgt voor grensoverschrijdende
-    herkenning van elektronische identiteiten
+  description: eIDAS is een Europese verordening die zorgt voor
+    grensoverschrijdende herkenning van elektronische identiteiten
   label: eIDAS
 eu:
   label: Europe
 eda:
-  description:
-    Event Driven Architecture (EDA) is een architectuurparadigma waarin
+  description: Event Driven Architecture (EDA) is een architectuurparadigma waarin
     componenten communiceren door het detecteren, publiceren, en verwerken van
     events (gebeurtenissen), zodat systemen loosely coupled, schaalbaar en
     responsief zijn.
@@ -134,20 +124,20 @@ edi:
   label: Europese Digitale Identiteit (EDI)
 fds:
   description: "Het FDS is een vertrouwensraamwerk met afspraken, standaarden,
-    voorzieningen en  stelselfuncties. \_"
+    voorzieningen en  stelselfuncties.  "
   label: Federatief Data Stelsel
 fieldlab:
   description: Fieldlab
   label: Fieldlab
 flux:
-  description:
-    Flux CD is een GitOps tool voor Kubernetes die automatische deployment en
-    synchronisatie van applicaties mogelijk maakt.
+  description: Flux CD is een GitOps tool voor Kubernetes die automatische
+    deployment en synchronisatie van applicaties mogelijk maakt.
   label: Flux
 forum-standaardisatie:
   label: Forum Standaardisatie
 formatting:
-  description: Formatting is het automatisch opmaken van code volgens afgesproken stijlregels
+  description: Formatting is het automatisch opmaken van code volgens afgesproken
+    stijlregels
   label: Formatting
 foss:
   description: Free and Open Source Software
@@ -185,9 +175,8 @@ gouden-api:
   label: Gouden API
 haven:
   label: "Haven"
-  description:
-    "Haven is een open source standaard met criteria en best practices voor hoe
-    je Kubernetes gebruikt."
+  description: "Haven is een open source standaard met criteria en best practices
+    voor hoe je Kubernetes gebruikt."
 helm:
   description: Helm is een package manager voor Kubernetes
   label: Helm
@@ -198,10 +187,10 @@ htmx:
   description: HTMX.
   label: HTMX
 iam:
-  description: 
-    "Identity & Access Management is het raamwerk van processen en technologieën dat regelt
-    wie toegang krijgt tot welke digitale informatie e systemen, op welk moment, om welke reden.
-    Het gaat om 'Wie ben je? en 'Wat mag je doen?', in het kader van beveiliging."
+  description: "Identity & Access Management is het raamwerk van processen en
+    technologieën dat regelt wie toegang krijgt tot welke digitale informatie e
+    systemen, op welk moment, om welke reden. Het gaat om 'Wie ben je? en 'Wat
+    mag je doen?', in het kader van beveiliging."
   label: IAM
 identity:
   description: Identity management en toegangsbeheer
@@ -234,9 +223,9 @@ kiesraad:
 kubernetes:
   label: Kubernetes
 ldv:
-  description:
-    Logboek Dataverwerkingen is een standaard die beschrijft hoe je logging kan
-    vastleggen waarmee je kan verantwoorden hoe data tot stand is gekomen
+  description: Logboek Dataverwerkingen is een standaard die beschrijft hoe je
+    logging kan vastleggen waarmee je kan verantwoorden hoe data tot stand is
+    gekomen
   label: Logboek Dataverwerkingen
 leaflet:
   description: Leaflet JavaScript library voor interactieve kaarten
@@ -286,9 +275,8 @@ notificaties:
   label: Notificaties
 npm:
   label: npm
-  description:
-    NPM staat voor 'Node Package Manager' is het standaard package management
-    systeem voor Node.js.
+  description: NPM staat voor 'Node Package Manager' is het standaard package
+    management systeem voor Node.js.
 nvm:
   label: NVM
 oas:
@@ -299,9 +287,8 @@ oauth:
 odata:
   label: OData
 ogc:
-  description:
-    Open Geospatial Consortium is de internationale standaarden organisatie voor
-    interoperabele open Geo standaarden
+  description: Open Geospatial Consortium is de internationale standaarden
+    organisatie voor interoperabele open Geo standaarden
   label: Open Geospatial Consortium
 oidc:
   description: OpenID Connect is een identity layer bovenop OAuth 2.0
@@ -321,15 +308,13 @@ owasp:
 owl:
   label: OWL
 pkio:
-  description:
-    PKIOverheid is de publieke infrastructuur voor digitale certificaten van de
-    Nederlandse overheid.
+  description: PKIOverheid is de publieke infrastructuur voor digitale
+    certificaten van de Nederlandse overheid.
   label: PKIOverheid
 pnpm:
   label: pnpm
-  description:
-    PNPM (Performant NPM) is een alternatieve package manager voor Node.js, net
-    als NPM en Yarn, maar met een slimmere aanpak.
+  description: PNPM (Performant NPM) is een alternatieve package manager voor
+    Node.js, net als NPM en Yarn, maar met een slimmere aanpak.
 portal:
   label: Portal
 privacy:
@@ -352,9 +337,15 @@ rdfa:
 rdfs:
   description: RDF Schema
   label: RDFS
+formulieren:
+  description: Formulieren en form-validatie in front-end applicaties
+  label: Forms
 react:
   description: React JavaScript library voor user interfaces
   label: React
+react-hook-form:
+  description: React Hook Form library voor formulierbeheer
+  label: React Hook Form
 release:
   label: Release
 rest:
@@ -374,9 +365,8 @@ security-by-design:
   label: Security by Design
   description: Het principe om beveiliging vanaf het begin in het ontwerp mee te nemen.
 seo:
-  description:
-    Search Engine Optimalization is het doen van aanpassingen die er voor zorgen
-    dat jouw content (on)vindbaar is in zoekmachines op het internet
+  description: Search Engine Optimalization is het doen van aanpassingen die er
+    voor zorgen dat jouw content (on)vindbaar is in zoekmachines op het internet
   label: Search Engine Optimalization
 shacl:
   description: Shapes Constraint Language
@@ -387,9 +377,8 @@ skos:
 typescript:
   label: TypeScript
 technische-schuld:
-  description:
-    Een metafoor voor de situatie waarin eerder gemaakte keuzes de software in
-    de toekomst moeilijker te wijzigen maken
+  description: Een metafoor voor de situatie waarin eerder gemaakte keuzes de
+    software in de toekomst moeilijker te wijzigen maken
   label: Technische schuld
 uml:
   description: Unified Modeling Language