@postxl/generators 0.2.2

package/dist/frontend-core/template/src/components/ui/spinner/spinner.tsx

@@ -0,0 +1,21 @@
+import { cn } from '@lib/utils'
+
+export function Spinner({ classNames }: Readonly<{ classNames?: string }>) {
+  return (
+    <div className={cn('flex justify-center items-center w-full h-full', classNames)}>
+      <svg
+        className="w-auto text-[inherit] h-full animate-spin"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+    </div>
+  )
+}

package/dist/frontend-core/template/src/components/ui/spreadsheet/engine.ts

@@ -0,0 +1,411 @@
+import { ExhaustiveSwitchCheck } from '@postxl/utils'
+
+import {
+  type AST,
+  AST_Binary,
+  AST_Compare,
+  AST_Function,
+  AST_Range,
+  AST_Reference,
+  AST_Unary,
+  R1C1Parser,
+  type RefSpec,
+} from './parser'
+import { Cell, type CellValue, type DataBlocks, type Model } from './types'
+
+// TYPES -----------------------------------------------------------------------
+
+export type Error = { reason: '#DIV/0!' | '#VALUE!' | '#REF!' | 'Not found!' }
+
+const DIV0: Error = { reason: '#DIV/0!' }
+const VALUE_ERR: Error = { reason: '#VALUE!' }
+const REF_ERR: Error = { reason: '#REF!' }
+const NOT_FOUND: Error = { reason: 'Not found!' }
+
+export type Value = number | string | null | boolean | Error
+
+export type Values = Map<string, Value>
+
+type EvaluateParams = { model: Model; cache: Values; row: number; col: number }
+type ExcelFunction = (node: AST_Function, params: EvaluateParams) => Value
+
+// EVALUATION ------------------------------------------------------------------
+
+export function evaluate(model: Model, data?: DataBlocks): Values {
+  const cache: Values = new Map()
+
+  for (const cell of model.cells) {
+    evaluateCell(cell, model, cache, data)
+  }
+
+  return cache
+}
+
+function evaluateCell(cell: Cell, model: Model, cache: Values, data?: DataBlocks) {
+  const row = cell.r
+  const column = cell.c
+  const key = `${row},${column}`
+
+  const block = cell.binding
+  const blockValue =
+    block?.kind === 'block' ? evaluateBlockFunction(block.name, block.rOff, block.cOff, data) : NOT_FOUND
+
+  if (blockValue !== NOT_FOUND && blockValue !== null) {
+    cache.set(key, blockValue)
+  } else if (cell.formula) {
+    try {
+      const parser = new R1C1Parser(cell.formula)
+      const ast = parser.parse()
+      const value = evaluateCellFromAST(ast, { model, cache, row, col: column })
+
+      cache.set(key, value)
+    } catch {
+      const block = cell.binding
+      const value =
+        block?.kind === 'block' ? evaluateBlockFunction(block.name, block.rOff, block.cOff, data) : NOT_FOUND
+
+      cache.set(key, value)
+    }
+  } else {
+    const value = cell.value === undefined ? null : cell.value
+
+    cache.set(key, value)
+  }
+}
+
+export function evaluateCellFromAST(ast: AST, params: EvaluateParams): Value {
+  return evaluateCellExpression(ast, params)
+}
+
+function evaluateCellExpression(node: AST, params: EvaluateParams): Value {
+  switch (node.t) {
+    case 'num':
+      return node.v
+
+    case 'str':
+      return node.v
+
+    case 'un':
+      return evaluateCellExpression_Unary(node, params)
+
+    case 'bin':
+      return evaluateCellExpression_Binary(node, params)
+
+    case 'cmp':
+      return evaluateCellExpression_Comparison(node, params)
+
+    case 'ref':
+      return evaluateCellExpression_Reference(node, params)
+
+    case 'range':
+      return evaluateCellExpression_Range(node, params)
+
+    case 'fun':
+      return evaluateCellExpression_Function(node, params)
+
+    default:
+      throw new ExhaustiveSwitchCheck(node)
+  }
+}
+
+function evaluateCellExpression_Unary(node: AST_Unary, params: EvaluateParams): Value {
+  const value = evaluateCellExpression(node.expr, params)
+  if (isErr(value)) {
+    return value
+  }
+
+  const number = asNumber(value)
+  if (isErr(number)) {
+    return number
+  }
+
+  return node.op === '-' ? -number : +number
+}
+
+function evaluateCellExpression_Binary(node: AST_Binary, params: EvaluateParams): Value {
+  const left = evaluateCellExpression(node.left, params)
+  if (isErr(left)) {
+    return left
+  }
+
+  const right = evaluateCellExpression(node.right, params)
+  if (isErr(right)) {
+    return right
+  }
+
+  const x = asNumber(left)
+  if (isErr(x)) {
+    return x
+  }
+
+  const y = asNumber(right)
+  if (isErr(y)) {
+    return y
+  }
+
+  switch (node.op) {
+    case '+':
+      return x + y
+    case '-':
+      return x - y
+    case '*':
+      return x * y
+    case '/':
+      return y === 0 ? DIV0 : x / y
+    case '^':
+      return Math.pow(x, y)
+    default:
+      return VALUE_ERR
+  }
+}
+
+function evaluateCellExpression_Comparison(node: AST_Compare, params: EvaluateParams): Value {
+  const left = evaluateCellExpression(node.left, params)
+  if (isErr(left)) {
+    return left
+  }
+
+  const right = evaluateCellExpression(node.right, params)
+  if (isErr(right)) {
+    return right
+  }
+
+  if (node.op === '=') {
+    return left == right
+  }
+
+  if (node.op === '<>') {
+    return left != right
+  }
+
+  if (left === null || right === null) {
+    return VALUE_ERR
+  }
+
+  switch (node.op) {
+    case '<':
+      return left < right
+    case '<=':
+      return left <= right
+    case '>':
+      return left > right
+    case '>=':
+      return left >= right
+    default:
+      return VALUE_ERR
+  }
+}
+
+function evaluateCellExpression_Reference(node: AST_Reference, { row, col, model, cache }: EvaluateParams): Value {
+  const reference = resolveReference(model, row, col, node.ref)
+  if (isErr(reference)) {
+    return reference
+  }
+
+  const key = `${reference.r},${reference.c}`
+
+  return cache.get(key) ?? NOT_FOUND
+}
+
+function evaluateCellExpression_Range(node: AST_Range, { row, col, model }: EvaluateParams): Value {
+  const box = resolveRange(model, row, col, node.a, node.b)
+
+  if (isErr(box)) {
+    return box
+  } else {
+    // Ranges only meaningful inside SUM; return #VALUE! if used directly
+    return VALUE_ERR
+  }
+}
+
+const excelFunctions: Record<AST_Function['name'], ExcelFunction> = {
+  SUM: evaluateCellExpression_Function_Sum,
+  IF: evaluateCellExpression_If,
+  IFERROR: evaluateCellExpression_IfError,
+}
+
+function evaluateCellExpression_Function(node: AST_Function, params: EvaluateParams): Value {
+  const fn = excelFunctions[node.name]
+  if (fn) {
+    return fn(node, params)
+  } else {
+    return VALUE_ERR
+  }
+}
+
+function evaluateCellExpression_Function_Sum(node: AST_Function, params: EvaluateParams): Value {
+  const { model, cache, row, col } = params
+  return node.args.reduce(
+    (total, arg) => {
+      if (isErr(total)) {
+        return total
+      }
+
+      if (arg.t === 'range') {
+        const box = resolveRange(model, row, col, arg.a, arg.b)
+        if (isErr(box)) {
+          return box
+        }
+
+        for (let rr = box.r0; rr <= box.r1; rr++) {
+          for (let cc = box.c0; cc <= box.c1; cc++) {
+            const key = `${rr},${cc}`
+            const v = cache.get(key) ?? NOT_FOUND
+            const n = asNumber(v)
+
+            if (!isErr(n) && Number.isFinite(n)) {
+              total += n
+            }
+          }
+        }
+      } else {
+        const v = evaluateCellExpression(arg, params)
+        const n = asNumber(v)
+
+        if (!isErr(n) && Number.isFinite(n)) {
+          total += n
+        }
+      }
+
+      return total
+    },
+    0 as number | Error,
+  )
+}
+
+function evaluateCellExpression_If(node: AST_Function, params: EvaluateParams): Value {
+  const [cond, a, b] = node.args
+  if (!cond || !a || b === undefined) {
+    return VALUE_ERR
+  }
+
+  const cnd = evaluateCellExpression(cond, params)
+  if (isErr(cnd)) {
+    return cnd
+  }
+
+  return asBoolean(cnd) ? evaluateCellExpression(a, params) : evaluateCellExpression(b, params)
+}
+
+function evaluateCellExpression_IfError(node: AST_Function, params: EvaluateParams): Value {
+  const [a, b] = node.args
+  const a_eval = evaluateCellExpression(a, params)
+
+  if (isErr(a_eval)) {
+    return evaluateCellExpression(b, params)
+  } else {
+    return a_eval
+  }
+}
+
+export function evaluateBlockFunction(
+  blockName: string,
+  rOff: number | undefined,
+  cOff: number | undefined,
+  data?: DataBlocks,
+): Value {
+  // Return null if no data provided or block not found
+  if (!data || !(blockName in data)) {
+    return NOT_FOUND
+  }
+
+  const block = data[blockName]
+  const rowOffset = rOff ?? 0
+  const colOffset = cOff ?? 0
+
+  // Handle scalar values
+  if (!Array.isArray(block)) {
+    return block
+  }
+
+  // Handle 1D arrays
+  if (!Array.isArray(block[0])) {
+    const arr = block as CellValue[]
+    if (colOffset < 0 || colOffset >= arr.length) {
+      return REF_ERR
+    }
+    return arr[colOffset]
+  }
+
+  // Handle 2D arrays
+  const arr2d = block as CellValue[][]
+  if (rowOffset < 0 || rowOffset >= arr2d.length) {
+    return REF_ERR
+  }
+  const row = arr2d[rowOffset]
+  if (!Array.isArray(row)) {
+    return VALUE_ERR
+  }
+  if (colOffset < 0 || colOffset >= row.length) {
+    return REF_ERR
+  }
+  return row[colOffset]
+}
+
+// QUERIES ---------------------------------------------------------------------
+
+function resolveReference(model: Model, row: number, column: number, ref: RefSpec) {
+  const rr = ref.absR ?? row + ref.relR
+  const cc = ref.absC ?? column + ref.relC
+
+  if (rr < 0 || cc < 0 || rr >= model.rows || cc >= model.cols) {
+    return REF_ERR
+  } else {
+    return { r: rr, c: cc }
+  }
+}
+
+function resolveRange(model: Model, row: number, column: number, from: RefSpec, to: RefSpec) {
+  const a = resolveReference(model, row, column, from)
+  if (isErr(a)) {
+    return a
+  }
+
+  const b = resolveReference(model, row, column, to)
+  if (isErr(b)) {
+    return b
+  }
+
+  return {
+    r0: Math.min(a.r, b.r),
+    c0: Math.min(a.c, b.c),
+    r1: Math.max(a.r, b.r),
+    c1: Math.max(a.c, b.c),
+  }
+}
+
+// GUARDS ----------------------------------------------------------------------
+
+export function isErr(value: unknown): value is Error {
+  return !!value && typeof value === 'object' && 'reason' in value
+}
+
+// CONVERSIONS -----------------------------------------------------------------
+
+function asNumber(v: Value): number | Error {
+  if (isErr(v) || v === null) {
+    return VALUE_ERR
+  }
+
+  const number = Number(v)
+
+  return Number.isFinite(number) ? number : VALUE_ERR
+}
+
+function asBoolean(value: Value): boolean {
+  if (isErr(value) || value === null) {
+    return false
+  }
+
+  switch (typeof value) {
+    case 'boolean':
+      return value
+    case 'number':
+      return value !== 0 && !Number.isNaN(value)
+    case 'string':
+      return value.length > 0
+
+    default:
+      return false
+  }
+}

