State refactor

.github/FUNDING.yml

@@ -1 +1,7 @@
 github: soywod
+ko_fi: soywod
+buy_me_a_coffee: soywod
+liberapay: soywod
+thanks_dev: soywod
+custom: https://www.paypal.com/paypalme/soywod
+

.github/workflows/demo.yml

@@ -0,0 +1,28 @@
+name: demo
+
+on:
+  push:
+    branches:
+      - master
+
+permissions:
+  contents: write
+
+jobs:
+  demo:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: yarn-${{ hashFiles('yarn.lock') }}
+      - uses: cachix/install-nix-action@v27
+        with:
+          nix_path: nixpkgs=channel:nixos-24.11
+          enable_kvm: true
+      - run: nix-shell --run 'yarn install --frozen-lockfile --immutable'
+      - run: nix-shell --run 'yarn storybook:build'
+      - uses: jamesives/github-pages-deploy-action@v4
+        with:
+          folder: dist

.github/workflows/publish.yml

@@ -1,82 +1,25 @@
 name: publish
 
-permissions:
-  contents: write
-
 on:
   push:
     tags:
       - v*
 
 jobs:
-  install:
-    name: Installs and configures nix
+  publish:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkouts code
-        uses: actions/checkout@v2
-
-      - name: Sets up Node for registry only
-        uses: actions/setup-node@v3
-        with:
-          node-version: '18.17'
-          registry-url: 'https://registry.npmjs.org'
-
-      - name: Caches Nix store
-        uses: actions/cache@v3
-        id: nix-cache
-        with:
-          path: /tmp/nix-cache
-          key: nix-${{ hashFiles('**/flake.*') }}
-
-      - name: Caches Node modules
-        uses: actions/cache@v3
+      - uses: actions/checkout@v4
+      - uses: actions/cache@v4
         with:
-          path: '**/node_modules'
-          key: yarn-${{ hashFiles('**/yarn.lock') }}
-
-      - name: Installs Nix
-        uses: cachix/install-nix-action@v22
+          path: node_modules
+          key: yarn-${{ hashFiles('yarn.lock') }}
+      - uses: cachix/install-nix-action@v27
         with:
-          nix_path: nixpkgs=channel:nixos-23.05
-          extra_nix_config: |
-            experimental-features = nix-command flakes
-            access-tokens = github.com=${{ secrets.GITHUB_TOKEN }}
-
-      - name: Imports Nix store cache
-        if: ${{ steps.nix-cache.outputs.cache-hit == 'true' }}
-        run: nix-store --import < /tmp/nix-cache
-
-      - name: Installs deps
-        run: nix develop -c yarn install --frozen-lockfile --immutable
-
-      - name: Exports Nix store cache
-        if: ${{ steps.nix-cache.outputs.cache-hit != 'true' }}
-        run: nix-store --export $(find /nix/store -maxdepth 1 -name '*-*') > /tmp/nix-cache
-
-      - name: Builds lib
-        working-directory: lib
-        run: nix develop -c yarn build
-
-      - name: Copies README to the lib folder
-        run: cp README.md LICENSE lib/
-
-      - name: Publishes the lib
-        working-directory: lib
-        run: |
-          nix develop --impure
-          yarn publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: Builds the demo
-        working-directory: demo
-        run: nix develop -c yarn build
+          nix_path: nixpkgs=channel:nixos-24.11
+          enable_kvm: true
+      - run: nix-shell --run 'yarn install --frozen-lockfile --immutable'
+      - run: nix-shell --run 'yarn build'
+      - run: nix-shell --run 'yarn publish --access public'
         env:
-          PUBLIC_URL: /react-pin-field
-
-      - name: Deploys the demo
-        uses: jamesives/[email protected]
-        with:
-          branch: gh-pages
-          folder: demo/build
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}          

.gitignore

@@ -9,4 +9,3 @@ yarn-debug.log*
 yarn-error.log*
 
 *storybook.log
-storybook-static/

CHANGELOG.md

