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>