bsmnt 0.0.2 → 0.1.0

package/packages/create-basement-app/templates/webgl/lib/styles/scripts/generate-tailwind.ts

@@ -0,0 +1,162 @@
+import type { Config } from "../config"
+import { formatObject } from "./utils"
+
+export function generateTailwind({
+  breakpoints,
+  colors,
+  customSizes,
+  easings,
+  fonts,
+  palettes,
+  themes,
+  typography,
+}: Pick<
+  Config,
+  | "breakpoints"
+  | "colors"
+  | "customSizes"
+  | "easings"
+  | "fonts"
+  | "palettes"
+  | "themes"
+  | "typography"
+>) {
+  // Theme
+  const themeEntries = Object.entries(themes)
+  const firstTheme = themeEntries[0]?.[1] ?? {}
+  const theme = `/** Custom theme **/
+@theme {
+	--breakpoint-*: initial;
+	${formatObject(breakpoints, ([name, value]) => `--breakpoint-${name}: ${value}px;`)}
+
+  --color-*: initial;
+	${formatObject(firstTheme, ([key, value]) => `--color-${key}: ${value};`)}
+  ${formatObject(colors, ([key, value]) => `--color-${key}: ${value};`)}
+
+  ${Object.entries(palettes)
+    .filter(([, scaleValues]) => Object.keys(scaleValues).length > 1)
+    .map(
+      ([paletteName, paletteValues]) =>
+        `/* ${paletteName} */\n\t` +
+        Object.entries(paletteValues)
+          .map(([shade, value]) => `--color-${paletteName}-${shade}: ${value};`)
+          .join("\n\t")
+    )
+    .join("\n\n\t")}
+
+	--spacing: 0.25rem;
+	--spacing-0: 0;
+	--spacing-safe: var(--safe);
+	--spacing-gap: var(--gap);
+  ${formatObject(customSizes, ([key]) => `--spacing-${key}: var(--${key});`)}
+
+  --font-*: initial;
+  ${formatObject(fonts, ([name, variableName]) => `--font-${name}: var(${variableName});`)}
+
+  --ease-*: initial;
+  ${formatObject(easings, ([name, value]) => `--ease-${name}: ${value};`)}
+}`
+
+  // Theme overwrites
+  const themeOverwrites = `
+/** Custom theme overwrites **/
+${formatObject(
+  themes,
+  ([name, value]) => `[data-theme=${name}] {
+  ${formatObject(value, ([key, value]) => `--color-${key}: ${value};`)}
+}`,
+  "\n"
+)}
+  `
+
+  // Utilities
+  const utilities = `
+/** Custom static utilities **/
+${Object.entries(typography)
+  .map(
+    ([name, value]) => `@utility ${name} {
+  ${Object.entries(value)
+    .filter((entry) => entry?.[0] && entry?.[1])
+    .filter((entry) => entry !== undefined)
+    .map(([key, value]) => {
+      if (key === "font-size") {
+        if (typeof value === "number") {
+          return `font-size: ${value}px;`
+        }
+
+        if (
+          typeof value === "object" &&
+          "mobile" in value &&
+          "desktop" in value
+        ) {
+          return [
+            `font-size: ${(value?.mobile as number) ?? 0}px;`,
+            `@variant desktop { font-size: ${(value?.desktop as number) ?? 0}px; }`,
+          ].join("\n\t")
+        }
+
+        return `font-size: ${value as unknown as number}px;`
+      }
+
+      if (typeof value === "object") {
+        return [
+          `${key}: ${value.mobile};`,
+          `@variant desktop { ${key}: ${value.desktop}; }`,
+        ].join("\n\t")
+      }
+
+      return `${key}: ${value};`
+    })
+    .join("\n\t")}
+}`
+  )
+  .join("\n\n")}
+
+@utility desktop-only {
+  @media (--mobile) {
+    display: none !important;
+  }
+}
+
+@utility mobile-only {
+  @media (--desktop) {
+    display: none !important;
+  }
+}
+
+@utility b-grid {
+	display: grid;
+	grid-template-columns: repeat(var(--columns), 1fr);
+	column-gap: var(--gap);
+}
+
+@utility b-layout-block {
+	margin-inline: auto;
+  width: calc(100% - 2 * var(--safe));
+}
+
+@utility b-layout-block-inner {
+	padding-inline: var(--safe);
+	width: 100%;
+}
+
+@utility b-layout-grid {
+	@apply b-layout-block b-grid;
+}
+
+@utility b-layout-grid-inner {
+	@apply b-layout-block-inner b-grid;
+}`
+
+  // Variants
+  const variants = `
+/** Custom variants **/
+${Object.keys(themes)
+  .map(
+    (name) =>
+      `@custom-variant ${name} (&:where([data-theme=${name}], [data-theme=${name}] *));`
+  )
+  .join("\n")}`
+
+  return [theme, themeOverwrites, utilities, variants].join("\n")
+}

