website refactor
This commit is contained in:
@@ -1,7 +1,6 @@
|
||||
import { useRef, ChangeEvent } from 'react';
|
||||
import { Camera, Upload, Loader2, Sparkles, Palette, Check, User } from 'lucide-react';
|
||||
import { Upload, Loader2, Sparkles, Palette, Check, User } from 'lucide-react';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
@@ -93,16 +92,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack gap={6}>
|
||||
<Box>
|
||||
<Heading level={2} icon={<Icon icon={Camera} size={5} color="text-primary-blue" />}>
|
||||
Create Your Racing Avatar
|
||||
</Heading>
|
||||
<Text size="sm" color="text-gray-400" block mt={1}>
|
||||
Upload a photo and we will generate a unique racing avatar for you
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Stack gap={8}>
|
||||
{/* Photo Upload */}
|
||||
<Box>
|
||||
<Text as="label" size="sm" weight="medium" color="text-gray-300" block mb={3}>
|
||||
@@ -180,7 +170,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
|
||||
|
||||
{/* Preview area */}
|
||||
<Stack w="32" alignItems="center" center>
|
||||
<Surface variant="muted" rounded="xl" border w="24" h="24" display="flex" center overflow="hidden">
|
||||
<Surface variant="muted" rounded="xl" border w="24" h="24" display="flex" center overflow="hidden" borderColor="border-charcoal-outline">
|
||||
{(() => {
|
||||
const selectedAvatarUrl =
|
||||
avatarInfo.selectedAvatarIndex !== null
|
||||
|
||||
42
apps/website/components/onboarding/OnboardingHelpPanel.tsx
Normal file
42
apps/website/components/onboarding/OnboardingHelpPanel.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { Surface } from '@/ui/Surface';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { HelpCircle } from 'lucide-react';
|
||||
|
||||
interface OnboardingHelpPanelProps {
|
||||
title?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* OnboardingHelpPanel
|
||||
*
|
||||
* A semantic panel for providing contextual help or information during onboarding.
|
||||
* Usually placed in the sidebar.
|
||||
*/
|
||||
export function OnboardingHelpPanel({ title = 'Need Help?', children }: OnboardingHelpPanelProps) {
|
||||
return (
|
||||
<Surface
|
||||
variant="muted"
|
||||
rounded="xl"
|
||||
border
|
||||
padding={6}
|
||||
borderColor="border-charcoal-outline"
|
||||
bg="bg-deep-charcoal/30"
|
||||
>
|
||||
<Stack gap={4}>
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Icon icon={HelpCircle} size={4} color="text-primary-blue" />
|
||||
<Text size="sm" weight="bold" color="text-white" uppercase letterSpacing="wider">
|
||||
{title}
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Text size="sm" color="text-gray-400">
|
||||
{children}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Surface>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { ChevronLeft, ChevronRight, Check } from 'lucide-react';
|
||||
import { Box } from '@/ui/Box';
|
||||
|
||||
interface OnboardingPrimaryActionsProps {
|
||||
onBack?: () => void;
|
||||
onNext?: () => void;
|
||||
nextLabel?: string;
|
||||
isLastStep?: boolean;
|
||||
canNext?: boolean;
|
||||
isLoading?: boolean;
|
||||
type?: 'button' | 'submit';
|
||||
}
|
||||
|
||||
/**
|
||||
* OnboardingPrimaryActions
|
||||
*
|
||||
* Semantic component for the main navigation actions in the onboarding flow.
|
||||
*/
|
||||
export function OnboardingPrimaryActions({
|
||||
onBack,
|
||||
onNext,
|
||||
nextLabel = 'Continue',
|
||||
isLastStep = false,
|
||||
canNext = true,
|
||||
isLoading = false,
|
||||
type = 'button',
|
||||
}: OnboardingPrimaryActionsProps) {
|
||||
return (
|
||||
<Stack direction="row" justify="between" mt={8} gap={4}>
|
||||
{onBack ? (
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={onBack}
|
||||
disabled={isLoading}
|
||||
icon={<Icon icon={ChevronLeft} size={4} />}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
) : (
|
||||
<Box />
|
||||
)}
|
||||
|
||||
<Button
|
||||
type={type}
|
||||
variant="primary"
|
||||
onClick={onNext}
|
||||
disabled={isLoading || !canNext}
|
||||
w="40"
|
||||
>
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
{isLoading ? 'Processing...' : isLastStep ? 'Complete Setup' : nextLabel}
|
||||
{!isLoading && (isLastStep ? <Icon icon={Check} size={4} /> : <Icon icon={ChevronRight} size={4} />)}
|
||||
</Stack>
|
||||
</Button>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
56
apps/website/components/onboarding/OnboardingShell.tsx
Normal file
56
apps/website/components/onboarding/OnboardingShell.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Container } from '@/ui/Container';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
|
||||
interface OnboardingShellProps {
|
||||
children: React.ReactNode;
|
||||
header?: React.ReactNode;
|
||||
footer?: React.ReactNode;
|
||||
sidebar?: React.ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* OnboardingShell
|
||||
*
|
||||
* Semantic layout wrapper for the onboarding flow.
|
||||
* Follows "Precision Racing Minimal" theme with dark surfaces and clean structure.
|
||||
*/
|
||||
export function OnboardingShell({ children, header, footer, sidebar }: OnboardingShellProps) {
|
||||
return (
|
||||
<Box minH="screen" bg="bg-near-black" color="text-white" display="flex" flexDirection="column">
|
||||
{header && (
|
||||
<Box borderB borderColor="border-charcoal-outline" py={4} bg="bg-deep-charcoal">
|
||||
<Container size="md">
|
||||
{header}
|
||||
</Container>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box flex={1} display="flex" py={12}>
|
||||
<Container size="md">
|
||||
<Box display="flex" gap={12}>
|
||||
<Box flex={1}>
|
||||
<Stack gap={8}>
|
||||
{children}
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{sidebar && (
|
||||
<Box w="80" display={{ base: 'none', lg: 'block' }}>
|
||||
{sidebar}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{footer && (
|
||||
<Box borderT borderColor="border-charcoal-outline" py={6} bg="bg-deep-charcoal">
|
||||
<Container size="md">
|
||||
{footer}
|
||||
</Container>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
43
apps/website/components/onboarding/OnboardingStepPanel.tsx
Normal file
43
apps/website/components/onboarding/OnboardingStepPanel.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import { Surface } from '@/ui/Surface';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
|
||||
interface OnboardingStepPanelProps {
|
||||
title: string;
|
||||
description?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* OnboardingStepPanel
|
||||
*
|
||||
* A semantic container for a single onboarding step.
|
||||
* Provides a consistent header and surface.
|
||||
*/
|
||||
export function OnboardingStepPanel({ title, description, children }: OnboardingStepPanelProps) {
|
||||
return (
|
||||
<Stack gap={6}>
|
||||
<Stack gap={1}>
|
||||
<Text as="h2" size="2xl" weight="bold" color="text-white" letterSpacing="tight">
|
||||
{title}
|
||||
</Text>
|
||||
{description && (
|
||||
<Text size="sm" color="text-gray-400">
|
||||
{description}
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
<Surface
|
||||
variant="dark"
|
||||
rounded="xl"
|
||||
border
|
||||
padding={8}
|
||||
borderColor="border-charcoal-outline"
|
||||
bg="bg-deep-charcoal/50"
|
||||
>
|
||||
{children}
|
||||
</Surface>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
78
apps/website/components/onboarding/OnboardingStepper.tsx
Normal file
78
apps/website/components/onboarding/OnboardingStepper.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
'use client';
|
||||
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
interface OnboardingStepperProps {
|
||||
currentStep: number;
|
||||
totalSteps: number;
|
||||
steps: string[];
|
||||
}
|
||||
|
||||
/**
|
||||
* OnboardingStepper
|
||||
*
|
||||
* A progress indicator with a "pit limiter" vibe.
|
||||
* Uses a progress line and step labels.
|
||||
*/
|
||||
export function OnboardingStepper({ currentStep, totalSteps, steps }: OnboardingStepperProps) {
|
||||
const progress = (currentStep / totalSteps) * 100;
|
||||
|
||||
return (
|
||||
<Stack gap={4} w="full">
|
||||
<Box w="full" h="1.5" bg="bg-iron-gray" rounded="full" overflow="hidden" position="relative">
|
||||
<Box
|
||||
as={motion.div}
|
||||
initial={{ width: 0 }}
|
||||
animate={{ width: `${progress}%` }}
|
||||
transition={{ duration: 0.5, ease: 'easeOut' }}
|
||||
h="full"
|
||||
bg="bg-primary-blue"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" justify="between">
|
||||
{steps.map((label, index) => {
|
||||
const stepNumber = index + 1;
|
||||
const isActive = stepNumber === currentStep;
|
||||
const isCompleted = stepNumber < currentStep;
|
||||
|
||||
return (
|
||||
<Stack key={label} direction="row" align="center" gap={2}>
|
||||
<Box
|
||||
w="6"
|
||||
h="6"
|
||||
rounded="full"
|
||||
display="flex"
|
||||
center
|
||||
border
|
||||
borderColor={isActive || isCompleted ? 'border-primary-blue' : 'border-charcoal-outline'}
|
||||
bg={isCompleted ? 'bg-primary-blue' : isActive ? 'bg-primary-blue/20' : 'transparent'}
|
||||
transition
|
||||
>
|
||||
<Text
|
||||
size="xs"
|
||||
weight="bold"
|
||||
color={isCompleted ? 'text-white' : isActive ? 'text-primary-blue' : 'text-gray-500'}
|
||||
>
|
||||
{stepNumber}
|
||||
</Text>
|
||||
</Box>
|
||||
<Text
|
||||
size="sm"
|
||||
weight={isActive ? 'bold' : 'medium'}
|
||||
color={isActive ? 'text-white' : 'text-gray-500'}
|
||||
uppercase
|
||||
letterSpacing="wider"
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
</Stack>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -1,231 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { OnboardingCardAccent } from '@/ui/OnboardingCardAccent';
|
||||
import { OnboardingContainer } from '@/ui/OnboardingContainer';
|
||||
import { OnboardingError } from '@/ui/OnboardingError';
|
||||
import { OnboardingForm } from '@/ui/OnboardingForm';
|
||||
import { OnboardingHeader } from '@/ui/OnboardingHeader';
|
||||
import { OnboardingHelpText } from '@/ui/OnboardingHelpText';
|
||||
import { OnboardingNavigation } from '@/ui/OnboardingNavigation';
|
||||
import { PersonalInfo, PersonalInfoStep } from '@/components/onboarding/PersonalInfoStep';
|
||||
import { Card } from '@/ui/Card';
|
||||
import { StepIndicator } from '@/ui/StepIndicator';
|
||||
import { FormEvent, useState } from 'react';
|
||||
import { AvatarInfo, AvatarStep } from './AvatarStep';
|
||||
|
||||
type OnboardingStep = 1 | 2;
|
||||
|
||||
interface FormErrors {
|
||||
[key: string]: string | undefined;
|
||||
firstName?: string;
|
||||
lastName?: string;
|
||||
displayName?: string;
|
||||
country?: string;
|
||||
facePhoto?: string;
|
||||
avatar?: string;
|
||||
submit?: string;
|
||||
}
|
||||
|
||||
interface OnboardingWizardProps {
|
||||
onCompleted: () => void;
|
||||
onCompleteOnboarding: (data: {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
displayName: string;
|
||||
country: string;
|
||||
timezone?: string;
|
||||
}) => Promise<{ success: boolean; error?: string }>;
|
||||
onGenerateAvatars: (params: {
|
||||
facePhotoData: string;
|
||||
suitColor: string;
|
||||
}) => Promise<{ success: boolean; data?: { success: boolean; avatarUrls?: string[]; errorMessage?: string }; error?: string }>;
|
||||
}
|
||||
|
||||
export function OnboardingWizard({ onCompleted, onCompleteOnboarding, onGenerateAvatars }: OnboardingWizardProps) {
|
||||
const [step, setStep] = useState<OnboardingStep>(1);
|
||||
const [errors, setErrors] = useState<FormErrors>({});
|
||||
|
||||
// Form state
|
||||
const [personalInfo, setPersonalInfo] = useState<PersonalInfo>({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
displayName: '',
|
||||
country: '',
|
||||
timezone: '',
|
||||
});
|
||||
|
||||
const [avatarInfo, setAvatarInfo] = useState<AvatarInfo>({
|
||||
facePhoto: null,
|
||||
suitColor: 'blue',
|
||||
generatedAvatars: [],
|
||||
selectedAvatarIndex: null,
|
||||
isGenerating: false,
|
||||
isValidating: false,
|
||||
});
|
||||
|
||||
// Validation
|
||||
const validateStep = (currentStep: OnboardingStep): boolean => {
|
||||
const newErrors: FormErrors = {};
|
||||
|
||||
if (currentStep === 1) {
|
||||
if (!personalInfo.firstName.trim()) {
|
||||
newErrors.firstName = 'First name is required';
|
||||
}
|
||||
if (!personalInfo.lastName.trim()) {
|
||||
newErrors.lastName = 'Last name is required';
|
||||
}
|
||||
if (!personalInfo.displayName.trim()) {
|
||||
newErrors.displayName = 'Display name is required';
|
||||
} else if (personalInfo.displayName.length < 3) {
|
||||
newErrors.displayName = 'Display name must be at least 3 characters';
|
||||
}
|
||||
if (!personalInfo.country) {
|
||||
newErrors.country = 'Please select your country';
|
||||
}
|
||||
}
|
||||
|
||||
if (currentStep === 2) {
|
||||
if (!avatarInfo.facePhoto) {
|
||||
newErrors.facePhoto = 'Please upload a photo of your face';
|
||||
}
|
||||
if (avatarInfo.generatedAvatars.length > 0 && avatarInfo.selectedAvatarIndex === null) {
|
||||
newErrors.avatar = 'Please select one of the generated avatars';
|
||||
}
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
const isValid = validateStep(step);
|
||||
if (isValid && step < 2) {
|
||||
setStep((step + 1) as OnboardingStep);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
if (step > 1) {
|
||||
setStep((step - 1) as OnboardingStep);
|
||||
}
|
||||
};
|
||||
|
||||
const generateAvatars = async () => {
|
||||
if (!avatarInfo.facePhoto) {
|
||||
setErrors({ ...errors, facePhoto: 'Please upload a photo first' });
|
||||
return;
|
||||
}
|
||||
|
||||
setAvatarInfo(prev => ({ ...prev, isGenerating: true, generatedAvatars: [], selectedAvatarIndex: null }));
|
||||
const newErrors = { ...errors };
|
||||
delete newErrors.avatar;
|
||||
setErrors(newErrors);
|
||||
|
||||
try {
|
||||
const result = await onGenerateAvatars({
|
||||
facePhotoData: avatarInfo.facePhoto,
|
||||
suitColor: avatarInfo.suitColor,
|
||||
});
|
||||
|
||||
if (result.success && result.data?.success && result.data.avatarUrls) {
|
||||
setAvatarInfo(prev => ({
|
||||
...prev,
|
||||
generatedAvatars: result.data!.avatarUrls!,
|
||||
isGenerating: false,
|
||||
}));
|
||||
} else {
|
||||
setErrors(prev => ({ ...prev, avatar: result.data?.errorMessage || result.error || 'Failed to generate avatars' }));
|
||||
setAvatarInfo(prev => ({ ...prev, isGenerating: false }));
|
||||
}
|
||||
} catch (error) {
|
||||
setErrors(prev => ({ ...prev, avatar: 'Failed to generate avatars. Please try again.' }));
|
||||
setAvatarInfo(prev => ({ ...prev, isGenerating: false }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Validate step 2 - must have selected an avatar
|
||||
if (!validateStep(2)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (avatarInfo.selectedAvatarIndex === null) {
|
||||
setErrors({ ...errors, avatar: 'Please select an avatar' });
|
||||
return;
|
||||
}
|
||||
|
||||
setErrors({});
|
||||
|
||||
try {
|
||||
const result = await onCompleteOnboarding({
|
||||
firstName: personalInfo.firstName.trim(),
|
||||
lastName: personalInfo.lastName.trim(),
|
||||
displayName: personalInfo.displayName.trim(),
|
||||
country: personalInfo.country,
|
||||
timezone: personalInfo.timezone || undefined,
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
onCompleted();
|
||||
} else {
|
||||
setErrors({ submit: result.error || 'Failed to create profile' });
|
||||
}
|
||||
} catch (error) {
|
||||
setErrors({ submit: 'Failed to create profile' });
|
||||
}
|
||||
};
|
||||
|
||||
// Loading state comes from the mutations
|
||||
const loading = false; // This would be managed by the parent component
|
||||
|
||||
return (
|
||||
<OnboardingContainer>
|
||||
<OnboardingHeader
|
||||
title="Welcome to GridPilot"
|
||||
subtitle="Let us set up your racing profile"
|
||||
emoji="🏁"
|
||||
/>
|
||||
|
||||
<StepIndicator currentStep={step} />
|
||||
|
||||
<Card position="relative" overflow="hidden">
|
||||
<OnboardingCardAccent />
|
||||
|
||||
<OnboardingForm onSubmit={handleSubmit}>
|
||||
{step === 1 && (
|
||||
<PersonalInfoStep
|
||||
personalInfo={personalInfo}
|
||||
setPersonalInfo={setPersonalInfo}
|
||||
errors={errors}
|
||||
loading={loading}
|
||||
/>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<AvatarStep
|
||||
avatarInfo={avatarInfo}
|
||||
setAvatarInfo={setAvatarInfo}
|
||||
errors={errors}
|
||||
setErrors={setErrors}
|
||||
onGenerateAvatars={generateAvatars}
|
||||
/>
|
||||
)}
|
||||
|
||||
{errors.submit && <OnboardingError message={errors.submit} />}
|
||||
|
||||
<OnboardingNavigation
|
||||
onBack={handleBack}
|
||||
onNext={step < 2 ? handleNext : undefined}
|
||||
isLastStep={step === 2}
|
||||
canSubmit={avatarInfo.selectedAvatarIndex !== null}
|
||||
loading={loading}
|
||||
/>
|
||||
</OnboardingForm>
|
||||
</Card>
|
||||
|
||||
<OnboardingHelpText />
|
||||
</OnboardingContainer>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,5 @@
|
||||
import { User, Clock, ChevronRight } from 'lucide-react';
|
||||
import { Clock, ChevronRight } from 'lucide-react';
|
||||
import { Input } from '@/ui/Input';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { CountrySelect } from '@/components/shared/CountrySelect';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
@@ -44,15 +43,6 @@ const TIMEZONES = [
|
||||
export function PersonalInfoStep({ personalInfo, setPersonalInfo, errors, loading }: PersonalInfoStepProps) {
|
||||
return (
|
||||
<Stack gap={6}>
|
||||
<Box>
|
||||
<Heading level={2} icon={<Icon icon={User} size={5} color="text-primary-blue" />}>
|
||||
Personal Information
|
||||
</Heading>
|
||||
<Text size="sm" color="text-gray-400" block mt={1}>
|
||||
Tell us a bit about yourself
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Grid cols={2} gap={4}>
|
||||
<Box>
|
||||
<Text as="label" htmlFor="firstName" size="sm" weight="medium" color="text-gray-300" block mb={2}>
|
||||
|
||||
Reference in New Issue
Block a user