Merge remote-tracking branch 'OFW/dev' into dev

applications/system/js_app/packages/fz-sdk/gui/button_menu.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Displays a list of buttons.
+ * 
+ * <img src="../images/button_menu.png" width="200" alt="Sample screenshot of the view" />
+ * 
+ * ```js
+ * let eventLoop = require("event_loop");
+ * let gui = require("gui");
+ * let buttonMenuView = require("gui/button_menu");
+ * ```
+ * 
+ * This module depends on the `gui` module, which in turn depends on the
+ * `event_loop` module, so they _must_ be imported in this order. It is also
+ * recommended to conceptualize these modules first before using this one.
+ * 
+ * # Example
+ * For an example refer to the `gui.js` example script.
+ * 
+ * # View props
+ *   - `header`: Textual header above the buttons
+ * 
+ * @version Added in JS SDK 0.4
+ * @module
+ */
+
+import type { View, ViewFactory, InputType } from ".";
+import type { Contract } from "../event_loop";
+
+type Props = {
+    header: string;
+};
+
+type Child = { type: "common" | "control", label: string };
+
+declare class ButtonMenu extends View<Props, Child> {
+    input: Contract<{ index: number, type: InputType }>;
+}
+declare class ButtonMenuFactory extends ViewFactory<Props, Child, ButtonMenu> { }
+declare const factory: ButtonMenuFactory;
+export = factory;

applications/system/js_app/packages/fz-sdk/gui/button_panel.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Displays a button matrix.
+ * 
+ * <img src="../images/button_panel.png" width="200" alt="Sample screenshot of the view" />
+ * 
+ * ```js
+ * let eventLoop = require("event_loop");
+ * let gui = require("gui");
+ * let buttonPanelView = require("gui/button_panel");
+ * ```
+ * 
+ * This module depends on the `gui` module, which in turn depends on the
+ * `event_loop` module, so they _must_ be imported in this order. It is also
+ * recommended to conceptualize these modules first before using this one.
+ * 
+ * # Example
+ * For an example refer to the `gui.js` example script.
+ * 
+ * # View props
+ *   - `matrixSizeX`: Width of imaginary grid used for navigation
+ *   - `matrixSizeY`: Height of imaginary grid used for navigation
+ * 
+ * @version Added in JS SDK 0.4
+ * @module
+ */
+
+import type { View, ViewFactory, Font, InputType } from ".";
+import type { Contract } from "../event_loop";
+import { IconData } from "./icon";
+
+type Props = {
+    matrixSizeX: number,
+    matrixSizeY: number,
+};
+
+type Position = { x: number, y: number };
+
+type ButtonChild = { type: "button", matrixX: number, matrixY: number, icon: IconData, iconSelected: IconData } & Position;
+type LabelChild = { type: "label", font: Font, text: string } & Position;
+type IconChild = { type: "icon", icon: IconData };
+
+type Child = ButtonChild | LabelChild | IconChild;
+
+declare class ButtonPanel extends View<Props, Child> {
+    input: Contract<{ index: number, type: InputType }>;
+}
+declare class ButtonPanelFactory extends ViewFactory<Props, Child, ButtonPanel> { }
+declare const factory: ButtonPanelFactory;
+export = factory;

applications/system/js_app/packages/fz-sdk/gui/icon.d.ts

@@ -1,4 +1,7 @@
-export type BuiltinIcon = "DolphinWait_59x54" | "js_script_10px";
+export type BuiltinIcon = "DolphinWait_59x54" | "js_script_10px"
+    | "off_19x20" | "off_hover_19x20"
+    | "power_19x20" | "power_hover_19x20"
+    | "Settings_14";
 
 export type IconData = symbol & { "__tag__": "icon" };
 // introducing a nominal type in a hacky way; the `__tag__` property doesn't really exist.

applications/system/js_app/packages/fz-sdk/gui/index.d.ts

@@ -24,24 +24,23 @@
  * ### View
  * In Flipper's terminology, a "View" is a fullscreen design element that
  * assumes control over the entire viewport and all input events. Different
