feat(common): upgrade dependencies

.yarnrc.yml

@@ -24,18 +24,9 @@ packageExtensions:
   '@storybook/builder-webpack5@*':
     dependencies:
       file-system-cache: 2.3.0
-  '@storybook/node-logger@*':
-    dependencies:
-      storybook: '*'
   '@storybook/preset-react-webpack@*':
     dependencies:
       file-system-cache: 2.3.0
-  '@storybook/react@*':
-    dependencies:
-      '@storybook/test': '*'
-  '@storybook/types@*':
-    dependencies:
-      '@types/react': '*'
   '@svgr/babel-plugin-transform-svg-component@*':
     dependencies:
       '@babel/template': '*'

package.json

@@ -15,7 +15,7 @@
   "devDependencies": {
     "@atls/code-runtime": "2.1.33",
     "@playwright/test": "1.55.0",
-    "@types/node": "22.15.3",
+    "@types/node": "25.9.3",
     "eslint": "9.25.1",
     "typescript": "5.5.4"
   },

ui-admin/button/package.json

@@ -20,14 +20,15 @@
     "rainbow-sprinkles": "1.0.0"
   },
   "devDependencies": {
-    "@storybook/react": "8.6.12",
+    "@storybook/react": "10.4.6",
     "@types/react": "19.1.2",
     "@vanilla-extract/css": "1.17.1",
     "@vanilla-extract/dynamic": "2.1.2",
     "next-themes": "0.4.6",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "storybook": "8.6.12"
+    "storybook": "10.4.6",
+    "typescript": "5.5.4"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "*",

ui-admin/design/package.json

@@ -12,36 +12,32 @@
     "start": "node dist/index.js"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "3.2.6",
-    "@mdx-js/react": "3.1.0",
-    "@storybook/addon-essentials": "8.6.12",
-    "@storybook/addon-interactions": "8.6.12",
-    "@storybook/addon-links": "8.6.12",
-    "@storybook/addon-styling-webpack": "1.0.1",
-    "@storybook/addon-webpack5-compiler-swc": "3.0.0",
-    "@storybook/blocks": "8.6.12",
-    "@storybook/react": "8.6.12",
-    "@storybook/react-webpack5": "8.6.12",
-    "@storybook/test": "8.6.12",
-    "@storybook/types": "8.6.12",
+    "@chromatic-com/storybook": "5.2.1",
+    "@mdx-js/react": "3.1.1",
+    "@storybook/addon-docs": "10.4.6",
+    "@storybook/addon-links": "10.4.6",
+    "@storybook/addon-styling-webpack": "3.0.2",
+    "@storybook/addon-webpack5-compiler-swc": "4.0.3",
+    "@storybook/react": "10.4.6",
+    "@storybook/react-webpack5": "10.4.6",
     "@types/cors": "2.8.17",
     "@types/express": "5.0.1",
-    "@types/node": "22.15.3",
+    "@types/node": "25.9.3",
     "@types/react": "19.1.2",
     "@types/react-dom": "19.1.2",
     "@vanilla-extract/css": "1.17.1",
     "@vanilla-extract/dynamic": "2.1.2",
-    "@vanilla-extract/webpack-plugin": "2.3.18",
+    "@vanilla-extract/webpack-plugin": "2.3.27",
     "cors": "2.8.5",
-    "css-loader": "7.1.2",
+    "css-loader": "7.1.4",
     "express": "5.1.0",
-    "mini-css-extract-plugin": "2.9.2",
+    "mini-css-extract-plugin": "2.10.2",
     "next-themes": "0.4.6",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "storybook": "8.6.12",
+    "storybook": "10.4.6",
     "style-loader": "4.0.0",
     "typescript": "5.5.4",
-    "webpack": "5.99.7"
+    "webpack": "5.107.2"
   }
 }

ui-admin/design/src/main.ts

@@ -1,12 +1,13 @@
-import type { StorybookConfig }          from '@storybook/react-webpack5'
-import type { CompatibleString }         from '@storybook/types'
+import type { StorybookConfig } from '@storybook/react-webpack5'
 
-import { dirname }                       from 'node:path'
-import { join }                          from 'node:path'
+import { createRequire }        from 'node:module'
+import { dirname }              from 'node:path'
+import { join }                 from 'node:path'
 
-import { VanillaExtractPlugin }          from '@vanilla-extract/webpack-plugin'
-import { NormalModuleReplacementPlugin } from 'webpack'
-import MiniCssExtractPlugin              from 'mini-css-extract-plugin'
+import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin'
+import MiniCssExtractPlugin     from 'mini-css-extract-plugin'
+
+const require = createRequire(import.meta.url)
 
 const getAbsolutePath = (value: string): string =>
   dirname(require.resolve(join(value, 'package.json')))