package/packages/create-basement-app/templates/webgl/lib/styles/scripts/postcss-functions.mjs

@@ -0,0 +1,168 @@
+// THIS FILE HAS TO STAY .mjs AS ITS CONSUMED BY POSTCSS
+import { breakpoints } from "../layout.mjs"
+
+/**
+ * Resolves a context size to a pixel value.
+ * @param {string | number} context - Context identifier or pixel value
+ * @returns {number} Pixel value
+ */
+function resolveContext(context) {
+  if (typeof context === "number") {
+    return context
+  }
+  const numContext = Number.parseFloat(context)
+  if (!Number.isNaN(numContext)) {
+    return numContext
+  }
+  return breakpoints[context] ?? breakpoints.desktop
+}
+
+/**
+ * Validates and parses a pixel value.
+ * @param {string} value - Pixel value to parse
+ * @returns {number} Parsed pixel value
+ */
+function parsePixels(value) {
+  const numValue = Number.parseFloat(value)
+  if (Number.isNaN(numValue)) {
+    throw new Error(`Invalid pixel value: ${value}`)
+  }
+  return numValue
+}
+
+/**
+ * Rounds a number to a maximum of 4 decimal places, removing trailing zeros.
+ * @param {number} value - Number to round
+ * @returns {string} Rounded number as string without trailing zeros
+ */
+function roundToMaxDecimals(value) {
+  // Round to 4 decimal places
+  const rounded = Math.round(value * 10000) / 10000
+  // Convert to string and remove trailing zeros only after decimal point
+  return rounded
+    .toString()
+    .replace(/\.0+$/, "")
+    .replace(/(\.\d*?)0+$/, "$1")
+}
+
+export const functions = {
+  /**
+   * Converts a pixel value to viewport width units (vw).
+   * Optionally applies a minimum value using CSS max().
+   *
+   * Supports flexible parameter patterns:
+   * - `tovw(target)` - Uses default desktop context
+   * - `tovw(target, min)` - Sets minimum value (numeric)
+   * - `tovw(target, context)` - Sets context (string identifier)
+   * - `tovw(target, min, context)` - Sets both min and context
+   *
+   * @param {string} target - Target pixel value to convert
+   * @param {string} [minOrContext] - Minimum pixel value OR context identifier
+   * @param {string} [context] - Context size identifier (if min was provided)
+   * @returns {string} CSS string with vw units
+   *
+   * @example
+   * tovw(100) // "6.94vw"
+   * tovw(100, 50) // "max(50px, 6.94vw)"
+   * tovw(16, 'mobile') // "4.27vw" (no need for undefined!)
+   * tovw(100, 50, 'mobile') // "max(50px, 6.94vw)" with mobile context
+   */
+  tovw: (target, minOrContext, context) => {
+    const numTarget = parsePixels(target)
+    if (numTarget === 0) {
+      return "0"
+    }
+
+    let min
+    let resolvedContext = "desktop"
+
+    if (minOrContext !== undefined && minOrContext !== "") {
+      // Fast check: is it a known breakpoint key?
+      if (minOrContext in breakpoints) {
+        // Second param is context
+        resolvedContext = minOrContext
+        if (context !== undefined && context !== "") {
+          resolvedContext = context
+        }
+      } else {
+        // Second param is min value (numeric)
+        min = parsePixels(minOrContext)
+        if (context !== undefined && context !== "") {
+          resolvedContext = context
+        }
+      }
+    } else if (context !== undefined && context !== "") {
+      // Only context provided as third param (legacy support)
+      resolvedContext = context
+    }
+
+    const contextSize = resolveContext(resolvedContext)
+    const vwValue = (numTarget / contextSize) * 100
+
+    if (min !== undefined) {
+      return `max(${min}px, ${roundToMaxDecimals(vwValue)}vw)`
+    }
+
+    return `${roundToMaxDecimals(vwValue)}vw`
+  },
+
+  /**
+   * Converts a pixel value to rem units.
+   *
+   * @param {string} target - Target pixel value to convert
+   * @param {string} [context='16'] - Base font size in pixels
+   * @returns {string} CSS string with rem units
+   *
+   * @example
+   * torem(24) // "1.5rem"
+   * torem(18, 14) // "1.29rem"
+   */
+  torem: (target, context = "16") => {
+    const numTarget = parsePixels(target)
+    if (numTarget === 0) {
+      return "0"
+    }
+
+    const numContext = parsePixels(context)
+    return `${roundToMaxDecimals(numTarget / numContext)}rem`
+  },
+
+  /**
+   * Converts a pixel value to em units.
+   *
+   * @param {string} target - Target pixel value to convert
+   * @param {string} context - Context size in pixels (required)
+   * @returns {string} CSS string with em units
+   *
+   * @example
+   * toem(24, 16) // "1.5em"
+   * toem(18, 14) // "1.29em"
+   */
+  toem: (target, context) => {
+    const numTarget = parsePixels(target)
+    if (numTarget === 0) {
+      return "0"
+    }
+
+    if (!context) {
+      throw new Error("toem requires a context parameter")
+    }
+
+    const numContext = parsePixels(context)
+    return `${roundToMaxDecimals(numTarget / numContext)}em`
+  },
+
+  /**
+   * Calculates column width based on number of columns.
+   *
+   * @param {string} columns - Number of columns
+   * @returns {string} CSS calc expression
+   */
+  columns: (columns) => {
+    const numColumns = Number.parseFloat(columns)
+    if (Number.isNaN(numColumns)) {
+      throw new Error(`Invalid column value: ${columns}`)
+    }
+    return `calc((${numColumns} * var(--column-width)) + ((${numColumns} - 1) * var(--gap)))`
+  },
+}

