bsmnt 0.0.2 → 0.1.0

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

@@ -0,0 +1,246 @@
+/**
+ * Shared Script Utilities
+ *
+ * Cross-platform utilities for CLI scripts.
+ * Works on Windows, macOS, and Linux.
+ */
+
+import { access, mkdir, rm } from "node:fs/promises"
+
+// ============================================================================
+// Path Utilities
+// ============================================================================
+
+/**
+ * Get the project root directory
+ */
+export const projectRoot = process.cwd()
+
+/**
+ * Resolve a path relative to the project root
+ */
+export const resolvePath = (path: string): string => `${projectRoot}/${path}`
+
+/**
+ * Check if a file or directory exists
+ */
+export const pathExists = async (path: string): Promise<boolean> => {
+  try {
+    await access(path)
+    return true
+  } catch {
+    return false
+  }
+}
+
+// ============================================================================
+// File System Operations (Cross-platform)
+// ============================================================================
+
+/**
+ * Remove a directory recursively
+ * @param path - Relative path from project root
+ * @param dryRun - If true, skip actual deletion
+ */
+export const removeDir = async (
+  path: string,
+  dryRun = false
+): Promise<boolean> => {
+  try {
+    const fullPath = resolvePath(path)
+
+    // Check if path exists
+    if (!(await pathExists(fullPath))) {
+      return false
+    }
+
+    if (!dryRun) {
+      await rm(fullPath, { recursive: true, force: true })
+    }
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Remove a file
+ * @param path - Relative path from project root
+ * @param dryRun - If true, skip actual deletion
+ */
+export const removeFile = async (
+  path: string,
+  dryRun = false
+): Promise<boolean> => {
+  try {
+    const fullPath = resolvePath(path)
+    const file = Bun.file(fullPath)
+    const exists = await file.exists()
+
+    if (!exists) return false
+
+    if (!dryRun) {
+      await rm(fullPath, { force: true })
+    }
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Create a directory (and parent directories if needed)
+ * @param path - Relative path from project root
+ */
+export const createDir = async (path: string): Promise<void> => {
+  await mkdir(resolvePath(path), { recursive: true })
+}
+
+// ============================================================================
+// Process Utilities
+// ============================================================================
+
+/**
+ * Get the current Bun executable path (cross-platform)
+ */
+export const bunExecutable = process.execPath
+
+/**
+ * Current platform
+ */
+export const platform = process.platform
+
+/**
+ * Check if running on Windows
+ */
+export const isWindows = platform === "win32"
+
+/**
+ * Check if running on macOS
+ */
+export const isMacOS = platform === "darwin"
+
+/**
+ * Check if running on Linux
+ */
+export const isLinux = platform === "linux"
+
+// ============================================================================
+// CLI Argument Utilities
+// ============================================================================
+
+/**
+ * Parse common CLI flags from process.argv
+ */
+export const parseCliFlags = (
+  argv: string[] = process.argv.slice(2)
+): {
+  dryRun: boolean
+  verbose: boolean
+  help: boolean
+  args: string[]
+} => {
+  return {
+    dryRun: argv.includes("--dry-run") || argv.includes("-d"),
+    verbose: argv.includes("--verbose") || argv.includes("-v"),
+    help: argv.includes("--help") || argv.includes("-h"),
+    args: argv.filter(
+      (arg) =>
+        !["--dry-run", "-d", "--verbose", "-v", "--help", "-h"].includes(arg)
+    ),
+  }
+}
+
+// ============================================================================
+// Clipboard Utilities (Cross-platform)
+// ============================================================================
+
+/**
+ * Copy text to clipboard (cross-platform)
+ * @returns true if successful, false otherwise
+ */
+export const copyToClipboard = async (text: string): Promise<boolean> => {
+  try {
+    if (isMacOS) {
+      const proc = Bun.spawn(["pbcopy"], { stdin: "pipe" })
+      proc.stdin.write(text)
+      proc.stdin.end()
+      await proc.exited
+      return proc.exitCode === 0
+    }
+
+    if (isLinux) {
+      // Try xclip first, then xsel
+      for (const cmd of [
+        ["xclip", "-selection", "clipboard"],
+        ["xsel", "--clipboard", "--input"],
+      ]) {
+        try {
+          const proc = Bun.spawn(cmd, { stdin: "pipe" })
+          proc.stdin.write(text)
+          proc.stdin.end()
+          await proc.exited
+          if (proc.exitCode === 0) return true
+        } catch {
+          // Silently try next clipboard command
+        }
+      }
+      return false
+    }
+
+    if (isWindows) {
+      const proc = Bun.spawn(["clip"], { stdin: "pipe" })
+      proc.stdin.write(text)
+      proc.stdin.end()
+      await proc.exited
+      return proc.exitCode === 0
+    }
+
+    return false
+  } catch {
+    return false
+  }
+}
+
+// ============================================================================
+// Spawn Utilities
+// ============================================================================
+
+/**
+ * Spawn a process with inherited stdio (cross-platform)
+ * Uses Bun.spawn with proper defaults
+ */
+export const spawn = (
+  args: string[],
+  options: {
+    env?: Record<string, string | undefined>
+    cwd?: string
+    stdin?: "inherit" | "pipe"
+    stdout?: "inherit" | "pipe"
+    stderr?: "inherit" | "pipe"
+  } = {}
+) => {
+  const spawnOptions: Parameters<typeof Bun.spawn>[1] = {
+    stdin: options.stdin ?? "inherit",
+    stdout: options.stdout ?? "inherit",
+    stderr: options.stderr ?? "inherit",
+  }
+
+  if (options.cwd) spawnOptions.cwd = options.cwd
+  if (options.env) spawnOptions.env = options.env
+
+  return Bun.spawn(args, spawnOptions)
+}
+
+/**
+ * Build environment with FORCE_COLOR enabled
+ * Removes NO_COLOR to prevent warnings
+ */
+export const colorEnv = (): Record<string, string | undefined> => {
+  const env = { ...process.env, FORCE_COLOR: "1" } as Record<
+    string,
+    string | undefined
+  >
+  delete env.NO_COLOR
+  return env
+}

package/packages/create-basement-app/templates/default/lib/store/app.ts

@@ -0,0 +1,11 @@
+import { create } from "zustand"
+
+type Store = {
+  isNavOpened: boolean
+  setIsNavOpened: (value: boolean) => void
+}
+
+export const useStore = create<Store>((set) => ({
+  isNavOpened: false,
+  setIsNavOpened: (value: boolean) => set({ isNavOpened: value }),
+}))

package/packages/create-basement-app/templates/default/lib/store/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Custom Zustand Stores
+ *
+ * Import individual hooks:
+ *   import { useStore } from '@/store/app'
+ *
+ * Or import from barrel:
+ *   import { useStore } from '@/store/app'
+ */
+
+export { useStore } from "./app"

package/packages/create-basement-app/templates/default/lib/styles/README.md

@@ -0,0 +1,64 @@
+# Styles
+
+Hybrid styling with Tailwind CSS v4 and custom PostCSS functions.
+
+## PostCSS Functions
+
+```css
+/* Viewport-relative sizing */
+.element {
+  width: tovw(100);                    /* 6.94vw (100px at 1440px) */
+  width: tovw(100, 50);                 /* max(50px, 6.94vw) */
+  width: tovw(16, undefined, 'mobile'); /* 4.27vw (16px at 375px) */
+}
+
+/* Relative units */
+.text {
+  font-size: torem(24);    /* 1.5rem (24px / 16px) */
+  padding: toem(16, 14);   /* 1.14em (16px / 14px) */
+}
+
+/* Grid columns */
+.sidebar {
+  width: columns(3);       /* Spans 3 columns + gaps */
+}
+```
+
+## Custom Utilities (`dr-*`)
+
+```tsx
+// Responsive sizing (scales with viewport)
+<div className="dr-w-150 dr-h-100" />
+
+// Column-based sizing
+<div className="dr-w-col-4" />  {/* 4 columns wide */}
+
+// Grid layout
+<div className="dr-grid" />     {/* 4 cols mobile, 12 cols desktop */}
+```
+
+## Breakpoints
+
+```css
+@media (--mobile) { /* <= 799px */ }
+@media (--desktop) { /* >= 800px */ }
+```
+
+## Configuration
+
+| File | Purpose |
+|------|---------|
+| `colors.ts` | Color palette & themes |
+| `typography.ts` | Font sizes & weights |
+| `layout.mjs` | Grid, breakpoints, spacing |
+| `easings.ts` | Animation curves |
+| `fonts.ts` | Font loading |
+
+After changing config: `bun setup:styles`
+
+## Generated Files (Don't Edit)
+
+- `css/root.css` — CSS custom properties
+- `css/tailwind.css` — Tailwind utilities
+
+See [scripts/README.md](scripts/README.md) for generation details.

package/packages/create-basement-app/templates/default/lib/styles/cn.ts

@@ -0,0 +1,7 @@
+import { cx } from "class-variance-authority"
+import type { ClassValue } from "class-variance-authority/types"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(cx(inputs))
+}

package/packages/create-basement-app/templates/default/lib/styles/colors.ts

@@ -0,0 +1,63 @@
+const palettes = {
+  gray: {
+    50: "#F5F5F5",
+    100: "#E0E0E0",
+    200: "#C2C2C2",
+    300: "#A3A3A3",
+    400: "#858585",
+    500: "#666666",
+    600: "#4D4D4D",
+    700: "#333333",
+    800: "#1A1A1A",
+  },
+  blue: {
+    500: "#487CFF",
+  },
+  green: {
+    500: "#00FF9B",
+  },
+  violet: {
+    500: "#F101A5",
+  },
+  pink: {
+    500: "#FF73A6",
+  },
+  orange: {
+    500: "#FF4D00",
+  },
+}
+
+const colors = {
+  black: "#000000",
+  white: "#ffffff",
+  orange: palettes.orange[500],
+  blue: palettes.blue[500],
+  green: palettes.green[500],
+  violet: palettes.violet[500],
+  pink: palettes.pink[500],
+  gray: palettes.gray[500],
+} as const
+
+const themeNames = ["light", "dark"] as const
+const colorNames = ["primary", "secondary", "contrast"] as const
+
+const themes = {
+  light: {
+    primary: colors.white,
+    secondary: colors.black,
+    contrast: colors.orange,
+  },
+  dark: {
+    primary: colors.black,
+    secondary: colors.white,
+    contrast: colors.orange,
+  },
+} as const satisfies Themes
+
+export { colors, palettes, themeNames, themes }
+
+// UTIL TYPES
+export type Themes = Record<
+  (typeof themeNames)[number],
+  Record<(typeof colorNames)[number], string>
+>

package/packages/create-basement-app/templates/default/lib/styles/config.ts

@@ -0,0 +1,34 @@
+import { colors, palettes, themeNames, themes } from "./colors"
+import { easings } from "./easings"
+import { breakpoints, customSizes, layout, screens } from "./layout.mjs"
+import { fonts, typography } from "./typography"
+
+const config = {
+  breakpoints,
+  colors,
+  customSizes,
+  easings,
+  fonts,
+  layout,
+  palettes,
+  screens,
+  themeNames,
+  themes,
+  typography,
+} as const
+
+export {
+  breakpoints,
+  colors,
+  customSizes,
+  easings,
+  fonts,
+  layout,
+  palettes,
+  screens,
+  themeNames,
+  themes,
+  typography,
+}
+export type ThemeName = keyof typeof themes
+export type Config = typeof config

package/packages/create-basement-app/templates/default/lib/styles/css/global.css

@@ -0,0 +1,85 @@
+/* GLOBAL CSS FILE - Contains global styles that shouldn't be reset */
+
+html {
+  --scrollbar-gutter: 0px;
+  scrollbar-gutter: stable; /* This is needed to prevent the scrollbar from jumping */
+
+  &.lenis-stopped {
+    --scrollbar-gutter: var(--scrollbar-width);
+  }
+}
+
+html.overflow-hidden {
+  overflow: hidden;
+  touch-action: none;
+}
+
+body {
+  min-height: 100vh;
+  overscroll-behavior: none;
+  background-color: var(--color-primary);
+  color: var(--color-secondary);
+  display: flex;
+  flex-direction: column;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Selection styling */
+*::selection {
+  background-color: var(--color-contrast);
+  color: var(--color-primary);
+}
+
+/* SVG icon colors */
+svg.icon {
+  path[fill],
+  rect[fill],
+  circle[fill] {
+    fill: currentColor;
+  }
+  path[stroke],
+  rect[stroke],
+  circle[stroke] {
+    stroke: currentColor;
+  }
+}
+
+/* Hover states */
+.link {
+  @media (--hover) {
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+/* Focus states */
+*:focus-visible {
+  outline: 2px solid var(--color-contrast);
+}
+
+html.scrollbar-grabbing,
+img {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+button {
+  cursor: pointer;
+  /* Fix vertical text centering by trimming font metric space */
+  text-box-trim: both;
+  text-box-edge: cap alphabetic;
+  user-select: none;
+}
+
+html.screenshot {
+  *:not(:has(canvas), canvas, :has(#orchestra), #orchestra, #orchestra *) {
+    /* biome-ignore lint: it's all good */
+    opacity: 0 !important;
+  }
+}

package/packages/create-basement-app/templates/default/lib/styles/css/index.css

@@ -0,0 +1,6 @@
+/* INDEX CSS FILE - Barrel file for importing all the css files */
+@import "./reset.css";
+@import "tailwindcss/utilities.css";
+@import "./tailwind.css";
+@import "./root.css";
+@import "./global.css";

package/packages/create-basement-app/templates/default/lib/styles/css/reset.css

@@ -0,0 +1,166 @@
+/***
+    The new CSS reset - version 1.11.3 (last updated 25.08.2024)
+    GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
+
+/*
+    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+    - The "symbol *" part is to solve Firefox SVG sprite bug
+    - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
+ */
+*:where(
+    :not(
+        html,
+        iframe,
+        canvas,
+        img,
+        svg,
+        video,
+        audio,
+        dialog,
+        vercel-live-feedback,
+        nextjs-portal,
+        :where(select, option)
+      ):not(svg *, symbol *)
+  ) {
+  all: unset;
+  display: revert;
+}
+
+/* Preferred box-sizing value */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Fix mobile Safari increase font-size on landscape mode */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/* Reapply the pointer cursor for anchor tags */
+a,
+button {
+  cursor: revert;
+}
+
+/* Remove list styles (bullets/numbers) */
+ol,
+ul,
+menu,
+summary {
+  list-style: none;
+}
+
+/* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */
+ol {
+  counter-reset: revert;
+}
+
+/* For images to not be able to exceed their container */
+img {
+  max-inline-size: 100%;
+  max-block-size: 100%;
+}
+
+/* removes spacing between cells in tables */
+table {
+  border-collapse: collapse;
+}
+
+/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
+input,
+textarea {
+  -webkit-user-select: auto;
+}
+
+/* revert the 'white-space' property for textarea elements on Safari */
+textarea {
+  white-space: revert;
+}
+
+/* minimum style to allow to style meter element */
+meter {
+  -webkit-appearance: revert;
+  appearance: revert;
+}
+
+/* preformatted text - use only for this feature */
+:where(pre) {
+  all: revert;
+  box-sizing: border-box;
+}
+
+/* reset default text opacity of input placeholder */
+::placeholder {
+  color: unset;
+}
+
+/* fix the feature of 'hidden' attribute.
+display:revert; revert to element instead of attribute */
+:where([hidden]) {
+  display: none;
+}
+
+/* revert for bug in Chromium browsers
+- fix for the content editable attribute will work properly.
+- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
+:where([contenteditable]:not([contenteditable="false"])) {
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+  overflow-wrap: break-word;
+  -webkit-line-break: after-white-space;
+  -webkit-user-select: auto;
+}
+
+/* apply back the draggable feature - exist only in Chromium and Safari */
+:where([draggable="true"]) {
+  -webkit-user-drag: element;
+}
+
+/* Revert Modal native behavior */
+:where(dialog:modal) {
+  all: revert;
+  box-sizing: border-box;
+}
+
+/* Remove details summary webkit styles */
+::-webkit-details-marker {
+  display: none;
+}
+
+/* Add support for color-scheme */
+:root {
+  color-scheme: light dark;
+}
+
+/* Add support for newer form controls */
+:where(input[type="file"]) {
+  cursor: default;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+/* Improve text rendering */
+html {
+  text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  text-rendering: optimizeLegibility;
+}
+
+/* Remove tap highlight on iOS */
+a,
+button {
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Improve media defaults */
+video,
+audio {
+  max-inline-size: 100%;
+  max-block-size: 100%;
+}