feat: add nextjs package - #1012
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
In een aparte branch heb ik deze file vervangen met @nl-design-system-community/ma-design-tokens/dist/variables.css.
Alsnog lijkt het mij wel fijner als voorbeeld om alleen een custom theme file te hebben met de alleen benodigde Design Tokens. @Robbert wat denk jij?
There was a problem hiding this comment.
Ik stel voor om hier in eerste instantie het start-thema te importeren, zonder duplicatie
Dan kan later de packages/design-tokens/ aangepast worden om gebaseerd te worden op het start thema, en dan kun je locale design tokens gebruiken uit je workspace.
| @@ -0,0 +1,2 @@ | |||
| export { Button } from '@nl-design-system-candidate/button-react'; | |||
There was a problem hiding this comment.
Mijn IDE (VScode) doet geen autocomplete omdat Typescript deze exports niet kan indexeren. Als ik de Button als een const exporteer dan pakt hij hem wel op maar Sonar vindt dit weer niet leuk.
Hebben jullie hier een oplossing voor?
There was a problem hiding this comment.
Zou je een issue willen aanmaken bij de candidate repo voor matige developer experience met TypeScript autocomplete? Als jij een oplossing hebt hoor ik het graag, ik denk dat dit van jou uit zou kunnen komen.
There was a problem hiding this comment.
Het is niet een candidate repo issue maar hoe het component hier wordt ge-ïmporteerd en exporteerd. Ik loop tegen hetzelfde aan in de documentatie repo voor bijvoorbeeld packages/website/src/components/button/button.tsx waar de button van Utrecht gebruikt wordt.
Het is fijn om dit soort import/export component files te hebben zodat je als developer 1 centrale plek hebt voor je Button implementie. Dan is switchen tussen een community button of een candidate button minder gedoe.
Ik heb alleen nog geen betere manier gevonden dan dit te doen:
import { Button as ButtonReact } from '@nl-design-system-candidate/button-react';
import '@nl-design-system-candidate/button-css/button.css';
export const Button = ButtonReact;
Maar ik kan niet geloven dat anderen hier geen last van hebben dus ik ben heel benieuwd hoe zij dit hebben opgelost 😅
Ik gebruik VScode, misschien ligt het daar aan?
Co-authored-by: Richard van Heuven van Staereling <richard@vhvs.nl>
|
@Robbert de package voor het start-thema was even zoeken. Uiteindelijk handmatig gezocht op npmjs.org op @nl-design-system-unstable. Is het handig om hier een referentie van op https://nldesignsystem.nl/handboek/huisstijl/themas/start-thema/ te zetten? |
|
|
|
||
| <GridCell span={footerLinksSpan} start={footerLinksStart}> | ||
| <LinkList> | ||
| <LinkListLink color="inverse" href="https://nldesignsystem.nl/community/sluit-je-aan/"> |
There was a problem hiding this comment.
Zou het ook mogelijk zijn om de Tabler icon te gebruiken ipv een Amsterdam chevron?
|
|
||
| <GridCell span={footerLinksSpan} start={footerLinksStart}> | ||
| <LinkList> | ||
| <LinkListLink color="inverse" href="https://nldesignsystem.nl/community/sluit-je-aan/"> |
There was a problem hiding this comment.
Op gegeven moment moet het ook mogelijk zijn om inverse niet hardcoded in de template te zetten, zou je dit als tech debt willen bijhouden? Misschien zijn er andere componenten in de community waarmee het zonder color="inverse" kan.
| @@ -0,0 +1,62 @@ | |||
| { | |||
| "name": "@example/nextjs", | |||
There was a problem hiding this comment.
| "name": "@example/nextjs", | |
| "name": "@example/next", |
Ik stel voor om de packages/xxx/ en @example/xxx
| }>) { | ||
| return ( | ||
| <html lang="en" dir="ltr" className="ma-theme"> | ||
| <body> |
There was a problem hiding this comment.
Dit werkt helaas nog niet bij Utrecht, maar dat zou misschien een optie moeten worden
| <body> | |
| <PageLayout Component="body"> |
Je mag er een PR voor maken als je wilt:
https://github.com/nl-design-system/utrecht/blob/main/packages/components-react/page-layout-react/src/index.tsx#L14
Tot die tijd een workaround met <body className="utrecht-page-layout"> ofzo
| </Link> | ||
| </PageHeader> | ||
|
|
||
| <PageBody id="main">{children}</PageBody> |
There was a problem hiding this comment.
PageBody is denk ik geen main element zodat er ook ruimte is voor een aside buiten de main, dus ik denk dat je expliciet er een <main id="main"> in moet nesten.
|
|
||
| const Home = () => { | ||
| return ( | ||
| <div> |
There was a problem hiding this comment.
Kan dit een fragment zijn?
| <div> | |
| <> |
| <OrderedList> | ||
| <OrderedListItem> | ||
| <Paragraph> | ||
| <strong>Hall of Fame</strong> — used in production by at least two organizations, audited for |
There was a problem hiding this comment.
| <strong>Hall of Fame</strong> — used in production by at least two organizations, audited for | |
| <b>Hall of Fame</b> — used in production by at least two organizations, audited for |
| <Paragraph> | ||
| Choose an implementation. The NL Design System isn't a single library, so pick the one (or | ||
| combination) that fits your project, such as <code>@nl-design-system-candidate</code>,{' '} | ||
| <code>@utrecht/component-library-react</code>, or <code>@amsterdam/design-system-react</code>. |
There was a problem hiding this comment.
| <code>@utrecht/component-library-react</code>, or <code>@amsterdam/design-system-react</code>. | |
| <Code>@utrecht/component-library-react</Code>, or <Code>@amsterdam/design-system-react</Code>. |
Hier is ook een component voor
3 participants
Issue: https://github.com/nl-design-system/kernteam/issues/2070
Add Next.js package.
Made some changes in the base of the project to handle nextjs files.