package/packages/create-basement-app/templates/webgl/lib/styles/scripts/setup-styles.ts

@@ -0,0 +1,24 @@
+import * as config from "../config"
+import { generateRoot } from "./generate-root"
+import { generateTailwind } from "./generate-tailwind"
+
+const tailwind = generateTailwind(config)
+const root = generateRoot(config)
+
+const banner = `/*
+ * THIS FILE IS GENERATED BY setup-styles.ts
+ * DO NOT EDIT IT DIRECTLY.
+ */`
+
+const tailwindcss = [banner, tailwind]
+const rootcss = [banner, root]
+
+await Bun.write("./lib/styles/css/tailwind.css", tailwindcss.join("\n\n"))
+await Bun.write("./lib/styles/css/root.css", rootcss.join("\n\n"))
+
+console.log(
+  Bun.color("green", "ansi"),
+  "✓",
+  Bun.color("black", "ansi"),
+  "Style config generated successfully"
+)

package/packages/create-basement-app/templates/webgl/lib/styles/scripts/utils.ts

@@ -0,0 +1,20 @@
+export function scalingCalc(value: number) {
+  return `calc(((${value} * 100) / var(--device-width)) * 1vw)`
+}
+
+/**
+ * Format an object into a string of CSS variables
+ * @param obj - The object to format
+ * @param mapper - A function that maps the object's entries to a string
+ * @param joiner - The string to join the mapped entries with
+ * @returns A string of CSS variables
+ */
+export function formatObject<Obj extends Record<string, unknown>>(
+  obj: Obj,
+  mapper: (args: [key: keyof Obj, value: Obj[keyof Obj]]) => string,
+  joiner = "\n\t"
+) {
+  return Object.entries(obj)
+    .map(([key, value]) => mapper([key as keyof Obj, value as Obj[keyof Obj]]))
+    .join(joiner)
+}

