Stage

.github/workflows/build.yml

@@ -18,7 +18,9 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
-      - run: yarn install
-      - run: yarn build
-      - run: yarn test
+          node-version: 22
+      - name: Enable Corepack
+        run: corepack enable
+      - run: pnpm install
+      - run: pnpm build
+      - run: pnpm test

.github/workflows/npm-publish.yml

@@ -8,7 +8,7 @@ on:
     branches:
       - master
     paths:
-      - 'src/**'
+      - "src/**"
 
 jobs:
   buildAndPublish:
@@ -17,10 +17,12 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 22
           registry-url: "https://registry.npmjs.org"
-      - run: yarn install
-      - run: yarn build
-      - run: yarn publish
+      - name: Enable Corepack
+        run: corepack enable
+      - run: pnpm install
+      - run: pnpm build
+      - run: pnpm publish
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -2,8 +2,6 @@
 logs
 *.log
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 
 # Runtime data
 pids
@@ -51,12 +49,10 @@ typings/
 # Output of 'npm pack'
 *.tgz
 
-# Yarn Integrity file
-.yarn-integrity
-
 # dotenv environment variables file
 .env
 
 # Dist and cypress folder
 dist
-cypress/videos
+cypress/videos
+cypress/screenshots

.nvmrc

@@ -0,0 +1 @@
+v22.14.0

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [1.5.0] - 2024-09-03
+
+### Added
+
+- Field exposes `dirty` flag that indicates if the field has been changed
+
 ## [1.4.0] - 2023-12-19
 
 ### Added

README.md

@@ -15,7 +15,7 @@
 
 * Keeps form's state and validation results
 * Supports any kind of validation functions
-* Dirty checking
+* Dirty checking (tracks value changes from initial state)
 * Separates data from view
 * Relies on hooks, but can easily be used with class components
 
@@ -87,7 +87,7 @@ Hook that keeps on form field's data.
 
 | Type <div style="width: 200px"></div> | Description |
 |---- | ----------- |
-| _{<br>&nbsp;&nbsp;&nbsp;value: any,<br>&nbsp;&nbsp;&nbsp;error: boolean<br>&nbsp;&nbsp;&nbsp;onChange: (any, config?) => void<br>&nbsp;&nbsp;&nbsp;onBlur: (event, config?) => void<br>&nbsp;&nbsp;&nbsp;setValue: (value: any) => void<br>&nbsp;&nbsp;&nbsp;validate: (any, config?) => boolean or Promise&lt;boolean&gt;<br>&nbsp;&nbsp;&nbsp;reset: () => void,<br>&nbsp;&nbsp;&nbsp;props: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value: any,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onChange: (any, config?) => void<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onBlur: (event, config?) => void<br>&nbsp;&nbsp;&nbsp;}<br>}_ | Object with field's data and callbacks.<br><br><ul><li>`value` - field's current value</li><li>`error` - is error present flag (`true` if value was validated and didn't pass validation, `false` otherwise)</li><li>`onChange` - callback for change event (changes the value and validates it if previous value wasn't correct)</li><li>`onBlur` - callback for blur event (validates the value)</li><li>`setValue` - function for setting the internal value (does not validate the input, enabling support for async data loading)</li><li>`validate` - function for validating field's value</li><li>`reset` - function for resetting field's data</li><li>`props` - set of props that can be spread on standard input elements (same as props in root object, just grouped for better DX)</li></ul><br/>`onChange`, `onBlur` and `validate` functions accept config as last parameter - this will override config from `useValidation` if provided. |
+| _{<br>&nbsp;&nbsp;&nbsp;value: any,<br>&nbsp;&nbsp;&nbsp;error: boolean<br>&nbsp;&nbsp;&nbsp;dirty: boolean,<br>&nbsp;&nbsp;&nbsp;onChange: (any, config?) => void<br>&nbsp;&nbsp;&nbsp;onBlur: (event, config?) => void<br>&nbsp;&nbsp;&nbsp;setValue: (value: any) => void<br>&nbsp;&nbsp;&nbsp;validate: (any, config?) => boolean or Promise&lt;boolean&gt;<br>&nbsp;&nbsp;&nbsp;reset: () => void,<br>&nbsp;&nbsp;&nbsp;props: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value: any,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onChange: (any, config?) => void<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onBlur: (event, config?) => void<br>&nbsp;&nbsp;&nbsp;}<br>}_ | Object with field's data and callbacks.<br><br><ul><li>`value` - field's current value</li><li>`error` - is error present flag (`true` if value was validated and didn't pass validation, `false` otherwise)</li><li>`dirty` - indicates whether current value differs from initial value (useful for enabling Save buttons and tracking changes)</li><li>`onChange` - callback for change event (changes the value and validates it if previous value wasn't correct)</li><li>`onBlur` - callback for blur event (validates the value)</li><li>`setValue` - function for setting the internal value (does not validate the input, enabling support for async data loading; also updates the initial value so `dirty` remains `false`)</li><li>`validate` - function for validating field's value</li><li>`reset` - function for resetting field's data</li><li>`props` - set of props that can be spread on standard input elements (same as props in root object, just grouped for better DX)</li></ul><br/>`onChange`, `onBlur` and `validate` functions accept config as last parameter - this will override config from `useValidation` if provided. |
 
 #### Usage example
 
@@ -263,6 +263,56 @@ const onCancel = (data) => alert("Form has been reset");
 cancelForm(userFormData, onCancel);
 ```
 
+### `isDirty(fields)`
+
+Util function for checking if any field in a form has been changed from its initial value. This is useful for enabling/disabling Save buttons based on whether the user has made any changes.
+
+> **Note:** The dirty flag is determined using strict equality (`===`). For complex data types like objects or arrays, only changes to the reference will be detected—not changes to their internal structure. If you mutate an object or array in place, the dirty flag may not update as expected. This is similar to the limitation described for the `areEqual` validation function.
+#### Params
+
+| Name | Type <div style="width: 200px"></div> | Required | Description |
+| ---- | ---- | ---- | ----------- |
+| fields | _{<br/>&nbsp;&nbsp;key: { dirty: boolean },<br/>&nbsp;&nbsp;...<br/>}_ | yes | Form field's data (each field must have `dirty` property - other properties are not important) |
+
+#### Returns
+
+| Type <div style="width: 200px"></div> | Description |
+|---- | ----------- |
+| _boolean_ | `true` if any field has been changed from its initial value, `false` otherwise |
+
+#### Usage example
+
+```jsx
+import { ..., isDirty } from '@enterwell/react-form-validation';
+
+/* useValidation example's code... */
+
+const formData = {
+    name: useValidation('', isNonEmptyString),
+    email: useValidation('', isValidEmail)
+};
+
+// Load data from API
+useEffect(() => {
+    if (item) {
+        setValues(formData, {
+            name: item.name,
+            email: item.email
+        });
+    }
+}, [item]);
+
+// Check if form has changes
+const hasChanges = isDirty(formData);
+
+return (
+    <div>
+        {/* Form inputs */}
+        <button disabled={!hasChanges}>Save</button>
+    </div>
+);
+```
+
 ___
 
 _Unless otherwise stated, each validation function will have the following #### Params and #### Returns._