npm package: @kaliber/components
Description: Kaliber Components
Latest version: 1.2.1

# 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:

```jsx
/**
 * @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.

```jsx
/**
 * @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`.

```jsx
/**
 * @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:

```bash
npm login
```

- Update lokaal:

```bash
git checkout main
git pull origin main
yarn
```

- Bump de versie (hier: minor):

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

- Commit/push en maak tag zichtbaar op remote:

```bash
git push origin main --follow-tags
```

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

```bash
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`.