tailjng 0.0.13 → 0.0.15

package/cli/component-manager.js

@@ -0,0 +1,45 @@
+const fs = require("fs")
+const path = require("path")
+const { copyComponentFiles } = require("./file-operations")
+const { installDependencies } = require("./dependency-manager")
+const { COLORS } = require("./settings/colors")
+
+async function addComponent(componentName, componentList) {
+    const componentData = componentList[componentName]
+    if (!componentData) {
+        console.error(
+            `${COLORS.red}[tailjng CLI] ERROR: Component "${componentName}" not found in the component list.${COLORS.reset}`,
+        )
+        process.exit(1)
+    }
+
+    console.log(`${COLORS.blue}[tailjng CLI] Adding component: ${componentName}${COLORS.reset}`)
+
+    // Create a Set to track already processed components
+    const installedComponents = new Set()
+
+    // Install dependencies first to ensure they are available before the main component
+    await installDependencies(componentData.dependencies, componentList, installedComponents)
+
+    // Check if the main component was already processed as a dependency
+    if (!installedComponents.has(componentName)) {
+        // Copy the main component files to the project
+        const wasInstalled = await copyComponentFiles(componentName, componentData.path, false)
+
+        if (wasInstalled) {
+            console.log(
+                `${COLORS.greenBright}[tailjng CLI] ✔ Component "${componentName}" installed successfully.${COLORS.reset}`,
+            )
+        } else {
+            console.log(
+                `${COLORS.yellow}[tailjng CLI] Component "${componentName}" installation was cancelled by user.${COLORS.reset}`,
+            )
+        }
+    } else {
+        console.log(
+            `${COLORS.dim}[tailjng CLI] Main component "${componentName}" was already processed as a dependency.${COLORS.reset}`,
+        )
+    }
+}
+
+module.exports = { addComponent }

package/cli/dependency-manager.js

@@ -0,0 +1,52 @@
+const { copyComponentFiles } = require("./file-operations")
+const { COLORS } = require("./settings/colors")
+
+async function installDependencies(dependencies = [], componentList, installedComponents = new Set()) {
+    if (dependencies.length === 0) {
+        console.log(`${COLORS.dim}[tailjng CLI] No dependencies to install.${COLORS.reset}`)
+        return
+    }
+
+    for (const dep of dependencies) {
+        // Avoid infinite loops by checking if the component was already processed
+        if (installedComponents.has(dep)) {
+            console.log(`${COLORS.dim}[tailjng CLI] Component "${dep}" already processed, skipping.${COLORS.reset}`)
+            continue
+        }
+
+        const depComponentData = componentList[dep]
+        if (!depComponentData) {
+            console.error(
+                `${COLORS.red}[tailjng CLI] ERROR: Dependency component "${dep}" not found in the component list.${COLORS.reset}`,
+            )
+            process.exit(1)
+        }
+
+        console.log(`${COLORS.magenta}[tailjng CLI] Installing dependency component: ${dep}${COLORS.reset}`)
+
+        // Mark as processed before installing to avoid infinite loops
+        installedComponents.add(dep)
+
+        // Install recursively the dependencies of this dependency
+        if (depComponentData.dependencies && depComponentData.dependencies.length > 0) {
+            await installDependencies(depComponentData.dependencies, componentList, installedComponents)
+        }
+
+        // Copy the dependent component files
+        try {
+            const wasInstalled = await copyComponentFiles(dep, depComponentData.path, true)
+
+            if (wasInstalled) {
+                console.log(`${COLORS.green}[tailjng CLI] Successfully installed dependency: ${dep}${COLORS.reset}`)
+            } else {
+                console.log(`${COLORS.dim}[tailjng CLI] Dependency "${dep}" was skipped by user choice.${COLORS.reset}`)
+            }
+        } catch (err) {
+            console.error(`${COLORS.red}[tailjng CLI] Failed to install dependency component: ${dep}${COLORS.reset}`)
+            console.error(`${COLORS.red}[tailjng CLI] Error details:${COLORS.reset}`, err)
+            process.exit(1)
+        }
+    }
+}
+
+module.exports = { installDependencies }

package/cli/file-operations.js

