Maintenance: Mobile - Move app-specific code into shared context when it makes sense

app/frontend/apps/mobile/components/CommonStepper/CommonStepper.story.vue

@@ -2,11 +2,11 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import type { FormStep } from '#shared/components/Form/types.ts'
 import CommonStepper from './CommonStepper.vue'
-import type { CommonStepperStep } from './types.ts'
 
 const modelValue = ref('step1')
-const steps: Record<string, CommonStepperStep> = {
+const steps: Record<string, FormStep> = {
   step1: {
     label: '1',
     order: 1,

app/frontend/apps/mobile/components/CommonStepper/CommonStepper.vue

@@ -2,12 +2,12 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { CommonStepperStep as Step } from './types.ts'
+import type { FormStep } from '#shared/components/Form/types.ts'
 import CommonStepperStep from './CommonStepperStep.vue'
 
 interface Props {
   modelValue: string
-  steps: Record<string, Step>
+  steps: Record<string, FormStep>
 }
 
 const props = defineProps<Props>()

app/frontend/apps/mobile/components/CommonStepper/__tests__/CommonStepper.spec.ts

@@ -1,14 +1,14 @@
 // Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
 
 import { renderComponent } from '#tests/support/components/index.ts'
+import type { FormStep } from '#shared/components/Form/types.ts'
 import { ref } from 'vue'
 import CommonStepper from '../CommonStepper.vue'
-import type { CommonStepperStep } from '../types.ts'
 
 describe('stepper component', () => {
   test('renders valid steps', async () => {
     const modelValue = ref('step1')
-    const steps: Record<string, CommonStepperStep> = {
+    const steps: Record<string, FormStep> = {
       step1: {
         label: '1',
         order: 1,

app/frontend/apps/mobile/components/CommonStepper/index.ts

@@ -1,3 +0,0 @@
-// Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
-
-export type { CommonStepperStep } from './types.ts'

app/frontend/apps/mobile/components/CommonStepper/types.ts

@@ -1,10 +0,0 @@
-// Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
-
-export interface CommonStepperStep {
-  label: string
-  order: number
-  errorCount: number
-  valid: boolean
-  disabled: boolean
-  completed: boolean
-}

app/frontend/apps/mobile/pages/error/views/Error.vue

@@ -3,7 +3,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import CommonBackButton from '#mobile/components/CommonBackButton/CommonBackButton.vue'
-import { errorOptions } from '#mobile/router/error.ts'
+import { errorOptions } from '#shared/router/error.ts'
 import { ErrorStatusCodes } from '#shared/types/error.ts'
 
 const errorImage = computed(() => {

app/frontend/apps/mobile/pages/ticket/views/TicketCreate.vue

@@ -35,7 +35,7 @@ import { populateEditorNewLines } from '#shared/components/Form/fields/FieldEdit
 import CommonStepper from '#mobile/components/CommonStepper/CommonStepper.vue'
 import CommonButton from '#mobile/components/CommonButton/CommonButton.vue'
 import CommonBackButton from '#mobile/components/CommonBackButton/CommonBackButton.vue'
-import { errorOptions } from '#mobile/router/error.ts'
+import { errorOptions } from '#shared/router/error.ts'
 import { useConfirmationDialog } from '#mobile/components/CommonConfirmation/useConfirmationDialog.ts'
 import {
   useTicketDuplicateDetectionHandler,

app/frontend/apps/mobile/router/index.ts

@@ -4,8 +4,8 @@ import type { App } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
 import mainInitializeRouter from '#shared/router/index.ts'
 import type { InitializeAppRouter, RoutesModule } from '#shared/types/router.ts'
+import { errorAfterGuard } from '#shared/router/error.ts'
 import transitionViewGuard from './guards/before/viewTransition.ts'
-import { errorAfterGuard } from './error.ts'
 
 const routeModules: Record<string, RoutesModule> = import.meta.glob(
   ['../pages/*/routes.ts', '../pages/*/routes/*.ts'],

app/frontend/shared/components/Form/types.ts

@@ -234,3 +234,12 @@ export interface FormRef {
     groupNode?: FormKitNode,
   ): void
 }
+
+export interface FormStep {
+  label: string
+  order: number
+  errorCount: number
+  valid: boolean
+  disabled: boolean
+  completed: boolean
+}

app/frontend/shared/components/Form/useMultiStepForm.ts

@@ -4,7 +4,7 @@ import { createMessage, getNode } from '@formkit/core'
 import type { FormKitNode } from '@formkit/core'
 import { computed, toRef, ref, reactive, watch } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
-import type { CommonStepperStep } from '#mobile/components/CommonStepper/index.ts'
+import type { FormStep } from './types.ts'
 
 interface InternalMultiFormSteps {
   label: string
@@ -95,8 +95,8 @@ export const useMultiStepForm = (
     return false
   }
 
-  const allSteps = computed<Record<string, CommonStepperStep>>(() => {
-    const mappedSteps: Record<string, CommonStepperStep> = {}
+  const allSteps = computed<Record<string, FormStep>>(() => {
+    const mappedSteps: Record<string, FormStep> = {}
 
     stepNames.value.forEach((stepName) => {
       const alreadyVisisted = visitedSteps.value.includes(stepName)