@eo/next-ui

Next UI Module

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

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