@@ -0,0 +1,88 @@
+const fs = require("fs")
+const path = require("path")
+const { COLORS } = require("./settings/colors")
+const { generateHeaderComment } = require("./settings/header-generator")
+const { askOverwrite } = require("./settings/prompt-utils")
+const { buildTargetPath, parseComponentPath } = require("./settings/path-utils")
+
+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)) {
+            console.error(`${COLORS.red}[tailjng CLI] ERROR: node_modules not found in project root.${COLORS.reset}`)
+            process.exit(1)
+        }
+    }
+
+    // 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}[tailjng CLI] ERROR: Component path "${nodeModulesPath}" does not exist.${COLORS.reset}`,
+        )
+        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}[tailjng CLI] Skipping "${componentName}" - keeping existing version.${COLORS.reset}`)
+            return false // Return false to indicate that it was not installed
+        }
+
+        // If decided to overwrite, remove the existing directory
+        console.log(`${COLORS.yellow}[tailjng CLI] Removing existing "${componentName}" to overwrite...${COLORS.reset}`)
+        fs.rmSync(targetPath, { recursive: true, force: true })
+    }
+
+    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}[tailjng CLI] Copying ${componentType} "${componentName}" (${pathInfo.fullSubPath}) → ${relativeTargetPath}${COLORS.reset}`,
+        )
+    } else {
+        console.log(
+            `${COLORS.blue}[tailjng CLI] Copying ${componentType} "${componentName}" → ${relativeTargetPath}${COLORS.reset}`,
+        )
+    }
+
+    // Create the target directory structure
+    fs.mkdirSync(targetPath, { recursive: true })
+
+    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}[tailjng CLI] Copied file: ${file}${COLORS.reset}`)
+    })
+
+    return true // Return true to indicate that it was installed successfully
+}
+
+module.exports = { copyComponentFiles }

package/cli/index.js

@@ -0,0 +1,51 @@
+#!/usr/bin/env node
+
+const { checkTailwindInstalled } = require("./settings/tailwind-check")
+const { addComponent } = require("./component-manager")
+const { getComponentList } = require("./settings/components-list")
+const { COLORS } = require("./settings/colors")
+
+const args = process.argv.slice(2)
+const command = args[0]
+
+async function main() {
+    if (command === "add") {
+        const componentName = args[1]
+        if (!componentName) {
+            console.error(`${COLORS.red}[tailjng CLI] ERROR: Please specify a component name.${COLORS.reset}`)
+            console.log(`${COLORS.cyan}Usage: npx tailjng add <componentName>${COLORS.reset}`)
+            process.exit(1)
+        }
+        checkTailwindInstalled()
+        await addComponent(componentName, getComponentList())
+    } else if (command === "list") {
+        showComponentList()
+    } else {
+        console.log(`${COLORS.cyan}Usage:
+  npx tailjng add <componentName>      Add a component to your project
+  npx tailjng list                    List all available components${COLORS.reset}`)
+    }
+}
+
+function showComponentList() {
+    const componentList = getComponentList()
+    if (Object.keys(componentList).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"
+        console.log(
+            `${COLORS.green}- ${component}${COLORS.reset} ${COLORS.dim}(Dependencies: ${dependencies})${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/colors.js

@@ -0,0 +1,17 @@
+// Color helpers
+const COLORS = {
+    reset: "\x1b[0m",
+    bright: "\x1b[1m",
+    dim: "\x1b[2m",
+    underscore: "\x1b[4m",
+    red: "\x1b[31m",
+    green: "\x1b[32m",
+    yellow: "\x1b[33m",
+    blue: "\x1b[34m",
+    magenta: "\x1b[35m",
+    cyan: "\x1b[36m",
+    white: "\x1b[37m",
+    greenBright: "\x1b[92m",
+}
+
+module.exports = { COLORS }

package/cli/settings/components-list.js

@@ -0,0 +1,87 @@
+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: [],
+        },
+        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"],
+        },
+        'input-checkbox': {
+            path: "src/lib/components/checkbox/input-checkbox",
+            dependencies: ["color"],
+        },
+        'switch-checkbox': {
+            path: "src/lib/components/checkbox/switch-checkbox",
+            dependencies: ["color"],
+        },
+        'alert-dialog': {
+            path: "src/lib/components/alert/dialog-alert",
+            dependencies: ["button", "color"],
+        },
+        'alert-toast': {
+            path: "src/lib/components/alert/toast-alert",
+            dependencies: ["button", "color"],
+        },
+        'progress-bar': {
+            path: "src/lib/components/progress-bar",
+            dependencies: [],
+        },
+        'viewer-image': {
+            path: "src/lib/components/image/viewer-image",
+            dependencies: ["button"],
+        },
+        dialog: {
+            path: "src/lib/components/dialog",
+            dependencies: [],
+        },
+        'input-file': {
+            path: "src/lib/components/input/file-input",
+            dependencies: [],
+        },
+        'input-textarea': {
+            path: "src/lib/components/input/textarea-input",
+            dependencies: [],
+        },
+        'input-range': {
+            path: "src/lib/components/input/range-input",
+            dependencies: [],
+        },
+        input: {
+            path: "src/lib/components/input/input",
+            dependencies: [],
+        },
+        'select-multi-table': {
+            path: "src/lib/components/select/multi-table",
+            dependencies: ["button"],
+        },
+        'select-multi-dropdown': {
+            path: "src/lib/components/select/multi-dropdown",
+            dependencies: [],
+        },
+        'select-dropdown': {
+            path: "src/lib/components/select/dropdown",
+            dependencies: [],
+        },
+        // Add more components as needed
+    }
+}
+
+module.exports = { getComponentList }

