@skalfa/skalfa-app 1.0.0

package/components/base.components/document/PrintTable.component.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { FetchControlType, useTable } from "@utils";
+import { TableComponent, IconButtonComponent, FilterComponent, NodeSchema, PageSchema, RenderPDFPreview, ButtonComponent, RenderPDF } from "@components";
+import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
+
+
+export type PrintColumn = {
+  selector  :  string;
+  source    :  string | null;
+  width     :  number;
+};
+
+export type ColumnControl = {
+  selector  :  string;
+  label     :  string;
+};
+
+
+
+function usePrintColumns(data: any[], columnControl?: ColumnControl[]) {
+  const fields = useMemo(() => {
+    if (!data?.[0]) return [];
+    return Object.keys(data[0]);
+  }, [data]);
+
+  const [columns, setColumns] = useState<PrintColumn[]>([]);
+
+  useEffect(() => {
+    if (!data?.[0] || columns.length) return;
+
+    if (columnControl?.length) {
+      setColumns(
+        columnControl.map((c) => ({
+          selector: c.label,
+          source: c.selector,
+          width: 120,
+        }))
+      );
+      return;
+    }
+
+    setColumns(
+      fields.map((f) => ({
+        selector: f,
+        source: f,
+        width: 120,
+      }))
+    );
+  }, [data, fields, columnControl]);
+
+  const move = (selector: string, dir: "left" | "right") => {
+    setColumns(prev => {
+      const idx = prev.findIndex(c => c.selector === selector);
+      const target = dir === "left" ? idx - 1 : idx + 1;
+      if (idx < 0 || target < 0 || target >= prev.length) return prev;
+      const next = [...prev];
+      [next[idx], next[target]] = [next[target], next[idx]];
+      return next.map((c) => ({ ...c, selector: c.selector }));
+    });
+  };
+
+  return { columns, move };
+}
+
+
+function buildPrintSchema({ title, columns, data, columnControl }: {
+  title          ?:  string;
+  columns         :  PrintColumn[];
+  data            :  any[];
+  columnControl  ?:  ColumnControl[];
+}) : PageSchema[] {
+  const active = columns.filter(c => c.source);
+
+  const getHeaderLabel = (source: string | null) => {
+    if (!source) return "";
+
+    const found = columnControl?.find(c => c.selector === source);
+
+    return found?.label ?? source;
+  };
+
+  const content: NodeSchema[] = [];
+
+  if (title) {
+    content.push({
+      type     :  "text",
+      content  :  title,
+      style    :  { fontSize: 16, fontWeight: "bold", marginBottom: 12 },
+    });
+  }
+
+  content.push({
+    type     :  "table",
+    content  :  [
+      {
+        type     :  "tr" as const,
+        content  :  active.map<NodeSchema>(c => ({
+          type     :  "th" as const,
+          content  :  getHeaderLabel(c.source),
+          style    :  { width: c.width },
+        })),
+      },
+      ...data.map<NodeSchema>(row => ({
+        type     :  "tr" as const,
+        content  :  active.map<NodeSchema>(c => ({
+          type     :  "td" as const,
+          content  :  String(row[c.source!] ?? ""),
+          style    :  { width: c.width },
+        })),
+      })),
+    ],
+  });
+
+  return [{ page: { size: "A4", margin: 40, content } }];
+}
+
+
+
+export function PrintTable({ fetchControl, columnControl, title }: { fetchControl: FetchControlType; columnControl?: ColumnControl[]; title?: string; }) {
+  const { data }  =  useTable(fetchControl, undefined, undefined, false);
+  const rows      =  data?.data ?? [];
+
+  const { columns, move } = usePrintColumns(rows, columnControl);
+
+  const schema = useMemo(() => buildPrintSchema({
+    title: title,
+    columns,
+    data: rows,
+    columnControl,
+  }), [columns, rows, columnControl]);
+
+  return (
+    <>
+      <div className="p-4">
+        <FilterComponent
+          columns={data?.data[0] && Object.keys(data?.data[0])?.map((c) => ({ label: c, selector: c }))}
+          onChange={() => {}}
+          value={[]}
+        />
+      </div>
+
+      <div className="p-4">
+        <TableComponent
+          controlBar={false}
+          pagination={false}
+          noIndex
+          columns={columns.map(c => ({ selector: c.selector, label: c.selector }))}
+          data={[
+            Object.fromEntries(
+              columns.map((c, key) => [
+                c.selector,
+                <div className="flex gap-1" key={key}>
+                  {key > 0 && (
+                    <IconButtonComponent
+                      icon={faArrowLeft}
+                      size="xs"
+                      variant="outline"
+                      className="!text-foreground"
+                      onClick={() => move(c.selector, "left")}
+                    />
+                  )} 
+
+                  {key < (columns.length - 1) && (
+                    <IconButtonComponent
+                      icon={faArrowRight}
+                      size="xs"
+                      variant="outline"
+                      className="!text-foreground"
+                      onClick={() => move(c.selector, "right")}
+                    />
+                  )}
+                </div>,
+              ])
+            ),
+          ]}
+          className="row::bg-transparent row::border-0 row::gap-0 row::!hover:bg-white column::p-2 column::border-l head-column::p-2 head-column::border-l"
+        />
+      </div>
+
+      <RenderPDFPreview schema={schema} className="w-full max-h-[400px] overflow-y-auto flex justify-center bg-background mt-4" />
+
+
+      <div className="px-4 mt-8">
+        <ButtonComponent label=" Download PDF" block onClick={async () => {
+          const bytes = await RenderPDF({ content: schema });
+
+          const arrayBuffer = bytes.buffer instanceof ArrayBuffer ? bytes.buffer : bytes.slice().buffer;
+
+          const blob = new Blob([arrayBuffer], { type: "application/pdf" });
+          const url = URL.createObjectURL(blob);
+
+          const a = document.createElement("a");
+          a.href = url;
+          a.download = title ? `${title}.pdf` : "print.pdf";
+          a.click();
+
+          URL.revokeObjectURL(url);
+        }} />
+      </div>
+    </>
+  );
+}

