Merge pull request #65 from michaeldzjap/feature/update-project

Update project

.github/workflows/ci.yml

@@ -9,27 +9,27 @@ jobs:
         os: [ubuntu-latest]
         node-version: [20.x, 21.x]
     steps:
-    - name: Check out repository code
-      uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - name: Install
-      run: npm ci
-    - name: Lint
-      run: npm run lint
-    - name: Build
-      run: npm run prod
-    - name: Test
-      run: npm run test
-    - name: Upload coverage report
-      if: ${{ matrix.os == 'ubuntu-latest' && matrix.node-version == '21.x' }}
-      uses: codecov/codecov-action@v3
-    - name: SonarCloud Scan
-      if: ${{ matrix.os == 'ubuntu-latest' && matrix.node-version == '21.x' }}
-      uses: sonarsource/sonarcloud-github-action@master
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+      - name: Check out repository code
+        uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - name: Install
+        run: npm ci
+      - name: Lint
+        run: npm run lint
+      - name: Build
+        run: npm run prod
+      - name: Test
+        run: npm run test
+      - name: Upload coverage report
+        if: ${{ matrix.os == 'ubuntu-latest' && matrix.node-version == '21.x' }}
+        uses: codecov/codecov-action@v3
+      - name: SonarCloud Scan
+        if: ${{ matrix.os == 'ubuntu-latest' && matrix.node-version == '21.x' }}
+        uses: sonarsource/sonarcloud-github-action@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

README.md

