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'