[js] Create public UI package. Upgrade to Typescript 5. Towards LIG-3…

…608. Closes (#328)

* [js] Create public UI package. Upgrade to Typescript 5. Towards LIG-3608. Closes LIG-3610. (#7461)

- Move all files in `ui` to src folder to match other workspaces and
make `tsc` and `build` possible.
-
[Remove](https://github.com/lightsparkdev/webdev/pull/7461/files?w=1#diff-7ce14fdcf191969261acfde125e198e54c7c9f10742c8f604ee2d73444820f54L10-R10)
transpile of ui code from apps that use it. It's built and type checked
independently now.
- See `ui` [tsup
config](https://github.com/lightsparkdev/webdev/pull/7461/files?w=1#diff-9bc1f7ad2a6d21f54c60a86f8ddd2757226bc3eb2956e5eaf47b5fa42fb0540e)
for changes needed to build and resolve properly for our `bundler` apps.
- Upgrade to Typescript 5, allowing us to use `bundler` moduleResolution
in tsconfig. This makes imports like @lightsparkdev/ui/components much
easier by supporting the ["exports" property in
package.json](https://github.com/lightsparkdev/webdev/pull/7461/files?w=1#diff-d0a0477ce652623b1bd81063e16fab8fede6df5d0c48b92d469a941d0cf94135R10-R24).
- Fonts are now loaded from `ui` package
- Simplify / fix lint configuration. We now just have base.json,
react-lib.json, and react-app.json. Rules are consolidated and properly
scoped per file type.
- Motivation for these changes came from lint config problems exposed by
ui package changes and new errors that appeared there.
- New lint rule enforcing comment length with autofix available (not
available in prettier)

GitOrigin-RevId: 4184002f1136b2c84c10d444be405b8a6db2659e

* Create rare-ladybugs-allow.md

* CI update lock file for PR

---------

Co-authored-by: Corey Martin <coreyn.martin@gmail.com>
Co-authored-by: Lightspark Eng <engineering@lightspark.com>

.changeset/rare-ladybugs-allow.md

@@ -0,0 +1,14 @@
+---
+"@lightsparkdev/ls-react-native-crypto": patch
+"@lightsparkdev/lightspark-cli": patch
+"@lightsparkdev/lightspark-sdk": patch
+"@lightsparkdev/react-native": patch
+"@lightsparkdev/react-wallet": patch
+"@lightsparkdev/wallet-cli": patch
+"@lightsparkdev/wallet-sdk": patch
+"@lightsparkdev/oauth": patch
+"@lightsparkdev/core": patch
+"@lightsparkdev/ui": patch
+---
+
+Upgrade to Typescript 5, lint config changes

apps/examples/jwt-server/package.json

@@ -30,7 +30,7 @@
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-import": "^2.26.0",
     "firebase-functions-test": "^3.0.0",
-    "typescript": "^4.9.5"
+    "typescript": "^5.0.0"
   },
   "private": true
 }

apps/examples/ls-react-native-crypto-app/package.json

@@ -22,7 +22,7 @@
   "devDependencies": {
     "@babel/core": "^7.21.4",
     "@types/react": "^18.2.12",
-    "typescript": "^4.9.5"
+    "typescript": "^5.0.0"
   },
   "private": true,
   "expo": {

apps/examples/oauth-app/index.html

@@ -11,17 +11,7 @@
     />
     <link rel="apple-touch-icon" href="/logo192.png" />
     <link rel="manifest" href="/manifest.json" />
-
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      rel="preload"
-      href="https://fonts.googleapis.com/css?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-      as="style"
-    />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-    />
 
     <title>Lightspark OAuth Demo</title>
   </head>

apps/examples/oauth-app/package.json

@@ -8,7 +8,7 @@
     "@emotion/styled": "^11.11.0",
     "@lightsparkdev/lightspark-sdk": "1.2.2",
     "@lightsparkdev/oauth": "*",
-    "@lightsparkdev/ui": "*",
+    "@lightsparkdev/ui": "0.0.0",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.1.0",
@@ -26,7 +26,7 @@
     "eslint": "^8.3.0",
     "eslint-watch": "^8.0.0",
     "tsc-absolute": "^1.0.1",
-    "typescript": "^4.9.5",
+    "typescript": "^5.0.0",
     "vite": "^4.3.9"
   },
   "scripts": {

apps/examples/oauth-app/tsconfig.json

@@ -7,6 +7,6 @@
     },
     "types": ["node", "vite/client"]
   },
-  "include": ["src/**/*", "../../../packages/ui/**/*"],
+  "include": ["src/**/*"],
   "exclude": ["node_modules"]
 }

apps/examples/react-wallet-app/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -10,20 +10,8 @@
       content="A demo of react hooks from the Lightspark Wallet SDK"
     />
     <link rel="apple-touch-icon" href="/logo192.png" />
-
     <link rel="manifest" href="/manifest.json" />
-
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      rel="preload"
-      href="https://fonts.googleapis.com/css?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-      as="style"
-    />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-    />
-
     <title>Lightspark React Wallet App Demo</title>
   </head>
   <body>

apps/examples/react-wallet-app/package.json

@@ -8,7 +8,7 @@
     "@emotion/styled": "^11.11.0",
     "@lightsparkdev/core": "1.0.10",
     "@lightsparkdev/react-wallet": "0.6.35",
-    "@lightsparkdev/ui": "*",
+    "@lightsparkdev/ui": "0.0.0",
     "@lightsparkdev/wallet-sdk": "0.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.1.0",
@@ -37,7 +37,7 @@
     "eslint": "^8.3.0",
     "eslint-watch": "^8.0.0",
     "tsc-absolute": "^1.0.1",
-    "typescript": "^4.9.5",
+    "typescript": "^5.0.0",
     "vite": "^4.3.9"
   }
 }

