Skip to content

Commit 1103f48

Browse files
committed
feat(storybook-host): Add Vercel Analytics in form of Storybook addon
1 parent f59e8b8 commit 1103f48

File tree

6 files changed

+71
-0
lines changed

6 files changed

+71
-0
lines changed
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { FC, useEffect } from 'react';
2+
import { useStorybookState } from '@storybook/manager-api';
3+
import { pageview } from '@vercel/analytics';
4+
5+
export const VercelAnalyticsAddon: FC = () => {
6+
const { path } = useStorybookState();
7+
8+
useEffect(() => {
9+
pageview({
10+
path,
11+
});
12+
}, [path]);
13+
14+
return null;
15+
};
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './VercelAnalyticsAddon';
2+
export * from './vercel-analytics.consts';
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const VERCEL_ANALYTICS_ADDON_ID = 'storybook/vercel-analytics';
2+
export const VERCEL_ANALYTICS_TOOL_ID = `${VERCEL_ANALYTICS_ADDON_ID}/listener`;
3+
export const VERCEL_ANALYTICS_ADDON_NAME = 'Vercel Analytics';
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { addons, types } from '@storybook/manager-api';
2+
import { inject } from '@vercel/analytics';
3+
import {
4+
VERCEL_ANALYTICS_ADDON_ID,
5+
VERCEL_ANALYTICS_ADDON_NAME,
6+
VERCEL_ANALYTICS_TOOL_ID,
7+
VercelAnalyticsAddon,
8+
} from './addons/vercel-analytics';
9+
10+
addons.register(VERCEL_ANALYTICS_ADDON_ID, () => {
11+
inject({
12+
disableAutoTrack: true,
13+
});
14+
addons.add(VERCEL_ANALYTICS_TOOL_ID, {
15+
type: types.TOOLEXTRA,
16+
render: VercelAnalyticsAddon,
17+
title: VERCEL_ANALYTICS_ADDON_NAME,
18+
});
19+
});

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@emotion/react": "^11.13.3",
1616
"@emotion/styled": "^11.13.0",
1717
"@mui/material": "^5.16.7",
18+
"@vercel/analytics": "^1.5.0",
1819
"notistack": "^3.0.1",
1920
"react": "18.3.1",
2021
"react-dom": "18.3.1",

yarn.lock

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7891,6 +7891,36 @@ __metadata:
78917891
languageName: node
78927892
linkType: hard
78937893

7894+
"@vercel/analytics@npm:^1.5.0":
7895+
version: 1.5.0
7896+
resolution: "@vercel/analytics@npm:1.5.0"
7897+
peerDependencies:
7898+
"@remix-run/react": ^2
7899+
"@sveltejs/kit": ^1 || ^2
7900+
next: ">= 13"
7901+
react: ^18 || ^19 || ^19.0.0-rc
7902+
svelte: ">= 4"
7903+
vue: ^3
7904+
vue-router: ^4
7905+
peerDependenciesMeta:
7906+
"@remix-run/react":
7907+
optional: true
7908+
"@sveltejs/kit":
7909+
optional: true
7910+
next:
7911+
optional: true
7912+
react:
7913+
optional: true
7914+
svelte:
7915+
optional: true
7916+
vue:
7917+
optional: true
7918+
vue-router:
7919+
optional: true
7920+
checksum: 10c0/43d33ea83b32f5203fec21b7f43c399e398f0c37d2dd341d522969e0e6ee23fd652a2766a4203a3ce573f711beee5ee1ab7d36316f767a4901160e3e96ee31e5
7921+
languageName: node
7922+
linkType: hard
7923+
78947924
"@vitejs/plugin-react@npm:4.3.1":
78957925
version: 4.3.1
78967926
resolution: "@vitejs/plugin-react@npm:4.3.1"
@@ -18248,6 +18278,7 @@ __metadata:
1824818278
"@types/yargs": "npm:^17.0.24"
1824918279
"@typescript-eslint/eslint-plugin": "npm:7.18.0"
1825018280
"@typescript-eslint/parser": "npm:7.18.0"
18281+
"@vercel/analytics": "npm:^1.5.0"
1825118282
"@vitejs/plugin-react": "npm:4.3.1"
1825218283
"@vitest/coverage-v8": "npm:1.6.0"
1825318284
"@vitest/ui": "npm:1.6.0"

0 commit comments

Comments
 (0)