Інтерфейс користувача та форми
На цій сторінці
Через інтерфейс людина працює із застосунком і проходить його робочі процеси. 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, а про роботу з harness — у посібнику про продовження розробки з іншим агентом.
Приклад застосунку
Категорія: CRM і керування клієнтами. Приклад: CRM для невеликої команди з призначенням відповідальних за контакти та доступом для керівника.
Назви й торговельні марки
Назви shadcn/ui, React, React DOM, Radix UI, Tailwind CSS, Lucide, React Hook Form, i18next, Sonner, react-dropzone, qrcode.react та всі повʼязані торговельні марки належать відповідним власникам або супровідникам проєктів. Їх згадано, щоб позначити продукти, стандарти або приклади вихідного коду. Згадки в документації OwlMeans не означають, що ці власники спонсорують чи схвалюють OwlMeans.