airyhooks 0.1.0-beta.0 → 0.1.0

package/README.md

@@ -0,0 +1,180 @@
+# airyhooks
+
+Add production-ready React hooks directly to your project—no package installation required.
+
+airyhooks is a CLI tool that lets you add battle-tested, TypeScript-first React hooks directly to your codebase. Instead of installing a package, you copy exactly what you need. This gives you complete control: modify hooks for your use case, avoid dependency bloat, and eliminate version conflicts.
+
+```bash
+pnpm dlx airyhooks@latest add useDebounce
+```
+
+## Why airyhooks?
+
+- **Zero Dependencies**: Hooks only depend on React—nothing else
+- **Full Ownership**: Code lives in your repo; customize freely
+- **TypeScript Native**: Complete type safety with generics
+- **Battle-Tested**: 50+ tests, 94%+ coverage
+- **One Command**: Add hooks instantly with the CLI
+
+## 🚀 Quick Start
+
+### 1. Initialize
+
+Create the configuration file and set your hooks directory:
+
+```bash
+pnpm dlx airyhooks@latest init
+```
+
+This creates `airyhooks.json` in your project root and prompts you for the hooks directory path (default: `./hooks`).
+
+### 2. Add a Hook
+
+Add any hook to your project:
+
+```bash
+pnpm dlx airyhooks@latest add useDebounce
+```
+
+This creates the following structure:
+
+```
+hooks/
+├── useDebounce/
+│   ├── useDebounce.ts
+│   └── index.ts
+```
+
+### 3. Use in Your Code
+
+Import and use the hook in your components:
+
+```tsx
+import { useDebounce } from "./hooks/useDebounce";
+
+export function SearchComponent() {
+  const [value, setValue] = useState("");
+  const debouncedValue = useDebounce(value, 500);
+
+  return (
+    <div>
+      <input value={value} onChange={(e) => setValue(e.target.value)} />
+      <p>Searching for: {debouncedValue}</p>
+    </div>
+  );
+}
+```
+
+## 📖 Commands
+
+### `airyhooks init`
+
+Initialize airyhooks in your project. Creates `airyhooks.json` configuration file and prompts for your hooks directory path.
+
+```bash
+pnpm dlx airyhooks@latest init
+# or
+npx airyhooks@latest init
+```
+
+### `airyhooks add <hook-name>`
+
+Add a specific hook to your project. Creates the hook directory with TypeScript files.
+
+```bash
+pnpm dlx airyhooks@latest add useDebounce
+```
+
+### `airyhooks list`
+
+List all available hooks with descriptions.
+
+```bash
+pnpm dlx airyhooks@latest list
+```
+
+## 📚 Available Hooks
+
+| Hook                | Description                                             |
+| ------------------- | ------------------------------------------------------- |
+| `useDebounce`       | Debounce a value with a specified delay                 |
+| `useThrottle`       | Throttle a value to update at most once per interval    |
+| `useLocalStorage`   | Sync state with localStorage                            |
+| `useSessionStorage` | Sync state with sessionStorage                          |
+| `usePrevious`       | Track previous state or props value                     |
+| `useToggle`         | Toggle a boolean value with convenient handlers         |
+| `useBoolean`        | Boolean state with setTrue, setFalse, and toggle        |
+| `useMount`          | Call a callback on component mount                      |
+| `useUnmount`        | Call a callback on component unmount                    |
+| `useInterval`       | Call a callback at specified intervals                  |
+| `useTimeout`        | Call a callback after a timeout                         |
+| `useClickAway`      | Detect clicks outside of an element                     |
+| `useWindowSize`     | Track window dimensions                                 |
+| `useCounter`        | Manage numeric state with increment/decrement/reset/set |
+| `useHover`          | Track mouse hover state on elements                     |
+| `useKeyPress`       | Detect specific keyboard key presses                    |
+| `useMedia`          | React to CSS media query changes                        |
+| `useScroll`         | Track scroll position of element or window              |
+
+## 💡 Usage Example
+
+Here's a complete example using `useDebounce` for a search input:
+
+```tsx
+import { useState } from "react";
+import { useDebounce } from "./hooks/useDebounce";
+
+export function App() {
+  const [input, setInput] = useState("");
+  const debouncedInput = useDebounce(input, 1000);
+
+  return (
+    <div>
+      <input
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        placeholder="Type something..."
+      />
+      <p>You typed: {debouncedInput}</p>
+    </div>
+  );
+}
+```
+
+## ⚙️ Configuration
+
+The `airyhooks.json` file stores your configuration:
+
+```json
+{
+  "hooksPath": "./hooks"
+}
+```
+
+You can manually edit this file to change the hooks directory path.
+
+## 📦 Package Managers
+
+airyhooks works with all major package managers:
+
+```bash
+# pnpm
+pnpm dlx airyhooks@latest add useDebounce
+
+# npm
+npx airyhooks@latest add useDebounce
+
+# yarn
+yarn dlx airyhooks@latest add useDebounce
+
+# bun
+bunx airyhooks@latest add useDebounce
+```
+
+## 📄 License
+
+MIT
+
+---
+
+**Ready to use?** Run `pnpm dlx airyhooks@latest init` to get started!

