thrillwiki_django_no_react/.agent/workflows/migrate-component.md

description

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:

# 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:

// 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

// React
interface Props { name: string; count?: number }

↓

<!-- Vue -->
<script setup lang="ts">
defineProps<{
  name: string
  count?: number
}>()
</script>

State

// React
const [value, setValue] = useState<string>('')

↓

<!-- Vue -->
<script setup lang="ts">
const value = ref<string>('')
</script>

Effects

// React
useEffect(() => {
  fetchData()
}, [id])

↓

<!-- Vue -->
<script setup lang="ts">
watch(() => id, () => {
  fetchData()
}, { immediate: true })
</script>

Events

// React
onClick={() => onSelect(item)}

↓

<!-- 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:

// React (Supabase)
const { data } = await supabase.from('parks').select('*')

↓

<!-- 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.