TaavUI Lab
Foundation

اصول و لایه مرجع TaavUI

TaavUI برای این ساخته می‌شود که رابط‌های ERP فارسی را از حالت صفحه‌به‌صفحه و سلیقه‌ای خارج کند و به یک سیستم مشترک، مستند و قابل‌حکمرانی تبدیل کند.

See: packages/ui/TAAVUI_REFERENCES.md
Why TaavUI Exists

زبان مشترک DastRanj و VahedYek

TaavUI یک design system داخلی برای ERP/SaaS فارسی و RTL است تا فرم‌ها، جدول‌ها، ناوبری، وضعیت‌ها و الگوهای business به‌صورت تکرارپذیر، خوانا و قابل‌نگهداری ساخته شوند.

جلوگیری از UI محلی و تکراری داخل اپ‌ها
استانداردسازی فرم، داده، ناوبری و workflow
ساخت لایه مرجع برای تصمیم‌های بعدی
مهاجرت تدریجی بدون تغییر business logic اپ‌ها
Scope Guardrails
  • • بدون migration برای DastRanj یا VahedYek
  • • بدون تغییر business logic یا backend calls
  • • بدون جایگزینی TaavUI با design system آماده
  • • تمرکز روی اصول، مستندسازی و governance

سیستم‌های مرجع

یادگیری مفهومی از سیستم‌های بالغ enterprise بدون کپی کد یا هویت بصری

IBM Carbon

Reference

قوت: Token discipline, accessibility, and data-heavy enterprise UI.

یادگیری برای TaavUI: Govern components through tokens, states, and documented usage rules.

نباید کپی شود: Carbon branding and desktop-first assumptions that do not fit Persian ERP flows.

Ant Design

Reference

قوت: Broad admin patterns, forms, tables, and practical React ergonomics.

یادگیری برای TaavUI: Document enterprise patterns across forms, filters, and data views as a system.

نباید کپی شود: Visual identity, API sprawl, and LTR-first assumptions.

SAP Fiori / Fundamental

Reference

قوت: ERP workflows, object pages, list reports, and operational structure.

یادگیری برای TaavUI: Treat list reports, object details, and review flows as first-class TaavUI patterns.

نباید کپی شود: SAP vocabulary, heavyweight workflow assumptions, and copied structure.

Fluent UI

Reference

قوت: Productivity flows, accessibility, panels, and command surfaces.

یادگیری برای TaavUI: Build clear action hierarchy, keyboard support, and consistent secondary panels.

نباید کپی شود: Microsoft visual branding and desktop-product metaphors that do not fit ERP tasks.

Atlassian

Reference

قوت: Workflow clarity, progress, status communication, and product governance.

یادگیری برای TaavUI: Make operational state, review, and collaboration signals explicit and reusable.

نباید کپی شود: Jira-shaped UX assumptions and visual identity.

GOV.UK

Reference

قوت: Clear forms, helper text, validation, and accessible service writing.

یادگیری برای TaavUI: Keep helper/error hierarchy plain, stable, and trustworthy in complex forms.

نباید کپی شود: Government service visual language and public-service simplifications.

اصول TaavUI

قوانینی که باید قبل از ساخت هر component یا pattern در نظر گرفته شوند

RTL-first and Persian-enterprise readable.
Token-first styling with controlled variants.
No arbitrary app-local styling on shared components.
Business logic stays outside UI primitives.
Business components stay data-driven and compositional.
Accessibility and keyboard navigation are default requirements.
Loading, empty, and error states are part of the API contract.
Long forms and dense ERP screens must remain stable and readable.
Dark and light themes are supported at the system level.
Migration stays gradual, never a big-bang rewrite.

لایه‌های کامپوننتی

هر جزء جدید باید جایگاه خودش را در این سلسله‌مراتب روشن کند

Layer 1

Tokens

Color, spacing, typography, motion, and semantic system variables.

Layer 2

Primitives

Low-level visual building blocks such as buttons, badges, cards, and hints.

Layer 3

Forms

Field composition rules, labels, helper text, and repeatable form layout.

Layer 4

Form Controls

Inputs, selects, switches, chips, and selectable business controls.

Layer 5

Overlays

Dialog, drawer, dropdown, and popover interaction surfaces.

Layer 6

Navigation

Tabs, steppers, side navigation structures, and orientation patterns.

Layer 7

Data Display

Table shell, filter bar, status, key-value, empty, loading, and pagination.

Layer 8

Layout Patterns

Page shells, headers, sections, side panels, summaries, and sticky actions.

Layer 9

Business Components

Shared business-facing assemblies such as TaavBusinessSidebar.

Layer 10

App Composition

Final route-aware assembly inside DastRanj and VahedYek only.

چک‌لیست ساخت کامپوننت

هر component جدید باید قبل از ورود به TaavUI از این فیلتر عبور کند

  1. این الگو در کدام لایه قرار می‌گیرد؟
  2. آیا بین DastRanj و VahedYek قابل استفاده‌ی مجدد است؟
  3. آیا همین حالا در TaavUI راه‌حل موجودی داریم؟
  4. کدام سیستم مرجع همین الگو را خوب حل کرده است؟
  5. variant / size / tone / density / state های لازم چیست؟
  6. حالت‌های loading / disabled / error / empty چگونه‌اند؟
  7. رفتار accessibility و keyboard navigation چیست؟
  8. نیازهای RTL و متن/عدد فارسی چیست؟
  9. چه token جدیدی لازم است؟
  10. برای TaavUI Lab چه صفحه یا مثال مستندی لازم است؟
  11. چه چیزهایی عمداً نباید وارد این کامپوننت شوند؟