package/cli/settings/header-generator.js

@@ -0,0 +1,42 @@
+const path = require("path")
+
+function generateHeaderComment(fileName) {
+  const headerContent = `===============================================
+Component and Function Library - tailjNg
+===============================================
+Description:
+  This library is designed to provide a set of reusable components and optimized functions
+  to facilitate the development of user interfaces and data management in web applications.
+  It includes tools to improve the developer experience and user interaction.
+
+Purpose:
+  - Create modular and customizable components.
+  - Improve front-end development efficiency through reusable tools.
+  - Provide scalable solutions that are easy to integrate with existing applications.
+
+Usage:
+  To access full functionality, simply import the necessary modules and use the
+  components according to your use case. Be sure to review the official documentation for detailed examples 
+  on implementation and customization.
+
+Authors:
+  Armando Josue Velasquez Delgado - Lead Developer
+
+License:
+  This project is licensed under the BSD 3-Clause - see the LICENSE file for more details.
+
+Version: 0.0.15
+Creation Date: 2025-01-04
+===============================================`
+
+  const ext = path.extname(fileName).toLowerCase()
+  if (ext === ".ts" || ext === ".js" || ext === ".css" || ext === ".scss") {
+    return `/*\n${headerContent}\n*/`
+  } else if (ext === ".html") {
+    return `<!--\n${headerContent}\n-->`
+  } else {
+    return `/*\n${headerContent}\n*/`
+  }
+}
+
+module.exports = { generateHeaderComment }

package/cli/settings/path-utils.js

@@ -0,0 +1,50 @@
+const path = require("path")
+
+/**
+ * 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, "")
+
+    // Split the path into parts
+    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 {
+        componentFolder,
+        subfolders,
+        hasSubfolders: subfolders.length > 0,
+        fullSubPath: subfolders.join("/"),
+    }
+}
+
+/**
+ * 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)
+
+    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)
+    }
+}
+
+module.exports = { parseComponentPath, buildTargetPath }

package/cli/settings/prompt-utils.js

@@ -0,0 +1,37 @@
+const readline = require("readline")
+const { COLORS } = require("./colors")
+
+function createReadlineInterface() {
+    return readline.createInterface({
+        input: process.stdin,
+        output: process.stdout,
+    })
+}
+
+function askQuestion(question) {
+    return new Promise((resolve) => {
+        const rl = createReadlineInterface()
+        rl.question(question, (answer) => {
+            rl.close()
+            resolve(answer.toLowerCase().trim())
+        })
+    })
+}
+
+async function askOverwrite(componentName, targetPath, isDependency = false) {
+    const componentType = isDependency ? "dependency component" : "component"
+
+    console.log(
+        `${COLORS.yellow}⚠  [tailjng CLI] WARNING: ${componentType} "${componentName}" already exists!${COLORS.reset}`,
+    )
+    console.log(`${COLORS.dim}   Path: ${targetPath}${COLORS.reset}`)
+    console.log(
+        `${COLORS.yellow}   This component may have been modified. Overwriting will replace your changes.${COLORS.reset}`,
+    )
+
+    const answer = await askQuestion(`${COLORS.cyan}   Do you want to overwrite it? (y/N): ${COLORS.reset}`)
+
+    return answer === "y" || answer === "yes"
+}
+
+module.exports = { askOverwrite }

package/cli/settings/tailwind-check.js

@@ -0,0 +1,21 @@
+const { COLORS } = require("./colors")
+
+function checkTailwindInstalled() {
+    try {
+        require.resolve("tailwindcss")
+        console.log(`${COLORS.green}[tailjng CLI] TailwindCSS is installed.${COLORS.reset}`)
+    } catch (e) {
+        console.warn(`${COLORS.yellow}
+[tailjng CLI] WARNING:
+------------------------------------------------------------
+TailwindCSS is not installed in your project.
+Please install it to ensure styles work properly:
+    npm install tailwindcss
+And generate the config:
+    npx tailwindcss init
+------------------------------------------------------------
+${COLORS.reset}`)
+    }
+}
+
+module.exports = { checkTailwindInstalled }