esvn-react-barcode-print 1.0.0

package/README.md

@@ -0,0 +1,75 @@
+# @becoxy/react-barcode-print
+
+Thư viện React Modal in mã vạch (Barcode CODE128) và mã QR đa khổ giấy (2 tem, 3 tem, A4 65 tem, A5 40 tem, Tùy chọn) với giao diện xem trước trực quan (Print Preview Modal).
+
+## 1. Cài đặt
+
+```bash
+yarn add @becoxy/react-barcode-print
+# hoặc
+npm install @becoxy/react-barcode-print
+```
+
+### Peer Dependencies
+Đảm bảo dự án của bạn đã cài các thư viện sau:
+```bash
+yarn add react react-dom reactstrap react-hook-form becoxy-icons sweetalert2 sweetalert2-react-content
+```
+
+## 2. Cách sử dụng
+
+```tsx
+import React, { useState } from 'react'
+import { ModalBarcodePrint, IBarcodePrintItem } from '@becoxy/react-barcode-print'
+import TableEdit from 'react-table-edit'
+
+const MyProductPage = () => {
+  const [isOpenPrint, setIsOpenPrint] = useState(false)
+  const [dataSelected, setDataSelected] = useState<IBarcodePrintItem[]>([])
+  const [dataList, setDataList] = useState<any[]>([])
+
+  return (
+    <div>
+      <button onClick={() => setIsOpenPrint(true)}>In mã vạch</button>
+
+      <ModalBarcodePrint
+        isOpen={isOpenPrint}
+        toggle={() => setIsOpenPrint(false)}
+        title="In tem mã vạch sản phẩm"
+        dataSelected={dataSelected}
+        setDataSelected={setDataSelected}
+        renderTable={({ selectedItems, setSelectedItems }) => (
+          <TableEdit
+            dataSource={dataList}
+            selectedItem={selectedItems}
+            setSelectedItem={setSelectedItems}
+            columns={[
+              { field: 'checkbox', type: 'checkbox', width: 40 },
+              { field: 'code', headerText: 'Mã hàng' },
+              { field: 'name', headerText: 'Tên hàng' },
+              { field: 'price', headerText: 'Giá bán' },
+              { field: 'printQuantity', headerText: 'Số lượng in', editEnable: true }
+            ]}
+          />
+        )}
+      />
+    </div>
+  )
+}
+
+export default MyProductPage
+```
+
+## 3. Khổ giấy hỗ trợ
+- **Khổ 2 tem (80x22mm)**: Máy in tem cuộn nhiệt
+- **Khổ 3 tem (105x22mm)**: Máy in tem cuộn nhiệt
+- **Khổ A5 (40 tem - Tomy 108)**: 5 cột x 8 hàng
+- **Khổ A4 (65 tem - Tomy 145)**: 5 cột x 13 hàng
+- **Khổ tùy chọn**: Tùy biến số tem trên mỗi hàng
+
+## 4. Các tính năng nổi bật
+- **Kéo thả dịch lề trái/phải** trực tiếp trên mẫu xem trước.
+- **Thêm/xóa/đổi thứ tự** các trường in linh hoạt.
+- **Định dạng phông chữ**: In đậm, in nghiêng, gạch chân, đổi màu, đổi cỡ chữ, đổi tiền tố.
+- **Chế độ xem trước khổ giấy**: Xem cả trang A4/A5 với lưới tem chân thực, tự động phân trang nếu vượt số lượng tem.
+- **Hộp thoại xác nhận** an toàn khi khôi phục thiết lập gốc.

package/dist/index.d.mts