@@ -8,23 +8,29 @@
 [![License](https://img.shields.io/npm/l/react-signature-pad-wrapper.svg)](https://github.com/michaeldzjap/react-signature-pad-wrapper/blob/master/LICENSE)
 
 # react-signature-pad-wrapper
+
 A React wrapper for [signature pad](https://github.com/szimek/signature_pad).
 
 ## Installation
+
 This package is available through npm:
+
 ```
 npm install --save react-signature-pad-wrapper
 ```
 
 ## Usage
-This package implements exactly the same interface as the original *signature_pad* package and adds a couple of extra features that make responsive behaviour a little easier to deal with. For a complete overview of the available options and callables see the documentation for [signature pad](https://github.com/szimek/signature_pad).
+
+This package implements exactly the same interface as the original _signature_pad_ package and adds a couple of extra features that make responsive behaviour a little easier to deal with. For a complete overview of the available options and callables see the documentation for [signature pad](https://github.com/szimek/signature_pad).
 
 Import the component like (ES6):
+
 ```javascript
-import SignaturePad from 'react-signature-pad-wrapper'
+import SignaturePad from 'react-signature-pad-wrapper';
 ```
 
 Options may be passed as a component property during initialization:
+
 ```javascript
 ...
 render() {
@@ -34,14 +40,17 @@ render() {
 ```
 
 or they can be set during runtime:
+
 ```javascript
 ...
 render() {
   return <SignaturePad ref={this.signaturePadRef} />;
 }
 ...
 ```
+
 then from somewhere else in the code (assuming the ref is defined):
+
 ```javascript
 // Call an instance method
 this.signaturePad.clear();
@@ -54,7 +63,9 @@ this.signaturePad.penColor = 'rgb(66, 133, 244)';
 ```
 
 ## Responsiveness
+
 The HTML canvas object sucks when it comes to responsiveness. The approach taken with this plugin is to use a fixed size canvas when a height and width (in pixels) is explicitly passed in as a component property:
+
 ```javascript
 ...
 render() {
@@ -64,28 +75,35 @@ render() {
 ```
 
 If you want the component to be responsive, simply ommit the width and height property:
+
 ```javascript
 ...
 render() {
   return <SignaturePad />;
 }
 ...
 ```
+
 The canvas width and height will now be updated whenever the window is resized (using a debounced handler). Changing the width and height properties of a HTML canvas object will erase its current content.
 
 If you'd like to keep what is currently drawn on the canvas you can pass a `redrawOnResize` property to the component and set it to `true` (`redrawOnResize` is `false` by default):
+
 ```javascript
 ...
 render() {
   return <SignaturePad redrawOnResize />;
 }
 ...
 ```
+
 This will save the current canvas content to a base64 data string before performing the resize operation and load it in the canvas right after the resize operation finishes. **Note**: the repeated saving and loading of image data when resizing often will degrade the quality rapidly. There is no easy solution around this unfortunately. Resampling the image data is imagined to help significantly, but this is a rather costly operation in general and not something you would ideally do with JavaScript in the browser on every resize event (even if throttled/debounced).
 
 ## Example
+
 This project includes a simple example that demonstrates a responsive sketch pad. To build the example:
+
 ```shell
 cd example && npm run build
 ```
+
 Then open `example/index.html` in a browser of your choice.

__tests__/.eslintrc.json

@@ -1,14 +1,8 @@
 {
-    "env": {
-      "node": true,
-      "jest/globals": true
-    },
-    "plugins": [
-      "jest"
-    ],
-    "extends": [
-      "plugin:jest/recommended",
-      "plugin:jest-dom/recommended"
-    ]
-  }
-
+  "env": {
+    "node": true,
+    "jest/globals": true
+  },
+  "plugins": ["jest"],
+  "extends": ["plugin:jest/recommended", "plugin:jest-dom/recommended"]
+}

codecov.yml

@@ -1,3 +1,3 @@
 ignore:
-  - "__tests__/**/*"
-  - "example/**/*"
+  - '__tests__/**/*'
+  - 'example/**/*'

eslint.config.mjs

@@ -0,0 +1,37 @@
+// @ts-check
+
+import eslint from '@eslint/js';
+import prettierConfig from 'eslint-config-prettier';
+import jest from 'eslint-plugin-jest';
+import jestDom from 'eslint-plugin-jest-dom';
+import react from 'eslint-plugin-react';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default [
+    {
+        ignores: ['coverage/**', 'dist/**', 'example/dist/**', '__tests__/**'],
+    },
+    {
+        plugins: {
+            react,
+        },
+        languageOptions: {
+            parserOptions: {
+                ecmaFeatures: {
+                    jsx: true,
+                },
+            },
+            globals: {
+                ...globals.browser,
+            },
+        },
+    },
+    ...tseslint.config(eslint.configs.recommended, ...tseslint.configs.recommended, prettierConfig),
+    ...tseslint.config({
+        files: ['__tests__/**'],
+        plugins: { jest },
+        ...jest.configs['flat/recommended'],
+        ...jestDom.configs['flat/recommended'],
+    }),
+];

example/Layout.tsx

@@ -41,7 +41,6 @@ class Layout extends React.PureComponent {
         }
 
         if (signaturePad.isEmpty()) {
-            // eslint-disable-next-line no-alert
             alert('Please provide a signature first.');
         } else {
             window.open(signaturePad.toDataURL());

example/index.html

@@ -1,26 +1,25 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" class="theme-light">
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <title>React-Signature-Pad Example</title>
+        <title>React-Signature-Pad Example</title>
 
-    <link rel="stylesheet" type="text/css" href="./node_modules/bulma/css/bulma.css">
+        <link rel="stylesheet" type="text/css" href="./node_modules/bulma/css/bulma.css" />
 
-    <style>
-        canvas {
-            cursor: crosshair;
-        }
-    </style>
+        <style>
+            canvas {
+                cursor: crosshair;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="root"></div>
 
-</head>
-<body>
-    <div id="root"></div>
-
-    <!-- Scripts -->
-    <script src="./dist/vendor.js"></script>
-    <script src="./dist/bundle.js"></script>
-</body>
+        <!-- Scripts -->
+        <script src="./dist/vendor.js"></script>
+        <script src="./dist/bundle.js"></script>
+    </body>
 </html>