Merge pull request #21 from JReinhold/upgrade-sb-7.6

Upgrade to Storybook 7.6.0

.storybook/interaction.tsx

@@ -1,53 +1,59 @@
-import { userEvent } from '@storybook/testing-library'
+import { userEvent } from '@storybook/test'
 
 export function delay(ms: number) {
   if (!!global.test) {
-    return new Promise(resolve => resolve(undefined));
+    return new Promise((resolve) => resolve(undefined))
   } else {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
       // animate mouse pointer from previous to current element
       return setTimeout(resolve, ms)
-    });
+    })
   }
 }
 
 export async function mouseTo(target: Element, delay = 1700) {
   if (!!global.test || !target) {
-    return new Promise(resolve => resolve(undefined));
+    return new Promise((resolve) => resolve(undefined))
   } else {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
       // animate mouse pointer from previous to current element
       let cursorEl = document.getElementById('demoCursor')
       if (!cursorEl) {
         cursorEl = document.createElement('div')
         cursorEl.id = 'demoCursor'
-        cursorEl.addEventListener('transitionend', () => {
-          if (cursorEl) {
-            cursorEl.className = 'hide'
-          }
-          target.dispatchEvent(new MouseEvent('mouseover', { 'view': window, 'bubbles': true, 'cancelable': true }))
-        }, { capture: true })
+        cursorEl.addEventListener(
+          'transitionend',
+          () => {
+            if (cursorEl) {
+              cursorEl.className = 'hide'
+            }
+            target.dispatchEvent(
+              new MouseEvent('mouseover', { view: window, bubbles: true, cancelable: true })
+            )
+          },
+          { capture: true }
+        )
 
         document.body.appendChild(cursorEl)
       }
 
       if (!target.getBoundingClientRect) {
-        console.log("target does not have getBoundingClientRect", target)
+        console.log('target does not have getBoundingClientRect', target)
         return
       }
 
       const { left, top, width, height } = target.getBoundingClientRect()
-      const sTop = Math.round(top + (Math.min(height / 2, 50))) + 'px'
-      const sLeft = Math.round(left + (Math.min(width / 2, 50))) + 'px'
+      const sTop = Math.round(top + Math.min(height / 2, 50)) + 'px'
+      const sLeft = Math.round(left + Math.min(width / 2, 50)) + 'px'
 
       cursorEl.className = 'moving'
       cursorEl.style.top = sTop
       cursorEl.style.left = sLeft
-      cursorEl.style.transitionDuration = `${Math.round(delay * .9)}ms`
+      cursorEl.style.transitionDuration = `${Math.round(delay * 0.9)}ms`
       // ^ bakes in a 10% time delay from movement ending to click event
 
       return setTimeout(resolve, delay)
-    });
+    })
   }
 }
 

package.json

@@ -26,13 +26,18 @@
     "test:coverage": "vitest run --coverage",
     "test:ci": "vitest run",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build -o build/storybook",
+    "build-storybook": "storybook build --output-dir build/storybook",
+    "build-storybook:test": "storybook build --output-dir build/storybook --test",
     "build-all": "yarn build && yarn build-storybook",
     "chromatic": "chromatic --project-token $CHROMATIC_PROJECT_TOKEN --exit-zero-on-changes --only-changed",
     "prepare": "husky install",
     "lint": "eslint --fix .",
     "prettier": "prettier --write .",
