Merge pull request #318 from storybookjs/feat/patch-main

Release 0.11.0

.github/ISSUE_TEMPLATE/bug-report-🐞.md

@@ -0,0 +1,30 @@
+---
+name: "Bug report \U0001F41E"
+about: Create a report to help us improve
+title: "[bug] "
+labels: bug, needs triage
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**System**
+Please paste the results of `npx storybook@latest info` here.
+
+**Additional context**
+Add any other context about the problem here.

.github/workflows/tests-extended.yml

@@ -1,17 +1,20 @@
 name: Tests-extended
 
-on: [push]
+on: [push, pull_request]
 
 jobs:
   test:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x]
     steps:
       - uses: actions/checkout@v2
 
       - name: Use Node.js 16.x
         uses: actions/setup-node@v1
         with:
-          node-version: 16.x
+          node-version: ${{ matrix.node-version }}
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1

.github/workflows/tests.yml

@@ -1,17 +1,20 @@
 name: Tests
 
-on: [push]
+on: [push, pull_request]
 
 jobs:
   test:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x]
     steps:
       - uses: actions/checkout@v2
 
       - name: Use Node.js 16.x
         uses: actions/setup-node@v1
         with:
-          node-version: 16.x
+          node-version: ${{ matrix.node-version }}
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1

.storybook/main.js → .storybook/main.ts

