fix: more concrete example without character output spam (#32)

* fix: fix types in demo and provide more concrete example

* update example

Author: airtonix

.mise.toml

@@ -7,3 +7,4 @@ nodejs="20.12.1"
 yarn="1.22.19"
 shellcheck="0.9.0"
 jq="1.7.1"
+usage = "latest"

.mise/tasks/dev

@@ -1,6 +1,20 @@
 #!/usr/bin/env bash
-# mise description="Run dev server with watch mode"
+
+#MISE description="Run dev server with watch mode"
+
+#USAGE flag "-e --example <example>" "Specify example to run" default="main"
+
+# verify that src/demo/${usage_example}.tsx exists
+if [ ! -f ./src/demo/"${usage_example}".tsx ]; then
+    echo "Error: Example '${usage_example}' does not exist in src/demo/"
+
+    # list all files in src/demo
+    echo "Available examples:"
+    ls ./src/demo/*.tsx | xargs -n 1 basename | sed 's/\.tsx$//'
+
+    exit 1
+fi
 
 tsx \
     --watch \
-    ./src/demo/index.tsx
+    ./src/demo/"${usage_example}".tsx

.yarn/install-state.gz

@@ -16,17 +16,21 @@ https://github.com/zenobi-us/ink-mouse/assets/61225/658ad469-6438-4bff-8695-e2fe
 
 ## Usage
 
+> [!NOTE]
+> Without `useInput`, escape sequence characters will being printed to the terminal during mouse movements.
+
 ```tsx
 import React, { useMemo, useRef, useState } from 'react';
 import type { ComponentProps } from 'react';
-import { Box, DOMElement, Text, render } from 'ink';
+import { Box, DOMElement, Text, render, useInput } from 'ink';
 import {
   MouseProvider,
   useOnMouseHover,
   useMousePosition,
-  useElementPosition,
   useOnMouseClick,
+  useMouse,
 } from '@zenobius/ink-mouse';
+import { useMap } from '@react-hookz/web';
 
 function App() {
   return (
@@ -37,20 +41,34 @@ function App() {
 }
 
 function MyComponent() {
-  const mouse = useMousePosition();
+  const mouse = useMouse();
+  const mousePosition = useMousePosition();
+  const map = useMap<'button1', number>() // Example of a simple state map
+
+  /**
+   * Without this, your terminal will fill up with escape codes when you move the mouse.
+   */
+  useInput((input, key) => {
+      if (key.return) {
+          mouse.toggle()
+      }
+  });
 
   return (
-    <Box>
-      <Button label="Button 1" />
-      <Text>
-        {mouse.x}, {mouse.y}
-      </Text>
+    <Box gap={1} flexDirection='column' width={40} height={10} borderStyle="round" padding={1}>
+      <Box gap={1}>
+        <Button label="Button 1" onClick={() => map.set('button1', (map.get('button1') || 0) + 1)} />
+      </Box>
+      <Box flexDirection="column" gap={1}>
+        <Text>{JSON.stringify(mousePosition)}</Text>
+        <Text>Button 1 clicked: {map.get('button1') || 0} times</Text>
+      </Box>
     </Box>
   );
 }
 
 function Button({ label, onClick }: { label: string; onClick?: () => void }) {
-  const ref = useRef<DOMElement>(null);
+  const ref = useRef<DOMElement | null>(null);
 
   const [hovering, setHovering] = useState(false);
   const [clicking, setClicking] = useState(false);
@@ -117,6 +135,10 @@ All project tasks are managed via Mise in `.mise/tasks/`, you can list them via
   - Elements positioned absolutely that occupy same space as other elements will mean they both recieve click and hover events.
   - Ink supports absolute positioning. I think z order is based on order rendered.
   - This means to simluate knowing the z order, we might need to register the order in which elements subscribe to events?
+- [ ] Support elements not rendered from 0,0
+  - Currently the mouse position is tracked from the top left of the terminal (0,0).
+  - If an element is rendered starting at (10,10) for example, the mouse position will not be accurate.
+  - We need to track the offset of the element and adjust the mouse position accordingly.
 - [ ] Add tests.
   - testing a device may be difficult; but the implementation is sufficiently abstracted from the device that it should be possible to mock the device input stream.
     - [x] stdin event stream parsing

README.md

@@ -12,8 +12,9 @@ import {
     useOnMouseClick,
     useElementPosition,
     useElementDimensions,
-    useMouse
-} from '../../src/ink-mouse.ts';
+    useMouse,
+    useTerminalSize
+} from '../ink-mouse.ts';
 
 function App() {
     return (
@@ -22,33 +23,7 @@ function App() {
         </MouseProvider>
     );
 }
-function useTerminalSize() {
-    const out = useStdout();
-    const [size, setSize] = useState(() => {
-        return {
-            width: out.stdout.columns,
-            height: out.stdout.rows,
-        };
-    });
-
-    useEffect(() => {
-        const handleTerminalResize = () => {
-            setSize(() => ({
-                width: out.stdout.columns,
-                height: out.stdout.rows,
-            }));
-        };
 
-        process.stdout.on('resize', handleTerminalResize);
-        process.stdout.on('SIGWINCH', handleTerminalResize);
-        return () => {
-            process.stdout.off('SIGWINCH', handleTerminalResize);
-            process.stdout.off('resize', handleTerminalResize);
-        };
-    }, []);
-
-    return size;
-}
 
 function View() {
     const map = useMap<'button1' | 'button2' | 'button3' | 'listitem1' | 'listitem2', number>()
@@ -111,6 +86,7 @@ function View() {
                             </Box>
                         </Box>
                     </Button>
+
                     <Button onClick={() => {
                         map.set('listitem2', (map.get('listitem2') || 0) + 1)
                     }}>

src/demo/index.tsx renamed to src/demo/main.tsx

@@ -0,0 +1,103 @@
+
+import React, { useMemo, useRef, useState } from 'react';
+import type { ComponentProps } from 'react';
+import { Box, DOMElement, Text, render, useInput } from 'ink';
+import {
+    MouseProvider,
+    useOnMouseHover,
+    useMousePosition,
+    useOnMouseClick,
+    useMouse,
+    Fullscreen,
+} from '../ink-mouse';
+import { useMap } from '@react-hookz/web';
+
+function App() {
+    return (
+        <MouseProvider>
+            <Fullscreen>
+                <MyComponent />
+            </Fullscreen>
+        </MouseProvider>
+    );
+}
+
+function MyComponent() {
+    const mouse = useMouse();
+    const mousePosition = useMousePosition();
+    const map = useMap<'button1', number>() // Example of a simple state map
+
+    /**
+     * Without this, your terminal will fill up with escape codes when you move the mouse.
+     */
+    useInput((input, key) => {
+        if (key.return) {
+            mouse.toggle()
+        }
+    });
+
+    return (
+        <Box gap={1} flexDirection='column' width={30} height={20} padding={5}>
+            <Box>
+                <Button label="Button 1" onClick={() => map.set('button1', (map.get('button1') || 0) + 1)} getProps={(state) => {
+                    if (state === 'clicking') {
+                        return { backgroundColor: 'blue', color: 'white' };
+                    }
+
+                    if (state === 'hovering') {
+                        return { backgroundColor: 'yellow', };
+                    }
+
+                    return {};
+                }} />
+            </Box>
+            <Box flexDirection="column" gap={1}>
+                <Text>{JSON.stringify(mousePosition)}</Text>
+                <Text>Button 1 clicked: {map.get('button1') || 0} times</Text>
+            </Box>
+        </Box>
+    );
+}
+
+function Button(props: ComponentProps<typeof Box> & { label: string; onClick?: () => void, getProps?: (state: 'clicking' | 'hovering' | 'idle') => ComponentProps<typeof Box> }) {
+    const ref = useRef<DOMElement | null>(null);
+
+    const [hovering, setHovering] = useState(false);
+    const [clicking, setClicking] = useState(false);
+
+    useOnMouseClick(ref, (event) => {
+        setClicking(event);
+        if (event && typeof props.onClick === 'function') {
+            props.onClick();
+        }
+    });
+    useOnMouseHover(ref, setHovering);
+
+    const state = useMemo((): 'clicking' | 'hovering' | 'idle' => {
+        if (clicking) {
+            return 'clicking';
+        }
+
+        if (hovering) {
+            return 'hovering';
+        }
+
+        return 'idle';
+    }, [clicking, hovering]);
+
+    return (
+        <Box
+            gap={1}
+            paddingX={1}
+            ref={ref}
+            {...props.getProps?.(state)}
+        >
+            <Text>{props.label}</Text>
+        </Box>
+    );
+}
+
+render(<App />, {
+    stdin: process.stdin,
+    stdout: process.stdout,
+});

src/demo/usage.tsx

@@ -5,4 +5,16 @@ export { useOnMouseHover } from './ink-mouse/useOnMouseHover';
 export { useOnMouseState } from './ink-mouse/useOnMouseState';
 export { useMousePosition } from './ink-mouse/useMousePosition';
 export { useElementPosition, useElementDimensions } from './ink-mouse/useElementPosition';
-export { useMouseAction } from './ink-mouse/useMouseAction';
+export { useMouseAction } from './ink-mouse/useMouseAction';
+export { useTerminalSize } from './ink-mouse/useTerminalSize';
+export { Fullscreen } from './ink-mouse/Fullscreen';
+export type { XtermMouseEvents } from './ink-mouse/createXtermMouseEvents';
+export type {
+  MouseContextShape,
+  MousePosition,
+  MouseClickAction,
+  MouseScrollAction,
+  MouseDragAction,
+  MouseAction,
+} from './ink-mouse/MouseContext';
+export type { XtermMouseState } from './ink-mouse/useXtermMouse';

src/ink-mouse.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { Box } from "ink";
+import type { PropsWithChildren } from "react";
+import { useTerminalSize } from "./useTerminalSize";
+
+function Fullscreen(props: PropsWithChildren<{}>) {
+    const terminal = useTerminalSize();
+    return (
+        <Box flexGrow={1} width={terminal.width} height={terminal.height}>
+            {props.children}
+        </Box>
+    )
+}
+
+export { Fullscreen };

src/ink-mouse/Fullscreen.tsx

@@ -7,7 +7,7 @@ import { useEffect, useState, type RefObject } from 'react';
  * @param ref - The reference to the element.
  * @returns The position of the element.
  */
-function useElementPosition(ref: RefObject<DOMElement>, deps: unknown[] = []) {
+function useElementPosition(ref: RefObject<DOMElement | null>, deps: unknown[] = []) {
   const [position, setPosition] = useState<{
     left: number;
     top: number;
@@ -27,7 +27,7 @@ function useElementPosition(ref: RefObject<DOMElement>, deps: unknown[] = []) {
   return position;
 }
 
-function useElementDimensions(ref: RefObject<DOMElement>, deps: unknown[] = []) {
+function useElementDimensions(ref: RefObject<DOMElement | null>, deps: unknown[] = []) {
     const [dimensions, setDimensions] = useState<{
         width: number;
         height: number;

src/ink-mouse/useElementPosition.ts

@@ -7,7 +7,7 @@ import { isIntersecting } from './isIntersecting';
 import { useElementDimensions, useElementPosition } from './useElementPosition';
 
 function useOnMouseClick(
-  ref: RefObject<DOMElement>,
+  ref: RefObject<DOMElement | null>,
   onChange: (event: boolean) => void,
 ) {
   const mouse = useMouse();