Merge branch 'main' into guoda-fix-grid-story

.changeset/grumpy-spies-hunt.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-url-state-provider": minor
+---
+
+Migrate to url-state-provider to typescript.

packages/url-state-provider/eslint.config.mjs

@@ -3,14 +3,25 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import junoConfigs from "@cloudoperators/juno-config/eslint/juno.mjs"
+import junoConfigs from "@cloudoperators/juno-config/eslint/juno-typescript.mjs"
 
 export default [
   ...junoConfigs,
   {
-    files: ["**/*.test.js"],
+    files: ["**/*.ts"],
     languageOptions: {
-      sourceType: "module",
+      parserOptions: {
+        project: ["./tsconfig.json"], // Ensure this points to your tsconfig.json
+      },
     },
+    // TODO: We need to make all of this checks on again, step by step
+    rules: {
+      "@typescript-eslint/no-unsafe-assignment": "off",
+      "@typescript-eslint/no-unsafe-call": "off",
+      "@typescript-eslint/no-unsafe-argument": "off",
+      "@typescript-eslint/no-unsafe-member-access": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+    },
+    ignores: ["vitest.config.ts", "vite.config.ts"],
   },
 ]

packages/url-state-provider/package.json

@@ -14,6 +14,7 @@
   "source": "src/index.js",
   "main": "build/index.js",
   "module": "build/index.js",
+  "types": "build/index.d.ts",
   "files": [
     "build"
   ],
@@ -27,6 +28,7 @@
     "dev": "vite",
     "lint": "eslint",
     "test": "vitest run",
+    "typecheck": "tsc --noEmit",
     "clean": "rm -rf build && rm -rf node_modules && rm -rf .turbo",
     "clean:cache": "rm -rf .turbo"
   },
@@ -35,8 +37,10 @@
     "jsdom": "^18.0.0",
     "juri-cutlery": "^1.0.0",
     "lz-string": "^1.4.4",
+    "typescript": "^5.5.4",
     "vite": "^5.4.8",
-    "vitest": "^2.1.1"
+    "vitest": "^2.1.1",
+    "vite-plugin-dts": "^4.0.3"
   },
   "babel": {
     "presets": [

packages/url-state-provider/src/index.test.js → packages/url-state-provider/src/index.test.ts

@@ -9,6 +9,7 @@
  * @jest-environment jsdom
  */
 import * as provider from "./index"
+import { describe, it, vi, expect } from "vitest"
 
 Object.defineProperty(window, "location", {
   value: {
@@ -110,7 +111,7 @@ describe("currentState", () => {
     })
 
     it("should modify state search param in URL", () => {
-      var newState = provider.encode({
+      const newState = provider.encode({
         consumer1: { p: "/about", o: { tab: 1 } },
         consumer2: { p: "/items/10", o: { tab: 2 } },
       })
@@ -119,7 +120,7 @@ describe("currentState", () => {
     })
 
     it("should not modify other search params in URL", () => {
-      var newState = provider.encode({
+      const newState = provider.encode({
         consumer1: { p: "/about", o: { tab: 1 } },
         consumer2: { p: "/items/10", o: { tab: 2 } },
       })
@@ -136,7 +137,7 @@ describe("currentState", () => {
       })
 
       it("should add ?", () => {
-        var newState = provider.encode({
+        const newState = provider.encode({
           consumer1: { p: "/about" },
         })
 
@@ -145,24 +146,24 @@ describe("currentState", () => {
     })
 
     it("support 50 states with a path length of 1000 characters", () => {
-      let stateCount = 50
-      let pathLength = 1000
-      let states = {}
+      const stateCount = 50
+      const pathLength = 1000
+      const states: { [key: string]: any } = {}
       for (let i = 0; i < stateCount; i++) {
-        var key = "consumer" + i
-        var state = {
+        const key = "consumer" + i
+        const state = {
           p: new Array(pathLength + 1).join("x"),
           o: { tab: 2, option1: "test", option2: "test " },
         }
         provider.push(key, state)
         states[key] = state
       }
 
-      var urlState = new URL(window.location.href).searchParams.get("__s")
+      const urlState = new URL(window.location.href).searchParams.get("__s")
       // The browsers allow 2040 characters long URLs.
       // If we stay below 1500 characters, we can still support 50 different states with
       // a length of up to 1000 characters per path.
-      expect(urlState.length < 1500).toEqual(true)
+      expect(urlState && urlState.length < 1500).toEqual(true)
     })
   })
 
@@ -194,7 +195,7 @@ describe("currentState", () => {
     })
 
     it("should modify state search param in URL", () => {
-      var newState = provider.encode({
+      const newState = provider.encode({
         consumer1: { p: "/about", o: { tab: 1 } },
         consumer2: { p: "/items/10", o: { tab: 2 } },
       })
@@ -203,7 +204,7 @@ describe("currentState", () => {
     })
 
     it("should not modify other search params in URL", () => {
-      var newState = provider.encode({
+      const newState = provider.encode({
         consumer1: { p: "/about", o: { tab: 1 } },
         consumer2: { p: "/items/10", o: { tab: 2 } },
       })
@@ -213,13 +214,13 @@ describe("currentState", () => {
     describe("search params are empty", () => {
       beforeAll(() => {
         vi.resetModules()
-        delete window["__url_state_provider"]
+        delete window.__url_state_provider
         window.location.href = "http://localhost"
         provider.replace("consumer1", { p: "/about" })
       })
 
       it("should add ?", () => {
-        var newState = provider.encode({
+        const newState = provider.encode({
           consumer1: { p: "/about" },
         })
 
@@ -229,7 +230,7 @@ describe("currentState", () => {
   })
 
   describe("addOnChangeListener", () => {
-    var listener
+    let listener: () => void
     beforeAll(() => {
       vi.resetModules()
       listener = vi.fn(() => null)
@@ -261,7 +262,7 @@ describe("currentState", () => {
   })
 
   describe("removeOnChangeListener", () => {
-    var listener
+    let listener: () => void
     beforeAll(() => {
       vi.resetModules()
       listener = vi.fn(() => null)
@@ -275,34 +276,4 @@ describe("currentState", () => {
       expect(listener).not.toHaveBeenCalled()
     })
   })
-
-  describe("registerConsumer", () => {
-    it("should be a function", () => {
-      expect(typeof provider.registerConsumer === "function").toEqual(true)
-    })
-
-    describe("consumer properties", () => {
-      var consumer = provider.registerConsumer("key1")
-
-      it("should return an object", () => {
-        expect(typeof consumer === "object").toEqual(true)
-      })
-
-      it("responds to currentState", () => {
-        expect(typeof consumer.currentState === "function").toEqual(true)
-      })
-
-      it("responds to push", () => {
-        expect(typeof consumer.push === "function").toEqual(true)
-      })
-
-      it("responds to replace", () => {
-        expect(typeof consumer.replace === "function").toEqual(true)
-      })
-
-      it("responds to onChange", () => {
-        expect(typeof consumer.onChange === "function").toEqual(true)
-      })
-    })
-  })
 })