@rajdeep0510/scaffold-cli 1.0.0

package/.idea/cil-mvp.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/jsLibraryMappings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <includedPredefinedLibrary name="Node.js Core" />
+  </component>
+</project>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/cil-mvp.iml" filepath="$PROJECT_DIR$/.idea/cil-mvp.iml" />
+    </modules>
+  </component>
+</project>

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Rajdeep Vala 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,49 @@
+# lib_ui
+
+A CLI tool for creating versatile and modern UI components.
+
+## Installation
+
+```bash
+npm install -g lib_ui
+```
+
+## Usage
+
+```bash
+lib_ui add <component-name>
+```
+
+### Examples
+
+```bash
+lib_ui add Header
+lib_ui add Button
+lib_ui add Card
+```
+
+## Troubleshooting
+
+If you get a "command not found" error after installation, you may need to add npm's global bin directory to your PATH:
+
+### For macOS/Linux:
+```bash
+# Add this to your ~/.zshrc or ~/.bashrc
+export PATH="$(npm config get prefix)/bin:$PATH"
+```
+
+### For Windows:
+The npm global bin directory is usually already in your PATH. If not, you can find it by running:
+```bash
+npm config get prefix
+```
+
+## Development
+
+To install locally for development:
+```bash
+git clone <repository-url>
+cd lib_ui
+npm install
+npm link
+``` 

package/bin/index.js

@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+import { Command } from 'commander'
+import { addComponent } from '../commands/addComponent.js'
+import chalk from "chalk";
+import figlet from "figlet";
+import list from "../commands/list.js";
+
+const program = new Command()
+
+program
+    .name('scaffold')
+    .version('1.0.0', '-v, --version', 'output the current version')
+    .description('Custom UI component generator')
+
+// Add custom help text before the built-in help
+program.addHelpText('before', () => {
+    const banner = chalk.cyan(
+        figlet.textSync("Scaffold", {
+            font: "Standard",
+            horizontalLayout: "default",
+            verticalLayout: "default"
+        })
+    );
+    
+    const description = chalk.bold(
+        "This is a UI library of components which are very easy to import and use"
+    );
+    
+    const importInfo = chalk.blue("How to import components:") + "\n" + 
+                      chalk.green("   import { Button } from '@/components/ui/button'");
+    
+    return banner + "\n\n" + description + "\n\n" + importInfo + "\n\n";
+});
+
+program
+  .command('add <component-name>')
+  .description('Add a new component')
+  .action(addComponent)
+
+program
+    .command('list')
+    .description('List all the components')
+    .action(list)
+
+program.parse()
+

package/commands/addComponent.js

@@ -0,0 +1,76 @@
+import fs from 'fs-extra'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import chalk from 'chalk'
+import figlet from 'figlet'
+import ora from 'ora'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url)) // ESM-safe __dirname
+
+
+// banner TODO: remove
+console.log(
+    chalk.cyan(
+        figlet.text('scaffold', { font: 'doom' }, function(err, data) {
+            if (err) {
+                console.log('Something went wrong...');
+                console.dir(err);
+                return;
+            }
+            console.log(data);
+        })
+
+    )
+)
+
+export async function addComponent(name) {
+    const useSrc = await fs.pathExists('src')
+    const hasApp = await fs.pathExists(path.join(useSrc ? 'src' : '', 'app'))
+    const hasPages = await fs.pathExists(path.join(useSrc ? 'src' : '', 'pages'))
+
+    if (!hasApp && !hasPages) {
+        console.log(chalk.red('Could not detect Next.js routing structure (no app/ or pages/ directory)'))
+        return
+    }
+
+    const baseDir = useSrc ? 'src/components/ui' : 'components/ui'
+    const targetDir = path.join(baseDir, name)
+    const templateDir = path.resolve(__dirname, '../templates', name)
+
+    // 🔎 check if template folder exists
+    if (!(await fs.pathExists(templateDir))) {
+        console.log(chalk.red(`Template folder '${templateDir}' not found.`))
+        return
+    }
+
+    // 🔎 validate meta.json before copying
+    const metaPath = path.join(templateDir, 'meta.json')
+    if (!(await fs.pathExists(metaPath))) {
+        console.log(chalk.red(`No meta.json found in template '${name}'`))
+        return
+    }
+
+    const meta = await fs.readJson(metaPath)
+    if (!meta.name || !meta.description || !meta.version) {
+        console.log(chalk.red(`Invalid meta.json for '${name}'. Missing required fields.`))
+        return
+    }
+
+    // 🌀 Spinner while copying
+    const spinner = ora(`Adding component '${name}'...`).start()
+
+    try {
+        await fs.ensureDir(targetDir)
+        await fs.copy(templateDir, targetDir)
+
+        spinner.succeed(chalk.green(`Component '${meta.name}' created at ${targetDir}`))
+
+        console.log(chalk.yellow(`ℹ️  Description:`), chalk.white(meta.description))
+        console.log(chalk.magenta(`📦 Version:`), chalk.white(meta.version))
+        console.log(chalk.cyan(`\n👉 Import in Next.js:`))
+        console.log(chalk.blueBright(`   import { ${meta.name} } from "@/components/ui/${name}"\n`))
+    } catch (err) {
+        spinner.fail(chalk.red(`Failed to add component '${name}'`))
+        console.error(err)
+    }
+}

