Storybook 7 React migratie

[Robbert]

• Alle files .tsx in plaats van .mdx
• Alle files CSF2 formaat naar CSF3 formaat
  • Storybook React
  • [x] Alert
  • [x] AlertDialog
  • [x] AlternateLangNav
  • [x] Article
  • [x] Backdrop
  • [x] BreadcrumbNav
  • [x] Button
  • [x] ButtonGroup
  • [x] ButtonLink
  • [x] Checkbox
  • [x] Code
  • [x] CodeBlock
  • [x] DataBadge
  • [x] DataList
  • [x] DataListValue
  • [x] Document
  • [x] Emphasis
  • [x] Figure
  • [x] FormField
  • [x] FormFieldCheckbox
  • [x] FormFieldCheckboxGroup
  • [x] FormFieldRadioGroup
  • [x] FormFieldText
  • [x] FormLabel
  • [x] Heading
  • [x] Heading1
  • [x] Heading2
  • [x] Heading3
  • [x] Heading4
  • [x] Heading5
  • [x] Heading6
  • [x] HeadingGroup
  • [x] HTMLContent
  • [x] Icon
  • [x] Image
  • [x] Mark
  • [x] NumberValue
  • [x] Paragraph
  • [x] PreHeading
  • [x] Separator
  • [x] Strong
  • [x] Calendar
  • [x] Introduction
  • [x] Link
  • [x] LinkSocial
  • [x] ListSocial
  • [x] OrderedList
  • [x] OrderedListItem
  • [x] Page
  • [x] PageContent
  • [x] PageFooter
  • [x] PageHeader
  • [x] ProcessSteps
  • [x] RadioButton
  • [x] Select
  • [x] SkipLink
  • [x] SpotlightSection
  • [x] Surface
  • [x] Table

[Robbert]

Storybook voor React componenten

Story schrijven voor React componenten

• Maak teksten van documentatie beschikbaar in een Markdown-bestand (.md), in plaats van in MDX of JSDoc. Markdown kun je als string importeren in TypeScript, als je het hebt ingesteld, en daarna tonen als HTML met componenten van Storybook.
• Schrijf stories van TypeScript componenten ook in TypeScript (tsx). Twee voordelen: 1) je test gelijk de TypeScript annotaties van de component, en 2) TypeScript warnings dat stories aangepast moeten worden na de wijziging van een component zijn een indicatie dat het misschien een breaking change is.
• Volg de TypeScript structuur die beschreven is op de Storybook blog: Improved type safety in Storybook 7
• Gebruik de meest recente Component Story Format (CSF3), waar alle Stories simpelweg een object zijn: Component Story Format 3 is here
• Exporteer de metadata als default export: How to write stories — Default export
• Pas de id van Stories niet zomaar aan: ze worden gebruikt om stories op andere plekken te tonen. ("Cool URI's don't change")
• Gebruik een voorspelbare id: gebruik react als prefix, en gebruik dezelfde slug voor een component als in andere Storybook frameworks. Bijvoorbeeld: react-button, css-button en angular-button.
• Maak bij argTypes duidelijk welke argumenten echt bestaan als Component Prop in React, welke bestaan als HTML attribute of DOM property, en welke argument alleen bestaan voor de Story:
  • Component API met table: { category: 'API' } }
  • Story met table: { category: 'Story' } }
  • HTML attributen met table: { category: 'HTML attribute' } }
• Gebruik de naam van de API als identifier van de story, als het mogelijk is. Bijvoorbeeld: export const Lead voor <Paragraph lead />, of export const AppearanceSubtle voor <Button appearance="subtle" />

[AndreaBusse29]

Finished all component upgrades, created a new issue for the markdown-only story: https://github.com/nl-design-system/utrecht/issues/1707