@nan0web/ui 1.0.0 → 1.0.1

package/stories/App/RenderOptions.js

@@ -1,14 +0,0 @@
-import RenderOptions from "../../src/View/RenderOptions.js"
-
-class AppRenderOptions extends RenderOptions {
-	static DEFAULTS = {
-		...RenderOptions.DEFAULTS,
-		resizeToView: true,
-	}
-	static from(props = {}) {
-		if (props instanceof AppRenderOptions) return props
-		return new this(props)
-	}
-}
-
-export default AppRenderOptions

package/stories/nodejs/interface.test.js

@@ -1,27 +0,0 @@
-/**
- * @todo write tests for the interfaces StdIn, StdOut, Locale, Frame, FrameProps and View in NodeJS with vitest.
- * Follow the actor / scenario model.
- * Basic interfaces must include:
- * - read text from stdin
- * - write text to stdout
- * - read an option from a selectbox with the bordered frame
- * - write result to stdout
- *
- * Frames and Views must follow the blessed interface as for flexibility.
- */
-import { describe, it, expect } from "vitest"
-
-describe("Interface", () => {
-	it("should read text from stdin", () => {
-		expect("").toBe("")
-	})
-	it("should write text to stdout", () => {
-		expect("").toBe("")
-	})
-	it("should read an option from a selectbox with the bordered frame", () => {
-		expect("").toBe("")
-	})
-	it("should write result to stdout with the bordered frame", () => {
-		expect("").toBe("")
-	})
-})

package/system.md

