Demo

UI Components

UI များကို @quan-erp/shared-ui မှ import လုပ်ရပါသည်။ ဤ package သည် Quan ERP plugin အားလုံးအတွက် Shadcn ပေါ်တွင် တည်ဆောက်ထားသော design system ဖြစ်ပါသည်။ Raw HTML သို့မဟုတ် third-party UI package ထက် shared primitives များကို ဦးစားပေးအသုံးပြုပါ။

Shadcn primitives

အခြေခံ Shadcn component အားလုံးကို @quan-erp/shared-ui မှ re-export လုပ်ထားပါသည်။ ဤ docs ၏ Shadcn ကဏ္ဍတွင် import နှင့် အသုံးပြုပုံကို ကြည့်နိုင်ပြီး၊ API အပြည့်အစုံအတွက် တရားဝင် Shadcn site ကို ဖွင့်ကြည့်ရပါသည်။

  • Form & Input — Button, Input, Select, Checkbox, Switch, Form စသည်
  • Layout & Navigation — Tabs, Accordion, Breadcrumb, Sidebar စသည်
  • Overlays & Dialogs — Dialog, Sheet, Drawer, Dropdown Menu စသည်
  • Feedback & Status — Alert, Badge, Skeleton, Toast / Sonner စသည်
  • Display & Media — Card, Table, Avatar, Item, Chart စသည်
  • Misc — Collapsible, Toggle, Pagination စသည်
Shadcn UIShadcn Components

Package

Component၊ hook နှင့် cn တို့ကို အမြဲ @quan-erp/shared-ui မှသာ import လုပ်ရပါသည်။ Plugin ထဲတွင် Shadcn သို့မဟုတ် သီးခြား UI library ကို ထည့်သွင်းအသုံးပြုခြင်း မပြုရပါ။

  • Pages — Page / PageTitle / PageContent shell
  • cn — conditional className အကူအညီ
  • Forms — Form + Zod stack
  • Responsive Dialog — Dialog / Drawer / Sheet
  • Calendar — raw / popover / drawer / automatic
  • Loading, Error, Empty — query feedback အခြေအနေများ
  • Hooks — debounce, media query, mobile back, i18n
  • Portal Styling — portaled content ပေါ်တွင် data-plugin
  • Side menu, Home shortcuts, Setting, Report, Dashboard, Change Log — AppRegistry / base-frontend UI
  • Pull to refresh, Floating action button, Menu icons, Workflow nodes — shared-ui / base-frontend component များ

Import စည်းကမ်းများ

  • RequestDto သို့မဟုတ် ResponseDto ကို @quan-erp/shared-ui မှ မယူရပါ — @quan-erp/shared-frontend-core ကို အသုံးပြုရပါသည်
  • ChangeLog နှင့် ဆက်စပ် hooks များသည် @quan-erp/base-frontend မှ လာပါသည် — shared-ui မဟုတ်ပါ
TSXdto
import { RequestDto, ResponseDto } from "@quan-erp/shared-frontend-core"; import { Button } from "@quan-erp/shared-ui";

Shared primitives ကို ဦးစားပေးပါ

  • <button> → Button / ButtonGroup
  • Bare form + register() → Form + FormField + FormControl + FormMessage + Zod
  • ကိုယ်တိုင် ရေးသားထားသော panel များ → Card / CardHeader / CardTitle / CardContent
  • ကိုယ်တိုင် ရေးသားထားသော loading / empty / error → LoadingState / EmptyState / ErrorState / Alert
  • ကိုယ်တိုင် ရေးသားထားသော list row များ → Item / ItemGroup / ItemMedia / ItemContent / ItemTitle / ItemActions
  • Status pill များ → Badge
  • Conditional className စာကြောင်းများ → cn