Build: Switch to use pnpm

.github/workflows/release.yml

@@ -12,17 +12,20 @@ jobs:
       - name: Prepare repository
         run: git fetch --unshallow --tags
 
-      - name: Use Node.js 16.x
+      - name: Use Node.js 18.x
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
 
-      - name: Install dependencies
-        run: yarn install --ignore-scripts
+      - uses: pnpm/action-setup@v2
+        name: Install dependencies
+        with:
+          version: 8
+          run_install: true
 
       - name: Create Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          yarn release
+          pnpm run release

.nvmrc

@@ -0,0 +1 @@
+v18

.storybook/main.ts

@@ -20,7 +20,7 @@ const config: StorybookConfig = {
     options: {},
   },
   staticDirs: ["../public"],
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
   logLevel: "debug",
 };
 

README.md

@@ -3,12 +3,12 @@ Visual Testing addon with Chromatic
 
 ### Development scripts
 
-- `yarn start` runs babel in watch mode and starts Storybook
-- `yarn build` build and package your addon code
+- `pnpm run start` runs babel in watch mode and starts Storybook
+- `pnpm run build` build and package your addon code
 
 ### Switch from TypeScript to JavaScript
 
-Don't want to use TypeScript? We offer a handy eject command: `yarn eject-ts`
+Don't want to use TypeScript? We offer a handy eject command: `pnpm run eject-ts`
 
 This will convert all code to JS. It is a destructive process, so we recommended running this before you start writing any code.
 
@@ -81,7 +81,7 @@ Go to `Settings > Secrets`, click `New repository secret`, and add your `NPM_TOK
 To create a release locally you can run the following command, otherwise the GitHub action will make the release for you.
 
 ```sh
-yarn release
+pnpm run release
 ```
 
 That will:

package.json

@@ -2,6 +2,10 @@
   "name": "@chromaui/addon-visual-tests",
   "version": "0.0.0",
   "description": "Visual Testing addon with Chromatic",
+  "engines": {
+    "node": ">=18.0.0",
+    "pnpm": ">=8.6.2"
+  },
   "keywords": [
     "tests",
     "visual tests",
@@ -13,8 +17,8 @@
     "type": "git",
     "url": "https://github.com/chromaui/storybook-visual-tests"
   },
-  "author": "Chromatic <[email protected]>",
   "license": "MIT",
+  "author": "Chromatic <[email protected]>",
   "exports": {
     ".": {
       "require": "./dist/index.js",
@@ -41,26 +45,30 @@
     "chromatic": "chromatic -t 9b39ff142a7f",
     "build": "tsup",
     "build:staging": "CHROMATIC_BASE_URL=https://www.staging-chromatic.com tsup",
-    "build:watch": "yarn build --watch",
+    "build:watch": "pnpm run build --watch",
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "run-p build:watch 'storybook --quiet'",
-    "release": "yarn build && auto shipit",
+    "release": "pnpm run build && auto shipit",
     "eject-ts": "zx scripts/eject-typescript.mjs",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {
     "@storybook/design-system": "^7.15.11",
-    "urql": "^4.0.3",
-    "chromatic": "^6.19.6-canary.0"
+    "chromatic": "^6.19.6-canary.0",
+    "urql": "^4.0.3"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.1.0-alpha.32",
-    "@storybook/addon-interactions": "^7.1.0-alpha.32",
-    "@storybook/addon-links": "^7.1.0-alpha.32",
-    "@storybook/react": "^7.1.0-alpha.32",
-    "@storybook/react-vite": "^7.1.0-alpha.32",
+    "@storybook/addon-actions": "^7.1.0-alpha.34",
+    "@storybook/addon-essentials": "^7.1.0-alpha.34",
+    "@storybook/addon-interactions": "^7.1.0-alpha.34",
+    "@storybook/addon-links": "^7.1.0-alpha.34",
+    "@storybook/channels": "^7.1.0-alpha.34",
+    "@storybook/manager-api": "^7.1.0-alpha.34",
+    "@storybook/react": "^7.1.0-alpha.34",
+    "@storybook/react-vite": "^7.1.0-alpha.34",
     "@storybook/testing-library": "^0.0.14-next.1",
+    "@storybook/theming": "^7.1.0-alpha.34",
     "@types/node": "^18.15.0",
     "@types/react": "^18.0.34",
     "@vitejs/plugin-react": "^3.1.0",
@@ -75,21 +83,21 @@
     "prop-types": "^15.8.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "storybook": "^7.1.0-alpha.32",
+    "storybook": "^7.1.0-alpha.34",
     "tsup": "^6.6.3",
     "typescript": "^4.9.5",
     "vite": "^4.1.4",
     "vite-plugin-environment": "^1.1.3",
     "zx": "^1.14.1"
   },
   "peerDependencies": {
-    "@storybook/blocks": "^7.1.0-alpha.32",
-    "@storybook/components": "^7.1.0-alpha.32",
-    "@storybook/core-events": "^7.1.0-alpha.32",
-    "@storybook/manager-api": "^7.1.0-alpha.32",
-    "@storybook/preview-api": "^7.1.0-alpha.32",
-    "@storybook/theming": "^7.1.0-alpha.32",
-    "@storybook/types": "^7.1.0-alpha.32",
+    "@storybook/blocks": "^7.1.0-alpha.34",
+    "@storybook/components": "^7.1.0-alpha.34",
+    "@storybook/core-events": "^7.1.0-alpha.34",
+    "@storybook/manager-api": "^7.1.0-alpha.34",
+    "@storybook/preview-api": "^7.1.0-alpha.34",
+    "@storybook/theming": "^7.1.0-alpha.34",
+    "@storybook/types": "^7.1.0-alpha.34",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
@@ -104,6 +112,15 @@
   "publishConfig": {
     "access": "public"
   },
+  "msw": {
+    "workerDirectory": "public"
+  },
+  "pnpm": {
+    "overrides": {
+      "react": "^18.0.0",
+      "react-dom": "^18.0.0"
+    }
+  },
   "storybook": {
     "displayName": "Visual Tests",
     "supportedFrameworks": [
@@ -118,8 +135,5 @@
       "react-native"
     ],
     "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
-  },
-  "msw": {
-    "workerDirectory": "public"
   }
 }