xlibs-components/dist/lib/component-template.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

import { validateComponentConfig } from "./config";
// Component template generator
export function generateComponentTemplate(componentName, config, library = "ui") {
    const validation = validateComponentConfig(config);
    if (!validation.isValid) {
        throw new Error(`Invalid component configuration: ${validation.errors.join(", ")}`);
    }
    const pascalCaseName = componentName
        .split("-")
        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
        .join("");
    const componentCode = `"use client";
import { cn } from '../lib/utils.js';
import { buildComponentClasses } from '../lib/config.js';
import { ${componentName}Config } from '../configs/${library}/${componentName}.config.js';
import { ComponentProps } from "react";

interface ${pascalCaseName}Props extends ComponentProps<"div"> {
  variant?: keyof typeof ${componentName}Config.variants;
  size?: keyof typeof ${componentName}Config.sizes;
  children?: React.ReactNode;
}

export const ${pascalCaseName} = ({
  className,
  variant = "default",
  size = "md",
  children,
  ...props
}: ${pascalCaseName}Props) => {
  return (
    <div
      className={buildComponentClasses(${componentName}Config, variant, size, className)}
      {...props}
    >
      {children}
    </div>
  );
};
`;
    const configCode = `import { createComponentConfig } from '../lib/config.js';

export const ${componentName}Config = createComponentConfig(${JSON.stringify(config, null, 2)});
`;
    const indexCode = `export { ${pascalCaseName} } from './${componentName}';
export { ${componentName}Config } from '../configs/${library}/${componentName}.config.js';
`;
    return {
        componentCode,
        configCode,
        indexCode,
        validation
    };
}
// Quick component creation helper
export function createComponent(componentName, config, library = "ui") {
    const template = generateComponentTemplate(componentName, config, library);
    console.log("=== Component Template Generated ===");
    console.log(`Component: ${componentName}`);
    console.log(`Library: ${library}`);
    console.log(`Validation: ${template.validation.isValid ? "✅ Valid" : "❌ Invalid"}`);
    if (!template.validation.isValid) {
        console.error("Errors:", template.validation.errors);
        return;
    }
    console.log("\n=== Files to Create ===");
    console.log(`1. src/components/${library}/${componentName}.tsx`);
    console.log(`2. src/configs/${library}/${componentName}.config.ts`);
    console.log(`3. Update src/components/${library}/index.ts`);
    console.log("\n=== Component Code ===");
    console.log(template.componentCode);
    console.log("\n=== Config Code ===");
    console.log(template.configCode);
    console.log("\n=== Index Export ===");
    console.log(template.indexCode);
}
// Predefined configurations for common components
export const commonConfigs = {
    card: {
        variants: {
            default: { className: "bg-card text-card-foreground border border-border rounded-lg shadow-sm" },
            outline: { className: "border border-border bg-transparent" },
            ghost: { className: "bg-transparent" }
        },
        sizes: {
            sm: { className: "p-3" },
            md: { className: "p-4" },
            lg: { className: "p-6" }
        }
    },
    button: {
        variants: {
            default: { className: "btn-primary" },
            outline: { className: "btn-outline" },
            ghost: { className: "hover:bg-accent hover:text-accent-foreground" },
            destructive: { className: "btn-destructive" },
            success: { className: "btn-success" },
            warning: { className: "btn-warning" },
            info: { className: "btn-info" }
        },
        sizes: {
            sm: { className: "px-3 py-1.5 text-sm" },
            md: { className: "px-4 py-2" },
            lg: { className: "px-6 py-3 text-lg" }
        }
    }
};