Frontend Components

Authentication Components

AuthenticationOptions

Handles multiple authentication methods.

import { AuthenticationOptions } from '@/components/organisms/AuthenticationOptions';

<AuthenticationOptions />

Sub-components:

EmailAuthentication: Email/password login and registration
GithubAuthentication: OAuth-based GitHub authentication

OAuth flow button with state management.

interface GithubSignInButtonProps {
  redirectUrl: string;
  isSignedIn?: boolean;
}

Project Management

ProjectsList

Displays and manages project cards.

<ProjectsList />

Features:

Real-time status updates
Filtering and sorting
Project actions (edit/delete)

ProjectCard

Individual project display component.

interface ProjectCardProps {
  project: ProjectDto;
  onEdit?: () => void;
  onDelete?: () => void;
}

CreateProjectForm

Multi-step project creation form.

interface CreateProjectFormProps {
  onClose: () => void;
}

Steps:

Repository selection
Branch selection
Resource allocation
Configuration

Service Management

ServiceCard

Displays service information and controls.

interface ServiceCardProps {
  service: ServiceDto;
  projectId: string;
}

Features:

Status indicators
Resource monitoring
Action buttons

ServicesDrawer

Service management panel.

interface ServicesDrawerProps {
  projectId: string;
  service: ServiceDto;
}

Tabs:

Status
Configuration
Networks
Logs

Domain Management

DomainSetup

Domain configuration wizard.

interface DomainSetupProps {
  domain?: DomainResponseDto;
  main?: boolean;
}

Components:

DomainNameForm: Domain name input and validation
DomainActions: Domain management actions

Form Components

Autocomplete

Enhanced select component with search.

interface AutocompleteProps {
  onChange?: (value: string) => void;
  options: { label: string; value: string }[];
  disabled?: boolean;
}

CopiableField

Text field with copy functionality.

interface CopiableFieldProps {
  value?: string;
}

Progress Indicators

Stepdots

Multi-step progress indicator.

interface StepdotsProps {
  step: number;
  total: number;
}

HaddockSpinner

Branded loading spinner.

const HaddockSpinner: FC = () => (...)

Layout Components

PageLayout

Common page layout wrapper.

interface PageLayoutProps {
  children: ReactNode;
}

Features:

Header
Navigation
Content area

AuthenticatedGuard

Route protection wrapper.

const AuthenticatedGuard: FC = () => (...)

Dialog Components

SimpleDialog

Reusable dialog component.

interface SimpleDialogProps {
  title: string;
  description?: string;
  Content: FC<any>;
  Trigger: FC<{ onOpen: () => void }>;
}

SimpleDrawer

Slide-out panel component.

interface SimpleDrawerProps {
  title: string;
  description?: string;
  children: ReactNode;
}

Utility Components

OrDivider

Text separator with lines.

const OrDivider: FC = () => (...)

Divider

Simple horizontal line.

const Divider: FC = () => (...)

Form Elements

All form elements support:

Error states
Validation
Disabled states
Loading states

Button

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "default" | "destructive" | "outline" | "dark";
}

Input

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  error?: string;
}

Select

interface SelectProps {
  options: SelectOption[];
  value?: SelectOption;
  onChange?: (option: SelectOption) => void;
}

Charts and Metrics

RadialTextChart

Circular progress indicator with text.

interface RadialTextChartProps {
  value: number;
  maxValue: number;
  label: string;
}

Chart

Line/bar chart component.

interface ChartProps {
  data: any[];
  type: "line" | "bar";
  dataKey: string;
}

State Management Integration

All components can access global state through hooks:

useStore: Redux store access
useWebsockets: WebSocket connection
useToast: Toast notifications
useDomain: Domain management
useConfiguration: App configuration