updates

1 files changed, 131 insertions, 0 deletions

diff --git a/ui/shadcn/.claude/hooks/validate-components.sh b/ui/shadcn/.claude/hooks/validate-components.sh
new file mode 100755
index 0000000..190bcf6
--- /dev/null
+++ b/ui/shadcn/.claude/hooks/validate-components.sh
@@ -0,0 +1,131 @@
+#!/bin/bash
+
+# Validate shadcn/ui component structure before changes
+# This hook runs before Write/Edit/MultiEdit operations
+
+# Colors for output
+RED='\033[0;31m'
+YELLOW='\033[1;33m'
+GREEN='\033[0;32m'
+NC='\033[0m' # No Color
+
+# Read tool input from stdin
+TOOL_INPUT=$(cat)
+TOOL_NAME=$(echo "$TOOL_INPUT" | jq -r '.tool_name // empty')
+FILE_PATH=$(echo "$TOOL_INPUT" | jq -r '.tool_input.file_path // empty')
+
+# Only validate component files
+if [[ ! "$FILE_PATH" =~ components/ui/.*\.tsx$ ]] && [[ ! "$FILE_PATH" =~ src/components/ui/.*\.tsx$ ]]; then
+  echo "$TOOL_INPUT"
+  exit 0
+fi
+
+# Extract component name from file path
+COMPONENT_NAME=$(basename "$FILE_PATH" .tsx)
+
+# Validation flags
+HAS_ERRORS=0
+WARNINGS=""
+
+# Function to log warnings
+log_warning() {
+  WARNINGS="${WARNINGS}⚠️  $1\n"
+}
+
+# Function to log errors
+log_error() {
+  echo -e "${RED}❌ Component Validation Error: $1${NC}" >&2
+  HAS_ERRORS=1
+}
+
+# Check if this is a Write operation for a new file
+if [ "$TOOL_NAME" = "Write" ] && [ ! -f "$FILE_PATH" ]; then
+  # New component file - check for required patterns in content
+  CONTENT=$(echo "$TOOL_INPUT" | jq -r '.tool_input.content // empty')
+  
+  # Check for forwardRef pattern
+  if [[ ! "$CONTENT" =~ "React.forwardRef" ]] && [[ ! "$CONTENT" =~ "forwardRef" ]]; then
+    log_warning "New component should use React.forwardRef for ref forwarding"
+  fi
+  
+  # Check for displayName
+  if [[ ! "$CONTENT" =~ "displayName" ]]; then
+    log_warning "Component should have displayName for debugging"
+  fi
+  
+  # Check for TypeScript types
+  if [[ ! "$CONTENT" =~ "interface.*Props" ]] && [[ ! "$CONTENT" =~ "type.*Props" ]]; then
+    log_warning "Component should have TypeScript prop types defined"
+  fi
+  
+  # Check for cn utility usage
+  if [[ "$CONTENT" =~ "className" ]] && [[ ! "$CONTENT" =~ "cn(" ]]; then
+    log_warning "Consider using cn() utility for className merging"
+  fi
+  
+  # Check for accessibility attributes in interactive components
+  if [[ "$CONTENT" =~ "<button" ]] || [[ "$CONTENT" =~ "<a " ]] || [[ "$CONTENT" =~ "<input" ]]; then
+    if [[ ! "$CONTENT" =~ "aria-" ]] && [[ ! "$CONTENT" =~ "role=" ]]; then
+      log_warning "Interactive components should include ARIA attributes for accessibility"
+    fi
+  fi
+fi
+
+# Check for Edit operations on existing files
+if [ "$TOOL_NAME" = "Edit" ] || [ "$TOOL_NAME" = "MultiEdit" ]; then
+  # Check if removing important patterns
+  OLD_STRING=$(echo "$TOOL_INPUT" | jq -r '.tool_input.old_string // empty')
+  NEW_STRING=$(echo "$TOOL_INPUT" | jq -r '.tool_input.new_string // empty')
+  
+  # Check if removing forwardRef
+  if [[ "$OLD_STRING" =~ "forwardRef" ]] && [[ ! "$NEW_STRING" =~ "forwardRef" ]]; then
+    log_warning "Removing forwardRef might break ref forwarding"
+  fi
+  
+  # Check if removing displayName
+  if [[ "$OLD_STRING" =~ "displayName" ]] && [[ ! "$NEW_STRING" =~ "displayName" ]]; then
+    log_warning "Removing displayName will make debugging harder"
+  fi
+  
+  # Check if removing TypeScript types
+  if [[ "$OLD_STRING" =~ ": React.FC" ]] || [[ "$OLD_STRING" =~ ": FC" ]]; then
+    if [[ ! "$NEW_STRING" =~ ": React.FC" ]] && [[ ! "$NEW_STRING" =~ ": FC" ]]; then
+      log_warning "Consider maintaining TypeScript types for components"
+    fi
+  fi
+fi
+
+# Special validation for specific component types
+case "$COMPONENT_NAME" in
+  button|input|select|textarea)
+    if [ "$TOOL_NAME" = "Write" ]; then
+      CONTENT=$(echo "$TOOL_INPUT" | jq -r '.tool_input.content // empty')
+      if [[ ! "$CONTENT" =~ "disabled" ]]; then
+        log_warning "Form components should handle disabled state"
+      fi
+    fi
+    ;;
+  dialog|modal|sheet|alert-dialog)
+    if [ "$TOOL_NAME" = "Write" ]; then
+      CONTENT=$(echo "$TOOL_INPUT" | jq -r '.tool_input.content // empty')
+      if [[ ! "$CONTENT" =~ "onOpenChange" ]] && [[ ! "$CONTENT" =~ "open" ]]; then
+        log_warning "Overlay components should have open/onOpenChange props"
+      fi
+    fi
+    ;;
+esac
+
+# If there are errors, block the operation
+if [ $HAS_ERRORS -eq 1 ]; then
+  exit 2
+fi
+
+# If there are warnings, show them but allow operation
+if [ -n "$WARNINGS" ]; then
+  echo -e "${YELLOW}Component Validation Warnings:${NC}" >&2
+  echo -e "$WARNINGS" >&2
+fi
+
+# Pass through the original input
+echo "$TOOL_INPUT"
+exit 0
\ No newline at end of file