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

packages/nc-gui/components/auth/onboarding/Question/Option/Icon.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+interface Props {
+  option: OnboardingOptionType
+  iconSize?: OnboardingQuestionType['iconSize']
+}
+
+const props = withDefaults(defineProps<Props>(), {})
+
+const { option, iconSize } = toRefs(props)
+
+const showIconMapIcon = computed(() => {
+  return (!option.value.iconType || option.value.iconType === 'iconMap') && option.value.icon
+})
+
+const shouldShowIcon = computed(() => {
+  return option.value.iconType || (!option.value.iconType && option.value.icon)
+})
+
+const iconColor = computed(() => {
+  return option.value.iconColor ? onboardingFlowColoursMapping[option.value.iconColor]?.content ?? '' : ''
+})
+
+const bgColorClass = computed(() => {
+  return option.value.iconColor ? onboardingFlowColoursMapping[option.value.iconColor]?.lightBg ?? '' : ''
+})
+</script>
+
+<template>
+  <div v-if="shouldShowIcon">
+    <div
+      v-if="showIconMapIcon"
+      class="flex items-center justify-center"
+      :class="[
+        bgColorClass,
+        {
+          'rounded-lg': bgColorClass,
+        },
+      ]"
+      :style="{
+        width: `${iconSize?.width ?? 24}px`,
+        height: `${iconSize?.height ?? 24}px`,
+      }"
+    >
+      <GeneralIcon :icon="option.icon!" class="flex-none" :class="iconColor" />
+    </div>
+    <div></div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

packages/nc-gui/components/auth/onboarding/Question/Option/index.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+interface Props {
+  option: OnboardingOptionType
+  iconSize?: OnboardingQuestionType['iconSize']
+}
+
+const props = withDefaults(defineProps<Props>(), {})
+
+const { option } = toRefs(props)
+</script>
+
+<template>
+  <div
+    class="nc-onboarding-option"
+    :class="{
+      '!px-2 !rounded-xl': option.iconColor,
+    }"
+  >
+    <AuthOnboardingQuestionOptionIcon :option="option" :icon-size="iconSize" />
+    <div v-if="option.description" class="flex flex-col gap-1">
+      <div class="text-bodyDefaultSmBold text-nc-content-gray-subtle">
+        {{ option.value }}
+      </div>
+      <div class="text-bodyDefaultSm text-nc-content-gray-subtle2">
+        {{ option.description }}
+      </div>
+    </div>
+    <div v-else class="text-bodyBold text-nc-content-gray">
+      {{ option.value }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.nc-onboarding-option {
+  @apply flex items-center gap-2.5 px-3 py-2 border-1 border-nc-border-gray-medium rounded-lg cursor-pointer select-none transition-all duration-250;
+
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08);
+
+  &:hover:not(.nc-selected) {
+    @apply bg-nc-bg-gray-extralight;
+  }
+
+  &.nc-selected {
+    @apply border-nc-border-brand bg-nc-bg-brand !shadow-selected;
+  }
+}
+</style>

packages/nc-gui/components/auth/onboarding/Question/index.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+interface Props {
+  question: OnboardingQuestionType
+  questionIndex: number
+}
+
+const props = withDefaults(defineProps<Props>(), {})
+
+const { question, questionIndex } = toRefs(props)
+
+const { questionsMap, formState, onSelectOption, stepper, lastVisibleQuestionIndex } = useOnboardingFlow()
+
+const options = computed(() => {
+  if (ncIsFunction(question.value.options)) {
+    return question.value.options(formState.value) || []
+  }
+
+  return question.value.options || []
+})
+
+const anyOptionHasIcon = computed(() => {
+  return options.value.some((option) => option.iconType || (!option.iconType && option.icon))
+})
+
+const isOptionSelected = (option: OnboardingOptionType) => {
+  if (question.value.inputType === 'singleSelect') {
+    return formState.value[question.value.id] === option.value
+  }
+
+  if (question.value.inputType === 'multiSelect') {
+    return ((formState.value[question.value.id] || []) as string[]).includes(option.value)
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <h3 class="my-0 text-heading3 text-nc-content-gray-emphasis">{{ question.question }}</h3>
+    <div class="flex flex-wrap gap-4 children:(w-[calc(50%-8px)] flex-none)">
+      <template v-for="option of options" :key="option.value">
+        <AuthOnboardingQuestionOption
+          :option="option"
+          :icon-size="question.iconSize"
+          @click="onSelectOption(option, question, questionIndex)"
+          :class="{
+            '!justify-center': !anyOptionHasIcon,
+            'nc-selected': isOptionSelected(option),
+          }"
+        />
+      </template>
+    </div>
+  </div>
+</template>