{stepperValue.label}
diff --git a/packages/frontend/src/components/VerticalStepper.tsx b/packages/frontend/src/components/VerticalStepper.tsx
new file mode 100644
index 0000000..203267c
--- /dev/null
+++ b/packages/frontend/src/components/VerticalStepper.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import * as CSS from 'csstype';
+
+//
+// Nav
+//
+export interface IStepDescription {
+ stepContent: () => JSX.Element;
+ stepStateColor?: string;
+ stepStatusCircleSize?: number;
+ onClickHandler?: () => void | undefined;
+}
+
+export interface IStepperNavProps {
+ steps: IStepDescription[];
+}
+
+export const StepperNav = (props: IStepperNavProps): JSX.Element => {
+ return (
+
+ );
+};
+
+//
+// Separator
+//
+const separatorStyles = {
+ height: '5vh',
+ width: 2,
+ border: '1px solid #E1E1E1',
+ background: '#E1E1E1',
+};
+
+export interface ISeparator {
+ height?: string | number;
+}
+
+export const Separator = ({ height }: ISeparator): JSX.Element => {
+ return
;
+};
+
+//
+// Step
+//
+export interface IStep {
+ stepContent: () => JSX.Element;
+ statusColor?: string;
+ statusCircleSize?: number;
+ onClickHandler?: (
+ event?: React.MouseEvent
,
+ ) => void | undefined;
+}
+
+const buttonContainerStyles: CSS.Properties = {
+ display: 'inline-flex',
+ flexWrap: 'wrap',
+ gap: '12px',
+ padding: '2px',
+ cursor: 'pointer',
+};
+
+export const Step = ({
+ stepContent,
+ statusColor,
+ statusCircleSize,
+ onClickHandler,
+}: IStep): JSX.Element => {
+ const circleStyles = {
+ borderRadius: statusCircleSize ?? 16,
+ width: statusCircleSize ?? 16,
+ height: statusCircleSize ?? 16,
+ border: '2px solid #E1E1E1',
+ background: statusColor ?? 'white',
+ };
+
+ const keyDownHandler = (event: React.KeyboardEvent) => {
+ if (event.keyCode === 13 || event.keyCode === 32) {
+ onClickHandler?.();
+ }
+ };
+
+ return (
+
+ );
+};
diff --git a/packages/frontend/src/components/projects/create/ConnectAccount.tsx b/packages/frontend/src/components/projects/create/ConnectAccount.tsx
index 7c4e1e4..ab90cb9 100644
--- a/packages/frontend/src/components/projects/create/ConnectAccount.tsx
+++ b/packages/frontend/src/components/projects/create/ConnectAccount.tsx
@@ -1,23 +1,23 @@
-import React from 'react';
-import OauthPopup from 'react-oauth-popup';
+import React from "react";
+import OauthPopup from "react-oauth-popup";
-import { useGQLClient } from '../../../context/GQLClientContext';
-import { Button } from 'components/shared/Button';
+import { useGQLClient } from "../../../context/GQLClientContext";
+import { Button } from "../../shared/Button";
import {
GitIcon,
EllipsesIcon,
SnowballIcon,
GithubIcon,
GitTeaIcon,
-} from 'components/shared/CustomIcon';
-import { useToast } from 'components/shared/Toast';
-import { IconWithFrame } from 'components/shared/IconWithFrame';
-import { Heading } from 'components/shared/Heading';
-import { MockConnectGitCard } from './MockConnectGitCard';
+} from "../../shared/CustomIcon";
+import { useToast } from "../../shared/Toast";
+import { IconWithFrame } from "../../shared/IconWithFrame";
+import { Heading } from "../../shared/Heading";
+import { MockConnectGitCard } from "./MockConnectGitCard";
-const SCOPES = 'repo user';
+const SCOPES = "repo user";
const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?client_id=${
- process.env.REACT_APP_GITHUB_CLIENT_ID
+ import.meta.env.VITE_GITHUB_CLIENT_ID
}&scope=${encodeURIComponent(SCOPES)}`;
interface ConnectAccountInterface {
@@ -39,9 +39,9 @@ const ConnectAccount: React.FC = ({
onToken(token);
toast({
onDismiss: dismiss,
- id: 'connected-to-github',
- title: 'The Git account is connected.',
- variant: 'success',
+ id: "connected-to-github",
+ title: "The Git account is connected.",
+ variant: "success",
});
};
diff --git a/packages/frontend/src/components/projects/create/ConnectAccountTabPanel.tsx b/packages/frontend/src/components/projects/create/ConnectAccountTabPanel.tsx
index f770652..7a9565b 100644
--- a/packages/frontend/src/components/projects/create/ConnectAccountTabPanel.tsx
+++ b/packages/frontend/src/components/projects/create/ConnectAccountTabPanel.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
-import { Tabs } from 'components/shared/Tabs';
+import { Tabs } from "components/shared/Tabs";
const ConnectAccountTabPanel: React.FC = () => {
return (
@@ -11,8 +11,8 @@ const ConnectAccountTabPanel: React.FC = () => {
>
{[
- { title: 'Import a repository' },
- { title: 'Start with a template' },
+ { title: "Import a repository" },
+ { title: "Start with a template" },
].map(({ title }, index) => (
{title}
diff --git a/packages/frontend/src/components/projects/create/Deploy.tsx b/packages/frontend/src/components/projects/create/Deploy.tsx
index f443d5e..8482b78 100644
--- a/packages/frontend/src/components/projects/create/Deploy.tsx
+++ b/packages/frontend/src/components/projects/create/Deploy.tsx
@@ -1,17 +1,17 @@
-import React, { useCallback, useEffect } from 'react';
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import React, { useCallback, useEffect } from "react";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
-import { DeployStep, DeployStatus } from './DeployStep';
-import { Stopwatch, setStopWatchOffset } from 'components/StopWatch';
-import { Heading } from 'components/shared/Heading';
-import { Button } from 'components/shared/Button';
-import { ClockOutlineIcon, WarningIcon } from 'components/shared/CustomIcon';
-import { CancelDeploymentDialog } from 'components/projects/Dialog/CancelDeploymentDialog';
+import { DeployStep, DeployStatus } from "./DeployStep";
+import { Stopwatch, setStopWatchOffset } from "../../StopWatch";
+import { Heading } from "../../shared/Heading";
+import { Button } from "../../shared/Button";
+import { ClockOutlineIcon, WarningIcon } from "../../shared/CustomIcon";
+import { CancelDeploymentDialog } from "../../projects/Dialog/CancelDeploymentDialog";
const TIMEOUT_DURATION = 5000;
const Deploy = () => {
const [searchParams] = useSearchParams();
- const projectId = searchParams.get('projectId');
+ const projectId = searchParams.get("projectId");
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(!open);
diff --git a/packages/frontend/src/components/projects/create/DeployStep.tsx b/packages/frontend/src/components/projects/create/DeployStep.tsx
index de78f78..8e750e2 100644
--- a/packages/frontend/src/components/projects/create/DeployStep.tsx
+++ b/packages/frontend/src/components/projects/create/DeployStep.tsx
@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
-import { Collapse } from '@material-tailwind/react';
+import { Collapse } from "@material-tailwind/react";
-import { Stopwatch, setStopWatchOffset } from '../../StopWatch';
-import FormatMillisecond from '../../FormatMilliSecond';
-import processLogs from '../../../assets/process-logs.json';
-import { cn } from 'utils/classnames';
+import { Stopwatch, setStopWatchOffset } from "../../StopWatch";
+import FormatMillisecond from "../../FormatMilliSecond";
+import processLogs from "../../../assets/process-logs.json";
+import { cn } from "utils/classnames";
import {
CheckRoundFilledIcon,
ClockOutlineIcon,
@@ -13,15 +13,15 @@ import {
LoaderIcon,
MinusCircleIcon,
PlusIcon,
-} from 'components/shared/CustomIcon';
-import { Button } from 'components/shared/Button';
-import { useToast } from 'components/shared/Toast';
-import { useIntersectionObserver } from 'usehooks-ts';
+} from "components/shared/CustomIcon";
+import { Button } from "components/shared/Button";
+import { useToast } from "components/shared/Toast";
+import { useIntersectionObserver } from "usehooks-ts";
enum DeployStatus {
- PROCESSING = 'progress',
- COMPLETE = 'complete',
- NOT_STARTED = 'notStarted',
+ PROCESSING = "progress",
+ COMPLETE = "complete",
+ NOT_STARTED = "notStarted",
}
interface DeployStepsProps {
@@ -52,8 +52,8 @@ const DeployStep = ({
{/* Collapisble trigger */}