Update repo to modern standards

.babelrc

@@ -1,11 +1,3 @@
 {
-  "presets": [
-    "env",
-    "react",
-    "es2015"
-  ],
-  "plugins": [
-    "transform-class-properties",
-    "transform-object-rest-spread"
-  ]
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
 }

.eslintrc

@@ -1,17 +1,19 @@
 {
-  "extends": "airbnb",
-  "parser": "babel-eslint",
+  "extends": ["airbnb", "airbnb/hooks"],
+  "parser": "@babel/eslint-parser",
   "env": {
     "browser": true,
-    "es6": true
+    "es2020": true,
+    "jest": true
   },
-  "plugins": ["jsx-a11y", "react"],
+  "plugins": ["jsx-a11y", "react", "react-hooks"],
   "parserOptions": {
-    "ecmaVersion": 6,
+    "ecmaVersion": 2020,
     "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true
-    }
+    },
+    "requireConfigFile": false
   },
   "rules": {
     "arrow-parens": ["error", "always"],
@@ -47,6 +49,9 @@
     "react/prop-types": 0,
     "react/require-extension": 0,
     "react/self-closing-comp": 0,
-    "react/sort-comp": 0
+  "react/jsx-props-no-spreading": 0,
+  "react/sort-comp": 0,
+  "react-hooks/rules-of-hooks": "error",
+  "react-hooks/exhaustive-deps": "warn"
   }
 }

.github/workflows/ci.yml

@@ -0,0 +1,28 @@
+name: CI
+
+on:
+  pull_request:
+    branches:
+      - main
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+      - name: Install dependencies
+        run: npm install
+      - name: Run ESLint
+        run: npm run lint || true
+      - name: Run tests
+        run: npm test
+      - name: Build
+        run: npm run build

.github/workflows/deploy-demo.yml

@@ -0,0 +1,35 @@
+name: Deploy Demo to GitHub Pages
+
+on:
+  push:
+    paths:
+      - 'gh-pages/**'
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: gh-pages
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build demo
+        run: npm run build
+
+      - name: Deploy to GitHub Pages
+        run: npm run deploy
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yml

@@ -0,0 +1,26 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+          registry-url: "https://registry.npmjs.org/"
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        run: npm run build
+      - name: Publish to npm
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.prettierignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+build/
+coverage/

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "tabWidth": 2,
+  "semi": true
+}

CHANGELOG.md

@@ -1,20 +1,42 @@
-#0.1.3
+# CHANGELOG
+
+## 0.2.0 (2025-08-26)
+
+### Demo and Build Pipeline Modernization
+
+- Demo and library now use a single React instance (no duplicate Reacts)
+- Demo imports library from npm tarball, not local dist
+- Added stable, modular Gulp build pipeline (separate build and watch tasks)
+- Added LESS variable for @primary-color
+- Added /gh-pages/bin/update-demo.sh for one-command demo updates
+- Added npm script 'update-demo' for easy demo refresh
+- Improved error handling and build stability
+- Updated documentation and workflow for best practices
+
+## 0.1.3
+
 Adds in currency (thanks! @jgautheron)
 
-#0.1.2
+## 0.1.2
+
 Adds in decimal values (thanks! @che-wf)
 
-#0.0.5
+## 0.0.5
+
 Updates to React 16 (thanks! @kunukn)
 
-#0.0.4
+## 0.0.4
+
 Fix incorrect numbers being drawn when the screen was inactive. (thanks! @migreva)
 
-#0.0.3
+## 0.0.3
+
 Added `delayValue` prop to delay the start of the animation.
 
-#0.0.2
+## 0.0.2
+
 Added `userLocaleString` prop. Thanks @adjohu.
 
-#0.0.1
+## 0.0.1
+
 Initial release

CONTRIBUTING.md

@@ -0,0 +1,21 @@
+# Contributing
+
+Thank you for considering contributing to react-number-easing!
+
+## How to Contribute
+
+- Fork the repository and create your branch from `main`.
+- Install dependencies: `npm install`
+- Run tests: `npm test`
+- Run linter: `npm run lint`
+- Build the project: `npm run build`
+- Submit a pull request with a clear description of your changes.
+
+## Code Style
+
+- Use Prettier for formatting: `npm run format`
+- Follow ESLint rules.
+
+## Issues
+
+If you find a bug or have a feature request, please open an issue on GitHub.

README.md

@@ -1,23 +1,32 @@
 # [React Number Easing](http://javierbyte.github.io/react-number-easing/)