@@ -1,187 +0,0 @@
-# System intructions `system.md` / NaN•Web UI
-
-Vanilla javascript UI interfaces with no platform dependencies.  
-Must work for nodejs, browser and other compilers that supports ESM.
-
-## Requirements
-
-### 1. Javascript
-
-1.1. Pure vanilla js only.  
-1.2. Platform abstract.  
-1.3. Minimum dependency as possible.  
-1.4. Classes  
-1.4.1. Order of the class elements:
-- static properties
-- properties
-- constructor
-- getters
-- setters
-- base functions
-- async functions
-- static base functions
-- static async functions
-
-1.5. Views, every must:  
-1.5.1. Have a separate file and test file `View/AppView.js` and `View/AppView.test.js`.  
-1.6. Components, every must:
-1.6.1. Have a separate directory in `View/Component/*` or registered from any other directory with files:
-- `Component.js`
-- `Component.test.js`
-- `ComponentInput.js`
-- `index.js`
-  ```js
-  export default Component
-  export { ComponentInput }
-  ```
-
-### 2. Tests
-
-Every model, component, class must have their own tests file to cover their functionality in isolated environment.
-
-#### node:test
-
-For the core (base), cgi and cli interfaces, and web interfaces non `.jsx` components `node:test` with `node:assert/strict` must be used for tests.
-
-#### vitest
-
-For `React` apps and any that uses `.jsx` components `vitest` must be used for tests.
-
-## Interfaces
-
-1. `base` - Самий базовий інтерфейс, який має описувати всі доступні для інтерфейсів функції + тести `node:test`.
-1. `cli` - Console line application на основі команд через `argv[]` і вивід на екран за допомогою `@nan0web/log`.
-1. `api` - API який працює постійно для надання даних для `web`, `mobile` та інших інтерфейсів.
-1. `cgi` - Console graphic interface з віконцями і кнопками за допомогою `blessed`.
-1. `web` - Веб інтерфейс з `Web.customElements`, `Lit`, або `React`.
-1. `mobile` - Мобільний інтерфейс з `Ionic` або `Swift` і `Java`.
-1. `desktop` - Веб інтерфейс у обкладинці `Electron` або `Tauri`.
-1. `chat` - Чат інтерфейс `@nan0web/chat-ui`.
-1. `audio` - Мовний (голосовий) інтерфейс `@nan0web/audio-ui`.
-
-Базовий інтерфейс описує всі взаємодії і можливі функції.
-Всі інші інтерфейси мають розширювати базовий.
-
-Інтерфейси клієнти, у випадку коли є окремий `api` сервер, можуть розширювати свій `ClientUI`.
-
-Приклад успадкування:
-```js
-import UI from "@nan0web/ui"
-
-class BaseUI extends UI {}
-
-class CliUI extends BaseUI {}
-
-class APIUI extends CliUI {}
-
-class CgiUI extends CliUI {}
-
-class WebUI extends BaseUI {}
-
-class MobileUI extends BaseUI {}
-
-class DesktopUI extends WebUI {}
-
-class ChatUI extends BaseUI {}
-
-class AudioUI extends ChatUI {}
-```
-
-### Views
-
-#### Widgets
-
-Widget is a control alement including a view with and ask() ability to input data.
-
-#### Output
-
-Output data is passed to the view but also in specific format:
-```js
-function UserDocumentsView(input = {}) {
-  input = UserDocumentsInput.from(input)
-  if (empty(input)) {
-    throw new Error("Input data required in a format off UserDocumentsInput")
-  }
-
-  return Frame.from([
-    ['Documents'],
-    ...input.documents.map(d => d.name),
-  ])
-}
-```
-
-In this scenario I can easily define Input classes for the every View and Widget to be sure all the input pass, and easily require the proper input from the app before running a job.
-
-
-#### Input
-
-When application needs any data it requires.
-
-The input might be a command line `node start.js -user.name root` or, if not provided, user input through the provided infterface (any of CLI, API, voice, mobile, table, desktop, web, etc.)
-
-```js
-class App {
-  async requireUser() {
-    const user = await this.view.ask("User")()
-    if (user instanceof User) return user
-    throw new TypeError("User is required to continue")
-  }
-  async run() {
-    const user = await this.requireUser()
-    this.view.render("Welcome")({ user })
-  }
-}
-```
-
-## Cross platform
-
-Very important that I can extend basic UI with different apps, for instance:
-```jsx
-// apps/web/src/components/User/DocumentsView.jsx
-import React from "react"
-/** the very basic component **/
-import UserDocumentsInput from "src/components/User/DocumentsInput.js"
-
-function UserDocumentsView(input = {}) {
-  input = UserDocumentsInput.from(input)
-  if (empty(input)) {
-    throw new Error("Input data required in a format off UserDocumentsInput")
-  }
-
-  return <div>
-    <h3>Documents</h3>
-    <ul>
-      {input.documents.map((d, i) => <li key={i}>{d.name}</li>)}
-    </ul>
-  </div>
-}
-```
-
-### Apps locations
-
-#### Core application
-
-Core application s with the minimum stdin, stdout
-- `src/*`
-- `src/App.js`
-- `bin/start.js`
-- `package.json`
-
-Core application might have own resository, for instance `@nan0web/app`.
-
-#### CLI application
-
-CLI application can utilize `blessed` or other CLI library for rich UI experience, compared to Core.
-
-- `apps/cli/src/*`
-- `apps/cli/bin/start.js`
-- `apps/cli/package.json`
-
-#### Web application
-
-Web applications can utilize `react` or `lit` or other Web UI library for rich UI experience.
-Most desired is `lit` to avoid using typescript or jsx.
-
-- `apps/web/src/*`
-- `apps/web/bin/start.js`
-- `apps/web/package.json`

package/system1.md