package/dist/commands/add.d.ts

@@ -0,0 +1,2 @@
+export declare function add(hookName: string): Promise<void>;
+//# sourceMappingURL=add.d.ts.map

package/dist/commands/init.d.ts

@@ -0,0 +1,2 @@
+export declare function init(): Promise<void>;
+//# sourceMappingURL=init.d.ts.map

package/dist/commands/list.d.ts

@@ -0,0 +1,2 @@
+export declare function list(): void;
+//# sourceMappingURL=list.d.ts.map

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/get-hook-template.d.ts

@@ -0,0 +1,2 @@
+export declare function getHookTemplate(hookName: string): string;
+//# sourceMappingURL=get-hook-template.d.ts.map

package/dist/utils/get-hook-template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-hook-template.d.ts","sourceRoot":"","sources":["../../src/utils/get-hook-template.ts"],"names":[],"mappings":"AAolCA,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAQxD"}
+{"version":3,"file":"get-hook-template.d.ts","sourceRoot":"","sources":["../../src/utils/get-hook-template.ts"],"names":[],"mappings":"AAqkCA,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAQxD"}

package/dist/utils/get-hook-template.js

@@ -130,15 +130,13 @@ export function useClickAway<T extends HTMLElement>(
  *   </>
  * );
  */
-export function useCounter(
-  initialValue = 0,
-): [
+export function useCounter(initialValue = 0): [
   number,
   {
-    increment: (amount?: number) => void;
     decrement: (amount?: number) => void;
+    increment: (amount?: number) => void;
     reset: () => void;
-    set: (value: number | ((prev: number) => number)) => void;
+    set: (value: ((prev: number) => number) | number) => void;
   },
 ] {
   const [count, setCount] = useState<number>(initialValue);
@@ -155,15 +153,15 @@ export function useCounter(
     setCount(initialValue);
   }, [initialValue]);
 
-  const set = useCallback((value: number | ((prev: number) => number)) => {
+  const set = useCallback((value: ((prev: number) => number) | number) => {
     setCount(value);
   }, []);
 
   return [
     count,
     {
-      increment,
       decrement,
+      increment,
       reset,
       set,
     },
@@ -242,7 +240,7 @@ export function useHover<T extends HTMLElement = HTMLElement>(): [
 
   // Attach event listeners to the ref
   const setRef = useCallback(
-    (element: T | null) => {
+    (element: null | T) => {
       if (ref.current) {
         ref.current.removeEventListener("mouseenter", handleMouseEnter);
         ref.current.removeEventListener("mouseleave", handleMouseLeave);
@@ -253,7 +251,7 @@ export function useHover<T extends HTMLElement = HTMLElement>(): [
         element.addEventListener("mouseleave", handleMouseLeave);
       }
 
-      (ref as React.MutableRefObject<T | null>).current = element;
+      ref.current = element;
     },
     [handleMouseEnter, handleMouseLeave],
   );
@@ -262,11 +260,10 @@ export function useHover<T extends HTMLElement = HTMLElement>(): [
   return [
     isHovered,
     {
-      current: ref.current,
       get current() {
         return ref.current;
       },
-      set current(element: T | null) {
+      set current(element: null | T) {
         setRef(element);
       },
     } as React.RefObject<T>,
@@ -477,7 +474,7 @@ export function useMedia(query: string): boolean {
   useEffect(() => {
     // Check if window is defined (SSR safety)
     if (typeof window === "undefined") {
-      return;
+      return undefined;
     }
 
     try {
@@ -492,21 +489,13 @@ export function useMedia(query: string): boolean {
       };
 
       // Modern browsers use addEventListener
-      if (mediaQueryList.addEventListener) {
-        mediaQueryList.addEventListener("change", handleChange);
-        return () => {
-          mediaQueryList.removeEventListener("change", handleChange);
-        };
-      } else {
-        // Fallback for older browsers
-        mediaQueryList.addListener(handleChange);
-        return () => {
-          mediaQueryList.removeListener(handleChange);
-        };
-      }
+      mediaQueryList.addEventListener("change", handleChange);
+      return () => {
+        mediaQueryList.removeEventListener("change", handleChange);
+      };
     } catch (error) {
       console.warn(\`Invalid media query: "\${query}"\`, error);
-      return;
+      return undefined;
     }
   }, [query]);
 
@@ -604,10 +593,9 @@ interface ScrollPosition {
  * return <div ref={ref}>Content</div>;
  */
 export function useScroll(
-  ref?: React.RefObject<HTMLElement>,
+  ref?: React.RefObject<HTMLElement | null>,
 ): ScrollPosition {
   const [scroll, setScroll] = useState<ScrollPosition>({ x: 0, y: 0 });
-  const internalRef = useRef<HTMLElement | null>(null);
 
   const handleScroll = useCallback(() => {
     if (ref?.current) {
@@ -660,16 +648,15 @@ export function useScroll(
  *     style={{ height: "200px", overflow: "auto" }}
  *   >
  *     <p>Scroll position: X: {scroll.x}, Y: {scroll.y}</p>
- *     {/* long content */}
  *   </div>
  * );
  */
 export function useScrollElement<T extends HTMLElement = HTMLElement>(): [
-  React.RefObject<T>,
+  React.RefObject<null | T>,
   ScrollPosition,
 ] {
   const ref = useRef<T>(null);
-  const scroll = useScroll(ref);
+  const scroll = useScroll(ref as React.RefObject<HTMLElement | null>);
 
   return [ref, scroll];
 }
@@ -697,10 +684,9 @@ interface ScrollPosition {
  * return <div ref={ref}>Content</div>;
  */
 export function useScroll(
-  ref?: React.RefObject<HTMLElement>,
+  ref?: React.RefObject<HTMLElement | null>,
 ): ScrollPosition {
   const [scroll, setScroll] = useState<ScrollPosition>({ x: 0, y: 0 });
-  const internalRef = useRef<HTMLElement | null>(null);
 
   const handleScroll = useCallback(() => {
     if (ref?.current) {
@@ -753,16 +739,15 @@ export function useScroll(
  *     style={{ height: "200px", overflow: "auto" }}
  *   >
  *     <p>Scroll position: X: {scroll.x}, Y: {scroll.y}</p>
- *     {/* long content */}
  *   </div>
  * );
  */
 export function useScrollElement<T extends HTMLElement = HTMLElement>(): [
-  React.RefObject<T>,
+  React.RefObject<null | T>,
   ScrollPosition,
 ] {
   const ref = useRef<T>(null);
-  const scroll = useScroll(ref);
+  const scroll = useScroll(ref as React.RefObject<HTMLElement | null>);
 
   return [ref, scroll];
 }

package/dist/utils/get-hook-template.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-hook-template.js","sourceRoot":"","sources":["../../src/utils/get-hook-template.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,+DAA+D;AAC/D,uCAAuC;AAEvC,MAAM,SAAS,GAA2B;IACxC,UAAU,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsEb;IAEC,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCf;IAEC,UAAU,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4Db;IAEC,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCd;IAEC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoEX;IAEC,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Cd;IAEC,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8Cd;IAEC,eAAe,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFlB;IAEC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DX;IAEC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCX;IAEC,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;CAyBd;IAEC,SAAS,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FZ;IAEC,gBAAgB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FnB;IAEC,iBAAiB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqEpB;IAEC,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Cd;IAEC,UAAU,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Cb;IAEC,SAAS,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsEZ;IAEC,UAAU,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCb;IAEC,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ChB;CACA,CAAC;AAEF,MAAM,UAAU,eAAe,CAAC,QAAgB;IAC9C,MAAM,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;IAErC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,MAAM,IAAI,KAAK,CAAC,sBAAsB,QAAQ,aAAa,CAAC,CAAC;IAC/D,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC"}
+{"version":3,"file":"get-hook-template.js","sourceRoot":"","sources":["../../src/utils/get-hook-template.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,+DAA+D;AAC/D,uCAAuC;AAEvC,MAAM,SAAS,GAA2B;IACxC,UAAU,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsEb;IAEC,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCf;IAEC,UAAU,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0Db;IAEC,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCd;IAEC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEX;IAEC,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Cd;IAEC,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8Cd;IAEC,eAAe,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFlB;IAEC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDX;IAEC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCX;IAEC,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;CAyBd;IAEC,SAAS,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FZ;IAEC,gBAAgB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FnB;IAEC,iBAAiB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqEpB;IAEC,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Cd;IAEC,UAAU,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Cb;IAEC,SAAS,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsEZ;IAEC,UAAU,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCb;IAEC,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ChB;CACA,CAAC;AAEF,MAAM,UAAU,eAAe,CAAC,QAAgB;IAC9C,MAAM,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;IAErC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,MAAM,IAAI,KAAK,CAAC,sBAAsB,QAAQ,aAAa,CAAC,CAAC;IAC/D,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC"}

package/package.json

@@ -1,21 +1,23 @@
 {
   "name": "airyhooks",
-  "version": "0.1.0-beta.0",
+  "version": "0.1.0",
   "description": "CLI to add React hooks to your project",
   "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/leifarriens/airyhooks.git",
+    "directory": "packages/cli"
+  },
   "bin": {
     "airyhooks": "./dist/index.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint .",
-    "prepublishOnly": "pnpm build"
-  },
   "dependencies": {
     "commander": "^12.1.0",
     "fs-extra": "^11.2.0",
@@ -23,17 +25,23 @@
     "prompts": "^2.4.2"
   },
   "devDependencies": {
-    "@airyhooks/eslint-config": "workspace:*",
-    "@airyhooks/tsconfig": "workspace:*",
     "@types/fs-extra": "^11.0.4",
     "@types/prompts": "^2.4.9",
     "eslint": "^9.38.0",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "@airyhooks/eslint-config": "0.1.0",
+    "@airyhooks/tsconfig": "0.1.0"
   },
   "keywords": [
     "react",
     "hooks",
     "cli"
   ],
-  "license": "MIT"
-}
+  "license": "MIT",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint ."
+  }
+}