Merge pull request #26063 from storybookjs/feature/portable-stories-i…

…mprovements

Portable stories: Introduce experimental Playwright CT API and Support for more renderers

.circleci/config.yml

@@ -47,6 +47,19 @@ executors:
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
+  sb_playwright_component_testing:
+    parameters:
+      class:
+        description: The Resource class
+        type: enum
+        enum: ["small", "medium", "medium+", "large", "xlarge"]
+        default: "small"
+    working_directory: /tmp/storybook
+    docker:
+      - image: mcr.microsoft.com/playwright:v1.42.1-jammy
+        environment:
+          NODE_OPTIONS: --max_old_space_size=6144
+    resource_class: <<parameters.class>>
 
 orbs:
   git-shallow-clone: guitarrapc/git-shallow-clone@2.5.0
@@ -565,7 +578,39 @@ jobs:
                   STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >>
                   STORYBOOK_DISABLE_TELEMETRY: true
       - report-workflow-on-failure
-
+  test-portable-stories:
+    parameters:
+      directory:
+        type: string
+    executor:
+      name: sb_playwright_component_testing
+      class: medium
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: "--depth 1 --verbose"
+      - attach_workspace:
+          at: .
+      - run:
+          name: Install dependencies
+          command: yarn install
+          working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
+      - run:
+          name: Run Jest tests
+          command: yarn jest
+          working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
+      - run:
+          name: Run Vitest tests
+          command: yarn vitest
+          working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
+      - run:
+          name: Run Playwright CT tests
+          command: yarn playwright
+          working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
+      - run:
+          name: Run Cypress CT tests
+          command: yarn cypress
+          working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
+      - report-workflow-on-failure
 workflows:
   docs:
     when:
@@ -624,6 +669,12 @@ workflows:
           parallelism: 5
           requires:
             - build-sandboxes
+      - test-portable-stories:
+          requires:
+            - build
+          matrix:
+            parameters:
+              directory: ["react", "vue3", "nextjs", "svelte"]
       # TODO: reenable once we find out the source of flakyness
       # - test-runner-dev:
       #     requires:
@@ -676,6 +727,12 @@ workflows:
           parallelism: 14
           requires:
             - build-sandboxes
+      - test-portable-stories:
+          requires:
+            - build
+          matrix:
+            parameters:
+              directory: ["react", "vue3", "nextjs", "svelte"]
       - bench:
           parallelism: 5
           requires:
@@ -733,7 +790,12 @@ workflows:
           parallelism: 30
           requires:
             - build-sandboxes
-
+      - test-portable-stories:
+          requires:
+            - build
+          matrix:
+            parameters:
+              directory: ["react", "vue3", "nextjs", "svelte"]
       - test-empty-init:
           requires:
             - build

code/addons/a11y/package.json

@@ -32,8 +32,12 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
+    "./preview": {
+      "types": "./dist/preview.d.ts",
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs"
+    },
     "./manager": "./dist/manager.js",
-    "./preview": "./dist/preview.js",
     "./register": "./dist/manager.js",
     "./package.json": "./package.json"
   },

code/addons/actions/package.json

@@ -33,8 +33,12 @@
       "require": "./dist/decorator.js",
       "import": "./dist/decorator.mjs"
     },
+    "./preview": {
+      "types": "./dist/preview.d.ts",
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs"
+    },
     "./manager": "./dist/manager.js",
-    "./preview": "./dist/preview.js",
     "./register.js": "./dist/manager.js",
     "./package.json": "./package.json"
   },

code/addons/backgrounds/package.json

@@ -32,8 +32,12 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
+    "./preview": {
+      "types": "./dist/preview.d.ts",
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs"
+    },
     "./manager": "./dist/manager.js",
-    "./preview": "./dist/preview.js",
     "./register": "./dist/manager.js",
     "./package.json": "./package.json"
   },

code/addons/essentials/package.json

@@ -28,22 +28,50 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
-    "./actions/preview": "./dist/actions/preview.js",
+    "./actions/preview": {
+      "types": "./dist/actions/preview.d.ts",
+      "import": "./dist/actions/preview.mjs",
+      "require": "./dist/actions/preview.js"
+    },
     "./actions/manager": "./dist/actions/manager.js",
-    "./backgrounds/preview": "./dist/backgrounds/preview.js",
+    "./backgrounds/preview": {
+      "types": "./dist/backgrounds/preview.d.ts",
+      "import": "./dist/backgrounds/preview.mjs",
+      "require": "./dist/backgrounds/preview.js"
+    },
     "./backgrounds/manager": "./dist/backgrounds/manager.js",
     "./controls/manager": "./dist/controls/manager.js",