package/commands/list.js

@@ -0,0 +1,62 @@
+import fs from "fs-extra";
+import path from "path";
+import chalk from "chalk";
+import figlet from "figlet";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// 🔹 Helper to render figlet banner
+function renderFiglet(text, font = "Standard") {
+    return new Promise((resolve, reject) => {
+        figlet.text(text, { font }, (err, data) => {
+            if (err) reject(err);
+            else resolve(data);
+        });
+    });
+}
+
+export default async function list() {
+    try {
+        const banner = await renderFiglet("Available Components", "doom");
+        console.log(chalk.cyan(banner));
+
+        const templatesDir = path.resolve(__dirname, "../templates");
+
+        if (!(await fs.pathExists(templatesDir))) {
+            console.log(chalk.red("❌ No templates directory found."));
+            return;
+        }
+
+        const components = await fs.readdir(templatesDir);
+
+        if (!components.length) {
+            console.log(chalk.yellow("⚠️  No components found in templates/"));
+            return;
+        }
+
+        console.log(chalk.green("📦 Components available:\n"));
+
+        for (const comp of components) {
+            const metaPath = path.join(templatesDir, comp, "meta.json");
+
+            if (await fs.pathExists(metaPath)) {
+                const meta = await fs.readJson(metaPath);
+                console.log(
+                    chalk.blueBright(`🔹 ${meta.name} `) +
+                    chalk.gray(`(v${meta.version}) - ${meta.description}`)
+                );
+            } else {
+                console.log(chalk.magenta(`🔹 ${comp}`) + chalk.red(" (no meta.json)"));
+            }
+        }
+
+        console.log(
+            chalk.cyan(
+                "\n👉 Use `scaffold add <component>` to add one of these to your project."
+            )
+        );
+    } catch (err) {
+        console.error(chalk.red("❌ Failed to list components:"), err);
+    }
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@rajdeep0510/scaffold-cli",
+  "version": "1.0.0",
+  "description": "This is a CLI app for a UI library which is used for creating versatile and modern UI components.",
+  "main": "bin/index.js",
+  "type": "module",
+  "bin": {
+    "scaffold": "bin/index.js"
+  },
+  "keywords": [
+    "cli",
+    "ui",
+    "components",
+    "scaffold",
+    "generator"
+  ],
+  "author": "Rajdeep Vala",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rajdeep0510/scaffold-cli.git"
+  },
+  "bugs": {
+    "url": "https://github.com/rajdeep0510/scaffold-cli/issues"
+  },
+  "homepage": "https://github.com/rajdeep0510/scaffold-cli#readme",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "test": "echo 'OK'",
+    "postinstall": "node -e \"console.log('✅ Scaffold CLI installed successfully!\\n💡 Run: scaffold help to get started')\""
+  },
+  "dependencies": {
+    "chalk": "^5.6.0",
+    "commander": "^14.0.0",
+    "figlet": "^1.8.2",
+    "fs-extra": "^11.3.1",
+    "ora": "^8.2.0",
+    "prop-types": "^15.8.1"
+  }
+}

