feat: add next.js demo app

.eslintignore

@@ -15,3 +15,6 @@ packages/web-components-angular/src/directives/proxies.ts
 packages/web-components-stencil/loader
 packages/web-components-react/src/react-component-lib/
 packages/web-components-react/src/components.ts
+
+# Ignore Next.js project with own ESLint config
+apps/rvs.rivm.nl/

.gitignore

@@ -6,6 +6,8 @@ vendor/
 .npm/
 
 # Ignore generated files
+.next/
+.swc/
 build/
 coverage/
 dist/

apps/rvs.rivm.nl/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "extends": "next/core-web-vitals",
+  "root": true
+}

apps/rvs.rivm.nl/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/rvs.rivm.nl/README.md

@@ -0,0 +1,13 @@
+# RIVM demo application
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

apps/rvs.rivm.nl/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/rvs.rivm.nl/next.config.js

@@ -0,0 +1,6 @@
+/* eslint-env node */
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+module.exports = nextConfig;

apps/rvs.rivm.nl/package.json

@@ -0,0 +1,47 @@
+{
+  "version": "1.0.0-alpha.0",
+  "author": "Community for NL Design System",
+  "description": "Storybook based on the NL Design System architecture",
+  "license": "EUPL-1.2",
+  "name": "@rijkshuisstijl-community/rvs.rivm.nl",
+  "keywords": [
+    "nl-design-system"
+  ],
+  "private": true,
+  "publishConfig": {
+    "access": "restricted",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git+ssh",
+    "url": "git@github.com:nl-design-system/rijkshuisstijl-community.git"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "lint": "next lint",
+    "lint:ts": "tsc --noEmit --project tsconfig.json",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "14.0.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@rijkshuisstijl-community/components-css": "workspace:*",
+    "@rijkshuisstijl-community/components-react": "workspace:*",
+    "@rijkshuisstijl-community/font": "workspace:*",
+    "@rijkshuisstijl-community/rivm-design-tokens": "workspace:*",
+    "@rijkshuisstijl-community/web-components-react": "workspace:*",
+    "@rijkshuisstijl-community/web-components-stencil": "workspace:*",
+    "@types/node": "20.9.4",
+    "@types/react": "18.2.38",
+    "@types/react-dom": "18.2.17",
+    "@utrecht/component-library-css": "1.0.2-alpha.0",
+    "@utrecht/component-library-react": "1.0.2-alpha.0",
+    "eslint": "8.54.0",
+    "eslint-config-next": "14.0.3",
+    "typescript": "5.3.2"
+  }
+}

apps/rvs.rivm.nl/src/app/globals.css

@@ -0,0 +1 @@
+/* global CSS here */

apps/rvs.rivm.nl/src/app/layout.tsx

@@ -0,0 +1,25 @@
+import { Document } from '@utrecht/component-library-react';
+import type { Metadata } from 'next';
+import { PropsWithChildren } from 'react';
+import '@utrecht/component-library-css';
+import '@rijkshuisstijl-community/components-css/index.scss';
+import '@rijkshuisstijl-community/rivm-design-tokens/dist/theme.css';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: "Risico's van stoffen - RIVM",
+  description: 'Demo met NL Design System.',
+};
+const RivmTheme = ({ children }: PropsWithChildren<{}>) => <div className="rivm-theme">{children}</div>;
+
+export default function RootLayout({ children }: PropsWithChildren<{}>) {
+  return (
+    <html lang="nl">
+      <body>
+        <RivmTheme>
+          <Document>{children}</Document>
+        </RivmTheme>
+      </body>
+    </html>
+  );
+}

apps/rvs.rivm.nl/src/app/page.css

@@ -0,0 +1 @@
+/* page CSS here */

apps/rvs.rivm.nl/src/app/page.tsx

@@ -0,0 +1,32 @@
+import { Article, Button, ButtonGroup, Heading1, Link, Paragraph } from '@utrecht/component-library-react';
+import { Logo } from '@rijkshuisstijl-community/components-react';
+import './page.css';
+
+export default function Home() {
+  return (
+    <>
+      <main>
+        <Logo
+          organisation="Rijksinstituut voor Volksgezondheid
+en Milieu"
+          subtitle="Ministerie van Volksgezondheid,
+Welzijn en Sport"
+        ></Logo>
+        <Article>
+          <Heading1>Risico&#39;s van stoffen</Heading1>
+          <Paragraph>
+            De informatie op deze website is vooral gericht op het bevoegd gezag van de Wet milieubeheer, de Waterwet,
+            de inspecties en andere overheidsorganisaties. Voor vragen over risico&#39;s van stoffen, of opmerkingen
+            over deze website kunt u terecht bij de{' '}
+            <Link href="https://rvs.rivm.nl/onderwerpen/helpdesk">helpdesk</Link>.
+          </Paragraph>
+          <ButtonGroup>
+            <Button type="submit" appearance="primary-action-button">
+              Bla
+            </Button>
+          </ButtonGroup>
+        </Article>
+      </main>
+    </>
+  );
+}

apps/rvs.rivm.nl/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}