@rajdeep0510/scaffold-cli 1.0.2 → 1.3.0

package/templates/button/component.jsx

@@ -1,92 +1,85 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
 
-/**
- * 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);
+  children,
+  size = "sm",
+  disabled = false,
+  loading = false,
+  className = "",
+  onClick,
+  type = "button",
+  borderColor = "white", // "white" or "black"
+  borderWidth = 1,
+  borderStyle = "solid",
+  borderRadius = "md", // sm, md, lg, xl, full
+  ...rest
+}) => {
+  const sizeClasses = {
+    sm: "h-8 px-3 text-sm",
+    md: "h-10 px-4 text-sm",
+    lg: "h-12 px-5 text-base",
+    xl: "h-14 px-6 text-lg",
+  };
 
-    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 radiusClasses = {
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+    full: "rounded-full",
+  };
 
-    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 borderClasses = clsx(
+    `border-${borderWidth}`,
+    borderStyle !== "solid" && `border-${borderStyle}`,
+    borderColor === "white" ? "border-white" : "border-black"
+  );
 
-    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 buttonClasses = clsx(
+    "inline-flex items-center justify-center font-medium",
+    "transition-transform duration-150 ease-in-out", // smooth animation
+    "active:scale-95", // 👈 shrink when clicked
+    borderClasses,
+    radiusClasses[borderRadius],
+    sizeClasses[size],
+    disabled || loading ? "opacity-60 cursor-not-allowed" : "cursor-pointer",
+    className
+  );
 
-    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>
-    );
+  return (
+    <button
+      type={type}
+      disabled={disabled || loading}
+      onClick={onClick}
+      className={buttonClasses}
+      {...rest}
+    >
+      {loading ? (
+        <span className="flex items-center gap-2">
+          <span className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+          Loading...
+        </span>
+      ) : (
+        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']),
+  children: PropTypes.node,
+  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"]),
+  borderColor: PropTypes.oneOf(["black", "white"]),
+  borderWidth: PropTypes.number,
+  borderStyle: PropTypes.oneOf(["solid", "dashed", "dotted", "double"]),
+  borderRadius: PropTypes.oneOf(["sm", "md", "lg", "xl", "full"]),
 };
 
 export default Button;

package/templates/button/index.js

@@ -1,2 +1,6 @@
-export { default } from './component';
-export { default as Button } from './component';
+/**
+ * Button component barrel export
+ * This file allows importing the Button component cleanly
+ */
+export { default } from "./component";
+export { default as Button } from "./component";

package/templates/button/meta.json

@@ -1,28 +1,152 @@
 {
   "name": "Button",
-  "description": "A customizable button component with multiple variants, sizes, and states.",
+  "description": "A customizable button component with size, border, radius, and click animation. Fully compatible with Tailwind CSS for background and text colors.",
   "category": "form",
-  "tags": ["button", "interactive", "form", "cta"],
+  "tags": [
+    "button",
+    "interactive",
+    "form",
+    "cta",
+    "action",
+    "tailwind"
+  ],
   "version": "1.0.0",
+  "author": "@rajdeep",
+  "created": "2025-08-28",
   "dependencies": {
-    "npm": [],
-    "peer": ["react", "prop-types"]
+    "npm": [
+      "clsx"
+    ],
+    "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"] }
+    {
+      "name": "children",
+      "type": "React.ReactNode",
+      "required": false,
+      "default": "undefined",
+      "description": "The content to display inside the button"
+    },
+    {
+      "name": "size",
+      "type": "string",
+      "required": false,
+      "default": "sm",
+      "description": "The size of the button",
+      "options": [
+        "sm",
+        "md",
+        "lg",
+        "xl"
+      ]
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "required": false,
+      "default": "false",
+      "description": "Whether the button is disabled and non-interactive"
+    },
+    {
+      "name": "loading",
+      "type": "boolean",
+      "required": false,
+      "default": "false",
+      "description": "Whether the button is in a loading state with spinner"
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "default": "''",
+      "description": "Tailwind or custom classes to style background, text, hover, etc."
+    },
+    {
+      "name": "onClick",
+      "type": "function",
+      "required": false,
+      "default": "undefined",
+      "description": "Function to call when the button is clicked"
+    },
+    {
+      "name": "type",
+      "type": "string",
+      "required": false,
+      "default": "button",
+      "description": "The HTML button type attribute",
+      "options": [
+        "button",
+        "submit",
+        "reset"
+      ]
+    },
+    {
+      "name": "borderColor",
+      "type": "string",
+      "required": false,
+      "default": "white",
+      "description": "Border color of the button",
+      "options": [
+        "black",
+        "white"
+      ]
+    },
+    {
+      "name": "borderWidth",
+      "type": "number",
+      "required": false,
+      "default": "1",
+      "description": "Border thickness of the button"
+    },
+    {
+      "name": "borderStyle",
+      "type": "string",
+      "required": false,
+      "default": "solid",
+      "description": "Border style of the button",
+      "options": [
+        "solid",
+        "dashed",
+        "dotted",
+        "double"
+      ]
+    },
+    {
+      "name": "borderRadius",
+      "type": "string",
+      "required": false,
+      "default": "md",
+      "description": "Border radius for rounded corners",
+      "options": [
+        "sm",
+        "md",
+        "lg",
+        "xl",
+        "full"
+      ]
+    }
   ],
-  "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",
+    "meta.json"
   ],
-  "files": ["component.jsx", "index.js"]
+  "customization": {
+    "css_variables": [
+      "--button-border-radius",
+      "--button-transition"
+    ],
+    "styling_notes": "Background and text colors are meant to be customized using Tailwind classes via className. Borders and radius are controlled via props."
+  },
+  "accessibility": {
+    "features": [
+      "Keyboard navigation support",
+      "Screen reader friendly with aria-disabled and aria-busy",
+      "Focus visible outline",
+      "Semantic <button> element"
+    ]
+  }
 }