@eo/next-ui

Next UI Module

TODO: update for monorepo

De module waarin we onze EO Next.js components bijhouden inclusief een TailwindCSS basis configuratie.

Versiebeheer - SemVer

Versieonderdeel	Omschrijving
MAJOR	Verhoog dit nummer wanneer er mogelijk brekende wijzigingen worden aangebracht die niet backwards compatibel zijn.
MINOR	Verhoog dit nummer wanneer er nieuwe functionaliteiten worden toegevoegd die backwards compatibel zijn.
PATCH	Verhoog dit nummer wanneer er bugfixes of kleine aanpassingen zijn die backwards compatibel zijn.

Voorbeeld

Versie	Omschrijving
1.0.0	Eerste stabiele release met een volledig functionele set.
1.1.0	Toevoeging van nieuwe functies die compatibel zijn met de vorige versies.
1.1.1	Kleine bugfixes die geen invloed hebben op de API-functionaliteit.
2.0.0	Grote veranderingen die breken met de vorige API, vereist aanpassingen.

Installeren in NextJS

pnpm i @eo/next-ui tailwindcss

Toevoegen aan next.config.js :

{
  experimental: {
    optimizePackageImports: ['@eo/next-ui'],
  },
}

Toevoegen aan hoofd-layout van je webapp:

import '@eo/next-ui/dist/tailwind.css'

Maak een nieuw bestand tailwind.config.ts in de root van je project. Deze kan er als volgt uit zien, maar voel je vrij deze aan te passen / aan te vullen waar nodig.

import { config as defaultConfig } from '@eo/next-ui'

export default {
  ...defaultConfig,
  theme: {
    ...defaultConfig.theme,
    extend: {
      ...defaultConfig.theme?.extend,
      // voeg hier eventueel extra tailwind.theme.extend configuratie toe
    },
    // voeg hier eventueel extra tailwind.theme configuratie toe
  },
  content: [
    './node_modules/@eo/next-ui/dist/**/*.{js,ts,jsx,tsx}',
    './node_modules/@eo/next-ccm/src/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  plugins,
}

Voeg de onderstaande plugin toe aan .eslintrc.cjs :

{
  extends: [
    'plugin:tailwindcss/recommended',
  ]
  plugins: ['tailwindcss'],
}

Structuur

De bestanden van de package staan /src. De main.ts is de main export van de @eo/next-ui package. Bestanden worden eerst getranspileerd naar /dist, waar de getranspileerde bestanden staan naast diens declaratiebestanden.

Alle storybook stories staan in de storybook webapp, waar we een soortgelijke structuur aanhouden als in de next-ui package. Stories moeten eindingen op *.stories.tsx.

Setup

sudo sh -c 'echo "127.0.0.1\tstorybook.local.eo.nl\n" >> /etc/hosts'

pnpm i

Om de dev-server te kunnen starten, moet je een SSL-certificaat genereren. Run hiervoor eenmalig npx storybook dev -p 6006 -h storybook.local.eo.nl --smoke-test (dus zonder https).

Lokaal testen: storybook

pnpm storybook

Dan is storybook op poort 6006 beschikbaar.

Lokaal testen: in Next.js

Je kan de package lokaal testen door hem globaal te linken met pnpm link .

In next-ui-module :

pnpm link --global

In bijvoorbeeld trainingen-webapp :

pnpm link --global @eo/next-ui

Als je de package pnpm build , zullen veranderingen hot-reloaded worden in je Next.js applicatie.

Nieuwe versie publiceren

Het volgende commando checkt automatisch linting, maakt een build en publiceert naar npm:

pnpm release

Storybook preview omgeving

De storybook omgeving is op de interwebs te bereiken via https://storybook.eo.nl of https://green-bay-0d6c08803.5.azurestaticapps.net. Preview-omgevingen worden gemaakt zodra een PR naar main wordt gemaakt, de URL van deze preview-omgeving wordt normaliter na een paar minuten in een reactie geplaatst.

NPO Tag siteId's

Binnen de NpoContextProvider kan een NPO Tag worden ingevuld. Daarbij kan je onderstaande ID's gebruiken.

Community	siteId (prod)	sandboxSiteId (test/staging)
EO Home	630016	630015
Beam	630013	630012
Blauw Bloed	630011	630010
Ik Mis Je	630018	630021
Nederland Zingt	630014	630017
Dit	630086	630087