refactor: merge with main, fix conflicts

nerdyman · Nov 26, 2023 · 3fa6921 · 3fa6921
2 parents 7681fed + 5c11362
commit 3fa6921
Show file tree

Hide file tree

Showing 17 changed files with 3,576 additions and 3,108 deletions.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1 @@
+github: [nerdyman]
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -1,12 +1,21 @@
 name: ci
-on: [push]
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    types:
+      - opened
+      - synchronize
+  workflow_dispatch:
+
 jobs:
   build:
     name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node: ['16.x']
+        node: ['20.x']
         os: [ubuntu-latest]
     steps:
       - name: Checkout repo
@@ -32,9 +41,17 @@ jobs:
         run: pnpm lint
 
       - name: Test:Execute
-        run: npx playwright install-deps chromium && pnpx playwright install chromium && DEBUG=pw:api pnpm run test
+        run: pnpm run test
 
       - name: Test:Upload
-        uses: paambaati/codeclimate-action@v3.0.0
+        uses: paambaati/codeclimate-action@v5.0.0
         env:
           CC_TEST_REPORTER_ID: '${{ secrets.CC_TEST_REPORTER_ID }}'
+        with:
+          coverageLocations: ${{github.workspace}}/coverage/*.info:lcov
+
+      # Disabled until https://github.com/pnpm/pnpm/issues/6424 is resolved.
+      # - uses: preactjs/compressed-size-action@v2
+      #   with:
+      #     repo-token: '${{ secrets.GITHUB_TOKEN }}'
+      #     build-script: 'build'
diff --git a/.github/workflows/size.yml b/.github/workflows/size.yml
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-pnpx lint-staged && pnpm run test:no-coverage
+pnpm lint-staged && pnpm run test:no-coverage
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-lts/gallium
+lts/iron
diff --git a/README.md b/README.md
@@ -14,18 +14,10 @@ Display a set of images as a draggable 360 degree turntable.
 
 <br />
 
-<a href="https://npmjs.com/package/react-image-turntable">
-  <img src="https://img.shields.io/npm/v/react-image-turntable.svg?label=version" alt="NPM package" />
-</a>
-<a href="https://github.com/nerdyman/react-image-turntable/blob/main/LICENSE">
-  <img src="https://img.shields.io/npm/l/react-image-turntable.svg" alt="License MIT" />
-</a>
-<a href="https://github.com/nerdyman/react-image-turntable/actions?query=branch%3Amain+workflow%3Aci++">
-  <img src="https://img.shields.io/github/workflow/status/nerdyman/react-image-turntable/ci?label=ci" alt="CI Status" />
-</a>
-<a href="https://codeclimate.com/github/nerdyman/react-image-turntable/test_coverage">
-  <img src="https://img.shields.io/codeclimate/coverage/nerdyman/react-image-turntable" />
-</a>
+<a href="https://npmjs.com/package/react-image-turntable"><img src="https://img.shields.io/npm/v/react-image-turntable.svg?label=version" alt="NPM package" /></a>
+<a href="https://github.com/nerdyman/react-image-turntable/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/react-image-turntable.svg" alt="License MIT" /></a>
+<a href="https://github.com/nerdyman/react-compare-slider/actions?query=workflow%3Abuild"><img alt="GitHub CI status" src="https://img.shields.io/github/actions/workflow/status/nerdyman/react-image-turntable/main.yml" /></a>
+<a href="https://codeclimate.com/github/nerdyman/react-image-turntable/test_coverage"><img src="https://img.shields.io/codeclimate/coverage/nerdyman/react-image-turntable" /></a>
 
 </div>
 

diff --git a/example/index.html b/example/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/example/package.json b/example/package.json
@@ -4,20 +4,20 @@
   "version": "0.0.0",
   "scripts": {
     "start": "vite",
-    "build": "tsc && vite build",
+    "build": "vite build",
     "preview": "vite preview --port 3000"
   },
   "dependencies": {
     "pepjs": "^0.5.3",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "react-image-turntable": "next"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-image-turntable": "latest"
   },
   "devDependencies": {
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.3",
-    "@vitejs/plugin-react": "^1.3.2",
-    "typescript": "^4.6.4",
-    "vite": "^2.9.9"
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@vitejs/plugin-react": "^4.2.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0"
   }
 }
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { ReactImageTurntable } from 'react-image-turntable';
 import type { ReactImageTurntableProps } from 'react-image-turntable';
 
@@ -41,7 +42,27 @@ export const images = [
 ];
 
 function App(props: Partial<ReactImageTurntableProps>) {
-  return <ReactImageTurntable images={images} {...props} />;
+  const [rotationDisabled, setRotationDisabled] = useState(false);
+
+  const handleKeyDown = (ev: React.KeyboardEvent<HTMLDivElement>) => {
+    if (rotationDisabled) return;
+
+    if (ev.key === 'ArrowLeft' || ev.key === 'ArrowRight') {
+      setRotationDisabled(true);
+    }
+  };
+
+  return (
+    <ReactImageTurntable
+      images={images}
+      autoRotate={{ disabled: rotationDisabled, interval: 200 }}
+      onPointerDown={() => setRotationDisabled(true)}
+      onPointerUp={() => setRotationDisabled(false)}
+      onKeyDown={handleKeyDown}
+      onKeyUp={() => setRotationDisabled(false)}
+      {...props}
+    />
+  );
 }
 
 export default App;
diff --git a/example/vite.config.ts b/example/vite.config.ts
@@ -5,7 +5,7 @@ import react from '@vitejs/plugin-react';
 export default defineConfig({
   server: {
     host: '0.0.0.0',
-    port: 3000,
+    port: !isNaN(Number(process.env.PORT)) ? Number(process.env.PORT) : 3000,
   },
   clearScreen: false,
   plugins: [react()],

diff --git a/package.json b/package.json
@@ -9,26 +9,32 @@
     "rotator",
     "slider"
   ],
-  "version": "3.0.2",
+  "version": "3.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nerdyman/react-image-turntable.git"
   },
   "author": "nerdyman",
   "license": "MIT",
   "sideEffects": false,
-  "packageManager": "[email protected]",
+  "packageManager": "[email protected]",
+  "engines": {
+    "node": ">=16.9.0"
+  },
   "module": "dist/index.mjs",
   "typings": "dist/index.d.ts",
   "files": [
     "dist",
     "src"
   ],
   "scripts": {
-    "bootstrap": "corepack disable && corepack enable && pnpm i --frozen-lockfile",
+    "bootstrap": "npm run bootstrap:project && npm run bootstrap:playwright",
+    "bootstrap:project": "corepack enable && pnpm i --frozen-lockfile",
+    "bootstrap:playwright": "pnpm exec playwright install chromium",
     "build": "tsup",
     "dev": "pnpm -r --stream run start",
     "dx": "npm run bootstrap && pnpm exec husky install && pnpm run prepare",
+    "clean": "rm -rf ./node_modules ./coverage ./dist ./.nyc_output ./.*.log ./example/node_modules",
     "lint": "eslint . && prettier --check .",
     "prepare": "husky install",
     "release": "pnpm run build && np --no-tests --no-cleanup",
@@ -40,7 +46,7 @@
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [
-      "pretty-quick --staged",
+      "prettier --write",
       "eslint --fix"
     ]
   },
@@ -63,34 +69,34 @@
     "react": ">=16.8"
   },
   "devDependencies": {
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@playwright/test": "^1.21.1",
-    "@size-limit/preset-small-lib": "^7.0.8",
-    "@types/jest-axe": "^3.5.3",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.23.0",
-    "@typescript-eslint/parser": "^5.23.0",
-    "axe-core": "^4.4.1",
-    "axe-playwright": "^1.1.11",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@playwright/test": "^1.39.0",
+    "@size-limit/preset-small-lib": "^11.0.0",
+    "@types/jest-axe": "^3.5.8",
+    "@types/node": "^20.9.0",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
+    "axe-core": "^4.8.2",
+    "axe-playwright": "^1.2.3",
     "babel-plugin-istanbul": "^6.1.1",
     "esbuild-plugin-babel": "^0.2.3",
-    "eslint": "^8.15.0",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.5.0",
-    "husky": "^8.0.1",
-    "lint-staged": "^12.4.1",
-    "np": "^7.6.1",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^15.1.0",
+    "np": "^8.0.4",
     "nyc": "^15.1.0",
-    "playwright-core": "^1.21.1",
-    "prettier": "^2.6.2",
-    "pretty-quick": "^3.1.3",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "size-limit": "^7.0.8",
-    "tslib": "^2.4.0",
-    "tsup": "^5.12.7",
-    "typescript": "^4.6.4"
+    "playwright-core": "^1.39.0",
+    "prettier": "^3.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "size-limit": "^11.0.0",
+    "tslib": "^2.6.2",
+    "tsup": "^7.2.0",
+    "typescript": "^5.2.2"
   }
 }
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -1,16 +1,24 @@
+/* eslint no-console: 0 */
 import { devices } from '@playwright/test';
 import type { PlaywrightTestConfig } from '@playwright/test';
 
+const IS_CI = !!process.env.CI;
+const PORT = !isNaN(Number(process.env.PORT)) ? Number(process.env.PORT) : 3000;
+
+process.env.PORT = String(PORT);
+
+console.info('[playwright.config]', { IS_CI, PORT });
+
 const config: PlaywrightTestConfig = {
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
+  forbidOnly: IS_CI,
+  retries: IS_CI ? 2 : 0,
   testDir: './test',
   outputDir: './test/results',
   reporter: 'list',
   webServer: {
-    command: 'pnpm run build && pnpm run start --filter="./example"',
-    reuseExistingServer: !process.env.CI,
-    url: 'http://localhost:3000',
+    command: 'pnpm run build && pnpm --filter "react-image-turntable-example" run start',
+    reuseExistingServer: !IS_CI,
+    url: `http://localhost:${PORT}`,
     env: {
       NODE_ENV: 'test',
       USE_BABEL_PLUGIN_ISTANBUL: '1',