storybook: moar!

next-ui/src/components/announcement/Card.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+
+import * as Stories from './Card.stories';
+
+<Meta of={Stories} />
+
+# AnnouncementCard
+
+A card showing the details of a Komga announcement.
+
+<Canvas of={Stories.Unread} />

next-ui/src/components/release/Card.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+
+import * as Stories from './Card.stories';
+
+<Meta of={Stories} />
+
+# ReleaseCard
+
+A card showing the details of a Komga release.
+
+<Canvas of={Stories.Default} />

next-ui/src/components/user/form/ChangePassword.mdx

@@ -0,0 +1,13 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+
+import * as Stories from './ChangePassword.stories';
+
+<Meta of={Stories} />
+
+# UserChangePassword
+
+A form to update a user's password, which checks that both passwords are the same.
+
+Should be wrapped in a `<v-form>` or `ConfirmEdit` dialog.
+
+<Canvas of={Stories.Default} />

next-ui/src/fragments/fragment/BuildCommit.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+
+import * as Stories from './BuildCommit.stories';
+
+<Meta of={Stories} />
+
+# FragmentBuildCommit
+
+A button showing the current Github commit sha, retrieved from the Komga server. Clicking on the button will redirect to the particular commit at Github.
+
+<Canvas of={Stories.Default} />

next-ui/src/fragments/fragment/BuildVersion.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+
+import * as Stories from './BuildVersion.stories';
+
+<Meta of={Stories} />
+
+# FragmentBuildVersion
+
+A button showing the current version of the Komga server. Will show a dot badge if a new update is available.
+
+<Canvas of={Stories.Default} />

next-ui/src/fragments/fragment/LocaleSelector.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+
+import * as Stories from './LocaleSelector.stories';
+
+<Meta of={Stories} />
+
+# FragmentLocaleSelector
+
+A button that will display a menu when clicked, with a choice of available locales.
+
+<Canvas of={Stories.Default} />

next-ui/src/fragments/fragment/LocaleSelector.stories.ts

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import LocaleSelector from './LocaleSelector.vue'
+import { expect } from 'storybook/test'
+
+const meta = {
+  component: LocaleSelector,
+  render: (args: object) => ({
+    components: { LocaleSelector },
+    setup() {
+      return { args }
+    },
+    template: '<LocaleSelector />',
+  }),
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+  },
+  args: {},
+} satisfies Meta<typeof LocaleSelector>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+}
+
+export const Clicked: Story = {
+  args: {},
+  play: async ({ canvas, userEvent }) => {
+    await expect(canvas.getByRole('button')).toBeEnabled()
+
+    await userEvent.click(canvas.getByRole('button'))
+  },
+}

next-ui/src/fragments/fragment/SnackQueue.mdx

@@ -0,0 +1,3 @@
+# FragmentSnackQueue
+
+A Vuetify [Snackbar Queue](https://vuetifyjs.com/en/components/snackbar-queue/#usage) that is hooked up to the Pinia `messagesStore.messages`.

next-ui/src/fragments/fragment/SnackQueue.stories.ts

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import SnackQueue from './SnackQueue.vue'
+import { useMessagesStore } from '@/stores/messages'
+
+const meta = {
+  component: SnackQueue,
+  render: (args: object) => ({
+    components: { SnackQueue },
+    setup() {
+      return { args }
+    },
+    template: '<SnackQueue />',
+  }),
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+  },
+  args: {},
+} satisfies Meta<typeof SnackQueue>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+  play: () => {
+    const messagesStore = useMessagesStore()
+    messagesStore.messages = [{ text: 'Default notification' }]
+  },
+}
+
+export const NoTimeout: Story = {
+  args: {},
+  play: () => {
+    const messagesStore = useMessagesStore()
+    messagesStore.messages = [
+      {
+        text: 'I will not timeout, click me to make me go away',
+        timeout: -1,
+        timer: false,
+      },
+    ]
+  },
+}
+
+export const Success: Story = {
+  args: {},
+  play: () => {
+    const messagesStore = useMessagesStore()
+    messagesStore.messages = [
+      {
+        text: 'Success',
+        color: 'success',
+      },
+    ]
+  },
+}
+
+export const Warning: Story = {
+  args: {},
+  play: () => {
+    const messagesStore = useMessagesStore()
+    messagesStore.messages = [
+      {
+        text: 'Warning',
+        color: 'warning',
+      },
+    ]
+  },
+}
+
+export const Error: Story = {
+  args: {},
+  play: () => {
+    const messagesStore = useMessagesStore()
+    messagesStore.messages = [
+      {
+        text: 'Error',
+        color: 'error',
+      },
+    ]
+  },
+}
+
+export const Info: Story = {
+  args: {},
+  play: () => {
+    const messagesStore = useMessagesStore()
+    messagesStore.messages = [
+      {
+        text: 'Info',
+        color: 'info',
+      },
+    ]
+  },
+}

