@eo/next-ui
v9.0.0-rc.8
Published
De module waarin we onze EO Next.js components bijhouden inclusief een TailwindCSS basis configuratie.
Downloads
4,443
Maintainers
Keywords
Readme
Next UI Module
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 /lib
. De main.ts
is de main export van de @eo/next-ui
package.
Alle storybook stories staan in /src/stories
. 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 |