@@ -1,137 +0,0 @@
-# System Instructions for NaN•UI
-
-## Overview
-NaN•UI is a Vanilla JavaScript UI framework designed to be platform-agnostic, working seamlessly in Node.js, browsers, and other environments that support ESM. The framework emphasizes minimal dependencies, clean class structures, and comprehensive testing with Vitest.
-
-## Requirements
-
-### JavaScript
-1. **Pure Vanilla JS**: Only use vanilla JavaScript without platform-specific dependencies.
-2. **Platform Abstraction**: Ensure the code works across different platforms.
-3. **Minimal Dependencies**: Keep dependencies to a minimum.
-4. **Class Structure**:
-   - **Order of Class Elements**:
-     - Static properties
-     - Properties
-     - Constructor
-     - Getters
-     - Setters
-     - Base functions
-     - Async functions
-     - Static base functions
-     - Static async functions
-5. **Views**:
-   - Each view must have a separate file and test file (`View/AppView.js` and `View/AppView.test.js`).
-6. **Components**:
-   - Each component must have a separate directory in `View/Component/*` or be registered from another directory with the following files:
-     - `Component.js`
-     - `Component.test.js`
-     - `ComponentInput.js`
-     - `index.js` (exporting the component and its input class).
-
-### Vitest
-- All tests must run with Vitest.
-- Every model, component, and class must have its own test file to cover functionality in an isolated environment.
-
-## Interfaces
-
-### Views
-- **Widgets**: Control elements that include a view and the ability to input data.
-- **Output**: Data passed to the view in a specific format.
-- **Input**: Data required by the application, which can be provided via command line or user input.
-
-### Cross-Platform
-- Extend basic UI with different apps (e.g., CLI, web).
-- **Core Application**: Minimal stdin/stdout implementation.
-- **CLI Application**: Utilizes libraries like `blessed` for rich CLI UI.
-- **Web Application**: Utilizes libraries like `lit` for rich web UI.
-
-## Code Structure
-
-### Core Application
-- **`src/App/Command/Args.js`**: Handles command arguments.
-- **`src/App/Command/Message.js`**: Parses and processes command messages.
-- **`src/App/Command/Options.js`**: Manages command options.
-- **`src/App/Core/CCoreApp.js`**: Abstract base class for all apps.
-- **`src/App/Core/UI.js`**: Abstract UI class to connect apps and widgets.
-- **`src/App/Core/Widget.js`**: Abstract widget class with input/output capabilities.
-
-### User Application
-- **`src/App/User/UserApp.js`**: User-specific application logic.
-- **`src/App/User/UserUI.js`**: Connects UserApp and View.
-
-### Components
-- **`src/Component/Process/Process.js`**: Process component with input handling.
-- **`src/Component/Welcome/Welcome.js`**: Welcome component with user input handling.
-
-### Views
-- **`src/View/View.js`**: Main view class with rendering and input/output capabilities.
-
-### Models
-- **`src/Model/User/User.js`**: User model class.
-
-### Utilities
-- **`src/Frame/Frame.js`**: Handles frame rendering and formatting.
-- **`src/InputMessage.js`**: Manages input messages.
-- **`src/Locale.js`**: Handles localization and formatting.
-- **`src/StdIn.js`**: Manages standard input.
-- **`src/StdOut.js`**: Manages standard output.
-
-## Testing
-- **Vitest**: All tests are written using Vitest.
-- **Test Files**: Each component, model, and class has a corresponding test file (e.g., `Component.test.js`, `Model.test.js`).
-
-## Apps
-- **CLI App**: Located in `apps/cli/src/`, handles command-line interface.
-- **Web App**: Located in `apps/web/src/`, handles web interface.
-
-## Example Usage
-
-### CLI App
-```javascript
-import process from "node:process"
-import { App, View, StdIn, StdOut, Frame, Component } from "@nan0web/ui"
-
-async function main(argv) {
-    const app = new App.User.App({ argv })
-    const view = new View({
-        stdin: new StdIn({ processor: process.stdin }),
-        stdout: new StdOut({ processor: process.stdout }),
-        renderMethod: Frame.RenderMethod.VISIBLE,
-    })
-    view.register(Component.Welcome)
-
-    const ui = new App.User.UI(app, view)
-    await ui.process(argv)
-}
-
-main(process.argv.slice(2)).then(() => {
-    process.exit(0)
-}).catch(err => {
-    console.error("Error:", err)
-    process.exit(1)
-})
-```
-
-### Web App
-```javascript
-import React from "react"
-import UserDocumentsInput from "src/components/User/DocumentsInput.js"
-
-function UserDocumentsView(input = {}) {
-    input = UserDocumentsInput.from(input)
-    if (empty(input)) {
-        throw new Error("Input data required in a format off UserDocumentsInput")
-    }
-
-    return <div>
-        <h3>Documents</h3>
-        <ul>
-            {input.documents.map((d, i) => <li key={i}>{d.name}</li>)}
-        </ul>
-    </div>
-}
-```
-
-## Conclusion
-NaN•UI provides a robust, platform-agnostic framework for building UIs with minimal dependencies. The code is structured to ensure clarity, maintainability, and comprehensive test coverage. By following the outlined requirements and structure, developers can build scalable and maintainable UI components and applications.

