@eo/next-ui v0.8.0-rc.0
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
2 days ago
3 days ago
3 days ago
3 days ago
6 days ago
7 days ago
7 days ago
7 days ago
7 days ago
6 days ago
7 days ago
7 days ago
7 days ago
7 days ago
9 days ago
9 days ago
9 days ago
10 days ago
14 days ago
16 days ago
16 days ago
16 days ago
20 days ago
23 days ago
27 days ago
28 days ago
28 days ago
30 days ago
30 days ago
30 days ago
30 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago