Mock keychain and utils via subpath imports (#1435)

* Migrate keychain to subpath imports

* Migrate utils to subpath imports

* chore: update storybook snapshots

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: JunichiSugiura

packages/keychain/.storybook/main.ts

@@ -26,22 +26,6 @@ const config: StorybookConfig = {
           external: ["vite-plugin-node-polyfills/shims/global"],
         },
       },
-      resolve: {
-        alias: {
-          "@cartridge/utils/api/cartridge": require.resolve(
-            "../node_modules/@cartridge/utils/dist/api/cartridge/index.js",
-          ),
-          "@cartridge/utils/api/indexer": require.resolve(
-            "../node_modules/@cartridge/utils/dist/api/indexer/index.js",
-          ),
-          "@cartridge/utils/mock/data": require.resolve(
-            "../node_modules/@cartridge/utils/dist/mock/data/index.js",
-          ),
-          "@cartridge/utils": require.resolve(
-            "../node_modules/@cartridge/utils/dist/index.mock.js",
-          ),
-        },
-      },
     }),
   staticDirs: ["../public"],
   previewHead: process.env.SNAPSHOT

packages/keychain/global.d.ts

@@ -20,6 +20,15 @@
     "test:storybook:update": "start-server-and-test 'SNAPSHOT=1 pnpm storybook:serve' 6001 'pnpm test-storybook --url http://127.0.0.1:6001 -u'",
     "test:storybook": "start-server-and-test 'pnpm storybook:serve' 6001 'pnpm test-storybook -u'"
   },
+  "imports": {
+    "#*": [
+      "./src/*",
+      "./src/*.ts",
+      "./src/*.tsx",
+      "./src/*/index.ts",
+      "./src/*/index.tsx"
+    ]
+  },
   "dependencies": {
     "@cartridge/account-wasm": "workspace:*",
     "@cartridge/controller": "workspace:*",

packages/keychain/package.json

@@ -4,7 +4,7 @@ import { ErrorCode } from "@cartridge/account-wasm/controller";
 import {
   starknetTransactionExecutionErrorTestCases,
   starknetTransactionValidationErrorTestCases,
-} from "@/utils/errors";
+} from "#utils/errors";
 
 const meta = {
   component: ControllerErrorAlert,

packages/keychain/src/components/ControllerErrorAlert.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { DeployController } from "./DeployController";
 import { constants, num } from "starknet";
 import { JsControllerError } from "@cartridge/account-wasm/controller";
-import Controller from "@/utils/controller";
+import Controller from "#utils/controller";
 
 const meta = {
   component: DeployController,

packages/keychain/src/components/DeployController.stories.tsx

@@ -18,12 +18,12 @@ import {
   ControllerIcon,
 } from "@cartridge/ui-next";
 import { Funding } from "./funding";
-import { useConnection } from "@/hooks/connection";
+import { useConnection } from "#hooks/connection";
 import { ControllerErrorAlert, ErrorAlert } from "./ErrorAlert";
-import { useDeploy } from "@/hooks/deploy";
+import { useDeploy } from "#hooks/deploy";
 import { Fees } from "./Fees";
-import { ControllerError } from "@/utils/connection";
-import { TransactionSummary } from "@/components/transaction/TransactionSummary";
+import { ControllerError } from "#utils/connection";
+import { TransactionSummary } from "#components/transaction/TransactionSummary";
 import { Link } from "react-router-dom";
 import { getChainName, useFeeToken } from "@cartridge/utils";
 

packages/keychain/src/components/DeployController.tsx

@@ -19,8 +19,8 @@ import React, {
   useState,
 } from "react";
 import { ErrorCode } from "@cartridge/account-wasm/controller";
-import { ControllerError } from "@/utils/connection";
-import { parseExecutionError, parseValidationError } from "@/utils/errors";
+import { ControllerError } from "#utils/connection";
+import { parseExecutionError, parseValidationError } from "#utils/errors";
 import { formatAddress } from "@cartridge/utils";
 import { Link } from "react-router-dom";
 import { useExplorer } from "@starknet-react/core";

packages/keychain/src/components/ErrorAlert.tsx

@@ -8,8 +8,8 @@ import {
   Button,
   LayoutHeader,
 } from "@cartridge/ui-next";
-import { useConnection } from "@/hooks/connection";
-import { CARTRIDGE_DISCORD_LINK } from "@/const";
+import { useConnection } from "#hooks/connection";
+import { CARTRIDGE_DISCORD_LINK } from "#const";
 import { Link } from "react-router-dom";
 import { usePostHog } from "@cartridge/utils";
 import { useEffect } from "react";

packages/keychain/src/components/ErrorBoundary.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { ErrorPage } from "./ErrorBoundary";
 
 const meta: Meta<typeof ErrorPage> = {
-  title: "@/components/ErrorPage",
+  title: "#components/ErrorPage",
   component: ErrorPage,
   parameters: {
     layout: "centered",

packages/keychain/src/components/ErrorBoundry.stories.tsx

@@ -1,8 +1,8 @@
 import { screen, fireEvent, waitFor } from "@testing-library/react";
 import { ExecutionContainer } from "./ExecutionContainer";
 import { describe, expect, beforeEach, it, vi } from "vitest";
-import { renderWithConnection } from "@/test/mocks/connection";
-import { renderWithProviders } from "@/test/mocks/providers";
+import { renderWithConnection } from "#test/mocks/connection";
+import { renderWithProviders } from "#test/mocks/providers";
 
 describe("ExecutionContainer", () => {
   const defaultProps = {