Skip to content

Commit 3dff26e

Browse files
janniksjanniks
authored
test: add storybook demo app for testing (#407)
* test: update storybook app * fix: update style * chore: fix lint --------- Co-authored-by: janniks <[email protected]>
1 parent 2b97937 commit 3dff26e

File tree

11 files changed

+11593
-17313
lines changed

11 files changed

+11593
-17313
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,3 +50,5 @@ web-ext-artifacts
5050
docs/
5151

5252
storybook-static/
53+
54+
*storybook.log

‎.vscode/settings.json‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
11
{
2-
"typescript.tsdk": "node_modules/typescript/lib"
2+
"typescript.tsdk": "node_modules/typescript/lib",
3+
4+
// Jest -> Vitest: Run
5+
"jestrunner.jestCommand": "npx vitest run",
6+
7+
// Jest -> Vitest: Debug (Hack)
8+
"jestrunner.jestPath": "node_modules/.bin/vitest",
9+
"jestrunner.runOptions": ["--"],
10+
"jestrunner.debugOptions": {
11+
"args": ["run"]
12+
}
313
}

‎package-lock.json‎

Lines changed: 10820 additions & 17193 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"types:connect-react": "lerna run types --scope @stacks/connect-react"
2323
},
2424
"devDependencies": {
25+
"@babel/preset-typescript": "^7.26.0",
2526
"@changesets/changelog-github": "^0.5.0",
2627
"@changesets/cli": "^2.27.9",
2728
"@commitlint/cli": "^19.5.0",
@@ -45,6 +46,7 @@
4546
"react-dom": "^18.3.1",
4647
"tsup": "^8.3.5",
4748
"typedoc": "^0.26.10",
48-
"typescript": "^5.3.2"
49+
"typescript": "^5.3.2",
50+
"vitest": "^2.1.8"
4951
}
5052
}

‎packages/connect/.storybook/main.ts‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,26 @@
1-
import type { StorybookConfig } from '@storybook/react-vite';
2-
import { dirname, join } from 'path';
1+
import type { StorybookConfig } from '@storybook/react-webpack5';
32

3+
import { join, dirname } from 'path';
4+
5+
/**
6+
* This function is used to resolve the absolute path of a package.
7+
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
8+
*/
49
function getAbsolutePath(value: string): any {
510
return dirname(require.resolve(join(value, 'package.json')));
611
}
7-
812
const config: StorybookConfig = {
9-
framework: getAbsolutePath('@storybook/react-vite'),
1013
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
14+
addons: [
15+
getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
16+
getAbsolutePath('@storybook/addon-onboarding'),
17+
getAbsolutePath('@storybook/addon-essentials'),
18+
getAbsolutePath('@chromatic-com/storybook'),
19+
getAbsolutePath('@storybook/addon-interactions'),
20+
],
21+
framework: {
22+
name: getAbsolutePath('@storybook/react-webpack5'),
23+
options: {},
24+
},
1125
};
12-
1326
export default config;

