chore: Upgrade dependencies and use hooks in demo (#405)

.github/workflows/test.yml

@@ -0,0 +1,42 @@
+name: Test
+
+on:
+  workflow_dispatch:
+  push:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-store
+        run: echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: Use pnpm store
+        uses: actions/cache@v3
+        id: pnpm-cache
+        with:
+          path: ${{ steps.pnpm-store.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-
+
+      - name: Install Dependencies
+        run: pnpm install --frozen-lockfile --prefer-offline
+
+      - name: Install Playwright
+        run: pnpm --filter react-avatar-editor exec playwright install
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'pnpm'
+
+      - name: Run test
+        run: pnpm --filter react-avatar-editor test

.gitignore

@@ -3,7 +3,7 @@ logs
 *.log
 .eslintcache
 test-results
-screenshot-*.png
+screenshot-*.
 
 # Runtime data
 pids

netlify.toml

@@ -1,6 +1,6 @@
 [build.environment]
-  NODE_VERSION = "16"
+  NODE_VERSION = "18"
   NPM_FLAGS = "--version" # prevent Netlify npm install
 [build]
   publish = "packages/demo/dist"
-  command = "npx -y pnpm@7 install --store=node_modules/.pnpm-store && npx -y pnpm@7 demo:build"
+  command = "npx -y pnpm@8 install --store=node_modules/.pnpm-store && npx -y pnpm@8 demo:build"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-avatar-editor-mono",
   "engines": {
-    "pnpm": "7.x"
+    "pnpm": "8.x"
   },
   "version": "1.0.0",
   "scripts": {
@@ -12,13 +12,13 @@
     "lint": "eslint . --cache --ext .ts,.tsx"
   },
   "devDependencies": {
-    "@types/react": "18.0.21",
-    "@typescript-eslint/eslint-plugin": "5.38.1",
-    "@typescript-eslint/parser": "5.38.1",
-    "eslint": "8.24.0",
-    "eslint-config-prettier": "8.5.0",
-    "prettier": "2.7.1",
-    "typescript": "4.8.4"
+    "@types/react": "18.2.38",
+    "@typescript-eslint/eslint-plugin": "6.12.0",
+    "@typescript-eslint/parser": "6.12.0",
+    "eslint": "8.54.0",
+    "eslint-config-prettier": "9.0.0",
+    "prettier": "3.1.0",
+    "typescript": "5.3.2"
   },
   "license": "MIT",
   "prettier": {

packages/demo/package.json

@@ -1,25 +1,24 @@
 {
   "name": "react-avatar-editor-demo",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite --port 3000",
     "build": "vite build",
-    "clean": "rm -rf dist"
-  },
-  "exports": {
-    "./serve": "./serve.ts"
+    "clean": "rm -rf dist",
+    "preview": "vite preview"
   },
   "dependencies": {
     "react": "18.2.0",
     "react-avatar-editor": "workspace:*",
     "react-dom": "18.2.0",
-    "react-dropzone": "^14.2.2"
+    "react-dropzone": "^14.2.3"
   },
   "devDependencies": {
-    "@types/react": "18.0.21",
-    "@types/react-dom": "18.0.6",
-    "@vitejs/plugin-react": "2.1.0",
-    "typescript": "4.8.4",
-    "vite": "3.1.4"
+    "@types/react": "18.2.38",
+    "@types/react-dom": "18.2.17",
+    "@vitejs/plugin-react": "4.2.0",
+    "typescript": "5.3.2",
+    "vite": "5.0.2"
   }
 }