@rajdeep0510/scaffold-cli 1.0.2 → 1.3.0

package/templates/Input/components.jsx

@@ -0,0 +1,33 @@
+// component.jsx
+import PropTypes from "prop-types";
+
+export default function Input({
+  type = "text",
+  placeholder = "",
+  value,
+  onChange,
+  className = "",
+}) {
+  return (
+    <input
+      type={type}
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+      className={`px-3 py-2 rounded-md border outline-none 
+                  transition-all duration-200 
+                  border-gray-300 focus:border-gray-500 
+                  focus:ring-2 focus:ring-gray-300 focus:ring
+                  ${className}`}
+    />
+  );
+}
+
+// PropTypes validation
+Input.propTypes = {
+  type: PropTypes.string,
+  placeholder: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onChange: PropTypes.func,
+  className: PropTypes.string,
+};

package/templates/Input/index.js

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

package/templates/Input/meta.json

@@ -0,0 +1,82 @@
+{
+  "name": "Input",
+  "description": "A customizable input field component with glow effect on focus.",
+  "category": "form",
+  "tags": [
+    "input",
+    "form",
+    "field",
+    "text",
+    "tailwind",
+    "ui"
+  ],
+  "version": "1.0.0",
+  "author": "@rajdeep",
+  "created": "2025-08-30",
+  "dependencies": {
+    "npm": [],
+    "peer": [
+      "react",
+      "prop-types"
+    ]
+  },
+  "props": [
+    {
+      "name": "type",
+      "type": "string",
+      "required": false,
+      "default": "text",
+      "description": "The type of the input field",
+      "options": [
+        "text",
+        "email",
+        "password",
+        "number",
+        "url"
+      ]
+    },
+    {
+      "name": "placeholder",
+      "type": "string",
+      "required": false,
+      "default": "''",
+      "description": "Placeholder text shown when input is empty"
+    },
+    {
+      "name": "value",
+      "type": "string | number",
+      "required": false,
+      "default": "undefined",
+      "description": "The value of the input"
+    },
+    {
+      "name": "onChange",
+      "type": "function",
+      "required": false,
+      "default": "undefined",
+      "description": "Callback function triggered when input value changes"
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "default": "''",
+      "description": "Custom Tailwind or CSS classes to style the input"
+    }
+  ],
+  "files": [
+    "component.jsx",
+    "index.js",
+    "meta.json"
+  ],
+  "customization": {
+    "styling_notes": "Input uses Tailwind classes for border, padding, and glow effect. Customize glow using focus:ring utilities."
+  },
+  "accessibility": {
+    "features": [
+      "Semantic <input> element",
+      "Supports keyboard navigation",
+      "Screen reader friendly with placeholder"
+    ]
+  }
+}

package/templates/Navbar/Navbar.jsx

