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 |