New prerelease structure / upgrade to SB7

.storybook/main.js

@@ -39,10 +39,14 @@ module.exports = {
   stories,
   addons,
   features: {
-    storyStoreV7: process.env.STORY_STORE_V7 ? true : false,
+    storyStoreV7: process.env.STORY_STORE_V7 === 'false' ? false : true,
     buildStoriesJson: true,
   },
   core: {
     disableTelemetry: true,
   },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
 };

README.md

@@ -37,6 +37,9 @@ Storybook test runner turns all of your stories into executable tests.
   - [Adding the test runner to other CI environments](#adding-the-test-runner-to-other-ci-environments)
   - [Merging test coverage results in wrong coverage](#merging-test-coverage-results-in-wrong-coverage)
 - [Future work](#future-work)
+- [Contributing](#contributing)
+  - [Branch structure](#branch-structure)
+  - [Release process](#release-process)
 
 ## Features
 
@@ -606,3 +609,23 @@ Future plans involve adding support for the following features:
 
 - 📄 Run addon reports
 - ⚙️ Spawning Storybook via the test runner in a single command
+
+---
+
+## Contributing
+
+We welcome contributions to the test runner!
+
+### Branch structure
+
+- **next** - the `next` version on npm, and the development branch where most work occurs
+- **prerelease** - the `prerelease` version on npm, where eventual changes to `main` get tested
+- **main** - the `latest` version on npm and the stable version that most users use
+
+### Release process
+
+1. All PRs should target the `next` branch, which depends on the `next` version of Storybook.
+2. When merged, a new version of this package will be released on the `next` NPM tag.
+3. If the change contains a bugfix that needs to be patched back to the stable version, please note that in PR description.
+4. PRs labeled `pick` will get cherry-picked back to the `prerelease` branch and will generate a release on the `prerelease` npm tag.
+5. Once validated, `prerelease` PRs will get merged back to the `main` branch, which will generate a release on the `latest` npm tag.

package.json

@@ -40,9 +40,9 @@
     "build": "concurrently \"yarn buildBabel\" \"yarn buildTsc\"",
     "build:watch": "concurrently \"yarn buildBabel:cjs -- --watch\" \"yarn buildTsc -- --watch\"",
     "test": "jest",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "storybook dev -p 6006",
     "start": "concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"",
-    "build-storybook": "build-storybook",
+    "build-storybook": "storybook build",
     "release": "yarn build && auto shipit",
     "test-storybook": "node bin/test-storybook.js",
     "test-storybook:failures": "SKIP_SNAPSHOTS=true TEST_FAILURES=1 yarn test-storybook --json --outputFile test-results.json",
@@ -59,13 +59,14 @@
     "@auto-it/released": "^10.37.1",
     "@babel/cli": "^7.12.1",
     "@jest/types": "^28.1.3",
-    "@storybook/addon-coverage": "^0.0.1",
-    "@storybook/addon-essentials": "^6.5.0",
-    "@storybook/addon-interactions": "^6.5.0",
+    "@storybook/addon-coverage": "^0.0.5",
+    "@storybook/addon-essentials": "next",
+    "@storybook/addon-interactions": "next",
     "@storybook/jest": "^0.0.10",
-    "@storybook/react": "^6.5.0",
-    "@storybook/testing-library": "^0.0.11",
-    "@storybook/testing-react": "^1.2.4",
+    "@storybook/react": "next",
+    "@storybook/react-webpack5": "next",
+    "@storybook/testing-library": "next",
+    "@storybook/testing-react": "^1.3.0",
     "@testing-library/dom": "^8.1.0",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
@@ -84,6 +85,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",
+    "storybook": "next",
     "ts-jest": "^28.0.8",
     "typescript": "^4.2.4",
     "wait-on": "^6.0.0"
@@ -109,10 +111,10 @@
     "@babel/preset-typescript": "^7.18.6",
     "@babel/template": "^7.14.5",
     "@babel/types": "^7.14.8",
-    "@storybook/core-common": "^6.5.0",
+    "@storybook/core-common": "next",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/csf-tools": "^6.5.0",
-    "@storybook/store": "^6.5.0",
+    "@storybook/csf-tools": "next",
+    "@storybook/store": "next",
     "can-bind-to-host": "^1.1.1",
     "commander": "^9.0.0",
     "expect-playwright": "^0.8.0",
@@ -134,6 +136,10 @@
     "ts-dedent": "^2.0.0"
   },
   "auto": {
+    "prereleaseBranches": [
+      "next",
+      "prerelease"
+    ],
     "plugins": [
       "npm",
       "released"

src/csf/transformCsf.ts

@@ -15,7 +15,7 @@ export interface TestContext {
 }
 type TemplateResult = t.Statement | t.Statement[];
 type FilePrefixer = () => TemplateResult;
-type TestPrefixer = (context: TestContext) => TemplateResult;
+export type TestPrefixer = (context: TestContext) => TemplateResult;
 
 interface TransformOptions {
   clearBody?: boolean;

src/playwright/transformPlaywright.ts

@@ -4,6 +4,7 @@ import { userOrAutoTitle } from '@storybook/store';
 
 import { getStorybookMetadata } from '../util';
 import { transformCsf } from '../csf/transformCsf';
+import type { TestPrefixer } from '../csf/transformCsf';
 import dedent from 'ts-dedent';
 
 const filePrefixer = template(`
@@ -68,7 +69,7 @@ export const testPrefixer = template(
   {
     plugins: ['jsx'],
   }
-);
+) as any as TestPrefixer;
 
 const makeTitleFactory = (filename: string) => {
   const { workingDir, normalizedStoriesEntries } = getStorybookMetadata();
@@ -80,7 +81,6 @@ const makeTitleFactory = (filename: string) => {
 export const transformPlaywright = (src: string, filename: string) => {
   const result = transformCsf(src, {
     filePrefixer,
-    // @ts-ignore
     testPrefixer,
     insertTestIfEmpty: true,
     clearBody: true,

src/util/getStorybookMetadata.test.ts

@@ -32,7 +32,7 @@ describe('getStorybookMetadata', () => {
     process.env.STORYBOOK_CONFIG_DIR = '.storybook';
     const { storiesPaths } = getStorybookMetadata();
     expect(storiesPaths).toMatchInlineSnapshot(
-      `"<rootDir>/stories/basic/**/*.stories.@(mdx|tsx|ts|jsx|js)"`
+      `"<rootDir>/stories/basic/**/*.@(mdx|stories.mdx|stories.tsx|stories.ts|stories.jsx|stories.js)"`
     );
   });
 
@@ -62,7 +62,7 @@ describe('getStorybookMetadata', () => {
     process.env.STORYBOOK_CONFIG_DIR = '.storybook';
     const { storiesPaths } = getStorybookMetadata();
     expect(storiesPaths).toMatchInlineSnapshot(
-      `"<rootDir>/stories/basic/**/*.stories.@(mdx|tsx|ts|jsx|js);<rootDir>/stories/complex/*.stories.@(js|ts)"`
+      `"<rootDir>/stories/basic/**/*.@(mdx|stories.mdx|stories.tsx|stories.ts|stories.jsx|stories.js);<rootDir>/stories/complex/*.stories.@(js|ts)"`
     );
   });
 

stories/docs/Introduction.stories.mdx

@@ -10,7 +10,8 @@ import StackAlt from './assets/stackalt.svg';
 
 <Meta title="Example/Introduction" />
 
-<style>{`
+<style>
+  {`
   .subheading {
     --mediumdark: '#999999';
     font-weight: 900;
@@ -112,7 +113,8 @@ import StackAlt from './assets/stackalt.svg';
   }
 
 
-`}</style>
+  `}
+</style>
 
 # Welcome to Storybook