@kheopskit/react 0.0.1-alpha.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @kheopskit/react
+
+## 0.0.1-alpha.0
+
+### Patch Changes
+
+- [`3216d3b`](https://github.com/0xKheops/kheopskit-alpha/commit/3216d3b4ca1f2fadbebe9a4275e7b864ac89d222) Thanks [@0xKheops](https://github.com/0xKheops)! - initial alpha release
+
+- Updated dependencies [[`3216d3b`](https://github.com/0xKheops/kheopskit-alpha/commit/3216d3b4ca1f2fadbebe9a4275e7b864ac89d222)]:
+  - @kheopskit/core@0.0.1-alpha.0

package/dist/index.d.mts

@@ -0,0 +1,21 @@
+import { FC, PropsWithChildren } from 'react';
+import * as _kheopskit_core from '@kheopskit/core';
+import { KheopskitConfig } from '@kheopskit/core';
+
+declare const SuspenseMonitorInner: FC<{
+    label: string;
+}>;
+declare const SuspenseMonitor: FC<{
+    label: string;
+}>;
+
+declare const useWallets: () => {
+    wallets: _kheopskit_core.Wallet[];
+    accounts: _kheopskit_core.WalletAccount[];
+};
+
+declare const KheopskitProvider: FC<PropsWithChildren & {
+    config: KheopskitConfig;
+}>;
+
+export { KheopskitProvider, SuspenseMonitor, SuspenseMonitorInner, useWallets };

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+import { FC, PropsWithChildren } from 'react';
+import * as _kheopskit_core from '@kheopskit/core';
+import { KheopskitConfig } from '@kheopskit/core';
+
+declare const SuspenseMonitorInner: FC<{
+    label: string;
+}>;
+declare const SuspenseMonitor: FC<{
+    label: string;
+}>;
+
+declare const useWallets: () => {
+    wallets: _kheopskit_core.Wallet[];
+    accounts: _kheopskit_core.WalletAccount[];
+};
+
+declare const KheopskitProvider: FC<PropsWithChildren & {
+    config: KheopskitConfig;
+}>;
+
+export { KheopskitProvider, SuspenseMonitor, SuspenseMonitorInner, useWallets };

package/dist/index.js

@@ -0,0 +1,98 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  KheopskitProvider: () => KheopskitProvider,
+  SuspenseMonitor: () => SuspenseMonitor,
+  SuspenseMonitorInner: () => SuspenseMonitorInner,
+  useWallets: () => useWallets
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/SuspenseMonitor.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SHOULD_LOG = true;
+var SuspenseMonitorInner = ({ label }) => {
+  const refStart = (0, import_react.useRef)(performance.now());
+  (0, import_react.useEffect)(() => {
+    const timeout = setTimeout(() => {
+      console.warn(`[Suspense] ${label} is hanging`);
+    }, 500);
+    return () => {
+      console.debug(
+        "[Suspense] %s : %s ms",
+        label,
+        (performance.now() - refStart.current).toFixed(2)
+      );
+      clearTimeout(timeout);
+    };
+  }, [label]);
+  return null;
+};
+var SuspenseMonitor = ({ label }) => SHOULD_LOG ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SuspenseMonitorInner, { label }) : null;
+
+// src/useKheopskit.ts
+var import_core = require("@kheopskit/core");
+var import_core2 = require("@react-rxjs/core");
+var import_react3 = require("react");
+
+// src/context.ts
+var import_react2 = require("react");
+var KheopskitContext = (0, import_react2.createContext)(null);
+
+// src/useKheopskit.ts
+var DEFAULT_VALUE = {
+  wallets: [],
+  accounts: []
+};
+var [useKheopskit] = (0, import_core2.bind)(
+  (config) => (0, import_core.getKheopskit$)(config),
+  DEFAULT_VALUE
+);
+var useWallets = () => {
+  const ctx = (0, import_react3.useContext)(KheopskitContext);
+  if (!ctx)
+    throw new Error("useWallets must be used within a KheopskitProvider");
+  const kheopskit = useKheopskit(ctx.config);
+  return {
+    wallets: kheopskit.wallets,
+    accounts: kheopskit.accounts
+  };
+};
+
+// src/KheopskitProvider.tsx
+var import_core3 = require("@react-rxjs/core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var KheopskitProvider = ({ children, config }) => {
+  return (
+    // TODO set source
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(KheopskitContext.Provider, { value: { config }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core3.Subscribe, { fallback: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SuspenseMonitor, { label: "KheopskitProvider" }), children }) })
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  KheopskitProvider,
+  SuspenseMonitor,
+  SuspenseMonitorInner,
+  useWallets
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/SuspenseMonitor.tsx","../src/useKheopskit.ts","../src/context.ts","../src/KheopskitProvider.tsx"],"sourcesContent":["export * from \"./SuspenseMonitor\";\nexport * from \"./useKheopskit\";\nexport * from \"./KheopskitProvider\";\n","import { type FC, useEffect, useRef } from \"react\";\n\nconst SHOULD_LOG = true; // TODO only DEV\n\nexport const SuspenseMonitorInner: FC<{ label: string }> = ({ label }) => {\n  const refStart = useRef(performance.now());\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      console.warn(`[Suspense] ${label} is hanging`);\n    }, 500);\n\n    return () => {\n      console.debug(\n        \"[Suspense] %s : %s ms\",\n        label,\n        (performance.now() - refStart.current).toFixed(2)\n      );\n      clearTimeout(timeout);\n    };\n  }, [label]);\n\n  return null;\n};\n\nexport const SuspenseMonitor: FC<{ label: string }> = ({ label }) =>\n  SHOULD_LOG ? <SuspenseMonitorInner label={label} /> : null;\n","import { getKheopskit$, type KheopskitConfig } from \"@kheopskit/core\";\nimport { bind } from \"@react-rxjs/core\";\nimport { useContext } from \"react\";\nimport { KheopskitContext } from \"./context\";\n\nconst DEFAULT_VALUE = {\n  wallets: [],\n  accounts: [],\n};\n\nconst [useKheopskit] = bind(\n  (config: KheopskitConfig) => getKheopskit$(config),\n  DEFAULT_VALUE\n);\n\nexport const useWallets = () => {\n  const ctx = useContext(KheopskitContext);\n  if (!ctx)\n    throw new Error(\"useWallets must be used within a KheopskitProvider\");\n\n  const kheopskit = useKheopskit(ctx.config);\n\n  return {\n    wallets: kheopskit.wallets,\n    accounts: kheopskit.accounts,\n  };\n};\n","import type { KheopskitConfig } from \"@kheopskit/core\";\nimport { createContext } from \"react\";\n\nexport const KheopskitContext = createContext<{\n  config: KheopskitConfig;\n} | null>(null);\n","import type { KheopskitConfig } from \"@kheopskit/core\";\nimport { Subscribe } from \"@react-rxjs/core\";\nimport type { FC, PropsWithChildren } from \"react\";\nimport { KheopskitContext } from \"./context\";\nimport { SuspenseMonitor } from \"./SuspenseMonitor\";\n\nexport const KheopskitProvider: FC<\n  PropsWithChildren & { config: KheopskitConfig }\n> = ({ children, config }) => {\n  return (\n    // TODO set source\n    <KheopskitContext.Provider value={{ config }}>\n      <Subscribe fallback={<SuspenseMonitor label=\"KheopskitProvider\" />}>\n        {children}\n      </Subscribe>\n    </KheopskitContext.Provider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA2C;AA0B5B;AAxBf,IAAM,aAAa;AAEZ,IAAM,uBAA8C,CAAC,EAAE,MAAM,MAAM;AACxE,QAAM,eAAW,qBAAO,YAAY,IAAI,CAAC;AAEzC,8BAAU,MAAM;AACd,UAAM,UAAU,WAAW,MAAM;AAC/B,cAAQ,KAAK,cAAc,KAAK,aAAa;AAAA,IAC/C,GAAG,GAAG;AAEN,WAAO,MAAM;AACX,cAAQ;AAAA,QACN;AAAA,QACA;AAAA,SACC,YAAY,IAAI,IAAI,SAAS,SAAS,QAAQ,CAAC;AAAA,MAClD;AACA,mBAAa,OAAO;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AACT;AAEO,IAAM,kBAAyC,CAAC,EAAE,MAAM,MAC7D,aAAa,4CAAC,wBAAqB,OAAc,IAAK;;;AC1BxD,kBAAoD;AACpD,IAAAA,eAAqB;AACrB,IAAAC,gBAA2B;;;ACD3B,IAAAC,gBAA8B;AAEvB,IAAM,uBAAmB,6BAEtB,IAAI;;;ADAd,IAAM,gBAAgB;AAAA,EACpB,SAAS,CAAC;AAAA,EACV,UAAU,CAAC;AACb;AAEA,IAAM,CAAC,YAAY,QAAI;AAAA,EACrB,CAAC,eAA4B,2BAAc,MAAM;AAAA,EACjD;AACF;AAEO,IAAM,aAAa,MAAM;AAC9B,QAAM,UAAM,0BAAW,gBAAgB;AACvC,MAAI,CAAC;AACH,UAAM,IAAI,MAAM,oDAAoD;AAEtE,QAAM,YAAY,aAAa,IAAI,MAAM;AAEzC,SAAO;AAAA,IACL,SAAS,UAAU;AAAA,IACnB,UAAU,UAAU;AAAA,EACtB;AACF;;;AEzBA,IAAAC,eAA0B;AAWC,IAAAC,sBAAA;AANpB,IAAM,oBAET,CAAC,EAAE,UAAU,OAAO,MAAM;AAC5B;AAAA;AAAA,IAEE,6CAAC,iBAAiB,UAAjB,EAA0B,OAAO,EAAE,OAAO,GACzC,uDAAC,0BAAU,UAAU,6CAAC,mBAAgB,OAAM,qBAAoB,GAC7D,UACH,GACF;AAAA;AAEJ;","names":["import_core","import_react","import_react","import_core","import_jsx_runtime"]}

package/dist/index.mjs

@@ -0,0 +1,68 @@
+// src/SuspenseMonitor.tsx
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var SHOULD_LOG = true;
+var SuspenseMonitorInner = ({ label }) => {
+  const refStart = useRef(performance.now());
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      console.warn(`[Suspense] ${label} is hanging`);
+    }, 500);
+    return () => {
+      console.debug(
+        "[Suspense] %s : %s ms",
+        label,
+        (performance.now() - refStart.current).toFixed(2)
+      );
+      clearTimeout(timeout);
+    };
+  }, [label]);
+  return null;
+};
+var SuspenseMonitor = ({ label }) => SHOULD_LOG ? /* @__PURE__ */ jsx(SuspenseMonitorInner, { label }) : null;
+
+// src/useKheopskit.ts
+import { getKheopskit$ } from "@kheopskit/core";
+import { bind } from "@react-rxjs/core";
+import { useContext } from "react";
+
+// src/context.ts
+import { createContext } from "react";
+var KheopskitContext = createContext(null);
+
+// src/useKheopskit.ts
+var DEFAULT_VALUE = {
+  wallets: [],
+  accounts: []
+};
+var [useKheopskit] = bind(
+  (config) => getKheopskit$(config),
+  DEFAULT_VALUE
+);
+var useWallets = () => {
+  const ctx = useContext(KheopskitContext);
+  if (!ctx)
+    throw new Error("useWallets must be used within a KheopskitProvider");
+  const kheopskit = useKheopskit(ctx.config);
+  return {
+    wallets: kheopskit.wallets,
+    accounts: kheopskit.accounts
+  };
+};
+
+// src/KheopskitProvider.tsx
+import { Subscribe } from "@react-rxjs/core";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var KheopskitProvider = ({ children, config }) => {
+  return (
+    // TODO set source
+    /* @__PURE__ */ jsx2(KheopskitContext.Provider, { value: { config }, children: /* @__PURE__ */ jsx2(Subscribe, { fallback: /* @__PURE__ */ jsx2(SuspenseMonitor, { label: "KheopskitProvider" }), children }) })
+  );
+};
+export {
+  KheopskitProvider,
+  SuspenseMonitor,
+  SuspenseMonitorInner,
+  useWallets
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SuspenseMonitor.tsx","../src/useKheopskit.ts","../src/context.ts","../src/KheopskitProvider.tsx"],"sourcesContent":["import { type FC, useEffect, useRef } from \"react\";\n\nconst SHOULD_LOG = true; // TODO only DEV\n\nexport const SuspenseMonitorInner: FC<{ label: string }> = ({ label }) => {\n  const refStart = useRef(performance.now());\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      console.warn(`[Suspense] ${label} is hanging`);\n    }, 500);\n\n    return () => {\n      console.debug(\n        \"[Suspense] %s : %s ms\",\n        label,\n        (performance.now() - refStart.current).toFixed(2)\n      );\n      clearTimeout(timeout);\n    };\n  }, [label]);\n\n  return null;\n};\n\nexport const SuspenseMonitor: FC<{ label: string }> = ({ label }) =>\n  SHOULD_LOG ? <SuspenseMonitorInner label={label} /> : null;\n","import { getKheopskit$, type KheopskitConfig } from \"@kheopskit/core\";\nimport { bind } from \"@react-rxjs/core\";\nimport { useContext } from \"react\";\nimport { KheopskitContext } from \"./context\";\n\nconst DEFAULT_VALUE = {\n  wallets: [],\n  accounts: [],\n};\n\nconst [useKheopskit] = bind(\n  (config: KheopskitConfig) => getKheopskit$(config),\n  DEFAULT_VALUE\n);\n\nexport const useWallets = () => {\n  const ctx = useContext(KheopskitContext);\n  if (!ctx)\n    throw new Error(\"useWallets must be used within a KheopskitProvider\");\n\n  const kheopskit = useKheopskit(ctx.config);\n\n  return {\n    wallets: kheopskit.wallets,\n    accounts: kheopskit.accounts,\n  };\n};\n","import type { KheopskitConfig } from \"@kheopskit/core\";\nimport { createContext } from \"react\";\n\nexport const KheopskitContext = createContext<{\n  config: KheopskitConfig;\n} | null>(null);\n","import type { KheopskitConfig } from \"@kheopskit/core\";\nimport { Subscribe } from \"@react-rxjs/core\";\nimport type { FC, PropsWithChildren } from \"react\";\nimport { KheopskitContext } from \"./context\";\nimport { SuspenseMonitor } from \"./SuspenseMonitor\";\n\nexport const KheopskitProvider: FC<\n  PropsWithChildren & { config: KheopskitConfig }\n> = ({ children, config }) => {\n  return (\n    // TODO set source\n    <KheopskitContext.Provider value={{ config }}>\n      <Subscribe fallback={<SuspenseMonitor label=\"KheopskitProvider\" />}>\n        {children}\n      </Subscribe>\n    </KheopskitContext.Provider>\n  );\n};\n"],"mappings":";AAAA,SAAkB,WAAW,cAAc;AA0B5B;AAxBf,IAAM,aAAa;AAEZ,IAAM,uBAA8C,CAAC,EAAE,MAAM,MAAM;AACxE,QAAM,WAAW,OAAO,YAAY,IAAI,CAAC;AAEzC,YAAU,MAAM;AACd,UAAM,UAAU,WAAW,MAAM;AAC/B,cAAQ,KAAK,cAAc,KAAK,aAAa;AAAA,IAC/C,GAAG,GAAG;AAEN,WAAO,MAAM;AACX,cAAQ;AAAA,QACN;AAAA,QACA;AAAA,SACC,YAAY,IAAI,IAAI,SAAS,SAAS,QAAQ,CAAC;AAAA,MAClD;AACA,mBAAa,OAAO;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AACT;AAEO,IAAM,kBAAyC,CAAC,EAAE,MAAM,MAC7D,aAAa,oBAAC,wBAAqB,OAAc,IAAK;;;AC1BxD,SAAS,qBAA2C;AACpD,SAAS,YAAY;AACrB,SAAS,kBAAkB;;;ACD3B,SAAS,qBAAqB;AAEvB,IAAM,mBAAmB,cAEtB,IAAI;;;ADAd,IAAM,gBAAgB;AAAA,EACpB,SAAS,CAAC;AAAA,EACV,UAAU,CAAC;AACb;AAEA,IAAM,CAAC,YAAY,IAAI;AAAA,EACrB,CAAC,WAA4B,cAAc,MAAM;AAAA,EACjD;AACF;AAEO,IAAM,aAAa,MAAM;AAC9B,QAAM,MAAM,WAAW,gBAAgB;AACvC,MAAI,CAAC;AACH,UAAM,IAAI,MAAM,oDAAoD;AAEtE,QAAM,YAAY,aAAa,IAAI,MAAM;AAEzC,SAAO;AAAA,IACL,SAAS,UAAU;AAAA,IACnB,UAAU,UAAU;AAAA,EACtB;AACF;;;AEzBA,SAAS,iBAAiB;AAWC,gBAAAA,YAAA;AANpB,IAAM,oBAET,CAAC,EAAE,UAAU,OAAO,MAAM;AAC5B;AAAA;AAAA,IAEE,gBAAAA,KAAC,iBAAiB,UAAjB,EAA0B,OAAO,EAAE,OAAO,GACzC,0BAAAA,KAAC,aAAU,UAAU,gBAAAA,KAAC,mBAAgB,OAAM,qBAAoB,GAC7D,UACH,GACF;AAAA;AAEJ;","names":["jsx"]}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@kheopskit/react",
+  "version": "0.0.1-alpha.0",
+  "description": "",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "rxjs": ">=7.8.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "polkadot-api": ">=1.10.0"
+  },
+  "dependencies": {
+    "@react-rxjs/core": "^0.10.8",
+    "@kheopskit/core": "0.0.1-alpha.0"
+  },
+  "devDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "polkadot-api": "^1.10.0"
+  },
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "splitting": false,
+    "sourcemap": true,
+    "clean": true,
+    "dts": true,
+    "format": [
+      "esm",
+      "cjs"
+    ],
+    "target": "es2020"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "clean": "rm -rf dist"
+  }
+}

package/src/KheopskitProvider.tsx

@@ -0,0 +1,18 @@
+import type { KheopskitConfig } from "@kheopskit/core";
+import { Subscribe } from "@react-rxjs/core";
+import type { FC, PropsWithChildren } from "react";
+import { KheopskitContext } from "./context";
+import { SuspenseMonitor } from "./SuspenseMonitor";
+
+export const KheopskitProvider: FC<
+  PropsWithChildren & { config: KheopskitConfig }
+> = ({ children, config }) => {
+  return (
+    // TODO set source
+    <KheopskitContext.Provider value={{ config }}>
+      <Subscribe fallback={<SuspenseMonitor label="KheopskitProvider" />}>
+        {children}
+      </Subscribe>
+    </KheopskitContext.Provider>
+  );
+};

package/src/SuspenseMonitor.tsx

@@ -0,0 +1,27 @@
+import { type FC, useEffect, useRef } from "react";
+
+const SHOULD_LOG = true; // TODO only DEV
+
+export const SuspenseMonitorInner: FC<{ label: string }> = ({ label }) => {
+  const refStart = useRef(performance.now());
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      console.warn(`[Suspense] ${label} is hanging`);
+    }, 500);
+
+    return () => {
+      console.debug(
+        "[Suspense] %s : %s ms",
+        label,
+        (performance.now() - refStart.current).toFixed(2)
+      );
+      clearTimeout(timeout);
+    };
+  }, [label]);
+
+  return null;
+};
+
+export const SuspenseMonitor: FC<{ label: string }> = ({ label }) =>
+  SHOULD_LOG ? <SuspenseMonitorInner label={label} /> : null;

package/src/context.ts

@@ -0,0 +1,6 @@
+import type { KheopskitConfig } from "@kheopskit/core";
+import { createContext } from "react";
+
+export const KheopskitContext = createContext<{
+  config: KheopskitConfig;
+} | null>(null);

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./SuspenseMonitor";
+export * from "./useKheopskit";
+export * from "./KheopskitProvider";

package/src/useKheopskit.ts

@@ -0,0 +1,27 @@
+import { getKheopskit$, type KheopskitConfig } from "@kheopskit/core";
+import { bind } from "@react-rxjs/core";
+import { useContext } from "react";
+import { KheopskitContext } from "./context";
+
+const DEFAULT_VALUE = {
+  wallets: [],
+  accounts: [],
+};
+
+const [useKheopskit] = bind(
+  (config: KheopskitConfig) => getKheopskit$(config),
+  DEFAULT_VALUE
+);
+
+export const useWallets = () => {
+  const ctx = useContext(KheopskitContext);
+  if (!ctx)
+    throw new Error("useWallets must be used within a KheopskitProvider");
+
+  const kheopskit = useKheopskit(ctx.config);
+
+  return {
+    wallets: kheopskit.wallets,
+    accounts: kheopskit.accounts,
+  };
+};

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base",
+  "include": ["src", "tests"],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "baseUrl": "src",
+    "paths": {
+      "@/*": ["*"]
+    }
+  }
+}