@skalfa/skalfa-app 1.0.2 → 1.0.5

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

@@ -1,416 +0,0 @@
-"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

@@ -1,85 +0,0 @@
-/**
- * @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);

package/components/base.components/input/Checkbox.component.tsx

@@ -1,109 +0,0 @@
-"use client"
-
-import { ReactNode, useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCheck } from "@fortawesome/free-solid-svg-icons";
-import { cn, pcn, useInputRandomId } from "@utils";
-
-
-
-type CT  =  "label" | "checked" | "error" | "base";
-
-export type CheckboxProps = {
-  name    :  string;
-  label  ?:  string | ReactNode;
-  
-  value     ?:  string;
-  disabled  ?:  boolean;
-  checked   ?:  boolean;
-  invalid   ?:  string;
-  
-  onChange  ?:  () => void;
-
-  /** Use custom class with: "label::", "checked::", "error::". */
-  className  ?:  string;
-};
-
-
-
-export function CheckboxComponent({
-  name,
-  label,
-
-  value,
-  disabled = false,
-  checked = false,
-  invalid,
-
-  onChange,
-
-  className = "",
-}: CheckboxProps) {
-
-
-  // =========================>
-  // ## Initial
-  // =========================>
-  const randomId                             =  useInputRandomId()
-  const [invalidMessage, setInvalidMessage]  =  useState("");
-
-
-  // =========================>
-  // ## Invalid handler
-  // =========================>
-  useEffect(() => {
-    setInvalidMessage(invalid || "");
-  }, [invalid]);
-
-
-  return (
-    <div className={`flex flex-col gap-1`}>
-      <input
-        type="checkbox"
-        className="hidden"
-        id={randomId}
-        name={name}
-        onChange={onChange}
-        defaultChecked={checked}
-        value={value}
-        disabled={disabled}
-      />
-
-      <label
-        htmlFor={randomId}
-        className={cn(
-        "flex gap-2 items-center cursor-pointer active:scale-x-[102%]",
-        disabled && "pointer-events-none opacity-60"
-        )}
-      >
-        <div>
-          <div
-            className={cn(
-              `flex justify-center items-center rounded-md border w-6 h-6 transition-colors border-light-foreground text-light-foreground`,
-              checked && "border-light-primary bg-primary !text-background",
-              checked && pcn<CT>(className, "checked"),
-              pcn<CT>(className, "base"),
-            )}
-          >
-            {checked && <FontAwesomeIcon icon={faCheck} className="text-sm" />}
-          </div>
-        </div>
-        <span
-          className={cn(
-            "whitespace-nowrap",
-            checked && "font-semibold",
-            pcn<CT>(className, "label"),
-            checked && pcn<CT>(className, "label", "checked"),
-            disabled && pcn<CT>(className, "label", "disabled"),
-          )}
-        >
-          {label}
-        </span>
-      </label>
-
-      {invalidMessage && (
-        <small className={cn("input-error-message", pcn<CT>(className, "error"))}>{invalidMessage}</small>
-      )}
-    </div>
-  );
-}