boxwood 2.2.0 → 2.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boxwood",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "Compile HTML templates into JS",
   "main": "index.js",
   "types": "index.d.ts",
@@ -10,8 +10,8 @@
     "./ui": "./ui/index.js"
   },
   "scripts": {
-    "test": "node --test --test-reporter=dot \"test/**/*.test.js\" \"test/**/*.spec.js\"",
-    "test:debug": "node --test --test-reporter=spec \"test/**/*.test.js\" \"test/**/*.spec.js\"",
+    "test": "node --test --test-reporter=dot \"**/*.test.js\" \"**/*.spec.js\"",
+    "test:debug": "node --test --test-reporter=spec \"**/*.test.js\" \"**/*.spec.js\"",
     "coverage": "c8 npm test",
     "benchmark": "node --test benchmark/index.js",
     "watch": "npm test -- --watch",

package/ui/container/index.js

@@ -0,0 +1,47 @@
+const { css, component, Div } = require("../..")
+
+const normalizeValue = (value) => {
+  if (typeof value === "string") {
+    if (value.endsWith("px")) {
+      return parseInt(value, 10)
+    }
+    if (value.endsWith("rem")) {
+      return parseInt(value, 10) * 16
+    }
+    throw new Error(
+      "Width must be a number or a string ending with 'px' or 'rem'"
+    )
+  }
+  return value
+}
+
+function Container(
+  { className, style, width = 1200, padding = 16 } = {},
+  children
+) {
+  width = normalizeValue(width)
+  padding = normalizeValue(padding)
+  const styles = css`
+    .container {
+      box-sizing: border-box;
+      margin-left: auto;
+      margin-right: auto;
+      max-width: ${width}px;
+      padding-left: ${padding}px;
+      padding-right: ${padding}px;
+      width: 100%;
+    }
+
+    @media (max-width: ${width + padding * 2 - 1}px) {
+      .container {
+        max-width: 100%;
+      }
+    }
+  `
+  return [
+    Div({ className: [styles.container, className], style }, children),
+    styles.css,
+  ]
+}
+
+module.exports = component(Container)

package/ui/{Group → group}/index.js

@@ -4,22 +4,31 @@ const {
   normalizeFlex,
   normalizeBreakpoint,
   normalizeWidth,
+  normalizeSpacing,
 } = require("../normalize")
 
-function Group({ align, breakpoint, justify, gap, width, style }, children) {
+function Group(
+  { align, className, breakpoint, justify, gap, width, margin, padding, style },
+  children
+) {
   gap = normalizeGap(gap)
   align = normalizeFlex(align)
   justify = normalizeFlex(justify)
   breakpoint = normalizeBreakpoint(breakpoint)
   width = normalizeWidth(width)
+  margin = normalizeSpacing(margin)
+  padding = normalizeSpacing(padding)
 
   const styleObject = {
+    "box-sizing": "border-box",
     display: "flex",
     "flex-direction": "row",
     ...(gap && { gap }),
     ...(align && { "align-items": align }),
     ...(justify && { "justify-content": justify }),
     ...(width && { width }),
+    ...(margin && { margin }),
+    ...(padding && { padding }),
     ...(breakpoint && {
       [`@media (max-width: ${breakpoint})`]: {
         "flex-direction": "column",
@@ -33,7 +42,10 @@ function Group({ align, breakpoint, justify, gap, width, style }, children) {
     }
   `
 
-  return [Div({ className: styles.group, style }, children), styles.css]
+  return [
+    Div({ className: [styles.group, className], style }, children),
+    styles.css,
+  ]
 }
 
 module.exports = component(Group)

package/ui/index.js

@@ -1,7 +1,9 @@
-const Group = require("./Group")
-const Stack = require("./Stack")
+const Container = require("./container")
+const Group = require("./group")
+const Stack = require("./stack")
 
 module.exports = {
+  Container,
   Group,
   Stack,
 }

package/ui/normalize.js

@@ -58,9 +58,29 @@ function normalizeWidth(width) {
   return width
 }
 
+const SPACING_MAP = {
+  xs: "0.25rem",
+  sm: "0.5rem",
+  md: "1rem",
+  lg: "2rem",
+  xl: "4rem",
+  none: null,
+}
+
+function normalizeSpacing(spacing) {
+  if (typeof spacing === "number") {
+    return `${spacing}px`
+  }
+  if (SPACING_MAP.hasOwnProperty(spacing)) {
+    return SPACING_MAP[spacing]
+  }
+  return spacing
+}
+
 module.exports = {
   normalizeFlex,
   normalizeGap,
   normalizeBreakpoint,
   normalizeWidth,
+  normalizeSpacing,
 }

package/ui/{Stack → stack}/index.js

@@ -1,19 +1,32 @@
 const { css, component, Div } = require("../..")
-const { normalizeGap, normalizeFlex, normalizeWidth } = require("../normalize")
+const {
+  normalizeGap,
+  normalizeFlex,
+  normalizeWidth,
+  normalizeSpacing,
+} = require("../normalize")
 
-function Stack({ align, justify, gap, width, style }, children) {
+function Stack(
+  { align, className, justify, gap, width, margin, padding, style },
+  children
+) {
   gap = normalizeGap(gap)
   align = normalizeFlex(align)
   justify = normalizeFlex(justify)
   width = normalizeWidth(width)
+  margin = normalizeSpacing(margin)
+  padding = normalizeSpacing(padding)
 
   const styleObject = {
+    "box-sizing": "border-box",
     display: "flex",
     "flex-direction": "column",
     ...(gap && { gap }),
     ...(align && { "align-items": align }),
     ...(justify && { "justify-content": justify }),
     ...(width && { width }),
+    ...(margin && { margin }),
+    ...(padding && { padding }),
   }
 
   const styles = css`
@@ -22,7 +35,10 @@ function Stack({ align, justify, gap, width, style }, children) {
     }
   `
 
-  return [Div({ className: styles.stack, style }, children), styles.css]
+  return [
+    Div({ className: [styles.stack, className], style }, children),
+    styles.css,
+  ]
 }
 
 module.exports = component(Stack)