- * types of views are available (not all of which are unfortunately currently
- * implemented in JS):
+ * types of views are available:
  * | View                 | Has JS adapter?       |
  * |----------------------|-----------------------|
- * | `button_menu`        | ❌                    |
- * | `button_panel`       | ❌                    |
+ * | `button_menu`        | ✅                    |
+ * | `button_panel`       | ✅                    |
  * | `byte_input`         | ✅                    |
  * | `dialog_ex`          | ✅ (as `dialog`)      |
  * | `empty_screen`       | ✅                    |
  * | `file_browser`       | ✅ (as `file_picker`) |
  * | `loading`            | ✅                    |
- * | `menu`               | ❌                    |
- * | `number_input`       | ❌                    |
- * | `popup`              | ❌                    |
+ * | `menu`               | ✅                    |
+ * | `number_input`       | ✅                    |
+ * | `popup`              | ✅                    |
  * | `submenu`            | ✅                    |
  * | `text_box`           | ✅                    |
  * | `text_input`         | ✅                    |
- * | `variable_item_list` | ❌                    |
+ * | `variable_item_list` | ✅ (as `vi_list`)     |
  * | `widget`             | ✅                    |
  * 
  * In JS, each view has its own set of properties (or just "props"). The
@@ -119,6 +118,9 @@
 
 import type { Contract } from "../event_loop";
 
