docs: add missing important docs

examples/demo.ts

@@ -211,7 +211,6 @@ new Label({
   rectangle: {
     column: 17,
     row: 21,
-    width: 20,
   },
   theme: { base: tui.style },
   text: "Centered text\nThat automatically adjusts its size\n!@#!\nSo cool\nWOW",
@@ -274,7 +273,6 @@ new Input({
     column: 2,
     row: 10,
     width: 14,
-    height: 1,
   },
   zIndex: 0,
 });
@@ -329,8 +327,8 @@ new Table({
   },
   rectangle: {
     column: 20,
-    height: 8,
     row: 11,
+    height: 8,
   },
   headers: [
     { title: "ID" },

src/canvas/box.ts

@@ -10,6 +10,9 @@ export interface BoxObjectOptions extends DrawObjectOptions {
   filler?: string | Signal<string>;
 }
 
+/**
+ * DrawObject that's responsible for rendering rectangles (boxes).
+ */
 export class BoxObject extends DrawObject<"box"> {
   filler: Signal<string>;
 

src/canvas/canvas.ts

@@ -25,6 +25,11 @@ export type CanvasEventMap = {
   render: EmitterEvent<[]>;
 };
 
+/**
+ * Object, which stores data about currently rendered objects.
+ *
+ * It is responsible for outputting to stdout.
+ */
 export class Canvas extends EventEmitter<CanvasEventMap> {
   stdout: Stdout;
   size: Signal<ConsoleSize>;

src/canvas/draw_object.ts

@@ -20,6 +20,11 @@ export interface DrawObjectOptions {
 }
 
 let id = 0;
+
+/**
+ * Base DrawObject which works as a skeleton for creating
+ * draw objects which actually do something
+ */
 export class DrawObject<Type extends string = string> {
   id: number;
   type: Type;

src/canvas/text.ts

@@ -7,6 +7,11 @@ import { Effect, Signal } from "../signals/mod.ts";
 import { Rectangle } from "../types.ts";
 import { signalify } from "../utils/signals.ts";
 
+/**
+ * Type that describes position and size of TextObject
+ *
+ * When `width` isn't set, it gets automatically calculated depending of given `value` text width
+ */
 export type TextRectangle = { column: number; row: number; width?: number };
 
 export interface TextObjectOptions extends DrawObjectOptions {
@@ -16,6 +21,11 @@ export interface TextObjectOptions extends DrawObjectOptions {
   multiCodePointSupport?: boolean | Signal<boolean>;
 }
 
+/**
+ * DrawObject that's responsible for rendering text.
+ *
+ * Keep in mind its not designed to render mutliline text!
+ */
 export class TextObject extends DrawObject<"text"> {
   text: Signal<string>;
   valueChars: string[] | string;

src/components/box.ts

@@ -2,6 +2,26 @@
 import { BoxObject } from "../canvas/box.ts";
 import { Component } from "../component.ts";
 
+/**
+ * Component for creating simple non-interactive box
+ *
+ * @example
+ * ```ts
+ * new Box({
+ *  parent: tui,
+ *  theme: {
+ *    base: crayon.bgBlue,
+ *  },
+ *  rectangle: {
+ *    column: 1,
+ *    row: 1,
+ *    height: 5,
+ *    width: 10,
+ *  },
+ *  zIndex: 0,
+ * });
+ * ```
+ */
 export class Box extends Component {
   declare drawnObjects: { box: BoxObject };
 

src/components/button.ts

@@ -19,6 +19,29 @@ export interface ButtonOptions extends ComponentOptions {
   };
 }
 
+/**
+ * Component for creating interactive button
+ *
+ * @example
+ * ```ts
+ * new Button({
+ *  parent: tui,
+ *  label: { text: "click\nme" },
+ *  theme: {
+ *    base: crayon.bgGreen,
+ *    focused: crayon.bgLightGreen,
+ *    active: crayon.bgYellow,
+ *  },
+ *  rectangle: {
+ *    column: 1,
+ *    row: 1,
+ *    height: 5,
+ *    width: 10,
+ *  },
+ *  zIndex: 0,
+ * });
+ * ```
+ */
 export class Button extends Box {
   declare drawnObjects: { box: BoxObject };
   declare subComponents: { label?: Label };

src/components/checkbox.ts

@@ -13,6 +13,29 @@ export interface CheckBoxOptions extends ComponentOptions {
   checked: boolean | Signal<boolean>;
 }
 
+/**
+ * Component for creating interactive checkbox
+ *
+ * @example
+ * ```ts
+ * new CheckBox({
+ *  parent: tui,
+ *  checked: false,
+ *  theme: {
+ *    base: crayon.bgGreen,
+ *    focused: crayon.bgLightGreen,
+ *    active: crayon.bgYellow,
+ *  },
+ *  rectangle: {
+ *    column: 1,
+ *    row: 1,
+ *    height: 1,
+ *    width: 1,
+ *  },
+ *  zIndex: 0,
+ * });
+ * ```
+ */
 export class CheckBox extends Button {
   checked: Signal<boolean>;
 

src/components/combobox.ts

@@ -9,6 +9,30 @@ export interface ComboBoxOptions<Items extends string[] = string[]> extends Omit
   selectedItem?: number | undefined | Signal<number | undefined>;
 }
 
+/**
+ * Component for creating interactive combobox
+ *
+ * @example
+ * ```ts
+ * new ComboBox({
+ *  parent: tui,
+ *  items: ["one", "two", "three", "four"],
+ *  placeholder: "choose number",
+ *  theme: {
+ *    base: crayon.bgGreen,
+ *    focused: crayon.bgLightGreen,
+ *    active: crayon.bgYellow,
+ *  },
+ *  rectangle: {
+ *    column: 1,
+ *    row: 1,
+ *    height: 1,
+ *    width: 14,
+ *  },
+ *  zIndex: 0,
+ * });
+ * ```
+ */
 export class ComboBox<Items extends string[] = string[]> extends Button {
   declare subComponents: { [button: number]: Button };
   #subComponentsLength: number;

src/components/frame.ts

@@ -1,5 +1,4 @@
 // Copyright 2023 Im-Beast. All rights reserved. MIT license.
-// deno-lint-ignore-file
 import { Component, ComponentOptions } from "../component.ts";
 
 import { BoxObject } from "../canvas/box.ts";
@@ -35,6 +34,39 @@ export interface FrameOptions extends ComponentOptions {
   charMap: keyof typeof FrameUnicodeCharacters | FrameUnicodeCharactersType;
 }
 
+/**
+ * Component for creating non-interactive frames
+ *
+ * @example
+ * ```ts
+ * new Frame({
+ *  parent: tui,
+ *  charMap: "rounded",
+ *  theme: {
+ *    base: crayon.bgBlack.white,
+ *  },
+ *  rectangle: {
+ *    column: 1,
+ *    row: 1,
+ *    height: 5,
+ *    width: 10,
+ *  },
+ *  zIndex: 0,
+ * });
+ * ```
+ *
+ * If you want frame to follow component just link components rectangle as frame's rectangle.
+ *
+ * @example
+ * ```ts
+ * const box = new Box(...);
+ *
+ * new Frame({
+ *  ...,
+ *  rectangle: box.rectangle,
+ * });
+ * ```
+ */
 export class Frame extends Component {
   declare drawnObjects: {
     top: TextObject;

src/components/input.ts

@@ -1,32 +1,96 @@
 // Copyright 2023 Im-Beast. All rights reserved. MIT license.
 import { Box } from "./box.ts";
+
+import { Theme } from "../theme.ts";
+import { DeepPartial } from "../types.ts";
 import { ComponentOptions } from "../component.ts";
 
+import { Computed, Signal } from "../signals/mod.ts";
+
 import { BoxObject } from "../canvas/box.ts";
 import { TextObject, TextRectangle } from "../canvas/text.ts";
-import { Theme } from "../theme.ts";
-import { DeepPartial } from "../types.ts";
-import { cropToWidth, insertAt } from "../utils/strings.ts";
+
 import { clamp } from "../utils/numbers.ts";
-import { Computed, Signal } from "../signals/mod.ts";
 import { signalify } from "../utils/signals.ts";
+import { cropToWidth, insertAt } from "../utils/strings.ts";
 
 export interface InputTheme extends Theme {
   value: Theme;
   cursor: Theme;
   placeholder: Theme;
 }
 
-export interface InputOptions extends ComponentOptions {
+export interface InputRectangle {
+  column: number;
+  row: number;
+  width: number;
+  height?: 1;
+}
+
+export interface InputOptions extends Omit<ComponentOptions, "rectangle"> {
   text?: string | Signal<string>;
   validator?: RegExp | Signal<RegExp | undefined>;
   password?: boolean | Signal<boolean>;
   placeholder?: string | Signal<string | undefined>;
   multiCodePointSupport?: boolean | Signal<boolean>;
-
+  rectangle: InputRectangle | Signal<InputRectangle>;
   theme: DeepPartial<InputTheme, "cursor">;
 }
 
+/**
+ * Component for creating interactive text input
+ *
+ * This component is 1 character high only!
+ *
+ * If you need multiline input use `TextBox` component.
+ *
+ * @example
+ * ```ts
+ * new Input({
+ *  parent: tui,
+ *  placeholder: "type here",
+ *  theme: {
+ *    base: crayon.bgGreen,
+ *    focused: crayon.bgLightGreen,
+ *    active: crayon.bgYellow,
+ *  },
+ *  rectangle: {
+ *    column: 1,
+ *    row: 1,
+ *    width: 10,
+ *  },
+ *  zIndex: 0,
+ * });
+ * ```
+ *
+ * It supports validating input, e.g. number input would look like this:
+ * @example
+ * ```ts
+ * new Input({
+ *  ...,
+ *  validator: /\d+/,
+ * });
+ * ```
+ *
+ * You can also define whether text should be censored with `*` character by specifying `password` property.
+ * @example
+ * ```ts
+ * new Input({
+ *  ...,
+ *  password: true,
+ * });
+ * ```
+ *
+ * If you need to use emojis or other multi codepoint characters set `multiCodePointSupport` property to true.
+ * @example
+ * ```ts
+ * new Input({
+ *  ...,
+ *  placeholder: "🧡",
+ *  multiCodePointCharacter: true,
+ * });
+ * ```
+ */
 export class Input extends Box {
   declare drawnObjects: {
     box: BoxObject;
@@ -43,7 +107,15 @@ export class Input extends Box {
   placeholder: Signal<string | undefined>;
 
   constructor(options: InputOptions) {
-    super(options);
+    const { rectangle } = options;
+
+    if ("value" in rectangle) {
+      rectangle.value.height = 1;
+    } else {
+      rectangle.height = 1;
+    }
+
+    super(options as ComponentOptions);
 
     this.theme.value ??= this.theme;
     this.theme.placeholder ??= this.theme.value;
@@ -96,7 +168,7 @@ export class Input extends Box {
           character = key;
       }
 
-      if (validator && !validator?.test(character)) return;
+      if (validator && !validator.test(character)) return;
       this.text.value = insertAt(value, cursorPosition, character);
       this.cursorPosition.value = clamp(cursorPosition + 1, 0, this.text.value.length);
     });