boxwood 2.11.0 → 2.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boxwood",
-  "version": "2.11.0",
+  "version": "2.13.0",
   "description": "Compile HTML templates into JS",
   "main": "index.js",
   "types": "index.d.ts",

package/ui/grid/index.js

@@ -1,5 +1,6 @@
 const { component, css, Div } = require("../..")
 const { normalizeGap, normalizeBreakpoint } = require("../normalize")
+const { toNumber } = require("../normalize")
 
 const BREAKPOINTS = {
   xl: "1199px",
@@ -15,6 +16,9 @@ function Grid(
   gap = normalizeGap(gap)
   breakpoint = normalizeBreakpoint(breakpoint)
 
+  // Normalize columns: convert string numbers to numbers
+  columns = toNumber(columns)
+
   const styleObject = {
     "box-sizing": "border-box",
     display: "grid",
@@ -27,10 +31,11 @@ function Grid(
     }),
     ...(typeof columns === "object" &&
       Object.keys(columns).reduce((object, key) => {
-        const value =
-          typeof columns[key] === "number"
-            ? `repeat(${columns[key]}, 1fr)`
-            : columns[key]
+        let value = toNumber(columns[key])
+        value =
+          typeof value === "number"
+            ? `repeat(${value}, 1fr)`
+            : value
         if (key === "default") {
           object["grid-template-columns"] = value
         } else if (typeof key === "string") {

package/ui/markdown/index.js

@@ -21,6 +21,11 @@ const {
 } = require("../..")
 
 const { format } = require("./utilities/format")
+const {
+  parseCustomTag,
+  resolveAttributes,
+} = require("./utilities/parseCustomTag")
+const { replaceVariables } = require("./utilities/replaceVariables")
 
 const ORDERED_LIST_REGEXP = /^\d+\.\s/
 const UNORDERED_MARKERS = ["- ", "— ", "– ", "• "]
@@ -55,6 +60,19 @@ function Markdown(params, children) {
     return null
   }
 
+  const customComponents = params && params.components
+  const data = params && params.data
+
+  // Filter out special params that shouldn't be passed to HTML elements
+  const htmlParams = params
+    ? Object.keys(params).reduce((acc, key) => {
+        if (key !== "components" && key !== "data") {
+          acc[key] = params[key]
+        }
+        return acc
+      }, {})
+    : {}
+
   // First pass: detect code blocks before processing lines
   const allLines = children.trim().split("\n")
   const items = []
@@ -64,6 +82,68 @@ function Markdown(params, children) {
     const line = allLines[i]
     const trimmed = line.trim()
 
+    // Check for custom component tags first
+    const customTag = parseCustomTag(line, customComponents)
+    if (customTag) {
+      if (customTag.type === "custom-component" && customTag.selfClosing) {
+        // Self-closing custom component
+        items.push({
+          type: "custom-component",
+          tagName: customTag.tagName,
+          component: customTag.component,
+          attributes: customTag.attributes,
+          selfClosing: true,
+          indent: line.length - line.trimStart().length,
+        })
+        i++
+        continue
+      } else if (customTag.type === "custom-component-open") {
+        // Opening tag of a custom component
+        const openIndent = line.length - line.trimStart().length
+        const tagName = customTag.tagName
+        const componentFn = customTag.component
+        const attributes = customTag.attributes
+        const contentLines = []
+        i++ // Move past opening tag
+
+        // Collect content until closing tag
+        let depth = 1
+        while (i < allLines.length && depth > 0) {
+          const contentLine = allLines[i]
+          const contentTag = parseCustomTag(contentLine, customComponents)
+
+          if (contentTag && contentTag.tagName === tagName) {
+            if (contentTag.type === "custom-component-open") {
+              depth++
+              contentLines.push(contentLine)
+            } else if (contentTag.type === "custom-component-close") {
+              depth--
+              if (depth === 0) {
+                // Found matching closing tag
+                i++
+                break
+              }
+              contentLines.push(contentLine)
+            }
+          } else {
+            contentLines.push(contentLine)
+          }
+          i++
+        }
+
+        items.push({
+          type: "custom-component",
+          tagName,
+          component: componentFn,
+          attributes,
+          content: contentLines.join("\n"),
+          selfClosing: false,
+          indent: openIndent,
+        })
+        continue
+      }
+    }
+
     // Check for code block start
     if (trimmed.startsWith("```")) {
       const language = trimmed.substring(3).trim()
@@ -169,7 +249,8 @@ function Markdown(params, children) {
       }
 
       // Process current item at the correct indent level
-      const content = [format(item.content, INLINE_COMPONENTS)]
+      const processedContent = replaceVariables(item.content, data)
+      const content = [format(processedContent, INLINE_COMPONENTS)]
       currentIndex++
 
       // Check if next item is a nested list
@@ -180,11 +261,11 @@ function Markdown(params, children) {
         currentIndex = nestedResult.nextIndex
       }
 
-      list.push(Li(params, content))
+      list.push(Li(htmlParams, content))
     }
 
     const listElement =
-      parentListType === "ul" ? Ul(params, list) : Ol(params, list)
+      parentListType === "ul" ? Ul(htmlParams, list) : Ol(htmlParams, list)
 
     return { list: listElement, nextIndex: currentIndex }
   }
@@ -192,7 +273,20 @@ function Markdown(params, children) {
   while (i < items.length) {
     const item = items[i]
 
-    if (item.type === "li") {
+    if (item.type === "custom-component") {
+      // Handle custom component
+      const resolvedAttrs = resolveAttributes(item.attributes, data)
+
+      if (item.selfClosing) {
+        // Self-closing component
+        nodes.push(item.component(resolvedAttrs))
+      } else {
+        // Component with children - recursively process markdown content
+        const childContent = item.content ? Markdown(params, item.content) : []
+        nodes.push(item.component(resolvedAttrs, childContent))
+      }
+      i++
+    } else if (item.type === "li") {
       const result = parseList(i, item.indent)
       nodes.push(result.list)
       i = result.nextIndex
@@ -204,26 +298,30 @@ function Markdown(params, children) {
         i++
       }
 
+      const content = replaceVariables(lines.join("\n"), data)
       nodes.push(
         Blockquote(
-          params,
-          P(params, format(lines.join("\n"), INLINE_COMPONENTS)),
+          htmlParams,
+          P(htmlParams, format(content, INLINE_COMPONENTS)),
         ),
       )
     } else if (item.type === "hr") {
-      nodes.push(Hr(params))
+      nodes.push(Hr(htmlParams))
       i++
     } else if (item.type === "pre") {
       // Code blocks - wrap in <pre><code>
       const codeParams = item.language
         ? { class: `language-${item.language}` }
         : {}
-      nodes.push(Pre(params, Code(codeParams, item.content)))
+      nodes.push(Pre(htmlParams, Code(codeParams, item.content)))
       i++
     } else {
       const { type, content } = item
       const Component = COMPONENTS[type] || P
-      nodes.push(Component(params, format(content, INLINE_COMPONENTS)))
+      const processedContent = replaceVariables(content, data)
+      nodes.push(
+        Component(htmlParams, format(processedContent, INLINE_COMPONENTS)),
+      )
       i++
     }
   }

package/ui/markdown/utilities/parseCustomTag.js

@@ -0,0 +1,198 @@
+/**
+ * Parse a custom component tag from markdown
+ * Supports both <Component attr="value"> and <Component attr={variable}>
+ * @param {string} line - The line to parse
+ * @param {Object} customComponents - Map of component names to functions
+ * @returns {Object|null} - Parsed tag info or null if not a custom tag
+ */
+function parseCustomTag(line, customComponents) {
+  if (!customComponents || typeof customComponents !== "object") {
+    return null
+  }
+
+  const trimmed = line.trim()
+
+  // Check for self-closing tag: <ComponentName ... /> (space before / is optional)
+  const selfClosingMatch = trimmed.match(
+    /^<([A-Za-z][A-Za-z0-9-]*)(\s+[^>]*)?\s*\/>\s*$/,
+  )
+  if (selfClosingMatch) {
+    const [, tagName, attributesStr] = selfClosingMatch
+    const component = customComponents[tagName]
+    if (component) {
+      const attributes = parseAttributes(attributesStr || "")
+      return {
+        type: "custom-component",
+        tagName,
+        component,
+        attributes,
+        selfClosing: true,
+      }
+    }
+  }
+
+  // Check for opening tag: <ComponentName ...>
+  const openTagMatch = trimmed.match(
+    /^<([A-Za-z][A-Za-z0-9-]*)(\s+[^>]*)?>\s*$/,
+  )
+  if (openTagMatch) {
+    const [, tagName, attributesStr] = openTagMatch
+    const component = customComponents[tagName]
+    if (component) {
+      const attributes = parseAttributes(attributesStr || "")
+      return {
+        type: "custom-component-open",
+        tagName,
+        component,
+        attributes,
+        selfClosing: false,
+      }
+    }
+  }
+
+  // Check for closing tag: </ComponentName>
+  const closeTagMatch = trimmed.match(/^<\/([A-Za-z][A-Za-z0-9-]*)>\s*$/)
+  if (closeTagMatch) {
+    const [, tagName] = closeTagMatch
+    const component = customComponents[tagName]
+    if (component) {
+      return {
+        type: "custom-component-close",
+        tagName,
+        component,
+      }
+    }
+  }
+
+  return null
+}
+
+/**
+ * Parse attributes from a tag string
+ * Supports: attr="value", attr='value', attr={variable}, attr
+ * @param {string} attributesStr - The attributes string
+ * @returns {Object} - Parsed attributes
+ */
+function parseAttributes(attributesStr) {
+  const attributes = {}
+  if (!attributesStr || !attributesStr.trim()) {
+    return attributes
+  }
+
+  const str = attributesStr.trim()
+  let i = 0
+
+  while (i < str.length) {
+    // Skip whitespace
+    while (i < str.length && /\s/.test(str[i])) {
+      i++
+    }
+
+    if (i >= str.length) break
+
+    // Parse attribute name
+    let nameStart = i
+    while (i < str.length && /[a-zA-Z0-9-_:]/.test(str[i])) {
+      i++
+    }
+
+    const name = str.substring(nameStart, i)
+    if (!name) break
+
+    // Skip whitespace after name
+    while (i < str.length && /\s/.test(str[i])) {
+      i++
+    }
+
+    // Check for =
+    if (i >= str.length || str[i] !== "=") {
+      // Boolean attribute
+      attributes[name] = true
+      continue
+    }
+
+    i++ // Skip =
+
+    // Skip whitespace after =
+    while (i < str.length && /\s/.test(str[i])) {
+      i++
+    }
+
+    if (i >= str.length) break
+
+    // Parse value
+    const quote = str[i]
+
+    if (quote === '"' || quote === "'") {
+      // Quoted string
+      i++ // Skip opening quote
+      let value = ""
+      while (i < str.length && str[i] !== quote) {
+        if (str[i] === "\\" && i + 1 < str.length) {
+          // Escaped character - add the next character literally
+          value += str[i + 1]
+          i += 2
+        } else {
+          value += str[i]
+          i++
+        }
+      }
+      attributes[name] = value
+      if (i < str.length) i++ // Skip closing quote
+    } else if (str[i] === "{") {
+      // Variable reference
+      i++ // Skip {
+      const valueStart = i
+      while (i < str.length && str[i] !== "}") {
+        i++
+      }
+      const variableName = str.substring(valueStart, i).trim()
+      attributes[name] = { __variable: variableName }
+      if (i < str.length) i++ // Skip }
+    } else {
+      // Unquoted value (until space or end)
+      const valueStart = i
+      while (i < str.length && !/\s/.test(str[i])) {
+        i++
+      }
+      const value = str.substring(valueStart, i)
+      attributes[name] = value
+    }
+  }
+
+  return attributes
+}
+
+/**
+ * Resolve attributes by replacing variable references with actual values
+ * @param {Object} attributes - Attributes with possible variable references
+ * @param {Object} data - Data object containing variable values
+ * @returns {Object} - Resolved attributes
+ */
+function resolveAttributes(attributes, data) {
+  if (!attributes || typeof attributes !== "object") {
+    return {}
+  }
+
+  const resolved = {}
+  for (const [key, value] of Object.entries(attributes)) {
+    if (value && typeof value === "object" && value.__variable) {
+      // Resolve variable
+      const variableName = value.__variable
+      resolved[key] =
+        data && data[variableName] !== undefined
+          ? data[variableName]
+          : undefined
+    } else {
+      resolved[key] = value
+    }
+  }
+
+  return resolved
+}
+
+module.exports = {
+  parseCustomTag,
+  parseAttributes,
+  resolveAttributes,
+}

package/ui/markdown/utilities/replaceVariables.js

@@ -0,0 +1,80 @@
+/**
+ * Replace {variableName} placeholders in text with actual values from data
+ * @param {string} text - Text containing variable placeholders
+ * @param {Object} data - Data object with variable values
+ * @returns {string|Array} - Text with variables replaced, or array if mixed content
+ */
+function replaceVariables(text, data) {
+  if (!text || typeof text !== "string") {
+    return text
+  }
+
+  if (!data || typeof data !== "object") {
+    return text
+  }
+
+  // Check if text contains any variables
+  if (!text.includes("{") || !text.includes("}")) {
+    return text
+  }
+
+  const result = []
+  let i = 0
+  let lastIndex = 0
+
+  while (i < text.length) {
+    if (text[i] === "\\" && text[i + 1] === "{") {
+      // Escaped opening brace
+      result.push(text.substring(lastIndex, i))
+      result.push("{")
+      i += 2
+      lastIndex = i
+      continue
+    }
+
+    if (text[i] === "{") {
+      const closeIndex = text.indexOf("}", i + 1)
+
+      if (closeIndex !== -1) {
+        // Found a variable placeholder
+        const variableName = text.substring(i + 1, closeIndex).trim()
+
+        if (variableName) {
+          // Add text before the variable
+          if (i > lastIndex) {
+            result.push(text.substring(lastIndex, i))
+          }
+
+          // Add the variable value
+          const value = data[variableName]
+          if (value !== undefined && value !== null) {
+            result.push(String(value))
+          } else {
+            // Variable not found, keep the placeholder
+            result.push(text.substring(i, closeIndex + 1))
+          }
+
+          i = closeIndex + 1
+          lastIndex = i
+          continue
+        }
+      }
+    }
+
+    i++
+  }
+
+  // Add remaining text
+  if (lastIndex < text.length) {
+    result.push(text.substring(lastIndex))
+  }
+
+  // If no substitutions were made, return original text
+  if (result.length === 0) {
+    return text
+  }
+
+  return result.join("")
+}
+
+module.exports = { replaceVariables }

package/ui/normalize.js

@@ -1,3 +1,28 @@
+/**
+ * Converts string numbers to integers
+ * @param {string|number} value - The value to convert
+ * @returns {number|string} - Integer if string is numeric, otherwise original value
+ */
+function toNumber(value) {
+  if (typeof value === "string" && /^\d+$/.test(value)) {
+    return parseInt(value, 10)
+  }
+  return value
+}
+
+/**
+ * Converts number or string number to pixel value
+ * @param {string|number} value - The value to convert
+ * @returns {string|number} - Value with px suffix if numeric, otherwise original value
+ */
+function toPixels(value) {
+  value = toNumber(value)
+  if (typeof value === "number") {
+    return `${value}px`
+  }
+  return value
+}
+
 function normalizeFlex(align) {
   switch (align) {
     case "start":
@@ -22,15 +47,12 @@ function normalizeGap(gap) {
   if (!gap) {
     return "1rem"
   }
-  if (typeof gap === "number") {
-    return `${gap}px`
-  }
-
+  
   if (GAP_MAP.hasOwnProperty(gap)) {
     return GAP_MAP[gap]
   }
 
-  return gap
+  return toPixels(gap)
 }
 
 const BREAKPOINT_MAP = {
@@ -42,20 +64,14 @@ const BREAKPOINT_MAP = {
 }
 
 function normalizeBreakpoint(breakpoint) {
-  if (typeof breakpoint === "number") {
-    return `${breakpoint}px`
-  }
   if (BREAKPOINT_MAP.hasOwnProperty(breakpoint)) {
     return BREAKPOINT_MAP[breakpoint]
   }
-  return breakpoint
+  return toPixels(breakpoint)
 }
 
 function normalizeWidth(width) {
-  if (typeof width === "number") {
-    return `${width}px`
-  }
-  return width
+  return toPixels(width)
 }
 
 const SPACING_MAP = {
@@ -68,16 +84,15 @@ const SPACING_MAP = {
 }
 
 function normalizeSpacing(spacing) {
-  if (typeof spacing === "number") {
-    return `${spacing}px`
-  }
   if (SPACING_MAP.hasOwnProperty(spacing)) {
     return SPACING_MAP[spacing]
   }
-  return spacing
+  return toPixels(spacing)
 }
 
 module.exports = {
+  toNumber,
+  toPixels,
   normalizeFlex,
   normalizeGap,
   normalizeBreakpoint,