package/packages/create-basement-app/templates/webgl/lib/styles/typography.ts

@@ -0,0 +1,36 @@
+import type { CSSProperties } from "react"
+
+const fonts = {
+  mono: "--geist-mono", // this should be the variable name defined in fonts.ts
+} as const
+
+const typography: TypeStyles = {
+  "test-mono": {
+    "font-family": `var(${fonts.mono})`,
+    "font-style": "normal",
+    "font-weight": 400,
+    "line-height": "90%",
+    "letter-spacing": "0em",
+    "font-size": { mobile: 20, desktop: 24 },
+  },
+} as const
+
+export { fonts, typography }
+
+// UTIL TYPES
+type TypeStyles = Record<
+  string,
+  {
+    "font-family": string
+    "font-style": CSSProperties["fontStyle"]
+    "font-weight": CSSProperties["fontWeight"]
+    "line-height":
+      | `${number}%`
+      | { mobile: `${number}%`; desktop: `${number}%` }
+    "letter-spacing":
+      | `${number}em`
+      | { mobile: `${number}em`; desktop: `${number}em` }
+    "font-feature-settings"?: string
+    "font-size": number | { mobile: number; desktop: number }
+  }
+>

package/packages/create-basement-app/templates/webgl/lib/utils/README.md

@@ -0,0 +1,40 @@
+# Utils
+
+Pure utility functions organized by concern.
+
+Use explicit imports for clarity and better tree-shaking:
+
+```tsx
+import { clamp, lerp, mapRange } from '@/utils/math'
+import { slugify } from '@/utils/strings'
+import { generatePageMetadata } from '@/utils/metadata'
+import { tovw, torem, toem } from '@/utils/viewport'
+```
+
+## Modules
+
+| Module | Functions |
+|--------|-----------|
+| `math` | `clamp`, `lerp`, `mapRange`, `modulo`, `normalize`, `distance` |
+| `easings` | All easing functions (`easeOutCubic`, etc.) |
+| `viewport` | `tovw`, `torem`, `toem` |
+| `strings` | `slugify`, `mergeRefs`, `capitalizeFirstLetter` |
+| `metadata` | `generatePageMetadata` |
+
+## Common Patterns
+
+```tsx
+// Math
+clamp(0, value, 100)
+lerp(0, 100, 0.5) // → 50
+mapRange(0, 1000, scrollY, 0, 1)
+
+// Viewport units
+tovw(100, 50, 'desktop') // → "max(50px, 6.94vw)"
+tovw(16, undefined, 'mobile') // → "4.27vw"
+torem(24) // → "1.5rem"
+toem(16, 14) // → "1.14em"
+
+// SEO
+export const metadata = generatePageMetadata({ title: 'About' })
+```

package/packages/create-basement-app/templates/webgl/lib/utils/css.d.ts

@@ -0,0 +1,21 @@
+// CSS module type declarations (ambient - no imports allowed)
+
+declare module "*.module.css" {
+  const classes: { [key: string]: string }
+  export default classes
+}
+
+declare module "*.module.scss" {
+  const classes: { [key: string]: string }
+  export default classes
+}
+
+declare module "*.module.sass" {
+  const classes: { [key: string]: string }
+  export default classes
+}
+
+// Regular CSS imports
+declare module "*.css"
+declare module "*.scss"
+declare module "*.sass"