Build: Update and change the yarn-pnp example to use Vue

.circleci/config.yml

@@ -884,6 +884,26 @@ jobs:
                 template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner)
             - store_test_results:
                 path: test-results
+    test-yarn-pnp:
+        executor:
+            class: medium
+            name: sb_playwright
+        steps:
+            - git-shallow-clone/checkout_advanced:
+                clone_options: --depth 1 --verbose
+            - attach_workspace:
+                at: .
+            - run:
+                command: yarn install --no-immutable
+                environment:
+                    YARN_ENABLE_IMMUTABLE_INSTALLS: false
+                name: Install dependencies
+                working_directory: test-storybooks/yarn-pnp
+            - run:
+                command: yarn storybook --smoke-test
+                name: Run Storybook smoke test
+                working_directory: test-storybooks/yarn-pnp
+            - report-workflow-on-failure
     unit-tests:
         executor:
             class: xlarge
@@ -1024,6 +1044,9 @@ workflows:
                             - svelte
                 requires:
                     - build
+            - test-yarn-pnp:
+                requires:
+                    - build
             - e2e-ui:
                 requires:
                     - build
@@ -1119,6 +1142,9 @@ workflows:
                             - svelte
                 requires:
                     - build
+            - test-yarn-pnp:
+                requires:
+                    - build
             - e2e-ui:
                 requires:
                     - build
@@ -1185,6 +1211,9 @@ workflows:
                 parallelism: 5
                 requires:
                     - create-sandboxes
+            - test-yarn-pnp:
+                requires:
+                    - build
             - e2e-ui:
                 requires:
                     - build

.circleci/src/jobs/test-yarn-pnp.yml

@@ -0,0 +1,21 @@
+executor:
+  name: sb_playwright
+  class: medium
+
+steps:
+  - git-shallow-clone/checkout_advanced:
+      clone_options: '--depth 1 --verbose'
+  - attach_workspace:
+      at: .
+  - run:
+      name: Install dependencies
+      command: yarn install --no-immutable
+      working_directory: test-storybooks/yarn-pnp
+      environment:
+        YARN_ENABLE_IMMUTABLE_INSTALLS: false
+  - run:
+      name: Run Storybook smoke test
+      command: yarn storybook --smoke-test
+      working_directory: test-storybooks/yarn-pnp
+
+  - report-workflow-on-failure

.circleci/src/workflows/daily.yml

@@ -63,6 +63,9 @@ jobs:
       matrix:
         parameters:
           directory: ['react', 'vue3', 'nextjs', 'svelte']
+  - test-yarn-pnp:
+      requires:
+        - build
   - e2e-ui:
       requires:
         - build

.circleci/src/workflows/merged.yml

@@ -63,6 +63,9 @@ jobs:
       matrix:
         parameters:
           directory: ['react', 'vue3', 'nextjs', 'svelte']
+  - test-yarn-pnp:
+      requires:
+        - build
   - e2e-ui:
       requires:
         - build

.circleci/src/workflows/normal.yml

@@ -62,6 +62,9 @@ jobs:
   #          parallelism: 5
   #          requires:
   #            - create-sandboxes
+  - test-yarn-pnp:
+      requires:
+        - build
   - e2e-ui:
       requires:
         - build

test-storybooks/yarn-pnp/.storybook/main.ts

@@ -1,25 +1,16 @@
-import { fileURLToPath } from "node:url";
-import { dirname } from "node:path";
-import type { StorybookConfig } from '@storybook/react-vite';
-
-const config: StorybookConfig = {
-  "stories": [
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
-  ],
-  "addons": [
-    getAbsolutePath("@chromatic-com/storybook"),
-    getAbsolutePath("@storybook/addon-docs"),
-    getAbsolutePath("@storybook/addon-a11y"),
-    getAbsolutePath("@storybook/addon-vitest")
-  ],
-  "framework": {
-    "name": getAbsolutePath("@storybook/react-vite"),
-    "options": {}
-  }
-};
-export default config;
-
-function getAbsolutePath(value: string): any {
-  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
-}
+import type { StorybookConfig } from "@storybook/vue3-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@chromatic-com/storybook",
+    "@storybook/addon-docs",
+    "@storybook/addon-a11y",
+    "@storybook/addon-vitest",
+  ],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {},
+  },
+};
+export default config;

test-storybooks/yarn-pnp/.storybook/vitest.setup.ts

@@ -1,7 +1,7 @@
 import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
-import { setProjectAnnotations } from '@storybook/react-vite';
-import * as projectAnnotations from './preview';
+import { setProjectAnnotations } from "@storybook/vue3-vite";
+import * as projectAnnotations from "./preview";
 
 // 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([a11yAddonAnnotations, projectAnnotations]);
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

test-storybooks/yarn-pnp/eslint.config.js

@@ -3,8 +3,6 @@ import storybook from "eslint-plugin-storybook";
 
 import js from '@eslint/js'
 import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
 import { globalIgnores } from 'eslint/config'
 
@@ -15,8 +13,6 @@ export default tseslint.config([
     extends: [
       js.configs.recommended,
       tseslint.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
     ],
     languageOptions: {
       ecmaVersion: 2020,

test-storybooks/yarn-pnp/index.html

@@ -1,13 +1,16 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>vue3-vite</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>

test-storybooks/yarn-pnp/package.json

@@ -4,12 +4,11 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "tsc -b && vite build",
-    "build-storybook": "storybook build",
     "dev": "vite",
-    "lint": "eslint .",
+    "build": "vue-tsc -b && vite build",
     "preview": "vite preview",
-    "storybook": "storybook dev -p 6006"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "resolutions": {
     "@playwright/test": "1.52.0",
@@ -50,32 +49,28 @@
     "storybook": "file:../../code/core"
   },
   "dependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "vue": "^3.5.22"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.2",
-    "@eslint/js": "^9.29.0",
-    "@playwright/test": "1.52.0",
-    "@storybook/addon-a11y": "9.1.0-alpha.6",
-    "@storybook/addon-docs": "9.1.0-alpha.6",
-    "@storybook/addon-vitest": "9.1.0-alpha.6",
-    "@storybook/react-vite": "9.1.0-alpha.6",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "@vitejs/plugin-react": "^4.5.2",
-    "@vitest/browser": "^3.2.4",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@storybook/addon-a11y": "^10.1.0-alpha.6",
+    "@storybook/addon-docs": "^10.1.0-alpha.6",
+    "@storybook/addon-onboarding": "^10.1.0-alpha.6",
+    "@storybook/addon-vitest": "^10.1.0-alpha.6",
+    "@storybook/vue3-vite": "^10.1.0-alpha.6",
+    "@types/node": "^24.6.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitest/browser-playwright": "^4.0.7",
+    "@vitest/coverage-v8": "^4.0.7",
+    "@vue/tsconfig": "^0.8.1",
     "eslint": "^9.29.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-storybook": "9.1.0-alpha.6",
-    "globals": "^16.2.0",
-    "playwright": "1.52.0",
-    "storybook": "file:../../code/core",
-    "typescript": "~5.8.3",
+    "playwright": "^1.56.1",
+    "storybook": "^10.1.0-alpha.6",
+    "typescript": "~5.9.3",
     "typescript-eslint": "^8.34.1",
-    "vite": "^7.0.0",
-    "vitest": "^3.2.4"
+    "vite": "^7.1.7",
+    "vitest": "^4.0.7",
+    "vue-tsc": "^3.1.0"
   }
 }