package/task.md

@@ -1,181 +0,0 @@
-Інструкція для наступних кроків
-
-## [+] Написання тестів для всіх класів
-
-План дій:
-- **Створити тестові файли** для кожного класу у тій самій директорії з суфіксом `.test.js`:
-
-   ```
-   src/
-   ├── core/
-   │   ├── Form/
-   │   │   ├── Form.test.js
-   │   │   ├── Message.test.js
-   │   │   └── Input.test.js
-   │   ├── Message/
-   │   │   ├── InputMessage.test.js
-   │   │   ├── Message.test.js
-   │   │   ├── OutputMessage.test.js
-   │   ├── InputAdapter.test.js
-   │   ├── OutputAdapter.test.js
-   │   └── Stream.test.js
-   ```
-- **Використовувати `node:test`** для тестування базових класів (не `.jsx` компонентів)
-
-- **Тестувати всі можливі випадки**:
-
-   - Конструктори з різними типами вхідних даних
-   - Методи `from()` для нормалізації
-   - Роботу з обов'язковими/необов'язковими полями
-   - Валідацію форм
-   - Поведінку потоків
-- **Використовувати асерти**:
-  ```js
-  import { describe, it } from "node:test"
-  import { strict as assert } from "node:assert"
-
-  describe("ClassName", () => {
-    it("should create instance", () => {
-      // Ваш тест
-    })
-  })
-  ```
-- **Запуск тестів**:
-
-  ```bash
-  npm test
-  # або
-  node --test --experimental-worker
-  ```
-
-## [+] Написання прикладів використання (playground)
-
-План дій:
-- **Створити директорію** `playground/` у корені проекту
-
-- **Створити окремі файли** для різних сценаріїв:
-
-   ```
-   playground/
-   ├── form-basic.js           # Базова форма
-   ├── form-advanced.js        # Складна форма з різними типами полів
-   ├── stream-basic.js         # Базовий потік даних
-   ├── stream-interactive.js   # Інтерактивний потік
-   ├── error-handling.js       # Обробка помилок
-   └── integration.js          # Інтеграція з реальним додатком
-   ```
-- **Кожен приклад має містити**:
-
-   - Імпорти необхідних класів
-   - Створення екземплярів
-   - Налаштування обробників подій
-   - Приклади використання
-- **Додати інструкцію** у `README.md` як запускати приклади:
-  ```bash
-  node playground/form-basic.js
-  ```
-- **Перевірити працездатність** всіх прикладів
-
-## [+] Написання JSDoc для всіх полів і функцій
-
-План дій:
-- **Пройтися по всім файлам** і додати JSDoc коментарі до:
-
-**Для класів:**
-  ```js
-  /**
-   * Опис класу
-   * @class
-   * @extends {BaseClass}
-   * @example
-   * // Приклад використання
-   * const instance = new ClassName()
-   */
-  ```
-**Для властивостей:**
-  ```js
-  /** @type {string} Опис властивості */
-  propertyName
-  ```
-**Для конструкторів:**
-  ```js
-  /**
-   * Створює екземпляр класу
-   * @param {Object} [props] - Властивості екземпляра
-   * @param {string} [props.name=""] - Ім'я елемента
-   * @param {boolean} [props.active=false] - Чи активний елемент
-   */
-  constructor(props = {}) { ... }
-  ```
-**Для методів:**
-  ```js
-  /**
-   * Опис методу
-   * @param {string} paramName - Опис параметра
-   * @returns {ReturnType} Опис поверненого значення
-   * @throws {Error} Опис можливих помилок
-   */
-  methodName(paramName) { ... }
-  ```
-- **Використовувати англійську мову** для всіх коментарів
-
-- **Перевірити сумісність** з TypeScript деклараціями (використання `@typedef`, `@template` тощо)
-
-- **Запуск `tsc --emitDeclarationOnly`** для перевірки генерації `.d.ts` файлів
-
-## [ ] Написання README.md
-
-Структура README.md:
-- **Заголовок та короткий опис**
-
-   ```
-   # @nan0web/ui
-   Агностичний UI фреймворк для багатошарових додатків.
-   Одна логіка, багато інтерфейсів.
-   ```
-- **Функціональність**
-
-   - Базові повідомлення: `InputMessage`, `OutputMessage`
-   - Форми та їх валідація
-   - Потокові операції
-   - Абстрактні адаптери
-- **Встановлення**
-
-   ```bash
-   npm install @nan0web/ui
-   ```
-- **Приклади використання**
-
-   ```js
-   import { InputMessage, OutputMessage } from '@nan0web/ui'
-   const input = InputMessage.from({ value: 'Hello' })
-   const output = OutputMessage.from({ content: ['Hello World'] })
-   ```
-- **Основні класи**
-
-   - `UIMessage` - базовий клас для всіх повідомлень
-   - `InputMessage` - для отримання даних від користувача
-   - `OutputMessage` - для відображення даних
-   - `UIForm` - для роботи з формами
-   - `UIStream` - для асинхронних операцій
-- **API Документація**
-
-   Посилання на файли з JSDoc
-- **Приклади**
-
-   Посилання на директорію `playground/`
-- **Запуск тестів**
-
-   ```bash
-   npm test
-   ```
-- **Ліцензія**
-
-   ```
-   MIT License
-   ```
-Загальна послідовність дій:
-- **Спочатку напишіть тести** - це допоможе зрозуміти, чи все працює як очікувалось
-- **Потім створіть приклади** - вони стануть частиною документації
-- **Додайте JSDoc коментарі** - природно зробити це під час перегляду коду
-- **Напишіть README.md** - використовуючи матеріали з попередніх кроків