-[![Rate on Openbase](https://badges.openbase.com/js/rating/che-react-number-easing.svg)](https://openbase.com/js/che-react-number-easing?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)
 
 React component for fancy number transitions.
 
 [Live demo](https://che-wf.github.io/react-number-easing/)
 
 [![react-number-easing screenshot](assets/number-easing-infinite.gif)](https://che-wf.github.io/react-number-easing/)
 
-
 ## Installation
 
 ```js
 npm i -S che-react-number-easing
 ```
 
-## Usage.
+
+## Accessibility
+
+`NumberEasing` uses the semantic `<output aria-live="polite">` element to display animated numbers. This ensures that screen readers announce changes to the value automatically.
+
+You can pass custom ARIA attributes (e.g., `aria-label`) to further improve accessibility for your use case:
+
+```jsx
+<NumberEasing value={1234} aria-label="Total sales" />
+```
+
+## Usage
 
 ```jsx
-const NumberEasing = require('che-react-number-easing');
+import { NumberEasing } from "che-react-number-easing";
 
 <NumberEasing
   ease="quintInOut"
@@ -26,41 +35,55 @@ const NumberEasing = require('che-react-number-easing');
   trail={true}
   useLocaleString={true}
   value={15}
-/>
+/>;
 ```
 
 ### Props
 
-* `[ease]`: The easing equation for the animation.
-  * Default: `quintInOut` (You can choose from [mattdesl/eases](https://github.com/mattdesl/eases/blob/master/index.js).)
-  * Type: `string`
-* `[precision]`: How many decimal places you want to show?
-  * Default: `2`
-  * Type: `number`
-* `[speed]`: How fast do you want to finish the animation?
-  * Default:`500` (ms)
-  * Type: `number`
-* `[trail]`: Do you want trailing zeroes?
-  * Default: `false`
-  * Type: `boolean`
-* `[useLocaleString]`: Use number formatting based on locale?
-  * Default: `false`
-  * Type: `boolean`
-* `[value]`: The value that you want to display at the end of the animation.
-  * `Required`
-  * Type: `number`
-
-# Build
-
-If you want to build this from source, you will need babel and less.
-
-```js
+- `[ease]`: The easing equation for the animation.
+  - Default: `quintInOut` (You can choose from [mattdesl/eases](https://github.com/mattdesl/eases/blob/master/index.js).)
+  - Type: `string`
+- `[precision]`: How many decimal places you want to show?
+  - Default: `2`
+  - Type: `number`
+- `[speed]`: How fast do you want to finish the animation?
+  - Default:`500` (ms)
+  - Type: `number`
+- `[trail]`: Do you want trailing zeroes?
+  - Default: `false`
+  - Type: `boolean`
+- `[useLocaleString]`: Use number formatting based on locale?
+  - Default: `false`
+  - Type: `boolean`
+- `[value]`: The value that you want to display at the end of the animation.
+  - `Required`
+  - Type: `number`
+
+## Requirements
+
+- React 18 or newer
+
+## Build
+
+To build from source:
+
+```sh
 npm install
+npm run build
 ```
 
-And run the pre publish script
+## Test
 
-```js
-npm run prepare
+To run tests:
+
+```sh
+npm test
 ```
+
 [![HitCount](http://hits.dwyl.com/{username}/che-wf/react-number-easing.svg)](http://hits.dwyl.com/{username}/che-wf/react-number-easing)
+
+## Project Structure
+
+- Main component: `src/components/NumberEasing.jsx`
+- All components are exported from `src/index.jsx`
+  [![HitCount](http://hits.dwyl.com/{username}/che-wf/react-number-easing.svg)](http://hits.dwyl.com/{username}/che-wf/react-number-easing)

gh-pages/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

gh-pages/bin/update-demo.sh

@@ -0,0 +1,23 @@
+#!/bin/zsh
+# Update demo to use latest local library build
+
+set -e
+
+LIB_DIR="$(cd "$(dirname "$0")/../.." && pwd)"
+LIB_NAME="che-react-number-easing"
+
+cd "$LIB_DIR"
+echo "Building library..."
+npm run build
+echo "Packing library..."
+TARBALL=$(npm pack | tail -n1)
+
+cd "$LIB_DIR/gh-pages"
+echo "Cleaning demo node_modules..."
+rm -rf node_modules package-lock.json
+echo "Installing new library tarball..."
+npm install "../$TARBALL"
+npm install
+echo "Building demo..."
+npm run build
+echo "Demo updated to latest library version!"