start creating actual wizard

package-lock.json

@@ -77658,4 +77658,4 @@
       "integrity": "sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw=="
     }
   }
-}
+}

src/components/Publish/FormPublish/FormActions.module.css

@@ -2,4 +2,6 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding-top: var(--spacer);
+  border-top: 1px solid var(--border-color);
 }

src/components/Publish/FormPublish/FormActions.tsx

@@ -1,34 +1,38 @@
-import React, { FormEvent, ReactElement } from 'react'
+import React, { ReactElement } from 'react'
 import { useOcean } from '@context/Ocean'
 import Button from '@shared/atoms/Button'
 import styles from './FormActions.module.css'
 import { FormikContextType, useFormikContext } from 'formik'
 import { FormPublishData } from '../_types'
 
-export default function FormActions({
-  isValid,
-  resetFormAndClearStorage
-}: {
-  isValid: boolean
-  resetFormAndClearStorage: (e: FormEvent<Element>) => void
-}): ReactElement {
+export default function FormActions({ step }: { step: number }): ReactElement {
   const { ocean, account } = useOcean()
-  const { status }: FormikContextType<FormPublishData> = useFormikContext()
+  const { status, isValid, setFieldValue }: FormikContextType<FormPublishData> =
+    useFormikContext()
+
+  function handleNext() {
+    setFieldValue('step', step + 1)
+  }
+
+  function handlePrevious() {
+    setFieldValue('step', step - 1)
+  }
 
   return (
     <footer className={styles.actions}>
-      {status !== 'empty' && (
-        <Button style="text" size="small" onClick={resetFormAndClearStorage}>
-          Reset Form
-        </Button>
-      )}
+      <Button onClick={handlePrevious}>Back</Button>
 
-      <Button
+      <Button style="primary" onClick={() => handleNext()}>
+        Continue
+      </Button>
+
+      {/* <Button
+        type="submit"
         style="primary"
-        disabled={!ocean || !account || !isValid || status === 'empty'}
+        disabled={!ocean || !account || !isValid}
       >
         Submit
-      </Button>
+      </Button> */}
     </footer>
   )
 }

src/components/Publish/FormPublish/index.module.css

@@ -1,5 +1,4 @@
 .form {
   composes: box from '@shared/atoms/Box.module.css';
   margin-bottom: var(--spacer);
-  padding: 0;
 }

src/components/Publish/FormPublish/index.tsx

@@ -1,10 +1,8 @@
-import React, { ReactElement, FormEvent } from 'react'
+import React, { ReactElement } from 'react'
 import { useFormikContext, Form, FormikContextType } from 'formik'
 import FormActions from './FormActions'
 import { FormPublishData } from '../_types'
 import styles from './index.module.css'
-import { initialValues } from '../_constants'
-import Tabs from '@shared/atoms/Tabs'
 import PricingFields from './Pricing'
 import Debug from '../Debug'
 import MetadataFields from './Metadata'
@@ -12,6 +10,20 @@ import ServicesFields from './Services'
 import content from '../../../../content/publish/form.json'
 import Preview from './Preview'
 
+function Steps({ step }: { step: number }) {
+  switch (step) {
+    case 1:
+      return <MetadataFields />
+    case 2:
+      return <ServicesFields />
+    case 3:
+      return <PricingFields />
+    case 4:
+      return <Preview />
+    default:
+  }
+}
+
 export default function FormPublish(): ReactElement {
   const { isValid, values, resetForm }: FormikContextType<FormPublishData> =
     useFormikContext()
@@ -24,70 +36,11 @@ export default function FormPublish(): ReactElement {
   //   // setSubmitting(false)
   // }, [setErrors, setTouched])
 
-  const resetFormAndClearStorage = (e: FormEvent<Element>) => {
-    e.preventDefault()
-
-    resetForm({
-      values: initialValues as FormPublishData,
-      status: 'empty'
-    })
-  }
-
-  const tabs = [
-    {
-      title: content.metadata.title,
-      content: (
-        <>
-          <MetadataFields />
-          <FormActions
-            isValid={isValid}
-            resetFormAndClearStorage={resetFormAndClearStorage}
-          />
-        </>
-      )
-    },
-    {
-      title: content.services.title,
-      content: (
-        <>
-          <ServicesFields />
-          <FormActions
-            isValid={isValid}
-            resetFormAndClearStorage={resetFormAndClearStorage}
-          />
-        </>
-      )
-    },
-    {
-      title: content.pricing.title,
-      content: (
-        <>
-          <PricingFields />
-          <FormActions
-            isValid={isValid}
-            resetFormAndClearStorage={resetFormAndClearStorage}
-          />
-        </>
-      )
-    },
-    {
-      title: content.preview.title,
-      content: (
-        <>
-          <Preview />
-          <FormActions
-            isValid={isValid}
-            resetFormAndClearStorage={resetFormAndClearStorage}
-          />
-        </>
-      )
-    }
-  ]
-
   return (
     <>
       <Form className={styles.form}>
-        <Tabs items={tabs} />
+        <Steps step={values.step} />
+        <FormActions step={values.step} />
       </Form>
       <Debug values={values} />
     </>

src/components/Publish/_constants.ts

@@ -4,6 +4,7 @@ import { allowDynamicPricing, allowFixedPricing } from '../../../app.config.js'
 import { FormPublishData } from './_types'
 
 export const initialValues: Partial<FormPublishData> = {
+  step: 1,
   type: 'dataset',
   metadata: {
     name: '',

src/components/Publish/_types.ts

@@ -14,6 +14,7 @@ export interface FormPublishService {
 }
 
 export interface FormPublishData {
+  step: number
   type: 'dataset' | 'algorithm'
   metadata: {
     name: string