snowballtools-base/packages/frontend/src/components/onboarding-flow

Laconic Onboarding Flow

This directory contains the components that make up the onboarding flow for the Laconic platform. The onboarding process guides users through connecting their GitHub repository, configuring their deployment settings, and deploying their application.

📝 Figma Design Reference

The design for this component is available at: Laconic Design - Onboarding Flow

🏗️ Component Structure

The onboarding flow is structured as a multi-step wizard with three main steps:

1. Connect - Allows users to connect to GitHub and select a repository
2. Configure - Lets users configure deployment settings and environment variables
3. Deploy - Finalizes the setup and deploys the application

Directory Structure

onboarding-flow/
├── README.md                      # This file
├── OPTIMIZATION.md                # Optimization recommendations
├── DOCUMENTATION_TEMPLATE.md      # Documentation templates
├── index.ts                       # Main exports
├── types.ts                       # Shared types
├── store.ts                       # Zustand store for state management
├── Onboarding.tsx                 # Main component that orchestrates the flow
├── common/                        # Shared components
│   ├── index.ts                   # Exports for common components
│   ├── background-svg.tsx         # Background visual element
│   ├── laconic-icon-lettering.tsx # Laconic branding component
│   ├── onboarding-container.tsx   # Container layout for the onboarding UI
│   ├── step-header.tsx            # Header for each step
│   └── step-navigation.tsx        # Navigation controls (prev/next buttons)
├── sidebar/                       # Sidebar components
│   ├── index.ts                   # Exports for sidebar components
│   └── sidebar-nav.tsx            # Sidebar showing all steps and progress
├── connect-step/                  # Components for the Connect step
│   ├── index.ts                   # Exports for Connect step
│   ├── connect-step.tsx           # Main component for the Connect step
│   ├── connect-button.tsx         # GitHub connection button
│   ├── connect-initial.tsx        # Initial Connect screen
│   ├── connect-deploy-first-app.tsx # First app deployment guidance
│   ├── repository-list.tsx        # List of GitHub repositories
│   └── template-list.tsx          # List of available templates
├── configure-step/                # Components for the Configure step
│   ├── index.ts                   # Exports for Configure step
│   └── configure-step.tsx         # Main component for the Configure step
└── deploy-step/                   # Components for the Deploy step
    ├── index.ts                   # Exports for Deploy step
    └── deploy-step.tsx            # Main component for the Deploy step

🔄 State Management

The onboarding flow uses Zustand for state management. The store is defined in store.ts and exposed through the useOnboarding hook.

✅ Completed Items

• ✅ Basic component structure following the Figma design
• ✅ Step navigation with progress indicators
• ✅ Sidebar navigation showing all steps
• ✅ Connect step UI with repository and template selection
• ✅ Configure step with deployment type selection
• ✅ Deploy step with deployment status
• ✅ Organized directory structure
• ✅ Consistent file naming conventions
• ✅ Centralized type definitions
• ✅ Main documentation and README

🚧 To-Do Items

• Complete JSDoc documentation for all components
• Implement actual GitHub API integration for repository fetching
• Add form validation for configuration inputs
• Implement actual deployment functionality
• Add error handling for API requests
• Add loading states for asynchronous operations
• Implement responsive design for mobile devices
• Add unit tests for all components
• Add Storybook stories for component documentation
• Implement animations for step transitions

📋 Usage Guidelines

To use the onboarding flow in your application:

import { Onboarding } from '@/components/onboarding-flow';

export default function OnboardingPage() {
  return <Onboarding />;
}

The onboarding flow is self-contained and manages its own state through the Zustand store.

🧩 Component Hierarchy

Onboarding
├── OnboardingContainer
│   ├── SidebarNav
│   └── Main Content
│       ├── StepHeader
│       ├── Step Content (ConnectStep | ConfigureStep | DeployStep)
│       └── StepNavigation