-    "./docs/preview": "./dist/docs/preview.js",
+    "./docs/preview": {
+      "types": "./dist/docs/preview.d.ts",
+      "import": "./dist/docs/preview.mjs",
+      "require": "./dist/docs/preview.js"
+    },
     "./docs/preset": "./dist/docs/preset.js",
     "./docs/mdx-react-shim": "./dist/docs/mdx-react-shim.js",
-    "./highlight/preview": "./dist/highlight/preview.js",
-    "./measure/preview": "./dist/measure/preview.js",
+    "./highlight/preview": {
+      "types": "./dist/highlight/preview.d.ts",
+      "import": "./dist/highlight/preview.mjs",
+      "require": "./dist/highlight/preview.js"
+    },
+    "./measure/preview": {
+      "types": "./dist/measure/preview.d.ts",
+      "import": "./dist/measure/preview.mjs",
+      "require": "./dist/measure/preview.js"
+    },
     "./measure/manager": "./dist/measure/manager.js",
-    "./outline/preview": "./dist/outline/preview.js",
+    "./outline/preview": {
+      "types": "./dist/outline/preview.d.ts",
+      "import": "./dist/outline/preview.mjs",
+      "require": "./dist/outline/preview.js"
+    },
     "./outline/manager": "./dist/outline/manager.js",
     "./toolbars/manager": "./dist/toolbars/manager.js",
     "./viewport/manager": "./dist/viewport/manager.js",
-    "./viewport/preview": "./dist/viewport/preview.js",
+    "./viewport/preview": {
+      "types": "./dist/viewport/preview.d.ts",
+      "import": "./dist/viewport/preview.mjs",
+      "require": "./dist/viewport/preview.js"
+    },
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",

code/addons/essentials/src/measure/preview.ts

@@ -1,2 +1 @@
-// @ts-expect-error (no types needed for this)
 export * from '@storybook/addon-measure/preview';

code/addons/highlight/package.json

@@ -30,7 +30,11 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
-    "./preview": "./dist/preview.js",
+    "./preview": {
+      "types": "./dist/preview.d.ts",
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs"
+    },
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",

code/addons/highlight/src/preview.ts

@@ -8,18 +8,12 @@ const { document } = global;
 
 type OutlineStyle = 'dotted' | 'dashed' | 'solid' | 'double';
 
-export const highlightStyle = (color = '#FF4785', style: OutlineStyle = 'dashed') => `
+const highlightStyle = (color = '#FF4785', style: OutlineStyle = 'dashed') => `
   outline: 2px ${style} ${color};
   outline-offset: 2px;
   box-shadow: 0 0 0 6px rgba(255,255,255,0.6);
 `;
 
-export const highlightObject = (color: string) => ({
-  outline: `2px dashed ${color}`,
-  outlineOffset: 2,
-  boxShadow: '0 0 0 6px rgba(255,255,255,0.6)',
-});
-
 interface HighlightInfo {
   /** html selector of the element */
   elements: string[];

code/addons/interactions/package.json

@@ -28,8 +28,12 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
+    "./preview": {
+      "types": "./dist/preview.d.ts",
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs"
+    },
     "./manager": "./dist/manager.js",
-    "./preview": "./dist/preview.js",
     "./preset": "./dist/preset.js",
     "./register.js": "./dist/manager.js",
     "./package.json": "./package.json"

code/addons/links/package.json

@@ -33,8 +33,12 @@
       "require": "./dist/react/index.js",
       "import": "./dist/react/index.mjs"
     },
+    "./preview": {
+      "types": "./dist/preview.d.ts",
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs"
+    },
     "./manager": "./dist/manager.js",
-    "./preview": "./dist/preview.js",
     "./register": "./dist/manager.js",
     "./package.json": "./package.json"
   },

code/addons/measure/package.json

@@ -31,8 +31,12 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
+    "./preview": {
+      "types": "./dist/preview.d.ts",
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs"
+    },
     "./manager": "./dist/manager.js",
-    "./preview": "./dist/preview.js",
     "./register": "./dist/manager.js",
     "./package.json": "./package.json"
   },

code/addons/outline/package.json

@@ -34,8 +34,12 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
+    "./preview": {
+      "types": "./dist/preview.d.ts",
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs"
+    },
     "./manager": "./dist/manager.js",
-    "./preview": "./dist/preview.js",
     "./register": "./dist/manager.js",
     "./package.json": "./package.json"
   },