@@ -1,5 +1,5 @@
 let stories = [
-  '../stories/docs/**/*.stories.mdx',
+  '../stories/docs/**/*.mdx',
   // default title prefix
   {
     titlePrefix: 'Atoms',
@@ -13,11 +13,9 @@ let stories = [
   // general glob
   '../stories/pages/**/*.stories.@(js|jsx|ts|tsx)',
 ];
-
 if (process.env.TEST_FAILURES) {
   stories = ['../stories/expected-failures/*.stories.@(js|jsx|ts|tsx)'];
 }
-
 const addons = [
   process.env.WITHOUT_DOCS
     ? {
@@ -29,8 +27,8 @@ const addons = [
     : '@storybook/addon-essentials',
   '@storybook/addon-interactions',
   '@storybook/addon-coverage',
+  '@storybook/addon-mdx-gfm',
 ];
-
 module.exports = {
   stories,
   addons,
@@ -45,4 +43,7 @@ module.exports = {
     name: '@storybook/react-webpack5',
     options: {},
   },
+  docs: {
+    autodocs: true,
+  },
 };

.storybook/test-runner.ts

@@ -1,6 +1,6 @@
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
-import { getStoryContext } from '../dist/cjs/playwright/hooks';
-import type { TestRunnerConfig } from '../dist/ts';
+import { getStoryContext } from '../dist/playwright/hooks';
+import type { TestRunnerConfig } from '../dist';
 
 const snapshotsDir = process.env.SNAPSHOTS_DIR || '__snapshots__';
 const customSnapshotsDir = `${process.cwd()}/${snapshotsDir}`;

README.md

@@ -24,6 +24,7 @@ Storybook test runner turns all of your stories into executable tests.
     - [Manually configuring istanbul](#manually-configuring-istanbul)
   - [2 - Run tests with --coverage flag](#2---run-tests-with---coverage-flag)
   - [3 - Merging code coverage with coverage from other tools](#3---merging-code-coverage-with-coverage-from-other-tools)
+  - [4 - Run tests with --shard flag](#4---run-tests-with---shard-flag)
 - [Experimental test hook API](#experimental-test-hook-api)
   - [prepare](#prepare)
   - [getHttpHeaders](#gethttpheaders)
@@ -416,6 +417,62 @@ Here's an example on how to achieve that:
 > **Note**
 > If your other tests (e.g. Jest) are using a different coverageProvider than `babel`, you will have issues when merging the coverage files. [More info here](#merging-test-coverage-results-in-wrong-coverage).
 
+### 4 - Run tests with --shard flag
+
+The test-runner collects all coverage in one file `coverage/storybook/coverage-storybook.json`. To split the coverage file you should rename it using the `shard-index`. To report the coverage you should merge the coverage files with the nyc merge command.
+
+Github CI example:
+
+```yml
+test:
+  name: Running Test-storybook (${{ matrix.shard }})
+  strategy:
+    matrix:
+      shard: [1, 2, 3, 4]
+  steps:
+    - name: Testing storybook
+      run: yarn test-storybook --coverage --shard=${{ matrix.shard }}/${{ strategy.job-total }}
+    - name: Renaming coverage file
+      uses: mv coverage/storybook/coverage-storybook.json coverage/storybook/coverage-storybook-${matrix.shard}.json
+report-coverage:
+  name: Reporting storybook coverage
+  steps:
+    - name: Merging coverage
+      uses: yarn nyc merge coverage/storybook merged-output/merged-coverage.json
+    - name: Report coverage
+      uses: yarn nyc report --reporter=text -t merged-output --report-dir merged-output
+```
+
+Circle CI example:
+
+```yml
+test:
+  parallelism: 4
+  steps:
+    - run:
+        command: yarn test-storybook --coverage --shard=$(expr $CIRCLE_NODE_INDEX + 1)/$CIRCLE_NODE_TOTAL
+        command: mv coverage/storybook/coverage-storybook.json coverage/storybook/coverage-storybook-${CIRCLE_NODE_INDEX + 1}.json
+report-coverage:
+  steps:
+    - run:
+        command: yarn nyc merge coverage/storybook merged-output/merged-coverage.json
+        command: yarn nyc report --reporter=text -t merged-output --report-dir merged-output
+```
+
+Gitlab CI example:
+
+```yml
+test:
+  parallel: 4
+  script:
+    - yarn test-storybook --coverage --shard=$CI_NODE_INDEX/$CI_NODE_TOTAL
+    - mv coverage/storybook/coverage-storybook.json coverage/storybook/coverage-storybook-${CI_NODE_INDEX}.json
+report-coverage:
+  script:
+    - yarn nyc merge coverage/storybook merged-output/merged-coverage.json
+    - yarn nyc report --reporter=text -t merged-output --report-dir merged-output
+```
+
 ## Experimental test hook API
 
 The test runner renders a story and executes its [play function](https://storybook.js.org/docs/react/writing-stories/play-function) if one exists. However, there are certain behaviors that are not possible to achieve via the play function, which executes in the browser. For example, if you want the test runner to take visual snapshots for you, this is something that is possible via Playwright/Jest, but must be executed in Node.

package.json

@@ -16,56 +16,52 @@
   },
   "author": "shilman",
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/ts/index.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "bin": {
-    "test-storybook": "./bin/test-storybook.js"
+    "test-storybook": "./dist/test-storybook.js"
   },
   "files": [
-    "bin",
-    "dist/**/*",
+    "dist",
     "README.md",
     "playwright",
-    "*.js",
     "*.d.ts"
   ],
   "scripts": {
-    "clean": "rimraf ./dist",
-    "buildBabel": "concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"",
-    "buildBabel:cjs": "babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"",
-    "buildBabel:esm": "babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"",
-    "buildTsc": "tsc --declaration --emitDeclarationOnly --outDir ./dist/ts",
-    "prebuild": "yarn clean",
-    "build": "concurrently \"yarn buildBabel\" \"yarn buildTsc\"",
-    "build:watch": "concurrently \"yarn buildBabel:cjs -- --watch\" \"yarn buildTsc -- --watch\"",
+    "build": "tsup",
+    "build:watch": "tsup --watch",
     "test": "jest",
     "storybook": "storybook dev -p 6006",
     "start": "concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"",
     "build-storybook": "storybook build",
     "release": "yarn build && auto shipit",
-    "test-storybook": "node bin/test-storybook.js",
+    "test-storybook": "node dist/test-storybook",
     "test-storybook:failures": "SKIP_SNAPSHOTS=true TEST_FAILURES=1 yarn test-storybook --json --outputFile test-results.json",
     "test-storybook:no-cache": "yarn test-storybook --no-cache",
     "test-storybook:json": "yarn test-storybook --stories-json",
-    "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && yarn test-storybook\"",
-    "test-storybook:ci-failures": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"TEST_FAILURES=1 yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && yarn test-storybook:failures\"",
-    "test-storybook:ci-coverage": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && yarn test-storybook --coverage\"",
-    "test-storybook:ci-json": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && SKIP_SNAPSHOTS=true yarn test-storybook:json\"",
+    "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx serve storybook-static -l 6006\" \"wait-on tcp:6006 && yarn test-storybook\"",
+    "test-storybook:ci-failures": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"TEST_FAILURES=1 yarn build-storybook --quiet && npx serve storybook-static -l 6006\" \"wait-on tcp:6006 && yarn test-storybook:failures\"",
+    "test-storybook:ci-coverage": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx serve storybook-static -l 6006\" \"wait-on tcp:6006 && yarn test-storybook --coverage\"",
+    "test-storybook:ci-json": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx serve storybook-static -l 6006\" \"wait-on tcp:6006 && SKIP_SNAPSHOTS=true yarn test-storybook:json\"",
     "generate-dynamic-stories": "node scripts/generate-dynamic-stories.js",
     "prepare": "husky install"
   },
   "devDependencies": {
     "@auto-it/released": "^10.37.1",
-    "@babel/cli": "^7.20.7",
+    "@babel/cli": "^7.12.1",
+    "@babel/preset-env": "^7.19.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
     "@jest/types": "^28.1.3",
     "@storybook/addon-coverage": "^0.0.7",
-    "@storybook/addon-essentials": "next",
-    "@storybook/addon-interactions": "next",
-    "@storybook/jest": "next",
-    "@storybook/react": "next",
-    "@storybook/react-webpack5": "next",
-    "@storybook/testing-library": "next",
+    "@storybook/addon-essentials": "^7.0.0",
+    "@storybook/addon-interactions": "^7.0.0",
+    "@storybook/addon-mdx-gfm": "^7.0.0",
+    "@storybook/jest": "^0.1.0",
+    "@storybook/react": "^7.0.0",
+    "@storybook/react-webpack5": "^7.0.0",
+    "@storybook/testing-library": "^0.1.0",
     "@types/jest": "^27.0.3",
     "@types/node": "^16.4.1",
     "auto": "^10.3.0",
@@ -81,8 +77,10 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",
-    "storybook": "next",
+    "semver": "^7.3.7",
+    "storybook": "^7.0.0",
     "ts-jest": "^28.0.8",
+    "tsup": "^6.5.0",
     "typescript": "~4.9.4",
     "wait-on": "^6.0.0"
   },
@@ -100,21 +98,20 @@
     "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
   },
   "dependencies": {
-    "@babel/core": "^7.20.7",
-    "@babel/generator": "^7.20.7",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@babel/template": "^7.20.7",
-    "@babel/types": "^7.20.7",
+    "@babel/core": "^7.22.5",
+    "@babel/generator": "^7.22.5",
+    "@babel/types": "^7.22.5",
+    "@babel/template": "^7.22.5",
     "@storybook/core-common": "^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0",
-    "@storybook/csf": "^0.1.0",
+    "@storybook/csf": "^0.1.1",
     "@storybook/csf-tools": "^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0",
     "@storybook/preview-api": "^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0",
+    "@swc/core": "^1.3.18",
+    "@swc/jest": "^0.2.23",
     "can-bind-to-host": "^1.1.1",
     "commander": "^9.0.0",
     "expect-playwright": "^0.8.0",
-    "glob": "^8.1.0",
+    "glob": "^10.2.2",
     "jest": "^28.0.0",
     "jest-circus": "^28.0.0",
     "jest-environment-node": "^28.0.0",
@@ -126,15 +123,14 @@
     "node-fetch": "^2",
     "playwright": "^1.14.0",
     "read-pkg-up": "^7.0.1",
-    "regenerator-runtime": "^0.13.9",
-    "semver": "^7.3.7",
     "tempy": "^1.0.1",
     "ts-dedent": "^2.0.0"
   },
   "auto": {
     "prereleaseBranches": [
       "next",
-      "prerelease"
+      "prerelease",
+      "future"
     ],
     "plugins": [
       "npm",

playwright/custom-environment.js

@@ -1,6 +1,5 @@
-const { setupPage } = require('../dist/cjs/setup-page');
+const { setupPage } = require('../dist/setup-page');
 
-require('regenerator-runtime/runtime');
 const PlaywrightEnvironment = require('jest-playwright-preset/lib/PlaywrightEnvironment').default;
 
 class CustomEnvironment extends PlaywrightEnvironment {

playwright/jest-setup.js

@@ -1,4 +1,4 @@
-const { getTestRunnerConfig, setPreRender, setPostRender, setupPage } = require('../dist/cjs');
+const { getTestRunnerConfig, setPreRender, setPostRender, setupPage } = require('../dist');
 
 const testRunnerConfig = getTestRunnerConfig(process.env.STORYBOOK_CONFIG_DIR);
 if (testRunnerConfig) {

playwright/test-runner-jest.config.js

@@ -1,5 +1,8 @@
 const { getJestConfig } = require('@storybook/test-runner');
 
+/**
+ * @type {import('@jest/types').Config.InitialOptions}
+ */
 module.exports = {
   // The default configuration comes from @storybook/test-runner
   ...getJestConfig(),

playwright/transform.js

@@ -1,19 +1,15 @@
-const { transform: babelTransform } = require('@babel/core');
-const { transformPlaywright } = require('../dist/cjs/playwright/transformPlaywright');
+const { transformSync: swcTransform } = require('@swc/core');
+const { transformPlaywright } = require('../dist/playwright/transformPlaywright');
 
 module.exports = {
   process(src, filename) {
     const csfTest = transformPlaywright(src, filename);
 
-    const result = babelTransform(csfTest, {
+    const result = swcTransform(csfTest, {
       filename,
-      babelrc: false,
-      configFile: false,
-      presets: [
-        ['@babel/preset-env', { targets: { node: 'current' } }],
-        '@babel/preset-typescript',
-        '@babel/preset-react',
-      ],
+      module: {
+        type: 'commonjs',
+      },
     });
 
     return { code: result ? result.code : src };