f

package.json

@@ -22,7 +22,7 @@
     "typecheck": "turbo run typecheck",
     "format": "prettier --ignore-path .gitignore --write .",
     "clean": "turbo run clean && rimraf node_modules",
-    "storybook": "pnpm --workspace @status-im/components storybook"
+    "storybook": "pnpm --filter @status-im/components storybook"
   },
   "resolutions": {
     "@types/react": "18.0.33",

packages/components/package.json

@@ -64,6 +64,7 @@
   },
   "devDependencies": {
     "@status-im/eslint-config": "workspace:*",
+    "@storybook/addon-actions": "^8.3.0",
     "@storybook/addon-designs": "^8.0.3",
     "@storybook/addon-essentials": "^8.3.0",
     "@storybook/addon-interactions": "^8.3.0",
@@ -73,6 +74,8 @@
     "@storybook/react": "^8.3.0",
     "@storybook/react-vite": "^8.3.0",
     "@storybook/testing-library": "^0.2.2",
+    "@types/react": "^18.0.33",
+    "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "autoprefixer": "^10.4.16",
     "eslint-plugin-tailwindcss": "^3.17.4",

packages/components/src/toast/toast.stories.tsx

@@ -26,7 +26,11 @@ const Actions = () => {
   )
 }
 
-const meta = {
+/**
+ * > error TS2742: The inferred type of 'meta' cannot be named without a reference to '.pnpm/@storybook+csf@0.1.11/node_modules/@storybook/csf'. This is likely not portable. A type annotation is necessary.
+ * > – @see https://github.com/storybookjs/storybook/issues/24656
+ */
+const meta: Meta<typeof Toast> = {
   component: Toast,
   title: 'Components/Toast',
   parameters: {
@@ -75,7 +79,7 @@ const meta = {
       </>
     ),
   ],
-} satisfies Meta<typeof Toast>
+}
 
 type Story = StoryObj<typeof Toast>
 

pnpm-lock.yaml

@@ -252,6 +252,9 @@ importers:
       '@status-im/eslint-config':
         specifier: workspace:*
         version: link:../eslint-config
+      '@storybook/addon-actions':
+        specifier: ^8.3.0
+        version: 8.3.0(storybook@8.3.0)
       '@storybook/addon-designs':
         specifier: ^8.0.3
         version: 8.0.3(@storybook/blocks@8.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.0))(@storybook/components@8.3.0(storybook@8.3.0))(@storybook/theming@8.3.0(storybook@8.3.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -279,6 +282,12 @@ importers:
       '@storybook/testing-library':
         specifier: ^0.2.2
         version: 0.2.2
+      '@types/react':
+        specifier: 18.0.33
+        version: 18.0.33
+      '@types/react-dom':
+        specifier: 18.0.11
+        version: 18.0.11
       '@vitejs/plugin-react-swc':
         specifier: ^3.7.0
         version: 3.7.0(@swc/helpers@0.5.3)(vite@5.4.5(@types/node@22.7.5)(less@4.2.0)(lightningcss@1.27.0)(sass@1.80.4))
@@ -7749,12 +7758,6 @@ packages:
       }
     engines: { node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0' }
 
-  csstype@3.0.10:
-    resolution:
-      {
-        integrity: sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==,
-      }
-
   csstype@3.1.3:
     resolution:
       {
@@ -19624,7 +19627,7 @@ snapshots:
     dependencies:
       '@types/prop-types': 15.7.4
       '@types/scheduler': 0.16.2
-      csstype: 3.0.10
+      csstype: 3.1.3
 
   '@types/resolve@1.20.4': {}
 
@@ -20711,8 +20714,6 @@ snapshots:
     dependencies:
       css-tree: 2.2.1
 
-  csstype@3.0.10: {}
-
   csstype@3.1.3: {}
 
   csv-generate@3.4.3: {}