tinky-text-input 0.1.0

package/README.ja-JP.md

@@ -0,0 +1,99 @@
+[English](./README.md) | [简体中文](./README.zh-CN.md)
+
+# tinky-text-input
+
+[Tinky](https://github.com/ByteLandTechnology/tinky) 用のテキスト入力コンポーネント。
+
+## インストール
+
+```bash
+npm install tinky-text-input
+```
+
+## 使い方
+
+```tsx
+import React, { useState } from "react";
+import { render, Text } from "tinky";
+import { TextInput } from "tinky-text-input";
+
+function Search() {
+  const [query, setQuery] = useState("");
+
+  return (
+    <Box>
+      <Box marginRight={1}>
+        <Text>検索クエリを入力:</Text>
+      </Box>
+
+      <TextInput value={query} onChange={setQuery} />
+    </Box>
+  );
+}
+
+render(<Search />);
+```
+
+## プロップス (Props)
+
+### placeholder
+
+型: `string`
+
+`value` が空のときに表示するテキスト。
+
+### focus
+
+型: `boolean`\
+デフォルト: `true`
+
+ユーザーの入力をリッスンします。複数の入力コンポーネントが同時に存在し、入力を特定のコンポーネントに「ルーティング」する必要がある場合に便利です。
+
+### mask
+
+型: `string`
+
+すべての文字を置換して値をマスクします。パスワード入力に便利です。
+
+### showCursor
+
+型: `boolean`\
+デフォルト: `true`
+
+カーソルを表示し、矢印キーでテキスト入力内を移動できるようにするかどうか。
+
+### highlightPastedText
+
+型: `boolean`\
+デフォルト: `false`
+
+貼り付けられたテキストをハイライトします。
+
+### onSubmit
+
+型: `(value: string) => void`
+
+`Enter` キーが押されたときに呼び出される関数。最初の引数は入力値です。
+
+### initialValue
+
+型: `string`\
+デフォルト: `""`
+
+初期値（非制御コンポーネントのみ）。
+
+### value
+
+型: `string`
+
+テキスト入力に表示する値（制御コンポーネントのみ）。
+
+### onChange
+
+型: `(value: string) => void`
+
+値が更新されたときに呼び出される関数（制御コンポーネントのみ）。
+
+## ライセンス
+
+MIT

package/README.md

@@ -0,0 +1,99 @@
+[简体中文](./README.zh-CN.md) | [日本語](./README.ja-JP.md)
+
+# tinky-text-input
+
+A text input component for [Tinky](https://github.com/ByteLandTechnology/tinky).
+
+## Install
+
+```bash
+npm install tinky-text-input
+```
+
+## Usage
+
+```tsx
+import React, { useState } from "react";
+import { render, Text } from "tinky";
+import { TextInput } from "tinky-text-input";
+
+function Search() {
+  const [query, setQuery] = useState("");
+
+  return (
+    <Box>
+      <Box marginRight={1}>
+        <Text>Enter your query:</Text>
+      </Box>
+
+      <TextInput value={query} onChange={setQuery} />
+    </Box>
+  );
+}
+
+render(<Search />);
+```
+
+## Props
+
+### placeholder
+
+Type: `string`
+
+Text to display when `value` is empty.
+
+### focus
+
+Type: `boolean`\
+Default: `true`
+
+Listen to user's input. Useful in case there are multiple input components at the same time and input must be "routed" to a specific component.
+
+### mask
+
+Type: `string`
+
+Replace all chars and mask the value. Useful for password inputs.
+
+### showCursor
+
+Type: `boolean`\
+Default: `true`
+
+Whether to show cursor and allow navigation inside text input with arrow keys.
+
+### highlightPastedText
+
+Type: `boolean`\
+Default: `false`
+
+Highlight pasted text.
+
+### onSubmit
+
+Type: `(value: string) => void`
+
+Function to call when `Enter` is pressed, where first argument is a value of the input.
+
+### initialValue
+
+Type: `string`\
+Default: `""`
+
+Initial value (only for uncontrolled component).
+
+### value
+
+Type: `string`
+
+Value to display in a text input (for controlled component).
+
+### onChange
+
+Type: `(value: string) => void`
+
+Function to call when value updates (for controlled component).
+
+## License
+
+MIT

package/README.zh-CN.md

@@ -0,0 +1,99 @@
+[English](./README.md) | [日本語](./README.ja-JP.md)
+
+# tinky-text-input
+
+[Tinky](https://github.com/ByteLandTechnology/tinky) 的文本输入组件。
+
+## 安装
+
+```bash
+npm install tinky-text-input
+```
+
+## 使用方法
+
+```tsx
+import React, { useState } from "react";
+import { render, Text } from "tinky";
+import { TextInput } from "tinky-text-input";
+
+function Search() {
+  const [query, setQuery] = useState("");
+
+  return (
+    <Box>
+      <Box marginRight={1}>
+        <Text>请输入查询内容：</Text>
+      </Box>
+
+      <TextInput value={query} onChange={setQuery} />
+    </Box>
+  );
+}
+
+render(<Search />);
+```
+
+## 属性 (Props)
+
+### placeholder
+
+类型: `string`
+
+当 `value` 为空时显示的文本。
+
+### focus
+
+类型: `boolean`\
+默认值: `true`
+
+监听用户输入。如果有多个输入组件同时存在，并且需要将输入“路由”到特定组件，此属性非常有用。
+
+### mask
+
+类型: `string`
+
+替换所有字符并屏蔽值。适用于密码输入。
+
+### showCursor
+
+类型: `boolean`\
+默认值: `true`
+
+是否显示光标并允许使用方向键在文本输入框内导航。
+
+### highlightPastedText
+
+类型: `boolean`\
+默认值: `false`
+
+高亮显示粘贴的文本。
+
+### onSubmit
+
+类型: `(value: string) => void`
+
+当按下 `Enter` 键时调用的函数，第一个参数是输入的值。
+
+### initialValue
+
+类型: `string`\
+默认值: `""`
+
+初始值（仅适用于非受控组件）。
+
+### value
+
+类型: `string`
+
+文本输入框中显示的值（适用于受控组件）。
+
+### onChange
+
+类型: `(value: string) => void`
+
+当值更新时调用的函数（适用于受控组件）。
+
+## 许可证
+
+MIT

package/lib/components/ControlledTextInput.d.ts

@@ -0,0 +1,21 @@
+import type { TextInputProps } from "./TextInput.js";
+/**
+ * Props for the {@link ControlledTextInput} component.
+ */
+export interface ControlledTextInputProps extends TextInputProps {
+    /**
+     * Value to display in a text input.
+     */
+    readonly value: string;
+    /**
+     * Function to call when value updates.
+     */
+    readonly onChange: (value: string) => void;
+}
+/**
+ * A controlled text input component that renders a text input field.
+ *
+ * @param props - The properties for the component.
+ * @returns The rendered text input component.
+ */
+export declare function ControlledTextInput({ value: originalValue, placeholder, focus, mask, highlightPastedText, showCursor, onChange, onSubmit, }: ControlledTextInputProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/ControlledTextInput.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Text } from "tinky";
+import { useKeypress } from "tinky-keypress";
+import ansis from "ansis";
+/**
+ * A controlled text input component that renders a text input field.
+ *
+ * @param props - The properties for the component.
+ * @returns The rendered text input component.
+ */
+export function ControlledTextInput({ value: originalValue, placeholder = "", focus = true, mask, highlightPastedText = false, showCursor = true, onChange, onSubmit, }) {
+    const [state, setState] = useState({
+        cursorOffset: (originalValue || "").length,
+        cursorWidth: 0,
+    });
+    const { cursorOffset, cursorWidth } = state;
+    useEffect(() => {
+        setState((previousState) => {
+            if (!focus || !showCursor) {
+                return previousState;
+            }
+            const newValue = originalValue || "";
+            if (previousState.cursorOffset > newValue.length - 1) {
+                return {
+                    cursorOffset: newValue.length,
+                    cursorWidth: 0,
+                };
+            }
+            return previousState;
+        });
+    }, [originalValue, focus, showCursor]);
+    const cursorActualWidth = highlightPastedText ? cursorWidth : 0;
+    const value = mask ? mask.repeat(originalValue.length) : originalValue;
+    let renderedValue = value;
+    let renderedPlaceholder = placeholder ? ansis.gray(placeholder) : undefined;
+    // Fake mouse cursor, because it's too inconvenient to deal with actual cursor and ansi escapes
+    if (showCursor && focus) {
+        renderedPlaceholder =
+            placeholder.length > 0
+                ? ansis.inverse(placeholder[0]) + ansis.gray(placeholder.slice(1))
+                : ansis.inverse(" ");
+        renderedValue = value.length > 0 ? "" : ansis.inverse(" ");
+        let i = 0;
+        for (const char of value) {
+            renderedValue +=
+                i >= cursorOffset - cursorActualWidth && i <= cursorOffset
+                    ? ansis.inverse(char)
+                    : char;
+            i++;
+        }
+        if (value.length > 0 && cursorOffset === value.length) {
+            renderedValue += ansis.inverse(" ");
+        }
+    }
+    useKeypress((key) => {
+        if (key.name === "up" ||
+            key.name === "down" ||
+            (key.ctrl && key.name === "c") ||
+            key.name === "tab" ||
+            (key.shift && key.name === "tab")) {
+            return;
+        }
+        if (key.name === "return" || key.name === "enter") {
+            if (onSubmit) {
+                onSubmit(originalValue);
+            }
+            return;
+        }
+        let nextCursorOffset = cursorOffset;
+        let nextValue = originalValue;
+        let nextCursorWidth = 0;
+        const input = key.sequence;
+        if (key.name === "left") {
+            if (showCursor) {
+                nextCursorOffset--;
+            }
+        }
+        else if (key.name === "right") {
+            if (showCursor) {
+                nextCursorOffset++;
+            }
+        }
+        else if (key.name === "backspace" || key.name === "delete") {
+            if (cursorOffset > 0) {
+                nextValue =
+                    originalValue.slice(0, cursorOffset - 1) +
+                        originalValue.slice(cursorOffset, originalValue.length);
+                nextCursorOffset--;
+            }
+        }
+        else {
+            if (key.insertable && !key.ctrl && !key.meta && key.name !== "escape") {
+                nextValue =
+                    originalValue.slice(0, cursorOffset) +
+                        input +
+                        originalValue.slice(cursorOffset, originalValue.length);
+                nextCursorOffset += input.length;
+                if (input.length > 1) {
+                    nextCursorWidth = input.length;
+                }
+            }
+        }
+        if (cursorOffset < 0) {
+            nextCursorOffset = 0;
+        }
+        if (cursorOffset > originalValue.length) {
+            nextCursorOffset = originalValue.length;
+        }
+        setState({
+            cursorOffset: nextCursorOffset,
+            cursorWidth: nextCursorWidth,
+        });
+        if (nextValue !== originalValue) {
+            onChange(nextValue);
+        }
+    }, { isActive: focus });
+    return (_jsx(Text, { children: placeholder
+            ? value.length > 0
+                ? renderedValue
+                : renderedPlaceholder
+            : renderedValue }));
+}

package/lib/components/TextInput.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Props for the {@link TextInput} component.
+ */
+export interface TextInputProps {
+    /**
+     * Text to display when `value` is empty.
+     */
+    readonly placeholder?: string;
+    /**
+     * Listen to user's input. Useful in case there are multiple input components
+     * at the same time and input must be "routed" to a specific component.
+     *
+     * @default true
+     */
+    readonly focus?: boolean;
+    /**
+     * Replace all chars and mask the value. Useful for password inputs.
+     */
+    readonly mask?: string;
+    /**
+     * Whether to show cursor and allow navigation inside text input with arrow keys.
+     *
+     * @default true
+     */
+    readonly showCursor?: boolean;
+    /**
+     * Highlight pasted text.
+     *
+     * @default false
+     */
+    readonly highlightPastedText?: boolean;
+    /**
+     * Function to call when `Enter` is pressed, where first argument is a value of the input.
+     */
+    readonly onSubmit?: (value: string) => void;
+    /**
+     * Initial value.
+     *
+     * @default ""
+     */
+    readonly initialValue?: string;
+}
+/**
+ * An uncontrolled text input component that manages its own state.
+ *
+ * @param props - The properties for the component.
+ * @returns The rendered text input component.
+ */
+export declare function TextInput({ initialValue, ...props }: TextInputProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/TextInput.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { ControlledTextInput } from "./ControlledTextInput.js";
+/**
+ * An uncontrolled text input component that manages its own state.
+ *
+ * @param props - The properties for the component.
+ * @returns The rendered text input component.
+ */
+export function TextInput({ initialValue = "", ...props }) {
+    const [value, setValue] = useState(initialValue);
+    return _jsx(ControlledTextInput, { ...props, value: value, onChange: setValue });
+}

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export { TextInput, type TextInputProps } from "./components/TextInput.js";
+export { ControlledTextInput, type ControlledTextInputProps, } from "./components/ControlledTextInput.js";

package/lib/index.js

@@ -0,0 +1,2 @@
+export { TextInput } from "./components/TextInput.js";
+export { ControlledTextInput, } from "./components/ControlledTextInput.js";

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "tinky-text-input",
+  "version": "0.1.0",
+  "description": "A text input component for Tinky",
+  "keywords": [
+    "tinky",
+    "text-input",
+    "component",
+    "cli",
+    "react"
+  ],
+  "homepage": "https://github.com/ByteLandTechnology/tinky-text-input#readme",
+  "bugs": {
+    "url": "https://github.com/ByteLandTechnology/tinky-text-input/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ByteLandTechnology/tinky-text-input.git"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "ByteLand Technology Limited"
+  },
+  "type": "module",
+  "main": "./lib/index.js",
+  "scripts": {
+    "test": "tsc",
+    "build": "tsc && npm run docs",
+    "lint": "eslint src tests",
+    "prepublish": "npm run build",
+    "prepare": "husky",
+    "docs": "typedoc --plugin typedoc-plugin-markdown --disableSources --out docs/api && prettier --write docs/api"
+  },
+  "files": [
+    "./bin/*",
+    "./lib/*"
+  ],
+  "typings": "./lib/index.d.ts",
+  "peerDependencies": {
+    "tinky-keypress": ">=1.2.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^20.3.0",
+    "@commitlint/config-conventional": "^20.3.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^12.0.2",
+    "@semantic-release/npm": "^13.1.3",
+    "@semantic-release/release-notes-generator": "^14.1.0",
+    "conventional-changelog-conventionalcommits": "^9.1.0",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react": "^7.37.5",
+    "husky": "^9.1.7",
+    "jiti": "^2.6.1",
+    "lint-staged": "^16.2.7",
+    "prettier": "^3.7.4",
+    "semantic-release": "^25.0.2",
+    "typedoc": "^0.28.16",
+    "typedoc-plugin-markdown": "^4.9.0",
+    "typescript-eslint": "^8.53.0"
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "lint-staged": {
+    "*.{js,ts,jsx,tsx,json,md,yaml,yml}": "prettier --write"
+  }
+}