@@ -0,0 +1,207 @@
+import React, { useState, useEffect } from "react";
+
+/**
+ * @typedef {Object} LinkItem
+ * @property {string} label - The text to display.
+ * @property {string} href - The URL link.
+ */
+
+/**
+ * @param {Object} props
+ * @param {React.ReactNode | string} [props.logo] - Brand logo or text.
+ * @param {LinkItem[]} [props.links] - Array of navigation links.
+ * @param {actionItem[]} [props.actions] - Right-side actions (e.g. Login buttons).
+ * @param {string} [props.theme] - "light" or "dark".
+ * @param {boolean} [props.sticky] - Whether the navbar is sticky.
+ * @param {string} [props.className] - Additional classes.
+ * @param {function} [props.onLinkClick] - Callback when a link is clicked.
+ */
+export default function Navbar({
+  logo = "Brand",
+  links = [
+    { label: "Home", href: "#" },
+    { label: "Features", href: "#" },
+    { label: "Pricing", href: "#" },
+    { label: "About", href: "#" },
+  ],
+    actions = [
+      { label: "Login", href: "#" },
+      { label: "Sign Up", href: "#" },
+  ],
+  theme = "light",
+  sticky = true,
+  className = "",
+  onLinkClick = undefined,
+  ...props
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  // Handle scroll for glass effect or shadow
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 20);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const isDark = theme === "dark";
+
+  // Theme Styles
+  const baseStyles = isDark ? "bg-slate-900 text-white" : "bg-white text-slate-900";
+  const scrolledStyles = isDark
+    ? "bg-slate-900/80 backdrop-blur-md border-b border-white/5"
+    : "bg-white/80 backdrop-blur-md border-b border-slate-200/50";
+  
+  const navClasses = `
+    ${sticky ? "fixed top-0 left-0 right-0 z-50" : "relative"}
+    ${scrolled ? scrolledStyles : baseStyles}
+    ${scrolled ? "shadow-sm" : ""}
+    transition-all duration-300 ease-in-out
+    ${className}
+  `;
+
+  // Link Styles
+  const linkBase = "text-sm font-medium transition-colors duration-200 cursor-pointer";
+  const linkColor = isDark
+    ? "text-slate-300 hover:text-white"
+    : "text-slate-600 hover:text-slate-900";
+    
+  // Mobile Menu Styles
+  const mobileMenuClasses = `
+    absolute top-full left-0 right-0 p-4 border-b
+    ${isDark ? "bg-slate-900 border-white/5" : "bg-white border-slate-100"}
+    ${isOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-4 pointer-events-none"}
+    transition-all duration-300 ease-out origin-top shadow-xl
+  `;
+
+  return (
+    <nav className={navClasses} {...props}>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          
+          {/* Logo Section */}
+          <div className="flex-shrink-0 flex items-center gap-2">
+            <span className={`text-xl font-bold tracking-tight ${isDark ? "text-white" : "text-slate-900"}`}>
+              {logo}
+            </span>
+          </div>
+
+          {/* Desktop Links */}
+          <div className="hidden md:flex items-center space-x-8">
+            {links && links.map((link, index) => (
+              <a
+                key={index}
+                href={link.href}
+                onClick={(e) => {
+                   if (onLinkClick) onLinkClick(e, link);
+                }}
+                className={`${linkBase} ${linkColor}`}
+              >
+                {link.label}
+              </a>
+            ))}
+          </div>
+
+          {/* Actions (Desktop) */}
+          <div className="hidden md:flex items-center gap-4">
+             {Array.isArray(actions) ? (
+              actions.map((action, index) => (
+                <a
+                  key={index}
+                  href={action.href}
+                  className={`px-4 py-2 text-sm font-medium rounded-lg transition-all ${
+                    index === actions.length - 1
+                      ? isDark
+                        ? "bg-indigo-600 text-white hover:bg-indigo-500 shadow-lg shadow-indigo-500/20"
+                        : "bg-slate-900 text-white hover:bg-slate-800 shadow-lg"
+                      : isDark
+                      ? "text-slate-300 hover:text-white"
+                      : "text-slate-600 hover:text-slate-900"
+                  }`}
+                >
+                  {action.label}
+                </a>
+              ))
+            ) : (
+              actions
+            )}
+          </div>
+
+          {/* Mobile Toggle Button */}
+          <div className="flex md:hidden">
+            <button
+              onClick={() => setIsOpen(!isOpen)}
+              className={`p-2 rounded-md ${
+                  isDark ? "text-slate-300 hover:bg-slate-800" : "text-slate-600 hover:bg-slate-100"
+              } focus:outline-none`}
+            >
+              <span className="sr-only">Open main menu</span>
+              {/* Hamburger / Close Icon */}
+              <svg
+                className="h-6 w-6"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                {isOpen ? (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                ) : (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                )}
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Menu */}
+      <div className={mobileMenuClasses}>
+        <div className="flex flex-col space-y-4">
+          {links && links.map((link, index) => (
+             <a
+               key={index}
+               href={link.href}
+                onClick={(e) => {
+                   setIsOpen(false);
+                   if (onLinkClick) onLinkClick(e, link);
+                }}
+               className={`block px-3 py-2 rounded-md text-base font-medium ${
+                   isDark 
+                   ? "text-slate-300 hover:text-white hover:bg-slate-800" 
+                   : "text-slate-600 hover:text-slate-900 hover:bg-slate-50"
+               }`}
+             >
+               {link.label}
+             </a>
+          ))}
+          <div className="pt-4 border-t border-gray-200/10 flex flex-col gap-3">
+             {Array.isArray(actions) ? (
+            actions.map((action, index) => (
+              <a
+                key={index}
+                href={action.href}
+                className={`w-full px-4 py-2 text-sm font-medium rounded-lg text-center transition-all ${
+                  index === actions.length - 1
+                    ? isDark
+                      ? "bg-indigo-600 text-white hover:bg-indigo-500 shadow-lg"
+                      : "bg-slate-900 text-white hover:bg-slate-800 shadow-lg"
+                    : isDark
+                    ? "text-slate-300 hover:text-white border border-slate-700 hover:bg-slate-800"
+                    : "text-slate-600 hover:text-slate-900 border border-slate-200 hover:bg-slate-50"
+                }`}
+              >
+                {action.label}
+              </a>
+            ))
+          ) : (
+            actions
+          )}
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}

package/templates/Navbar/index.js

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

package/templates/Navbar/meta.json

@@ -0,0 +1,43 @@
+{
+    "name": "Navbar",
+    "description": "A responsive navigation bar with logo, links, and action buttons. Supports desktop and mobile layouts with a hamburger menu.",
+    "props": {
+        "logo": {
+            "type": "node",
+            "default": "Brand",
+            "description": "The logo or brand name displayed on the left."
+        },
+        "links": {
+            "type": "array",
+            "default": "Home, Features, Pricing, About",
+            "description": "List of navigation items: { label, href }."
+        },
+        "actions": {
+            "type": "node",
+            "description": "Custom action buttons (e.g., Login/Signup) for the right side."
+        },
+        "theme": {
+            "type": "enum",
+            "options": [
+                "light",
+                "dark"
+            ],
+            "default": "light",
+            "description": "Visual theme of the navbar."
+        },
+        "sticky": {
+            "type": "boolean",
+            "default": true,
+            "description": "If true, the navbar remains fixed at the top of the viewport."
+        },
+        "className": {
+            "type": "string",
+            "default": "",
+            "description": "Additional custom classes."
+        },
+        "onLinkClick": {
+            "type": "function",
+            "description": "Callback function triggered when a navigation link is clicked."
+        }
+    }
+}

