Components

Short description.

Regels

• Een ./{{name}}.css is altijd inbegrepen.
• Styling word alleen toegevoegd als het essentieel is (bijvoorbeeld voor een custom checkbox).
• Componenten worden altijd via een PR in deze repo gezet; mergen doen we als er voldoende goedkeuring is.
• We werken altijd vanuit een Base-component; zo kun je het component sneller uitbereiden.
• Logica hoort in principe niet thuis in deze repo, tenzij essentieel (zoals bijvoorbeeld protocols in een Link).

cli

Je draait de cli als volgt.

• Zorg dat je in de root van je project's repository bent.
• Voer npx @kaliber/components uit.

[!NOTE] De cli werkt, maar staat aardig in de kinderschoenen. Voel je vrij om dingen te refactoren, of features toe te voegen. :)

Opzet

Een .js bestand heeft altijd de volgende opzet:

/**
 * @name ComponentNaam
 * @version 0.1.0
 */

import styles from './ComponentNaam.css'

Dit is zodat de cli kan herkennen welke versie het is, en we een versienummer hebben om mee bij te houden welke changes er zijn geweest voor een specifiek component.

Dependencies

Dependencies kun je automatisch mee laten installeren met de @requires at-rule van JSDoc. We zetten bewust geen versienummer neer, omdat de laatste versie altijd met de laatste (major) update zou moeten werken.

/**
 * @name ComponentNaam
 * @version 0.1.0
 * @requires react-spring
 */

Namespace

Mapstructuur wordt bepaald door @namespace. Stel dat je iets in /pageOnly wilt, dan zou je @namespace pageOnly toe kunnen voegen, zodat het geinstalleerd wordt in /pageOnly/ComponentNaam.js.

/**
 * @name ComponentNaam
 * @version 0.1.0
 * @namespace pageOnly
 */

TODO

• [x] Accordion / Collapsible
• [x] Breadcrumbs
• [x] Button
• [x] Dialog / Modal
• [ ] Form inputs
• [x] Heading
• [x] Icon
• [ ] Image
• [x] Link
• [x] Loader
• [ ] Navigation
• [x] Pagination
• [x] Progressbar
• [x] RangeSlider
• [x] Slider / Carousel
• [x] Switch
• [x] Tabs
• [x] Video

Publiceren (Yarn)

Volg deze stappen om een nieuwe release van @kaliber/components naar npm te publiceren met Yarn:

• Zorg dat je ingelogd bent bij npm:

npm login

• Update lokaal:

git checkout main
git pull origin main
yarn

• Bump de versie (hier: minor):

yarn version --minor -m "Release v%s"

• Commit/push en maak tag zichtbaar op remote:

git push origin main --follow-tags

• Publiceer naar npm (scoped packages moeten public access hebben):

yarn publish --access public

Opmerkingen:

• Als de publish vraagt om authenticatie of 2FA, volg dan de instructies in de terminal (of gebruik een npm token in CI).

• Wil je non-interactive in CI gebruiken, exporteer een token en stel //registry.npmjs.org/:_authToken=$NPM_TOKEN in voordat je publish uitvoert.

• De CLI-binary is beschikbaar als klbr (zie bin in package.json). Als je wilt dat npx @kaliber/components direct werkt, wijzig dan de bin key in package.json naar de pakketnaam voordat je publiceert.

• Belangrijke aanvullingen:

  • yarn version maakt automatisch de commit en tag aan voor de nieuwe versie. Daarna moet je nog git push origin main --follow-tags uitvoeren om de tag naar remote te sturen.
  • yarn publish kan je tijdens het publiceren vragen om een (nieuw) versienummer te kiezen als package.json sinds de tag is aangepast. Zorg dat package.json de gewenste versie bevat en gecommit is voordat je publiceert.
  • Voor een scoped package (@kaliber/...) moet publishConfig.access op public staan (zoals hier ingesteld). Wil je dat gebruikers npx @kaliber/components kunnen gebruiken, wijzig de bin key in package.json naar "@kaliber/components": "cli/index.js"; anders blijft de CLI beschikbaar onder klbr.