+export type Font = "primary" | "secondary" | "keyboard" | "big_numbers";
+export type InputType = "press" | "release" | "short" | "long" | "repeat";
+
 type Properties = { [K: string]: any };
 
 export declare class View<Props extends Properties, Child> {

applications/system/js_app/packages/fz-sdk/gui/menu.d.ts

@@ -0,0 +1,38 @@
+/**
+ * A list of selectable entries consisting of an icon and a label.
+ * 
+ * <img src="../images/menu.png" width="200" alt="Sample screenshot of the view" />
+ * 
+ * ```js
+ * let eventLoop = require("event_loop");
+ * let gui = require("gui");
+ * let submenuView = require("gui/menu");
+ * ```
+ * 
+ * This module depends on the `gui` module, which in turn depends on the
+ * `event_loop` module, so they _must_ be imported in this order. It is also
+ * recommended to conceptualize these modules first before using this one.
+ * 
+ * # Example
+ * For an example refer to the GUI example.
+ * 
+ * # View props
+ * This view doesn't have any props.
+ * 
+ * @version Added in JS SDK 0.1
+ * @version API changed in JS SDK 0.4
+ * @module
+ */
+
+import type { View, ViewFactory } from ".";
+import type { Contract } from "../event_loop";
+import type { IconData } from "./icon";
+
+type Props = {};
+type Child = { icon: IconData, label: string };
+declare class Submenu extends View<Props, Child> {
+    chosen: Contract<number>;
+}
+declare class SubmenuFactory extends ViewFactory<Props, Child, Submenu> { }
+declare const factory: SubmenuFactory;
+export = factory;

applications/system/js_app/packages/fz-sdk/gui/number_input.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Displays a number input keyboard.
+ * 
+ * <img src="../images/number_input.png" width="200" alt="Sample screenshot of the view" />
+ * 
+ * ```js
+ * let eventLoop = require("event_loop");
+ * let gui = require("gui");
+ * let numberInputView = require("gui/number_input");
+ * ```
+ * 
+ * This module depends on the `gui` module, which in turn depends on the
+ * `event_loop` module, so they _must_ be imported in this order. It is also
+ * recommended to conceptualize these modules first before using this one.
+ * 
+ * # Example
+ * For an example refer to the `gui.js` example script.
+ * 
+ * # View props
+ *   - `header`: Text displayed at the top of the screen
+ *   - `minValue`: Minimum allowed numeric value
+ *   - `maxValue`: Maximum allowed numeric value
+ *   - `defaultValue`: Default numeric value
+ * 
+ * @version Added in JS SDK 0.4
+ * @module
+ */
+
+import type { View, ViewFactory } from ".";
+import type { Contract } from "../event_loop";
+
+type Props = {
+    header: string,
+    minValue: number,
+    maxValue: number,
+    defaultValue: number,
+}
+type Child = never;
+declare class NumberInput extends View<Props, Child> {
+    input: Contract<number>;
+}
+declare class NumberInputFactory extends ViewFactory<Props, Child, NumberInput> { }
+declare const factory: NumberInputFactory;
+export = factory;

applications/system/js_app/packages/fz-sdk/gui/popup.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Like a Dialog, but with a built-in timer.
+ * 
+ * <img src="../images/popup.png" width="200" alt="Sample screenshot of the view" />
+ * 
+ * ```js
+ * let eventLoop = require("event_loop");
+ * let gui = require("gui");
+ * let popupView = require("gui/popup");
+ * ```
+ * 
+ * This module depends on the `gui` module, which in turn depends on the
+ * `event_loop` module, so they _must_ be imported in this order. It is also
+ * recommended to conceptualize these modules first before using this one.
+ * 
+ * # Example
+ * For an example refer to the `gui.js` example script.
+ * 
+ * # View props
+ *   - `header`: Text displayed in bold at the top of the screen
+ *   - `text`: Text displayed in the middle of the string
+ *   - `timeout`: Timeout, in milliseconds, after which the event will fire. The
+ *     timer starts counting down when this property is assigned.
+ * 
+ * @version Added in JS SDK 0.1
+ * @module
+ */
+
+import type { View, ViewFactory } from ".";
+import type { Contract } from "../event_loop";
+
+type Props = {
+    header: string,
+    text: string,
+    timeout: number,
+}
+type Child = never;
+declare class Popup extends View<Props, Child> {
+    timeout: Contract;
+}
+declare class PopupFactory extends ViewFactory<Props, Child, Popup> { }
+declare const factory: PopupFactory;
+export = factory;

applications/system/js_app/packages/fz-sdk/gui/submenu.d.ts

@@ -18,9 +18,9 @@
  * 
  * # View props
  *   - `header`: Text displayed at the top of the screen in bold
- *   - `items`: Array of selectable textual items
  * 
  * @version Added in JS SDK 0.1
+ * @version API changed in JS SDK 0.4
  * @module
  */
 
@@ -29,9 +29,8 @@ import type { Contract } from "../event_loop";
 
 type Props = {
     header: string,
-    items: string[],
 };
-type Child = never;
+type Child = string;
 declare class Submenu extends View<Props, Child> {
     chosen: Contract<number>;
 }

applications/system/js_app/packages/fz-sdk/gui/vi_list.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Displays a list of settings-like variable items.
+ * 
+ * <img src="../images/vi_list.png" width="200" alt="Sample screenshot of the view" />
+ * 
+ * ```js
+ * let eventLoop = require("event_loop");
+ * let gui = require("gui");
+ * let viListView = require("gui/vi_list");
+ * ```
+ * 
+ * This module depends on the `gui` module, which in turn depends on the
+ * `event_loop` module, so they _must_ be imported in this order. It is also
+ * recommended to conceptualize these modules first before using this one.
+ * 
+ * # Example
+ * For an example refer to the `gui.js` example script.
+ * 
+ * # View props
+ * This view doesn't have any props
+ * 
+ * @version Added in JS SDK 0.4
+ * @module
+ */
+
+import type { View, ViewFactory } from ".";
+import type { Contract } from "../event_loop";
+
+type Props = {};
+
+type Child = { label: string, variants: string[] };
+
+declare class ViList extends View<Props, Child> {
+    valueUpdate: Contract<{ itemIndex: number, valueIndex: number }>;
+}
+declare class ViListFactory extends ViewFactory<Props, Child, ViList> { }
+declare const factory: ViListFactory;
+export = factory;

applications/system/js_app/packages/fz-sdk/package.json

@@ -29,4 +29,4 @@
     "prompts": "^2.4.2",
     "serialport": "^12.0.0"
   }
-}
+}