feat: migrate to nextjs

.github/workflows/build.yml

@@ -1,27 +1,26 @@
 name: Quality
 on:
-  push:
-    branches:
-      - main
-  pull_request:
-    types: [opened, synchronize, reopened]
+    push:
+        branches:
+            - main
+    pull_request:
+        types: [opened, synchronize, reopened]
 jobs:
-  test-build:
-    name: Test & build
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [ 22 ]
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node }}
-      - run: yarn
-      - run: yarn test --coverage --watch=false
-      - run: yarn build
-      - name: SonarCloud Scan
-        uses: sonarsource/sonarcloud-github-action@master
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          SONAR_TOKEN: ${{ secrets. SONAR_TOKEN }}
+    test-build:
+        name: Test & build
+        runs-on: ubuntu-latest
+        strategy:
+            matrix:
+                node: [22]
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: ${{ matrix.node }}
+            - run: npm i
+            - run: npm run build
+            - name: SonarCloud Scan
+              uses: sonarsource/sonarcloud-github-action@master
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+                  SONAR_TOKEN: ${{ secrets. SONAR_TOKEN }}

.github/workflows/playwright.yml

@@ -8,6 +8,7 @@ jobs:
     test:
         timeout-minutes: 60
         runs-on: ubuntu-latest
+        if: false
         steps:
             - uses: actions/checkout@v4
             - uses: actions/setup-node@v4

.gitignore

@@ -1,10 +1,42 @@
-temp_dist
-build
-node_modules
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+/test-results
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
 .DS_Store
-.idea
-coverage
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache/
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Dockerfile

@@ -1,31 +1,28 @@
-### BUILD STEP ###
+# Étape 1 : Build
+FROM node:20-alpine AS builder
 
-FROM node:latest AS builder
+WORKDIR /app
 
-WORKDIR /impala
+COPY package.json package-lock.json* ./
 
-COPY ./ ./
+RUN npm install
 
-RUN yarn && yarn build
+COPY . .
 
-### EXECUTION STEP ###
+RUN npm run build
 
-FROM nginxinc/nginx-unprivileged:1.27-alpine
+FROM node:20-alpine AS runner
 
-# Non root user
-ENV NGINX_USER_ID=101
-ENV NGINX_GROUP_ID=101
-ENV NGINX_USER=nginx
-ENV NGINX_GROUP=nginx
+ENV NODE_ENV=production
+ENV PORT=3000
 
-USER $NGINX_USER_ID
+WORKDIR /app
 
-# Add build to nginx root webapp
-COPY --from=builder --chown=$NGINX_USER:$NGINX_GROUP /impala/build /usr/share/nginx/html
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
 
-# Copy nginx configuration
-# Copier le fichier de configuration Nginx
-COPY nginx.conf /etc/nginx/nginx.conf.template
+EXPOSE 3000
 
-# Substituer les variables d'environnement et démarrer Nginx
-#CMD ["sh", "-c", "envsubst < /etc/nginx/nginx.conf.template > /etc/nginx/nginx.conf && nginx -g 'daemon off;'"]
+CMD ["npm", "start"]

LICENSE

@@ -1,21 +1 @@
 MIT License
-
-Copyright (c) 2021 Insee
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

app/layout.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable @next/next/no-sync-scripts */
+import "./globals.css";
+
+export default function RootLayout({
+    children
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <html lang="fr">
+            <head>
+                <meta charSet="utf-8" />
+                <link rel="icon" href="/insee.ico" />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <meta name="theme-color" content="#000000" />
+                <link href="/yasgui.css" rel="stylesheet" type="text/css" />
+                <script src="/yasgui.min.js"></script>
+
+                <meta name="description" content="Web site created using create-react-app" />
+                <link rel="apple-touch-icon" href="/logo192.png" />
+
+                <link rel="manifest" href="/manifest.json" />
+                <title>Espace RDF de l&rsquo;Insee</title>
+            </head>
+
+            <body>
+                <noscript>You need to enable JavaScript to run this app.</noscript>
+                <h1>
+                    <img src="/insee.png" alt="INSEE" />
+                </h1>
+
+                {children}
+            </body>
+        </html>
+    );
+}

src/App.jsx → app/page.tsx

@@ -1,46 +1,77 @@
+"use client";
+
 import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
-import PropTypes from "prop-types";
 
