laconic-deployer-frontend/next-agent-01.md

Migration Instructions for Next Agent

Overview

We are migrating React components from the Snowballtools repository to the Laconic Core repository. The first phase of migration (core components) has been completed. Your task is to continue the migration with the next set of components.

Repository Paths

1. Source Repository:

   • /Users/ianlylesblx/IDEA_CORE/laconic/repos/snowballtools-base/packages/frontend/src/components

2. Destination Repository:

   • /Users/ianlylesblx/IDEA_CORE/laconic/repos/qwrk-laconic-core/apps/deploy-fe/src/components

Completed Migrations

All core components have been migrated:

• Dropdown
• FormatMilliSecond
• Logo
• SearchBar
• Stepper
• StopWatch
• VerticalStepper

Next Components to Migrate

The next set of components to migrate are from the Layout Feature group. Start with the Navigation Components:

1. GitHubSessionButton

   • Source: /components/layout/navigation/components/GitHubSessionButton.tsx
   • Destination: /components/layout/navigation/github-session-button/GitHubSessionButton.tsx

2. LaconicIcon

   • Source: /components/layout/navigation/components/LaconicIcon.tsx
   • Destination: /components/layout/navigation/laconic-icon/LaconicIcon.tsx

3. NavigationActions

   • Source: /components/layout/navigation/components/NavigationActions.tsx
   • Destination: /components/layout/navigation/navigation-actions/NavigationActions.tsx

4. WalletSessionId

   • Source: /components/layout/navigation/components/WalletSessionId.tsx
   • Destination: /components/layout/navigation/wallet-session-id/WalletSessionId.tsx

Migration Process

For each component, follow these steps:

1. Create the Directory Structure:

   mkdir -p <destination_folder>
   

2. Create the Component Files:

   • ComponentName.tsx - Main component file
   • types.ts - Type definitions
   • index.ts - Barrel exports

3. Migration Rules:

   • Replace external CSS imports with Tailwind classes
   • Remove dependencies on external libraries when possible
   • Use native HTML elements and Tailwind for styling
   • Fix type definitions to avoid using union types with void
   • Ensure all components pass linting checks

4. Code Review Checklist:

   • No external CSS imports
   • No inline styles (use Tailwind classes)
   • Proper TypeScript types
   • Accessibility considerations
   • No linting errors

Common Issues and Solutions

1. Import Errors:

   • If you encounter Cannot find module '@workspace/ui/components', use standard HTML elements or relative imports from the services directory.

2. Event Handler Type Issues:

   • Use more generic event handlers or properly type them with the correct element type.

3. React Router Dependencies:

   • Use Next.js Link component instead of react-router-dom.

4. External Libraries:

   • Replace luxon with date-fns
   • Replace external UI libraries with native elements + Tailwind

Example Migration

Here's an example of a good component migration:

Original component:

import { IconInput } from '@/components/ui/extended/input-w-icons';
import { Search } from 'lucide-react';
import React, { forwardRef } from 'react';
import type { SearchBarProps } from './types';

export const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
  ({ value, onChange, placeholder = 'Search', ...props }, ref) => {
    return (
      <div className="relative flex w-full">
        <IconInput
          leftIcon={<Search className="text-foreground-secondary" />}
          onChange={onChange}
          value={value}
          type="search"
          placeholder={placeholder}
          className="w-full lg:w-[459px]"
          {...props}
          ref={ref}
        />
      </div>
    );
  }
);

Migrated component:

import React, { forwardRef } from 'react'
import type { SearchBarProps } from './types'

export const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
  ({ value, onChange, placeholder = 'Search', ...props }, ref) => {
    return (
      <div className="relative flex w-full">
        <div className="absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400">
          {/* Search icon SVG */}
          <svg 
            xmlns="http://www.w3.org/2000/svg" 
            width="16" 
            height="16" 
            viewBox="0 0 24 24" 
            fill="none" 
            stroke="currentColor" 
            strokeWidth="2" 
            strokeLinecap="round" 
            strokeLinejoin="round"
            aria-hidden="true"
            role="img"
          >
            <circle cx="11" cy="11" r="8" />
            <line x1="21" y1="21" x2="16.65" y2="16.65" />
          </svg>
        </div>
        <input
          ref={ref}
          value={value}
          onChange={onChange}
          type="search"
          placeholder={placeholder}
          className="w-full pl-8 px-3 py-2 border rounded lg:w-[459px]"
          {...props}
        />
      </div>
    )
  }
)

Documentation

After migrating each component, update the file-migration-list.md file to mark the component as completed.

Testing

• Visually inspect each component in isolation
• Test with different props and states
• Ensure keyboard navigation works for interactive elements
• Check for accessibility issues

Need Help?

Refer to:

• /standards/documentation/react-component-conventions.md for component organization guidelines
• /standards/current-tech-reference.md for information about the project's tech stack

Good luck with the migration!