next-ui/src/fragments/fragment/SnackQueue.vue

@@ -2,6 +2,7 @@
   <v-snackbar-queue
     v-model="messagesStore.messages"
     timer
+    close-on-content-click
   />
 </template>
 

next-ui/src/fragments/fragment/ThemeSelector.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+
+import * as Stories from './ThemeSelector.stories';
+
+<Meta of={Stories} />
+
+# FragmentThemeSelector
+
+A cycling button to change the theme.
+
+<Canvas of={Stories.Default} />

next-ui/src/fragments/fragment/ThemeSelector.stories.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import ThemeSelector from './ThemeSelector.vue'
+
+const meta = {
+  component: ThemeSelector,
+  render: (args: object) => ({
+    components: { ThemeSelector },
+    setup() {
+      return { args }
+    },
+    template: '<ThemeSelector />',
+  }),
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+  },
+  args: {},
+} satisfies Meta<typeof ThemeSelector>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+}

next-ui/src/fragments/fragment/ThemeSelector.vue

@@ -2,6 +2,7 @@
   <v-btn
     :icon="themeIcon"
     @click="cycleTheme()"
+    aria-label="theme selector"
   />
 </template>
 

next-ui/src/fragments/fragment/user/Table.mdx

@@ -0,0 +1,18 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+
+import * as Stories from './Table.stories';
+
+<Meta of={Stories} />
+
+# FragmentUserTable
+
+A Vuetify [Data Table](https://vuetifyjs.com/en/components/data-tables/basics/) to display a list of users.
+
+Actions are available for each user:
+- Change password
+- Edit (not available for the current user)
+- Delete (not available for the current user)
+
+Actions are hooked up in the `users` page.
+
+<Canvas of={Stories.Default} />

next-ui/src/fragments/fragment/user/form/CreateEdit.mdx

@@ -0,0 +1,13 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+
+import * as Stories from './CreateEdit.stories';
+
+<Meta of={Stories} />
+
+# FragmentUserFormCreateEdit
+
+A form to either create or edit a user.
+
+Should be wrapped in a `<v-form>` or `ConfirmEdit` dialog.
+
+<Canvas of={Stories.CreateUser} />

next-ui/src/pages/server/announcements.mdx

@@ -0,0 +1,13 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+
+import * as Stories from './announcements.stories';
+
+<Meta of={Stories} />
+
+# Announcements
+
+Page showing the announcements retrieved from the Komga server.
+
+Announcements can be marked as read either one by one, or in bulk using the floating action button.
+
+<Canvas of={Stories.Unread} />

next-ui/src/pages/server/updates.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+
+import * as Stories from './updates.stories';
+
+<Meta of={Stories} />
+
+# Updates
+
+Page showing the updates (releases) retrieved from the Komga server.
+
+The latest and current release will display a chip next to the version number.
+
+The top banner will inform the user whether an update is available or not.
+
+<Canvas of={Stories.Latest} />

next-ui/src/pages/server/users.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+
+import * as Stories from './users.stories';
+
+<Meta of={Stories} />
+
+# Users
+
+Page showing the users configured on the server.
+
+<Canvas of={Stories.Default} />