loon-bulma-react

Voorheen stond hier hoe je de componenten, providers en hooks kon gebruiken. Die zijn nu verplaatst naar een GitHub Page

[F626428]

Bulma & React componenten voor Loon Salarissoftware.

• Installatie
• Gebruik
• Publiceren
• JSDateTime

Installatie

Dat kan zonder toevoeging van versienummer. Je gebruikt dan de laatste versie (dus ook laatste jaar-tag) van de componenten. De tag latest moet je dan wel even toevoegen. Als je deze tag niet toevoegd, installeert npm de in de package.json opgegeven versie. Het jaar wordt bepaald door tags: voor elk jaar is er een tag van de vorm y[jaar]. De 'y' is nodig omdat alleen een jaartal geen geldige tag is.

# installeer de meest recente versie van de package. (& update de package.json)
npm install --save bulma loon-bulma-react@latest
# installeer de versie die in package.json is gedefinieerd
npm install --save bulma loon-bulma-react
# installeer de versie die hoort bij het jaar 2022
npm install --save loon-bulma-react@y2022

Om vast te leggen welke tag je wil gebruiken, moet je in de package.json het versie-nummer aanpassen tot de tag. Dan wordt altijd de laatste versie van die tag geïnstalleerd, in plaats van de laatste versie die is gepubliceerd. Voor het meeste recente Loon-jaar kan je wel npm install loon-bulma-react@latest gebruiken.

{
  "devDependencies": {
    // ...
    "loon-bulma-react": "y2023"
    // ...
  }
}

Versies

De Major versies beginnen met het jaar waar ze bijhoren. dus de versie voor Loon-2021 is 2021.*.* Er zijn nu 3 major versies.

• @y2020 --> Testversie voor 2020, installeren met npm install loon-bulma-react@y2021.
• @y2021 --> Versie voor 2021, installeren met npm install loon-bulma-react@y2021.
• @y2022 --> Versie voor 2022, installeren met npm install loon-bulma-react@y2022.
• @y2023 --> Versie voor 2023, installeren met npm install loon-bulma-react@y2023 of loon-bulma-react@latest
• @y2024 --> Versie voor 2024, installeren met npm install loon-bulma-react@y2024.
• @latest --> Default versie die geïnstalleerd wordt met npm install loon-bulma-react.
• @beta --> Versie om te testen (TR!) van wat dingennpm install loon-bulma-react@beta

Gebruik de styles

Importeer in een eigen stylesheet (styles.scss oid). Dan kan je ook nog de kleuren, sizes etc aanpassen, als je die niet mooi vind.

@use '~loon-bulma-react/styles/_all' with (
  $primary: #28ff00,
  $loon: #fa700d
);

Gebruik de styles voor bulma v1.0.0

in index.tsx importeer je de styles.

import 'loon-bulma-react/styles/_all.scss';

Of in een eigen stylesheet (styles.scss). Dan kan je ook nog de kleuren aanpassen, als je die niet mooi vind. LET OP: Hiervoor moet sass geinstalleerd zijn! ('npm i -D sass')

$primary: #28ff00;
@import '~loon-bulma-react/styles/_all_.scss';

De meeste kleuren staan wel vast over alle versies heen, alleen de $primary en de $loon kleuren wijzigen elk jaar.

• Loon 2024: $primary: #f7b7a5;, $loon: #fa700d;
• Loon 2023: $primary: #113670;, geen $loon kleur

Alles voor Loon 2023 gebruikt dezelfde kleuren. De primary- en loon-kleuren van het voorgaande jaar zijn nog te vinden met $primary-yyyy en $loon-yyyy. Mocht je liever deze gebruiken, dan kan dat door voor de import van _all deze variabelen te definieren.

$primary: $primary-2022;
$loon: $loon-2022;
@import '~loon-bulma-react/styles/_all_.scss';

Gebruik de componenten

in een eigen component, bijvoorbeeld de Columns:

import { Columns, Column } from 'loon-bulma-react';

function MyComponent(props) {
  return (
    <Columns>
      <Column.OneQuarter>Column 1/4</Column.OneQuarter>
      <Column size="1/2">Column 1/2</Column>
      <Column.OneQuarter>Column 1/4</Column.OneQuarter>
    </Columns>
  );
}

Bulma-dingetje

Er is een ding in Bulma dat hier anders gaat dan in Bulma. Voor de SizePropmaken wij gebruik van s, m, l en xl. In Bulma bestaan deze sizes deels, maar heten ze small, normal / default, medium en large. Daarom komt het voor dat een size='xl' als class een 'large' krijgt en een size='l' als class 'medium'.

Publiceren

Onder scripts in de package.json file staan release scripts klaar. Dit script publiceerd een nieuwe versie naar de npm-registry voor de tag yXXXX die hoort bij het jaar waar de geselecteerde git-branch bijhoort. Dus bijvoorbeeld voor 2020

npm run release-2020

update van de 2020-versie van loon-react-bulma en NIET van andere versies.

Voor een publish naar het latest slot kan je npm publish doen. Daarna wel het laatste jaar updaten door de tag aan te passen:

npm publish
npm dist-tag add loon-bulma-react@<version> y[xxxx]

Dat kan dus simpeler met het onderstaande command. De yXXXX-tag wordt dan automatisch aangepast.In dit geval worden EN de latest tag EN de yXXXX-tag geupdate en gepubliceerd.

npm run release