De module waarin we onze EO Next.js components bijhouden inclusief een TailwindCSS basis configuratie.
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. |
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. |
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'],
}
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
.
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).
pnpm storybook
Dan is storybook op poort 6006 beschikbaar.
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.
Het volgende commando checkt automatisch linting, maakt een build en publiceert naar npm:
pnpm release
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.
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 |