UI componenten

Dit document biedt een overzicht van alle UI componenten in het VEMAP design system, georganiseerd volgens de Atomic Design methode.

Componenten architectuur

De VEMAP applicatie volgt een hybride ontwerp dat het Atomic Design Pattern combineert met een Feature architectuur. De UI componenten in de src/components/ui folder maken gebruik van de drie hoofdcategorieën van het Atomic Design Pattern:

• Atoms - Fundamentele bouwstenen
• Molecules - Samengestelde componenten
• Organisms - Complexe interface secties

---

Atoms

Atoms zijn de kleinste, meest fundamentele UI componenten in het design system. Ze zijn herbruikbaar, stateless en vormen de bouwstenen voor complexere componenten.

Componenten

Naam	Parameters	Aantal keer gebruikt	Property Spreader
Button	text?, title?, id, type, class?, isPrimary?, isLoading?, buttonWidth?, isCancel?, disabled?	77	Ja
FormBlockContainer	class?, blockTitle, blockDescription	19	Ja
ContentLoading	loadingText	8	Ja
ItemSelectSearch	class?, label, itemList, listModel	5	Nee
Chart	chartRef, title	38	Nee
WarningMessage	title?	3	Ja
CustomCheckbox	label, id, name, value, model	12	Ja
FormBtnContainer	(geen)	1	Nee
LinkButton	href, text, isLoading, title	1	Ja
SideBarNavItem	href, title	6	Nee
HiddenInput	value, id, class, saveClick, cancelClick	1	Nee
HiddenTextarea	value, id, class, saveClick, cancelClick, rows	1	Nee
InfoBtn	class?	0	Ja
HelpBtn	(geen)	0	Ja
FilterSelect	filterSelectData	0	Nee

---

Molecules

Molecules zijn samengestelde UI componenten die bestaan uit meerdere atoms. Ze vormen functionele groepen die specifieke taken uitvoeren.

Componenten

Naam	Parameters	Aantal keer gebruikt	Property Spreader
FormContainer	(geen)	9	Ja
FileUpload	label, id, srOnly?, required?, highlight?, class?	7	Ja
DateRangePicker	label, id, error	2	Ja
ValidationModal	(geen)	2	Nee
BreadCrumbs	(geen)	2	Nee
ErrorAlert	errors, actions	1	Nee
CommentSection	(geen)	1	Nee
SortSelect	sortSelectData	1	Nee
FilterControlPanel	(geen)	0	Nee
MultiSelect	selectOptionsArr, label, xModel	0	Nee

---

Organisms

Organisms zijn complexe UI componenten die bestaan uit molecules en atoms. Ze vormen complete interface secties zoals headers, modals, en navigatie-elementen.

Naam	Parameters	Aantal keer gebruikt	Property Spreader
Slideover	(geen)	5	Nee
SideBarNav	(geen)	6	Nee
FilePreviewTable	listName, columnNames	3	Ja
Header	(geen)	2	Nee
Notificiation	(geen)	0	Nee
FileModal	(geen)	1	Nee
FormModal	(geen)	0	Nee

---

Legenda

• ? = optionele parameter
• Property Spreader = of het component {...props} gebruikt voor extra properties

Samenvatting

Totaal componenten	32
Met property spreader	12
Zonder property spreader	20
Ongebruikt	7

---

Bestandenstructuur

• Directorycomponents/

  • Directorydashboards/ - Dashboard componenten

    • …
  • Directoryfeatures/ - Feature componenten

    • …
  • Directoryui/

    • Directoryatoms/

      • Button.astro
      • Chart.astro
      • ContentLoading.astro
      • CustomCheckbox.astro
      • FilterSelect.astro
      • FormBlockContainer.astro
      • FormBtnContainer.astro
      • HelpBtn.astro
      • HiddenInput.astro
      • HiddenTextarea.astro
      • InfoBtn.astro
      • ItemSelectSearch.astro
      • LinkButton.astro
      • SideBarNavItem.astro
      • WarningMessage.astro
    • Directorymolecules/

      • BreadCrumbs.astro
      • CommentSection.astro
      • DateRangePicker.astro
      • ErrorAlert.astro
      • FileUpload.astro
      • FilterControlPanel.astro
      • FormContainer.astro
      • MultiSelect.astro
      • SortSelect.astro
      • ValidationModal.astro
    • Directoryorganisms/

      • FileModal.astro
      • FilePreviewTable.astro
      • FormModal.astro
      • Header.astro
      • Notificiation.astro
      • SideBarNav.astro
      • Slideover.astro