323 lines
14 KiB
Python
323 lines
14 KiB
Python
# DYNAMIC REACT DESIGNER - AI-powered React architecture based on actual features
|
|
# Uses Claude AI to generate React components based on functional requirements
|
|
|
|
from typing import Dict, Any
|
|
from loguru import logger
|
|
from designers.base_designer import BaseFrontendDesigner
|
|
from prompts.frontend.react_prompts import ReactPrompts
|
|
|
|
class ReactDesigner(BaseFrontendDesigner):
|
|
"""Dynamic React specialist - Generates React architecture based on actual project features"""
|
|
|
|
def __init__(self):
|
|
super().__init__()
|
|
self.prompts = ReactPrompts()
|
|
logger.info("🎨 Dynamic React Designer initialized - AI-powered feature-based design")
|
|
|
|
def get_technology_name(self) -> str:
|
|
return "React"
|
|
|
|
async def design_architecture(self, context: Dict[str, Any]) -> Dict[str, Any]:
|
|
"""Design React architecture dynamically based on actual features and tech stack"""
|
|
try:
|
|
logger.info("🎨 React Designer analyzing project features...")
|
|
|
|
# Extract real project data
|
|
functional_reqs = context['functional_requirements']
|
|
tech_stack = context['technology_stack']
|
|
business_context = context['business_context']
|
|
|
|
logger.info(f" Feature: {functional_reqs['feature_name']}")
|
|
logger.info(f" Technical Requirements: {len(functional_reqs['technical_requirements'])} items")
|
|
logger.info(f" Business Rules: {len(functional_reqs['business_logic_rules'])} rules")
|
|
|
|
# Generate AI prompt based on actual project requirements
|
|
prompt = self.prompts.create_dynamic_react_prompt(
|
|
feature_name=functional_reqs['feature_name'],
|
|
feature_description=functional_reqs['description'],
|
|
technical_requirements=functional_reqs['technical_requirements'],
|
|
business_logic_rules=functional_reqs['business_logic_rules'],
|
|
complexity_level=functional_reqs['complexity_level'],
|
|
tech_stack=tech_stack,
|
|
all_features=functional_reqs['all_features']
|
|
)
|
|
|
|
# Get AI-generated React architecture
|
|
logger.info("🤖 Generating React architecture with Claude AI...")
|
|
response = await self.claude_client.generate_architecture(prompt)
|
|
|
|
if response.get('success'):
|
|
react_architecture = response['data']
|
|
|
|
# Enhance with React-specific patterns based on tech stack
|
|
enhanced_architecture = self._enhance_with_tech_stack(
|
|
react_architecture, tech_stack, functional_reqs
|
|
)
|
|
|
|
logger.info("✅ Dynamic React architecture generated successfully")
|
|
return {
|
|
"success": True,
|
|
"architecture": enhanced_architecture,
|
|
"specialist": "React",
|
|
"framework_version": "React 18+",
|
|
"generated_for_feature": functional_reqs['feature_name'],
|
|
"ui_library": tech_stack.get('frontend', {}).get('ui_library', 'Tailwind CSS'),
|
|
"state_management": self._extract_state_management(tech_stack),
|
|
"patterns_used": self._extract_react_patterns(tech_stack),
|
|
"ai_generated": True,
|
|
"feature_specific": True
|
|
}
|
|
else:
|
|
logger.warning("Claude AI generation failed, creating feature-based fallback")
|
|
return self._create_feature_based_fallback(functional_reqs, tech_stack)
|
|
|
|
except Exception as e:
|
|
logger.error(f"❌ React architecture design failed: {e}")
|
|
return self._create_feature_based_fallback(functional_reqs, tech_stack)
|
|
|
|
async def design_components(self, context: Dict[str, Any]) -> Dict[str, Any]:
|
|
"""Design React components based on actual features"""
|
|
# Will implement specific component design if needed
|
|
pass
|
|
|
|
async def design_routing(self, context: Dict[str, Any]) -> Dict[str, Any]:
|
|
"""Design React Router configuration based on features"""
|
|
# Will implement specific routing design if needed
|
|
pass
|
|
|
|
async def design_state_management(self, context: Dict[str, Any]) -> Dict[str, Any]:
|
|
"""Design state management based on complexity and features"""
|
|
# Will implement specific state management design if needed
|
|
pass
|
|
|
|
def _enhance_with_tech_stack(self, architecture: Dict, tech_stack: Dict, functional_reqs: Dict) -> Dict:
|
|
"""Enhance AI-generated architecture with specific tech stack choices"""
|
|
|
|
# Extract tech stack details
|
|
frontend_config = tech_stack.get('frontend', {})
|
|
ui_library = self._get_ui_library(frontend_config)
|
|
state_management = self._extract_state_management(tech_stack)
|
|
|
|
# Enhance folder structure based on complexity
|
|
if 'folder_structure' not in architecture:
|
|
architecture['folder_structure'] = {}
|
|
|
|
# Add tech-stack-specific folder structure
|
|
architecture['folder_structure'].update({
|
|
"package_json_dependencies": self._generate_dependencies(tech_stack),
|
|
"ui_library_setup": self._generate_ui_setup(ui_library),
|
|
"state_management_setup": self._generate_state_setup(state_management),
|
|
"routing_setup": self._generate_routing_setup(functional_reqs)
|
|
})
|
|
|
|
# Add environment configuration
|
|
architecture['environment_configuration'] = {
|
|
"environment_variables": self._generate_env_vars(tech_stack),
|
|
"build_configuration": self._generate_build_config(tech_stack),
|
|
"development_setup": self._generate_dev_setup(ui_library, state_management)
|
|
}
|
|
|
|
return architecture
|
|
|
|
def _get_ui_library(self, frontend_config: Dict) -> str:
|
|
"""Extract UI library from tech stack"""
|
|
libraries = frontend_config.get('libraries', [])
|
|
|
|
ui_libraries = ['tailwind css', 'material-ui', 'chakra ui', 'ant design', 'bootstrap']
|
|
|
|
for lib in libraries:
|
|
if any(ui_lib in lib.lower() for ui_lib in ui_libraries):
|
|
return lib
|
|
|
|
return 'Tailwind CSS' # Default from tech-stack-selector
|
|
|
|
def _extract_state_management(self, tech_stack: Dict) -> str:
|
|
"""Extract state management choice from tech stack"""
|
|
frontend_config = tech_stack.get('frontend', {})
|
|
libraries = frontend_config.get('libraries', [])
|
|
|
|
state_libs = ['redux toolkit', 'zustand', 'context api', 'recoil', 'jotai']
|
|
|
|
for lib in libraries:
|
|
if any(state_lib in lib.lower() for state_lib in state_libs):
|
|
return lib
|
|
|
|
return 'Redux Toolkit' # Default for complex apps
|
|
|
|
def _extract_react_patterns(self, tech_stack: Dict) -> list:
|
|
"""Extract React patterns based on tech stack and complexity"""
|
|
patterns = [
|
|
"Functional Components",
|
|
"React Hooks (useState, useEffect, useMemo, useCallback)",
|
|
"Custom Hooks for business logic",
|
|
"Error Boundaries",
|
|
"Lazy Loading with React.lazy()"
|
|
]
|
|
|
|
# Add patterns based on state management choice
|
|
state_mgmt = self._extract_state_management(tech_stack)
|
|
if 'redux' in state_mgmt.lower():
|
|
patterns.extend([
|
|
"Redux Toolkit with createSlice",
|
|
"RTK Query for data fetching",
|
|
"useSelector and useDispatch hooks"
|
|
])
|
|
elif 'zustand' in state_mgmt.lower():
|
|
patterns.append("Zustand stores with immer")
|
|
|
|
return patterns
|
|
|
|
def _generate_dependencies(self, tech_stack: Dict) -> Dict:
|
|
"""Generate package.json dependencies based on tech stack"""
|
|
frontend_config = tech_stack.get('frontend', {})
|
|
ui_library = self._get_ui_library(frontend_config)
|
|
state_management = self._extract_state_management(tech_stack)
|
|
|
|
dependencies = {
|
|
"react": "^18.2.0",
|
|
"react-dom": "^18.2.0",
|
|
"react-router-dom": "^6.8.0"
|
|
}
|
|
|
|
# Add UI library dependencies
|
|
if 'tailwind' in ui_library.lower():
|
|
dependencies.update({
|
|
"tailwindcss": "^3.2.0",
|
|
"@tailwindcss/forms": "^0.5.3",
|
|
"@tailwindcss/typography": "^0.5.9"
|
|
})
|
|
elif 'material-ui' in ui_library.lower():
|
|
dependencies.update({
|
|
"@mui/material": "^5.11.0",
|
|
"@emotion/react": "^11.10.5",
|
|
"@emotion/styled": "^11.10.5"
|
|
})
|
|
|
|
# Add state management dependencies
|
|
if 'redux toolkit' in state_management.lower():
|
|
dependencies.update({
|
|
"@reduxjs/toolkit": "^1.9.0",
|
|
"react-redux": "^8.0.5"
|
|
})
|
|
elif 'zustand' in state_management.lower():
|
|
dependencies["zustand"] = "^4.3.0"
|
|
|
|
return dependencies
|
|
|
|
def _generate_ui_setup(self, ui_library: str) -> Dict:
|
|
"""Generate UI library setup based on choice"""
|
|
if 'tailwind' in ui_library.lower():
|
|
return {
|
|
"config_file": "tailwind.config.js",
|
|
"css_import": "@tailwind base; @tailwind components; @tailwind utilities;",
|
|
"class_examples": "bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded"
|
|
}
|
|
elif 'material-ui' in ui_library.lower():
|
|
return {
|
|
"theme_setup": "createTheme() configuration",
|
|
"provider": "ThemeProvider wrapper",
|
|
"component_examples": "Button, TextField, Card, AppBar"
|
|
}
|
|
|
|
return {"note": f"Setup for {ui_library}"}
|
|
|
|
def _generate_state_setup(self, state_management: str) -> Dict:
|
|
"""Generate state management setup"""
|
|
if 'redux toolkit' in state_management.lower():
|
|
return {
|
|
"store_setup": "configureStore with slices",
|
|
"slice_pattern": "createSlice with reducers and actions",
|
|
"provider": "Provider wrapper in App.js",
|
|
"usage": "useSelector and useDispatch hooks"
|
|
}
|
|
elif 'zustand' in state_management.lower():
|
|
return {
|
|
"store_pattern": "create() with state and actions",
|
|
"usage": "Direct store hook usage",
|
|
"persistence": "persist middleware for local storage"
|
|
}
|
|
|
|
return {"pattern": f"Setup for {state_management}"}
|
|
|
|
def _generate_routing_setup(self, functional_reqs: Dict) -> Dict:
|
|
"""Generate routing setup based on features"""
|
|
feature_name = functional_reqs.get('feature_name', '')
|
|
|
|
routes = {
|
|
"/": "Landing/Home page",
|
|
"/login": "Authentication page",
|
|
"/dashboard": "Main application dashboard"
|
|
}
|
|
|
|
# Add feature-specific routes
|
|
if feature_name:
|
|
clean_feature = feature_name.lower().replace(' ', '-')
|
|
routes[f"/{clean_feature}"] = f"{feature_name} main page"
|
|
routes[f"/{clean_feature}/create"] = f"Create new {feature_name.lower()}"
|
|
routes[f"/{clean_feature}/:id"] = f"View specific {feature_name.lower()}"
|
|
|
|
return {
|
|
"routes": routes,
|
|
"protection": "ProtectedRoute component for authenticated routes",
|
|
"lazy_loading": "React.lazy() for code splitting"
|
|
}
|
|
|
|
def _generate_env_vars(self, tech_stack: Dict) -> list:
|
|
"""Generate environment variables based on tech stack"""
|
|
return [
|
|
"REACT_APP_API_URL",
|
|
"REACT_APP_ENVIRONMENT",
|
|
"REACT_APP_VERSION",
|
|
"REACT_APP_BUILD_DATE"
|
|
]
|
|
|
|
def _generate_build_config(self, tech_stack: Dict) -> Dict:
|
|
"""Generate build configuration"""
|
|
return {
|
|
"build_tool": "Vite or Create React App",
|
|
"output_directory": "build/",
|
|
"optimization": "Code splitting, tree shaking, minification",
|
|
"source_maps": "Enabled for development"
|
|
}
|
|
|
|
def _generate_dev_setup(self, ui_library: str, state_management: str) -> Dict:
|
|
"""Generate development setup instructions"""
|
|
return {
|
|
"installation": f"npm install with {ui_library} and {state_management}",
|
|
"development_server": "npm start on port 3000",
|
|
"hot_reload": "Enabled for fast development",
|
|
"linting": "ESLint with React rules"
|
|
}
|
|
|
|
def _create_feature_based_fallback(self, functional_reqs: Dict, tech_stack: Dict) -> Dict:
|
|
"""Create fallback React architecture based on actual features"""
|
|
logger.warning("Creating feature-based React fallback architecture")
|
|
|
|
feature_name = functional_reqs.get('feature_name', 'Application')
|
|
ui_library = self._get_ui_library(tech_stack.get('frontend', {}))
|
|
|
|
return {
|
|
"success": True,
|
|
"architecture": {
|
|
"folder_structure": {
|
|
"src/components": f"React components for {feature_name}",
|
|
"src/pages": f"Pages for {feature_name} functionality",
|
|
"src/hooks": f"Custom hooks for {feature_name} logic",
|
|
"src/services": "API services",
|
|
"src/utils": "Utility functions"
|
|
},
|
|
"components_for_feature": {
|
|
f"{feature_name}List": f"List view for {feature_name}",
|
|
f"{feature_name}Form": f"Create/edit form for {feature_name}",
|
|
f"{feature_name}Card": f"Card component for {feature_name}"
|
|
},
|
|
"ui_library": ui_library,
|
|
"state_management": self._extract_state_management(tech_stack),
|
|
"routing": f"Routes for {feature_name} functionality"
|
|
},
|
|
"specialist": "React",
|
|
"fallback": True,
|
|
"feature_based": True,
|
|
"generated_for": feature_name
|
|
}
|