apps/examples/react-wallet-app/src/components/Dashboard.tsx

@@ -4,10 +4,9 @@ import { CurrencyAmount } from "@lightsparkdev/ui/components/CurrencyAmount";
 import type {
   CurrencyAmount as CurrencyAmountType,
   Transaction,
-  WalletDashboard} from "@lightsparkdev/wallet-sdk";
-import {
-  CurrencyUnit
+  WalletDashboard,
 } from "@lightsparkdev/wallet-sdk";
+import { CurrencyUnit } from "@lightsparkdev/wallet-sdk";
 import { Button } from "src/components/Button";
 import { Table, Td, Th, Tr } from "./Table";
 

apps/examples/react-wallet-app/src/pages/DashboardPage.tsx

@@ -76,8 +76,9 @@ function DashboardPage() {
               await DefaultCrypto.serializeSigningKey(keys.publicKey, "spki");
             const serializedPrivateKeyBytes =
               await DefaultCrypto.serializeSigningKey(keys.privateKey, "pkcs8");
-            // You can save the keys somewhere here if you want to use them later. Here,
-            // we're just logging them to the console for demo purposes.
+            // You can save the keys somewhere here if you want to use them
+            // later. Here, we're just logging them to the console for demo
+            // purposes.
             console.log(
               "Save these keys if you want to use this wallet later!"
             );

apps/examples/react-wallet-app/tsconfig.json

@@ -7,6 +7,6 @@
     },
     "types": ["node", "vite/client"]
   },
-  "include": ["src/**/*", "../../../packages/ui/**/*"],
+  "include": ["src/**/*"],
   "exclude": ["node_modules"]
 }

apps/examples/remote-signing-server/package.json

@@ -23,6 +23,6 @@
     "supertest": "^6.3.3",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.5"
+    "typescript": "^5.0.0"
   }
 }

apps/examples/streaming-wallet-extension/index.html

@@ -6,15 +6,7 @@
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Lightspark Lightning Wallet" />
     <link rel="manifest" href="/manifest.json" />
-    <link
-      rel="preload"
-      href="https://fonts.googleapis.com/css?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-      as="style"
-    />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-    />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <title>Lightspark Wallet</title>
   </head>
   <body>

apps/examples/streaming-wallet-extension/package.json

@@ -7,6 +7,7 @@
     "@emotion/styled": "^11.11.0",
     "@lightsparkdev/core": "1.0.10",
     "@lightsparkdev/lightspark-sdk": "1.2.2",
+    "@lightsparkdev/ui": "0.0.0",
     "eslint": "^8.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.1.0",
@@ -39,7 +40,7 @@
     "@vitejs/plugin-react": "^4.0.1",
     "eslint-watch": "^8.0.0",
     "tsc-absolute": "^1.0.1",
