chore(deps): bump the dependencies group across 1 directory with 44 updates

.gitignore

@@ -99,3 +99,5 @@ instructive-docs
 
 #cursor
 .cursor
+
+**/__screenshots__

package.json

@@ -24,9 +24,9 @@
     "node": "^20 || ^21 || ^22"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.2",
+    "@changesets/cli": "^2.29.4",
     "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
-    "@manypkg/cli": "^0.23.0",
+    "@manypkg/cli": "^0.24.0",
     "@solana-foundation/ms-tools-config": "workspace:^",
     "browserslist-lint": "^0.3.3",
     "concurrently": "^9.1.2",

packages/config/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @solana-foundation/ms-tools-config
 
+## 0.1.2
+
+### Patch Changes
+
+- Update dependencies & storybook
+
 ## 0.1.1
 
 ### Patch Changes

packages/config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solana-foundation/ms-tools-config",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Shared ESLint and Prettier configurations to ensure consistent code style and quality across all Solana microsite projects",
   "keywords": [
     "solana",
@@ -44,7 +44,7 @@
     "@types/node": "^22.15.3",
     "@typescript-eslint/eslint-plugin": "^8.31.1",
     "@typescript-eslint/parser": "^8.31.1",
-    "@vitest/coverage-v8": "^3.1.2",
+    "@vitest/coverage-v8": "3.2.1",
     "debug": "^4.4.0",
     "eslint": "^9.25.1",
     "eslint-config-eslint": "^11.0.0",
@@ -61,7 +61,7 @@
     "prettier-eslint": "^16.4.1",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "stylelint": "^16.19.1",
-    "stylelint-config-standard-scss": "^14.0.0",
+    "stylelint-config-standard-scss": "^15.0.1",
     "typescript": "^5.5.3",
     "vitest": "^3.1.2"
   },

packages/config/tsconfig.json

@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "types": ["node", "@testing-library/dom"],
     "target": "ESNext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,

packages/integrations/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @solana-foundation/ms-tools-integrations
 
+## 0.1.2
+
+### Patch Changes
+
+- Update dependencies & storybook
+- Updated dependencies
+  - @solana-foundation/ms-tools-config@0.1.2
+
 ## 0.1.1
 
 ### Patch Changes

packages/integrations/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solana-foundation/ms-tools-integrations",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Handles integrations with third-party services like HubSpot, providing a centralized location for managing these connections",
   "main": "dist/index.js",
   "type": "module",

packages/integrations/vitest.config.js

@@ -3,6 +3,7 @@ import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
   test: {
+    name: 'integrations',
     globals: true,
     environment: 'jsdom',
     setupFiles: [resolve(__dirname, 'test/setup')],

packages/ui/.storybook/main.ts

@@ -1,33 +1,34 @@
-import path from 'path'
+import path, { dirname, join } from 'path'
 import { fileURLToPath } from 'url'
 import type { StorybookConfig } from '@storybook/react-vite'
 
-const dirname =
+const _dirname =
   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url))
 
