npm

@eo/next-ui
TypeScript icon, indicating that this package has built-in type declarations

7.0.0 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @eo/next-ui

Weekly Downloads

579

Version

7.0.0

License

MIT

Unpacked Size

2.22 MB

Total Files

960

Last publish

Collaborators

  • daankruis
  • thaisi
  • nathanvangoor
  • robinfeo
  • sander.vm
  • jesseflikweerteo
  • jonahockey
  • ronald_elzen
  • wouternoordhof
  • evangelischeomroep
  • lklein
  • hermankremer
  • mhuijser