basic setup flow components done

packages/web/components/Link.tsx

@@ -2,7 +2,8 @@ import { Link } from '@metafam/ds';
 import NextLink, { LinkProps } from 'next/link';
 import React from 'react';
 
-type Props = Omit<React.ComponentProps<typeof Link>, keyof LinkProps> & LinkProps;
+type Props = Omit<React.ComponentProps<typeof Link>, keyof LinkProps> &
+  LinkProps;
 
 export const MetaLink: React.FC<Props> = ({
   children,

packages/web/components/SetupAvatar.tsx

@@ -0,0 +1,24 @@
+import { MetaButton, MetaHeading } from '@metafam/ds';
+import React, { useEffect } from 'react';
+
+import { FlexContainer } from './Container';
+
+interface Props {
+  setStep: React.Dispatch<React.SetStateAction<number>>;
+  setProgress: React.Dispatch<React.SetStateAction<number>>;
+}
+
+export const SetupAvatar: React.FC<Props> = ({ setStep, setProgress }) => {
+  useEffect(() => {
+    setProgress(1);
+  }, [setProgress]);
+
+  return (
+    <FlexContainer flex={1}>
+      <MetaHeading mb={10}>Dress up your Avatar</MetaHeading>
+      <MetaButton onClick={() => setStep((_step) => (_step + 1) % 4)}>
+        Next Step
+      </MetaButton>
+    </FlexContainer>
+  );
+};

packages/web/components/SetupDone.tsx

@@ -0,0 +1,16 @@
+import { MetaButton, MetaHeading } from '@metafam/ds';
+import NextLink from 'next/link';
+import React from 'react';
+
+import { FlexContainer } from './Container';
+
+export const SetupDone: React.FC = () => {
+  return (
+    <FlexContainer flex={1}>
+      <MetaHeading mb={10}>Game on!</MetaHeading>
+      <NextLink href="/">
+        <MetaButton>Play</MetaButton>
+      </NextLink>
+    </FlexContainer>
+  );
+};

packages/web/components/SetupHeader.tsx

@@ -19,20 +19,24 @@ export const SetupHeader: React.FC<HeaderProps> = ({ step, progress }) => (
     <StepProgress
       title="1. Professional Profile"
       isActive={step === 0}
-      progress={progress}
+      isDone={step > 0}
+      progress={step > 0 ? 1 : progress}
     />
     <StepProgress
       title="2. About You"
       isActive={step === 1}
-      progress={progress}
+      isDone={step > 1}
+      progress={step > 1 ? 1 : progress}
     />
     <StepProgress
       title="3. Choose Your Avatar"
+      isDone={step > 2}
       isActive={step === 2}
-      progress={progress}
+      progress={step > 2 ? 1 : progress}
     />
     <StepProgress
       title="4. Start Playing"
+      isDone={false}
       isActive={step === 3}
       progress={progress}
     />
@@ -44,12 +48,14 @@ export const SetupHeader: React.FC<HeaderProps> = ({ step, progress }) => (
 
 interface StepProps {
   title: string;
+  isDone: boolean;
   isActive: boolean;
   progress: number;
 }
 
 export const StepProgress: React.FC<StepProps> = ({
   title,
+  isDone,
   isActive,
   progress,
 }) => (
@@ -73,7 +79,9 @@ export const StepProgress: React.FC<StepProps> = ({
       borderRadius="0.25rem"
       overflow="hidden"
     >
-      {isActive && <Box bgColor="purple.400" w={`${progress * 100}%`} />}
+      {(isActive || isDone) && (
+        <Box bgColor="purple.400" w={`${progress * 100}%`} />
+      )}
     </Flex>
     {isActive && (
       <Image

packages/web/components/SetupPersonality.tsx

@@ -0,0 +1,41 @@
+import { MetaButton, MetaHeading } from '@metafam/ds';
+import React, { useEffect, useState } from 'react';
+
+import { FlexContainer } from './Container';
+
+interface Props {
+  setStep: React.Dispatch<React.SetStateAction<number>>;
+  setProgress: React.Dispatch<React.SetStateAction<number>>;
+}
+
+export const SetupPersonality: React.FC<Props> = ({ setStep, setProgress }) => {
+  const numProgressSteps = 2;
+  const [progressStep, setProgressStep] = useState<number>(0);
+
+  useEffect(() => {
+    const progressValue = (progressStep + 1) / numProgressSteps;
+    setProgress(progressValue);
+  }, [progressStep, setProgress]);
+
+  return (
+    <FlexContainer flex={1}>
+      {progressStep === 0 && (
+        <MetaHeading mb={10}>Personality type</MetaHeading>
+      )}
+      {progressStep === 1 && <MetaHeading mb={10}>Player type</MetaHeading>}
+      <MetaButton
+        mb={8}
+        onClick={() =>
+          setProgressStep(
+            (_progressStep) => (_progressStep + 1) % numProgressSteps,
+          )
+        }
+      >
+        Progress
+      </MetaButton>
+      <MetaButton onClick={() => setStep((_step) => (_step + 1) % 4)}>
+        Next Step
+      </MetaButton>
+    </FlexContainer>
+  );
+};

packages/web/components/SetupProfession.tsx

@@ -0,0 +1,42 @@
+import { MetaButton, MetaHeading } from '@metafam/ds';
+import React, { useEffect, useState } from 'react';
+
+import { FlexContainer } from './Container';
+
+interface Props {
+  setStep: React.Dispatch<React.SetStateAction<number>>;
+  setProgress: React.Dispatch<React.SetStateAction<number>>;
+}
+
+export const SetupProfession: React.FC<Props> = ({ setStep, setProgress }) => {
+  const numProgressSteps = 3;
+  const [progressStep, setProgressStep] = useState<number>(0);
+
+  useEffect(() => {
+    const progressValue = (progressStep + 1) / numProgressSteps;
+    setProgress(progressValue);
+  }, [progressStep, setProgress]);
+
+  return (
+    <FlexContainer flex={1}>
+      {progressStep === 0 && (
+        <MetaHeading mb={10}>What are your superpowers?</MetaHeading>
+      )}
+      {progressStep === 1 && <MetaHeading mb={10}>Availability</MetaHeading>}
+      {progressStep === 2 && <MetaHeading mb={10}>Memberships</MetaHeading>}
+      <MetaButton
+        mb={8}
+        onClick={() =>
+          setProgressStep(
+            (_progressStep) => (_progressStep + 1) % numProgressSteps,
+          )
+        }
+      >
+        Progress
+      </MetaButton>
+      <MetaButton onClick={() => setStep((_step) => (_step + 1) % 4)}>
+        Next Step
+      </MetaButton>
+    </FlexContainer>
+  );
+};

packages/web/pages/profile/setup.tsx

@@ -1,48 +1,31 @@
-import { Flex, Input, MetaButton, MetaHeading, Text } from '@metafam/ds';
 import React, { useState } from 'react';
 
-import { FlexContainer, PageContainer } from '../../components/Container';
+import { PageContainer } from '../../components/Container';
+import { SetupAvatar } from '../../components/SetupAvatar';
+import { SetupDone } from '../../components/SetupDone';
 import { SetupHeader } from '../../components/SetupHeader';
+import { SetupPersonality } from '../../components/SetupPersonality';
+import { SetupProfession } from '../../components/SetupProfession';
 import BackgroundImage from '../../public/images/profile-background.jpg';
 
 const ProfileSetup: React.FC = () => {
-  const [step, setStep] = useState(0);
-  const [progress, setProgress] = useState(0.33);
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { value, min, max } = event.currentTarget;
-    const progressValue =
-      Math.max(Number(min), Math.min(Number(max), Number(value))) / Number(max);
-    setProgress(progressValue);
-  };
+  const [step, setStep] = useState<number>(0);
+  const [progress, setProgress] = useState<number>(0.33);
 
   return (
     <PageContainer backgroundImage={`url(${BackgroundImage})`}>
-      <SetupHeader step={step} progress={progress} />
-
-      {/* SAMPLE CODE TO TEST PROGRESS/STEPS */}
-      {/* * * * * * * STARTS HERE * * * * *  */}
-      <FlexContainer flex={1}>
-        <MetaHeading mb={10}>What are your superpowers?</MetaHeading>
-        <Flex align="center" mb={10}>
-          <Text fontFamily="mono" mr={4}>
-            Progress:
-          </Text>
-          <Input
-            color="black"
-            min={0}
-            max={100}
-            type="number"
-            value={Math.floor(progress * 100)}
-            onChange={handleChange}
-          />
-        </Flex>
-        <MetaButton onClick={() => setStep(_step => (_step + 1) % 4)}>
-          Next Step
-        </MetaButton>
-      </FlexContainer>
-      {/* * * * * * * * ENDS HERE * * * * *  */}
+      {step % 4 !== 3 && <SetupHeader step={step} progress={progress} />}
 
+      {step === 0 && (
+        <SetupProfession setStep={setStep} setProgress={setProgress} />
+      )}
+      {step === 1 && (
+        <SetupPersonality setStep={setStep} setProgress={setProgress} />
+      )}
+      {step === 2 && (
+        <SetupAvatar setStep={setStep} setProgress={setProgress} />
+      )}
+      {step === 3 && <SetupDone />}
     </PageContainer>
   );
 };