feat: add nextjs package #1012
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| body { | ||
| /* stylelint-disable-next-line */ | ||
| margin: 0; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,36 @@ | ||||||
| import type { Metadata } from 'next'; | ||||||
| import '@amsterdam/design-system-tokens/dist/index.css'; | ||||||
| import '@nl-design-system-unstable/start-design-tokens/dist/theme.css'; | ||||||
| import { PropsWithChildren } from 'react'; | ||||||
| import { Link } from '../components/Link/Link'; | ||||||
| import { Logo } from '../components/Logo'; | ||||||
| import { PageBody } from '../components/PageBody/PageBody'; | ||||||
| import { PageFooter } from '../components/PageFooter/PageFooter'; | ||||||
| import { PageHeader } from '../components/PageHeader/PageHeader'; | ||||||
| import { SkipLink } from '../components/SkipLink/SkipLink'; | ||||||
| import './layout.css'; | ||||||
|
|
||||||
| export const metadata: Metadata = { | ||||||
| description: 'A Next.js example project using components from the NL Design System', | ||||||
| title: 'Next.js example site', | ||||||
| }; | ||||||
|
|
||||||
| export default function RootLayout({ children }: PropsWithChildren) { | ||||||
| return ( | ||||||
| <html lang="en" dir="ltr" className="start-theme"> | ||||||
| <body> | ||||||
|
Member
There was a problem hiding this comment. Dit werkt helaas nog niet bij Utrecht, maar dat zou misschien een optie moeten worden
Suggested change
Je mag er een PR voor maken als je wilt: Tot die tijd een workaround met |
||||||
| <SkipLink href="#main">Skip to main content</SkipLink> | ||||||
|
|
||||||
| <PageHeader> | ||||||
| <Link href="https://nldesignsystem.nl"> | ||||||
| <Logo /> | ||||||
| </Link> | ||||||
| </PageHeader> | ||||||
|
|
||||||
| <PageBody id="main">{children}</PageBody> | ||||||
|
Member
There was a problem hiding this comment. PageBody is denk ik geen |
||||||
|
|
||||||
| <PageFooter /> | ||||||
| </body> | ||||||
| </html> | ||||||
| ); | ||||||
| } | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,170 @@ | ||||||
| import { Alert } from '@/components/Alert/Alert'; | ||||||
| import { CodeBlock } from '@/components/CodeBlock/CodeBlock'; | ||||||
| import { Grid, GridCell } from '@/components/Grid/Grid'; | ||||||
| import { Heading } from '@/components/Heading/Heading'; | ||||||
| import { Link } from '@/components/Link/Link'; | ||||||
| import { LinkList, LinkListLink } from '@/components/LinkList/LinkList'; | ||||||
| import { OrderedList, OrderedListItem } from '@/components/OrderedList/OrderedList'; | ||||||
| import { Paragraph } from '@/components/Paragraph/Paragraph'; | ||||||
|
|
||||||
| const contentSpan = 'all' as const; | ||||||
|
|
||||||
| const Home = () => { | ||||||
| return ( | ||||||
| <div> | ||||||
|
Member
There was a problem hiding this comment. Kan dit een fragment zijn?
Suggested change
|
||||||
| <Grid paddingVertical="2x-large" gapVertical="2x-large"> | ||||||
| <GridCell span={contentSpan}> | ||||||
| <Heading level={1}>NL Design System in Next.js</Heading> | ||||||
| </GridCell> | ||||||
|
|
||||||
| <GridCell span={contentSpan}> | ||||||
| <Heading level={2}>Purpose</Heading> | ||||||
| <Paragraph> | ||||||
| This project shows how you can playfully discover and use components from the{' '} | ||||||
| <Link href="https://nldesignsystem.nl">NL Design System</Link> in a Next.js application. | ||||||
| </Paragraph> | ||||||
| <Paragraph> | ||||||
| This page deliberately combines components from multiple implementations:{' '} | ||||||
| <code>@nl-design-system-candidate</code>, <code>@utrecht/component-library-react</code>, and{' '} | ||||||
| <code>@amsterdam/design-system-react</code>. | ||||||
| </Paragraph> | ||||||
| </GridCell> | ||||||
|
|
||||||
| <GridCell span={contentSpan}> | ||||||
| <Heading level={2}>Which component maturity should you use?</Heading> | ||||||
| <Paragraph> | ||||||
| The NL Design System groups every component by maturity through the{' '} | ||||||
| <Link href="https://nldesignsystem.nl/handboek/estafettemodel/">estafettemodel</Link> (relay model). It | ||||||
| ranges from a production-proven implementation to a concept with no clear implementation yet: | ||||||
| </Paragraph> | ||||||
| <OrderedList> | ||||||
| <OrderedListItem> | ||||||
| <Paragraph> | ||||||
| <strong>Hall of Fame</strong> used in production by at least two organizations, audited for | ||||||
| accessibility, and semantically versioned with a changelog. The safest choice. | ||||||
| </Paragraph> | ||||||
| </OrderedListItem> | ||||||
| <OrderedListItem> | ||||||
| <Paragraph> | ||||||
| <strong>Candidate</strong> expected to reach Hall of Fame, but still gathering documentation and | ||||||
| feedback, so it can still change. This is what <code>@nl-design-system-candidate</code> offers. | ||||||
| </Paragraph> | ||||||
| </OrderedListItem> | ||||||
| <OrderedListItem> | ||||||
| <Paragraph> | ||||||
| <strong>Community</strong> built by the community according to NL Design System guidelines and usable | ||||||
| with confidence, but without the stability guarantees of Candidate or Hall of Fame. | ||||||
| </Paragraph> | ||||||
| </OrderedListItem> | ||||||
| <OrderedListItem> | ||||||
| <Paragraph> | ||||||
| <strong>Help wanted</strong> a documented need without an implementation yet, and a good opportunity to | ||||||
| contribute one. | ||||||
| </Paragraph> | ||||||
| </OrderedListItem> | ||||||
| <OrderedListItem> | ||||||
| <Paragraph> | ||||||
| <strong>Discouraged</strong> flagged by user research or accessibility guidelines as something to avoid. | ||||||
| </Paragraph> | ||||||
| </OrderedListItem> | ||||||
| </OrderedList> | ||||||
| <Alert type="info"> | ||||||
| <Paragraph> | ||||||
| Rule of thumb: always reach for the most mature (Hall of Fame) version of a component first. If it doesn't | ||||||
| fit your use case, check Candidate implementations, and only then look around the Community components — | ||||||
| just know these can have organisasion specific quirks and may still change. | ||||||
| </Paragraph> | ||||||
| </Alert> | ||||||
| </GridCell> | ||||||
|
|
||||||
| <GridCell span={contentSpan}> | ||||||
| <Heading level={2}>Getting started</Heading> | ||||||
| <Paragraph>Everything you need to start using the NL Design System in a React application:</Paragraph> | ||||||
| <OrderedList> | ||||||
| <OrderedListItem> | ||||||
| <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>. | ||||||
|
Member
There was a problem hiding this comment.
Suggested change
Hier is ook een component voor |
||||||
| </Paragraph> | ||||||
| </OrderedListItem> | ||||||
| <OrderedListItem> | ||||||
| <Paragraph>Install the React component and its CSS package.</Paragraph> | ||||||
| <CodeBlock> | ||||||
| {'pnpm add @nl-design-system-candidate/heading-react @nl-design-system-candidate/heading-css'} | ||||||
| </CodeBlock> | ||||||
| </OrderedListItem> | ||||||
| <OrderedListItem> | ||||||
| <Paragraph> | ||||||
| Import the component's CSS once, wherever you set up your application or with your component | ||||||
| implementation. | ||||||
| </Paragraph> | ||||||
| <CodeBlock>{"import '@nl-design-system-candidate/heading-css/heading.css';"}</CodeBlock> | ||||||
| </OrderedListItem> | ||||||
| <OrderedListItem> | ||||||
| <Paragraph> | ||||||
| Load a set of design tokens and apply the matching theme class to your root element. This project loads{' '} | ||||||
| <code>@nl-design-system-unstable/start-design-tokens</code> and applies the <code>start-theme</code>{' '} | ||||||
| class in <code>app/layout.tsx</code>. | ||||||
| </Paragraph> | ||||||
| <CodeBlock> | ||||||
| {"import '@nl-design-system-unstable/start-design-tokens/dist/variables.css';\n\n" + | ||||||
| '<html lang="en" className="start-theme">'} | ||||||
| </CodeBlock> | ||||||
| </OrderedListItem> | ||||||
| <OrderedListItem> | ||||||
| <Paragraph>Import and render the component.</Paragraph> | ||||||
| <CodeBlock> | ||||||
| {"import { Heading } from '@nl-design-system-candidate/heading-react';\n\n" + | ||||||
| 'const Example = () => <Heading level={1}>Hello world</Heading>;'} | ||||||
| </CodeBlock> | ||||||
| <Paragraph> | ||||||
| The React components can also be imported with CSS included but with the caveat that it can only be | ||||||
| client side rendered: | ||||||
| </Paragraph> | ||||||
| <CodeBlock>{"import { Link } from '@nl-design-system-candidate/link-react/css';"}</CodeBlock> | ||||||
| </OrderedListItem> | ||||||
| <OrderedListItem> | ||||||
| <Paragraph> | ||||||
| Repeat for every component you need, and browse{' '} | ||||||
| <Link href="https://nldesignsystem.nl/componenten/">nldesignsystem.nl/componenten/</Link> to discover | ||||||
| which components exist and in which implementations. | ||||||
| </Paragraph> | ||||||
| </OrderedListItem> | ||||||
| </OrderedList> | ||||||
| </GridCell> | ||||||
|
|
||||||
| <GridCell span={contentSpan}> | ||||||
| <Heading level={2}>How to use this project</Heading> | ||||||
| <Paragraph> | ||||||
| Each component used on this page follows the steps above and is wrapped in its own file under{' '} | ||||||
| <code>components/</code>, so you can see the install and import steps applied for real. Open a component in | ||||||
| that folder to see the pattern. | ||||||
| </Paragraph> | ||||||
| <Alert type="info"> | ||||||
| <Paragraph> | ||||||
| Tip: start at <Link href="https://nldesignsystem.nl/componenten/">nldesignsystem.nl/componenten/</Link> to | ||||||
| discover which components are available and in which implementations, before building something yourself. | ||||||
| </Paragraph> | ||||||
| </Alert> | ||||||
| </GridCell> | ||||||
|
|
||||||
| <GridCell span={contentSpan}> | ||||||
| <Heading level={2}>Next steps</Heading> | ||||||
| <Paragraph>Want to continue? Here are two logical next steps:</Paragraph> | ||||||
| <LinkList> | ||||||
| <LinkListLink href="https://nldesignsystem.nl"> | ||||||
| Explore nldesignsystem.nl — discover the broader ecosystem and more components | ||||||
| </LinkListLink> | ||||||
|
|
||||||
| <LinkListLink href="https://nl-design-system.github.io/example/"> | ||||||
| View the Storybook for this project — a starting point for implementing your own design system | ||||||
| </LinkListLink> | ||||||
| </LinkList> | ||||||
| </GridCell> | ||||||
| </Grid> | ||||||
| </div> | ||||||
| ); | ||||||
| }; | ||||||
|
|
||||||
| export default Home; | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export { Alert } from '@utrecht/component-library-react'; | ||
| import '@utrecht/alert-css/dist/index.css'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export { CodeBlock } from '@nl-design-system-candidate/code-block-react'; | ||
| import '@nl-design-system-candidate/code-block-css/code-block.css'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| 'use client'; | ||
|
|
||
| import { Grid as AmsterdamGrid } from '@amsterdam/design-system-react'; | ||
| import '@amsterdam/design-system-css/dist/grid/grid.css'; | ||
|
|
||
| export const Grid = AmsterdamGrid; | ||
|
Check warning on line 6 in apps/next/components/Grid/Grid.tsx
|
||
| export const GridCell = AmsterdamGrid.Cell; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export { Heading } from '@nl-design-system-candidate/heading-react'; | ||
| import '@nl-design-system-candidate/heading-css/heading.css'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export { Link } from '@nl-design-system-candidate/link-react'; | ||
| import '@nl-design-system-candidate/link-css/link.css'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| 'use client'; | ||
|
|
||
| import { LinkList as AmsterdamLinkList } from '@amsterdam/design-system-react'; | ||
| import '@amsterdam/design-system-css/dist/icon/icon.css'; | ||
| import '@amsterdam/design-system-css/dist/link-list/link-list.css'; | ||
|
|
||
| export const LinkList = AmsterdamLinkList; | ||
|
Check warning on line 7 in apps/next/components/LinkList/LinkList.tsx
|
||
| export const LinkListLink = AmsterdamLinkList.Link; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Dit zou niet nodig zijn als je Utrecht
Rootgebruikt