‎packages/connect/package.json‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@
88
"typecheck": "tsc --project tsconfig.json --noEmit",
99
"types": "tsc --project tsconfig.json --emitDeclarationOnly",
1010
"storybook": "storybook dev -p 6006",
11-
"build-storybook": "storybook build"
11+
"build-storybook": "storybook build",
12+
"test": "vitest run",
13+
"test:watch": "vitest",
14+
"test:coverage": "vitest run --coverage"
1215
},
1316
"dependencies": {
1417
"@stacks/auth": "^7.0.0",
@@ -39,20 +42,24 @@
3942
"devDependencies": {
4043
"@babel/preset-env": "^7.23.3",
4144
"@babel/preset-react": "^7.23.3",
42-
"@storybook/addon-essentials": "^7.6.0-alpha.5",
43-
"@storybook/addon-interactions": "^7.6.0-alpha.5",
44-
"@storybook/addon-links": "^7.6.0-alpha.5",
45-
"@storybook/addon-onboarding": "^1.0.8",
46-
"@storybook/blocks": "^7.6.0-alpha.5",
47-
"@storybook/react": "^7.6.0-alpha.5",
48-
"@storybook/react-vite": "^7.6.0-alpha.5",
49-
"@storybook/react-webpack5": "^7.6.0-alpha.5",
50-
"@storybook/testing-library": "^0.2.2",
45+
"@chromatic-com/storybook": "^3.2.4",
46+
"@storybook/addon-essentials": "^8.5.2",
47+
"@storybook/addon-interactions": "^8.5.2",
48+
"@storybook/addon-links": "^8.5.2",
49+
"@storybook/addon-onboarding": "^8.5.2",
50+
"@storybook/addon-webpack5-compiler-swc": "^2.0.0",
51+
"@storybook/blocks": "^8.5.2",
52+
"@storybook/react": "^8.5.2",
53+
"@storybook/react-vite": "^8.5.2",
54+
"@storybook/react-webpack5": "^8.5.2",
55+
"@storybook/test": "^8.5.2",
56+
"@storybook/testing-library": "^0.2.1",
5157
"esbuild-plugin-replace": "^1.4.0",
5258
"prop-types": "^15.8.1",
5359
"react": "^18.2.0",
5460
"react-dom": "^18.2.0",
55-
"storybook": "^7.6.0-alpha.5",
56-
"vite": "^4.5.0"
61+
"react-hook-form": "^7.54.2",
62+
"storybook": "^8.5.2",
63+
"vitest": "^3.0.4"
5764
}
5865
}

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

Lines changed: 51 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,61 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
12
import { DEFAULT_PROVIDERS } from '../providers';
23
import { ConnectPage } from './ConnectPage';
4+
import { WebBTCProvider } from '@stacks/connect-ui';
35

4-
export default {
5-
component: ConnectPage,
6-
};
7-
8-
// 1. No mocking
9-
export const NoMocking = {
10-
render: () => <ConnectPage />,
11-
};
12-
13-
// 2. Mocking
14-
const ConnectWithMockedRegister = () => {
15-
window.webbtc_stx_providers = [DEFAULT_PROVIDERS[0]]; // simulate installed wallet
16-
return <ConnectPage />;
17-
};
18-
export const WithMockedRegister = {
19-
render: () => <ConnectWithMockedRegister />,
20-
};
21-
22-
// 3. Mocking
6+
// Define window types
237
declare global {
248
interface Window {
25-
MockedProvider: any;
9+
MockedProvider?: {
10+
authenticationRequest: () => void;
11+
};
12+
wbip_providers?: WebBTCProvider[];
2613
}
2714
}
28-
const ConnectWithMockedWallet = () => {
29-
window.webbtc_stx_providers = [
30-
{
31-
id: 'MockedProvider',
32-
name: 'Mocked Wallet',
33-
},
34-
];
35-
window.MockedProvider = {
36-
authenticationRequest: () => {
37-
alert('MockedProvider.authenticationRequest()');
15+
16+
const meta = {
17+
title: 'Connect/Connect',
18+
component: ConnectPage,
19+
parameters: {
20+
layout: 'fullscreen',
21+
backgrounds: {
22+
default: 'dark',
23+
values: [
24+
{
25+
name: 'dark',
26+
value: '#303030',
27+
},
28+
],
3829
},
39-
};
40-
return <ConnectPage />;
30+
},
31+
} satisfies Meta<typeof ConnectPage>;
32+
33+
export default meta;
34+
type Story = StoryObj<typeof meta>;
35+
36+
// 1. Default state - no mocking
37+
export const Default: Story = {};
38+
39+
// 2. With default provider
40+
export const WithDefaultProvider: Story = {
41+
play: () => {
42+
window.wbip_providers = [DEFAULT_PROVIDERS[0]];
43+
},
4144
};
42-
export const WithMockedWallet = {
43-
render: () => <ConnectWithMockedWallet />,
45+
46+
// 3. With mocked wallet
47+
export const WithMockedWallet: Story = {
48+
play: () => {
49+
window.wbip_providers = [
50+
{
51+
id: 'MockedProvider',
52+
name: 'Mocked Wallet',
53+
},
54+
];
55+
window.MockedProvider = {
56+
authenticationRequest: () => {
57+
alert('MockedProvider.authenticationRequest()');
58+
},
59+
};
60+
},
4461
};

0 commit comments

Comments
 (0)