package/templates/button/component.jsx

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * A customizable button component with multiple variants and sizes + click animation
+ */
+const Button = ({
+                    children,
+                    variant = 'primary',
+                    size = 'md',
+                    disabled = false,
+                    loading = false,
+                    className = '',
+                    onClick,
+                    type = 'button',
+                    ...rest
+                }) => {
+    const [isActive, setIsActive] = useState(false);
+
+    const baseStyles = {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        border: 'none',
+        borderRadius: '6px',
+        fontFamily: 'inherit',
+        fontWeight: '500',
+        cursor: disabled || loading ? 'not-allowed' : 'pointer',
+        transition: 'all 0.15s ease-in-out',
+        opacity: disabled || loading ? 0.6 : 1,
+        transform: isActive ? 'scale(0.95)' : 'scale(1)', // 👈 shrink effect
+    };
+
+    const variantStyles = {
+        primary: { backgroundColor: '#3b82f6', color: 'white' },
+        secondary: { backgroundColor: '#f8fafc', color: '#374151', border: '1px solid #d1d5db' },
+        destructive: { backgroundColor: '#dc2626', color: 'white' },
+        outline: { backgroundColor: 'transparent', border: '1px solid #d1d5db', color: '#374151' },
+        ghost: { backgroundColor: 'transparent', color: '#374151' },
+    };
+
+    const sizeStyles = {
+        sm: { height: '32px', padding: '0 12px', fontSize: '14px' },
+        md: { height: '40px', padding: '0 16px', fontSize: '14px' },
+        lg: { height: '44px', padding: '0 24px', fontSize: '16px' },
+        xl: { height: '52px', padding: '0 32px', fontSize: '16px' },
+    };
+
+    const buttonStyles = {
+        ...baseStyles,
+        ...variantStyles[variant],
+        ...sizeStyles[size],
+    };
+
+    const handleClick = (e) => {
+        if (disabled || loading) {
+            e.preventDefault();
+            return;
+        }
+        setIsActive(true);
+        setTimeout(() => setIsActive(false), 150); // reset after animation
+        if (onClick) onClick(e);
+    };
+
+    return (
+        <button
+            type={type}
+            disabled={disabled || loading}
+            onClick={handleClick}
+            className={className}
+            style={buttonStyles}
+            aria-disabled={disabled || loading}
+            aria-busy={loading}
+            {...rest}
+        >
+            {loading ? 'Loading...' : children}
+        </button>
+    );
+};
+
+Button.propTypes = {
+    children: PropTypes.node,
+    variant: PropTypes.oneOf(['primary', 'secondary', 'destructive', 'outline', 'ghost']),
+    size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+    disabled: PropTypes.bool,
+    loading: PropTypes.bool,
+    className: PropTypes.string,
+    onClick: PropTypes.func,
+    type: PropTypes.oneOf(['button', 'submit', 'reset']),
+};
+
+export default Button;

package/templates/button/index.js

@@ -0,0 +1,2 @@
+export { default } from './component';
+export { default as Button } from './component';

package/templates/button/meta.json

@@ -0,0 +1,28 @@
+{
+  "name": "Button",
+  "description": "A customizable button component with multiple variants, sizes, and states.",
+  "category": "form",
+  "tags": ["button", "interactive", "form", "cta"],
+  "version": "1.0.0",
+  "dependencies": {
+    "npm": [],
+    "peer": ["react", "prop-types"]
+  },
+  "props": [
+    { "name": "children", "type": "React.ReactNode", "description": "Content inside the button" },
+    { "name": "variant", "type": "string", "default": "primary", "options": ["primary","secondary","destructive","outline","ghost"] },
+    { "name": "size", "type": "string", "default": "md", "options": ["sm","md","lg","xl"] },
+    { "name": "disabled", "type": "boolean", "default": false, "description": "Disable button" },
+    { "name": "loading", "type": "boolean", "default": false, "description": "Loading state" },
+    { "name": "className", "type": "string", "description": "Extra CSS classes" },
+    { "name": "onClick", "type": "function", "description": "Click handler" },
+    { "name": "type", "type": "string", "default": "button", "options": ["button","submit","reset"] }
+  ],
+  "examples": [
+    { "name": "Basic", "code": "<Button>Click Me</Button>" },
+    { "name": "Variants", "code": "<><Button variant='primary'>Primary</Button><Button variant='secondary'>Secondary</Button></>" },
+    { "name": "Sizes", "code": "<><Button size='sm'>Small</Button><Button size='lg'>Large</Button></>" },
+    { "name": "Loading", "code": "<Button loading>Loading...</Button>" }
+  ],
+  "files": ["component.jsx", "index.js"]
+}