package/components/base.components/document/RenderPDF.component.tsx

@@ -0,0 +1,416 @@
+"use client"
+
+import { PDFDocument, StandardFonts, PDFPage, rgb } from 'pdf-lib'
+import { useEffect, useRef } from 'react'
+
+export const PaperSize = {
+  LETTER: { width: 612, height: 792 },
+  A4: { width: 595, height: 842 },
+}
+
+export type RenderPDFProps = {
+  content: PageSchema[]
+}
+
+export type PageSchema = {
+  page: {
+    size?: keyof typeof PaperSize | { width: number; height: number }
+    margin?: number
+    content: NodeSchema[]
+  }
+}
+
+export type Style = {
+  width?: number
+  height?: number
+
+  padding?: number
+  paddingTop?: number
+  paddingRight?: number
+  paddingBottom?: number
+  paddingLeft?: number
+  paddingX?: number
+  paddingY?: number
+
+  marginTop?: number
+  marginBottom?: number
+
+  fontSize?: number
+  fontWeight?: "normal" | "bold"
+  lineHeight?: number
+  letterSpacing?: number
+  color?: string
+  opacity?: number
+  align?: "left" | "center" | "right"
+  textTransform?: "uppercase" | "lowercase" | "capitalize"
+
+  backgroundColor?: string
+  borderColor?: string
+  borderWidth?: number
+
+  underline?: boolean
+
+  textAlign?: "left" | "center" | "right"
+}
+
+export type NodeSchema =
+  | { type: "view"; style?: Style; content: NodeSchema[] }
+  | { type: "text"; content: string; style?: Style }
+  | { type: "image"; src: string | Uint8Array | ArrayBuffer; style?: Style }
+  | { type: "table"; content: NodeSchema[] }
+  | { type: "tr"; content: NodeSchema[], style?: Style }
+  | { type: 'td' | 'th'; content: NodeSchema[] | string; style?: Style }
+
+// ==================================================
+// Layout Context
+// ==================================================
+
+class LayoutContext {
+  x: number
+  y: number
+  constructor(
+    public width: number,
+    public height: number,
+    public margin: number
+  ) {
+    this.x = margin
+    this.y = height - margin
+  }
+
+  needBreak(h: number) {
+    return this.y - h < this.margin
+  }
+
+  reset() {
+    this.x = this.margin
+    this.y = this.height - this.margin
+  }
+}
+
+// ==================================================
+// Helpers
+// ==================================================
+
+function resolvePadding(style?: Style) {
+  const p = style?.padding ?? 0
+  const px = style?.paddingX ?? p
+  const py = style?.paddingY ?? p
+
+  return {
+    top: style?.paddingTop ?? py,
+    bottom: style?.paddingBottom ?? py,
+    left: style?.paddingLeft ?? px,
+    right: style?.paddingRight ?? px,
+  }
+}
+
+function resolveText(text: string, style?: Style) {
+  if (!style?.textTransform) return text
+  if (style.textTransform === "uppercase") return text.toUpperCase()
+  if (style.textTransform === "lowercase") return text.toLowerCase()
+  if (style.textTransform === "capitalize")
+    return text.replace(/\b\w/g, c => c.toUpperCase())
+  return text
+}
+
+function hexToRgb(hex?: string) {
+  if (!hex) return undefined
+  const h = hex.replace("#", "")
+  return rgb(
+    parseInt(h.slice(0, 2), 16) / 255,
+    parseInt(h.slice(2, 4), 16) / 255,
+    parseInt(h.slice(4, 6), 16) / 255
+  )
+}
+
+async function embedImage(pdf: PDFDocument, bytes: Uint8Array | ArrayBuffer) {
+  const data = bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes)
+  try {
+    return await pdf.embedPng(data)
+  } catch {
+    return await pdf.embedJpg(data)
+  }
+}
+
+async function resolveImageSource(
+  src: string | Uint8Array | ArrayBuffer
+): Promise<Uint8Array> {
+  if (src instanceof Uint8Array) return src
+  if (src instanceof ArrayBuffer) return new Uint8Array(src)
+
+  const res = await fetch(src)
+  if (!res.ok) {
+    throw new Error(`Failed to load image: ${src}`)
+  }
+
+  const buffer = await res.arrayBuffer()
+  return new Uint8Array(buffer)
+}
+
+
+function normalizeContent(
+  content: string | NodeSchema[]
+): NodeSchema[] {
+  if (typeof content === "string") {
+    return [
+      {
+        type: "text",
+        content
+      }
+    ]
+  }
+  return content
+}
+
+
+// ==================================================
+// Render Engine
+// ==================================================
+
+export async function RenderPDF(
+  { content }: RenderPDFProps
+): Promise<Uint8Array> {
+
+  const pdf = await PDFDocument.create()
+
+  const fontRegular = await pdf.embedFont(StandardFonts.Courier)
+  const fontBold = await pdf.embedFont(StandardFonts.CourierBold)
+
+  for (const p of content) {
+    const size =
+      typeof p.page.size === "string"
+        ? PaperSize[p.page.size]
+        : p.page.size ?? PaperSize.A4
+
+    const margin = p.page.margin ?? 40
+
+    let page: PDFPage = pdf.addPage([size.width, size.height])
+    const ctx = new LayoutContext(size.width, size.height, margin)
+
+    const draw = async (node: NodeSchema) => {
+
+      // ===================== VIEW =====================
+      if (node.type === "view") {
+        const pad = resolvePadding(node.style)
+        const startY = ctx.y
+
+        ctx.y -= pad.top
+        ctx.x += pad.left
+
+        for (const c of node.content) await draw(c)
+
+        const endY = ctx.y
+        const boxHeight = startY - endY
+
+        if (node.style?.backgroundColor) {
+          page.drawRectangle({
+            x: ctx.margin,
+            y: endY,
+            width: size.width - ctx.margin * 2,
+            height: boxHeight,
+            color: hexToRgb(node.style.backgroundColor),
+          })
+        }
+
+        if (node.style?.borderWidth && node.style?.borderColor) {
+          page.drawRectangle({
+            x: ctx.margin,
+            y: endY,
+            width: size.width - ctx.margin * 2,
+            height: boxHeight,
+            borderColor: hexToRgb(node.style.borderColor),
+            borderWidth: node.style.borderWidth,
+          })
+        }
+
+        ctx.x -= pad.left
+        ctx.y -= pad.bottom
+        return
+      }
+
+      // ===================== TEXT =====================
+      if (node.type === "text") {
+        const style = node.style
+        const fs = style?.fontSize ?? 12
+        const lh = style?.lineHeight ?? fs + 4
+
+        if (ctx.needBreak(lh)) {
+          page = pdf.addPage([size.width, size.height])
+          ctx.reset()
+        }
+
+        const font =
+          style?.fontWeight === "bold"
+            ? fontBold
+            : fontRegular
+
+        const text = resolveText(node.content, style)
+        const color = hexToRgb(style?.color)
+
+        let x = ctx.x
+        if (style?.align === "center") {
+          const w = font.widthOfTextAtSize(text, fs)
+          x = (size.width - w) / 2
+        }
+        if (style?.align === "right") {
+          const w = font.widthOfTextAtSize(text, fs)
+          x = size.width - ctx.margin - w
+        }
+
+        page.drawText(text, {
+          x,
+          y: ctx.y - fs,
+          size: fs,
+          font,
+          color,
+          opacity: style?.opacity,
+        })
+
+        if (style?.underline) {
+          const w = font.widthOfTextAtSize(text, fs)
+          page.drawLine({
+            start: { x, y: ctx.y - fs - 2 },
+            end: { x: x + w, y: ctx.y - fs - 2 },
+            thickness: 1,
+          })
+        }
+
+        ctx.y -= lh + (style?.marginBottom ?? 0)
+        return
+      }
+
+      // ===================== IMAGE =====================
+      if (node.type === "image") {
+        const bytes = await resolveImageSource(node.src)
+        const img = await embedImage(pdf, bytes)
+        const base = img.scale(1)
+
+        let w = node.style?.width ?? base.width
+        let h = node.style?.height ?? base.height
+
+        if (node.style?.width && !node.style?.height)
+          h = (base.height / base.width) * w
+
+        if (node.style?.height && !node.style?.width)
+          w = (base.width / base.height) * h
+
+        if (ctx.needBreak(h)) {
+          page = pdf.addPage([size.width, size.height])
+          ctx.reset()
+        }
+
+        page.drawImage(img, {
+          x: ctx.x,
+          y: ctx.y - h,
+          width: w,
+          height: h,
+        })
+
+        ctx.y -= h + (node.style?.marginBottom ?? 0)
+        return
+      }
+
+
+      // ===================== TABLE =====================
+      if (node.type === "table") {
+        for (const r of node.content) await draw(r)
+        ctx.y -= 8
+        return
+      }
+
+      if (node.type === "tr") {
+        const rowH = node.style?.height || 20;
+
+        if (ctx.needBreak(rowH)) {
+          page = pdf.addPage([size.width, size.height])
+          ctx.reset()
+        }
+
+        const tableWidth = size.width - ctx.margin * 2
+        const colCount = node.content.length
+        const colWidth = tableWidth / colCount
+
+        const originalX = ctx.x
+        let x = ctx.margin
+
+        for (const cell of node.content) {
+          if (cell.type !== "td" && cell.type !== "th") continue
+
+          const children = normalizeContent(cell.content)
+          const pad = resolvePadding(cell.style)
+          const startY = ctx.y
+
+          ctx.x = x + pad.left
+          ctx.y -= pad.top
+
+          for (const child of children) {
+            await draw(child)
+          }
+
+          ctx.y = startY
+          x += colWidth
+        }
+
+        ctx.x = originalX
+        ctx.y -= rowH
+        return
+      }
+
+
+
+
+    }
+
+    for (const n of p.page.content) await draw(n)
+  }
+
+  return await pdf.save()
+}
+
+export function RenderPDFPreview({ schema, className }: { schema: PageSchema[], className?: string }) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    (async () => {
+      const bytes = await RenderPDF({ content: schema });
+      const pdfjs = await import("pdfjs-dist/legacy/build/pdf.mjs");
+      pdfjs.GlobalWorkerOptions.workerSrc = "/pdf.worker.min.mjs";
+
+      const pdf = await pdfjs.getDocument({ data: bytes }).promise;
+      if (cancelled) return;
+
+      const page = await pdf.getPage(1);
+      const dpr = 1;
+      const viewport = page.getViewport({ scale: 1 });
+
+      const canvas = canvasRef.current!;
+      const ctx = canvas.getContext("2d")!;
+      canvas.style.width = `${viewport.width}px`;
+      canvas.style.height = `${viewport.height}px`
+      canvas.width = viewport.width;
+      canvas.height = viewport.height;
+
+      const scaledViewport = page.getViewport({ scale: dpr });
+
+      const renderTask = page.render({
+        canvas,
+        canvasContext: ctx,
+        viewport: scaledViewport,
+      });
+
+      await renderTask.promise;
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [schema]);
+
+  return <>
+    <div className={className}>
+      <canvas ref={canvasRef} className="w-full border" />
+    </div>
+  </>
+}