+/**
+ * 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 = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    '@storybook/addon-essentials',
-    '@storybook/addon-themes',
-    '@storybook/experimental-addon-test',
+    getAbsolutePath('@storybook/addon-themes'),
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath('@storybook/addon-vitest'),
   ],
   framework: {
-    name: '@storybook/react-vite',
+    name: getAbsolutePath('@storybook/react-vite'),
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
-  },
-  core: {
-    disableTelemetry: true,
-  },
   viteFinal: async (config) => {
     config.resolve = {
       ...config.resolve,
       alias: {
         ...(config.resolve?.alias || {}),
-        '@': path.resolve(dirname, '../src'),
+        '@': path.resolve(_dirname, '../src'),
       },
     }
 
@@ -45,5 +46,4 @@ const config: StorybookConfig = {
     return config
   },
 }
-
 export default config

packages/ui/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api'
+import { themes } from '@storybook/theming'
+
+addons.setConfig({
+  theme: themes.dark,
+})

packages/ui/.storybook/preview.ts → packages/ui/.storybook/preview.tsx

@@ -1,7 +1,7 @@
 import { withThemeByClassName } from '@storybook/addon-themes'
 import type { Preview } from '@storybook/react'
 
-import '../src/styles/globals.css'
+import './styles.css'
 
 const preview: Preview = {
   parameters: {

packages/ui/.storybook/styles.css

@@ -0,0 +1,7 @@
+@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
+@import 'tailwindcss';
+@import '../src/styles/globals.css';
+
+@theme {
+  --font-sans: "Rubik", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}

packages/ui/.storybook/vitest.setup.ts

@@ -1,12 +1,6 @@
-import { setProjectAnnotations } from '@storybook/experimental-nextjs-vite'
-import { beforeAll } from 'vitest'
+import { setProjectAnnotations } from '@storybook/react-vite'
 import * as projectAnnotations from './preview'
 
-if (process.env.NODE_ENV === 'test') {
-  console.info('Vitest environment loaded')
-  // This is an important step to apply the right configuration when testing your stories.
-  // More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
-  const project = setProjectAnnotations([projectAnnotations])
-
-  beforeAll(project.beforeAll)
-}
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([projectAnnotations])

packages/ui/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @solana-foundation/ms-tools-ui
 
+## 0.8.4
+
+### Patch Changes
+
+- Update dependencies & storybook
+- Updated dependencies
+  - @solana-foundation/ms-tools-config@0.1.2
+
 ## 0.8.3
 
 ### Patch Changes

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solana-foundation/ms-tools-ui",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "Reusable React components built with React, Tailwind CSS, and Shadcn, forming the visual building blocks of microsites",
   "main": ".",
   "types": "./dist/index.d.ts",
@@ -50,37 +50,45 @@
     "@radix-ui/react-toggle-group": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@solana-foundation/ms-tools-config": "workspace:^",
+    "@storybook/csf": "^0.1.13",
+    "@storybook/manager-api": "^8.6.14",
+    "@storybook/testing-react": "^2.0.1",
+    "@storybook/theming": "^8.6.14",
     "@tailwindcss/postcss": "^4.1.5",
-    "@testing-library/dom": "^10.4.0",
+    "@vitejs/plugin-react": "^4.5.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.509.0",
+    "dom": "link:@types/@testing-library/dom",
+    "jsdom": "^26.1.0",
+    "lucide-react": "^0.511.0",
     "next-themes": "^0.4.6",
     "postcss": "^8.4.31",
     "react-hook-form": "^7.56.4",
     "sonner": "^2.0.3",
     "tailwind-merge": "^3.2.0",
     "tailwindcss": "^4.1.5",
+    "testing-react": "link:@types/@storybook/testing-react",
     "vaul": "^1.1.2",
     "zod": "^3.25.30"
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
     "@playwright/test": "^1.52.0",
-    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-docs": "^9.0.4",
     "@storybook/addon-interactions": "^8.6.12",
     "@storybook/addon-themes": "^8.6.12",
+    "@storybook/addon-vitest": "^9.0.4",
     "@storybook/blocks": "^8.6.12",
-    "@storybook/experimental-addon-test": "^8.6.12",
-    "@storybook/experimental-nextjs-vite": "^8.6.14",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-vite": "^8.6.14",
-    "@storybook/test": "^8.6.12",
+    "@storybook/react": "^9.0.4",
+    "@storybook/react-vite": "^9.0.4",
+    "@storybook/test": "^8.6.14",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/node": "^22.15.3",
     "@types/react": "^19.1.2",
-    "@vitest/browser": "3.1.2",
+    "@vitest/browser": "3.2.1",
+    "@vitest/coverage-v8": "3.2.1",
     "autoprefixer": "^10.4.17",
     "css-loader": "^7.1.2",
     "playwright": "^1.52.0",
@@ -90,7 +98,7 @@
     "process": "^0.11.10",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "storybook": "^8.6.12",
+    "storybook": "^9.0.4",
     "style-loader": "^4.0.0",
     "tsup": "^8.2.4",
     "tw-animate-css": "^1.3.0",

packages/ui/src/components/address.stories.tsx

@@ -1,5 +1,7 @@
+import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import { fn } from '@storybook/test'
+import { withTestProvider } from '../../test/test-utils'
 import { Address } from './address'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
@@ -11,6 +13,8 @@ const meta = {
   },
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
   args: { onClick: fn() },
+  decorators: [withTestProvider],
+  render: (args) => <Address {...args} />,
 } satisfies Meta<typeof Address>
 
 export default meta
@@ -32,13 +36,13 @@ export const Truncated: Story = {
     truncateUnknown: true,
     displayAddress: wSolAddress,
   },
-  render(args) {
-    return (
+  decorators: [
+    (Story) => (
       <div className="w-[90px]">
-        <Address {...args} />
+        <Story />
       </div>
-    )
-  },
+    ),
+  ],
 }
 
 export const TruncatedWithLimit: Story = {
@@ -60,14 +64,16 @@ export const AsLink: Story = {
   args: {
     address: wSolAddress,
     asChild: true,
-  },
-  render(args) {
-    return (
-      <Address {...args}>
-        <a onClick={args.onClick} href="javascript:void(0)">
-          {args.address}
-        </a>
-      </Address>
-    )
+    children: (
+      <a
+        href="javascript:void(0)"
+        onClick={(e) => {
+          e.preventDefault()
+          meta.args.onClick()
+        }}
+      >
+        {wSolAddress}
+      </a>
+    ),
   },
 }

packages/ui/src/components/address.test.tsx

@@ -0,0 +1,28 @@
+import { composeStories } from '@storybook/react'
+import { render } from '@testing-library/react'
+import { describe, expect, test } from 'vitest'
+import * as stories from './address.stories'
+
+const { Default, Truncated, TruncatedWithLimit, OverrideText, AsLink } = composeStories(stories)
+
+describe('Address Component Stories', () => {
+  test('renders Default story without errors', () => {
+    expect(() => render(<Default />)).not.toThrow()
+  })
+
+  test('renders Truncated story without errors', () => {
+    expect(() => render(<Truncated />)).not.toThrow()
+  })
+
+  test('renders TruncatedWithLimit story without errors', () => {
+    expect(() => render(<TruncatedWithLimit />)).not.toThrow()
+  })
+
+  test('renders OverrideText story without errors', () => {
+    expect(() => render(<OverrideText />)).not.toThrow()
+  })
+
+  test('renders AsLink story without errors', () => {
+    expect(() => render(<AsLink />)).not.toThrow()
+  })
+})

packages/ui/src/components/alert-dialog.test.tsx

@@ -0,0 +1,20 @@
+import { composeStories } from '@storybook/react'
+import { render } from '@testing-library/react'
+import { describe, expect, test } from 'vitest'
+import * as stories from './alert-dialog.stories'
+
+const { Default, CustomStyling, WithLongContent } = composeStories(stories)
+
+describe('AlertDialog Component Stories', () => {
+  test('renders Default story without errors', () => {
+    expect(() => render(<Default />)).not.toThrow()
+  })
+
+  test('renders CustomStyling story without errors', () => {
+    expect(() => render(<CustomStyling />)).not.toThrow()
+  })
+
+  test('renders WithLongContent story without errors', () => {
+    expect(() => render(<WithLongContent />)).not.toThrow()
+  })
+})

packages/ui/src/components/alert.stories.tsx

@@ -8,6 +8,7 @@ const meta = {
     layout: 'centered',
   },
   tags: ['autodocs'],
+  render: (args) => <Alert {...args} />,
 } satisfies Meta<typeof Alert>
 
 export default meta