@a2zb/react 1.0.0 → 1.0.1

package/dist/src/hooks/__tests__/use-theme.test.js

@@ -0,0 +1,44 @@
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { renderHook } from "vitest";
+import { useTheme } from "../use-theme";
+describe("useTheme", () => {
+    beforeEach(() => {
+        localStorage.clear();
+    });
+    function setup() {
+        const hook = renderHook(() => useTheme());
+        return {
+            hook,
+            getTheme: () => hook.result.current.theme,
+            applyTheme: hook.result.current.applyTheme,
+        };
+    }
+    describe("mount", () => {
+        it("defaults to runtime theme when storage is empty", () => {
+            const { getTheme } = setup();
+            expect(getTheme()).toBe("runtime");
+        });
+        it("restores theme from storage on mount", () => {
+            localStorage.setItem("theme", "favourite");
+            const { getTheme } = setup();
+            expect(getTheme()).toEqual("favourite");
+        });
+    });
+    describe("applyTheme", () => {
+        // nb: spies are restored automatically via restoreMocks in vitest config
+        it("sets data-theme attribute on document", () => {
+            const spy = vi.spyOn(document.documentElement, "setAttribute");
+            const { applyTheme } = setup();
+            applyTheme("fresh");
+            expect(document.documentElement.getAttribute("data-theme")).toBe("fresh");
+            expect(spy).toHaveBeenCalledWith("data-theme", "fresh");
+        });
+        it("persists theme to localStorage", () => {
+            const spy = vi.spyOn(Storage.prototype, "setItem");
+            const { applyTheme } = setup();
+            applyTheme("fresh");
+            expect(localStorage.getItem("theme")).toBe("fresh");
+            expect(spy).toHaveBeenCalledWith("theme", "fresh");
+        });
+    });
+});

package/dist/src/hooks/use-keyboard-shortcuts.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+export function useKeyboardShortcuts(map) {
+    useEffect(() => {
+        const onKey = (e) => {
+            const target = e.target;
+            // disable on cntrl / cmd
+            if (e.ctrlKey || e.metaKey || e.altKey)
+                return;
+            // don't trigger while typing
+            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+                return;
+            }
+            const fn = map[e.key];
+            if (!fn)
+                return;
+            e.preventDefault();
+            fn();
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [map]);
+}

package/dist/src/hooks/use-theme.js

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+/**
+ * Hook for setting / reading current theme
+ * Instead of a global theme provider, the app simply stores theme name in local storage
+ */
+export function useTheme() {
+    const [theme, setTheme] = useState(() => localStorage.getItem('theme') ?? 'runtime');
+    function apply(t) {
+        document.documentElement.setAttribute('data-theme', t);
+        localStorage.setItem('theme', t); // store in browser for future session
+        setTheme(t);
+    }
+    useEffect(() => {
+        document.documentElement.setAttribute('data-theme', theme);
+    }, [theme]);
+    return { theme, applyTheme: apply };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2zb/react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "files": [
     "dist"
@@ -8,19 +8,21 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
+    "@a2zb/lib": "1.0.0",
     "clsx": "^2.1.1",
-    "focus-trap-react": "^12.0.0",
-    "sonner": "^2.0.7",
-    "@a2zb/lib": "1.0.0"
+    "focus-trap-react": "^12.0.0"
   },
   "peerDependencies": {
+    "@a2zb/styles": "^1.0.0",
     "react": "^19",
-    "@a2zb/styles": "^1.0.0"
+    "sonner": "^2.0.7"
   },
   "devDependencies": {
+    "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.17",
     "react": "^19.2.7",
     "typescript": "^6.0.3",
+    "vitest": "^4.1.9",
     "@a2zb/styles": "1.0.0"
   },
   "scripts": {