chore: nextjs v15 + use plain leaflet + bumps

Informasjonsforvaltning · Nov 21, 2024 · 788da77 · 788da77
1 parent 44b99f7
commit 788da77
Show file tree

Hide file tree

Showing 26 changed files with 3,663 additions and 5,342 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -39,7 +39,6 @@
                 "complexity": ["warn", 10],
                 "consistent-return": "warn",
                 "curly": "off",
-                "default-case": "error",
                 "default-case": "warn",
                 "default-case-last": "error",
                 "default-param-last": "error",

diff --git a/.github/workflows/deploy-prod&demo.yaml b/.github/workflows/deploy-prod&demo.yaml
@@ -27,17 +27,17 @@ jobs:
             - name: Enable corepack
               run: corepack enable
 
-            - name: Use Node.js 20.9.0
+            - name: Use Node.js 20.16.0
               uses: actions/setup-node@v4
               with:
-                  node-version: 20.9.0
+                  node-version: 20.16.0
                   cache: 'yarn'
 
             - name: Yarn install
               run: |
                   corepack enable
                   yarn set version stable
-                  yarn install --frozen-lockfile
+                  yarn install --immutable
 
             - name: Caching Nx
               uses: actions/cache@v4

diff --git a/.github/workflows/deploy-staging.yaml b/.github/workflows/deploy-staging.yaml
@@ -28,16 +28,16 @@ jobs:
             - name: Enable corepack
               run: corepack enable
 
-            - name: Use Node.js 20.9.0
+            - name: Use Node.js 20.16.0
               uses: actions/setup-node@v4
               with:
-                  node-version: 20.9.0
+                  node-version: 20.16.0
                   cache: 'yarn'
 
             - name: Yarn install
               run: |
                   yarn set version stable
-                  yarn install --frozen-lockfile
+                  yarn install --immutable
 
             - name: Caching Nx
               uses: actions/cache@v4

diff --git a/apps/data-norge/Dockerfile b/apps/data-norge/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:20-alpine3.18
+FROM node:20-alpine
 ARG NODE_ENV
 WORKDIR /app
 COPY .yarnrc.yml yarn.lock dist/apps/data-norge ./

