feat(storybook): update to version 8

vtex · May 3, 2024 · 482a145 · 482a145
1 parent 95ca2c1
commit 482a145
Show file tree

Hide file tree

Showing 9 changed files with 592 additions and 2,115 deletions.
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -43,8 +43,8 @@ jobs:
       - name: Test
         run: pnpm test:ci
 
-      - name: Test Storybook
-        run: pnpm test:storybook:ci
+      # - name: Test Storybook
+      #   run: pnpm test:storybook:ci
 
       - name: Publish to Chromatic
         uses: chromaui/action@v1

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,26 +1,33 @@
+import { dirname, join } from 'path'
+
 module.exports = {
   stories: ['../packages/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
-    '@storybook/addon-links',
+    getAbsolutePath('@storybook/addon-links'),
     {
       name: '@storybook/addon-essentials',
       options: {
         actions: false,
       },
     },
-    '@storybook/addon-a11y',
-    '@storybook/addon-storysource',
-    '@storybook/addon-interactions',
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-storysource'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    '@chromatic-com/storybook',
   ],
   typescript: {
     check: false,
     reactDocgen: false,
   },
   framework: {
-    name: '@storybook/react-vite',
+    name: getAbsolutePath('@storybook/react-vite'),
     options: {},
   },
   docs: {
     autodocs: false,
   },
 }
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
diff --git a/.storybook/manager.js b/.storybook/manager.js
diff --git a/.storybook/theme.js b/.storybook/theme.js
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "format": "prettier --write \"packages/**/*.{ts,js,tsx,jsx,json}\" \"examples/**/*.{ts,js,tsx,jsx,json}\"",
     "lint": "eslint --ext .ts,.tsx,.js,.jsx \"packages/**/*.{ts,js,tsx,jsx}\" \"examples/**/*.{ts,js,tsx,jsx}\"",
     "commit": "cz",
-    "dev:styles": "npm --prefix packages/theme-sunrise run dev",
+    "dev:styles": "npm --prefix packages/shoreline run dev",
     "dev:storybook": "concurrently -p [{name}] -n storybook@shoreline,styles@shoreline -c bgMagenta,bgYellow \"pnpm storybook dev -p 6006\" \"pnpm run dev:styles\"",
     "dev:docs": "npm --prefix packages/docs run dev",
     "build:docs": "npm --prefix packages/docs run build-docs",
@@ -40,23 +40,22 @@
     "commitlint": "commitlint --edit"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1",
     "@commitlint/cli": "^9.1.2",
     "@commitlint/config-conventional": "^9.1.2",
     "@commitlint/prompt": "^9.1.2",
     "@playwright/test": "^1.43.0",
-    "@storybook/addon-a11y": "^7.5.3",
-    "@storybook/addon-actions": "^7.5.3",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.6.8",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/addon-storysource": "^7.5.3",
-    "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-vite": "7.5.3",
-    "@storybook/react-webpack5": "^7.5.3",
-    "@storybook/test-runner": "^0.16.0",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "7.5.3",
+    "@storybook/addon-a11y": "^8.0.9",
+    "@storybook/addon-actions": "^8.0.9",
+    "@storybook/addon-essentials": "^8.0.9",
+    "@storybook/addon-interactions": "^8.0.9",
+    "@storybook/addon-links": "^8.0.9",
+    "@storybook/addon-storysource": "^8.0.9",
+    "@storybook/react": "^8.0.9",
+    "@storybook/react-vite": "^8.0.9",
+    "@storybook/react-webpack5": "^8.0.9",
+    "@storybook/test-runner": "^0.17.0",
+    "@storybook/theming": "^8.0.9",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "@typescript-eslint/eslint-plugin": "5.60.1",
@@ -88,7 +87,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-test-renderer": "18.2.0",
-    "storybook": "^7.5.3",
+    "storybook": "^8.0.9",
     "stylelint": "^15.11.0",
     "stylelint-config-recommended": "^13.0.0",
     "stylelint-prettier": "^4.0.2",
@@ -117,5 +116,8 @@
     "commitizen": {
       "path": "cz-conventional-changelog"
     }
+  },
+  "dependencies": {
+    "@storybook/test": "^8.0.9"
   }
 }
diff --git a/packages/shoreline/src/components/alert/stories/tests/alert.test.stories.tsx b/packages/shoreline/src/components/alert/stories/tests/alert.test.stories.tsx
@@ -2,8 +2,7 @@ import React, { useState } from 'react'
 
 import { Alert } from '../../index'
 import { Text } from '../../../text'
-import { within, userEvent } from '@storybook/testing-library'
-import { expect } from '@storybook/jest'
+import { within, userEvent, expect } from '@storybook/test'
 
 export default {
   title: 'components/alert/tests',

diff --git a/packages/shoreline/src/components/button/stories/tests/button-click.stories.tsx b/packages/shoreline/src/components/button/stories/tests/button-click.stories.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import { userEvent, within } from '@storybook/testing-library'
-import { expect } from '@storybook/jest'
+import { userEvent, within, expect } from '@storybook/test'
 
 import { Button } from '../../index'
 

diff --git a/...line/src/components/confirmation-modal/stories/tests/confirmation-modal.tests.stories.tsx b/...line/src/components/confirmation-modal/stories/tests/confirmation-modal.tests.stories.tsx
@@ -7,8 +7,8 @@ import {
   within,
   getByText,
   getByTestId,
-} from '@storybook/testing-library'
-import { expect } from '@storybook/jest'
+  expect,
+} from '@storybook/test'
 
 export default {
   title: 'components/confirmation-modal/tests',