From aef6cdf27d9a5434f0866a2586627cd69421cadc Mon Sep 17 00:00:00 2001 From: DeborahOlaboye Date: Mon, 1 Dec 2025 03:16:41 +0100 Subject: [PATCH 1/2] create basic story --- .storybook/main.ts | 13 +++---- .storybook/preview-head.html | 19 ++++++++++ package-lock.json | 4 ++ package.json | 3 +- .../wallet/WalletConnectModal.stories.tsx | 33 +++++++++++++++++ vitest.config.ts | 37 ++++++++++++++++--- 6 files changed, 94 insertions(+), 15 deletions(-) create mode 100644 .storybook/preview-head.html create mode 100644 src/components/wallet/WalletConnectModal.stories.tsx diff --git a/.storybook/main.ts b/.storybook/main.ts index dcfe0d1..d0516b8 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,4 +1,4 @@ -import type { StorybookConfig } from "@storybook/nextjs-vite"; +import type { StorybookConfig } from '@storybook/nextjs-vite'; const config: StorybookConfig = { "stories": [ @@ -7,15 +7,12 @@ const config: StorybookConfig = { ], "addons": [ "@chromatic-com/storybook", - "@storybook/addon-docs", - "@storybook/addon-onboarding", + "@storybook/addon-vitest", "@storybook/addon-a11y", - "@storybook/addon-vitest" + "@storybook/addon-docs", + "@storybook/addon-onboarding" ], - "framework": { - "name": "@storybook/nextjs-vite", - "options": {} - }, + "framework": "@storybook/nextjs-vite", "staticDirs": [ "../public" ] diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 0000000..86bb744 --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1,19 @@ + diff --git a/package-lock.json b/package-lock.json index d91695c..d2de67a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -73,6 +73,7 @@ "tailwindcss": "^4", "tw-animate-css": "^1.4.0", "typescript": "^5", + "vite": "^7.2.4", "vitest": "^4.0.12", "vitest-fetch-mock": "^0.4.5" } @@ -15384,6 +15385,7 @@ "resolved": "https://registry.npmjs.org/eciesjs/-/eciesjs-0.4.16.tgz", "integrity": "sha512-dS5cbA9rA2VR4Ybuvhg6jvdmp46ubLn3E+px8cG/35aEDNclrqoCjg6mt0HYZ/M+OoESS3jSkCrqk1kWAEhWAw==", "license": "MIT", + "peer": true, "dependencies": { "@ecies/ciphers": "^0.2.4", "@noble/ciphers": "^1.3.0", @@ -16099,6 +16101,7 @@ "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.9", @@ -23852,6 +23855,7 @@ "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz", "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==", "license": "MIT", + "peer": true, "dependencies": { "@socket.io/component-emitter": "~3.1.0", "debug": "~4.3.2", diff --git a/package.json b/package.json index d6ffc96..c4458b9 100644 --- a/package.json +++ b/package.json @@ -86,7 +86,8 @@ "tw-animate-css": "^1.4.0", "typescript": "^5", "vitest": "^4.0.12", - "vitest-fetch-mock": "^0.4.5" + "vitest-fetch-mock": "^0.4.5", + "vite": "^7.2.4" }, "lint-staged": { "*.{ts,tsx}": [ diff --git a/src/components/wallet/WalletConnectModal.stories.tsx b/src/components/wallet/WalletConnectModal.stories.tsx new file mode 100644 index 0000000..a03cad4 --- /dev/null +++ b/src/components/wallet/WalletConnectModal.stories.tsx @@ -0,0 +1,33 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { WalletConnectModal } from './WalletConnectModal'; + +const meta: Meta = { + title: 'Components/WalletConnectModal', + component: WalletConnectModal, + parameters: { + // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout + layout: 'centered', + }, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], + // More on argTypes: https://storybook.js.org/docs/api/argtypes + argTypes: { + isOpen: { control: 'boolean' }, + onClose: { action: 'closed' }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + isOpen: true, + }, +}; + +export const Closed: Story = { + args: { + isOpen: false, + }, +}; diff --git a/vitest.config.ts b/vitest.config.ts index a8bf302..3990425 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -5,11 +5,11 @@ import react from '@vitejs/plugin-react'; import { configDefaults } from 'vitest/config'; import { storybookTest } from '@storybook/addon-vitest/vitest-plugin'; // No need to import defineBrowser, using direct configuration - -const dirname = typeof __dirname !== 'undefined' - ? __dirname - : path.dirname(fileURLToPath(import.meta.url)); - +import { playwright } from '@vitest/browser-playwright'; +const dirname = + typeof __dirname !== 'undefined' + ? __dirname + : path.dirname(fileURLToPath(import.meta.url)); const setupFile = path.join(dirname, 'vitest.setup.ts'); const coverageDir = path.join(dirname, 'coverage'); @@ -91,7 +91,6 @@ const storybookTestConfig = { }, setupFiles: [path.join(dirname, '.storybook/vitest.setup.ts')], }; - export default defineConfig({ plugins: [react()], test: { @@ -100,6 +99,32 @@ export default defineConfig({ globals: true, setupFiles: [setupFile], coverage: commonTestConfig.coverage, + projects: [ + { + extends: true, + plugins: [ + // The plugin will run tests for the stories defined in your Storybook config + // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest + storybookTest({ + configDir: path.join(dirname, '.storybook'), + }), + ], + test: { + name: 'storybook', + browser: { + enabled: true, + headless: true, + provider: playwright({}), + instances: [ + { + browser: 'chromium', + }, + ], + }, + setupFiles: ['.storybook/vitest.setup.ts'], + }, + }, + ], }, resolve: { alias: { From 2b73a242917efd63801a9700a1b729707463db83 Mon Sep 17 00:00:00 2001 From: DeborahOlaboye Date: Mon, 1 Dec 2025 03:17:33 +0100 Subject: [PATCH 2/2] Create Component Library --- src/components/wallet/WalletConnectModal.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/wallet/WalletConnectModal.stories.tsx b/src/components/wallet/WalletConnectModal.stories.tsx index a03cad4..967f699 100644 --- a/src/components/wallet/WalletConnectModal.stories.tsx +++ b/src/components/wallet/WalletConnectModal.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { WalletConnectModal } from './WalletConnectModal'; +import WalletConnectModal from './WalletConnectModal'; const meta: Meta = { title: 'Components/WalletConnectModal',