feat: add auto-import support in storybook #137

teritorio · Feb 20, 2024 · 20ce195 · 20ce195
1 parent 1dbabb8
commit 20ce195
Show file tree

Hide file tree

Showing 14 changed files with 369 additions and 55 deletions.
diff --git a/.storybook/auto-imports.d.ts b/.storybook/auto-imports.d.ts
@@ -0,0 +1,203 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const PropertyTranslationsContextEnum: typeof import('../composables/usePropertyTranslations')['PropertyTranslationsContextEnum']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useLink: typeof import('vue-router')['useLink']
+  const usePropertyTranslations: typeof import('../composables/usePropertyTranslations')['default']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}
+// for vue template auto import
+import { UnwrapRef } from 'vue'
+declare module 'vue' {
+  interface GlobalComponents {}
+  interface ComponentCustomProperties {
+    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly PropertyTranslationsContextEnum: UnwrapRef<typeof import('../composables/usePropertyTranslations')['PropertyTranslationsContextEnum']>
+    readonly computed: UnwrapRef<typeof import('vue')['computed']>
+    readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
+    readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
+    readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
+    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
+    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
+    readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
+    readonly h: UnwrapRef<typeof import('vue')['h']>
+    readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
+    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
+    readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
+    readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
+    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
+    readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
+    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
+    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
+    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
+    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
+    readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
+    readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
+    readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
+    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
+    readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
+    readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
+    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
+    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
+    readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
+    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
+    readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
+    readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
+    readonly ref: UnwrapRef<typeof import('vue')['ref']>
+    readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
+    readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
+    readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
+    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
+    readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
+    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
+    readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
+    readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
+    readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
+    readonly unref: UnwrapRef<typeof import('vue')['unref']>
+    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
+    readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
+    readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
+    readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
+    readonly usePropertyTranslations: UnwrapRef<typeof import('../composables/usePropertyTranslations')['default']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
+    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
+    readonly watch: UnwrapRef<typeof import('vue')['watch']>
+    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
+    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
+    readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
+  }
+}
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {}
+  interface ComponentCustomProperties {
+    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly PropertyTranslationsContextEnum: UnwrapRef<typeof import('../composables/usePropertyTranslations')['PropertyTranslationsContextEnum']>
+    readonly computed: UnwrapRef<typeof import('vue')['computed']>
+    readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
+    readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
+    readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
+    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
+    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
+    readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
+    readonly h: UnwrapRef<typeof import('vue')['h']>
+    readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
+    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
+    readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
+    readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
+    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
+    readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
+    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
+    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
+    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
+    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
+    readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
+    readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
+    readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
+    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
+    readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
+    readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
+    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
+    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
+    readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
+    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
+    readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
+    readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
+    readonly ref: UnwrapRef<typeof import('vue')['ref']>
+    readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
+    readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
+    readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
+    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
+    readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
+    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
+    readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
+    readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
+    readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
+    readonly unref: UnwrapRef<typeof import('vue')['unref']>
+    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
+    readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
+    readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
+    readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
+    readonly usePropertyTranslations: UnwrapRef<typeof import('../composables/usePropertyTranslations')['default']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
+    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
+    readonly watch: UnwrapRef<typeof import('vue')['watch']>
+    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
+    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
+    readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
+  }
+}
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,5 +1,7 @@
 import { resolve } from 'node:path'
 import type { StorybookConfig } from '@storybook/vue3-vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import { mergeConfig } from 'vite'
 
 const config: StorybookConfig = {
   stories: [
@@ -18,21 +20,30 @@ const config: StorybookConfig = {
     autodocs: 'tag',
   },
   viteFinal: async (config) => {
-    (config.define = { 'process.env': {} })
-    if (config.resolve) {
-      config.resolve.alias = {
-        ...config.resolve.alias,
-        '~': resolve(__dirname, '../'),
-        // Bad pratice to import this way, we should take benefit of auto-imports
-        '#app': resolve(__dirname, '../node_modules/nuxt/dist/app'),
-        '#head': resolve(__dirname, '../node_modules/nuxt/dist/head/runtime'),
-        '#build': resolve(__dirname, '../.nuxt'),
-        '#imports': resolve(__dirname, '../.nuxt/imports'),
-        '#image': resolve(__dirname, '../node_modules/@nuxt/image-edge/dist/runtime'),
-      }
-    }
-
-    return config
+    return mergeConfig(config, {
+      define: {
+        'process.env': {},
+      },
+      plugins: [
+        AutoImport({
+          imports: ['vue', 'vue-router'],
+          dirs: ['./composables'],
+          vueTemplate: true,
+          dts: resolve(__dirname, 'auto-imports.d.ts'),
+        }),
+      ],
+      resolve: {
+        alias: {
+          '~': resolve(__dirname, '../'),
+          // Bad pratice to import this way, we should take benefit of auto-imports
+          '#app': resolve(__dirname, '../node_modules/nuxt/dist/app'),
+          '#head': resolve(__dirname, '../node_modules/nuxt/dist/head/runtime'),
+          '#build': resolve(__dirname, '../.nuxt'),
+          '#imports': resolve(__dirname, '../.nuxt/imports'),
+          '#image': resolve(__dirname, '../node_modules/@nuxt/image-edge/dist/runtime'),
+        },
+      },
+    })
   },
 }
 export default config
diff --git a/components/Fields/Field.stories.ts b/components/Fields/Field.stories.ts
@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import Field from './Field.vue'
-import { PropertyTranslationsContextEnum } from '~/composables/usePropertyTranslations'
 
 const meta = {
   component: Field,
@@ -46,37 +45,43 @@ export const DefaultListMany = {
   },
 } satisfies Story
 
-// const description
-//   = 'Itinéraire très intéressant, d\'une part pour sa variété paysagère accentuée par la traversée fréquente de cours d\'eau et d\'autre part, par la qualité du patrimoine bâti : maisons traditionnelles landaises, église en garluche. \n\nDistance : 10,2 km - Durée : 4h45 - Animaux tenus en laisse  - Sentier pédestre et VTT \nFiche rando disponible dans le topoguide du Département des Landes du Pays de Born n°15 (en vente : 2 €)'
+export const NoValue = {
+  args: {
+    ...Default.args,
+    properties: {
+      metadata: { id: 0 },
+    },
+  },
+} satisfies Story
 
-// export const NoValue = bind(Field, {
-//   ...defaultProps,
-//   properties: {
-//     metadata: { id: 0 },
-//   },
-// })
+export const Label = {
+  args: {
+    ...Default.args,
+    field: {
+      ...Default.args.field,
+      label: true,
+    },
+  },
+} satisfies Story
 
-// export const Label = bind(Field, {
-//   ...defaultProps,
-//   field: {
-//     ...defaultProps.field,
-//     label: true,
-//   },
-// })
+export const Route = {
+  args: {
+    ...Default.args,
+    field: { field: 'route' },
+    properties: {
+      'metadata': { id: 0 },
+      'route:hiking:difficulty': 'easy',
+      'route:hiking:duration': 285,
+      'route:hiking:length': 10.2,
+      'route:mtb:difficulty': 'easy',
+      'route:mtb:duration': 90,
+      'route:mtb:length': 10.2,
+    },
+  },
+} satisfies Story
 
-// export const Route = bind(Field, {
-//   ...defaultProps,
-//   field: { field: 'route' },
-//   properties: {
-//     'metadata': { id: 0 },
-//     'route:hiking:difficulty': 'easy',
-//     'route:hiking:duration': 285,
-//     'route:hiking:length': 10.2,
-//     'route:mtb:difficulty': 'easy',
-//     'route:mtb:duration': 90,
-//     'route:mtb:length': 10.2,
-//   },
-// })
+// const description
+//   = 'Itinéraire très intéressant, d\'une part pour sa variété paysagère accentuée par la traversée fréquente de cours d\'eau et d\'autre part, par la qualité du patrimoine bâti : maisons traditionnelles landaises, église en garluche. \n\nDistance : 10,2 km - Durée : 4h45 - Animaux tenus en laisse  - Sentier pédestre et VTT \nFiche rando disponible dans le topoguide du Département des Landes du Pays de Born n°15 (en vente : 2 €)'
 
 // export const StartEndDate = bind(Field, {
 //   ...defaultProps,

diff --git a/components/Fields/Field.vue b/components/Fields/Field.vue
@@ -16,8 +16,6 @@ import Stars from '~/components/Fields/Stars.vue'
 import ExternalLink from '~/components/UI/ExternalLink.vue'
 import FieldsHeader from '~/components/UI/FieldsHeader.vue'
 import type { ApiPoiProperties, FieldsListItem } from '~/lib/apiPois'
-import type { PropertyTranslationsContextEnum } from '~/composables/usePropertyTranslations'
-import usePropertyTranslations from '~/composables/usePropertyTranslations'
 
 export function isFiledEmpty(
   field: FieldsListItem,

diff --git a/components/Fields/OpeningHours.test.js b/components/Fields/OpeningHours.test.js
@@ -2,7 +2,6 @@ import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 
 import OpeningHours from '~/components/Fields/OpeningHours.vue'
-import { PropertyTranslationsContextEnum } from '~/composables/usePropertyTranslations'
 import { siteStore } from '~/stores/site'
 
 const realPinia = createPinia()

diff --git a/components/Fields/OpeningHours.vue b/components/Fields/OpeningHours.vue
@@ -6,7 +6,6 @@ import type { PropType } from 'vue'
 
 import { defineNuxtComponent } from '#app'
 import RelativeDate from '~/components/UI/RelativeDate.vue'
-import { PropertyTranslationsContextEnum } from '~/composables/usePropertyTranslations'
 import { siteStore } from '~/stores/site'
 
 const PointTime = [/^collection_times$/, /^service_times$/]

diff --git a/components/Fields/RoutesField.story.vue b/components/Fields/RoutesField.story.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import RoutesField from '~/components/Fields/RoutesField.vue'
-import { PropertyTranslationsContextEnum } from '~/composables/usePropertyTranslations'
 
 const defaultProps = {
   context: PropertyTranslationsContextEnum.Details,

diff --git a/components/Fields/RoutesField.vue b/components/Fields/RoutesField.vue
@@ -4,7 +4,6 @@ import type { PropType } from 'vue'
 import { defineNuxtComponent } from '#app'
 import FieldsHeader from '~/components/UI/FieldsHeader.vue'
 import type { ApiPoiProperties } from '~/lib/apiPois'
-import { PropertyTranslationsContextEnum } from '~/composables/usePropertyTranslations'
 
 interface Route {
   duration?: number

diff --git a/components/PoisCard/Fields.vue b/components/PoisCard/Fields.vue
@@ -5,7 +5,6 @@ import type { PropType } from 'vue'
 import { defineNuxtComponent } from '#app'
 import Field from '~/components/Fields/Field.vue'
 import type { ApiPoiProperties, FieldsListItem } from '~/lib/apiPois'
-import { PropertyTranslationsContextEnum } from '~/composables/usePropertyTranslations'
 
 export default defineNuxtComponent({
   components: {

diff --git a/components/PoisDetails/FieldsGroup.vue b/components/PoisDetails/FieldsGroup.vue
@@ -13,7 +13,6 @@ import type {
   FieldsListGroup,
   FieldsListItem,
 } from '~/lib/apiPois'
-import { PropertyTranslationsContextEnum } from '~/composables/usePropertyTranslations'
 
 export default defineNuxtComponent({
   name: 'FieldsGroup',