Merge pull request #433 from mosch/modernize-and-fix-issues

Modernize codebase, fix bugs, add tests

Author: mosch

.eslintrc.js

@@ -8,8 +8,13 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - uses: pnpm/action-setup@v4
         with:
           version: 10
           run_install: false
@@ -19,7 +24,7 @@ jobs:
         run: echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
 
       - name: Use pnpm store
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: pnpm-cache
         with:
           path: ${{ steps.pnpm-store.outputs.pnpm_cache_dir }}
@@ -30,13 +35,17 @@ jobs:
       - name: Install Dependencies
         run: pnpm install --frozen-lockfile --prefer-offline
 
-      - name: Install Playwright
-        run: pnpm --filter react-avatar-editor exec playwright install
+      - name: Build
+        run: pnpm build
 
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: 'pnpm'
+      - name: Lint
+        run: pnpm lint
+
+      - name: Format check
+        run: pnpm fmt:check
+
+      - name: Unit tests (core)
+        run: pnpm --filter @react-avatar-editor/core test
 
-      - name: Run test
-        run: pnpm --filter react-avatar-editor test
+      - name: Unit tests (lib)
+        run: pnpm --filter react-avatar-editor test:unit

.github/workflows/test.yml

@@ -0,0 +1,9 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "singleQuote": true,
+  "trailingComma": "all",
+  "semi": false,
+  "printWidth": 80,
+  "sortPackageJson": false,
+  "ignorePatterns": []
+}

.oxfmtrc.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "categories": {
+    "correctness": "error",
+    "suspicious": "warn"
+  },
+  "rules": {},
+  "ignorePatterns": ["dist", "node_modules"]
+}

.oxlintrc.json

@@ -6,20 +6,19 @@ A collection of design contribution guidelines and resources for react-avatar-ed
 
 ## 👋 Welcome
 
-We're glad you're looking to help us improve the end user facing parts of this tiny little plugin. 
+We're glad you're looking to help us improve the end user facing parts of this tiny little plugin.
 You might have seen it already in action in thousands of places where you upload and modify your profile image.
 
 You can find a quick demo of it in action: https://react-avatar-editor.netlify.app
 
 ## 🚢 How to contribute design
 
 1. Check out open [issues](https://github.com/mosch/react-avatar-editor
-/issues) here on GitHub (we label them with `design: 💅required`)
+   /issues) here on GitHub (we label them with `design: 💅required`)
 2. Feel free to open an issue on your own if you find something you would like to contribute to the project and use the `design: 💡idea` label for it.
 3. We do not have any design files in place yet so feel free to create new ones and share them publicly
 4. Add your contributions to an issue and we promise we will review your contribution carefully and foster discussions
 
-
 ## 🎭 Target audience
 
 Our target audience is 100% React developers who are using this component. But the design choices made might unfluence the end user who is interacting with the Avatar editor drastically.
@@ -28,7 +27,7 @@ Our target audience is 100% React developers who are using this component. But t
 
 As mentioned above – we do not have any design related materials (Logo, Figma mocks, etc) yet. Feel free to add them to this document as things evolve.
 
-You can look at our demo here to get a clue of how it currently looks like: 
+You can look at our demo here to get a clue of how it currently looks like:
 https://react-avatar-editor.netlify.app
 
 ## 🎓 License

DESIGN.md

@@ -5,7 +5,7 @@
 [![Build Status](https://travis-ci.org/mosch/react-avatar-editor.svg?branch=master)](https://travis-ci.org/mosch/react-avatar-editor)
 [![Design](https://contribute.design/api/shield/mosch/react-avatar-editor)](https://contribute.design/mosch/react-avatar-editor)
 
-Avatar / profile picture cropping component (like on Facebook). 
+Avatar / profile picture cropping component (like on Facebook).
 Resize, crop and rotate your uploaded image using a simple and clean user interface.
 
 ## Features
@@ -15,7 +15,7 @@ Resize, crop and rotate your uploaded image using a simple and clean user interf
 - Resize
 - Crop
 - Rotate
-- Rounded or square image result 
+- Rounded or square image result
 
 ## Install
 
@@ -33,7 +33,6 @@ pnpm add react-avatar-editor
 
 ![](https://thumbs.gfycat.com/FlawedBlushingGermanwirehairedpointer-size_restricted.gif)
 
-
 ## Usage
 
 ```javascript

README.md

@@ -9,21 +9,15 @@
     "clean": "pnpm --filter 'react-avatar-editor*' clean",
     "demo:build": "pnpm build && pnpm --filter 'react-avatar-editor*' build",
     "demo:dev": "pnpm build && pnpm --filter react-avatar-editor-demo dev",
-    "lint": "eslint . --cache --ext .ts,.tsx"
+    "lint": "oxlint .",
+    "fmt": "oxfmt --write .",
+    "fmt:check": "oxfmt --check ."
   },
   "devDependencies": {
-    "@types/react": "^19.0.0",
-    "@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"
+    "@types/react": "^19.2.14",
+    "oxfmt": "0.41.0",
+    "oxlint": "^1.56.0",
+    "typescript": "^5.9.3"
   },
-  "license": "MIT",
-  "prettier": {
-    "singleQuote": true,
-    "trailingComma": "all",
-    "semi": false
-  }
+  "license": "MIT"
 }

netlify.toml

@@ -0,0 +1,51 @@
+{
+  "name": "@react-avatar-editor/core",
+  "version": "1.0.0",
+  "description": "Framework-agnostic core logic for avatar editing",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      },
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      }
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "clean": "rm -rf dist",
+    "test": "vitest run"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "devDependencies": {
+    "@vitest/coverage-v8": "^4.1.0",
+    "jsdom": "^29.0.1",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mosch/react-avatar-editor.git",
+    "directory": "packages/core"
+  },
+  "license": "MIT",
+  "keywords": [
+    "canvas",
+    "avatar",
+    "editor",
+    "image",
+    "core"
+  ]
+}