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] Button
• [x] Heading
• [x] Link
• [ ] Card
• [ ] Video
• [ ] Slider / Carousel
• [ ] RangeSlider
• [ ] Accordeon / Collapsible
• [ ] Progressbar
• [ ] Navigation
• [ ] Form inputs
• [ ] Icon
• [ ] Loader
• [ ] Toggle
• [ ] Switch
• [ ] Tabs
• [ ] Breadcrumbs
• [ ] Dialog / Modal
• [ ] Pagination