chore: migrate TypeScript Storybook stories to Vue format (#2853)

### 🔗 Linked issue

Addresses migration of all TypeScript story files to Vue story format
using storybook-vue-addon.

### 📚 Description

Migrated 10 TypeScript Storybook stories (*.stories.ts) to native Vue
format (*.stories.vue) for better DX with full editor support and
idiomatic Vue syntax.

**Before (TypeScript CSF):**
```typescript
const Template: StoryFnFn = (args) => ({
  setup() {
    return { args }
  },
  template: '<t-alert v-bind="args">{{args.message}}</t-alert>',
})
export const Default = Template.bind({})
export const Error = Template.bind({})
Error.args = { variant: 'error', message: 'oops!', show: true }
```

**After (Vue native):**
```vue
<template>
  <Stories title="t-alert" :component="TAlert">
    <Story title="Default">
      <t-alert :show="true"> Hi there! </t-alert>
    </Story>
    <Story title="Error">
      <t-alert :show="true" variant="error"> oops! </t-alert>
    </Story>
  </Stories>
</template>
```

**Changes:**
- Converted all component stories to Vue SFC format following existing
pattern (JabRefLogo.stories.vue, n-button.stories.vue)
- Preserved slot content usage where components accept content between
tags (e.g., t-alert, t-tag)
- Removed TypeScript story files
- Updated Storybook config to reflect Vue-only stories

<!-- START COPILOT CODING AGENT SUFFIX -->



<details>

<summary>Original prompt</summary>

> Migrate all typescript storybook story files (*.stories.ts) to vue
stories (*.stories.vue). The later are implemented using
https://github.com/tobiasdiez/storybook-vue-addon and you can see the
exsting vue stories as reference.


</details>



<!-- START COPILOT CODING AGENT TIPS -->
---

✨ Let Copilot coding agent [set things up for
you](https://github.com/JabRef/JabRefOnline/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot)
— coding agent works faster and does higher quality work when set up for
your repo.

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: tobiasdiez <[email protected]>
Co-authored-by: Tobias Diez <[email protected]>

Author: Copilot

.storybook/main.ts

@@ -2,7 +2,7 @@ import type { StorybookConfig } from '@nuxtjs/storybook'
 
 const config: StorybookConfig = {
   // Need to specify stories as workaround for https://github.com/storybookjs/storybook/issues/20761
-  stories: ['../components/*.stories.@(vue|ts)'],
+  stories: ['../components/*.stories.vue'],
   core: {
     // @ts-expect-error - need to update storybook types
     disableTelemetry: true,

components/t-alert.stories.ts

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+// @ts-expect-error: not yet compatible with 'bundler' module resolution
+import { TAlert } from '@variantjs/vue'
+</script>
+
+<template>
+  <Stories
+    title="t-alert"
+    :component="TAlert"
+  >
+    <Story title="Default">
+      <t-alert :show="true"> Hi there! </t-alert>
+    </Story>
+    <Story title="Error">
+      <t-alert
+        :show="true"
+        variant="error"
+      >
+        oops!
+      </t-alert>
+    </Story>
+    <Story title="Success">
+      <t-alert
+        :show="true"
+        variant="success"
+      >
+        success!
+      </t-alert>
+    </Story>
+  </Stories>
+</template>

components/t-alert.stories.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// @ts-expect-error: not yet compatible with 'bundler' module resolution
+import { TCheckbox } from '@variantjs/vue'
+</script>
+
+<template>
+  <Stories
+    title="t-checkbox"
+    :component="TCheckbox"
+  >
+    <Story title="Default">
+      <t-checkbox :checked="true" />
+    </Story>
+    <Story title="Error">
+      <t-checkbox
+        :checked="true"
+        variant="error"
+      />
+    </Story>
+    <Story title="Success">
+      <t-checkbox
+        :checked="true"
+        variant="success"
+      />
+    </Story>
+    <Story title="Plain">
+      <t-checkbox
+        :checked="true"
+        variant="plain"
+      />
+    </Story>
+  </Stories>
+</template>

components/t-checkbox.stories.ts

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// @ts-expect-error: not yet compatible with 'bundler' module resolution
+import { TDropdown } from '@variantjs/vue'
+</script>
+
+<template>
+  <Stories
+    title="t-dropdown"
+    :component="TDropdown"
+  >
+    <Story title="Default">
+      <t-dropdown text="Dropdown">
+        <div class="py-1 rounded-md shadow-2xs">
+          <a
+            href="#"
+            class="block px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100"
+            role="menuitem"
+          >
+            Your Profile
+          </a>
+          <a
+            href="#"
+            class="block px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100"
+            role="menuitem"
+          >
+            Settings
+          </a>
+          <a
+            href="#"
+            class="block px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100"
+            role="menuitem"
+          >
+            Sign out
+          </a>
+        </div>
+      </t-dropdown>
+    </Story>
+  </Stories>
+</template>

components/t-checkbox.stories.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+// @ts-expect-error: not yet compatible with 'bundler' module resolution
+import { TInput, TInputGroup } from '@variantjs/vue'
+</script>
+
+<template>
+  <Stories
+    title="t-input-group"
+    :component="TInputGroup"
+  >
+    <Story title="Default">
+      <t-input-group
+        label="Label"
+        feedback="Feedback"
+      >
+        <t-input value="Input text" />
+      </t-input-group>
+    </Story>
+    <Story title="Error">
+      <t-input-group
+        variant="error"
+        label="Label"
+        feedback="Feedback"
+      >
+        <t-input
+          variant="error"
+          value="Input text"
+        />
+      </t-input-group>
+    </Story>
+    <Story title="Success">
+      <t-input-group
+        variant="success"
+        label="Label"
+        feedback="Feedback"
+      >
+        <t-input
+          variant="success"
+          value="Input text"
+        />
+      </t-input-group>
+    </Story>
+    <Story title="Important">
+      <t-input-group
+        variant="plain"
+        label="Label"
+        feedback="Feedback"
+      >
+        <t-input
+          variant="plain"
+          value="Input text"
+        />
+      </t-input-group>
+    </Story>
+  </Stories>
+</template>