-    "pre-commit": "lint-staged"
+    "pre-commit": "lint-staged",
+    "test-storybook": "test-storybook",
+    "test-storybook:json": "test-storybook --index-json",
+    "test-storybook:ci": "concurrently --kill-others --success first --names \"SB,TEST\" --prefix-colors \"magenta,blue\" \"yarn build-storybook:test && npx serve build/storybook --listen 6006 --no-request-logging\" \"wait-on tcp:6006 && yarn test-storybook\"",
+    "test-storybook:json:ci": "concurrently --kill-others --success first --names \"SB,TEST\" --prefix-colors \"magenta,blue\" \"yarn build-storybook:test && npx serve build/storybook --listen 6006 --no-request-logging\" \"wait-on tcp:6006 && SKIP_SNAPSHOTS=true yarn test-storybook:json\""
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -52,19 +57,16 @@
   "devDependencies": {
     "@babel/core": "^7.14.6",
     "@ladle/react": "^2.4.5",
-    "@storybook/addon-a11y": "7.5.3",
+    "@storybook/addon-a11y": "7.6.0",
     "@storybook/addon-coverage": "^0.0.9",
     "@storybook/addon-designs": "^7.0.5",
-    "@storybook/addon-essentials": "7.5.3",
-    "@storybook/addon-interactions": "7.5.3",
-    "@storybook/addon-storyshots": "7.5.3",
-    "@storybook/blocks": "7.5.3",
-    "@storybook/jest": "^0.2.2",
-    "@storybook/react": "7.5.3",
-    "@storybook/react-vite": "7.5.3",
-    "@storybook/test-runner": "0.13.0",
-    "@storybook/testing-library": "^0.2.0",
-    "@storybook/testing-react": "2.0.0",
+    "@storybook/addon-essentials": "7.6.0",
+    "@storybook/addon-interactions": "7.6.0",
+    "@storybook/blocks": "7.6.0",
+    "@storybook/react": "7.6.0",
+    "@storybook/react-vite": "7.6.0",
+    "@storybook/test": "7.6.0",
+    "@storybook/test-runner": "0.15.3-next.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -84,6 +86,7 @@
     "babel-plugin-open-source": "^1.3.3",
     "c8": "^7.12.0",
     "chromatic": "^6.1.0",
+    "concurrently": "^8.2.2",
     "eslint": "^8.27.0",
     "eslint-config-airbnb-typescript": "^16.0.0",
     "eslint-config-prettier": "^8.3.0",
@@ -92,25 +95,26 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.6.15",
     "husky": ">=6",
     "istanbul": "^0.4.5",
     "jest-junit": "^13.2.0",
     "jsdom": "^20.0.2",
     "lint-staged": ">=10",
-    "msw": "^0.49.3",
-    "msw-storybook-addon": "^1.8.0",
+    "msw": "^1.3.2",
+    "msw-storybook-addon": "^1.10.0",
     "prettier": "^2.5.0",
     "react-is": "^17.0.2",
     "react-test-renderer": "^17.0.2",
-    "storybook": "7.5.3",
+    "storybook": "7.6.0",
     "storybook-mobile-addon": "^2.0.2",
     "vite": "^4.0.0",
     "vite-plugin-svgr": "^2.2.2",
     "vite-tsconfig-paths": "^3.5.2",
     "vitest": "^0.25.1",
     "vitest-axe": "^0.1.0",
-    "vitest-canvas-mock": "^0.2.2"
+    "vitest-canvas-mock": "^0.2.2",
+    "wait-on": "^7.2.0"
   },
   "resolutions": {
     "@types/react": "^17.0.2"

public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (0.49.3).
+ * Mock Service Worker (1.3.2).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

src/pages/RestaurantDetailPage/RestaurantDetailPage.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react'
 import { rest } from 'msw'
-import { within, userEvent } from '@storybook/testing-library'
-import { expect } from '@storybook/jest'
+import { within, userEvent } from '@storybook/test'
+import { expect } from '@storybook/test'
 
 import { BASE_URL } from '../../api'
 import { restaurants } from '../../stub/restaurants'

src/pages/UserFlows.stories.tsx

@@ -1,8 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react'
-import isChromatic from 'chromatic/isChromatic'
 import { rest } from 'msw'
-import { expect } from '@storybook/jest'
-import { within, userEvent } from '@storybook/testing-library'
+import { within, userEvent, expect } from '@storybook/test'
 
 import { BASE_URL } from '../api'
 import { restaurants } from '../stub/restaurants'