boxwood 2.1.0 → 2.2.0

package/index.js

@@ -509,6 +509,27 @@ function decamelize(string) {
 
 function stylesheet(input) {
   const object = { ...input }
+  function render(object, selector = "") {
+    let result = []
+    for (const key in object) {
+      const value = object[key]
+      if (value && typeof value === "object") {
+        if (key.startsWith("@")) {
+          result.push(`${key}{${render(value, selector)}}`)
+        } else {
+          const nextSelector = selector ? `${selector} ${key}` : key
+          result.push(render(value, nextSelector))
+        }
+      } else {
+        if (selector) {
+          result.push(`${selector}{${decamelize(key)}:${value};}`)
+        } else {
+          result.push(`${decamelize(key)}:${value};`)
+        }
+      }
+    }
+    return result.join("")
+  }
   return {
     add(item) {
       for (const key in item) {
@@ -519,14 +540,7 @@ function stylesheet(input) {
       object[key] = value
     },
     toString() {
-      let result = []
-      for (const key in object) {
-        const value = object[key]
-        if (value) {
-          result.push(`${decamelize(key)}:${value}`)
-        }
-      }
-      return result.join(";")
+      return render(object)
     },
   }
 }

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "boxwood",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Compile HTML templates into JS",
   "main": "index.js",
   "types": "index.d.ts",
   "exports": {
     ".": "./index.js",
-    "./adapters/express": "./adapters/express/index.js"
+    "./adapters/express": "./adapters/express/index.js",
+    "./ui": "./ui/index.js"
   },
   "scripts": {
     "test": "node --test --test-reporter=dot \"test/**/*.test.js\" \"test/**/*.spec.js\"",

package/ui/Group/index.js

@@ -0,0 +1,39 @@
+const { css, component, Div } = require("../..")
+const {
+  normalizeGap,
+  normalizeFlex,
+  normalizeBreakpoint,
+  normalizeWidth,
+} = require("../normalize")
+
+function Group({ align, breakpoint, justify, gap, width, style }, children) {
+  gap = normalizeGap(gap)
+  align = normalizeFlex(align)
+  justify = normalizeFlex(justify)
+  breakpoint = normalizeBreakpoint(breakpoint)
+  width = normalizeWidth(width)
+
+  const styleObject = {
+    display: "flex",
+    "flex-direction": "row",
+    ...(gap && { gap }),
+    ...(align && { "align-items": align }),
+    ...(justify && { "justify-content": justify }),
+    ...(width && { width }),
+    ...(breakpoint && {
+      [`@media (max-width: ${breakpoint})`]: {
+        "flex-direction": "column",
+      },
+    }),
+  }
+
+  const styles = css`
+    .group {
+      ${css.create(styleObject).toString()}
+    }
+  `
+
+  return [Div({ className: styles.group, style }, children), styles.css]
+}
+
+module.exports = component(Group)

package/ui/Stack/index.js

@@ -0,0 +1,28 @@
+const { css, component, Div } = require("../..")
+const { normalizeGap, normalizeFlex, normalizeWidth } = require("../normalize")
+
+function Stack({ align, justify, gap, width, style }, children) {
+  gap = normalizeGap(gap)
+  align = normalizeFlex(align)
+  justify = normalizeFlex(justify)
+  width = normalizeWidth(width)
+
+  const styleObject = {
+    display: "flex",
+    "flex-direction": "column",
+    ...(gap && { gap }),
+    ...(align && { "align-items": align }),
+    ...(justify && { "justify-content": justify }),
+    ...(width && { width }),
+  }
+
+  const styles = css`
+    .stack {
+      ${css.create(styleObject).toString()}
+    }
+  `
+
+  return [Div({ className: styles.stack, style }, children), styles.css]
+}
+
+module.exports = component(Stack)

package/ui/index.js

@@ -0,0 +1,7 @@
+const Group = require("./Group")
+const Stack = require("./Stack")
+
+module.exports = {
+  Group,
+  Stack,
+}

package/ui/normalize.js

@@ -0,0 +1,66 @@
+function normalizeFlex(align) {
+  switch (align) {
+    case "start":
+      return "flex-start"
+    case "end":
+      return "flex-end"
+    default:
+      return align
+  }
+}
+
+const GAP_MAP = {
+  xs: "0.25rem",
+  sm: "0.5rem",
+  md: "1rem",
+  lg: "2rem",
+  xl: "4rem",
+  none: null,
+}
+
+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
+}
+
+const BREAKPOINT_MAP = {
+  xs: "575px",
+  sm: "767px",
+  md: "991px",
+  lg: "1199px",
+  xl: "1399px",
+}
+
+function normalizeBreakpoint(breakpoint) {
+  if (typeof breakpoint === "number") {
+    return `${breakpoint}px`
+  }
+  if (BREAKPOINT_MAP.hasOwnProperty(breakpoint)) {
+    return BREAKPOINT_MAP[breakpoint]
+  }
+  return breakpoint
+}
+
+function normalizeWidth(width) {
+  if (typeof width === "number") {
+    return `${width}px`
+  }
+  return width
+}
+
+module.exports = {
+  normalizeFlex,
+  normalizeGap,
+  normalizeBreakpoint,
+  normalizeWidth,
+}

package/.claude/settings.local.json

@@ -1,11 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(node test:*)",
-      "Bash(mkdir:*)",
-      "Bash(npm test:*)",
-      "Bash(mv:*)"
-    ],
-    "deny": []
-  }
-}