@@ -8,6 +8,27 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+### Added
+
+- Added React 19 support [#93].
+- Added support for [key composnition](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event). Only the final, composed key is now added to the field.
+- Added `usePinField()` custom hook to use the controlled version of the PIN field. See the controlled section of the live [demo](https://soywod.github.io/react-pin-field/?path=/docs/pinfield--docs#controlled).
+
+### Changed
+
+- Changed the way validation works. It is more compliant with HTML standards: invalid characters can be entered but validation will fail (and `onComplete` will not trigger).
+- Replaced the hand-made demo with [Storybook](https://storybook.js.org/).
+- Bump all dependencies to the latest.
+
+### Fixed
+
+- Fixed wrong behaviour in React [`<StrictMode>`](https://react.dev/reference/react/StrictMode) [#91].
+
+### Removed
+
+- Removed property `validate` in favour of the standard HTML [`pattern`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern) attribute.
+- Removed `onResolveKey` and `onRejectKey` properties in favour of standard HTML validation, including `onInvalid`.
+
 ## [3.1.5] - 2024-01-05
 
 ### Changed
@@ -169,7 +190,9 @@ React PIN Field is now a React wrapper for [PIN Field](https://github.com/soywod
 - Fixed unnecessary re-renders (useMVU).
 - Fixed paste on MacOS [#13].
 
-[unreleased]: https://github.com/soywod/react-pin-field/compare/v3.1.3...HEAD
+[unreleased]: https://github.com/soywod/react-pin-field/compare/v3.1.5...HEAD
+[3.1.5]: https://github.com/soywod/react-pin-field/compare/v3.1.4...v3.1.5
+[3.1.4]: https://github.com/soywod/react-pin-field/compare/v3.1.3...v3.1.4
 [3.1.3]: https://github.com/soywod/react-pin-field/compare/v3.1.2...v3.1.3
 [3.1.2]: https://github.com/soywod/react-pin-field/compare/v3.1.1...v3.1.2
 [3.1.1]: https://github.com/soywod/react-pin-field/compare/v3.1.0...v3.1.1
@@ -207,3 +230,5 @@ React PIN Field is now a React wrapper for [PIN Field](https://github.com/soywod
 [#63]: https://github.com/soywod/react-pin-field/issues/63
 [#71]: https://github.com/soywod/react-pin-field/issues/71
 [#84]: https://github.com/soywod/react-pin-field/pull/84
+[#91]: https://github.com/soywod/react-pin-field/issues/91
+[#93]: https://github.com/soywod/react-pin-field/issues/93

CONTRIBUTING.md

@@ -0,0 +1,74 @@
+# Contributing guide
+
+Thank you for investing your time in contributing to React PIN Field!
+
+## Development
+
+The development environment is managed by [Nix](https://nixos.org/download.html).
+Running `nix-shell` will spawn a shell with everything you need to get started with the lib.
+
+If you do not want to use Nix, you can just install manually the following dependencies:
+
+- [Node.js](https://nodejs.org/en): `v20.18`
+- [Yarn](https://yarnpkg.com/): `v1.22`
+- [Cypress](https://www.cypress.io/): `v13.13.2`
+
+## Installation
+
+```
+yarn
+```
+
+## Usage
+
+To run the demo locally, on a random port:
+
+```
+yarn start
+```
+
+To run the demo locally, on a custom port:
+
+```
+yarn start -p 3000
+```
+
+To build the demo:
+
+```
+yarn storybook:build
+```
+
+To build the lib:
+
+```
+yarn build
+```
+
+## Unit tests
+
+Unit tests are handled by [Jest](https://jestjs.io/) (`.test` files).
+
+```
+yarn test:unit
+```
+
+## End-to-end tests
+
+End-to-end tests are handled by [Cypress](https://www.cypress.io) (`.e2e` files).
+
+You need first to start a Storybook locally, on the port `3000`:
+
+```
+yarn start -p 3000
+```
+
+Then in another terminal:
+
+```
+yarn test:e2e
+```
+
+## Commit style
+
+Starting from the `v4.0.0`, React PIN Field tries to adopt the [conventional commits specification](https://github.com/conventional-commits/conventionalcommits.org).

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019-2024 soywod <[email protected]>
+Copyright (c) 2019-2025 soywod <[email protected]>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal