@uxf/core-react 11.35.0 → 11.36.0

package/README.md

@@ -245,3 +245,18 @@ useEffect(() => {
   previousState.current(); // use state of 'someUnstableWhatever' from previous render without affecting this effetct update
 }, [previousState])
 ```
+```tsx
+import { useToggle } from "@uxf/core-react/hooks/use-toggle";
+
+const [isVisible, toggleIsVisible, setVisible, setInvisible] = useToggle(false);
+
+<button onClick={toggleIsVisible}>Toggle visibility</button>
+```
+
+```tsx
+import { useIncrement } from "@uxf/core-react/hooks/use-increment";
+
+const [count, increment, decrement, reset] = useIncrement(5, 1);
+
+<button onClick={increment}>Toggle visibility</button>
+```

package/hooks/use-increment.d.ts

@@ -0,0 +1,2 @@
+import type { Noop } from "@uxf/core/types";
+export declare function useIncrement(defaultValue: number, step?: number): [number, Noop, Noop, Noop];

package/hooks/use-increment.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIncrement = useIncrement;
+const react_1 = require("react");
+function useIncrement(defaultValue, step = 1) {
+    const [value, setValue] = (0, react_1.useState)(defaultValue);
+    const incrementHandler = (0, react_1.useCallback)(() => setValue((prev) => prev + step), [step]);
+    const decrementHandler = (0, react_1.useCallback)(() => setValue((prev) => prev - step), [step]);
+    const resetHandler = (0, react_1.useCallback)(() => setValue(defaultValue), [defaultValue]);
+    return [value, incrementHandler, decrementHandler, resetHandler];
+}

package/hooks/use-increment.test.d.ts

@@ -0,0 +1 @@
+export {};

package/hooks/use-increment.test.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+const use_increment_1 = require("./use-increment"); // Adjust the import based on your file structure
+describe("useIncrement Hook", () => {
+    it("should initialize with the default value", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_increment_1.useIncrement)(5));
+        const [value] = result.current;
+        expect(value).toBe(5);
+    });
+    it("should increment the value by the step value", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_increment_1.useIncrement)(5, 2));
+        const [value, incrementHandler] = result.current;
+        expect(value).toBe(5);
+        (0, react_1.act)(() => {
+            incrementHandler();
+        });
+        const [newValue] = result.current;
+        expect(newValue).toBe(7); // 5 + 2
+    });
+    it("should decrement the value by the step value", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_increment_1.useIncrement)(10, 3));
+        const [value, , decrementHandler] = result.current;
+        expect(value).toBe(10);
+        (0, react_1.act)(() => {
+            decrementHandler();
+        });
+        const [newValue] = result.current;
+        expect(newValue).toBe(7); // 10 - 3
+    });
+    it("should reset the value to the default value", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_increment_1.useIncrement)(20, 5));
+        const [value, incrementHandler, , resetHandler] = result.current;
+        expect(value).toBe(20);
+        (0, react_1.act)(() => {
+            incrementHandler();
+        });
+        const [newValue] = result.current;
+        expect(newValue).toBe(25); // 20 + 5
+        (0, react_1.act)(() => {
+            resetHandler();
+        });
+        const [resetValue] = result.current;
+        expect(resetValue).toBe(20); // Reset back to default
+    });
+    it("should use a step of 1 if no step is provided", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_increment_1.useIncrement)(10));
+        const [value, incrementHandler, decrementHandler] = result.current;
+        expect(value).toBe(10);
+        (0, react_1.act)(() => {
+            incrementHandler();
+        });
+        const [newValue] = result.current;
+        expect(newValue).toBe(11); // 10 + 1 (default step)
+        (0, react_1.act)(() => {
+            decrementHandler();
+        });
+        const [finalValue] = result.current;
+        expect(finalValue).toBe(10); // 11 - 1
+    });
+});

package/hooks/use-toggle.d.ts

@@ -0,0 +1,2 @@
+import type { Noop } from "@uxf/core/types";
+export declare function useToggle(defaultValue: boolean): [boolean, Noop, Noop, Noop];

package/hooks/use-toggle.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToggle = useToggle;
+const react_1 = require("react");
+function useToggle(defaultValue) {
+    const [isOn, setIsOn] = (0, react_1.useState)(defaultValue);
+    const toggleHandler = (0, react_1.useCallback)(() => setIsOn((prev) => !prev), []);
+    const setTrueHandler = (0, react_1.useCallback)(() => setIsOn(true), []);
+    const setFalseHandler = (0, react_1.useCallback)(() => setIsOn(false), []);
+    return [isOn, toggleHandler, setTrueHandler, setFalseHandler];
+}

package/hooks/use-toggle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/hooks/use-toggle.test.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+const use_toggle_1 = require("./use-toggle");
+describe("useToggle Hook", () => {
+    it("should initialize with the default value", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_toggle_1.useToggle)(false));
+        const [isOn] = result.current;
+        expect(isOn).toBe(false);
+    });
+    it("should toggle the value when toggleHandler is called", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_toggle_1.useToggle)(false));
+        const [isOn, toggleHandler] = result.current;
+        expect(isOn).toBe(false);
+        (0, react_1.act)(() => {
+            toggleHandler();
+        });
+        const [isOnNew] = result.current;
+        expect(isOnNew).toBe(true);
+        (0, react_1.act)(() => {
+            toggleHandler();
+        });
+        const [isOnFinal] = result.current;
+        expect(isOnFinal).toBe(false);
+    });
+    it("should set the value to true when setTrueHandler is called", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_toggle_1.useToggle)(false));
+        const [isOn, , setTrueHandler] = result.current;
+        expect(isOn).toBe(false);
+        (0, react_1.act)(() => {
+            setTrueHandler();
+        });
+        const [isOnNew] = result.current;
+        expect(isOnNew).toBe(true);
+    });
+    it("should set the value to false when setFalseHandler is called", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_toggle_1.useToggle)(true));
+        const [isOn, , , setFalseHandler] = result.current;
+        expect(isOn).toBe(true);
+        (0, react_1.act)(() => {
+            setFalseHandler();
+        });
+        const [isOnNew] = result.current;
+        expect(isOnNew).toBe(false);
+    });
+});

package/package.json

@@ -1,24 +1,24 @@
 {
-  "name": "@uxf/core-react",
-  "version": "11.35.0",
-  "description": "UXF Core",
-  "author": "UX Fans s.r.o",
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "build": "tsc -P tsconfig.json",
-    "typecheck": "tsc --noEmit --skipLibCheck"
-  },
-  "dependencies": {
-    "@uxf/core": "11.35.0"
-  },
-  "peerDependencies": {
-    "react": ">=18.2.0"
-  },
-  "devDependencies": {
-    "@types/react": "18.3.5",
-    "react": "18.3.1"
-  }
-}
+    "name": "@uxf/core-react",
+    "version": "11.36.0",
+    "description": "UXF Core",
+    "author": "UX Fans s.r.o",
+    "license": "MIT",
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "build": "tsc -P tsconfig.json",
+        "typecheck": "tsc --noEmit --skipLibCheck"
+    },
+    "dependencies": {
+        "@uxf/core": "11.35.0"
+    },
+    "peerDependencies": {
+        "react": ">=18.2.0"
+    },
+    "devDependencies": {
+        "@types/react": "18.3.5",
+        "react": "18.3.1"
+    }
+}