tailjng 0.0.62 → 0.1.0

package/cli/file-operations.js

@@ -7,10 +7,50 @@ const { generateHeaderComment } = require("./settings/header-generator")
 const { askOverwrite } = require("./settings/prompt-utils")
 const { buildTargetPath, parseComponentPath } = require("./settings/path-utils")
 
+const TEXT_EXTENSIONS = new Set([".ts", ".js", ".html", ".css", ".scss", ".json", ".md"])
+
+function shouldAddHeader(fileName) {
+    return TEXT_EXTENSIONS.has(path.extname(fileName).toLowerCase())
+}
+
+function copyFileWithHeader(srcFile, destFile) {
+    fs.mkdirSync(path.dirname(destFile), { recursive: true })
+
+    if (!shouldAddHeader(path.basename(srcFile))) {
+        fs.copyFileSync(srcFile, destFile)
+        return
+    }
+
+    let content = fs.readFileSync(srcFile, "utf8")
+    const headerComment = generateHeaderComment(path.basename(srcFile))
+    content = headerComment + "\n\n" + content
+    fs.writeFileSync(destFile, content)
+}
+
+function copyDirectoryRecursive(srcDir, destDir, projectRoot) {
+    const entries = fs.readdirSync(srcDir, { withFileTypes: true })
+
+    for (const entry of entries) {
+        const srcPath = path.join(srcDir, entry.name)
+        const destPath = path.join(destDir, entry.name)
+
+        if (entry.isDirectory()) {
+            copyDirectoryRecursive(srcPath, destPath, projectRoot)
+            continue
+        }
+
+        if (!entry.isFile()) continue
+
+        copyFileWithHeader(srcPath, destPath)
+        const relativePath = path.relative(projectRoot, destPath)
+        console.log(
+            `${COLORS.green}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.green}Copied file: ${COLORS.bright}${relativePath}${COLORS.reset}`,
+        )
+    }
+}
+
 async function copyComponentFiles(componentName, componentPath, isDependency = false) {
-    // Detect the root directory where node_modules is located
     let currentDir = process.cwd()
-    // Up to the root directory where node_modules is located
     while (!fs.existsSync(path.join(currentDir, "node_modules"))) {
         currentDir = path.dirname(currentDir)
         if (currentDir === path.dirname(currentDir)) {
@@ -19,15 +59,11 @@ async function copyComponentFiles(componentName, componentPath, isDependency = f
         }
     }
 
-    // Now currentDir points to the root directory where node_modules is located
     const nodeModulesPath = path.join(currentDir, "node_modules", "tailjng", componentPath)
     const projectRoot = process.cwd()
-
-    // Use the new function to build the target path while maintaining the folder structure
     const targetPath = buildTargetPath(projectRoot, componentName, componentPath)
     const pathInfo = parseComponentPath(componentPath)
 
-    // Check if the component exists in the correct path
     if (!fs.existsSync(nodeModulesPath)) {
         console.error(
             `${COLORS.red}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.red}ERROR: Component path ${COLORS.bright}"${nodeModulesPath}"${COLORS.reset} ${COLORS.red}does not exist.${COLORS.reset}`,
@@ -35,17 +71,15 @@ async function copyComponentFiles(componentName, componentPath, isDependency = f
         process.exit(1)
     }
 
-    // Check if the target path already exists
     if (fs.existsSync(targetPath)) {
         const relativeTargetPath = path.relative(projectRoot, targetPath)
         const shouldOverwrite = await askOverwrite(componentName, relativeTargetPath, isDependency)
 
         if (!shouldOverwrite) {
             console.log(`${COLORS.dim}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.dim}Skipping ${COLORS.bright}"${componentName}"${COLORS.reset} ${COLORS.dim}- keeping existing version.${COLORS.reset}`)
-            return false // Return false to indicate that it was not installed
+            return false
         }
 
-        // If decided to overwrite, remove the existing directory
         console.log(`${COLORS.yellow}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.yellow}Removing existing ${COLORS.bright}"${componentName}"${COLORS.reset} ${COLORS.yellow}to overwrite...${COLORS.reset}`)
         fs.rmSync(targetPath, { recursive: true, force: true })
     }
@@ -53,7 +87,6 @@ async function copyComponentFiles(componentName, componentPath, isDependency = f
     const componentType = isDependency ? "dependency component" : "component"
     const relativeTargetPath = path.relative(projectRoot, targetPath)
 
-    // See if the component has subfolders
     if (pathInfo.hasSubfolders) {
         console.log(
             `${COLORS.blue}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.blue}Copying ${componentType} ${COLORS.bright}"${componentName}"${COLORS.reset} (${pathInfo.fullSubPath}) → ${relativeTargetPath}${COLORS.reset}`,
@@ -64,27 +97,10 @@ async function copyComponentFiles(componentName, componentPath, isDependency = f
         )
     }
 
-    // Create the target directory structure
     fs.mkdirSync(targetPath, { recursive: true })
+    copyDirectoryRecursive(nodeModulesPath, targetPath, projectRoot)
 
-    const files = fs.readdirSync(nodeModulesPath)
-    files.forEach((file) => {
-        const srcFile = path.join(nodeModulesPath, file)
-        const destFile = path.join(targetPath, file)
-        let content = fs.readFileSync(srcFile, "utf8")
-
-        // Add header comment to the content
-        const headerComment = generateHeaderComment(file)
-        content = headerComment + "\n\n" + content
-
-        // Here you can add more processing logic if needed
-        // For example, replace imports, etc.
-
-        fs.writeFileSync(destFile, content)
-        console.log(`${COLORS.green}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.green}Copied file: ${COLORS.bright}${file}${COLORS.reset}`)
-    })
-
-    return true // Return true to indicate that it was installed successfully
+    return true
 }
 
 module.exports = { copyComponentFiles }

package/cli/index.js

@@ -1,15 +1,23 @@
 #!/usr/bin/env node
 
-// index.js
+// index.js — tailjng CLI entry point
+
 const { checkTailwindInstalled } = require("./settings/tailwind-check")
 const { addComponent, installAllComponents } = require("./component-manager")
 const { getComponentList } = require("./settings/components-list")
+const { getPackageVersion } = require("./settings/lib-utils")
+const { isComponentInstalled } = require("./settings/path-utils")
 const { COLORS } = require("./settings/colors")
 
 const args = process.argv.slice(2)
 const command = args[0]
 
 async function main() {
+    if (command === "init:app") {
+        require("./execute/init-app")
+        return
+    }
+
     if (command === "add") {
         const componentName = args[1]
         if (!componentName) {
@@ -19,37 +27,80 @@ async function main() {
         }
         checkTailwindInstalled()
         await addComponent(componentName, getComponentList())
-    } else if (command === "list") {
+        return
+    }
+
+    if (command === "list") {
         showComponentList()
-    } else if (command === "install-all") {
+        return
+    }
+
+    if (command === "install-all") {
         checkTailwindInstalled()
         await installAllComponents(getComponentList())
-    } else {
-        console.log(`${COLORS.bright}${COLORS.blue}Usage:${COLORS.reset}
-  ${COLORS.cyan}${COLORS.bright}npx tailjng${COLORS.reset} ${COLORS.bright}${COLORS.green}add${COLORS.reset} ${COLORS.dim}<componentName>${COLORS.reset}      ${COLORS.blue}Add a component to your project${COLORS.reset}
-  ${COLORS.cyan}${COLORS.bright}npx tailjng${COLORS.reset} ${COLORS.bright}${COLORS.green}list${COLORS.reset}                     ${COLORS.blue}List all available components${COLORS.reset}
-  ${COLORS.cyan}${COLORS.bright}npx tailjng${COLORS.reset} ${COLORS.bright}${COLORS.green}install-all${COLORS.reset}              ${COLORS.blue}Install all available components${COLORS.reset}`)
+        return
+    }
+
+    if (command === "version") {
+        console.log(`${COLORS.cyan}tailjng${COLORS.reset} v${getPackageVersion(__dirname)}`)
+        return
     }
+
+    showHelp()
+}
+
+function showHelp() {
+    console.log(`${COLORS.bright}${COLORS.blue}tailjng CLI${COLORS.reset} v${getPackageVersion(__dirname)}
+
+${COLORS.bright}Project setup${COLORS.reset}
+  ${COLORS.cyan}npx tailjng init:app${COLORS.reset}                 Configure Tailwind, providers, styles (no UI)
+  ${COLORS.cyan}npx tailjng init:app --with-components${COLORS.reset}  init:app + mode-toggle and alerts
+
+${COLORS.bright}Components${COLORS.reset} ${COLORS.dim}(run from your Angular app directory)${COLORS.reset}
+  ${COLORS.cyan}npx tailjng add${COLORS.reset} ${COLORS.dim}<name>${COLORS.reset}              Install one component + dependencies
+  ${COLORS.cyan}npx tailjng install-all${COLORS.reset}              Install all registry components
+  ${COLORS.cyan}npx tailjng list${COLORS.reset}                     List available components
+
+${COLORS.bright}Info${COLORS.reset}
+  ${COLORS.cyan}npx tailjng version${COLORS.reset}                  Show installed package version`)
 }
 
 function showComponentList() {
     const componentList = getComponentList()
-    if (Object.keys(componentList).length === 0) {
+    const names = Object.keys(componentList).sort()
+    const projectRoot = process.cwd()
+
+    if (names.length === 0) {
         console.log(`${COLORS.yellow}[tailjng CLI] No components available.${COLORS.reset}`)
         return
     }
 
-    console.log(`${COLORS.cyan}[tailjng CLI] Available components:${COLORS.reset}`)
-    for (const component in componentList) {
-        const dependencies =
-            componentList[component].dependencies.length > 0 ? componentList[component].dependencies.join(", ") : "None"
+    let installedCount = 0
+
+    console.log(`${COLORS.cyan}[tailjng CLI] Available components (${names.length}):${COLORS.reset}`)
+    console.log(`${COLORS.dim}Use: npx tailjng add <name>${COLORS.reset}\n`)
+
+    for (const component of names) {
+        const meta = componentList[component]
+        const deps = meta.dependencies
+        const dependencies = deps.length > 0 ? deps.join(", ") : "none"
+        const installed = isComponentInstalled(projectRoot, component, meta.path)
+        const status = installed
+            ? `${COLORS.green}[installed]${COLORS.reset}`
+            : `${COLORS.dim}[not installed]${COLORS.reset}`
+
+        if (installed) installedCount++
+
         console.log(
-            `${COLORS.green}- ${component}${COLORS.reset} ${COLORS.dim}(Dependencies: ${dependencies})${COLORS.reset}`,
+            `${COLORS.green}${component}${COLORS.reset} ${status} ${COLORS.dim}(dependencies: ${dependencies})${COLORS.reset}`,
         )
     }
+
+    console.log(
+        `\n${COLORS.dim}${installedCount}/${names.length} components already in this project.${COLORS.reset}`,
+    )
 }
 
-// Execute the main function
 main().catch((error) => {
     console.error(`${COLORS.red}[tailjng CLI] Unexpected error:${COLORS.reset}`, error)
     process.exit(1)

package/cli/settings/components-list.js

@@ -1,156 +1,9 @@
-// components-list.js
-
-function getComponentList() {
-    return {
-        'mode-toggle': {
-            path: "src/lib/components/mode-toggle",
-            dependencies: [],
-        },
-        'color': {
-            path: "src/lib/components/color",
-            dependencies: [],
-        },
-        'tooltip': {
-            path: "src/lib/components/tooltip",
-            dependencies: [],
-        },
-        'coach-mark': {
-            path: "src/lib/components/coach-mark",
-            dependencies: [],
-        },
-        'badge': {
-            path: "src/lib/components/badge",
-            dependencies: ["tooltip"],
-        },
-        'label': {
-            path: "src/lib/components/label",
-            dependencies: ["tooltip"],
-        },
-        'toggle-radio': {
-            path: "src/lib/components/toggle-radio",
-            dependencies: [],
-        },
-        'button': {
-            path: "src/lib/components/button",
-            dependencies: ["tooltip", "color"],
-        },
-        'checkbox-input': {
-            path: "src/lib/components/checkbox/checkbox-input",
-            dependencies: ["tooltip", "color"],
-        },
-        'checkbox-switch': {
-            path: "src/lib/components/checkbox/checkbox-switch",
-            dependencies: ["color"],
-        },
-        'alert-dialog': {
-            path: "src/lib/components/alert/alert-dialog",
-            dependencies: ["button", "color"],
-        },
-        'alert-toast': {
-            path: "src/lib/components/alert/alert-toast",
-            dependencies: ["button", "color"],
-        },
-        'progress-bar': {
-            path: "src/lib/components/progress-bar",
-            dependencies: [],
-        },
-        'viewer-image': {
-            path: "src/lib/components/viewer/viewer-image",
-            dependencies: ["button"],
-        },
-        'viewer-pdf': {
-            path: "src/lib/components/viewer/viewer-pdf",
-            dependencies: [],
-        },
-        'dialog': {
-            path: "src/lib/components/dialog",
-            dependencies: [],
-        },
-        'input-file': {
-            path: "src/lib/components/input/input-file",
-            dependencies: [],
-        },
-        'input-textarea': {
-            path: "src/lib/components/input/input-textarea",
-            dependencies: [],
-        },
-        'input-range': {
-            path: "src/lib/components/input/input-range",
-            dependencies: [],
-        },
-        'input': {
-            path: "src/lib/components/input/input",
-            dependencies: [],
-        },
-        'select-multi-table': {
-            path: "src/lib/components/select/select-multi-table",
-            dependencies: ["button"],
-        },
-        'select-multi-dropdown': {
-            path: "src/lib/components/select/select-multi-dropdown",
-            dependencies: [],
-        },
-        'select-dropdown': {
-            path: "src/lib/components/select/select-dropdown",
-            dependencies: [],
-        },
-        'sidebar-static': {
-            path: "src/lib/components/sidebar/sidebar-static",
-            dependencies: ["checkbox-switch"],
-        },
-        'form-container': {
-            path: "src/lib/components/form/form-container",
-            dependencies: [],
-        },
-        'form-validation': {
-            path: "src/lib/components/form/form-validation",
-            dependencies: [],
-        },
-        'form-sidebar': {
-            path: "src/lib/components/form/form-sidebar",
-            dependencies: ["tooltip", "button", "checkbox-switch", "coach-mark"],
-        },
-        'paginator-complete': {
-            path: "src/lib/components/paginator/paginator-complete",
-            dependencies: ["button"],
-        },
-        'filter-complete': {
-            path: "src/lib/components/filter/filter-complete",
-            dependencies: ["select-dropdown", "select-multi-table", "button", "dialog", "checkbox-switch"],
-        },
-        'card-crud-complete': {
-            path: "src/lib/components/card/card-crud-complete",
-            dependencies: ["paginator-complete", "filter-complete"],
-        },
-        'card-complete': {
-            path: "src/lib/components/card/card-complete",
-            dependencies: ["paginator-complete", "filter-complete"],
-        },
-        'menu-options-table': {
-            path: "src/lib/components/menu/menu-options-table",
-            dependencies: ["button"],
-        },
-        'options-coach-menu': {
-            path: "src/lib/components/menu/options-coach-menu",
-            dependencies: ["button", "coach-mark"],
-        },
-
+// components-list.js — reads installable components from registry/components.json
 
+const { loadComponentRegistry } = require("./lib-utils")
 
-
-        'table-crud-complete': {
-            path: "src/lib/components/table/table-crud-complete",
-            dependencies: ["button", "paginator-complete", "filter-complete", "checkbox-input", "options-coach-menu", "dialog", "viewer-image", "select-dropdown", "input"],
-        },
-        'table-complete': {
-            path: "src/lib/components/table/table-complete",
-            dependencies: ["button", "paginator-complete", "filter-complete", "checkbox-input", "options-coach-menu", "dialog", "viewer-image", "select-dropdown", "input"],
-        },
-        'theme-generator': {
-            path: "src/lib/components/theme-generator",
-            dependencies: ["input", "input-range", "button", "label", "form-container"],
-        },
-    }
+function getComponentList() {
+    return loadComponentRegistry(__dirname)
 }
 
 module.exports = { getComponentList }

package/cli/settings/header-generator.js

@@ -1,9 +1,11 @@
-// header-generator.js
+// header-generator.js — prepends attribution header when copying components into consumer apps
 
 const path = require("path")
+const { getPackageVersion } = require("./lib-utils")
 
 function generateHeaderComment(fileName) {
-  const headerContent = `===============================================
+    const version = getPackageVersion(__dirname)
+    const headerContent = `===============================================
 Component and Function Library - tailjNg
 ===============================================
 Description:
@@ -27,18 +29,15 @@ Authors:
 License:
   This project is licensed under the BSD 3-Clause - see the LICENSE file for more details.
 
-Version: 0.0.62
+Version: ${version}
 Creation Date: 2025-01-04
 ===============================================`
 
-  const ext = path.extname(fileName).toLowerCase()
-  if (ext === ".ts" || ext === ".js" || ext === ".css" || ext === ".scss") {
+    const ext = path.extname(fileName).toLowerCase()
+    if (ext === ".html") {
+        return `<!--\n${headerContent}\n-->`
+    }
     return `/*\n${headerContent}\n*/`
-  } else if (ext === ".html") {
-    return `<!--\n${headerContent}\n-->`
-  } else {
-    return `/*\n${headerContent}\n*/`
-  }
 }
 
 module.exports = { generateHeaderComment }

package/cli/settings/lib-utils.js

@@ -0,0 +1,89 @@
+// lib-utils.js — shared helpers for package version and project config
+
+const fs = require("fs")
+const path = require("path")
+
+function readJsonFile(filePath) {
+    try {
+        return JSON.parse(fs.readFileSync(filePath, "utf8"))
+    } catch {
+        return null
+    }
+}
+
+/**
+ * Resolves tailjng package root from any CLI module location.
+ * Works in source (projects/tailjng/cli/...) and published (node_modules/tailjng/cli/...).
+ */
+function getPackageRoot(fromDir = __dirname) {
+    let dir = fromDir
+    for (let i = 0; i < 6; i++) {
+        const pkgPath = path.join(dir, "package.json")
+        if (fs.existsSync(pkgPath)) {
+            const pkg = readJsonFile(pkgPath)
+            if (pkg?.name === "tailjng") {
+                return dir
+            }
+        }
+        const parent = path.dirname(dir)
+        if (parent === dir) break
+        dir = parent
+    }
+    return path.join(fromDir, "..", "..")
+}
+
+function getPackageVersion(fromDir = __dirname) {
+    const pkgPath = path.join(getPackageRoot(fromDir), "package.json")
+    const pkg = readJsonFile(pkgPath)
+    return pkg?.version ?? "unknown"
+}
+
+function getRegistryPath(fromDir = __dirname) {
+    return path.join(getPackageRoot(fromDir), "registry", "components.json")
+}
+
+function loadComponentRegistry(fromDir = __dirname) {
+    const registryPath = getRegistryPath(fromDir)
+    const registry = readJsonFile(registryPath)
+    if (!registry?.components) {
+        throw new Error(`Component registry not found or invalid: ${registryPath}`)
+    }
+    return registry.components
+}
+
+function getTailjngConfig(projectRoot) {
+    return readJsonFile(path.join(projectRoot, ".tailjng", "paths.json"))
+}
+
+function getComponentsBasePath(projectRoot) {
+    const config = getTailjngConfig(projectRoot)
+    const componentsPath = config?.components ?? "src/app/tailjng"
+    return path.join(projectRoot, componentsPath)
+}
+
+/**
+ * Returns all transitive dependencies for a component in install order.
+ */
+function collectDependencyTree(componentName, componentList, collected = [], visited = new Set()) {
+    const component = componentList[componentName]
+    if (!component) return collected
+
+    for (const dep of component.dependencies ?? []) {
+        if (visited.has(dep)) continue
+        visited.add(dep)
+        collectDependencyTree(dep, componentList, collected, visited)
+        collected.push(dep)
+    }
+
+    return collected
+}
+
+module.exports = {
+    getPackageRoot,
+    getPackageVersion,
+    getRegistryPath,
+    loadComponentRegistry,
+    getTailjngConfig,
+    getComponentsBasePath,
+    collectDependencyTree,
+}

package/cli/settings/overwrite-policy.js

@@ -0,0 +1,18 @@
+// overwrite-policy.js — session overwrite strategy for component installs
+
+/** @type {'ask' | 'all' | 'skip' | null} */
+let policy = null
+
+function getOverwritePolicy() {
+    return policy
+}
+
+function setOverwritePolicy(value) {
+    policy = value
+}
+
+function resetOverwritePolicy() {
+    policy = null
+}
+
+module.exports = { getOverwritePolicy, setOverwritePolicy, resetOverwritePolicy }

package/cli/settings/path-utils.js

@@ -1,25 +1,15 @@
-// path-utils.js
+// path-utils.js — maps registry paths to consumer app install locations
 
+const fs = require("fs")
 const path = require("path")
+const { getComponentsBasePath } = require("./lib-utils")
 
-/**
- * Extracts folder structure information from the component path
- * @param {string} componentPath - Path del componente (ej: "src/lib/components/alert/dialog-alert")
- * @returns {object} - Information about the folder structure
- */
-function parseComponentPath(componentPath) {
-
-    // Remove the base prefix "src/lib/components/"
-    const basePath = "src/lib/components/"
-    const relativePath = componentPath.replace(basePath, "")
+const COMPONENTS_SOURCE_PREFIX = "src/lib/components/"
 
-    // Split the path into parts
+function parseComponentPath(componentPath) {
+    const relativePath = componentPath.replace(COMPONENTS_SOURCE_PREFIX, "")
     const pathParts = relativePath.split("/")
-
-    // The last element is the component name
     const componentFolder = pathParts[pathParts.length - 1]
-
-    // All except the last element are subfolders
     const subfolders = pathParts.slice(0, -1)
 
     return {
@@ -30,23 +20,18 @@ function parseComponentPath(componentPath) {
     }
 }
 
-/**
- * Make sure to keep the folder structure
- * @param {string} projectRoot - Project root directory
- * @param {string} componentName - Component name
- * @param {string} componentPath - Original component path
- * @returns {string} - Full target path
- */
 function buildTargetPath(projectRoot, componentName, componentPath) {
     const pathInfo = parseComponentPath(componentPath)
+    const basePath = getComponentsBasePath(projectRoot)
 
     if (pathInfo.hasSubfolders) {
-        // If it has subfolders, keep the structure
-        return path.join(projectRoot, "src", "app", "tailjng", pathInfo.fullSubPath, componentName)
-    } else {
-        // If it doesn't have subfolders, use the original structure
-        return path.join(projectRoot, "src", "app", "tailjng", componentName)
+        return path.join(basePath, pathInfo.fullSubPath, componentName)
     }
+    return path.join(basePath, componentName)
+}
+
+function isComponentInstalled(projectRoot, componentName, componentPath) {
+    return fs.existsSync(buildTargetPath(projectRoot, componentName, componentPath))
 }
 
-module.exports = { parseComponentPath, buildTargetPath }
+module.exports = { parseComponentPath, buildTargetPath, isComponentInstalled }