Merge pull request #16 from oasisprotocol/mz/createViews

Setup creation flow

Author: buberdds

src/components/Layout/Header.tsx

@@ -1,5 +1,6 @@
 import { useState, type FC } from 'react';
-import { Link, NavLink } from 'react-router-dom';
+import { Link, NavLink, useNavigate } from 'react-router-dom';
+import { useCreate } from '../../pages/CreateApp/useCreate';
 import Logotype from './logo.svg';
 import { RainbowKitConnectButton } from '../RainbowKitConnectButton';
 import { Menu, Plus } from 'lucide-react';
@@ -20,6 +21,15 @@ export const Header: FC = () => {
   const isMobile = useIsMobile();
   const { isConnected } = useAccount();
   const [isOpen, setIsOpen] = useState(false);
+  const navigate = useNavigate();
+  const createContext = useCreate();
+
+  const handleCreateClick = () => {
+    if (createContext) {
+      createContext.resetStep();
+    }
+    navigate('/create');
+  };
 
   return (
     <div className="w-full flex justify-between items-center">
@@ -30,11 +40,9 @@ export const Header: FC = () => {
       <div className="hidden md:flex">
         <div className="flex items-center gap-4">
           {isConnected && (
-            <Button asChild>
-              <Link to="/create">
-                Create
-                <Plus className="ml-2 h-4 w-4" />
-              </Link>
+            <Button onClick={handleCreateClick}>
+              Create
+              <Plus className="ml-2 h-4 w-4" />
             </Button>
           )}
           <RainbowKitConnectButton />

src/main.tsx

@@ -2,6 +2,7 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { WagmiProvider } from 'wagmi';
+import { CreateContextProvider } from './pages/CreateApp/CreateContextProvider';
 import { Landing } from './pages/Landing';
 import { Dashboard } from './pages/Dashboard';
 import { MyApps } from './pages/Dashboard/MyApps';
@@ -45,20 +46,22 @@ createRoot(document.getElementById('root')!).render(
           )}
         >
           <BrowserRouter>
-            <Routes>
-              <Route path="/" element={<Landing />} />
-              <Route path="/dashboard" element={<MainLayout />}>
-                <Route index element={<Dashboard />} />
-                <Route path="apps" element={<MyApps />} />
-                <Route path="apps/:id" element={<AppDetails />} />
-                <Route path="machines" element={<Machines />} />
-                <Route path="machines/:id" element={<MachinesDetails />} />
-              </Route>
-              <Route path="/create" element={<Create />} />
-              <Route path="/explore" element={<MainLayout />}>
-                <Route index element={<Explore />} />
-              </Route>
-            </Routes>
+            <CreateContextProvider>
+              <Routes>
+                <Route path="/" element={<Landing />} />
+                <Route path="/dashboard" element={<MainLayout />}>
+                  <Route index element={<Dashboard />} />
+                  <Route path="apps" element={<MyApps />} />
+                  <Route path="apps/:id" element={<AppDetails />} />
+                  <Route path="machines" element={<Machines />} />
+                  <Route path="machines/:id" element={<MachinesDetails />} />
+                </Route>
+                <Route path="/create" element={<Create />}></Route>
+                <Route path="/explore" element={<MainLayout />}>
+                  <Route index element={<Explore />} />
+                </Route>
+              </Routes>
+            </CreateContextProvider>
           </BrowserRouter>
         </RainbowKitProvider>
       </QueryClientProvider>

src/pages/CreateApp/AgentStep.tsx

@@ -0,0 +1,23 @@
+import { type FC } from 'react';
+import { CreateLayout } from './CreateLayout';
+import { CreateFormHeader } from './CreateFormHeader';
+import { CreateFormNavigation } from './CreateFormNavigation';
+
+type AgentStepProps = {
+  handleNext: () => void;
+  handleBack: () => void;
+};
+
+export const AgentStep: FC<AgentStepProps> = ({ handleNext, handleBack }) => {
+  return (
+    <CreateLayout currentStep={2}>
+      <div className="max-w-md mx-auto px-8 py-12 flex flex-col gap-8 items-center">
+        <CreateFormHeader
+          title="Agent Specific Stuff"
+          description="At varius sit sit netus at integer vitae posuere id. Nulla imperdiet vestibulum amet ultrices egestas. Bibendum sed integer ac eget."
+        />
+        <CreateFormNavigation handleNext={handleNext} handleBack={handleBack} />
+      </div>
+    </CreateLayout>
+  );
+};

src/pages/CreateApp/BootstrapStep.tsx

@@ -0,0 +1,28 @@
+import { type FC } from 'react';
+import { Layout } from '@oasisprotocol/ui-library/src/components/ui/layout';
+import { Header } from '../../components/Layout/Header';
+import { Footer } from '../../components/Layout/Footer';
+import Bootstrap from './images/bootstrap.png';
+
+export const BootstrapStep: FC = () => {
+  return (
+    <Layout headerContent={<Header />} footerContent={<Footer />}>
+      <div className="w-full px-8 py-12 flex flex-col items-center justify-center">
+        <img
+          src={Bootstrap}
+          alt="Bootstrap"
+          className="w-[250px] h-auto mb-8"
+        />
+        <div className="mb-8">
+          <h1 className="text-2xl font-white font-bold mb-2 text-center">
+            ROFL App Registration...
+          </h1>
+          <p className="text-muted-foreground text-md max-w-md text-center">
+            At varius sit sit netus at integer vitae posuere id. Nulla imperdiet
+            vestibulum amet ultrices egestas. Bibendum sed integer ac eget.
+          </p>
+        </div>
+      </div>
+    </Layout>
+  );
+};

src/pages/CreateApp/BuildStep.tsx

@@ -0,0 +1,23 @@
+import { type FC } from 'react';
+import { CreateLayout } from './CreateLayout';
+import { CreateFormHeader } from './CreateFormHeader';
+import { CreateFormNavigation } from './CreateFormNavigation';
+
+type AgentStepProps = {
+  handleNext: () => void;
+  handleBack: () => void;
+};
+
+export const BuildStep: FC<AgentStepProps> = ({ handleNext, handleBack }) => {
+  return (
+    <CreateLayout currentStep={3}>
+      <div className="max-w-md mx-auto px-8 py-12 flex flex-col gap-8 items-center">
+        <CreateFormHeader
+          title="Build and Deploy"
+          description="At varius sit sit netus at integer vitae posuere id. Nulla imperdiet vestibulum amet ultrices egestas. Bibendum sed integer ac eget."
+        />
+        <CreateFormNavigation handleNext={handleNext} handleBack={handleBack} />
+      </div>
+    </CreateLayout>
+  );
+};

src/pages/CreateApp/CreateContext.tsx

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+type CreateContextType = {
+  currentStep: number;
+  setCurrentStep: (step: number) => void;
+  resetStep: () => void;
+};
+
+export const CreateContext = createContext<CreateContextType | undefined>(
+  undefined
+);

src/pages/CreateApp/CreateContextProvider.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import { useState } from 'react';
+import { CreateContext } from './CreateContext';
+
+export const CreateContextProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const [currentStep, setCurrentStep] = useState(0);
+
+  const resetStep = () => {
+    setCurrentStep(0);
+  };
+
+  return (
+    <CreateContext.Provider value={{ currentStep, setCurrentStep, resetStep }}>
+      {children}
+    </CreateContext.Provider>
+  );
+};

src/pages/CreateApp/CreateFormHeader.tsx

@@ -0,0 +1,18 @@
+import { type FC } from 'react';
+
+type CreateFormHeaderProps = {
+  title: string;
+  description: string;
+};
+
+export const CreateFormHeader: FC<CreateFormHeaderProps> = ({
+  title,
+  description,
+}) => {
+  return (
+    <div className="mb-8">
+      <h1 className="text-2xl font-white font-bold mb-2">{title}</h1>
+      <p className="text-muted-foreground text-md max-w-md">{description}</p>
+    </div>
+  );
+};

src/pages/CreateApp/CreateFormNavigation.tsx

@@ -0,0 +1,25 @@
+import { type FC } from 'react';
+import { Button } from '@oasisprotocol/ui-library/src/components/ui/button';
+
+type CreateFormNavigationProps = {
+  handleNext: () => void;
+  handleBack?: () => void;
+};
+
+export const CreateFormNavigation: FC<CreateFormNavigationProps> = ({
+  handleNext,
+  handleBack,
+}) => {
+  return (
+    <div className="flex gap-4 w-full">
+      {handleBack && (
+        <Button className="flex-1" variant="secondary" onClick={handleBack}>
+          Back
+        </Button>
+      )}
+      <Button className="flex-1" onClick={handleNext}>
+        Continue
+      </Button>
+    </div>
+  );
+};

src/pages/CreateApp/CreateLayout.tsx

@@ -0,0 +1,63 @@
+import type { FC, ReactNode } from 'react';
+import { Header } from '../../components/Layout/Header';
+import { Footer } from '../../components/Layout/Footer';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarMenu,
+  SidebarGroup,
+} from '@oasisprotocol/ui-library/src/components/ui/sidebar';
+import { Layout } from '@oasisprotocol/ui-library/src/components/ui/layout';
+import { SidebarItemLabel } from './SidebarItemLabel';
+
+type CreateLayoutProps = {
+  children: ReactNode;
+  currentStep?: number;
+};
+
+export const CreateLayout: FC<CreateLayoutProps> = ({
+  children,
+  currentStep = 1,
+}) => {
+  // Steps are 0-indexed in the index.tsx file, but we're starting from 1 here
+  // because the first step (Template) has its own layout
+  const sidebarItems = [
+    { label: 'Metadata Input', active: currentStep === 1 },
+    { label: 'Agent Specific Stuff', active: currentStep === 2 },
+    { label: 'Build and Deploy', active: currentStep === 3 },
+    { label: 'Payment', active: currentStep === 4 },
+  ];
+
+  return (
+    <Layout
+      headerContent={<Header />}
+      footerContent={<Footer />}
+      sidebar={
+        <Sidebar collapsible="icon" className="border-r !static !h-full p-6">
+          <SidebarContent className="bg-sidebar-background">
+            <SidebarGroup>
+              <SidebarMenu>
+                <span className="text-xl font-semibold text-white">
+                  ROFL App Creation
+                </span>
+                <span className="text-xs text-muted-foreground pb-8">
+                  with TEMPLATE_NAME
+                </span>
+                {sidebarItems.map((item, index) => (
+                  <SidebarItemLabel
+                    active={item.active}
+                    key={item.label}
+                    index={index}
+                    label={item.label}
+                  />
+                ))}
+              </SidebarMenu>
+            </SidebarGroup>
+          </SidebarContent>
+        </Sidebar>
+      }
+    >
+      <div className="flex-1 p-5 h-5/6">{children}</div>
+    </Layout>
+  );
+};