package/dist/frontend-core/template/src/components/ui/spreadsheet/format.ts

@@ -0,0 +1,79 @@
+import { NormalizedFormat } from './types'
+
+export function applyNormalizedFormat(value: number, format: NormalizedFormat) {
+  if (value === 0 && format.zeroPlaceholder) {
+    return format.zeroPlaceholder
+  }
+
+  const abs = Math.abs(value)
+  const decimals = format.decimals ?? 0
+  const useGrouping = format.useGrouping ?? true
+
+  const options: Intl.NumberFormatOptions = {
+    useGrouping,
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  }
+
+  if (format.kind === 'percent') {
+    options.style = 'percent'
+  } else if (format.kind === 'currency' && format.currency) {
+    options.style = 'currency'
+    options.currency = format.currency
+  }
+
+  const intl = new Intl.NumberFormat(navigator.language, options)
+
+  if (value < 0) {
+    return format.negativeStyle === 'parentheses' ? `(${intl.format(abs)})` : `-${intl.format(abs)}`
+  }
+  return intl.format(value)
+}
+
+export function applyExcelFormat(value: number, format: string) {
+  return applyNormalizedFormat(value, parseExcelFormat(value, format))
+}
+
+// Very small subset parser for Excel-ish formats:
+// - sections: positive;negative;zero;text
+// - % detection
+// - decimal place count from '0'/'#'
+// - grouping via commas
+// - negative parentheses if present in the negative section
+// - zero placeholder if third section is a quoted string
+function parseExcelFormat(value: number, format: string) {
+  const [pos = '', neg = '', zero = ''] = format.split(';')
+  const pattern = value < 0 && neg ? neg : value === 0 && zero ? zero : pos // NOSONAR
+  const isPercent = pattern.includes('%')
+
+  const dot = pattern.indexOf('.')
+  let decimals = 0
+  if (dot >= 0) {
+    const tail = pattern.slice(dot + 1)
+    const match = /^[0#]+/.exec(tail)
+    decimals = match ? match[0].length : 0
+  }
+
+  const useGrouping = /[#0],[#0]/.test(pattern) || pattern.includes(',,')
+  const negativeStyle = neg.includes('(') && neg.includes(')') ? 'parentheses' : 'minus'
+  const zeroPlaceholder = zero ? stripQuotes(zero) : undefined
+
+  return {
+    kind: isPercent ? 'percent' : 'decimal',
+    decimals,
+    useGrouping,
+    negativeStyle,
+    zeroPlaceholder,
+  } satisfies NormalizedFormat
+}
+
+function stripQuotes(value: string) {
+  const matches = /"([^"]*)"/.exec(value)
+  const stripped = matches?.[1] ?? value
+
+  return stripped
+}
+
+export function ptToRem(pt: number) {
+  return pt / 12
+}

