feat(storybook): setup chromatic

[remypar5]

Dingen om op te letten:

• de pipeline faalt. Dit is eerste opzet, dus die moet nog gefixt worden
• ik heb een achtergrond toegevoegd voor alle stories. Voor de visual regression stories gebruik ik een vast patroon als achtergrond. Dit laat duidelijker zien waar de randen en achtergronden (boundaries) van het component zich bevinden
• de visual regression story heet "Visual". Deze wil ik proberen uit het zijmenu te halen omdat het voor onze eindgebruikers niet van belangrijk is om te zien.
• momenteel staan zowel light als dark mode in een enkele story. Dat gaan we later oplossen door een keuze te bieden.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lux	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 14, 2024 3:18pm

[matijs]

Comments achtergelaten

[Robbert]

Denk dat je zoiets nodig hebt:

    steps:
      - name: Download code from GitHub
        uses: actions/checkout@v4.1.2
        with:
          fetch-depth: 0

      - name: Install pnpm package manager
        uses: pnpm/action-setup@v3.0.0
        with:
          version: 8.14.1

      - name: Set up Node.js version
        uses: actions/setup-node@v4.0.2
        with:
          node-version-file: .nvmrc
          cache: pnpm

      - name: Install dependencies specified in package.json
        run: |
          pnpm install
          pnpm ls --recursive

       - name: "Restore build artifact: Storybook"
         uses: actions/download-artifact@v4.1.4
         with:
           name: storybook
           path: packages/storybook/dist/

       - name: Publish to Chromatic
         uses: chromaui/action@v11
         if: |
           github.event.pull_request.draft == false &&
           github.actor != 'dependabot[bot]'
         with:
           autoAcceptChanges: main
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           storybookBuildDir: packages/storybook/dist/