lucius-barcode-designer

React component library for designing barcode print templates — LIS Admin style.

A standalone React component library (<BarcodeDesigner />) built with Vite + TypeScript + Tailwind v4 + shadcn/ui patterns. Designed to match the Figma "Thiết lập tem in" page from the LIS Admin design system.

Features

• 🎨 shadcn/ui + LIS Admin tokens — same color palette, typography (Inter), spacing and radius as lis_admin
• 🧩 3-column layout — Printers list | Canvas preview | Config panel (matches Figma)
• ✏️ Barcode rendering — full Code128 encoder + mm→px canvas drawing ported from BarcodeLib (C#)
• 📦 Master-detail templates — printers with their templates (Tube/Specimen), expandable tree
• 🔌 REST API integration — getPrinters, getTemplates, createPrinter, updateTemplate, etc.
• 🖨️ Print test — POST to local BarcodeAgent (/api/print/block)
• 💾 Undo/redo — 50-step history of settings
• 💿 localStorage persistence — settings can be cached locally
• 🔄 XML / JSON preview — view & edit raw template data

Layout (from Figma)

┌─────────────────┬──────────────────────────────────┬──────────────────┐
│ Danh sách máy   │  Template G500 - A1  [XML][Lưu] │  Cấu hình        │
│ in              │  ─────────────────────────────  │  barcode         │
│ ┌─[Search][+]┐  │  ┌─Canvas preview──────────┐    │                  │
│ Godex G500     │  │   ┌──[████  ████  █]──┐   │    │  Xem XML/JSON    │
│  Template A1   │  │   │   0792569       │   │    │  [XML][JSON]     │
│  Template A2   │  │   └──────────────────┘   │    │                  │
│ Godex G600     │  └────────────────────────────┘    │  Trang in        │
│  Template B1   │  [-100%+] [⛶] [⌖] [In test]       │  W×H …           │
└─────────────────┴──────────────────────────────────┴──────────────────┘

Build

cd barcode-designer-lib
npm install
npm run build   # outputs to dist/

Outputs:

• dist/barcode-designer.js (ESM)
• dist/barcode-designer.umd.cjs (UMD)
• dist/lucius-barcode-designer.css (Tailwind v4 + LIS tokens + Inter @font-face)
• dist/fonts/Inter-*.woff2 (fonts)
• dist/src/index.d.ts (TypeScript declarations)

Use from lis_admin

Option 1 — Import directly from the lib's dist/

In lis_admin/src/pages/SomePage.tsx:

import { BarcodeDesigner } from '../../../BarcodeAgent/barcode-designer-lib/dist/barcode-designer.js';
import '../../../BarcodeAgent/barcode-designer-lib/dist/lucius-barcode-designer.css';

<BarcodeDesigner
  apiBaseUrl="/api/v1"          // your LIS Server base
  printApiBaseUrl="http://localhost:5200"  // local BarcodeAgent
/>

Option 2 — npm link

cd barcode-designer-lib
npm link

cd lis_admin
npm link lucius-barcode-designer

Make sure lis_admin already has these peer deps installed (most are already in lis_admin/package.json):

• react >=19, react-dom >=19
• axios >=1.12
• @radix-ui/react-{checkbox,dialog,label,popover,radio-group,select,slot,switch}
• class-variance-authority, clsx, tailwind-merge
• lucide-react

Public API

<BarcodeDesigner
  apiBaseUrl?: string          // defaults to '/api'
  printApiBaseUrl?: string     // local BarcodeAgent URL (enables Print Test)
  axiosInstance?: AxiosInstance // optional custom axios (e.g. with auth)
  className?: string
  style?: React.CSSProperties
/>

Exported types & helpers:

• BarcodeMultiZoneSetting, BarcodeBlockSetting, FontSetting
• BarcodeBlockDataEnum, PageOrientation
• PrintTemplateType, PrinterInfo, BarcodeAgentTemplate
• createApiClient(baseURL), createTemplateService(api)
• BarcodeDesignerProps

Architecture

src/
├── BarcodeDesigner.tsx            ← root: 3-column outer card
├── components/
│   ├── TemplateManager.tsx        ← left column (printers tree + search)
│   ├── BarcodePreviewCanvas.tsx   ← middle (canvas + drag/resize)
│   ├── BlockPropertiesPanel.tsx   ← right (2 variants: barcode / block)
│   ├── FontSettingsPanel.tsx      ← nested form
│   ├── XmlJsonPreview.tsx         ← Dialog with XML/JSON toggle
│   └── ui/                        ← shadcn-style primitives (button, dialog, …)
├── context/TemplateServiceContext.ts
├── models/                        ← TS types matching C# DTOs
├── services/
│   ├── api.ts                     ← axios factory
│   ├── templateService.ts         ← REST API
│   ├── BarcodeDrawService.ts      ← canvas drawing
│   ├── Code128Encoder.ts          ← barcode encoder
│   └── XmlSerializer.ts           ← C#-compat XML serializer
├── store/useBarcodeStore.ts       ← Zustand + undo/redo
└── styles/index.css               ← Tailwind v4 + LIS tokens

Notes

• The lib currently does not bundle shadcn dependencies — they are external so the host app provides them.
• For dark-mode support, all colors use CSS variables (--surface-primary, --line-primary, …) defined in src/styles/index.css. Override them at :root or wrap the component in a .dark ancestor.
• Keyboard shortcuts: Ctrl+S to save template.