package/tsconfig.json

@@ -1,23 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "esnext",
-		"module": "nodenext",
-		"lib": ["esnext"],
-		"declaration": true,
-		"declarationMap": false,
-		"emitDeclarationOnly": true,
-		"outDir": "./types",
-		"rootDir": "./src",
-		"strict": true,
-		"esModuleInterop": true,
-		"skipLibCheck": true,
-		"forceConsistentCasingInFileNames": true,
-		"moduleResolution": "nodenext",
-		"allowSyntheticDefaultImports": true,
-		"noImplicitAny": false,
-		"allowJs": true,
-		"checkJs": true
-	},
-	"include": ["src/**/*"],
-	"exclude": ["node_modules", "src/**/*.test.js", "src/README.md.js"]
-}

package/vitest.config.js

@@ -1,26 +0,0 @@
-import process from "node:process"
-import { defineConfig } from "vitest/config"
-
-export default defineConfig({
-	test: {
-		sourcemap: true,
-		environment: "node",
-		cache: false,
-		root: process.cwd(),
-		coverage: {
-			provider: "v8",
-		},
-		exclude: [
-			"apps/**",
-			"node_modules/**",
-		],
-		isolate: false,
-		// Try to force inline source maps for best debugging
-		// (Vite will use inline source maps for dev by default)
-	},
-	resolve: {
-		alias: {
-			"@": "/src",
-		},
-	},
-})