package/templates/RadioGroup/RadioGroup.jsx

@@ -0,0 +1,148 @@
+import React, { forwardRef } from "react";
+
+const SIZES = {
+  sm: { circle: "h-4 w-4", dot: "h-1.5 w-1.5", text: "text-xs" },
+  md: { circle: "h-5 w-5", dot: "h-2 w-2", text: "text-sm" },
+  lg: { circle: "h-6 w-6", dot: "h-2.5 w-2.5", text: "text-base" },
+};
+
+const THEMES = {
+  light: {
+    labelRaw: "text-slate-500 group-hover:text-slate-800",
+    labelChecked: "text-slate-900",
+    borderRaw: "border-slate-300",
+    borderHover: "group-hover:border-slate-400",
+    dot: "bg-current",
+  },
+  dark: {
+    labelRaw: "text-slate-400 group-hover:text-slate-200",
+    labelChecked: "text-white",
+    borderRaw: "border-slate-700",
+    borderHover: "group-hover:border-slate-500",
+    dot: "bg-white",
+  },
+};
+
+export const RadioButton = forwardRef(
+  (
+    {
+      label,
+      value,
+      selectedValue,
+      onChange,
+      name,
+      disabled,
+      size = "md",
+      theme = "dark",
+      activeColor = "text-blue-500",
+      ...props
+    },
+    ref,
+  ) => {
+    const isSelected = value === selectedValue;
+    const currentSize = SIZES[size] || SIZES.md;
+    const currentTheme = THEMES[theme] || THEMES.dark;
+
+    return (
+      <label
+        className={`group flex items-center gap-3 select-none transition-all ${
+          disabled ? "opacity-30 cursor-not-allowed" : "cursor-pointer"
+        }`}
+      >
+        <div className="relative flex items-center justify-center">
+          <input
+            {...props}
+            ref={ref}
+            type="radio"
+            name={name}
+            checked={isSelected}
+            disabled={disabled}
+            onChange={() => onChange(value)}
+            className="peer sr-only"
+          />
+
+          {/* Outer Circle */}
+          <div
+            className={`
+              rounded-full border-2 transition-all duration-200 bg-transparent
+              ${currentSize.circle}
+              ${currentTheme.borderRaw}
+              ${!disabled && currentTheme.borderHover}
+              peer-checked:border-current ${activeColor}
+            `}
+          />
+
+          {/* Inner Dot */}
+          <div
+            className={`
+              absolute rounded-full transition-transform duration-200
+              ${currentSize.dot}
+              ${currentTheme.dot}
+              ${activeColor}
+              ${isSelected ? "scale-100 opacity-100" : "scale-0 opacity-0"}
+            `}
+          />
+        </div>
+
+        {label && (
+          <span
+            className={`
+              font-medium transition-colors
+              ${currentSize.text}
+              ${isSelected ? currentTheme.labelChecked : currentTheme.labelRaw}
+            `}
+          >
+            {label}
+          </span>
+        )}
+      </label>
+    );
+  },
+);
+
+RadioButton.displayName = "RadioButton";
+
+export default function RadioGroup({
+  options,
+  value,
+  onChange,
+  name,
+  label,
+  orientation = "vertical",
+  size = "md",
+  theme = "dark",
+  activeColor = "text-blue-500",
+  className = "",
+}) {
+  return (
+    <fieldset className={`flex flex-col gap-4 ${className}`}>
+      {label && (
+        <legend className="text-[10px] font-bold tracking-[0.2em] text-slate-500 uppercase">
+          {label}
+        </legend>
+      )}
+      <div
+        className={`flex ${
+          orientation === "vertical" ? "flex-col gap-3" : "flex-row gap-6"
+        }`}
+      >
+        {options.map((opt) => (
+          <RadioButton
+            key={opt.value}
+            name={name}
+            label={opt.label}
+            value={opt.value}
+            selectedValue={value}
+            onChange={onChange}
+            disabled={opt.disabled}
+            size={size}
+            theme={theme}
+            activeColor={activeColor}
+          />
+        ))}
+      </div>
+    </fieldset>
+  );
+}
+
+RadioGroup.displayName = "RadioGroup";

package/templates/RadioGroup/index.js

@@ -0,0 +1,4 @@
+import RadioGroup from "./RadioGroup";
+export { RadioButton } from "./RadioGroup";
+
+export default RadioGroup;

package/templates/RadioGroup/meta.json

@@ -0,0 +1,10 @@
+{
+  "name": "RadioGroup",
+  "description": "Minimalist dark-mode radio group with full prop-based customizability.",
+  "props": {
+    "activeColor": "Tailwind text color class (default: text-blue-500)",
+    "size": ["sm", "md", "lg"],
+    "orientation": ["vertical", "horizontal"],
+    "options": "Array<{label, value, disabled}>"
+  }
+}