@@ -0,0 +1,113 @@
+import * as react from 'react';
+import { FC, ReactNode } from 'react';
+import { UseFormWatch, UseFormSetValue, Control, FieldErrors } from 'react-hook-form';
+
+interface IPrintField {
+    id: string;
+    key: string;
+    label: string;
+    type: 'text' | 'barcode' | 'custom';
+    enabled: boolean;
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    color?: string;
+    fontSize?: number;
+    offsetX?: number;
+    prefix?: string;
+    suffix?: string;
+    customValue?: string;
+}
+interface ISettingPrint {
+    printType: number;
+    paperSize: number;
+    stampNumber: number;
+    productCode?: boolean;
+    productName?: boolean;
+    companyName?: boolean;
+    unitPrice?: boolean;
+    printSample?: number;
+    hinge?: boolean;
+    fields?: IPrintField[];
+}
+interface IBarcodePrintItem {
+    id?: string | number;
+    code: string;
+    name: string;
+    price?: number;
+    quantity?: number;
+    printQuantity?: number;
+    companyName?: string;
+    [key: string]: any;
+}
+interface IExtraFieldOption {
+    id: string;
+    key: string;
+    label: string;
+    type: 'text' | 'custom';
+    prefix?: string;
+    customValue?: string;
+}
+
+declare const getOrganizationName: () => string;
+declare const generateBarcodeHtml: (value: string, printType: number, height?: number) => string;
+declare const renderSingleLabelHtml: (item: IBarcodePrintItem, settings: ISettingPrint, companyNameDefault?: string, barcodeHeight?: number) => string;
+declare const getPaperSizeLabel: (paperSize?: number, stampNumber?: number) => string;
+declare const generatePrintDocument: (settings: ISettingPrint, items: IBarcodePrintItem[], isTest?: boolean, isPreview?: boolean) => {
+    html: string;
+    totalStamps: number;
+    paperLabel: string;
+    uniqueProducts: number;
+};
+declare const executePrint: (settings: ISettingPrint, items: IBarcodePrintItem[], isTest?: boolean) => void;
+
+interface IFProps$1 {
+    watch: UseFormWatch<ISettingPrint>;
+    setValue?: UseFormSetValue<ISettingPrint>;
+    sampleItem?: Record<string, any>;
+}
+declare const PreviewPrint: ({ watch, setValue, sampleItem }: IFProps$1) => react.JSX.Element;
+
+interface IFProps {
+    control: Control<ISettingPrint, any>;
+    watch: UseFormWatch<ISettingPrint>;
+    setValue: UseFormSetValue<ISettingPrint>;
+    errors?: FieldErrors<ISettingPrint>;
+    availableExtraFields?: IExtraFieldOption[];
+    t?: (key: string) => string;
+}
+declare const SettingPrint: (props: IFProps) => react.JSX.Element;
+
+interface IFPropsModalPreview {
+    isOpen: boolean;
+    toggle: () => void;
+    settings: ISettingPrint;
+    items: IBarcodePrintItem[];
+    onPrint?: () => void;
+    t?: (key: string) => string;
+}
+declare const ModalPreviewPrint: FC<IFPropsModalPreview>;
+
+interface IModalBarcodePrintProps {
+    isOpen: boolean;
+    toggle: () => void;
+    title?: string;
+    dataSelected: IBarcodePrintItem[];
+    setDataSelected: (items: IBarcodePrintItem[]) => void;
+    dataItem?: IBarcodePrintItem | null;
+    defaultFields?: IPrintField[];
+    availableExtraFields?: IExtraFieldOption[];
+    renderTable?: (props: {
+        selectedItems: IBarcodePrintItem[];
+        setSelectedItems: (items: IBarcodePrintItem[]) => void;
+    }) => ReactNode;
+    children?: ReactNode;
+    windowSize?: any;
+    t?: (key: string) => string;
+    onPrintSuccess?: () => void;
+    notifyError?: (message: string) => void;
+    notifySuccess?: (message: string) => void;
+}
+declare const ModalBarcodePrint: FC<IModalBarcodePrintProps>;
+
+export { type IBarcodePrintItem, type IExtraFieldOption, type IModalBarcodePrintProps, type IPrintField, type ISettingPrint, ModalBarcodePrint, ModalPreviewPrint, PreviewPrint, SettingPrint, executePrint, generateBarcodeHtml, generatePrintDocument, getOrganizationName, getPaperSizeLabel, renderSingleLabelHtml };

package/dist/index.d.ts

