react-reactive-val 1.0.4 → 2.0.0

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2024 Jatin Parate
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. 

package/README.md

@@ -0,0 +1,175 @@
+# React Reactive Val
+
+A lightweight, type-safe reactive value management library for React applications. This library provides a simple way to manage reactive values in React components with minimal boilerplate and includes powerful Context integration for efficient state sharing.
+
+## Features
+
+- 🎯 **Type-safe**: Built with TypeScript for excellent type inference
+- 🪶 **Lightweight**: Tiny footprint with zero dependencies
+- ⚡ **Fast**: Built on React's `useSyncExternalStore` for optimal performance
+- 🔄 **Reactive**: Values update automatically across components
+- 📦 **Tree-shakeable**: Only import what you need
+- 🌳 **Multiple formats**: Supports ESM, CommonJS, and UMD
+- 🌟 **Context Support**: Share reactive values efficiently through React Context
+
+## Installation
+
+```bash
+npm install react-reactive-val
+# or
+yarn add react-reactive-val
+# or
+pnpm add react-reactive-val
+```
+
+## Usage
+
+### Basic Example
+
+```tsx
+import useReactiveValue from 'react-reactive-val';
+
+function Counter() {
+  const count = useReactiveValue(0);
+
+  return (
+    <div>
+      <p>Count: {count()}</p>
+      <button onClick={() => count(prev => prev + 1)}>Increment</button>
+    </div>
+  );
+}
+```
+
+### Sharing State Between Components
+
+#### Using Direct Reference
+
+```tsx
+import { reallyReactiveVal } from 'react-reactive-val';
+
+// Create a shared reactive value
+const [sharedCount, CountProvider, useSharedCount] = reallyReactiveVal(0);
+
+function CounterDisplay() {
+  return <div>Count: {sharedCount()}</div>;
+}
+
+function CounterButtons() {
+  return (
+    <div>
+      <button onClick={() => sharedCount(prev => prev + 1)}>Increment</button>
+      <button onClick={() => sharedCount(prev => prev - 1)}>Decrement</button>
+    </div>
+  );
+}
+```
+
+#### Using Context (New in v2)
+
+```tsx
+import { reallyReactiveVal } from 'react-reactive-val';
+
+// Create a reactive value with context
+const [countValue, CountProvider, useCountContext] = reallyReactiveVal(0);
+
+function App() {
+  return (
+    <CountProvider>
+      <CounterDisplay />
+      <CounterButtons />
+    </CountProvider>
+  );
+}
+
+function CounterDisplay() {
+  const count = useCountContext();
+  return <div>Count: {count()}</div>;
+}
+
+function CounterButtons() {
+  const count = useCountContext();
+  return (
+    <div>
+      <button onClick={() => count(prev => prev + 1)}>Increment</button>
+      <button onClick={() => count(prev => prev - 1)}>Decrement</button>
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### `useReactiveValue<T>(initialValue: T)`
+
+A React hook that creates a reactive value within a component.
+
+```tsx
+const value = useReactiveValue(initialValue);
+```
+
+- `initialValue`: The initial value of the reactive state
+- Returns: A function that can both read and update the value
+
+### `reallyReactiveVal<T>(initialValue: T)`
+
+Creates a standalone reactive value that can be used across components. In v2, it returns a tuple containing the reactive value function, a Context Provider component, and a custom hook for accessing the value through context.
+
+```tsx
+const [value, Provider, useValue] = reallyReactiveVal(initialValue);
+```
+
+- `initialValue`: The initial value of the reactive state
+- Returns: A tuple containing:
+  1. A function that can both read and update the value
+  2. A Context Provider component for wrapping consumers
+  3. A custom hook for accessing the value within the Context
+
+### Usage with Value Getter/Setter
+
+```tsx
+// Get the current value
+const currentValue = value();
+
+// Set a new value
+value(newValue);
+
+// Update based on previous value
+value(prev => computeNewValue(prev));
+```
+
+## TypeScript Support
+
+The library is written in TypeScript and provides full type inference:
+
+```tsx
+// Type is inferred from initial value
+const count = useReactiveValue(0); // type: number
+
+// Explicit type annotation
+const user = useReactiveValue<User | null>(null);
+
+// Type checking for updates
+user(prev => ({ ...prev, name: 'John' })); // Type safe!
+
+// With Context
+const [userValue, UserProvider, useUser] = reallyReactiveVal<User | null>(null);
+```
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## License
+
+This project is licensed under the ISC License - see the [LICENSE](LICENSE) file for details.
+
+## Author
+
+Jatin Parate ([@jatin4228](https://github.com/jatin4228))

package/dist/index.cjs.js

@@ -1,2 +1,2 @@
 /*! For license information please see index.cjs.js.LICENSE.txt */
-(()=>{"use strict";var e={698:(e,r)=>{var t=Symbol.for("react.transitional.element");function n(e,r,n){var o=null;if(void 0!==n&&(o=""+n),void 0!==r.key&&(o=""+r.key),"key"in r)for(var u in n={},r)"key"!==u&&(n[u]=r[u]);else n=r;return r=n.ref,{$$typeof:t,type:e,key:o,ref:void 0!==r?r:null,props:n}}Symbol.for("react.fragment"),r.jsx=n},848:(e,r,t)=>{e.exports=t(698)}},r={};function t(n){var o=r[n];if(void 0!==o)return o.exports;var u=r[n]={exports:{}};return e[n](u,u.exports,t),u.exports}t.d=(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};t.r(n),t.d(n,{default:()=>i,reallyReactiveVal:()=>a});const o=require("react");var u=t(848);function i(e){return(0,o.useMemo)((function(){return a(e)}),[e])}var a=function(e){var r=e,t=new Set,n=(0,o.memo)((function(){return(0,o.useSyncExternalStore)((function(e){return t.add(e),function(){return t.delete(e)}}),(function(){return r}))}));return function(e){if(void 0===e)return(0,u.jsx)(n,{});r="function"==typeof e?e(r):e,t.forEach((function(e){e()}))}};module.exports=n})();
+(()=>{"use strict";var e={698:(e,r)=>{var t=Symbol.for("react.transitional.element");function n(e,r,n){var o=null;if(void 0!==n&&(o=""+n),void 0!==r.key&&(o=""+r.key),"key"in r)for(var u in n={},r)"key"!==u&&(n[u]=r[u]);else n=r;return r=n.ref,{$$typeof:t,type:e,key:o,ref:void 0!==r?r:null,props:n}}Symbol.for("react.fragment"),r.jsx=n},848:(e,r,t)=>{e.exports=t(698)}},r={};function t(n){var o=r[n];if(void 0!==o)return o.exports;var u=r[n]={exports:{}};return e[n](u,u.exports,t),u.exports}t.d=(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};t.r(n),t.d(n,{default:()=>i,reallyReactiveVal:()=>a});const o=require("react");var u=t(848);function i(e){return(0,o.useMemo)((function(){return a(e)}),[e])}var a=function(e){var r=e,t=new Set,n=(0,o.memo)((function(){return(0,o.useSyncExternalStore)((function(e){return t.add(e),function(){return t.delete(e)}}),(function(){return r}))}));function i(e){if(void 0===e)return(0,u.jsx)(n,{});r="function"==typeof e?e(r):e,t.forEach((function(e){e()}))}var a=(0,o.createContext)(i);return[i,(0,o.memo)((function(){return(0,u.jsx)(a.Provider,{value:i})})),function(){return(0,o.useContext)(a)}]};module.exports=n})();

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode, type ReactElement } from "react";
-export default function useReactiveValue<T extends ReactNode>(initialValue: T): <U extends (T | ((currVal: T) => T)) | unknown | undefined>(updater?: U | undefined) => U extends T | ((currVal: T) => T) ? undefined : ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export declare const reallyReactiveVal: <T extends ReactNode>(initialValue: T) => <U extends (T | ((currVal: T) => T)) | unknown | undefined>(updater?: U) => U extends T | ((currVal: T) => T) ? undefined : ReactElement;
+import { type ReactNode, type ReactElement } from 'react';
+export default function useReactiveValue<T extends ReactNode>(initialValue: T): (import("react").NamedExoticComponent<object> | (<U extends (T | ((currVal: T) => T)) | unknown | undefined>(updater?: U | undefined) => U extends T | ((currVal: T) => T) ? undefined : ReactElement<unknown, string | import("react").JSXElementConstructor<any>>) | (() => <U extends (T | ((currVal: T) => T)) | unknown | undefined>(updater?: U | undefined) => U extends T | ((currVal: T) => T) ? undefined : ReactElement<unknown, string | import("react").JSXElementConstructor<any>>))[];
+export declare const reallyReactiveVal: <T extends ReactNode>(initialValue: T) => ((<U extends (T | ((currVal: T) => T)) | unknown | undefined>(updater?: U) => U extends T | ((currVal: T) => T) ? undefined : ReactElement) | import("react").NamedExoticComponent<object> | (() => <U extends (T | ((currVal: T) => T)) | unknown | undefined>(updater?: U) => U extends T | ((currVal: T) => T) ? undefined : ReactElement))[];
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,YAAY,EAIlB,MAAM,OAAO,CAAC;AAGf,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,CAAC,SAAS,SAAS,EAAE,YAAY,EAAE,CAAC,IAqC7D,CAAC,SAAS,4BAAU,OAAO,GAAG,SAAS,yJAnCtD;AAED,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,SAAS,EAAE,cAAc,CAAC,KAiCvD,CAAC,CAAC,SAAS,gBAjBM,CAAC,KAAK,CAAC,KAiBH,OAAO,GAAG,SAAS,EACnD,OAAO,CAAC,EAAE,CAAC,KACR,CAAC,wBAnBwB,CAAC,KAAK,CAAC,IAmBZ,SAAS,GAAG,YACtC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,YAAY,EAMlB,MAAM,OAAO,CAAC;AAGf,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,CAAC,SAAS,SAAS,EAAE,YAAY,EAAE,CAAC,qDAsB5D,CAAC,SAAS,4BAAU,OAAO,GAAG,SAAS,oKAAvC,CAAC,SAAS,4BAAU,OAAO,GAAG,SAAS,6JApBvD;AAED,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,SAAS,EAAE,cAAc,CAAC,QAkBrD,CAAC,SAAS,gBAFK,CAAC,KAAK,CAAC,KAEF,OAAO,GAAG,SAAS,YAC1C,CAAC,KACR,CAAC,wBAJwB,CAAC,KAAK,CAAC,IAIZ,SAAS,GAAG,YAAY,2DAFlC,CAAC,SAAS,gBAFK,CAAC,KAAK,CAAC,KAEF,OAAO,GAAG,SAAS,YAC1C,CAAC,KACR,CAAC,wBAJwB,CAAC,KAAK,CAAC,IAIZ,SAAS,GAAG,YAAY,IA4BlD,CAAC"}

package/dist/index.esm.js

@@ -1,2 +1,2 @@
 /*! For license information please see index.esm.js.LICENSE.txt */
-import*as e from"react";var r={698:(e,r)=>{var t=Symbol.for("react.transitional.element");function n(e,r,n){var o=null;if(void 0!==n&&(o=""+n),void 0!==r.key&&(o=""+r.key),"key"in r)for(var u in n={},r)"key"!==u&&(n[u]=r[u]);else n=r;return r=n.ref,{$$typeof:t,type:e,key:o,ref:void 0!==r?r:null,props:n}}Symbol.for("react.fragment"),r.jsx=n},848:(e,r,t)=>{e.exports=t(698)}},t={};function n(e){var o=t[e];if(void 0!==o)return o.exports;var u=t[e]={exports:{}};return r[e](u,u.exports,n),u.exports}n.d=(e,r)=>{for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r);const o=(e=>{var r={};return n.d(r,e),r})({memo:()=>e.memo,useMemo:()=>e.useMemo,useSyncExternalStore:()=>e.useSyncExternalStore});var u=n(848);function a(e){return(0,o.useMemo)((function(){return f(e)}),[e])}var f=function(e){var r=e,t=new Set,n=(0,o.memo)((function(){return(0,o.useSyncExternalStore)((function(e){return t.add(e),function(){return t.delete(e)}}),(function(){return r}))}));return function(e){if(void 0===e)return(0,u.jsx)(n,{});r="function"==typeof e?e(r):e,t.forEach((function(e){e()}))}};export{a as default,f as reallyReactiveVal};
+import*as e from"react";var r={698:(e,r)=>{var t=Symbol.for("react.transitional.element");function n(e,r,n){var o=null;if(void 0!==n&&(o=""+n),void 0!==r.key&&(o=""+r.key),"key"in r)for(var u in n={},r)"key"!==u&&(n[u]=r[u]);else n=r;return r=n.ref,{$$typeof:t,type:e,key:o,ref:void 0!==r?r:null,props:n}}Symbol.for("react.fragment"),r.jsx=n},848:(e,r,t)=>{e.exports=t(698)}},t={};function n(e){var o=t[e];if(void 0!==o)return o.exports;var u=t[e]={exports:{}};return r[e](u,u.exports,n),u.exports}n.d=(e,r)=>{for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r);const o=(e=>{var r={};return n.d(r,e),r})({createContext:()=>e.createContext,memo:()=>e.memo,useContext:()=>e.useContext,useMemo:()=>e.useMemo,useSyncExternalStore:()=>e.useSyncExternalStore});var u=n(848);function a(e){return(0,o.useMemo)((function(){return f(e)}),[e])}var f=function(e){var r=e,t=new Set,n=(0,o.memo)((function(){return(0,o.useSyncExternalStore)((function(e){return t.add(e),function(){return t.delete(e)}}),(function(){return r}))}));function a(e){if(void 0===e)return(0,u.jsx)(n,{});r="function"==typeof e?e(r):e,t.forEach((function(e){e()}))}var f=(0,o.createContext)(a);return[a,(0,o.memo)((function(){return(0,u.jsx)(f.Provider,{value:a})})),function(){return(0,o.useContext)(f)}]};export{a as default,f as reallyReactiveVal};

package/dist/index.umd.js

@@ -1,2 +1,2 @@
 /*! For license information please see index.umd.js.LICENSE.txt */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define("ReactReactiveVal",["react"],t):"object"==typeof exports?exports.ReactReactiveVal=t(require("react")):e.ReactReactiveVal=t(e.React)}(this,(e=>(()=>{"use strict";var t={442:t=>{t.exports=e},698:(e,t)=>{var r=Symbol.for("react.transitional.element");function o(e,t,o){var n=null;if(void 0!==o&&(n=""+o),void 0!==t.key&&(n=""+t.key),"key"in t)for(var a in o={},t)"key"!==a&&(o[a]=t[a]);else o=t;return t=o.ref,{$$typeof:r,type:e,key:n,ref:void 0!==t?t:null,props:o}}Symbol.for("react.fragment"),t.jsx=o},848:(e,t,r)=>{e.exports=r(698)}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,o),a.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};o.r(n),o.d(n,{default:()=>i,reallyReactiveVal:()=>f});var a=o(442),u=o(848);function i(e){return(0,a.useMemo)((function(){return f(e)}),[e])}var f=function(e){var t=e,r=new Set,o=(0,a.memo)((function(){return(0,a.useSyncExternalStore)((function(e){return r.add(e),function(){return r.delete(e)}}),(function(){return t}))}));return function(e){if(void 0===e)return(0,u.jsx)(o,{});t="function"==typeof e?e(t):e,r.forEach((function(e){e()}))}};return n})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define("ReactReactiveVal",["react"],t):"object"==typeof exports?exports.ReactReactiveVal=t(require("react")):e.ReactReactiveVal=t(e.React)}(this,(e=>(()=>{"use strict";var t={442:t=>{t.exports=e},698:(e,t)=>{var r=Symbol.for("react.transitional.element");function o(e,t,o){var n=null;if(void 0!==o&&(n=""+o),void 0!==t.key&&(n=""+t.key),"key"in t)for(var u in o={},t)"key"!==u&&(o[u]=t[u]);else o=t;return t=o.ref,{$$typeof:r,type:e,key:n,ref:void 0!==t?t:null,props:o}}Symbol.for("react.fragment"),t.jsx=o},848:(e,t,r)=>{e.exports=r(698)}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var u=r[e]={exports:{}};return t[e](u,u.exports,o),u.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};o.r(n),o.d(n,{default:()=>i,reallyReactiveVal:()=>f});var u=o(442),a=o(848);function i(e){return(0,u.useMemo)((function(){return f(e)}),[e])}var f=function(e){var t=e,r=new Set,o=(0,u.memo)((function(){return(0,u.useSyncExternalStore)((function(e){return r.add(e),function(){return r.delete(e)}}),(function(){return t}))}));function n(e){if(void 0===e)return(0,a.jsx)(o,{});t="function"==typeof e?e(t):e,r.forEach((function(e){e()}))}var i=(0,u.createContext)(n);return[n,(0,u.memo)((function(){return(0,a.jsx)(i.Provider,{value:n})})),function(){return(0,u.useContext)(i)}]};return n})()));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-reactive-val",
-  "version": "1.0.4",
-  "description": "",
+  "version": "2.0.0",
+  "description": "A lightweight, type-safe reactive value management library for React applications",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
@@ -21,21 +21,61 @@
     "build:webpack": "webpack --config webpack.config.js",
     "build": "rm -rf dist && npm run build:types && npm run build:webpack",
     "prepublishOnly": "npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx}\"",
+    "lint-staged": "lint-staged",
+    "prepare": "husky install"
   },
-  "peerDependencies": {
-    "react": "^19.0.0"
+  "lint-staged": {
+    "src/**/*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,md}": [
+      "prettier --write"
+    ]
   },
-  "keywords": [],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jatin-parate/react-reactive-val.git"
+  },
+  "keywords": [
+    "react",
+    "reactive",
+    "state",
+    "management",
+    "typescript",
+    "hooks"
+  ],
   "author": "Jatin Parate <jatin4228@gmail.com>",
   "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/jatin-parate/react-reactive-val/issues"
+  },
+  "homepage": "https://github.com/jatin-parate/react-reactive-val#readme",
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
   "devDependencies": {
     "@babel/core": "^7.24.0",
     "@babel/preset-env": "^7.24.0",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@types/react": "^19.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
     "babel-loader": "^9.1.3",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.4.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.5.2",
+    "prettier": "^3.5.3",
     "react": "^19.1.0",
     "terser-webpack-plugin": "^5.3.10",
     "typescript": "^5.8.3",