diff --git a/.circleci/config.yml b/.circleci/config.yml
index 385972ef21d8..ddc8d0667b12 100644
--- a/.circleci/config.yml
+++ b/.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
diff --git a/.circleci/src/jobs/test-yarn-pnp.yml b/.circleci/src/jobs/test-yarn-pnp.yml
new file mode 100644
index 000000000000..b89e4d8bd540
--- /dev/null
+++ b/.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
diff --git a/.circleci/src/workflows/daily.yml b/.circleci/src/workflows/daily.yml
index 0f31c5279609..e79f8479054e 100644
--- a/.circleci/src/workflows/daily.yml
+++ b/.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
diff --git a/.circleci/src/workflows/merged.yml b/.circleci/src/workflows/merged.yml
index bdf687d408a4..5cfc1b836e33 100644
--- a/.circleci/src/workflows/merged.yml
+++ b/.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
diff --git a/.circleci/src/workflows/normal.yml b/.circleci/src/workflows/normal.yml
index 5aa63679dffb..2a9639f46535 100644
--- a/.circleci/src/workflows/normal.yml
+++ b/.circleci/src/workflows/normal.yml
@@ -62,6 +62,9 @@ jobs:
# parallelism: 5
# requires:
# - create-sandboxes
+ - test-yarn-pnp:
+ requires:
+ - build
- e2e-ui:
requires:
- build
diff --git a/test-storybooks/yarn-pnp/.storybook/main.ts b/test-storybooks/yarn-pnp/.storybook/main.ts
index d0d77ba98234..88cd184ea953 100644
--- a/test-storybooks/yarn-pnp/.storybook/main.ts
+++ b/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`)));
-}
\ No newline at end of file
+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;
diff --git a/test-storybooks/yarn-pnp/.storybook/vitest.setup.ts b/test-storybooks/yarn-pnp/.storybook/vitest.setup.ts
index 44922d55e49d..d3876789a13a 100644
--- a/test-storybooks/yarn-pnp/.storybook/vitest.setup.ts
+++ b/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]);
\ No newline at end of file
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);
diff --git a/test-storybooks/yarn-pnp/README.md b/test-storybooks/yarn-pnp/README.md
deleted file mode 100644
index 7959ce426934..000000000000
--- a/test-storybooks/yarn-pnp/README.md
+++ /dev/null
@@ -1,69 +0,0 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config([
- globalIgnores(['dist']),
- {
- files: ['**/*.{ts,tsx}'],
- extends: [
- // Other configs...
-
- // Remove tseslint.configs.recommended and replace with this
- ...tseslint.configs.recommendedTypeChecked,
- // Alternatively, use this for stricter rules
- ...tseslint.configs.strictTypeChecked,
- // Optionally, add this for stylistic rules
- ...tseslint.configs.stylisticTypeChecked,
-
- // Other configs...
- ],
- languageOptions: {
- parserOptions: {
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
- tsconfigRootDir: import.meta.dirname,
- },
- // other options...
- },
- },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config([
- globalIgnores(['dist']),
- {
- files: ['**/*.{ts,tsx}'],
- extends: [
- // Other configs...
- // Enable lint rules for React
- reactX.configs['recommended-typescript'],
- // Enable lint rules for React DOM
- reactDom.configs.recommended,
- ],
- languageOptions: {
- parserOptions: {
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
- tsconfigRootDir: import.meta.dirname,
- },
- // other options...
- },
- },
-])
-```
diff --git a/test-storybooks/yarn-pnp/eslint.config.js b/test-storybooks/yarn-pnp/eslint.config.js
index bc656236fe0c..279fc495572d 100644
--- a/test-storybooks/yarn-pnp/eslint.config.js
+++ b/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,
diff --git a/test-storybooks/yarn-pnp/index.html b/test-storybooks/yarn-pnp/index.html
index e4b78eae1230..fc7120dd11e1 100644
--- a/test-storybooks/yarn-pnp/index.html
+++ b/test-storybooks/yarn-pnp/index.html
@@ -1,13 +1,16 @@
-
-
-
-
- Vite + React + TS
-
-
-
-
-
-
+
+
+
+
+
+ vue3-vite
+
+
+
+
+
+
+
+