-    "typescript": "^4.9.5",
+    "typescript": "^5.0.0",
     "vite": "^4.3.9"
   }
 }

apps/examples/streaming-wallet-extension/src/common/types.tsx

@@ -4,7 +4,7 @@ export type Maybe<T> = T | null | undefined;
 
 export type ExpandRecursively<T> = T extends object
   ? T extends infer O
-    ? { [K in keyof O]: ExpandRecursively<O[K]> } // eslint-disable-line @typescript-eslint/no-unused-vars
+    ? { [K in keyof O]: ExpandRecursively<O[K]> }
     : never
   : T;
 

apps/examples/uma-vasp/package.json

@@ -25,6 +25,6 @@
     "supertest": "^6.3.3",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.5"
+    "typescript": "^5.0.0"
   }
 }

apps/examples/wallet-node-scripts/package.json

@@ -13,7 +13,7 @@
   "devDependencies": {
     "@types/node": "^20.2.5",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.5"
+    "typescript": "^5.0.0"
   },
   "dependencies": {
     "@lightsparkdev/core": "1.0.10",

packages/core/package.json

@@ -61,7 +61,7 @@
   ],
   "scripts": {
     "build": "yarn tsc && tsup",
-    "build:watch": "yarn build --watch",
+    "build:watch": "yarn build --watch --clean=false",
     "clean": "rm -rf .turbo && rm -rf dist",
     "dev": "yarn build -- --watch",
     "format:fix": "prettier src --write",
@@ -101,6 +101,6 @@
     "ts-jest": "^29.1.1",
     "tsc-absolute": "^1.0.1",
     "tsup": "^7.2.0",
-    "typescript": "^4.9.5"
+    "typescript": "^5.0.0"
   }
 }

packages/core/src/crypto/crypto.ts

@@ -154,8 +154,7 @@ const decrypt = async (
     const salt = decoded.slice(decoded.length - 8, decoded.length);
     const nonce = decoded.slice(0, 12);
     const cipherText = decoded.slice(12, decoded.length - 8);
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [key, _iv] = await deriveKey(
+    const [key /* , _iv */] = await deriveKey(
       password,
       salt,
       header.i,

packages/core/src/crypto/index.ts

@@ -1,8 +1,8 @@
 // Copyright ©, 2023-present, Lightspark Group, Inc. - All Rights Reserved
 
-export * from "./crypto.js";
 export * from "./KeyOrAlias.js";
 export { default as LightsparkSigningException } from "./LightsparkSigningException.js";
 export { default as NodeKeyCache } from "./NodeKeyCache.js";
 export * from "./SigningKey.js";
+export * from "./crypto.js";
 export * from "./types.js";

packages/core/src/crypto/tests/crypto.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "@jest/globals";
-import { b64encode, DefaultCrypto } from "../../index.js";
+import { DefaultCrypto, b64encode } from "../../index.js";
 
 describe("Crypto tests", () => {
   test("should generate a key", async () => {

packages/core/src/index.ts

@@ -1,13 +1,13 @@
 // Copyright ©, 2023-present, Lightspark Group, Inc. - All Rights Reserved
 
-export * from "./auth/index.js";
-export * from "./constants/index.js";
-export * from "./crypto/index.js";
 export { default as LightsparkException } from "./LightsparkException.js";
 export { Logger } from "./Logger.js";
-export * from "./requester/index.js";
 export {
-  apiDomainForEnvironment,
   default as ServerEnvironment,
+  apiDomainForEnvironment,
 } from "./ServerEnvironment.js";
+export * from "./auth/index.js";
+export * from "./constants/index.js";
+export * from "./crypto/index.js";
+export * from "./requester/index.js";
 export * from "./utils/index.js";

packages/core/src/requester/Query.ts

@@ -7,7 +7,10 @@ type Query<T> = {
   /** The variables that will be passed to the query. **/
   variables?: { [key: string]: unknown };
 
-  /** The function that will be called to construct the object from the response. **/
+  /**
+   * The function that will be called to construct the object from the
+   * response. *
+   */
   constructObject: (rawData: any) => T; // eslint-disable-line @typescript-eslint/no-explicit-any -- LIG-3400
 
   /** The id of the node that will be used to sign the query. **/