@rajdeep0510/scaffold-cli 1.0.2 → 1.3.0

package/.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+    "files.watcherExclude": {
+        "**/.git/objects/**": true,
+        "**/.git/subtree-cache/**": true,
+        "**/.hg/store/**": true,
+        "**/.git/**": true,
+        "**/node_modules/**": true,
+        "**/.vscode/**": true
+    }
+}

package/README.md

@@ -1,5 +1,7 @@
 # scaffold
 
+![NPM Version](https://img.shields.io/npm/v/%40rajdeep0510%2Fscaffold-cli)
+
 A CLI tool for creating versatile and modern UI components.
 
 ## Import components

package/bin/index.js

@@ -27,15 +27,15 @@ program.addHelpText('before', () => {
     );
     
     const importInfo = chalk.blue("How to import components:") + "\n" + 
-                      chalk.green("   import { Button } from '@/components/ui/button'");
+                    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)
+    .command('add <component-name>')
+    .description('Add a new component')
+    .action(addComponent)
 
 program
     .command('list')

package/commands/addComponent.js

@@ -4,73 +4,99 @@ import { fileURLToPath } from 'url'
 import chalk from 'chalk'
 import figlet from 'figlet'
 import ora from 'ora'
+import { execSync } from 'child_process'
 
 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);
-        })
-
-    )
+  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'))
+  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
-    }
+  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)
+  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
-    }
+  // 🔎 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
-    }
+  // 🔎 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
-    }
+  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()
+  // 🌀 Spinner while copying
+  const spinner = ora(`Adding component '${name}'...`).start()
 
-    try {
-        await fs.ensureDir(targetDir)
-        await fs.copy(templateDir, targetDir)
+  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}'`))
+    // Install dependencies if specified in meta.json
+    if (meta.dependencies && (meta.dependencies.npm?.length > 0 || meta.dependencies.peer?.length > 0)) {
+      spinner.text = `Installing dependencies for '${name}'...`
+      
+      try {
+        if (meta.dependencies.npm?.length > 0) {
+          const npmDeps = meta.dependencies.npm.join(' ')
+          execSync(`npm install ${npmDeps}`, { stdio: 'inherit' })
+          console.log(chalk.green(`✅ Installed npm dependencies: ${npmDeps}`))
+        }
+        
+        if (meta.dependencies.peer?.length > 0) {
+          const peerDeps = meta.dependencies.peer.join(' ')
+          execSync(`npm install --save-peer ${peerDeps}`, { stdio: 'inherit' })
+          console.log(chalk.green(`✅ Installed peer dependencies: ${peerDeps}`))
+        }
+      } catch (err) {
+        console.log(chalk.yellow(`⚠️  Warning: Failed to install some dependencies. You may need to install them manually.`))
         console.error(err)
+      }
     }
+
+    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.magenta(`Author :`), chalk.white(meta.author))
+    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)
+  }
 }
+
+// change made TODO:remove

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rajdeep0510/scaffold-cli",
-  "version": "1.0.2",
+  "version": "1.3.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",
@@ -39,4 +39,4 @@
     "ora": "^8.2.0",
     "prop-types": "^15.8.1"
   }
-}
+}

package/templates/Avatar/component.jsx