package/dist/frontend-core/template/src/components/ui/spreadsheet/index.tsx

@@ -0,0 +1,201 @@
+import { useMemo } from 'react'
+
+import { cn } from '@lib/utils'
+import { type Color, toCss } from '@lib/color'
+
+import { evaluate, isErr, type Value } from './engine'
+import { applyExcelFormat, applyNormalizedFormat, ptToRem } from './format'
+import defaultModel from './model.json'
+import { HorizontalAlign, VerticalAlign, type Cell, type DataBlocks, type Model } from './types'
+import { ExhaustiveSwitchCheck } from '@postxl/utils'
+
+// SPREADSHEET -----------------------------------------------------------------
+
+export type SpreadsheetProps = {
+  model?: Model
+  data?: DataBlocks
+} & React.HTMLAttributes<HTMLDivElement>
+
+export function Spreadsheet({ model = defaultModel as Model, data, className, style, ...props }: SpreadsheetProps) {
+  const cells = useMemo(() => {
+    const values = evaluate(model, data)
+    const covered = new Set<string>()
+    const spans = (model.merged ?? []).reduce((map, { r0, c0, r1, c1 }) => {
+      const rowSpan = r1 - r0 + 1
+      const colSpan = c1 - c0 + 1
+
+      map.set(`${r0},${c0}`, { rowSpan, colSpan })
+
+      return map
+    }, new Map<string, { rowSpan: number; colSpan: number }>())
+
+    const config = model.cells.reduce((map, cell) => {
+      map.set(`${cell.r},${cell.c}`, cell)
+      return map
+    }, new Map<string, Cell>())
+
+    const cells: React.ReactNode[] = []
+
+    for (let r = 0; r < model.rows; r++) {
+      for (let c = 0; c < model.cols; c++) {
+        const key = `${r},${c}`
+
+        if (covered.has(key)) {
+          continue
+        }
+
+        // Base cell info (may be blank)
+        const cell = config.get(key)
+
+        // Determine span from (1) explicit per-cell, else (2) merged map, else (3) 1x1
+        const rowSpan = cell?.rowSpan ?? spans.get(key)?.rowSpan ?? 1
+        const colSpan = cell?.colSpan ?? spans.get(key)?.colSpan ?? 1
+
+        // Mark covered cells (excluding the anchor itself)
+        if (rowSpan > 1 || colSpan > 1) {
+          for (let rr = r; rr < r + rowSpan; rr++) {
+            for (let cc = c; cc < c + colSpan; cc++) {
+              if (rr === r && cc === c) {
+                continue
+              }
+
+              covered.add(`${rr},${cc}`)
+            }
+          }
+        }
+
+        cells.push(cell ? <Cell key={key} config={cell} value={values.get(key) ?? cell.value} /> : <div key={key} />)
+      }
+    }
+
+    return cells
+  }, [model, data])
+
+  const gridTemplateColumns = useMemo(() => {
+    const widths = model.colWidths
+      ? Array.from({ length: Math.max(model.colWidths.length, model.cols) }, (_, i) => model.colWidths?.[i] ?? 96)
+      : new Array(model.cols).fill(96)
+
+    return widths.map((w) => `${w}px`).join(' ')
+  }, [model])
+
+  const gridTemplateRows = useMemo(() => {
+    const heights = model.rowHeights
+      ? Array.from({ length: Math.max(model.rowHeights.length, model.rows) }, (_, i) => model.rowHeights?.[i] ?? 24)
+      : new Array(model.rows).fill(24)
+
+    return heights.map((h) => `${h}px`).join(' ')
+  }, [model])
+
+  return (
+    <div
+      className={cn(className, 'grid bg-white w-max h-max')}
+      style={{ gridTemplateColumns, gridTemplateRows, ...style }}
+      {...props}
+    >
+      {cells}
+    </div>
+  )
+}
+
+// CELL ------------------------------------------------------------------------
+
+type CellProps = Readonly<{
+  config: Cell
+  value: Value
+}>
+
+function toJustify(input: HorizontalAlign | null | undefined, value: Value): React.CSSProperties['justifyContent'] {
+  switch (input) {
+    case 'left':
+      return 'flex-start'
+    case 'right':
+      return 'flex-end'
+    case 'center':
+      return 'center'
+    case undefined:
+    case null:
+      return typeof value === 'number' ? 'flex-end' : 'flex-start'
+    default:
+      throw new ExhaustiveSwitchCheck(input)
+  }
+}
+
+function toAlign(input: VerticalAlign | null | undefined): React.CSSProperties['alignItems'] {
+  switch (input) {
+    case 'top':
+      return 'flex-start'
+    case 'bottom':
+      return 'flex-end'
+    case 'center':
+      return 'center'
+    case undefined:
+    case null:
+      return 'center' // default Excel is baseline-ish; center looks nicer for a grid preview
+    default:
+      throw new ExhaustiveSwitchCheck(input)
+  }
+}
+function Cell({ config, value }: CellProps) {
+  const whiteSpace = config.align?.wrapText ? 'normal' : 'nowrap'
+
+  const style: React.CSSProperties = {
+    gridColumn: `${config.c + 1} / span ${config.colSpan ?? 1}`,
+    gridRow: `${config.r + 1} / span ${config.rowSpan ?? 1}`,
+    display: 'flex',
+    justifyContent: toJustify(config.align?.horizontal, value),
+    alignItems: toAlign(config.align?.vertical),
+    padding: '2px 6px',
+    whiteSpace,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    borderTop: config.borders?.top ? toCellBorder(config.borders.top) : undefined,
+    borderLeft: config.borders?.left ? toCellBorder(config.borders.left) : undefined,
+    borderRight: config.borders?.right ? toCellBorder(config.borders.right) : undefined,
+    borderBottom: config.borders?.bottom ? toCellBorder(config.borders.bottom) : undefined,
+    fontFamily: config.font?.name,
+    fontSize: config.font?.size ? `${ptToRem(config.font.size)}rem` : '1rem',
+    fontWeight: config.font?.bold ? 700 : undefined,
+    fontStyle: config.font?.italic ? 'italic' : undefined,
+    textDecoration: config.font?.underline ? 'underline' : undefined,
+    color: config.font?.color ? toCss(config.font.color) : undefined,
+    background: config.fill?.color ? toCss(config.fill.color) : undefined,
+  }
+
+  const text = useMemo(() => {
+    switch (typeof value) {
+      case 'number': {
+        if (config.fmt?.normalized) {
+          return applyNormalizedFormat(value, config.fmt.normalized)
+        } else if (config.fmt?.numberFormat) {
+          return applyExcelFormat(value, config.fmt.numberFormat)
+        } else if (isErr(value)) {
+          return value.reason
+        } else if (value === null) {
+          return ''
+        } else {
+          return String(value)
+        }
+      }
+
+      case 'string':
+        return value
+
+      default:
+        return ''
+    }
+  }, [config.fmt, value])
+
+  return (
+    <div style={style} title={text}>
+      {text}
+    </div>
+  )
+}
+
+function toCellBorder(side: { style?: 'solid' | 'dashed' | 'dotted'; color?: Color }) {
+  const style = side.style || 'solid'
+  const color = side.color ? toCss(side.color) : '#DDE1E6'
+
+  return `1px ${style} ${color}`
+}