package/components/base.components/index.ts

@@ -0,0 +1,85 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from "./accordion/Accordion.component";
+export * from "./breadcrumb/Breadcrumb.component";
+export * from "./button/Button.component";
+export * from "./button/button.decorate";
+export * from "./button/IconButton.component";
+export * from "./card/AlertCard.component";
+export * from "./card/Card.component";
+export * from "./card/DashboardCard.component";
+export * from "./card/GalleryCard.component";
+export * from "./card/ProductCard.component";
+export * from "./card/ProfileCard.component";
+export * from "./carousel/Carousel.component";
+export * from "./chip/Chip.component";
+export * from "./document/DocumentViewer.component";
+export * from "./document/ExportExcel.component";
+export * from "./document/ImportExcel.component";
+export * from "./document/PrintTable.component";
+export * from "./document/RenderPDF.component";
+export * from "./input/Checkbox.component";
+export * from "./input/Input.component";
+export * from "./input/InputCheckbox.component";
+export * from "./input/InputCurrency.component";
+export * from "./input/InputDate.component";
+export * from "./input/InputDatetime.component";
+export * from "./input/InputDocument.component";
+export * from "./input/InputImage.component";
+export * from "./input/InputMap.component";
+export * from "./input/InputNumber.component";
+export * from "./input/InputOtp.component";
+export * from "./input/InputPassword.component";
+export * from "./input/InputRadio.component";
+export * from "./input/InputTime.component";
+export * from "./input/InputValues.component";
+export * from "./input/Radio.component";
+export * from "./input/Select.component";
+export * from "./modal/BottomSheet.component";
+export * from "./modal/FloatingPage.component";
+export * from "./modal/Modal.component";
+export * from "./modal/ModalConfirm.component";
+export * from "./modal/Toast.component";
+export * from "./nav/Bottombar.component";
+export * from "./nav/Footer.component";
+export * from "./nav/Headbar.component";
+export * from "./nav/Navbar.component";
+export * from "./nav/Sidebar.component";
+export * from "./nav/Tabbar.component";
+export * from "./nav/Wizard.component";
+export * from "./supervision/FormSupervision.component";
+export * from "./supervision/TableSupervision.component";
+export * from "./table/ControlBar.component";
+export * from "./table/FilterComponent";
+export * from "./table/Pagination.component";
+export * from "./table/Table.component";
+export * from "./typography/TypographyArticle.component";
+export * from "./typography/TypographyColumn.component";
+export * from "./typography/TypographyContent.component";
+export * from "./typography/TypographyTips.component";
+export * from "./wrap/Draggable.component";
+export * from "./wrap/IDBProvider";
+export * from "./wrap/Image.component";
+export * from "./wrap/OutsideClick.component";
+export * from "./wrap/ScrollContainer.component";
+export * from "./wrap/ShortcutProvider";
+export * from "./wrap/Swipe.component";
+
+import { registry } from "@utils";
+import { TableComponent } from "./table/Table.component.js";
+import { ButtonComponent } from "./button/Button.component.js";
+import { IconButtonComponent } from "./button/IconButton.component.js";
+import { SelectComponent } from "./input/Select.component.js";
+import { ModalComponent } from "./modal/Modal.component.js";
+import { FilterComponent } from "./table/FilterComponent.js";
+import { useToggleContext } from "../../contexts/index.js";
+
+registry.register("TableComponent", TableComponent);
+registry.register("ButtonComponent", ButtonComponent);
+registry.register("IconButtonComponent", IconButtonComponent);
+registry.register("SelectComponent", SelectComponent);
+registry.register("ModalComponent", ModalComponent);
+registry.register("FilterComponent", FilterComponent);
+registry.register("useToggleContext", useToggleContext);