@wakastellar/ui 2.0.0 → 2.1.1

package/src/components/waka-barcode/index.tsx

@@ -0,0 +1,260 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Download, Copy, Check } from "lucide-react"
+import { Button } from "../button"
+
+// ============================================
+// TYPES
+// ============================================
+
+export type BarcodeFormat =
+  | "CODE128"
+  | "CODE39"
+  | "EAN13"
+  | "EAN8"
+  | "UPC"
+  | "ITF14"
+
+export interface WakaBarcodeProps {
+  /** Valeur à encoder */
+  value: string
+  /** Format du code-barres */
+  format?: BarcodeFormat
+  /** Largeur en pixels */
+  width?: number
+  /** Hauteur en pixels */
+  height?: number
+  /** Afficher le texte sous le code */
+  displayValue?: boolean
+  /** Couleur des barres */
+  lineColor?: string
+  /** Couleur de fond */
+  background?: string
+  /** Taille de la police */
+  fontSize?: number
+  /** Marge en pixels */
+  margin?: number
+  /** Afficher les actions */
+  showActions?: boolean
+  /** Classes CSS additionnelles */
+  className?: string
+}
+
+// ============================================
+// BARCODE GENERATION
+// ============================================
+
+// Code128 encoding (simplified)
+const CODE128_PATTERNS: Record<string, string> = {
+  " ": "11011001100", "!": "11001101100", '"': "11001100110", "#": "10010011000",
+  "$": "10010001100", "%": "10001001100", "&": "10011001000", "'": "10011000100",
+  "(": "10001100100", ")": "11001001000", "*": "11001000100", "+": "11000100100",
+  ",": "10110011100", "-": "10011011100", ".": "10011001110", "/": "10111001100",
+  "0": "10011101100", "1": "10011100110", "2": "11001110010", "3": "11001011100",
+  "4": "11001001110", "5": "11011100100", "6": "11001110100", "7": "11101101110",
+  "8": "11101001100", "9": "11100101100", ":": "11100100110", ";": "11101100100",
+  "<": "11100110100", "=": "11100110010", ">": "11011011000", "?": "11011000110",
+  "@": "11000110110", "A": "10100011000", "B": "10001011000", "C": "10001000110",
+  "D": "10110001000", "E": "10001101000", "F": "10001100010", "G": "11010001000",
+  "H": "11000101000", "I": "11000100010", "J": "10110111000", "K": "10110001110",
+  "L": "10001101110", "M": "10111011000", "N": "10111000110", "O": "10001110110",
+  "P": "11101110110", "Q": "11010001110", "R": "11000101110", "S": "11011101000",
+  "T": "11011100010", "U": "11011101110", "V": "11101011000", "W": "11101000110",
+  "X": "11100010110", "Y": "11101101000", "Z": "11101100010",
+}
+
+const CODE128_START = "11010000100" // Start Code B
+const CODE128_STOP = "1100011101011"
+
+function encodeCode128(data: string): string {
+  let encoded = CODE128_START
+
+  for (const char of data.toUpperCase()) {
+    const pattern = CODE128_PATTERNS[char]
+    if (pattern) {
+      encoded += pattern
+    } else {
+      // Fallback for unknown characters
+      encoded += CODE128_PATTERNS["?"]
+    }
+  }
+
+  // Add checksum (simplified)
+  encoded += CODE128_START
+
+  // Stop code
+  encoded += CODE128_STOP
+
+  return encoded
+}
+
+// Code39 encoding
+const CODE39_PATTERNS: Record<string, string> = {
+  "0": "101001101101", "1": "110100101011", "2": "101100101011", "3": "110110010101",
+  "4": "101001101011", "5": "110100110101", "6": "101100110101", "7": "101001011011",
+  "8": "110100101101", "9": "101100101101", "A": "110101001011", "B": "101101001011",
+  "C": "110110100101", "D": "101011001011", "E": "110101100101", "F": "101101100101",
+  "G": "101010011011", "H": "110101001101", "I": "101101001101", "J": "101011001101",
+  "K": "110101010011", "L": "101101010011", "M": "110110101001", "N": "101011010011",
+  "O": "110101101001", "P": "101101101001", "Q": "101010110011", "R": "110101011001",
+  "S": "101101011001", "T": "101011011001", "U": "110010101011", "V": "100110101011",
+  "W": "110011010101", "X": "100101101011", "Y": "110010110101", "Z": "100110110101",
+  "-": "100101011011", ".": "110010101101", " ": "100110101101", "*": "100101101101",
+}
+
+function encodeCode39(data: string): string {
+  let encoded = CODE39_PATTERNS["*"] + "0" // Start with * and gap
+
+  for (const char of data.toUpperCase()) {
+    const pattern = CODE39_PATTERNS[char]
+    if (pattern) {
+      encoded += pattern + "0" // Add gap between characters
+    }
+  }
+
+  encoded += CODE39_PATTERNS["*"] // End with *
+
+  return encoded
+}
+
+function encodeBarcode(value: string, format: BarcodeFormat): string {
+  switch (format) {
+    case "CODE128":
+      return encodeCode128(value)
+    case "CODE39":
+      return encodeCode39(value)
+    case "EAN13":
+    case "EAN8":
+    case "UPC":
+    case "ITF14":
+      // For these formats, use CODE128 as fallback
+      return encodeCode128(value)
+    default:
+      return encodeCode128(value)
+  }
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function WakaBarcode({
+  value,
+  format = "CODE128",
+  width = 200,
+  height = 80,
+  displayValue = true,
+  lineColor = "#000000",
+  background = "#FFFFFF",
+  fontSize = 14,
+  margin = 10,
+  showActions = false,
+  className,
+}: WakaBarcodeProps) {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null)
+  const [copied, setCopied] = React.useState(false)
+
+  React.useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas || !value) return
+
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+
+    const encoded = encodeBarcode(value, format)
+    const textHeight = displayValue ? fontSize + 4 : 0
+    const barcodeHeight = height - textHeight - margin * 2
+    const barWidth = (width - margin * 2) / encoded.length
+
+    // Clear canvas
+    ctx.fillStyle = background
+    ctx.fillRect(0, 0, width, height)
+
+    // Draw barcode
+    ctx.fillStyle = lineColor
+    for (let i = 0; i < encoded.length; i++) {
+      if (encoded[i] === "1") {
+        ctx.fillRect(
+          margin + i * barWidth,
+          margin,
+          barWidth,
+          barcodeHeight
+        )
+      }
+    }
+
+    // Draw text
+    if (displayValue) {
+      ctx.fillStyle = lineColor
+      ctx.font = `${fontSize}px monospace`
+      ctx.textAlign = "center"
+      ctx.textBaseline = "bottom"
+      ctx.fillText(value, width / 2, height - margin + 2)
+    }
+  }, [value, format, width, height, displayValue, lineColor, background, fontSize, margin])
+
+  const handleDownload = () => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const link = document.createElement("a")
+    link.download = `barcode-${value}-${Date.now()}.png`
+    link.href = canvas.toDataURL("image/png")
+    link.click()
+  }
+
+  const handleCopy = async () => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    try {
+      const blob = await new Promise<Blob>((resolve) => {
+        canvas.toBlob((blob) => {
+          if (blob) resolve(blob)
+        }, "image/png")
+      })
+
+      await navigator.clipboard.write([
+        new ClipboardItem({ "image/png": blob }),
+      ])
+
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (error) {
+      console.error("Failed to copy barcode:", error)
+    }
+  }
+
+  return (
+    <div className={cn("inline-flex flex-col items-center gap-2", className)}>
+      <canvas
+        ref={canvasRef}
+        width={width}
+        height={height}
+        className="rounded border"
+        style={{ width, height }}
+      />
+
+      {showActions && (
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm" onClick={handleDownload}>
+            <Download className="h-4 w-4 mr-1" />
+            Télécharger
+          </Button>
+          <Button variant="outline" size="sm" onClick={handleCopy}>
+            {copied ? (
+              <Check className="h-4 w-4 mr-1" />
+            ) : (
+              <Copy className="h-4 w-4 mr-1" />
+            )}
+            {copied ? "Copié" : "Copier"}
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default WakaBarcode