Frontend refactor for profile

.github/workflows/ci.yml

@@ -19,7 +19,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [ 18.x , 20.x , 22.x ]
+        node-version: [ 20.x , 22.x ]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
     steps:
       - uses: actions/checkout@v5

.gitignore

@@ -1,5 +1,6 @@
 lib
 node_modules
+coverage
 .DS_Store
 .history
 .vscode

babel.config.mjs

@@ -0,0 +1,6 @@
+export default {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript'
+  ]
+}

declarations.d.ts

@@ -1,3 +1,5 @@
+declare module '*.module.css';
+
 declare module '*.ttl' {
   const content: string;
   export default content;

dev/context.ts

@@ -1,12 +1,12 @@
-import { longChatPane } from "chat-pane";
-import { DataBrowserContext, PaneRegistry } from "pane-registry";
-import { LiveStore, solidLogicSingleton, store } from "solid-logic";
+import { longChatPane } from 'chat-pane'
+import { DataBrowserContext, PaneRegistry } from 'pane-registry'
+import { LiveStore, solidLogicSingleton, store } from 'solid-logic'
 
 export const context: DataBrowserContext = {
   session: {
     store: store as LiveStore,
     paneRegistry: {
       byName: (name: string) => {
         return longChatPane
       }
     } as PaneRegistry,
@@ -14,6 +14,6 @@
   },
   dom: document,
   getOutliner: () => null,
-};
+}
 
-export const fetcher = store.fetcher;
+export const fetcher = store.fetcher

dev/index.ts

@@ -1,30 +1,32 @@
-import { sym } from "rdflib";
-import { default as pane } from "../src";
-import { context, fetcher } from "./context";
-import { authn, authSession } from "solid-logic";
-import * as UI from "solid-ui";
+import '../src/styles/global.css'
+import '../src/styles/utilities.css'
+import { sym } from 'rdflib'
+import { default as pane } from '../src'
+import { context, fetcher } from './context'
+import { authn, authSession } from 'solid-logic'
+import * as UI from 'solid-ui'
 
-const loginBanner = document.getElementById("loginBanner");
-const webId = document.getElementById("webId");
+const loginBanner = document.getElementById('loginBanner')
+const webId = document.getElementById('webId')
 
-loginBanner.appendChild(UI.login.loginStatusBox(document, null, {}));
+loginBanner.appendChild(UI.login.loginStatusBox(document, null, {}))
 
 async function finishLogin() {
-  await authSession.handleIncomingRedirect();
-  const session = authSession;
+  await authSession.handleIncomingRedirect()
+  const session = authSession
   if (session.info.isLoggedIn) {
     // Update the page with the status.
-    webId.innerHTML = "Logged in as: " + authn.currentUser().uri;
+    webId.innerHTML = 'Logged in as: ' + authn.currentUser().uri
   } else {
-    webId.innerHTML = "";
+    webId.innerHTML = ''
   }
 }
 
-finishLogin();
+finishLogin()
 
-const webIdToShow = "https://testingsolidos.solidcommunity.net/profile/card#me";
+const webIdToShow = 'https://testingsolidos.solidcommunity.net/profile/card#me'
 
 fetcher.load(webIdToShow).then(() => {
-  const app = pane.render(sym(webIdToShow), context);
-  document.getElementById("app").replaceWith(app);
-});
+  const app = pane.render(sym(webIdToShow), context)
+  document.getElementById('app').replaceWith(app)
+})

eslint.config.mjs

@@ -0,0 +1,73 @@
+import tsParser from "@typescript-eslint/parser"
+import tseslintPlugin from "@typescript-eslint/eslint-plugin"
+
+export default [
+    {
+        ignores: [
+            'lib/**',
+            'node_modules/**',
+            'coverage/**'
+        ],
+    },
+    {
+        files: ['src/**/*.js', 'src/**/*.ts', 'src/**/*.cjs', 'src/**/*.mjs'],
+        languageOptions: {
+            parser: tsParser,
+            parserOptions: {
+                project: ['./tsconfig.json'],
+                sourceType: 'module',
+            },
+        },
+        plugins: {
+            "@typescript-eslint": tseslintPlugin,
+        },
+        rules: {
+            semi: ['error', 'never'],
+            quotes: ['error', 'single'],
+            'no-unused-vars': 'off', // handled by TS
+            '@typescript-eslint/no-unused-vars': ['warn'],
+            '@typescript-eslint/no-explicit-any': 'warn',
+        },
+        settings: {
+            react: {
+                version: "detect",
+            },
+        },
+    },
+    {
+        files: ['dev/**/*.ts'],
+        languageOptions: {
+            parser: tsParser,
+            parserOptions: {
+                project: ['./tsconfig.eslint.json'],
+                sourceType: 'module',
+            },
+        },
+        plugins: {
+            "@typescript-eslint": tseslintPlugin,
+        },
+        rules: {
+            semi: ['error', 'never'],
+            quotes: ['error', 'single'],
+            'no-unused-vars': 'off', // handled by TS
+            '@typescript-eslint/no-unused-vars': ['warn'],
+            '@typescript-eslint/no-explicit-any': 'warn',
+        },
+    },
+    {
+        files: ['test/**/*.js', 'test/**/*.ts'],
+        languageOptions: {
+            parser: tsParser,
+            parserOptions: {
+                project: ['./tsconfig.test.json'],
+            },
+        },
+        rules: {
+            semi: ['error', 'never'],
+            quotes: ['error', 'single'],
+            'no-console': 'off', // Allow console in tests
+            'no-undef': 'off', // Tests may define globals
+        }
+    }
+]
+

jest.config.mjs

@@ -0,0 +1,21 @@
+export default {
+  // verbose: true, // Uncomment for detailed test output
+  collectCoverage: true,
+  coverageDirectory: 'coverage',
+  testEnvironment: 'jsdom',
+   testEnvironmentOptions: {
+    customExportConditions: ['node'],
+  },
+  setupFilesAfterEnv: ["./test/helpers/jest.setup.ts"],
+  transformIgnorePatterns: ["/node_modules/(?!lit-html).+\\.js"],
+  testPathIgnorePatterns: ['/node_modules/', '/lib/'],
+  moduleNameMapper: {
+    '^[./a-zA-Z0-9$_-]+\\.ttl$': '<rootDir>/__mocks__/fileMock.js',    // '\\.ttl$'
+    // Mock CSS modules
+    '\\.module\\.css$': 'identity-obj-proxy',
+    // Mock other style files (optional)
+    '\\.(css|less|sass|scss)$': 'identity-obj-proxy'
+  },
+  roots: ['<rootDir>/src', '<rootDir>/test', '<rootDir>/__mocks__'],
+}
+