18 KiB
18 KiB
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
-
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/uidirectory instead of external libraries
- Replace all CSS imports (e.g.,
-
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
-
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
-
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
- Duplicated Components:
ProjectSearchBar: Appears in both/components/layout/search/ProjectSearchBar/and/components/projects/ProjectSearchBar/
Migration Progress Summary
Completed Migrations
- Core Components: 7/7 components (100% complete)
- Layout Feature - Navigation Components: 4/4 components (100% complete)
- Project Tab Pages: 2/3 components (67% complete)
- Migrated: OverviewTabPanel, DeploymentsTabPanel
- Pending: SettingsTabPanel
- Project Overview Components: 2/4 components (50% complete)
- Migrated: AuctionCard, OverviewInfo
- Not Planned: Activity, ActivityCard
- Deployment Components: 2/4 components (50% complete)
- Migrated: DeploymentDetailsCard, FilterForm
- Not Planned: DeploymentDialogBodyCard, DeploymentMenu
- IFrame Components: 2/2 components (100% complete)
Next Steps
- Migrate the SettingsTabPanel and related settings pages
- Migrate the Project Creation pages
- 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