refactor: revamp the importers & exporters systems to be reused (#3425)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>

packages/hoppscotch-common/src/composables/lens-actions.ts

@@ -155,11 +155,10 @@ export function useResponseBody(response: HoppRESTResponse): {
     )
       return ""
     if (typeof response.body === "string") return response.body
-    else {
-      const res = new TextDecoder("utf-8").decode(response.body)
-      // HACK: Temporary trailing null character issue from the extension fix
-      return res.replace(/\0+$/, "")
-    }
+
+    const res = new TextDecoder("utf-8").decode(response.body)
+    // HACK: Temporary trailing null character issue from the extension fix
+    return res.replace(/\0+$/, "")
   })
   return {
     responseBodyText,

packages/hoppscotch-common/src/composables/step-components.ts

@@ -0,0 +1,69 @@
+import { computed, defineComponent, ref } from "vue"
+
+export function useSteps() {
+  type Step = ReturnType<typeof defineStep>
+
+  const steps: Step[] = []
+
+  const currentStepIndex = ref(0)
+
+  const currentStep = computed(() => {
+    return steps[currentStepIndex.value]
+  })
+
+  const backHistoryIndexes = ref([0])
+
+  const hasPreviousStep = computed(() => {
+    return currentStepIndex.value > 0
+  })
+
+  const addStep = (step: Step) => {
+    steps.push(step)
+  }
+
+  const goToNextStep = () => {
+    currentStepIndex.value++
+    backHistoryIndexes.value.push(currentStepIndex.value)
+  }
+
+  const goToStep = (stepId: string) => {
+    currentStepIndex.value = steps.findIndex((step) => step.id === stepId)
+    backHistoryIndexes.value.push(currentStepIndex.value)
+  }
+
+  const goToPreviousStep = () => {
+    if (backHistoryIndexes.value.length !== 1) {
+      backHistoryIndexes.value.pop()
+      currentStepIndex.value =
+        backHistoryIndexes.value[backHistoryIndexes.value.length - 1]
+    }
+  }
+
+  return {
+    steps,
+    currentStep,
+    addStep,
+    goToPreviousStep,
+    goToNextStep,
+    goToStep,
+    hasPreviousStep,
+  }
+}
+
+export function defineStep<
+  StepComponent extends ReturnType<typeof defineComponent>,
+>(
+  id: string,
+  component: StepComponent,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  props: () => InstanceType<StepComponent>["$props"]
+) {
+  const step = {
+    id,
+    component,
+    props,
+  }
+
+  return step
+}