react-essentials-functions 1.0.2 → 1.1.0

package/build/hooks/useTheme.js

@@ -2,20 +2,82 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTheme = void 0;
 const react_1 = require("react");
+const STORAGE_KEY = 'theme';
+function getSystemTheme() {
+    if (typeof window === 'undefined') {
+        return 'light';
+    }
+    try {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light';
+    }
+    catch {
+        return 'light';
+    }
+}
+function getStoredTheme() {
+    try {
+        const stored = window.localStorage.getItem(STORAGE_KEY);
+        if (stored === 'light' || stored === 'dark') {
+            return stored;
+        }
+        return null;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Hook to manage theme (light/dark) with localStorage persistence.
+ * Automatically detects system color scheme preference.
+ *
+ * @returns A tuple containing:
+ * - current theme mode ('light' | 'dark')
+ * - function to toggle between themes
+ * - boolean indicating if the component is mounted (useful for SSR)
+ *
+ * @example
+ * ```tsx
+ * const [theme, toggleTheme, mounted] = useTheme();
+ *
+ * if (!mounted) return null; // Avoid hydration mismatch
+ *
+ * return (
+ *   <button onClick={toggleTheme}>
+ *     Switch to {theme === 'light' ? 'dark' : 'light'} mode
+ *   </button>
+ * );
+ * ```
+ */
 const useTheme = () => {
     const [theme, setTheme] = (0, react_1.useState)('light');
     const [mountedComponent, setMountedComponent] = (0, react_1.useState)(false);
-    const setMode = (mode) => {
-        window.localStorage.setItem('theme', mode);
-        setTheme(mode);
-    };
-    const themeToggler = () => {
-        theme === 'light' ? setMode('dark') : setMode('light');
-    };
+    const themeToggler = (0, react_1.useCallback)(() => {
+        setTheme((prevTheme) => {
+            const newTheme = prevTheme === 'light' ? 'dark' : 'light';
+            try {
+                window.localStorage.setItem(STORAGE_KEY, newTheme);
+            }
+            catch {
+                // localStorage may not be available
+            }
+            return newTheme;
+        });
+    }, []);
     (0, react_1.useEffect)(() => {
-        const localTheme = window.localStorage.getItem('theme');
-        localTheme ? setTheme(localTheme) : setMode('light');
         setMountedComponent(true);
+        const stored = getStoredTheme();
+        const initial = stored ?? getSystemTheme();
+        setTheme(initial);
+        if (!stored) {
+            try {
+                window.localStorage.setItem(STORAGE_KEY, initial);
+            }
+            catch {
+                // localStorage may not be available
+            }
+        }
     }, []);
     return [theme, themeToggler, mountedComponent];
 };

package/build/hooks/useToggle.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Hook for managing a boolean toggle state.
+ * Provides a simple API for toggling, setting true, or setting false.
+ *
+ * @param initialValue - The initial boolean value (default: false)
+ * @returns A tuple of [value, toggle, setTrue, setFalse]
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, toggleOpen, open, close] = useToggle(false);
+ *
+ * return (
+ *   <div>
+ *     <button onClick={toggleOpen}>Toggle</button>
+ *     <button onClick={open}>Open</button>
+ *     <button onClick={close}>Close</button>
+ *     {isOpen && <Modal />}
+ *   </div>
+ * );
+ * ```
+ */
+export declare function useToggle(initialValue?: boolean): [boolean, () => void, () => void, () => void];

package/build/hooks/useToggle.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToggle = useToggle;
+const react_1 = require("react");
+/**
+ * Hook for managing a boolean toggle state.
+ * Provides a simple API for toggling, setting true, or setting false.
+ *
+ * @param initialValue - The initial boolean value (default: false)
+ * @returns A tuple of [value, toggle, setTrue, setFalse]
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, toggleOpen, open, close] = useToggle(false);
+ *
+ * return (
+ *   <div>
+ *     <button onClick={toggleOpen}>Toggle</button>
+ *     <button onClick={open}>Open</button>
+ *     <button onClick={close}>Close</button>
+ *     {isOpen && <Modal />}
+ *   </div>
+ * );
+ * ```
+ */
+function useToggle(initialValue = false) {
+    const [value, setValue] = (0, react_1.useState)(initialValue);
+    const toggle = (0, react_1.useCallback)(() => {
+        setValue((prev) => !prev);
+    }, []);
+    const setTrue = (0, react_1.useCallback)(() => {
+        setValue(true);
+    }, []);
+    const setFalse = (0, react_1.useCallback)(() => {
+        setValue(false);
+    }, []);
+    return [value, toggle, setTrue, setFalse];
+}

package/build/hooks/useWindowDimensions.d.ts

@@ -1,4 +1,23 @@
-export default function useWindowDimensions(): {
-    width: number | null;
-    height: number | null;
+export type WindowDimensions = {
+    width: number;
+    height: number;
 };
+/**
+ * Hook to get the current window dimensions.
+ * Automatically updates on resize with debounce for performance.
+ *
+ * @returns Object containing width and height of the window
+ *
+ * @example
+ * ```tsx
+ * const { width, height } = useWindowDimensions();
+ *
+ * return (
+ *   <div>
+ *     Window size: {width} x {height}
+ *   </div>
+ * );
+ * ```
+ */
+export declare function useWindowDimensions(): WindowDimensions;
+export default useWindowDimensions;

package/build/hooks/useWindowDimensions.js

@@ -1,27 +1,46 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWindowDimensions = useWindowDimensions;
 const react_1 = require("react");
+/**
+ * Hook to get the current window dimensions.
+ * Automatically updates on resize with debounce for performance.
+ *
+ * @returns Object containing width and height of the window
+ *
+ * @example
+ * ```tsx
+ * const { width, height } = useWindowDimensions();
+ *
+ * return (
+ *   <div>
+ *     Window size: {width} x {height}
+ *   </div>
+ * );
+ * ```
+ */
 function useWindowDimensions() {
-    const hasWindow = typeof window !== 'undefined';
-    function getWindowDimensions() {
-        const width = hasWindow ? window.innerWidth : null;
-        const height = hasWindow ? window.innerHeight : null;
+    const getWindowDimensions = (0, react_1.useCallback)(() => {
+        if (typeof window === 'undefined') {
+            return { width: 0, height: 0 };
+        }
         return {
-            width,
-            height,
+            width: window.innerWidth,
+            height: window.innerHeight,
         };
-    }
-    const [windowDimensions, setWindowDimensions] = (0, react_1.useState)(getWindowDimensions());
+    }, []);
+    const [windowDimensions, setWindowDimensions] = (0, react_1.useState)(getWindowDimensions);
     (0, react_1.useEffect)(() => {
-        if (hasWindow) {
-            // eslint-disable-next-line no-inner-declarations
-            function handleResize() {
-                setWindowDimensions(getWindowDimensions());
-            }
-            window.addEventListener('resize', handleResize);
-            return () => window.removeEventListener('resize', handleResize);
+        if (typeof window === 'undefined') {
+            return;
         }
-    }, [hasWindow]);
+        const handleResize = () => {
+            setWindowDimensions(getWindowDimensions());
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [getWindowDimensions]);
     return windowDimensions;
 }
+// Keep default export for backwards compatibility
 exports.default = useWindowDimensions;

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "react-essentials-functions",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "author": "maxgfr",
   "license": "MIT",
-  "description": "A collection of zero-dependencies useful hooks and components for React",
+  "description": "A collection of zero-dependency useful hooks and components for React",
   "main": "./build/index.js",
+  "types": "./build/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/maxgfr/react-essentials-functions.git"
@@ -24,73 +25,52 @@
     "zero-dependencies"
   ],
   "scripts": {
-    "dev": "nodemon",
-    "develop": "node -r @swc-node/register ./src/index.ts",
-    "test": "jest --passWithNoTests",
+    "test": "jest",
     "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
     "clean": "rimraf build",
     "build": "tsc -p tsconfig.build.json",
     "build:watch": "tsc -w -p tsconfig.build.json",
-    "build:swc": "swc ./src -d build",
-    "build:swc:watch": "swc ./src -d build -w",
+    "typecheck": "tsc -p tsconfig.build.json --noEmit",
     "lint": "eslint ./src --ext .ts,.tsx",
-    "prettier": "prettier --write './src/**/*.{ts,js,json,tsx,jsx}'",
-    "storybook:start": "start-storybook -p 6006",
-    "storybook:build": "build-storybook",
-    "storybook:deploy": "npm run storybook:build && gh-pages -d storybook-static",
-    "storybook:deploy:action": "npm run storybook:build && gh-pages -d storybook-static -u \"github-actions-bot <support+actions@github.com>\"",
+    "format": "prettier --write './src/**/*.{ts,js,json,tsx,jsx}'",
+    "format:check": "prettier --check './src/**/*.{ts,js,json,tsx,jsx}'",
+    "ci": "pnpm run typecheck && pnpm run lint && pnpm run format:check && pnpm run test:coverage",
     "release": "semantic-release"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
-    "@semantic-release/changelog": "^6.0.2",
-    "@semantic-release/commit-analyzer": "^9.0.2",
+    "@semantic-release/commit-analyzer": "^13.0.1",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^8.0.6",
-    "@semantic-release/npm": "^9.0.1",
-    "@semantic-release/release-notes-generator": "^10.0.3",
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-interactions": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/builder-webpack4": "^6.5.13",
-    "@storybook/manager-webpack4": "^6.5.13",
-    "@storybook/react": "^6.5.13",
-    "@storybook/testing-library": "^0.0.13",
-    "@swc-node/register": "1.5.4",
-    "@swc/cli": "0.1.57",
-    "@swc/core": "1.3.19",
-    "@swc/jest": "0.2.23",
-    "@swc/plugin-styled-jsx": "^1.5.20",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "29.2.3",
-    "@types/node": "18.11.9",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.8",
-    "@typescript-eslint/eslint-plugin": "5.43.0",
-    "@typescript-eslint/parser": "5.43.0",
-    "babel-loader": "^9.0.0",
-    "eslint": "8.28.0",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-jest": "27.1.5",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.31.10",
-    "eslint-plugin-storybook": "^0.6.7",
-    "gh-pages": "^4.0.0",
-    "jest": "29.3.1",
-    "jest-environment-jsdom": "^29.3.0",
-    "nodemon": "2.0.20",
-    "prettier": "2.7.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rimraf": "3.0.2",
-    "semantic-release": "^19.0.5",
-    "typescript": "^4.8.4"
+    "@semantic-release/github": "^12.0.5",
+    "@semantic-release/npm": "^13.1.4",
+    "@semantic-release/release-notes-generator": "^14.1.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.19.9",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
+    "@typescript-eslint/eslint-plugin": "^8.54.0",
+    "@typescript-eslint/parser": "^8.54.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-jest": "^28.14.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "^3.8.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rimraf": "^6.1.2",
+    "semantic-release": "^25.0.3",
+    "ts-jest": "^29.4.6",
+    "typescript": "^5.9.3"
   }
 }