BlueXP Style Guide

AI-powered BlueXP component generation using natural language. Generate React TypeScript components with loading states, forms, charts, and more through simple chat commands.

✨ Features

• 🤖 AI-Powered Generation: Create React components using natural language
• 📱 BlueXP Components: Generates components following BlueXP design system
• 🔄 Loading States: Built-in support for async operations and loading states
• 📝 TypeScript: Generates fully typed TypeScript React components
• 💬 Chat Interface: Use VS Code's chat feature with @bluexp commands
• 🎨 Style Guide Compliant: Components follow NetApp BlueXP design standards

🚀 Quick Start

1. Install the extension
2. Open VS Code Chat (Ctrl+Alt+I / Cmd+Option+I)
3. Type @bluexp create a button with loading state
4. Watch as a complete React component is generated!

💬 Usage Examples

Generate Components

@bluexp create a button with loading state
@bluexp generate a data table with sorting
@bluexp make a form with validation
@bluexp build a chart component
@bluexp create a modal dialog

Get Examples

@bluexp examples
@bluexp show button examples

Documentation

@bluexp docs
@bluexp docs button

🎯 Generated Components Include

• Button: With loading states, variants (primary, secondary, danger), and async support
• Data Tables: Sortable, selectable with pagination
• Forms: Input fields with validation and error states
• Charts: Data visualization components
• Modals: Dialog components with backdrop and sizing options

🛠️ Generated Code Features

• ✅ TypeScript Interfaces: Properly typed props and state
• ✅ React Hooks: Modern functional components with hooks
• ✅ Async Support: Built-in loading and error handling
• ✅ Accessibility: ARIA attributes and keyboard navigation
• ✅ Responsive: Mobile-friendly responsive design
• ✅ BlueXP Styling: Pre-configured CSS classes and themes

📋 Requirements

• VS Code 1.84.0 or higher
• Node.js 16.0.0 or higher

🔧 Configuration

The extension works out-of-the-box with built-in templates. You can customize:

• bluexp.autoOpenGeneratedFiles: Automatically open generated files (default: true)
• bluexp.addHeaderComments: Add header comments to components (default: true)
• bluexp.defaultComponentLocation: Default location for components (default: "src/components")

📝 Example Generated Component

interface ButtonProps {
  children: React.ReactNode;
  onClick?: () => void | Promise<void>;
  variant?: 'primary' | 'secondary' | 'danger';
  loading?: boolean;
  disabled?: boolean;
  size?: 'small' | 'medium' | 'large';
}

export const Button: React.FC<ButtonProps> = ({
  children,
  onClick,
  variant = 'primary',
  loading = false,
  disabled = false,
  size = 'medium'
}) => {
  const [isLoading, setIsLoading] = React.useState(loading);

  const handleClick = async () => {
    if (onClick && !disabled && !isLoading) {
      setIsLoading(true);
      try {
        await onClick();
      } finally {
        setIsLoading(false);
      }
    }
  };

  return (
    <button
      className={`btn btn--${variant} btn--${size} ${isLoading ? 'btn--loading' : ''}`}
      onClick={handleClick}
      disabled={disabled || isLoading}
    >
      {isLoading ? <Spinner size="small" /> : children}
    </button>
  );
};

🤝 Contributing

This extension is part of the NetApp BlueXP Design System. For issues, feature requests, or contributions, please visit our GitHub repository.

📄 License

MIT License - see LICENSE for details.

🏢 About NetApp BlueXP

BlueXP is NetApp's unified control plane for hybrid multicloud storage and data services. This extension helps developers create consistent, high-quality components that align with BlueXP's design standards.

Happy Coding! 🎉