lol

.agent/workflows/migrate-component.md

@@ -0,0 +1,168 @@
+---
+description: Migrate a React component from thrillwiki-87 to Vue/Nuxt
+---
+
+# Migrate Component Workflow
+
+Convert a React component from thrillwiki-87 (the authoritative source) to Vue 3 Composition API for the Nuxt 4 project.
+
+## Step 1: Locate Source Component
+
+Find the React component in thrillwiki-87:
+```bash
+# React components are in:
+/Volumes/macminissd/Projects/thrillwiki-87/src/components/
+```
+
+Common component directories:
+- `auth/` - Authentication components
+- `parks/` - Park-related components
+- `rides/` - Ride-related components
+- `forms/` - Form components
+- `moderation/` - Moderation queue components
+- `ui/` - Base UI primitives (shadcn-ui)
+- `common/` - Shared utilities
+- `layout/` - Layout components
+
+## Step 2: Analyze React Component
+
+Extract these patterns from the source:
+
+```tsx
+// Props interface
+interface ComponentProps {
+  prop1: string
+  prop2?: number
+}
+
+// State hooks
+const [value, setValue] = useState<Type>(initial)
+
+// Effects
+useEffect(() => { /* logic */ }, [deps])
+
+// Event handlers
+const handleClick = () => { /* logic */ }
+
+// Render return
+return <JSX />
+```
+
+## Step 3: Translate to Vue 3
+
+### Props
+```tsx
+// React
+interface Props { name: string; count?: number }
+```
+↓
+```vue
+<!-- Vue -->
+<script setup lang="ts">
+defineProps<{
+  name: string
+  count?: number
+}>()
+</script>
+```
+
+### State
+```tsx
+// React
+const [value, setValue] = useState<string>('')
+```
+↓
+```vue
+<!-- Vue -->
+<script setup lang="ts">
+const value = ref<string>('')
+</script>
+```
+
+### Effects
+```tsx
+// React
+useEffect(() => {
+  fetchData()
+}, [id])
+```
+↓
+```vue
+<!-- Vue -->
+<script setup lang="ts">
+watch(() => id, () => {
+  fetchData()
+}, { immediate: true })
+</script>
+```
+
+### Events
+```tsx
+// React
+onClick={() => onSelect(item)}
+```
+↓
+```vue
+<!-- Vue -->
+@click="emit('select', item)"
+```
+
+## Step 4: Map UI Components
+
+Translate shadcn-ui to Nuxt UI:
+
+| shadcn-ui | Nuxt UI |
+|-----------|---------|
+| `<Button>` | `<UButton>` |
+| `<Card>` | `<UCard>` |
+| `<Dialog>` | `<UModal>` |
+| `<Input>` | `<UInput>` |
+| `<Select>` | `<USelect>` |
+| `<Tabs>` | `<UTabs>` |
+| `<Badge>` | `<UBadge>` |
+
+## Step 5: Update API Calls
+
+Replace Supabase with Django API:
+
+```tsx
+// React (Supabase)
+const { data } = await supabase.from('parks').select('*')
+```
+↓
+```vue
+<!-- Vue (Django) -->
+<script setup lang="ts">
+const { data } = await useApi<Park[]>('/parks/')
+</script>
+```
+
+## Step 6: Place in Nuxt Structure
+
+Target paths:
+```
+frontend/app/components/
+├── auth/          # Auth components
+├── cards/         # Card components
+├── common/        # Shared utilities
+├── modals/        # Modal dialogs
+├── rides/         # Ride components
+└── ui/            # Base UI components
+```
+
+## Step 7: Verify Parity
+
+- [ ] All props from source are present
+- [ ] All state variables ported
+- [ ] All event handlers work
+- [ ] Styling matches (Tailwind classes)
+- [ ] Loading states present
+- [ ] Error states handled
+- [ ] Dark mode works
+
+## Example Migration
+
+**Source**: `thrillwiki-87/src/components/parks/ParkCard.tsx`
+**Target**: `frontend/app/components/cards/ParkCard.vue`
+
+Check existing target. If it exists, compare and add missing features. If not, create new.