From 84d9eb79f686133c60e9d47c760a1e9cc5495a52 Mon Sep 17 00:00:00 2001
From: Tobias Diez <code@tobiasdiez.com>
Date: Sat, 14 Oct 2023 10:43:37 +0800
Subject: [PATCH] feat: improve and document typescript support (#81)

* feat: improve and document typescript support

* fix linter and build

* fix example storybook
---
 README.md                                     |  8 +++++++
 .../vite/src/tests/explicit-types.stories.vue | 15 ++++++++++++
 src/components.d.ts                           | 24 ++++++++++---------
 src/types.ts                                  |  2 ++
 4 files changed, 38 insertions(+), 11 deletions(-)
 create mode 100644 examples/vite/src/tests/explicit-types.stories.vue

diff --git a/README.md b/README.md
index 2250b004..d551fd50 100644
--- a/README.md
+++ b/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.
diff --git a/examples/vite/src/tests/explicit-types.stories.vue b/examples/vite/src/tests/explicit-types.stories.vue
new file mode 100644
index 00000000..f19bd2d8
--- /dev/null
+++ b/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>
diff --git a/src/components.d.ts b/src/components.d.ts
index 5bc21e86..38811d1a 100644
--- a/src/components.d.ts
+++ b/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 }
diff --git a/src/types.ts b/src/types.ts
index b0f09c87..176237f5 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,3 +1,5 @@
+export type { Stories, Story } from './components'
+
 export interface Options {
   // define your plugin options here
 }