Skip to content

Commit 0c4f115

Browse files
Copilottobiasdiez
Copilot
and
tobiasdiez
authored
chore: add more Storybook stories (#2854)
### 🔗 Linked issue Resolves the requirement to add Storybook stories for custom components. ### 📚 Description Added stories for all reusable custom components that lacked coverage: - **DownloadButton** - Icon toggle and custom text variants - **HorizontalRule** - Centered text content variants - **PasswordInput** - Show/hide toggle functionality - **DocumentEditorHeader** - Section header display - **DocumentEditorInput** - Auto-growing text input behavior - **ModalDialog** - v-model controlled visibility with custom content slots - **tagify** - Input/textarea modes with whitelist autocomplete All stories follow the existing Vue SFC pattern with TypeScript. Total coverage: 19 story files covering all reusable custom components. Excluded from coverage: page-level components with GraphQL/store dependencies (NavBar, SideBar, DocumentEditor), landing page sections, and trivial wrappers. **Example story structure:** ```vue <script setup lang="ts"> import DownloadButton from './DownloadButton.vue' </script> <template> <Stories title="DownloadButton" :component="DownloadButton"> <Story title="Default"> <DownloadButton text="Download JabRef" href="https://github.com/JabRef/jabref/releases/latest" /> </Story> <Story title="Without Icon"> <DownloadButton text="Download" href="#" :show-icon="false" /> </Story> </Stories> </template> ``` <!-- START COPILOT CODING AGENT SUFFIX --> <details> <summary>Original prompt</summary> > Add more storybook stories (in vue format), so that ideally all our custom components are covered. </details> <!-- START COPILOT CODING AGENT TIPS --> --- 💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more [Copilot coding agent tips](https://gh.io/copilot-coding-agent-tips) in the docs. --------- Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: tobiasdiez <[email protected]>
1 parent ba3d7f4 commit 0c4f115

File tree

7 files changed

+206
-0
lines changed

7 files changed

+206
-0
lines changed

‎components/DocumentEditorHeader.stories.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script setup lang="ts">
2+
import DocumentEditorHeader from './DocumentEditorHeader.vue'
3+
</script>
4+
5+
<template>
6+
<Stories
7+
title="DocumentEditorHeader"
8+
:component="DocumentEditorHeader"
9+
>
10+
<Story title="Default">
11+
<DocumentEditorHeader heading="Document Title" />
12+
</Story>
13+
<Story title="Different Sections">
14+
<div class="space-y-4">
15+
<DocumentEditorHeader heading="Required Fields" />
16+
<DocumentEditorHeader heading="Optional Fields" />
17+
<DocumentEditorHeader heading="General" />
18+
</div>
19+
</Story>
20+
</Stories>
21+
</template>

‎components/DocumentEditorInput.stories.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script setup lang="ts">
2+
import { ref } from 'vue'
3+
import DocumentEditorInput from './DocumentEditorInput.vue'
4+
5+
const shortText = ref('Short text')
6+
const longText = ref(
7+
'This is a much longer text that demonstrates auto-growing behavior',
8+
)
9+
</script>
10+
11+
<template>
12+
<Stories
13+
title="DocumentEditorInput"
14+
:component="DocumentEditorInput"
15+
>
16+
<Story title="Empty">
17+
<DocumentEditorInput />
18+
</Story>
19+
<Story title="With Short Text">
20+
<DocumentEditorInput v-model="shortText" />
21+
</Story>
22+
<Story title="With Long Text">
23+
<DocumentEditorInput v-model="longText" />
24+
</Story>
25+
</Stories>
26+
</template>

‎components/DownloadButton.stories.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script setup lang="ts">
2+
import DownloadButton from './DownloadButton.vue'
3+
</script>
4+
5+
<template>
6+
<Stories
7+
title="DownloadButton"
8+
:component="DownloadButton"
9+
>
10+
<Story title="Default">
11+
<DownloadButton
12+
text="Download JabRef"
13+
href="https://github.com/JabRef/jabref/releases/latest"
14+
/>
15+
</Story>
16+
<Story title="Without Icon">
17+
<DownloadButton
18+
text="Download"
19+
href="#"
20+
:show-icon="false"
21+
/>
22+
</Story>
23+
<Story title="Custom Text">
24+
<DownloadButton
25+
text="Get Latest Version"
26+
href="#"
27+
/>
28+
</Story>
29+
</Stories>
30+
</template>

‎components/HorizontalRule.stories.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script setup lang="ts">
2+
import HorizontalRule from './HorizontalRule.vue'
3+
</script>
4+
5+
<template>
6+
<Stories
7+
title="HorizontalRule"
8+
:component="HorizontalRule"
9+
>
10+
<Story title="Default (no content)">
11+
<HorizontalRule />
12+
</Story>
13+
<Story title="With Text">
14+
<HorizontalRule content="OR" />
15+
</Story>
16+
<Story title="With Longer Text">
17+
<HorizontalRule content="Continue with" />
18+
</Story>
19+
</Stories>
20+
</template>

‎components/ModalDialog.stories.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<script setup lang="ts">
2+
import { ref } from 'vue'
3+
import ModalDialog from './ModalDialog.vue'
4+
5+
const showSimpleModal = ref(false)
6+
const showCustomModal = ref(false)
7+
</script>
8+
9+
<template>
10+
<Stories
11+
title="ModalDialog"
12+
:component="ModalDialog"
13+
>
14+
<Story title="Simple Modal">
15+
<div>
16+
<n-button @click="showSimpleModal = true">Open Modal</n-button>
17+
<ModalDialog
18+
v-model="showSimpleModal"
19+
header="Simple Modal"
20+
>
21+
<p>This is a simple modal dialog with default content and footer.</p>
22+
</ModalDialog>
23+
</div>
24+
</Story>
25+
<Story title="With Custom Content">
26+
<div>
27+
<n-button @click="showCustomModal = true">Open Modal</n-button>
28+
<ModalDialog
29+
v-model="showCustomModal"
30+
header="Confirmation Dialog"
31+
>
32+
<p class="text-lg">
33+
Are you sure you want to proceed with this action?
34+
</p>
35+
<p class="text-sm text-gray-500 mt-2">
36+
This action cannot be undone.
37+
</p>
38+
</ModalDialog>
39+
</div>
40+
</Story>
41+
</Stories>
42+
</template>

‎components/PasswordInput.stories.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script setup lang="ts">
2+
import PasswordInput from './PasswordInput.vue'
3+
</script>
4+
5+
<template>
6+
<Stories
7+
title="PasswordInput"
8+
:component="PasswordInput"
9+
>
10+
<Story title="Default">
11+
<PasswordInput placeholder="Enter password" />
12+
</Story>
13+
<Story title="With Value">
14+
<PasswordInput
15+
placeholder="Password"
16+
value="SecretPassword123"
17+
/>
18+
</Story>
19+
</Stories>
20+
</template>

‎components/tagify.stories.vue‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!-- eslint-disable vue/multi-word-component-names -->
2+
<script setup lang="ts">
3+
import { ref } from 'vue'
4+
import Tagify from './tagify.vue'
5+
6+
const inputTags = ref([])
7+
const textareaTags = ref([])
8+
const whitelistTags = ref([])
9+
</script>
10+
11+
<template>
12+
<Stories
13+
title="tagify"
14+
:component="Tagify"
15+
>
16+
<Story title="Input Type">
17+
<Tagify
18+
type="input"
19+
:value="inputTags"
20+
delimiters=","
21+
:whitelist="[]"
22+
/>
23+
</Story>
24+
<Story title="Textarea Type">
25+
<Tagify
26+
type="textarea"
27+
:value="textareaTags"
28+
delimiters=","
29+
:whitelist="[]"
30+
/>
31+
</Story>
32+
<Story title="With Whitelist">
33+
<Tagify
34+
type="input"
35+
:value="whitelistTags"
36+
delimiters=","
37+
:whitelist="[
38+
{ value: 'JavaScript' },
39+
{ value: 'TypeScript' },
40+
{ value: 'Vue.js' },
41+
{ value: 'React' },
42+
{ value: 'Angular' },
43+
]"
44+
/>
45+
</Story>
46+
</Stories>
47+
</template>

0 commit comments

Comments
 (0)