257 lines
18 KiB
Markdown
257 lines
18 KiB
Markdown
# Component Migration List
|
|
|
|
This document outlines all components that need to be migrated from the original repo to the new monorepo, following our React Component Organization Conventions.
|
|
|
|
## Original Repository Path
|
|
|
|
All original components are located at:
|
|
```
|
|
/Users/ianlylesblx/IDEA_CORE/laconic/repos/snowballtools-base/packages/frontend/src/components
|
|
```
|
|
|
|
## Migration Guidelines
|
|
|
|
1. **Styling Approach**:
|
|
- Replace all CSS imports (e.g., `'react-dropdown/style.css'`) with Tailwind classes
|
|
- Convert inline styles to Tailwind classes where possible
|
|
- Use existing UI components from `components/ui` directory instead of external libraries
|
|
|
|
2. **Dependencies**:
|
|
- Do not add new libraries to the project
|
|
- Replace external component libraries with our own UI components
|
|
- If a component depends on an external library, check if we have an equivalent in our UI library
|
|
|
|
3. **Pattern Matching**:
|
|
- Follow existing patterns in our codebase for styling, state management, etc.
|
|
- Use React hooks consistent with what's used in the rest of the application
|
|
|
|
4. **No Commits**:
|
|
- All changes should be reviewed before being committed
|
|
|
|
## Feature-Based Organization
|
|
|
|
Components will be organized into the following feature groups:
|
|
|
|
## 1. Core Components
|
|
|
|
### Generic Components
|
|
| Component | Current Path | Migration Status | Notes |
|
|
|-----------|-------------|-----------------|-------|
|
|
| Dropdown | `/components/Dropdown.tsx` | ✅ Completed | Simple dropdown component |
|
|
| FormatMilliSecond | `/components/FormatMilliSecond.tsx` | ✅ Completed | Utility component for time formatting |
|
|
| Logo | `/components/Logo.tsx` | ✅ Completed | Brand element |
|
|
| SearchBar | `/components/SearchBar.tsx` | ✅ Completed | Generic search component |
|
|
| Stepper | `/components/Stepper.tsx` | ✅ Completed | Progress indicator |
|
|
| StopWatch | `/components/StopWatch.tsx` | ✅ Completed | Time tracking component |
|
|
| VerticalStepper | `/components/VerticalStepper.tsx` | ✅ Completed | Vertical orientation of stepper |
|
|
|
|
## 2. Layout Feature
|
|
|
|
### Navigation Components
|
|
| Component | Current Path | Migration Status | Notes |
|
|
|-----------|-------------|-----------------|-------|
|
|
| GitHubSessionButton | `/components/layout/navigation/components/GitHubSessionButton.tsx` | ✅ Completed | GitHub session management |
|
|
| LaconicIcon | `/components/layout/navigation/components/LaconicIcon.tsx` | ✅ Completed | Brand icon |
|
|
| NavigationActions | `/components/layout/navigation/components/NavigationActions.tsx` | ✅ Completed | Navigation action buttons |
|
|
| WalletSessionId | `/components/layout/navigation/components/WalletSessionId.tsx` | ✅ Completed | Implemented in both layout/navigation and foundation/wallet-session-id |
|
|
|
|
### Screen Header Components
|
|
| Component | Current Path | Migration Status | Notes |
|
|
|-----------|-------------|-----------------|-------|
|
|
| ActionButton | `/components/layout/screen-header/ActionButton.tsx` | ❌ Not Planned | Header action button - Skipping per instructions |
|
|
| Header | `/components/layout/screen-header/Header.tsx` | ❌ Not Planned | Page header component - Skipping per instructions |
|
|
|
|
### Screen Wrapper Components
|
|
| Component | Current Path | Migration Status | Notes |
|
|
|-----------|-------------|-----------------|-------|
|
|
| TabWrapper | `/components/layout/screen-wrapper/TabWrapper.tsx` | ❌ Not Planned | Tab content wrapper - Skipping per instructions |
|
|
|
|
### Search Components
|
|
| Component | Current Path | Migration Status | Notes |
|
|
|-----------|-------------|-----------------|-------|
|
|
| ProjectSearchBar | `/components/layout/search/ProjectSearchBar/ProjectSearchBar.tsx` | ✅ Completed | Implemented in /components/foundation/project-search-bar with simplified functionality |
|
|
| ProjectSearchBarDialog | `/components/layout/search/ProjectSearchBar/ProjectSearchBarDialog.tsx` | ❌ Not Planned | Search dialog - Skipping per instructions |
|
|
| ProjectSearchBarEmpty | `/components/layout/search/ProjectSearchBar/ProjectSearchBarEmpty.tsx` | ❌ Not Planned | Empty state - Skipping per instructions |
|
|
| ProjectSearchBarItem | `/components/layout/search/ProjectSearchBar/ProjectSearchBarItem.tsx` | ❌ Not Planned | Search result item - Skipping per instructions |
|
|
|
|
## 3. Project Management Feature
|
|
|
|
### Project Card Components
|
|
| Component | Current Path | Migration Status | Notes |
|
|
|-----------|-------------|-----------------|-------|
|
|
| ProjectCard | `/components/projects/ProjectCard/ProjectCard.tsx` | ❌ Not Planned | Project display card - Skipping per instructions |
|
|
| ProjectCardActions | `/components/projects/ProjectCard/ProjectCardActions.tsx` | ❌ Not Planned | Card actions - Skipping per instructions |
|
|
| ProjectDeploymentInfo | `/components/projects/ProjectCard/ProjectDeploymentInfo.tsx` | ❌ Not Planned | Deployment info display - Skipping per instructions |
|
|
| ProjectStatusDot | `/components/projects/ProjectCard/ProjectStatusDot.tsx` | ❌ Not Planned | Status indicator - Skipping per instructions |
|
|
|
|
### Project Search Components
|
|
| Component | Current Path | Migration Status | Notes |
|
|
|-----------|-------------|-----------------|-------|
|
|
| ProjectSearchBar | `/components/projects/ProjectSearchBar/ProjectSearchBar.tsx` | ❌ Not Planned | **DUPLICATE** - Skipping per instructions |
|
|
|
|
### Project Settings Components
|
|
| Component | Current Path | Migration Status | Notes |
|
|
|-----------|-------------|-------|-------|
|
|
| AddEnvironmentVariableRow | `/components/projects/project/settings/AddEnvironmentVariableRow.tsx` | ❌ Not Planned | Environment variable form - Skipping per instructions |
|
|
| AddMemberDialog | `/components/projects/project/settings/AddMemberDialog.tsx` | ❌ Not Planned | Add team member - Skipping per instructions |
|
|
| DeleteProjectDialog | `/components/projects/project/settings/DeleteProjectDialog.tsx` | ❌ Not Planned | Project deletion confirmation - Skipping per instructions |
|
|
| DisplayEnvironmentVariables | `/components/projects/project/settings/DisplayEnvironmentVariables.tsx` | ❌ Not Planned | Environment variable display - Skipping per instructions |
|
|
| DomainCard | `/components/projects/project/settings/DomainCard.tsx` | ❌ Not Planned | Domain display - Skipping per instructions |
|
|
| EditDomainDialog | `/components/projects/project/settings/EditDomainDialog.tsx` | ❌ Not Planned | Domain editing - Skipping per instructions |
|
|
| EditEnvironmentVariableRow | `/components/projects/project/settings/EditEnvironmentVariableRow.tsx` | ❌ Not Planned | Edit environment variable - Skipping per instructions |
|
|
| GitSelectionSection | `/components/projects/project/settings/GitSelectionSection.tsx` | ❌ Not Planned | Git repository selection - Skipping per instructions |
|
|
| MemberCard | `/components/projects/project/settings/MemberCard.tsx` | ❌ Not Planned | Team member display - Skipping per instructions |
|
|
| ProjectSettingContainer | `/components/projects/project/settings/ProjectSettingContainer.tsx` | ❌ Not Planned | Settings container - Skipping per instructions |
|
|
| ProjectSettingHeader | `/components/projects/project/settings/ProjectSettingHeader.tsx` | ❌ Not Planned | Settings header - Skipping per instructions |
|
|
| RepoConnectedSection | `/components/projects/project/settings/RepoConnectedSection.tsx` | ❌ Not Planned | Repository connection status - Skipping per instructions |
|
|
| SetupDomain | `/components/projects/project/settings/SetupDomain.tsx` | ❌ Not Planned | Domain setup flow - Skipping per instructions |
|
|
| WebhookCard | `/components/projects/project/settings/WebhookCard.tsx` | ❌ Not Planned | Webhook display - Skipping per instructions |
|
|
|
|
### Project Overview Components
|
|
| Component | Current Path | Migration Status | Notes |
|
|
|-----------|-------------|-------|-------|
|
|
| Activity | `/components/projects/project/overview/Activity/Activity.tsx` | ❌ Not Planned | Activity feed - Skipping per instructions |
|
|
| ActivityCard | `/components/projects/project/overview/Activity/ActivityCard.tsx` | ❌ Not Planned | Activity item - Skipping per instructions |
|
|
| AuctionCard | `/components/projects/project/overview/Activity/AuctionCard.tsx` | ✅ Completed | Auction display - Used in Overview page |
|
|
| OverviewInfo | `/components/projects/project/overview/OverviewInfo.tsx` | ✅ Completed | Overview information - Used in Overview page |
|
|
|
|
### Deployment Components
|
|
| Component | Current Path | Migration Status | Notes |
|
|
|-----------|-------------|-------|-------|
|
|
| DeploymentDetailsCard | `/components/projects/project/deployments/DeploymentDetailsCard.tsx` | ✅ Completed | Deployment details - Used in Deployments page |
|
|
| DeploymentDialogBodyCard | `/components/projects/project/deployments/DeploymentDialogBodyCard.tsx` | ❌ Not Planned | Deployment dialog - Skipping per instructions |
|
|
| DeploymentMenu | `/components/projects/project/deployments/DeploymentMenu.tsx` | ❌ Not Planned | Deployment actions menu - Skipping per instructions |
|
|
| FilterForm | `/components/projects/project/deployments/FilterForm.tsx` | ✅ Completed | Deployment filtering - Used in Deployments page |
|
|
|
|
### Dialog Components
|
|
| Component | Current Path | Migration Status | Notes |
|
|
|-----------|-------------|-------|-------|
|
|
| CancelDeploymentDialog | `/components/projects/Dialog/CancelDeploymentDialog.tsx` | ❌ Not Planned | Cancel deployment - Skipping per instructions |
|
|
| ChangeStateToProductionDialog | `/components/projects/Dialog/ChangeStateToProductionDialog.tsx` | ❌ Not Planned | Change deployment state - Skipping per instructions |
|
|
| DeleteDeploymentDialog | `/components/projects/Dialog/DeleteDeploymentDialog.tsx` | ❌ Not Planned | Delete deployment - Skipping per instructions |
|
|
| DeleteDomainDialog | `/components/projects/Dialog/DeleteDomainDialog.tsx` | ❌ Not Planned | Delete domain - Skipping per instructions |
|
|
| DeleteVariableDialog | `/components/projects/Dialog/DeleteVariableDialog.tsx` | ❌ Not Planned | Delete variable - Skipping per instructions |
|
|
| DeleteWebhookDialog | `/components/projects/Dialog/DeleteWebhookDialog.tsx` | ❌ Not Planned | Delete webhook - Skipping per instructions |
|
|
| DisconnectRepositoryDialog | `/components/projects/Dialog/DisconnectRepositoryDialog.tsx` | ❌ Not Planned | Disconnect repository - Skipping per instructions |
|
|
| RemoveMemberDialog | `/components/projects/Dialog/RemoveMemberDialog.tsx` | ❌ Not Planned | Remove team member - Skipping per instructions |
|
|
| TransferProjectDialog | `/components/projects/Dialog/TransferProjectDialog.tsx` | ❌ Not Planned | Transfer project ownership - Skipping per instructions |
|
|
|
|
### Project Creation Components
|
|
| Component | Current Path | Migration Status | Notes |
|
|
|-----------|-------------|-------|-------|
|
|
| ApproveTransactionModal | `/components/projects/create/ApproveTransactionModal.tsx` | ❌ Not Planned | Transaction approval - Skipping per instructions |
|
|
| CheckBalanceIframe | `/components/projects/create/CheckBalanceIframe.tsx` | ❌ Not Planned | Balance check - Skipping per instructions |
|
|
| Configure | `/components/projects/create/Configure.tsx` | ❌ Not Planned | Project configuration - Skipping per instructions |
|
|
| ConnectAccount | `/components/projects/create/ConnectAccount.tsx` | ❌ Not Planned | Account connection - Skipping per instructions |
|
|
| ConnectAccountTabPanel | `/components/projects/create/ConnectAccountTabPanel.tsx` | ❌ Not Planned | Connection tab panel - Skipping per instructions |
|
|
| Deploy | `/components/projects/create/Deploy.tsx` | ❌ Not Planned | Project deployment - Skipping per instructions |
|
|
| DeployStep | `/components/projects/create/DeployStep.tsx` | ❌ Not Planned | Deployment step - Skipping per instructions |
|
|
| MockConnectGitCard | `/components/projects/create/MockConnectGitCard.tsx` | ❌ Not Planned | Git connection mockup - Skipping per instructions |
|
|
| ProjectRepoCard | `/components/projects/create/ProjectRepoCard/ProjectRepoCard.tsx` | ❌ Not Planned | Repository card - Skipping per instructions |
|
|
| RepositoryList | `/components/projects/create/RepositoryList/RepositoryList.tsx` | ❌ Not Planned | Repository selection - Skipping per instructions |
|
|
| TemplateCard | `/components/projects/create/TemplateCard/TemplateCard.tsx` | ❌ Not Planned | Template selection card - Skipping per instructions |
|
|
|
|
## 4. Loading Components
|
|
| Component | Current Path | Migration Status | Notes |
|
|
|-----------|-------------|-------|-------|
|
|
| LoadingOverlay | `/components/loading/loading-overlay.tsx` | ❌ Not Planned | Loading state overlay - Skipping per instructions |
|
|
|
|
## 5. IFrame Components
|
|
| Component | Current Path | Migration Status | Notes |
|
|
|-----------|-------------|-------|-------|
|
|
| AutoSignInIFrameModal | `/components/shared/auth/AutoSignInIFrameModal.tsx` | ✅ Completed | Auto sign-in modal - Consolidated with duplicate |
|
|
| AutoSignInIFrameModal | `/components/wallet/AutoSignInIFrameModal.tsx` | ✅ Completed | Duplicate component consolidated with version from shared/auth |
|
|
|
|
## 6. Page Components (Used in Routes)
|
|
|
|
These components are used directly in routes and should be migrated as page components:
|
|
|
|
### Organization/Project Pages
|
|
| Component | Current Path | Migration Status | Route Path |
|
|
|-----------|-------------|-----------------|------------|
|
|
| ProjectsScreen | `/pages/org-slug/ProjectsScreen.tsx` | ❌ Not Planned | `/:orgSlug` - Skipping per instructions |
|
|
| Settings (Org) | `/pages/org-slug/Settings.tsx` | ❌ Not Planned | `/:orgSlug/settings` - Skipping per instructions |
|
|
| Id (Project) | `/pages/org-slug/projects/Id.tsx` | ❌ Not Planned | `/:orgSlug/projects/:id` - Skipping per instructions |
|
|
|
|
### Project Tab Pages
|
|
| Component | Current Path | Migration Status | Route Path |
|
|
|-----------|-------------|-----------------|------------|
|
|
| OverviewTabPanel | `/pages/org-slug/projects/id/Overview.tsx` | ✅ Completed | `/:orgSlug/projects/:id` (index) |
|
|
| DeploymentsTabPanel | `/pages/org-slug/projects/id/Deployments.tsx` | ✅ Completed | `/:orgSlug/projects/:id/deployments` |
|
|
| SettingsTabPanel | `/pages/org-slug/projects/id/Settings.tsx` | ❌ Not Started | `/:orgSlug/projects/:id/settings` |
|
|
|
|
### Project Settings Pages
|
|
| Component | Current Path | Route Path |
|
|
|-----------|-------------|------------|
|
|
| GeneralTabPanel | `/pages/org-slug/projects/id/settings/General.tsx` | `/:orgSlug/projects/:id/settings` (index) |
|
|
| Domains | `/pages/org-slug/projects/id/settings/Domains.tsx` | `/:orgSlug/projects/:id/settings/domains` |
|
|
| GitTabPanel | `/pages/org-slug/projects/id/settings/Git.tsx` | `/:orgSlug/projects/:id/settings/git` |
|
|
| EnvironmentVariablesTabPanel | `/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx` | `/:orgSlug/projects/:id/settings/environment-variables` |
|
|
| CollaboratorsTabPanel | `/pages/org-slug/projects/id/settings/Collaborators.tsx` | `/:orgSlug/projects/:id/settings/collaborators` |
|
|
| AddDomain | `/pages/org-slug/projects/id/settings/domains/add/index.tsx` | `/:orgSlug/projects/:id/settings/domains/add` |
|
|
| Config (Domain) | `/pages/org-slug/projects/id/settings/domains/add/Config.tsx` | `/:orgSlug/projects/:id/settings/domains/add/config` |
|
|
|
|
### Project Creation Pages
|
|
| Component | Current Path | Route Path |
|
|
|-----------|-------------|------------|
|
|
| CreateProjectLayout | `/pages/org-slug/projects/create/CreateProjectLayout.tsx` | `/:orgSlug/projects/create` |
|
|
| NewProject | `/pages/org-slug/projects/create/NewProject.tsx` | `/:orgSlug/projects/create` (index) |
|
|
| CreateWithTemplate | `/pages/org-slug/projects/create/Template.tsx` | `/:orgSlug/projects/create/template` |
|
|
| Configure (Projects) | `/components/projects/create/Configure.tsx` | `/:orgSlug/projects/create/configure` |
|
|
| Deploy (Projects) | `/components/projects/create/Deploy.tsx` | `/:orgSlug/projects/create/deploy` |
|
|
| Id (Success) | `/pages/org-slug/projects/create/success/Id.tsx` | `/:orgSlug/projects/create/success/:id` |
|
|
|
|
### Template Pages
|
|
| Component | Current Path | Route Path |
|
|
|-----------|-------------|------------|
|
|
| CreateRepo | `/pages/org-slug/projects/create/template/index.tsx` | `/:orgSlug/projects/create/template` (index) |
|
|
| Configure (Template) | `/pages/org-slug/projects/create/template/Configure.tsx` | `/:orgSlug/projects/create/template/configure` |
|
|
| Deploy (Template) | `/pages/org-slug/projects/create/template/Deploy.tsx` | `/:orgSlug/projects/create/template/deploy` |
|
|
|
|
### Auth and Onboarding Pages
|
|
| Component | Current Path | Route Path |
|
|
|-----------|-------------|------------|
|
|
| Index | `/pages/index.tsx` | `/` |
|
|
| AuthPage | `/pages/AuthPage.tsx` | `/login` |
|
|
| BuyPrepaidService | `/pages/BuyPrepaidService.tsx` | `/buy-prepaid-service` |
|
|
| OnboardingPage | `/pages/OnboardingPage.tsx` | `/onboarding` |
|
|
| OnboardingDemoPage | `/pages/OnboardingDemoPage.tsx` | `/onboarding-demo` |
|
|
|
|
### Layouts
|
|
| Component | Current Path | Route Path |
|
|
|-----------|-------------|------------|
|
|
| RootLayout | `/layouts/RootLayout.tsx` | Root layout for all routes |
|
|
| DashboardLayout | `/layouts/DashboardLayout.tsx` | Layout for /:orgSlug routes |
|
|
| ProjectSearchLayout | `/layouts/ProjectSearch.tsx` | Layout for project search functionality |
|
|
|
|
## Notes and Observations
|
|
|
|
1. **Duplicated Components**:
|
|
- `ProjectSearchBar`: Appears in both `/components/layout/search/ProjectSearchBar/` and `/components/projects/ProjectSearchBar/`
|
|
|
|
## Migration Progress Summary
|
|
|
|
### Completed Migrations
|
|
1. **Core Components**: 7/7 components (100% complete)
|
|
2. **Layout Feature - Navigation Components**: 4/4 components (100% complete)
|
|
3. **Project Tab Pages**: 2/3 components (67% complete)
|
|
- Migrated: OverviewTabPanel, DeploymentsTabPanel
|
|
- Pending: SettingsTabPanel
|
|
4. **Project Overview Components**: 2/4 components (50% complete)
|
|
- Migrated: AuctionCard, OverviewInfo
|
|
- Not Planned: Activity, ActivityCard
|
|
5. **Deployment Components**: 2/4 components (50% complete)
|
|
- Migrated: DeploymentDetailsCard, FilterForm
|
|
- Not Planned: DeploymentDialogBodyCard, DeploymentMenu
|
|
6. **IFrame Components**: 2/2 components (100% complete)
|
|
|
|
### Next Steps
|
|
1. Migrate the SettingsTabPanel and related settings pages
|
|
2. Migrate the Project Creation pages
|
|
3. Migrate the Template pages
|
|
|
|
### Migration Notes
|
|
- The migrated components have been adapted to work with Next.js App Router
|
|
- Many UI components and utilities were already available in the codebase
|
|
- Type definitions have been updated to ensure type safety
|
|
- Redundant files have been cleaned up |