feat: improve and document typescript support (#81)

* feat: improve and document typescript support

* fix linter and build

* fix example storybook

README.md

@@ -127,6 +127,14 @@ There are a few minor differences to standard MDX documentation pages:
   </docs>
   ```
 
+## Typescript support
+
+Volar should be able to automatically recognize the `Stories` and `Story` components. It is also possible to import them from `storybook-vue-addon`:
+
+```ts
+import type { Stories, Story } from 'storybook-vue-addon/types'
+```
+
 ## Manual usage
 
 If for whatever reason you process Storybook stories in your build pipeline, you probably want to first transpile the Vue stories to classical CSF stories by adding `storybook-vue-addon` to your build.

examples/vite/src/tests/explicit-types.stories.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import MyButton from '../components/Button.vue'
+import type { Story, Stories } from '../../../../src/types'
+</script>
+
+<template>
+  <Stories
+    :component="MyButton"
+    title="Tests/Explicit types"
+  >
+    <Story title="Default">
+      <MyButton label="Button" />
+    </Story>
+  </Stories>
+</template>

src/components.d.ts

@@ -26,11 +26,6 @@ type VueComponent<Props> = import('vue').DefineComponent<
   {}
 >
 
-/**
- * Metadata to configure the stories for a component.
- *
- * @see [Default export](https://storybook.js.org/docs/vue/api/csf#default-export)
- */
 interface StoriesProps {
   /**
    * Title of the component which will be presented in the navigation. **Should be unique.**
@@ -47,15 +42,16 @@ interface StoriesProps {
    */
   component?: import('vue').DefineComponent
 }
-type Stories = VueComponent<StoriesProps>
-
-import { Meta, StoryObj } from '@storybook/vue3'
 
 /**
- * Story that represents a component example.
+ * Metadata to configure the stories for a component.
  *
- * @see [Named Story exports](https://storybook.js.org/docs/vue/api/csf#named-story-exports)
+ * @see [Default export](https://storybook.js.org/docs/vue/api/csf#default-export)
  */
+type Stories = VueComponent<StoriesProps>
+
+import { Meta, StoryObj } from '@storybook/vue3'
+
 interface StoryProps {
   /**
    * Display name in the UI.
@@ -68,6 +64,12 @@ interface StoryProps {
    */
   play?: StoryObj<Meta<VueComponent<any>>>['play']
 }
+
+/**
+ * Story that represents a component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/vue/api/csf#named-story-exports)
+ */
 type Story = VueComponent<StoryProps>
 
 // Register components globally
@@ -79,4 +81,4 @@ declare module '@vue/runtime-core' {
   }
 }
 
-export {}
+export { Stories, Story }

src/types.ts

@@ -1,3 +1,5 @@
+export type { Stories, Story } from './components'
+
 export interface Options {
   // define your plugin options here
 }