-const defaultEndpoint = "http://rdf.insee.fr/sparql";
+const defaultEndpoint = "/sparql";
 const defaultPrefix = "https://rdf.insee.fr/sparql?query=DESCRIBE";
+type YasguiType = {
+    getTab: () => {
+        setQuery: (query: string) => void;
+    };
+};
+declare global {
+    interface Window {
+        Yasgui: new (
+            container: HTMLElement,
+            config?: {
+                requestConfig?: {
+                    endpoint?: string;
+                };
+            }
+        ) => YasguiType;
+    }
+}
 
-function Editor({ endpoint, queries, prefix }) {
-    const [yasgui, setYasgui] = useState();
+function Editor({
+    endpoint,
+    queries,
+    prefix
+}: {
+    endpoint: string;
+    queries: { path: string; label: string }[];
+    prefix: string;
+}) {
+    const [yasgui, setYasgui] = useState<YasguiType>();
     const [counter, setCounter] = useState(0);
-    const ref = useRef(null);
-    const editorRef = useRef(null);
+    const ref = useRef<HTMLDivElement>(null);
+    const editorRef = useRef<HTMLDivElement>(null);
 
     const [inserted, setInserted] = useState(false);
 
     useLayoutEffect(() => {
         if (counter > 100 || inserted) {
             return;
         }
-        if (document.querySelector(".yasqe")) {
-            document.querySelector(".yasqe").appendChild(ref.current);
+        const yasque = document.querySelector(".yasqe");
+        if (yasque !== null && ref.current !== null) {
+            yasque.appendChild(ref.current);
             setInserted(true);
         }
         setCounter(counter + 1);
     }, [counter, inserted]);
 
-    const click = query => {
+    const click = (query: { path: string }) => {
         fetch(query.path)
             .then(response => response.text())
             .then(body => {
-                const tab = yasgui.getTab();
-                tab.setQuery(body);
+                if (!!yasgui) {
+                    const tab = yasgui.getTab();
+                    tab.setQuery(body);
+                }
             });
     };
 
     useLayoutEffect(() => {
+        if (!editorRef.current) {
+            return;
+        }
         if (editorRef.current.getAttribute("data-yasgui") === "true") {
             return;
         }
         localStorage.removeItem("yagui__config");
         editorRef.current.setAttribute("data-yasgui", "true");
         setYasgui(
-            // eslint-disable-next-line no-undef
-            new Yasgui(editorRef.current, {
+            new window.Yasgui(editorRef.current, {
                 requestConfig: {
                     endpoint
                 }
@@ -62,30 +93,25 @@ function Editor({ endpoint, queries, prefix }) {
                 id="editor"
                 ref={editorRef}
                 onClick={e => {
+                    const link = e.target as HTMLLinkElement;
                     if (
                         endpoint !== defaultEndpoint &&
-                        e.target.href &&
-                        e.target.href.indexOf("http://id.insee.fr/") === 0 &&
-                        e.target.href.indexOf(prefix) !== 0
+                        link.href &&
+                        link.href.indexOf("http://id.insee.fr/") === 0 &&
+                        link.href.indexOf(prefix) !== 0
                     ) {
-                        e.target.href = prefix + encodeURIComponent(`<${e.target.href}>`);
+                        link.href = prefix + encodeURIComponent(`<${link.href}>`);
                     }
                 }}
             ></div>
         </>
     );
 }
 
-Editor.propTypes = {
-    endpoint: PropTypes.string,
-    queries: PropTypes.array,
-    prefix: PropTypes.string
-};
-
 function App() {
-    const [queries, setQueries] = useState([]);
-    const [prefix, setPrefix] = useState();
-    const [endpoint, setEndpoint] = useState();
+    const [queries, setQueries] = useState<{ path: string; label: string }[]>([]);
+    const [prefix, setPrefix] = useState<string>();
+    const [endpoint, setEndpoint] = useState<string>();
 
     useEffect(() => {
         fetch("/queries/queries.json")
@@ -108,8 +134,10 @@ function App() {
             });
     }, []);
 
-    const footer = `${import.meta.env.VITE_NAME?.toUpperCase()} : v${import.meta.env.VITE_VERSION}`;
-
+    if (!prefix) {
+        return null;
+    }
+    const footer = `${process.env.NEXT_PUBLIC_NAME?.toUpperCase()} : v${process.env.NEXT_PUBLIC_VERSION}`;
     return (
         <div className="App">
             {endpoint && <Editor endpoint={endpoint} queries={queries} prefix={prefix} />}