fix: fix storybook build

Author: danielroe

.storybook/main.ts

@@ -7,6 +7,38 @@ const config = {
   features: {
     backgrounds: false,
   },
+  async viteFinal(config) {
+    // Replace the built-in vue-docgen plugin with a fault-tolerant version.
+    // vue-docgen-api can crash on components that import types from other
+    // .vue files (it tries to parse the SFC with @babel/parser as plain TS).
+    // This wrapper catches those errors so the build doesn't fail.
+    const docgenPlugin = config.plugins?.find(
+      (p): p is Extract<typeof p, { name: string }> =>
+        !!p && typeof p === 'object' && 'name' in p && p.name === 'storybook:vue-docgen-plugin',
+    )
+
+    if (docgenPlugin && 'transform' in docgenPlugin) {
+      const hook = docgenPlugin.transform
+      // Vite plugin hooks can be a function or an object with a `handler` property
+      const originalFn = typeof hook === 'function' ? hook : hook?.handler
+      if (originalFn) {
+        const wrapped = async function (this: unknown, ...args: unknown[]) {
+          try {
+            return await originalFn.apply(this, args)
+          } catch {
+            return undefined
+          }
+        }
+        if (typeof hook === 'function') {
+          docgenPlugin.transform = wrapped as typeof hook
+        } else if (hook) {
+          hook.handler = wrapped as typeof hook.handler
+        }
+      }
+    }
+
+    return config
+  },
 } satisfies StorybookConfig
 
 export default config

CONTRIBUTING.md

@@ -1000,8 +1000,8 @@ Global application settings are added to the Storybook toolbar for easy testing
 
 - Changing `i18n` in the toolbar doesn't update the language. A manual story reload is required.
 - `autodocs` currently is non-functional due bugs, its usage is discouraged at this time.
-- `pnpm build-storybook` currently fails, use `pnpm storybook` to view the stories for the time being.
 - `pnpm storybook` may log warnings or non-breaking errors for Nuxt modules due to the lack of mocks. If the UI renders correctly, these can be safely ignored.
+- Do not `import type` from `.vue` files. The `vue-docgen-api` parser used by `@storybook/addon-docs` cannot follow type imports across SFCs and will crash. Extract shared types into a separate `.ts` file instead.
 
 ## Submitting changes
 

app/components/Select/Base.vue

@@ -1,17 +1,8 @@
 <script setup lang="ts">
-const model = defineModel<string | undefined>({ default: undefined })
-
-const SELECT_SIZES = {
-  none: '',
-  sm: 'text-xs px-2 py-1.75 rounded-md',
-  md: 'text-sm px-3 py-2.25 rounded-lg',
-  lg: 'text-base px-6 py-4 rounded-xl',
-}
+import type { SelectBaseProps } from './types'
+import { SELECT_SIZES } from './types'
 
-export type SelectBaseProps = {
-  disabled?: boolean
-  size?: keyof typeof SELECT_SIZES
-}
+const model = defineModel<string | undefined>({ default: undefined })
 
 const props = withDefaults(defineProps<SelectBaseProps>(), {
   size: 'md',

app/components/Select/Field.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SelectBaseProps } from './Base.vue'
+import type { SelectBaseProps } from './types'
 
 const SELECT_FIELD_SIZES = {
   sm: 'text-xs py-1.75 ps-2 pe-6 rounded-md',

app/components/Select/types.ts

@@ -0,0 +1,11 @@
+export const SELECT_SIZES = {
+  none: '',
+  sm: 'text-xs px-2 py-1.75 rounded-md',
+  md: 'text-sm px-3 py-2.25 rounded-lg',
+  lg: 'text-base px-6 py-4 rounded-xl',
+}
+
+export type SelectBaseProps = {
+  disabled?: boolean
+  size?: keyof typeof SELECT_SIZES
+}