fix(nc-gui): move onboarding flow in oss files

packages/nc-gui/components/auth/onboarding/Layout/ImagePreviewSection.vue

@@ -0,0 +1,149 @@
+<script lang="ts" setup>
+import gridImage from '~/assets/img/views/grid-with-sidebar.png'
+import galleryImage from '~/assets/img/views/gallery-with-sidebar.png'
+import kanbanImage from '~/assets/img/views/kanban-with-sidebar.png'
+import calendarImage from '~/assets/img/views/calendar-with-sidebar.png'
+
+import moscotWelcomeOrange from '~/assets/img/moscot/welcome-orange.png'
+import moscotWelcomeGreen from '~/assets/img/moscot/welcome-green.png'
+import moscotWelcomePurple from '~/assets/img/moscot/welcome-purple.png'
+
+import moscotCollaboration from '~/assets/img/moscot/collabe.png'
+
+import moscotGridTableOrange from '~/assets/img/moscot/grid-table-orange.png'
+import moscotGridTableBrand from '~/assets/img/moscot/grid-table-brand.png'
+
+const { questions, lastVisibleQuestionIndex, formState } = useOnboardingFlow()
+
+const currentQuestion = computed(() => questions.value[lastVisibleQuestionIndex.value]!)
+
+/**
+ * Next question is used to preload images to avoid flickering
+ */
+const nextQuestion = computed(() => questions.value[lastVisibleQuestionIndex.value + 1])
+
+const getRightSectionInfo = (question: OnboardingQuestionType): OnboardingRightSectionType => {
+  if (!question || !question.rightSection) {
+    return {
+      themeColor: 'orange',
+      moscot: 'moscotWelcomeOrange',
+      imageName: 'grid',
+    }
+  }
+
+  return ncIsFunction(question.rightSection) ? question.rightSection(formState.value) : question.rightSection
+}
+
+const rightSectionInfo = computed<OnboardingRightSectionType>(() => {
+  return getRightSectionInfo(currentQuestion.value)
+})
+
+const nextQuestionRightSectionInfo = computed<OnboardingRightSectionType | undefined>(() => {
+  return nextQuestion.value ? getRightSectionInfo(nextQuestion.value) : undefined
+})
+
+const bgColorClass = computed(() => {
+  return onboardingFlowColoursMapping[rightSectionInfo.value.themeColor || 'orange']?.lightBg
+})
+
+const getMoscotImage = (moscot: OnboardingRightSectionType['moscot']) => {
+  switch (moscot) {
+    case 'moscotWelcomeGreen':
+      return moscotWelcomeGreen
+    case 'moscotWelcomePurple':
+      return moscotWelcomePurple
+    case 'moscotCollaboration':
+      return moscotCollaboration
+    case 'moscotGridTableBrand':
+      return moscotGridTableBrand
+    case 'moscotGridTableOrange':
+      return moscotGridTableOrange
+    default:
+      return moscotWelcomeOrange
+  }
+}
+
+const moscotImage = computed(() => {
+  return getMoscotImage(rightSectionInfo.value.moscot)
+})
+
+const nextQuestionMoscotImage = computed(() => {
+  return nextQuestionRightSectionInfo.value ? getMoscotImage(nextQuestionRightSectionInfo.value.moscot) : undefined
+})
+
+const moscotImageSize = computed(() => {
+  switch (rightSectionInfo.value.moscot) {
+    case 'moscotCollaboration':
+      return {
+        height: '311px',
+        width: '536px',
+      }
+    case 'moscotGridTableBrand':
+    case 'moscotGridTableOrange':
+      return {
+        height: '358px',
+        width: '480px',
+      }
+    default:
+      return {
+        height: '233px',
+        width: '263px',
+      }
+  }
+})
+
+const getViewImage = (imageName: OnboardingRightSectionType['imageName']) => {
+  switch (imageName) {
+    case 'grid':
+      return gridImage
+    case 'gallery':
+      return galleryImage
+    case 'kanban':
+      return kanbanImage
+    case 'calendar':
+      return calendarImage
+    default:
+      return gridImage
+  }
+}
+
+const viewImage = computed(() => {
+  return getViewImage(rightSectionInfo.value.imageName)
+})
+
+const nextQuestionViewImage = computed(() => {
+  return nextQuestionRightSectionInfo.value ? getViewImage(nextQuestionRightSectionInfo.value.imageName) : undefined
+})
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center h-full relative" :class="[bgColorClass]">
+    <div class="nc-view-image-box" :style="{ backgroundImage: `url(${viewImage})` }"></div>
+    <div class="nc-view-image-box nc-moscot-image-box">
+      <div class="h-full w-full relative">
+        <img alt="moscot image" :src="moscotImage" class="nc-moscot-image" :style="moscotImageSize" />
+      </div>
+    </div>
+    <div class="hidden">
+      <!-- Pre-render images to avoid flickering -->
+      <img v-if="nextQuestionMoscotImage" alt="prerender moscot image" :src="nextQuestionMoscotImage" />
+      <img v-if="nextQuestionViewImage" alt="prerender view image" :src="nextQuestionViewImage" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.nc-view-image-box {
+  @apply border border-nc-border-gray-medium bg-cover bg-no-repeat overflow-hidden rounded-lg absolute left-[240px] top-[50%] transform -translate-y-1/2 h-[min(760px,80%)] w-[1351px];
+  box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.08);
+
+  &.nc-moscot-image-box {
+    @apply overflow-visible;
+    box-shadow: none;
+
+    .nc-moscot-image {
+      @apply absolute -left-[184px] -bottom-[50px] object-contain;
+    }
+  }
+}
+</style>