@nan0web/ui 1.0.0 → 1.0.2

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",
-		},
-	},
-})