@@ -0,0 +1,62 @@
+// component.jsx
+import { useState } from "react";
+import PropTypes from "prop-types";
+
+export default function Avatar({
+  src,
+  alt,
+  name,
+  info,
+  size = "md",
+  cardPosition = "bottom",
+}) {
+  const [showCard, setShowCard] = useState(false);
+
+  // Avatar size styles
+  const sizeClasses = {
+    sm: "w-8 h-8",
+    md: "w-12 h-12",
+    lg: "w-16 h-16",
+  };
+
+  // Hover card position
+  const positionClasses =
+    cardPosition === "top" ? "bottom-full mb-2" : "top-full mt-2";
+
+  return (
+    <div
+      className="relative inline-block"
+      onMouseEnter={() => setShowCard(true)}
+      onMouseLeave={() => setShowCard(false)}
+    >
+      {/* Avatar Image */}
+      <img
+        src={src}
+        alt={alt || "Avatar"}
+        className={`${sizeClasses[size]} rounded-full object-cover border shadow-sm cursor-pointer`}
+      />
+
+      {/* Hover Card */}
+      {showCard && (
+        <div
+          className={`absolute left-1/2 -translate-x-1/2 ${positionClasses} 
+                      bg-white shadow-lg rounded-2xl p-3 w-48 
+                      border text-sm z-10`}
+        >
+          <p className="font-extrabold">{name}</p>
+          <p className="text-gray-600">{info}</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// PropTypes validation
+Avatar.propTypes = {
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  info: PropTypes.string,
+  size: PropTypes.oneOf(["sm", "md", "lg"]),
+  cardPosition: PropTypes.oneOf(["top", "bottom"]),
+};

package/templates/Avatar/index.js

@@ -0,0 +1,5 @@
+/**
+ * Avatar component barrel export
+ */
+export { default } from "./component";
+export { default as Avatar } from "./component";

package/templates/Avatar/meta.json

@@ -0,0 +1,92 @@
+{
+  "name": "Avatar",
+  "description": "An avatar component that displays a profile picture and shows a hover card with name and info.",
+  "category": "display",
+  "tags": [
+    "avatar",
+    "profile",
+    "hover",
+    "info",
+    "card",
+    "ui",
+    "tailwind"
+  ],
+  "version": "1.0.0",
+  "author": "@rajdeep",
+  "created": "2025-08-29",
+  "dependencies": {
+    "npm": [],
+    "peer": [
+      "react",
+      "prop-types"
+    ]
+  },
+  "props": [
+    {
+      "name": "src",
+      "type": "string",
+      "required": true,
+      "default": "undefined",
+      "description": "Image URL or path from public folder for the avatar"
+    },
+    {
+      "name": "alt",
+      "type": "string",
+      "required": false,
+      "default": "Avatar",
+      "description": "Alternative text for accessibility"
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "required": true,
+      "default": "undefined",
+      "description": "Name displayed in hover card"
+    },
+    {
+      "name": "info",
+      "type": "string",
+      "required": false,
+      "default": "undefined",
+      "description": "Additional info displayed in hover card"
+    },
+    {
+      "name": "size",
+      "type": "string",
+      "required": false,
+      "default": "md",
+      "description": "Avatar size",
+      "options": [
+        "sm",
+        "md",
+        "lg"
+      ]
+    },
+    {
+      "name": "cardPosition",
+      "type": "string",
+      "required": false,
+      "default": "bottom",
+      "description": "Position of hover card",
+      "options": [
+        "top",
+        "bottom"
+      ]
+    }
+  ],
+  "files": [
+    "component.jsx",
+    "index.js",
+    "meta.json"
+  ],
+  "customization": {
+    "styling_notes": "Avatar size is controlled via the 'size' prop. Hover card colors, shadow, and border radius can be customized via Tailwind classes in the component."
+  },
+  "accessibility": {
+    "features": [
+      "Hover card provides additional info",
+      "Alt text for image for screen readers",
+      "Keyboard focus not required but can be extended"
+    ]
+  }
+}

package/templates/Card/Card.jsx

@@ -0,0 +1,187 @@
+import React from "react";
+
+const VARIANTS = {
+  elevated: "shadow-xl border-transparent",
+  outlined: "border border-opacity-20 shadow-sm",
+  flat: "shadow-none border-transparent",
+  glass: "backdrop-blur-xl bg-opacity-70 border border-white/10 shadow-lg",
+  gradient: "border-none shadow-2xl bg-gradient-to-br",
+};
+
+const THEMES = {
+  light: {
+    base: "bg-white text-slate-800",
+    glass: "bg-white/70 text-slate-900 border-slate-200/50",
+    border: "border-slate-200",
+    subtext: "text-slate-500",
+    divider: "border-slate-100",
+  },
+  dark: {
+    base: "bg-slate-900 text-slate-100",
+    glass: "bg-slate-900/60 text-white border-white/10",
+    border: "border-slate-800",
+    subtext: "text-slate-400",
+    divider: "border-slate-800",
+  },
+};
+
+const PADDINGS = {
+  none: "p-0",
+  sm: "p-3",
+  md: "p-6",
+  lg: "p-8",
+  xl: "p-10",
+};
+
+const ROUNDED = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl",
+  "3xl": "rounded-3xl",
+  full: "rounded-full",
+};
+
+const HOVER_EFFECTS = {
+  none: "",
+  lift: "hover:-translate-y-1 hover:shadow-2xl",
+  scale: "hover:scale-[1.02]",
+  glow: "hover:shadow-indigo-500/20 hover:border-indigo-500/30",
+  shimmer: "hover:bg-opacity-90",
+};
+
+/**
+ * @param {Object} props
+ * @param {React.ReactNode} [props.children]
+ * @param {string} [props.title]
+ * @param {string} [props.subtitle]
+ * @param {string} [props.image]
+ * @param {boolean} [props.imageFull]
+ * @param {React.ReactNode} [props.footer]
+ * @param {React.ReactNode} [props.action]
+ * @param {string} [props.badge]
+ * @param {string} [props.theme]
+ * @param {string} [props.variant]
+ * @param {string} [props.padding]
+ * @param {string} [props.rounded]
+ * @param {string} [props.hoverEffect]
+ * @param {string} [props.className]
+ * @param {string} [props.width]
+ * @param {function} [props.onClick]
+ */
+export default function Card({
+  children = undefined,
+  title = undefined,
+  subtitle = undefined,
+  image = undefined,
+  imageFull = false, // If true, image covers the background or top area completely without padding
+  footer = undefined,
+  action = undefined,
+  badge = undefined,
+  theme = "dark",
+  variant = "elevated",
+  padding = "md",
+  rounded = "2xl",
+  hoverEffect = "lift",
+  className = "",
+  width = "w-full max-w-sm", // Default width constraint
+  onClick = undefined,
+  ...props
+}) {
+  const isGlass = variant === "glass";
+  const currentTheme = THEMES[theme] || THEMES.dark;
+  const baseStyle = isGlass ? currentTheme.glass : currentTheme.base;
+  const borderColor = currentTheme.border;
+
+  return (
+    <div
+      onClick={onClick}
+      className={`
+        relative flex flex-col overflow-hidden transition-all duration-300 ease-out group
+        ${width}
+        ${ROUNDED[rounded] || ROUNDED["2xl"]}
+        ${VARIANTS[variant] || VARIANTS.elevated}
+        ${baseStyle}
+        ${!isGlass && variant === "outlined" ? borderColor : ""}
+        ${HOVER_EFFECTS[hoverEffect] || ""}
+        ${onClick ? "cursor-pointer" : ""}
+        ${className}
+      `}
+      {...props}
+    >
+      {/* Background Image (Optional absolute overlay) */}
+      {image && imageFull && (
+        <div className="absolute inset-0 z-0">
+          <img
+            src={image}
+            alt={title || "Card background"}
+            className="h-full w-full object-cover opacity-20 group-hover:scale-105 transition-transform duration-700"
+          />
+          <div
+            className={`absolute inset-0 bg-gradient-to-t ${
+              theme === "dark" ? "from-slate-900" : "from-white"
+            } via-transparent to-transparent`}
+          />
+        </div>
+      )}
+
+      {/* Header Image (Standard top image) */}
+      {image && !imageFull && (
+        <div className="relative h-48 w-full overflow-hidden z-10">
+          <img
+            src={image}
+            alt={title}
+            className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
+          />
+          {badge && (
+            <div className="absolute top-4 left-4">
+              <span className="px-3 py-1 text-xs font-bold uppercase tracking-wider text-white bg-black/50 backdrop-blur-md rounded-full">
+                {badge}
+              </span>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Content Container */}
+      <div className={`relative z-10 flex flex-col h-full ${PADDINGS[padding]}`}>
+        {/* Header Section */}
+        {(title || subtitle || action) && (
+          <div className="flex justify-between items-start mb-4">
+            <div className="flex-1">
+              {title && (
+                <h3 className="text-xl font-bold tracking-tight mb-1">
+                  {title}
+                </h3>
+              )}
+              {subtitle && (
+                <p className={`text-sm font-medium ${currentTheme.subtext}`}>
+                  {subtitle}
+                </p>
+              )}
+            </div>
+            {action && <div className="ml-4">{action}</div>}
+          </div>
+        )}
+
+        {/* Main Body */}
+        <div className={`flex-1 ${currentTheme.subtext} leading-relaxed`}>
+          {children}
+        </div>
+
+        {/* Footer Section */}
+        {footer && (
+          <div
+            className={`mt-6 pt-4 border-t ${currentTheme.divider} flex items-center justify-between`}
+          >
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+Card.displayName = "Card";

package/templates/Card/index.js

@@ -0,0 +1,2 @@
+export { default as Card } from "./Card";
+export { default } from "./Card";

package/templates/Card/meta.json

@@ -0,0 +1,100 @@
+{
+    "name": "Card",
+    "description": "A versatile card component with support for multiple themes, variants, and interactive states.",
+    "props": {
+        "title": {
+            "type": "string",
+            "description": "The main heading of the card."
+        },
+        "subtitle": {
+            "type": "string",
+            "description": "Secondary text usually placed below the title."
+        },
+        "image": {
+            "type": "string",
+            "description": "URL of the image to display."
+        },
+        "imageFull": {
+            "type": "boolean",
+            "default": false,
+            "description": "If true, the image is used as a background with an overlay."
+        },
+        "badge": {
+            "type": "string",
+            "description": "Top-left badge text overlaying the image."
+        },
+        "action": {
+            "type": "node",
+            "description": "Element to display in the top-right corner (e.g., button, icon)."
+        },
+        "footer": {
+            "type": "node",
+            "description": "Content to display at the bottom of the card with a divider."
+        },
+        "theme": {
+            "type": "enum",
+            "options": [
+                "light",
+                "dark"
+            ],
+            "default": "dark",
+            "description": "Color scheme of the card."
+        },
+        "variant": {
+            "type": "enum",
+            "options": [
+                "elevated",
+                "outlined",
+                "flat",
+                "glass",
+                "gradient"
+            ],
+            "default": "elevated",
+            "description": "Visual style of the card container."
+        },
+        "padding": {
+            "type": "enum",
+            "options": [
+                "none",
+                "sm",
+                "md",
+                "lg",
+                "xl"
+            ],
+            "default": "md",
+            "description": "Internal padding of the content area."
+        },
+        "rounded": {
+            "type": "enum",
+            "options": [
+                "none",
+                "sm",
+                "md",
+                "lg",
+                "xl",
+                "2xl",
+                "3xl",
+                "full"
+            ],
+            "default": "2xl",
+            "description": "Border radius of the card."
+        },
+        "hoverEffect": {
+            "type": "enum",
+            "options": [
+                "none",
+                "lift",
+                "scale",
+                "glow",
+                "shimmer"
+            ],
+            "default": "lift",
+            "description": "Animation effect on hover."
+        },
+        "width": {
+            "type": "string",
+            "default": "w-full max-w-sm",
+            "description": "Width classes to control the card's dimensions."
+        }
+    }
+}