@@ -0,0 +1,113 @@
+import * as react from 'react';
+import { FC, ReactNode } from 'react';
+import { UseFormWatch, UseFormSetValue, Control, FieldErrors } from 'react-hook-form';
+
+interface IPrintField {
+    id: string;
+    key: string;
+    label: string;
+    type: 'text' | 'barcode' | 'custom';
+    enabled: boolean;
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    color?: string;
+    fontSize?: number;
+    offsetX?: number;
+    prefix?: string;
+    suffix?: string;
+    customValue?: string;
+}
+interface ISettingPrint {
+    printType: number;
+    paperSize: number;
+    stampNumber: number;
+    productCode?: boolean;
+    productName?: boolean;
+    companyName?: boolean;
+    unitPrice?: boolean;
+    printSample?: number;
+    hinge?: boolean;
+    fields?: IPrintField[];
+}
+interface IBarcodePrintItem {
+    id?: string | number;
+    code: string;
+    name: string;
+    price?: number;
+    quantity?: number;
+    printQuantity?: number;
+    companyName?: string;
+    [key: string]: any;
+}
+interface IExtraFieldOption {
+    id: string;
+    key: string;
+    label: string;
+    type: 'text' | 'custom';
+    prefix?: string;
+    customValue?: string;
+}
+
+declare const getOrganizationName: () => string;
+declare const generateBarcodeHtml: (value: string, printType: number, height?: number) => string;
+declare const renderSingleLabelHtml: (item: IBarcodePrintItem, settings: ISettingPrint, companyNameDefault?: string, barcodeHeight?: number) => string;
+declare const getPaperSizeLabel: (paperSize?: number, stampNumber?: number) => string;
+declare const generatePrintDocument: (settings: ISettingPrint, items: IBarcodePrintItem[], isTest?: boolean, isPreview?: boolean) => {
+    html: string;
+    totalStamps: number;
+    paperLabel: string;
+    uniqueProducts: number;
+};
+declare const executePrint: (settings: ISettingPrint, items: IBarcodePrintItem[], isTest?: boolean) => void;
+
+interface IFProps$1 {
+    watch: UseFormWatch<ISettingPrint>;
+    setValue?: UseFormSetValue<ISettingPrint>;
+    sampleItem?: Record<string, any>;
+}
+declare const PreviewPrint: ({ watch, setValue, sampleItem }: IFProps$1) => react.JSX.Element;
+
+interface IFProps {
+    control: Control<ISettingPrint, any>;
+    watch: UseFormWatch<ISettingPrint>;
+    setValue: UseFormSetValue<ISettingPrint>;
+    errors?: FieldErrors<ISettingPrint>;
+    availableExtraFields?: IExtraFieldOption[];
+    t?: (key: string) => string;
+}
+declare const SettingPrint: (props: IFProps) => react.JSX.Element;
+
+interface IFPropsModalPreview {
+    isOpen: boolean;
+    toggle: () => void;
+    settings: ISettingPrint;
+    items: IBarcodePrintItem[];
+    onPrint?: () => void;
+    t?: (key: string) => string;
+}
+declare const ModalPreviewPrint: FC<IFPropsModalPreview>;
+
+interface IModalBarcodePrintProps {
+    isOpen: boolean;
+    toggle: () => void;
+    title?: string;
+    dataSelected: IBarcodePrintItem[];
+    setDataSelected: (items: IBarcodePrintItem[]) => void;
+    dataItem?: IBarcodePrintItem | null;
+    defaultFields?: IPrintField[];
+    availableExtraFields?: IExtraFieldOption[];
+    renderTable?: (props: {
+        selectedItems: IBarcodePrintItem[];
+        setSelectedItems: (items: IBarcodePrintItem[]) => void;
+    }) => ReactNode;
+    children?: ReactNode;
+    windowSize?: any;
+    t?: (key: string) => string;
+    onPrintSuccess?: () => void;
+    notifyError?: (message: string) => void;
+    notifySuccess?: (message: string) => void;
+}
+declare const ModalBarcodePrint: FC<IModalBarcodePrintProps>;
+
+export { type IBarcodePrintItem, type IExtraFieldOption, type IModalBarcodePrintProps, type IPrintField, type ISettingPrint, ModalBarcodePrint, ModalPreviewPrint, PreviewPrint, SettingPrint, executePrint, generateBarcodeHtml, generatePrintDocument, getOrganizationName, getPaperSizeLabel, renderSingleLabelHtml };