@@ -21,19 +22,12 @@ const config: StorybookConfig = {
   addons: [
     getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
     getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-docs'),
     getAbsolutePath('@chromatic-com/storybook'),
-    getAbsolutePath('@storybook/addon-interactions'),
     {
-      name: '@storybook/addon-styling-webpack',
+      name: getAbsolutePath('@storybook/addon-styling-webpack'),
       options: {
-        plugins: [
-          new VanillaExtractPlugin(),
-          new MiniCssExtractPlugin(),
-          new NormalModuleReplacementPlugin(/\.js$/, (resource: { request: string }) => {
-            resource.request = resource.request.replace('.js', '')
-          }),
-        ],
+        plugins: [new VanillaExtractPlugin(), new MiniCssExtractPlugin()],
         rules: [
           {
             test: /\.css$/,
@@ -63,13 +57,19 @@ const config: StorybookConfig = {
     },
   ],
   framework: {
-    name: getAbsolutePath(
-      '@storybook/react-webpack5'
-    ) as CompatibleString<'@storybook/react-webpack5'>,
+    name: getAbsolutePath('@storybook/react-webpack5'),
     options: {},
   },
   webpackFinal: async (webpackConfig) => {
-    if (webpackConfig.resolve?.fallback) {
+    webpackConfig.resolve = {
+      ...webpackConfig.resolve,
+      extensionAlias: {
+        ...webpackConfig.resolve?.extensionAlias,
+        '.js': ['.ts', '.tsx', '.js'],
+      },
+    }
+
+    if (webpackConfig.resolve.fallback) {
       webpackConfig.resolve.fallback = {
         ...webpackConfig.resolve.fallback,
         assert: false,

ui-admin/examples/bottom-navigation/package.json

@@ -20,13 +20,14 @@
     "@atls-ui-admin/layout": "workspace:*",
     "@atls-ui-admin/theme": "workspace:*",
     "@radix-ui/react-icons": "1.3.2",
-    "@storybook/react": "8.6.12",
+    "@storybook/react": "10.4.6",
     "@types/react": "19.1.2",
     "@vanilla-extract/css": "1.17.1",
     "@vanilla-extract/dynamic": "2.1.2",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "storybook": "8.6.12"
+    "storybook": "10.4.6",
+    "typescript": "5.5.4"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "^1",

ui-admin/examples/sidebar/package.json

@@ -23,13 +23,14 @@
     "@atls-ui-admin/layout": "workspace:*",
     "@atls-ui-admin/theme": "workspace:*",
     "@radix-ui/react-icons": "1.3.2",
-    "@storybook/react": "8.6.12",
+    "@storybook/react": "10.4.6",
     "@types/react": "19.1.2",
     "@vanilla-extract/css": "1.17.1",
     "@vanilla-extract/dynamic": "2.1.2",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "storybook": "8.6.12"
+    "storybook": "10.4.6",
+    "typescript": "5.5.4"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "^1",

ui-admin/icons/package.json

@@ -23,14 +23,15 @@
   },
   "devDependencies": {
     "@atls-ui-admin/layout": "workspace:*",
-    "@storybook/react": "8.6.12",
+    "@storybook/react": "10.4.6",
     "@types/react": "19.1.2",
     "@vanilla-extract/css": "1.17.1",
     "@vanilla-extract/dynamic": "2.1.2",
     "next-themes": "0.4.6",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "storybook": "8.6.12"
+    "storybook": "10.4.6",
+    "typescript": "5.5.4"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "*",

ui-admin/text/package.json

@@ -20,14 +20,15 @@
   "devDependencies": {
     "@atls-ui-admin/button": "workspace:*",
     "@atls-ui-admin/layout": "workspace:*",
-    "@storybook/react": "8.6.12",
+    "@storybook/react": "10.4.6",
     "@types/react": "19.1.2",
     "@vanilla-extract/css": "1.17.1",
     "@vanilla-extract/dynamic": "2.1.2",
     "next-themes": "0.4.6",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "storybook": "8.6.12"
+    "storybook": "10.4.6",
+    "typescript": "5.5.4"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "*",

ui-admin/upload/package.json

@@ -21,7 +21,7 @@
   },
   "devDependencies": {
     "@atls-ui-admin/button": "workspace:*",
-    "@storybook/react": "8.6.12",
+    "@storybook/react": "10.4.6",
     "@types/react": "19.1.2",
     "@vanilla-extract/css": "1.17.1",
     "@vanilla-extract/dynamic": "2.1.2",
@@ -30,7 +30,8 @@
     "next-themes": "0.4.6",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "storybook": "8.6.12"
+    "storybook": "10.4.6",
+    "typescript": "5.5.4"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "*",

ui-parts/autocomplete/package.json

@@ -22,13 +22,14 @@
     "framer-motion": "12.23.22"
   },
   "devDependencies": {
-    "@storybook/react": "8.6.12",
+    "@storybook/react": "10.4.6",
     "@types/react": "19.1.2",
     "@vanilla-extract/css": "1.17.1",
     "@vanilla-extract/dynamic": "2.1.2",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "storybook": "8.6.12"
+    "storybook": "10.4.6",
+    "typescript": "5.5.4"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "*",

ui-parts/avatar/package.json

@@ -20,13 +20,14 @@
   },
   "devDependencies": {
     "@atls-ui-parts/text-transform": "workspace:*",
-    "@storybook/react": "8.6.12",
+    "@storybook/react": "10.4.6",
     "@types/react": "19.1.2",
     "@vanilla-extract/css": "1.17.1",
     "@vanilla-extract/dynamic": "2.1.2",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "storybook": "8.6.12"
+    "storybook": "10.4.6",
+    "typescript": "5.5.4"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "*",

ui-parts/button/package.json

@@ -21,13 +21,14 @@
   "devDependencies": {
     "@atls-ui-generators/appearance": "workspace:*",
     "@atls-ui-parts/layout": "workspace:*",
-    "@storybook/react": "8.6.12",
+    "@storybook/react": "10.4.6",
     "@types/react": "19.1.2",
     "@vanilla-extract/css": "1.17.1",
     "@vanilla-extract/dynamic": "2.1.2",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "storybook": "8.6.12"
+    "storybook": "10.4.6",
+    "typescript": "5.5.4"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "*",

ui-parts/button/stories/button.stories.tsx

@@ -1,6 +1,10 @@
 import type { Meta }         from '@storybook/react'
 import type { StoryObj }     from '@storybook/react'
 
+import { expect }            from 'storybook/test'
+import { userEvent }         from 'storybook/test'
+import { within }            from 'storybook/test'
+
 import { Button }            from '../src/button.component.js'
 import { buttonAppearances } from '../src/styles/appearance.css.js'
 import { buttonShapes }      from '../src/styles/shape.css.js'
@@ -58,4 +62,12 @@ export const Variants: Story = {
     appearance: 'blue',
     shape: 'huge',
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const button = canvas.getByRole('button', { name: 'Text' })
+
+    await userEvent.click(button)
+
+    await expect(button).toBeEnabled()
+  },
 }

ui-parts/card/package.json

@@ -22,14 +22,15 @@
   "devDependencies": {
     "@atls-ui-parts/button": "workspace:*",
     "@atls-ui-parts/condition": "workspace:*",
-    "@storybook/react": "8.6.12",
+    "@storybook/react": "10.4.6",
     "@types/react": "19.1.2",
     "@types/react-dom": "19.1.2",
     "@vanilla-extract/css": "1.17.1",
     "@vanilla-extract/dynamic": "2.1.2",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "storybook": "8.6.12"
+    "storybook": "10.4.6",
+    "typescript": "5.5.4"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "*",

ui-parts/carousel/package.json

@@ -22,13 +22,14 @@
   "devDependencies": {
     "@atls-ui-parts/condition": "workspace:*",
     "@atls-ui-parts/layout": "workspace:*",
-    "@storybook/react": "8.6.12",
+    "@storybook/react": "10.4.6",
     "@types/react": "19.1.2",
     "@vanilla-extract/css": "1.17.1",
     "@vanilla-extract/dynamic": "2.1.2",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "storybook": "8.6.12"
+    "storybook": "10.4.6",
+    "typescript": "5.5.4"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "*",

ui-parts/checkbox/package.json

@@ -19,13 +19,14 @@
   "devDependencies": {
     "@atls-ui-generators/appearance": "workspace:*",
     "@atls-ui-parts/layout": "workspace:*",
-    "@storybook/react": "8.6.12",
+    "@storybook/react": "10.4.6",
     "@types/react": "19.1.2",
     "@vanilla-extract/css": "1.17.1",
     "@vanilla-extract/dynamic": "2.1.2",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "storybook": "8.6.12"
+    "storybook": "10.4.6",
+    "typescript": "5.5.4"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "*",