620 lines
16 KiB
Bash
Executable File
620 lines
16 KiB
Bash
Executable File
#!/bin/bash
|
||
|
||
# Frontend Designer - Component Generator
|
||
# Generates accessible, responsive components with design tokens
|
||
|
||
set -e
|
||
|
||
# Colors for output
|
||
RED='\033[0;31m'
|
||
GREEN='\033[0;32m'
|
||
YELLOW='\033[1;33m'
|
||
BLUE='\033[0;34m'
|
||
NC='\033[0m' # No Color
|
||
|
||
# Helper functions
|
||
print_success() {
|
||
echo -e "${GREEN}✓ $1${NC}"
|
||
}
|
||
|
||
print_error() {
|
||
echo -e "${RED}✗ $1${NC}"
|
||
}
|
||
|
||
print_info() {
|
||
echo -e "${BLUE}ℹ $1${NC}"
|
||
}
|
||
|
||
print_warning() {
|
||
echo -e "${YELLOW}⚠ $1${NC}"
|
||
}
|
||
|
||
prompt_input() {
|
||
local prompt="$1"
|
||
local var_name="$2"
|
||
local required="${3:-false}"
|
||
|
||
while true; do
|
||
echo -e "${BLUE}${prompt}${NC}"
|
||
read -r input
|
||
|
||
if [ -z "$input" ] && [ "$required" = true ]; then
|
||
print_error "This field is required."
|
||
continue
|
||
fi
|
||
|
||
eval "$var_name='$input'"
|
||
break
|
||
done
|
||
}
|
||
|
||
prompt_select() {
|
||
local prompt="$1"
|
||
local var_name="$2"
|
||
shift 2
|
||
local options=("$@")
|
||
|
||
echo -e "${BLUE}${prompt}${NC}"
|
||
PS3="Select (1-${#options[@]}): "
|
||
select opt in "${options[@]}"; do
|
||
if [ -n "$opt" ]; then
|
||
eval "$var_name='$opt'"
|
||
break
|
||
else
|
||
print_error "Invalid selection. Try again."
|
||
fi
|
||
done
|
||
}
|
||
|
||
# Banner
|
||
echo ""
|
||
echo "╔════════════════════════════════════════════════════════════╗"
|
||
echo "║ ║"
|
||
echo "║ Frontend Designer - Component Generator ║"
|
||
echo "║ ║"
|
||
echo "╚════════════════════════════════════════════════════════════╝"
|
||
echo ""
|
||
|
||
# Step 1: Component Type
|
||
print_info "Step 1/6: Component Type"
|
||
prompt_select "What type of component?" COMPONENT_TYPE \
|
||
"Button" \
|
||
"Input" \
|
||
"Card" \
|
||
"Modal" \
|
||
"Dropdown" \
|
||
"Navigation" \
|
||
"Form" \
|
||
"List" \
|
||
"Custom"
|
||
|
||
# Step 2: Component Name
|
||
print_info "Step 2/6: Component Name"
|
||
prompt_input "Component name (PascalCase, e.g., UserProfile):" COMPONENT_NAME true
|
||
|
||
# Step 3: Framework
|
||
print_info "Step 3/6: Framework"
|
||
prompt_select "Which framework?" FRAMEWORK \
|
||
"React" \
|
||
"Vue" \
|
||
"Vanilla JS" \
|
||
"Web Components"
|
||
|
||
# Step 4: Features
|
||
print_info "Step 4/6: Features (comma-separated)"
|
||
echo -e "${BLUE}Select features to include (e.g., variants,loading,disabled):${NC}"
|
||
echo " - variants (different visual styles)"
|
||
echo " - sizes (sm, md, lg)"
|
||
echo " - loading (loading state)"
|
||
echo " - disabled (disabled state)"
|
||
echo " - icons (icon support)"
|
||
echo " - responsive (responsive behavior)"
|
||
read -r FEATURES
|
||
|
||
# Step 5: Accessibility
|
||
print_info "Step 5/6: Accessibility Requirements"
|
||
prompt_select "WCAG compliance level?" A11Y_LEVEL \
|
||
"AA (recommended)" \
|
||
"AAA (strict)" \
|
||
"Basic"
|
||
|
||
# Step 6: Output Directory
|
||
print_info "Step 6/6: Output Location"
|
||
prompt_input "Output directory (default: ./components):" OUTPUT_DIR
|
||
OUTPUT_DIR=${OUTPUT_DIR:-"./components"}
|
||
|
||
# Create output directory
|
||
mkdir -p "$OUTPUT_DIR"
|
||
|
||
# Generate based on framework
|
||
case $FRAMEWORK in
|
||
"React")
|
||
generate_react_component
|
||
;;
|
||
"Vue")
|
||
generate_vue_component
|
||
;;
|
||
"Vanilla JS")
|
||
generate_vanilla_component
|
||
;;
|
||
"Web Components")
|
||
generate_web_component
|
||
;;
|
||
esac
|
||
|
||
# Generate component based on selected framework
|
||
generate_react_component() {
|
||
local file_path="$OUTPUT_DIR/$COMPONENT_NAME.tsx"
|
||
|
||
cat > "$file_path" << 'EOF'
|
||
import React from 'react';
|
||
import './COMPONENT_NAME.css';
|
||
|
||
interface COMPONENT_NAMEProps {
|
||
children?: React.ReactNode;
|
||
className?: string;
|
||
VARIANT_PROP
|
||
SIZE_PROP
|
||
DISABLED_PROP
|
||
LOADING_PROP
|
||
onClick?: () => void;
|
||
}
|
||
|
||
export const COMPONENT_NAME: React.FC<COMPONENT_NAMEProps> = ({
|
||
children,
|
||
className = '',
|
||
VARIANT_DEFAULT
|
||
SIZE_DEFAULT
|
||
DISABLED_DEFAULT
|
||
LOADING_DEFAULT
|
||
onClick,
|
||
}) => {
|
||
const baseClass = 'COMPONENT_CLASS';
|
||
const variantClass = `${baseClass}--${variant}`;
|
||
const sizeClass = `${baseClass}--${size}`;
|
||
const classes = `${baseClass} ${variantClass} ${sizeClass} ${className}`;
|
||
|
||
return (
|
||
<COMPONENT_ELEMENT
|
||
className={classes}
|
||
onClick={onClick}
|
||
disabled={disabled || loading}
|
||
aria-busy={loading}
|
||
ARIA_ATTRIBUTES
|
||
>
|
||
LOADING_SPINNER
|
||
{children}
|
||
</COMPONENT_ELEMENT>
|
||
);
|
||
};
|
||
EOF
|
||
|
||
# Replace placeholders based on features
|
||
sed -i "s/COMPONENT_NAME/$COMPONENT_NAME/g" "$file_path"
|
||
sed -i "s/COMPONENT_CLASS/$(echo "$COMPONENT_NAME" | sed 's/\([A-Z]\)/-\L\1/g' | sed 's/^-//')/g" "$file_path"
|
||
|
||
if [[ $FEATURES == *"variants"* ]]; then
|
||
sed -i "s/VARIANT_PROP/variant?: 'primary' | 'secondary' | 'ghost';/" "$file_path"
|
||
sed -i "s/VARIANT_DEFAULT/variant = 'primary',/" "$file_path"
|
||
else
|
||
sed -i "/VARIANT_PROP/d" "$file_path"
|
||
sed -i "/VARIANT_DEFAULT/d" "$file_path"
|
||
fi
|
||
|
||
if [[ $FEATURES == *"sizes"* ]]; then
|
||
sed -i "s/SIZE_PROP/size?: 'sm' | 'md' | 'lg';/" "$file_path"
|
||
sed -i "s/SIZE_DEFAULT/size = 'md',/" "$file_path"
|
||
else
|
||
sed -i "/SIZE_PROP/d" "$file_path"
|
||
sed -i "/SIZE_DEFAULT/d" "$file_path"
|
||
fi
|
||
|
||
if [[ $FEATURES == *"disabled"* ]]; then
|
||
sed -i "s/DISABLED_PROP/disabled?: boolean;/" "$file_path"
|
||
sed -i "s/DISABLED_DEFAULT/disabled = false,/" "$file_path"
|
||
else
|
||
sed -i "/DISABLED_PROP/d" "$file_path"
|
||
sed -i "/DISABLED_DEFAULT/d" "$file_path"
|
||
fi
|
||
|
||
if [[ $FEATURES == *"loading"* ]]; then
|
||
sed -i "s/LOADING_PROP/loading?: boolean;/" "$file_path"
|
||
sed -i "s/LOADING_DEFAULT/loading = false,/" "$file_path"
|
||
sed -i "s|LOADING_SPINNER|{loading \&\& <span className=\"spinner\" aria-hidden=\"true\" />}|" "$file_path"
|
||
else
|
||
sed -i "/LOADING_PROP/d" "$file_path"
|
||
sed -i "/LOADING_DEFAULT/d" "$file_path"
|
||
sed -i "/LOADING_SPINNER/d" "$file_path"
|
||
fi
|
||
|
||
# Determine element type
|
||
case $COMPONENT_TYPE in
|
||
"Button")
|
||
sed -i "s/COMPONENT_ELEMENT/button/" "$file_path"
|
||
sed -i "s/ARIA_ATTRIBUTES//" "$file_path"
|
||
;;
|
||
"Input")
|
||
sed -i "s/COMPONENT_ELEMENT/input/" "$file_path"
|
||
sed -i "s/ARIA_ATTRIBUTES/aria-label=\"\" aria-describedby=\"\"/" "$file_path"
|
||
;;
|
||
"Card")
|
||
sed -i "s/COMPONENT_ELEMENT/div/" "$file_path"
|
||
sed -i "s/ARIA_ATTRIBUTES/role=\"article\"/" "$file_path"
|
||
;;
|
||
*)
|
||
sed -i "s/COMPONENT_ELEMENT/div/" "$file_path"
|
||
sed -i "s/ARIA_ATTRIBUTES//" "$file_path"
|
||
;;
|
||
esac
|
||
|
||
print_success "Created React component: $file_path"
|
||
generate_css
|
||
generate_test_file
|
||
}
|
||
|
||
generate_vue_component() {
|
||
local file_path="$OUTPUT_DIR/$COMPONENT_NAME.vue"
|
||
|
||
cat > "$file_path" << 'EOF'
|
||
<template>
|
||
<COMPONENT_ELEMENT
|
||
:class="classes"
|
||
@click="onClick"
|
||
:disabled="disabled || loading"
|
||
:aria-busy="loading"
|
||
>
|
||
<span v-if="loading" class="spinner" aria-hidden="true"></span>
|
||
<slot></slot>
|
||
</COMPONENT_ELEMENT>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from 'vue';
|
||
|
||
interface Props {
|
||
variant?: 'primary' | 'secondary' | 'ghost';
|
||
size?: 'sm' | 'md' | 'lg';
|
||
disabled?: boolean;
|
||
loading?: boolean;
|
||
}
|
||
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
variant: 'primary',
|
||
size: 'md',
|
||
disabled: false,
|
||
loading: false,
|
||
});
|
||
|
||
const emit = defineEmits<{
|
||
click: [];
|
||
}>();
|
||
|
||
const baseClass = 'COMPONENT_CLASS';
|
||
|
||
const classes = computed(() => [
|
||
baseClass,
|
||
`${baseClass}--${props.variant}`,
|
||
`${baseClass}--${props.size}`,
|
||
]);
|
||
|
||
const onClick = () => {
|
||
if (!props.disabled && !props.loading) {
|
||
emit('click');
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import './COMPONENT_NAME.css';
|
||
</style>
|
||
EOF
|
||
|
||
sed -i "s/COMPONENT_NAME/$COMPONENT_NAME/g" "$file_path"
|
||
sed -i "s/COMPONENT_CLASS/$(echo "$COMPONENT_NAME" | sed 's/\([A-Z]\)/-\L\1/g' | sed 's/^-//')/g" "$file_path"
|
||
|
||
case $COMPONENT_TYPE in
|
||
"Button")
|
||
sed -i "s/COMPONENT_ELEMENT/button/" "$file_path"
|
||
;;
|
||
"Input")
|
||
sed -i "s/COMPONENT_ELEMENT/input/" "$file_path"
|
||
;;
|
||
*)
|
||
sed -i "s/COMPONENT_ELEMENT/div/" "$file_path"
|
||
;;
|
||
esac
|
||
|
||
print_success "Created Vue component: $file_path"
|
||
generate_css
|
||
}
|
||
|
||
generate_css() {
|
||
local css_file="$OUTPUT_DIR/$COMPONENT_NAME.css"
|
||
local class_name=$(echo "$COMPONENT_NAME" | sed 's/\([A-Z]\)/-\L\1/g' | sed 's/^-//')
|
||
|
||
cat > "$css_file" << EOF
|
||
/* $COMPONENT_NAME Component Styles */
|
||
|
||
.$class_name {
|
||
/* Design Tokens */
|
||
--component-bg: var(--color-surface);
|
||
--component-text: var(--color-text);
|
||
--component-border: var(--color-border);
|
||
--component-radius: var(--radius-md);
|
||
--component-shadow: var(--shadow-sm);
|
||
|
||
/* Base Styles */
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-2);
|
||
|
||
padding: var(--space-3) var(--space-4);
|
||
|
||
background-color: var(--component-bg);
|
||
color: var(--component-text);
|
||
border: 1px solid var(--component-border);
|
||
border-radius: var(--component-radius);
|
||
|
||
font-family: var(--font-base);
|
||
font-size: var(--text-base);
|
||
font-weight: 500;
|
||
line-height: 1.5;
|
||
|
||
cursor: pointer;
|
||
user-select: none;
|
||
|
||
transition: all 0.2s ease;
|
||
|
||
/* Accessibility */
|
||
min-height: 44px; /* WCAG touch target */
|
||
min-width: 44px;
|
||
}
|
||
|
||
/* Variants */
|
||
.$class_name--primary {
|
||
--component-bg: var(--color-primary);
|
||
--component-text: var(--color-white);
|
||
--component-border: var(--color-primary);
|
||
}
|
||
|
||
.$class_name--primary:hover:not(:disabled) {
|
||
--component-bg: var(--color-primary-hover);
|
||
--component-border: var(--color-primary-hover);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.$class_name--secondary {
|
||
--component-bg: transparent;
|
||
--component-text: var(--color-primary);
|
||
--component-border: var(--color-primary);
|
||
}
|
||
|
||
.$class_name--secondary:hover:not(:disabled) {
|
||
--component-bg: var(--color-primary-subtle);
|
||
}
|
||
|
||
.$class_name--ghost {
|
||
--component-bg: transparent;
|
||
--component-text: var(--color-text);
|
||
--component-border: transparent;
|
||
}
|
||
|
||
.$class_name--ghost:hover:not(:disabled) {
|
||
--component-bg: var(--color-surface-hover);
|
||
}
|
||
|
||
/* Sizes */
|
||
.$class_name--sm {
|
||
padding: var(--space-2) var(--space-3);
|
||
font-size: var(--text-sm);
|
||
min-height: 36px;
|
||
}
|
||
|
||
.$class_name--md {
|
||
padding: var(--space-3) var(--space-4);
|
||
font-size: var(--text-base);
|
||
min-height: 44px;
|
||
}
|
||
|
||
.$class_name--lg {
|
||
padding: var(--space-4) var(--space-6);
|
||
font-size: var(--text-lg);
|
||
min-height: 52px;
|
||
}
|
||
|
||
/* States */
|
||
.$class_name:focus-visible {
|
||
outline: 2px solid var(--color-focus);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.$class_name:active:not(:disabled) {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.$class_name:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.$class_name[aria-busy="true"] {
|
||
cursor: wait;
|
||
}
|
||
|
||
/* Loading Spinner */
|
||
.spinner {
|
||
display: inline-block;
|
||
width: 1em;
|
||
height: 1em;
|
||
border: 2px solid currentColor;
|
||
border-right-color: transparent;
|
||
border-radius: 50%;
|
||
animation: spin 0.6s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
.$class_name {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
/* Dark Mode */
|
||
@media (prefers-color-scheme: dark) {
|
||
.$class_name {
|
||
--component-bg: var(--color-surface-dark);
|
||
--component-text: var(--color-text-dark);
|
||
--component-border: var(--color-border-dark);
|
||
}
|
||
}
|
||
|
||
/* High Contrast Mode */
|
||
@media (prefers-contrast: high) {
|
||
.$class_name {
|
||
border-width: 2px;
|
||
}
|
||
|
||
.$class_name:focus-visible {
|
||
outline-width: 3px;
|
||
}
|
||
}
|
||
|
||
/* Reduced Motion */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.$class_name,
|
||
.spinner {
|
||
animation: none;
|
||
transition: none;
|
||
}
|
||
}
|
||
EOF
|
||
|
||
print_success "Created CSS file: $css_file"
|
||
}
|
||
|
||
generate_test_file() {
|
||
if [ "$FRAMEWORK" != "React" ]; then
|
||
return
|
||
fi
|
||
|
||
local test_file="$OUTPUT_DIR/$COMPONENT_NAME.test.tsx"
|
||
|
||
cat > "$test_file" << 'EOF'
|
||
import { render, screen, fireEvent } from '@testing-library/react';
|
||
import { COMPONENT_NAME } from './COMPONENT_NAME';
|
||
|
||
describe('COMPONENT_NAME', () => {
|
||
it('renders children correctly', () => {
|
||
render(<COMPONENT_NAME>Click me</COMPONENT_NAME>);
|
||
expect(screen.getByText('Click me')).toBeInTheDocument();
|
||
});
|
||
|
||
it('handles click events', () => {
|
||
const handleClick = jest.fn();
|
||
render(<COMPONENT_NAME onClick={handleClick}>Click me</COMPONENT_NAME>);
|
||
|
||
fireEvent.click(screen.getByText('Click me'));
|
||
expect(handleClick).toHaveBeenCalledTimes(1);
|
||
});
|
||
|
||
it('renders with different variants', () => {
|
||
const { rerender } = render(<COMPONENT_NAME variant="primary">Primary</COMPONENT_NAME>);
|
||
expect(screen.getByText('Primary')).toHaveClass('COMPONENT_CLASS--primary');
|
||
|
||
rerender(<COMPONENT_NAME variant="secondary">Secondary</COMPONENT_NAME>);
|
||
expect(screen.getByText('Secondary')).toHaveClass('COMPONENT_CLASS--secondary');
|
||
});
|
||
|
||
it('renders with different sizes', () => {
|
||
const { rerender } = render(<COMPONENT_NAME size="sm">Small</COMPONENT_NAME>);
|
||
expect(screen.getByText('Small')).toHaveClass('COMPONENT_CLASS--sm');
|
||
|
||
rerender(<COMPONENT_NAME size="lg">Large</COMPONENT_NAME>);
|
||
expect(screen.getByText('Large')).toHaveClass('COMPONENT_CLASS--lg');
|
||
});
|
||
|
||
it('disables interaction when disabled', () => {
|
||
const handleClick = jest.fn();
|
||
render(<COMPONENT_NAME disabled onClick={handleClick}>Disabled</COMPONENT_NAME>);
|
||
|
||
const element = screen.getByText('Disabled');
|
||
expect(element).toBeDisabled();
|
||
|
||
fireEvent.click(element);
|
||
expect(handleClick).not.toHaveBeenCalled();
|
||
});
|
||
|
||
it('shows loading state', () => {
|
||
render(<COMPONENT_NAME loading>Loading</COMPONENT_NAME>);
|
||
|
||
const element = screen.getByText('Loading');
|
||
expect(element).toHaveAttribute('aria-busy', 'true');
|
||
expect(element).toBeDisabled();
|
||
});
|
||
|
||
it('is keyboard accessible', () => {
|
||
const handleClick = jest.fn();
|
||
render(<COMPONENT_NAME onClick={handleClick}>Accessible</COMPONENT_NAME>);
|
||
|
||
const element = screen.getByText('Accessible');
|
||
element.focus();
|
||
expect(element).toHaveFocus();
|
||
});
|
||
|
||
it('has proper ARIA attributes', () => {
|
||
render(<COMPONENT_NAME loading>ARIA Test</COMPONENT_NAME>);
|
||
const element = screen.getByText('ARIA Test');
|
||
expect(element).toHaveAttribute('aria-busy', 'true');
|
||
});
|
||
});
|
||
EOF
|
||
|
||
sed -i "s/COMPONENT_NAME/$COMPONENT_NAME/g" "$test_file"
|
||
sed -i "s/COMPONENT_CLASS/$(echo "$COMPONENT_NAME" | sed 's/\([A-Z]\)/-\L\1/g' | sed 's/^-//')/g" "$test_file"
|
||
|
||
print_success "Created test file: $test_file"
|
||
}
|
||
|
||
# Summary
|
||
echo ""
|
||
echo "╔════════════════════════════════════════════════════════════╗"
|
||
echo "║ Generation Complete ║"
|
||
echo "╚════════════════════════════════════════════════════════════╝"
|
||
echo ""
|
||
print_success "Component: $COMPONENT_NAME"
|
||
print_success "Type: $COMPONENT_TYPE"
|
||
print_success "Framework: $FRAMEWORK"
|
||
print_success "Location: $OUTPUT_DIR"
|
||
echo ""
|
||
print_info "Files created:"
|
||
case $FRAMEWORK in
|
||
"React")
|
||
echo " - $COMPONENT_NAME.tsx (component)"
|
||
echo " - $COMPONENT_NAME.css (styles)"
|
||
echo " - $COMPONENT_NAME.test.tsx (tests)"
|
||
;;
|
||
"Vue")
|
||
echo " - $COMPONENT_NAME.vue (component)"
|
||
echo " - $COMPONENT_NAME.css (styles)"
|
||
;;
|
||
*)
|
||
echo " - $COMPONENT_NAME.js (component)"
|
||
echo " - $COMPONENT_NAME.css (styles)"
|
||
;;
|
||
esac
|
||
echo ""
|
||
print_info "Next steps:"
|
||
echo " 1. Review generated files"
|
||
echo " 2. Customize component logic"
|
||
echo " 3. Add to your component library"
|
||
echo " 4. Run tests (npm test)"
|
||
echo " 5. Test accessibility (npm run a11y)"
|
||
echo ""
|