test: add storybook demo app for testing

.gitignore

@@ -50,3 +50,5 @@ web-ext-artifacts
 docs/
 
 storybook-static/
+
+*storybook.log

.vscode/settings.json

@@ -1,3 +1,13 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+
+  // Jest -> Vitest: Run
+  "jestrunner.jestCommand": "npx vitest run",
+
+  // Jest -> Vitest: Debug (Hack)
+  "jestrunner.jestPath": "node_modules/.bin/vitest",
+  "jestrunner.runOptions": ["--"],
+  "jestrunner.debugOptions": {
+    "args": ["run"]
+  }
 }

package.json

@@ -22,6 +22,7 @@
     "types:connect-react": "lerna run types --scope @stacks/connect-react"
   },
   "devDependencies": {
+    "@babel/preset-typescript": "^7.26.0",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.9",
     "@commitlint/cli": "^19.5.0",
@@ -45,6 +46,7 @@
     "react-dom": "^18.3.1",
     "tsup": "^8.3.5",
     "typedoc": "^0.26.10",
-    "typescript": "^5.3.2"
+    "typescript": "^5.3.2",
+    "vitest": "^2.1.8"
   }
 }

packages/connect/.storybook/main.ts

@@ -1,13 +1,26 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-import { dirname, join } from 'path';
+import type { StorybookConfig } from '@storybook/react-webpack5';
 
+import { join, dirname } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
 function getAbsolutePath(value: string): any {
   return dirname(require.resolve(join(value, 'package.json')));
 }
-
 const config: StorybookConfig = {
-  framework: getAbsolutePath('@storybook/react-vite'),
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-interactions'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-webpack5'),
+    options: {},
+  },
 };
-
 export default config;

packages/connect/package.json

@@ -8,7 +8,10 @@
     "typecheck": "tsc --project tsconfig.json --noEmit",
     "types": "tsc --project tsconfig.json --emitDeclarationOnly",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@stacks/auth": "^7.0.0",
@@ -39,20 +42,24 @@
   "devDependencies": {
     "@babel/preset-env": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
-    "@storybook/addon-essentials": "^7.6.0-alpha.5",
-    "@storybook/addon-interactions": "^7.6.0-alpha.5",
-    "@storybook/addon-links": "^7.6.0-alpha.5",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/blocks": "^7.6.0-alpha.5",
-    "@storybook/react": "^7.6.0-alpha.5",
-    "@storybook/react-vite": "^7.6.0-alpha.5",
-    "@storybook/react-webpack5": "^7.6.0-alpha.5",
-    "@storybook/testing-library": "^0.2.2",
+    "@chromatic-com/storybook": "^3.2.4",
+    "@storybook/addon-essentials": "^8.5.2",
+    "@storybook/addon-interactions": "^8.5.2",
+    "@storybook/addon-links": "^8.5.2",
+    "@storybook/addon-onboarding": "^8.5.2",
+    "@storybook/addon-webpack5-compiler-swc": "^2.0.0",
+    "@storybook/blocks": "^8.5.2",
+    "@storybook/react": "^8.5.2",
+    "@storybook/react-vite": "^8.5.2",
+    "@storybook/react-webpack5": "^8.5.2",
+    "@storybook/test": "^8.5.2",
+    "@storybook/testing-library": "^0.2.1",
     "esbuild-plugin-replace": "^1.4.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.6.0-alpha.5",
-    "vite": "^4.5.0"
+    "react-hook-form": "^7.54.2",
+    "storybook": "^8.5.2",
+    "vitest": "^3.0.4"
   }
 }

packages/connect/src/stories/Connect.stories.tsx

@@ -1,44 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react';
 import { DEFAULT_PROVIDERS } from '../providers';
 import { ConnectPage } from './ConnectPage';
+import { WebBTCProvider } from '@stacks/connect-ui';
 
-export default {
-  component: ConnectPage,
-};
-
-// 1. No mocking
-export const NoMocking = {
-  render: () => <ConnectPage />,
-};
-
-// 2. Mocking
-const ConnectWithMockedRegister = () => {
-  window.webbtc_stx_providers = [DEFAULT_PROVIDERS[0]]; // simulate installed wallet
-  return <ConnectPage />;
-};
-export const WithMockedRegister = {
-  render: () => <ConnectWithMockedRegister />,
-};
-
-// 3. Mocking
+// Define window types
 declare global {
   interface Window {
-    MockedProvider: any;
+    MockedProvider?: {
+      authenticationRequest: () => void;
+    };
+    wbip_providers?: WebBTCProvider[];
   }
 }
-const ConnectWithMockedWallet = () => {
-  window.webbtc_stx_providers = [
-    {
-      id: 'MockedProvider',
-      name: 'Mocked Wallet',
-    },
-  ];
-  window.MockedProvider = {
-    authenticationRequest: () => {
-      alert('MockedProvider.authenticationRequest()');
+
+const meta = {
+  title: 'Connect/Connect',
+  component: ConnectPage,
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: {
+      default: 'dark',
+      values: [
+        {
+          name: 'dark',
+          value: '#303030',
+        },
+      ],
     },
-  };
-  return <ConnectPage />;
+  },
+} satisfies Meta<typeof ConnectPage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// 1. Default state - no mocking
+export const Default: Story = {};
+
+// 2. With default provider
+export const WithDefaultProvider: Story = {
+  play: () => {
+    window.wbip_providers = [DEFAULT_PROVIDERS[0]];
+  },
 };
-export const WithMockedWallet = {
-  render: () => <ConnectWithMockedWallet />,
+
+// 3. With mocked wallet
+export const WithMockedWallet: Story = {
+  play: () => {
+    window.wbip_providers = [
+      {
+        id: 'MockedProvider',
+        name: 'Mocked Wallet',
+      },
+    ];
+    window.MockedProvider = {
+      authenticationRequest: () => {
+        alert('MockedProvider.authenticationRequest()');
+      },
+    };
+  },
 };