@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'
import '@eo/next-ui/dist/style.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

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