Інтерфейс користувача та форми
На цій сторінці
Через інтерфейс людина працює із застосунком і проходить його робочі процеси. OwlMeans Common поєднує знайомі бібліотеки інтерфейсу з узгодженими правилами для форм, навігації та ідентичності.
Бібліотеки за призначенням
| Бібліотека або стандарт | Призначення | Публічний пакет OwlMeans |
|---|---|---|
| React та React DOM | Відображати інтерактивні екрани застосунку. | @owlmeans/web-client |
| shadcn/ui | Надавати компоненти інтерфейсу для наявної лінійки вебпанелей. | @owlmeans/web-panel |
| Radix UI | Надавати базові елементи інтерфейсу: діалогові вікна, меню та елементи вибору. | @owlmeans/web-panel |
| Tailwind CSS | Підтримувати узгоджене оформлення за допомогою утилітарних класів. | @owlmeans/web-panel |
| Lucide | Надавати піктограми інтерфейсу для повторного використання. | @owlmeans/web-panel |
| React Hook Form та адаптери резолверів | Керувати полями форм і підключати до них валідацію. | @owlmeans/client-panel |
| i18next | Підтримувати перекладені тексти застосунку. | @owlmeans/client-i18n |
| Sonner | Показувати сповіщення застосунку. | @owlmeans/web-panel |
| react-dropzone | Підтримувати вибір і завантаження файлів. | @owlmeans/web-client |
| qrcode.react | Відображати QR-коди там, де вони потрібні для певної функції. | @owlmeans/web-panel |
Це публічні залежності та стандарти екосистеми. Точний набір залежностей застосунку визначають згенерований проєкт і розроблені функції; не кожному застосунку потрібні всі перелічені тут бібліотеки.
Використання в проєкті
- Опишіть потрібну поведінку в специфікації чи історії.
- Попросіть агента дотримуватися наявних у проєкті правил OwlMeans Common.
- Щоб розібратися в залежності, перегляньте публічну документацію відповідного пакета.
- Перевірте, як працює потрібна функція в попередньому перегляді та які правила доступу до неї діють.
Попросіть агента створити контактну форму з підписами полів, зрозумілими повідомленнями про помилки та навігацією з клавіатури. Введіть некоректну електронну адресу й перевірте, чи пояснює форма, що потрібно виправити.
UI — це екрани та елементи керування, якими користується людина. Бібліотека форм допомагає узгоджено обробляти введені значення, помилки та надсилання форми.
Про архітектуру застосунку читайте в OwlMeans Tech Concept, а про робочий процес із середовищем агента — у розділі Продовження роботи з іншим агентом.
Приклад застосунку
Категорія: CRM і керування клієнтами. Приклад: CRM для невеликої команди з призначенням відповідальних за контакти та доступом для керівника.
Назви та знаки
Назви shadcn/ui, React, React DOM, Radix UI, Tailwind CSS, Lucide, React Hook Form, i18next, Sonner, react-dropzone, qrcode.react та будь-які повʼязані знаки належать відповідним власникам або супровідникам проєктів. Згадки вказують на продукти, стандарти чи приклади вихідного коду. Вони не означають, що ці власники спонсорують або схвалюють OwlMeans.