diff --git a/apps/data-norge/mdx.d.ts b/apps/data-norge/mdx.d.ts
@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 declare module '*.mdx' {
     let MDXComponent: (props: any) => JSX.Element; // eslint-disable-line
     export default MDXComponent;

diff --git a/apps/data-norge/next-env.d.ts b/apps/data-norge/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/apps/data-norge/next.config.js b/apps/data-norge/next.config.js
@@ -17,6 +17,9 @@ const nextConfig = {
     // Configure `pageExtensions` to include markdown and MDX files
     pageExtensions: ['js', 'jsx', 'ts', 'tsx'],
     assetPrefix: '/nb',
+    sassOptions: {
+        silenceDeprecations: ['legacy-js-api', 'import'],
+    },
     async redirects() {
         return [
             {

diff --git a/apps/data-norge/src/app/[lang]/about/layout.tsx b/apps/data-norge/src/app/[lang]/about/layout.tsx
@@ -1,4 +1,3 @@
-import DocsLayout, { generateStaticParams } from '@fdk-frontend/ui/layouts/docs-layout';
+import DocsLayout from '@fdk-frontend/ui/layouts/docs-layout';
 
 export default DocsLayout;
-export { generateStaticParams };
diff --git a/apps/data-norge/src/app/[lang]/catalogs/layout.tsx b/apps/data-norge/src/app/[lang]/catalogs/layout.tsx
@@ -1,4 +1,3 @@
-import DocsLayout, { generateStaticParams } from '@fdk-frontend/ui/layouts/docs-layout';
+import DocsLayout from '@fdk-frontend/ui/layouts/docs-layout';
 
 export default DocsLayout;
-export { generateStaticParams };
diff --git a/apps/data-norge/src/app/[lang]/contact/layout.tsx b/apps/data-norge/src/app/[lang]/contact/layout.tsx
@@ -1,4 +1,3 @@
-import DocsLayout, { generateStaticParams } from '@fdk-frontend/ui/layouts/docs-layout';
+import DocsLayout from '@fdk-frontend/ui/layouts/docs-layout';
 
 export default DocsLayout;
-export { generateStaticParams };
diff --git a/apps/data-norge/src/app/[lang]/data-hunter/components/data-hunter-form/index.tsx b/apps/data-norge/src/app/[lang]/data-hunter/components/data-hunter-form/index.tsx
@@ -1,12 +1,13 @@
 'use client';
 
+import { useActionState } from "react";
 import { Paragraph, Textarea, Textfield, Button } from '@digdir/designsystemet-react';
 
 import { LabelWithTag } from '@fdk-frontend/ui/label-with-tag';
 import { SubmitStatusAlert } from '@fdk-frontend/ui/alert-submit-status';
 
 import { type Dictionary } from '@fdk-frontend/dictionaries';
-import { useFormState, useFormStatus } from 'react-dom';
+import { useFormStatus } from 'react-dom';
 import { sendEmailAction } from '../../utils/actions';
 import { EMPTY_FORM_STATE, extractErrorMessages } from '@fdk-frontend/utils';
 import styles from './data-hunter-form.module.css';
@@ -16,7 +17,7 @@ type DataHunterFormProps = {
 };
 
 const DataHunterForm = ({ dictionary }: DataHunterFormProps) => {
-    const [state, formAction] = useFormState(sendEmailAction, EMPTY_FORM_STATE);
+    const [state, formAction] = useActionState(sendEmailAction, EMPTY_FORM_STATE);
     const { pending } = useFormStatus();
     const textAreaCols = 100;
     const textAreaRows = 5;

diff --git a/apps/data-norge/src/app/[lang]/data-hunter/layout.tsx b/apps/data-norge/src/app/[lang]/data-hunter/layout.tsx
@@ -1,4 +1,3 @@
-import DocsLayout, { generateStaticParams } from '@fdk-frontend/ui/layouts/docs-layout';
+import DocsLayout from '@fdk-frontend/ui/layouts/docs-layout';
 
 export default DocsLayout;
-export { generateStaticParams };
diff --git a/apps/data-norge/src/app/[lang]/data-hunter/page.tsx b/apps/data-norge/src/app/[lang]/data-hunter/page.tsx
@@ -15,14 +15,20 @@ import DataHunterForm from './components/data-hunter-form';
 import styles from './page.module.css';
 
 type DataHunterPageProps = {
-    params: {
+    params: Promise<{
         lang: Locale['code'];
-    };
+    }>;
 };
 
-const DataHunterPage = async ({ params: { lang } }: DataHunterPageProps) => {
+const DataHunterPage = async (props: DataHunterPageProps) => {
+    const params = await props.params;
+
+    const {
+        lang
+    } = params;
+
     // Opt-in dynamic rendering
-    noStore();
+    await noStore();
 
     const dictionary = await getDictionary(lang, 'data-hunter-page');
     const commonDictionary = await getDictionary(lang, 'common');
@@ -66,7 +72,8 @@ const DataHunterPage = async ({ params: { lang } }: DataHunterPageProps) => {
     );
 };
 
-export const generateMetadata = async ({ params }: DataHunterPageProps): Promise<Metadata> => {
+export const generateMetadata = async (props: DataHunterPageProps): Promise<Metadata> => {
+    const params = await props.params;
     const dictionary = await getDictionary(params.lang, 'data-hunter-page');
 
     return {

diff --git a/apps/data-norge/src/app/[lang]/docs/layout.tsx b/apps/data-norge/src/app/[lang]/docs/layout.tsx
@@ -1,4 +1,3 @@
-import DocsLayout, { generateStaticParams } from '@fdk-frontend/ui/layouts/docs-layout';
+import DocsLayout from '@fdk-frontend/ui/layouts/docs-layout';
 
 export default DocsLayout;
-export { generateStaticParams };
diff --git a/apps/data-norge/src/app/[lang]/page.tsx b/apps/data-norge/src/app/[lang]/page.tsx
@@ -11,14 +11,15 @@ import { ShareDataBanner } from '../components/frontpage/share-data-banner';
 import CatalogsBanner from '../components/frontpage/catalogs-banner';
 
 export type FrontpageProps = {
-    params: {
+    params: Promise<{
         lang: Locale['code'];
-    };
+    }>;
 };
 
-const Frontpage = async ({ params }: FrontpageProps) => {
+const Frontpage = async (props: FrontpageProps) => {
+    const params = await props.params;
     // Opt-in dynamic rendering
-    noStore();
+    await noStore();
 
     const {
         FDK_DATA_NORGE_BASE_URI,
@@ -66,7 +67,8 @@ const Frontpage = async ({ params }: FrontpageProps) => {
     );
 };
 
-export const generateMetadata = async ({ params }: FrontpageProps): Promise<Metadata> => {
+export const generateMetadata = async (props: FrontpageProps): Promise<Metadata> => {
+    const params = await props.params;
     const frontpageDictionary = await getDictionary(params.lang, 'frontpage');
 
     return {

diff --git a/apps/data-norge/src/app/components/docs/docs-page/index.tsx b/apps/data-norge/src/app/components/docs/docs-page/index.tsx
@@ -42,13 +42,15 @@ const getContentDirectory = (rootContentDirectory: string) => {
 
 export type DocsPageProps = {
     rootContentDirectory: string;
-    params: {
+    params: Promise<{
         lang: LocaleCodes;
         slug: string[];
-    };
+    }>;
 };
 
-export default async function DocsPage({ params, rootContentDirectory }: DocsPageProps) {
+export default async function DocsPage(pageProps: DocsPageProps) {    
+    const params = await pageProps.params;
+    const rootContentDirectory = pageProps.rootContentDirectory;
     const locale = params.lang ?? i18n.defaultLocale;
     const slug = params.slug ?? [];
     const pageName = slug.length ? slug.at(-1) : rootContentDirectory;
@@ -191,12 +193,12 @@ export default async function DocsPage({ params, rootContentDirectory }: DocsPag
                 const match = /language-(\w+)/.exec(className || '');
                 return match ? (
                     // @ts-expect-error: ignore complaint that vscDarkPlus does not conform to CSSProperties
-                    <SyntaxHighlighter
+                    (<SyntaxHighlighter
                         style={vscDarkPlus as any}
                         language={match[1]}
                         PreTag='div'
                         {...rest}
-                    />
+                    />)
                 ) : (
                     <code
                         className={className}
@@ -239,9 +241,12 @@ export default async function DocsPage({ params, rootContentDirectory }: DocsPag
  * In generateMetadata we do exactly the same as in the Page component,
  * except we extract frontmatter instead of content from MDX compilation
  */
-export const generateMetadata = async function ({ params, rootContentDirectory }: DocsPageProps): Promise<Metadata> {
+export const generateMetadata = async function (pageProps: DocsPageProps): Promise<Metadata> {
+    const params = await pageProps.params
+    const rootContentDirectory = pageProps.rootContentDirectory;
     const locale = params.lang ?? i18n.defaultLocale;
     const slug = params.slug ?? [];
+
     const pageName = slug.length ? slug.at(-1) : rootContentDirectory;
 
     const contentDirectory = getContentDirectory(rootContentDirectory);

diff --git a/apps/data-norge/src/app/components/docs/mdx-heading/index.tsx b/apps/data-norge/src/app/components/docs/mdx-heading/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren, type JSX } from 'react';
 import slugify from 'slugify';
 
 import styles from './mdx-heading.module.scss';
@@ -10,7 +10,7 @@ const extractText = (children: React.ReactNode): string => {
                 return child;
             }
             if (React.isValidElement(child)) {
-                return extractText(child.props.children);
+                return extractText((child.props as PropsWithChildren).children);
             }
             return '';
         })

diff --git a/.../data-norge/src/app/components/frontpage/frontpage-banner/components/norgeskart/index.tsx b/.../data-norge/src/app/components/frontpage/frontpage-banner/components/norgeskart/index.tsx
@@ -1,20 +1,14 @@
 'use client';
 
-import dynamic from 'next/dynamic';
-
-// import { MapContainer, TileLayer } from 'react-leaflet';
-const MapContainer = dynamic(() => import('react-leaflet').then((module) => module.MapContainer), {
-    ssr: false,
-});
-const TileLayer = dynamic(() => import('react-leaflet').then((module) => module.TileLayer), {
-    ssr: false,
-});
-
 import 'leaflet/dist/leaflet.css';
 
 import styles from './norgeskart.module.scss';
+import React, { useEffect, useRef } from 'react';
 
 const Norgeskart = () => {
+    const mapRef = useRef<HTMLDivElement>(null); // Reference to the map container
+    const mapInstanceRef = useRef<any>(null); // Reference to the Leaflet map instance
+
     const urls = {
         kartverketOld:
             'https://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=norges_grunnkart_graatone&zoom={z}&x={x}&y={y}',
@@ -39,20 +33,37 @@ const Norgeskart = () => {
         { name: 'bronnoysund', lat: 65.4764088, lng: 12.2125588, zoom: 13, offset: 0.02 },
     ];
 
-    const randomIndex = Math.floor(Math.random() * locations.length);
-    const initCoords = locations[randomIndex];
-
-    return (
-        <MapContainer
-            className={styles.norgeskart}
-            center={[initCoords.lat - initCoords.offset, initCoords.lng]}
-            zoom={initCoords.zoom}
-            zoomControl={false}
-            aria-hidden={true}
-        >
-            <TileLayer url={urls.kartverket.topo} />
-        </MapContainer>
-    );
+    useEffect(() => {
+
+        const initializeMap = async () => {
+            // Dynamically import Leaflet only when needed
+            const L = await import('leaflet');
+            if (mapInstanceRef.current) return; // Prevent multiple initializations
+
+            const randomIndex = Math.floor(Math.random() * locations.length);
+            const initCoords = locations[randomIndex];
+
+            // Initialize Leaflet map
+            if(mapRef.current !== null) {
+                mapInstanceRef.current = L.map(mapRef.current, {
+                    center: [initCoords.lat - initCoords.offset, initCoords.lng],
+                    zoom: initCoords.zoom,
+                    zoomControl: false
+                });
+
+                // Add tile layer
+                L.tileLayer(urls.kartverket.topo, {}).addTo(mapInstanceRef.current);
+            }            
+        };
+
+        initializeMap();
+
+        return () => {
+            mapInstanceRef?.current?.remove(); // Clean up on unmount
+        };
+    }, []);
+
+    return <div ref={mapRef} className={styles.norgeskart} aria-hidden={true} />;
 };
 
 export default Norgeskart;
diff --git a/apps/data-norge/src/app/components/frontpage/llm-search/index.tsx b/apps/data-norge/src/app/components/frontpage/llm-search/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
-import { motion } from 'framer-motion';
+import { ForwardRefComponent, motion } from 'framer-motion';
 import { Textfield, Button, Spinner, ErrorMessage } from '@digdir/designsystemet-react';
 import { SparklesIcon } from '@navikt/aksel-icons';
 import { Dictionary } from '@fdk-frontend/dictionaries';
@@ -18,6 +18,9 @@ type LlmSearchProps = {
     baseUri: string;
 };
 
+const MotionDiv: ForwardRefComponent<any, any> = motion.div;
+const MotionUl: ForwardRefComponent<any, any> = motion.ul;
+
 const LlmSearch = ({ endpoint, dictionary, baseUri }: LlmSearchProps) => {
     const [loading, setLoading] = useState<boolean>(false);
     const [query, setQuery] = useState<string>('');
@@ -157,13 +160,13 @@ const LlmSearch = ({ endpoint, dictionary, baseUri }: LlmSearchProps) => {
                 </div>
             )}
             {results && !loading && (
-                <motion.div
-                    className={styles.llmResults}
+                <MotionDiv
+                    className={styles.llmResults as string}
                     variants={animations.resultsContainer}
                     initial='hidden'
                     animate='show'
                 >
-                    <motion.ul
+                    <MotionUl
                         className={styles.llmResultsList}
                         variants={animations.resultsList}
                         initial='hidden'
@@ -187,8 +190,8 @@ const LlmSearch = ({ endpoint, dictionary, baseUri }: LlmSearchProps) => {
                                 baseUri={baseUri}
                             />
                         </motion.li>
-                    </motion.ul>
-                </motion.div>
+                    </MotionUl>
+                </MotionDiv>
             )}
         </div>
     );